@tuki-io/tuki-widgets 0.0.156 → 0.0.158

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

@@ -140,7 +140,8 @@ const API = {
     ASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/createLineAssociation/:token",
     CHECK_DESTINATION_NUMBER: "/api/provision/:siteId/check-dn",
     UPDATE_LINE_FIELDS: "/api/provision/:siteId/lineFields/:pkid/:token",
-    UPDATE_DEVICE_FIELDS: "/api/provision/:siteId/deviceFields/:deviceName/:token"
+    UPDATE_DEVICE_FIELDS: "/api/provision/:siteId/deviceFields/:deviceName/:token",
+    TRANSLATION_PATTERN_CUCM: "/dcp/api/sites/:cucmId/translation-pattern",
 };
 const REGEX_PATTERN = {
     EMAIL: '^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))' +
@@ -457,15 +458,20 @@ class SimplifiedUser {
             this.pagerNumber = user.pagerNumber;
             this.displayName = user.displayName;
             this.cucmId = user.cucmId;
+            this.lines = user.lines;
             if (user.devices && user.devices.length) {
                 this.devices = user.devices.map((device) => new Device(device));
                 if (user.lines && user.lines.length) {
                     this.devices.forEach(device => {
                         if (device && device.lineAssociations && device.lineAssociations.length) {
-                            device.lineAssociations.forEach(lineAssociation => {
+                            device.lineAssociations.forEach((lineAssociation) => {
                                 lineAssociation.callingSearchSpace = this.getLineVal(lineAssociation, user.lines, 'callingSearchSpace');
                                 lineAssociation.textLabel = lineAssociation.textLabel || this.getLineVal(lineAssociation, user.lines, 'textLabel') || '';
                                 lineAssociation.alertingName = lineAssociation.alertingName || this.getLineVal(lineAssociation, user.lines, 'alertingName') || '';
+                                const line = user.lines.find((line) => line.pkid === lineAssociation.linePkid);
+                                if (line) {
+                                    lineAssociation.mappedDids = line.mappedDids;
+                                }
                             });
                         }
                     });
@@ -941,6 +947,14 @@ class UserService {
             // .pipe(this.handleError(true, true));
         }));
     }
+    editTranslationPattern(cucmId, oldpattern, newPattern, extension, routePartitionName, description) {
+        const params = {
+            originalpattern: oldpattern,
+        };
+        const URL = API.TRANSLATION_PATTERN_CUCM.replace(':cucmId', cucmId);
+        return this.apiService
+            .put(URL, { calledPartyTransformationMask: extension, pattern: newPattern, routePartitionName: routePartitionName, description }, params);
+    }
     processUserChangesToCache() {
         const calls = [];
         const body = UtilsService.diff(this.originUser.getUserDetailsSavableData(), this.user.getUserDetailsSavableData(), 'user');
@@ -1763,11 +1777,20 @@ class UserCallingComponent {
         var _a, _b, _c, _d;
         return ((_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.devices[0]) && ((_d = (_c = this.userService) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.devices[0].lineAssociations[0].form);
     }
+    get isWebex() {
+        return localStorage.getItem('webexUUID') && localStorage.getItem('webexUUID') !== 'null';
+    }
     get formControl() {
         var _a;
         const control = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get('directoryNumber');
         return control;
     }
+    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() {
         var _a, _b;
         return (_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.devices[0].lineAssociations[0];
@@ -1783,7 +1806,14 @@ class UserCallingComponent {
     ngOnInit() {
         // this.getData();
     }
-    onDirectoryNumberChange(value) {
+    onExtensionLineChange(event) {
+        var _a, _b, _c, _d, _e, _f;
+        const value = event.target.innerText.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);
+    }
+    onDirectoryNumberChange(event) {
+        const value = event.target.innerText.trim();
         if (this.lineAssociation && this.lineAssociation.directoryNumber) {
             // @ts-ignore
             this.userService.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber = value;
@@ -1821,10 +1851,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;\"></td>\r\n                <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n                  <span>{{ formControl.value }}</span>\r\n                  <img style=\"margin-left: .5rem;\" src=\"assets/icons/copy-regular.svg\" width=\"16\" alt=\"\">\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                  <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"] });
 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;\"></td>\r\n                <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n                  <span>{{ formControl.value }}</span>\r\n                  <img style=\"margin-left: .5rem;\" src=\"assets/icons/copy-regular.svg\" width=\"16\" alt=\"\">\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                  <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"] }]
         }], ctorParameters: function () { return [{ type: UserService }, { type: DnsService }]; }, propDecorators: { siteId: [{
                 type: Input
             }], userId: [{
@@ -1952,8 +1982,15 @@ class UserManageWidgetComponent {
         if (!this.userService.hasUnsavedChanges() || ((_a = this.form) === null || _a === void 0 ? void 0 : _a.invalid)) {
             return;
         }
-        if (this.user.devices[0].lineAssociations[0] && !this.user.devices[0].lineAssociations[0].equals(this.userService.originUser.devices[0].lineAssociations[0])) {
-            return this.userService.saveNewLine();
+        this.dataPending = true;
+        if (this.user.devices[0].lineAssociations[0] && !this.user.devices[0].lineAssociations[0].equals(this.userService.originUser.devices[0].lineAssociations[0])
+            || (this.user.lines && this.userService.originUser.lines && this.user.lines[0].mappedDids[0] !== this.userService.originUser.lines[0].mappedDids[0])) {
+            const subscription = this.userService.editTranslationPattern(this.user.cucmId, this.userService.originUser.lines && this.userService.originUser.lines[0].mappedDids[0] || '', this.user.lines && this.user.lines[0].mappedDids[0], this.userService.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber, this.userService.originUser.devices[0].lineAssociations[0].directoryNumber.routePartitionName, this.userService.originUser.lines && this.userService.originUser.lines[0].didPatterns[0].description || '').subscribe(() => {
+                this.dataPending = false;
+                this.onSave.next("user has been saved successfully..");
+                subscription.unsubscribe();
+            }, () => this.dataPending = false);
+            ;
         }
         else {
             this.dataPending = true;