@tuki-io/tuki-widgets 0.0.155 → 0.0.157
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.
- package/esm2020/di2mt/shared/components/stat-card/stat-card.component.mjs +12 -4
- package/esm2020/di2mt/widgets/upgrade-overview/cards/already-upgraded-users/already-upgraded-users-card.component.mjs +6 -2
- package/esm2020/di2mt/widgets/upgrade-overview/cards/pending-activation-users/pending-activation-users.component.mjs +3 -2
- package/esm2020/user-device-manage/src/app.constants.mjs +2 -1
- package/esm2020/user-device-manage/src/classes/deviceProfile.mjs +6 -1
- package/esm2020/user-device-manage/src/device-manage-widget.component.mjs +31 -4
- package/esm2020/user-device-manage/src/services/api.service.mjs +1 -1
- package/esm2020/user-device-manage/src/services/user.service.mjs +30 -5
- package/esm2020/user-manage/src/app.constants.mjs +3 -2
- package/esm2020/user-manage/src/classes/simplified-user.mjs +7 -2
- package/esm2020/user-manage/src/services/api.service.mjs +1 -1
- package/esm2020/user-manage/src/services/user.service.mjs +9 -1
- package/esm2020/user-manage/src/user-calling/user-calling.component.mjs +18 -4
- package/esm2020/user-manage/src/user-manage-widget.component.mjs +10 -3
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs +14 -6
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-user-device-manage.mjs +67 -8
- package/fesm2015/tuki-io-tuki-widgets-user-device-manage.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs +45 -7
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs +18 -5
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-device-manage.mjs +64 -7
- package/fesm2020/tuki-io-tuki-widgets-user-device-manage.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs +42 -7
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/package.json +1 -1
- package/user-device-manage/src/app.constants.d.ts +1 -0
- package/user-device-manage/src/classes/deviceProfile.d.ts +3 -0
- package/user-device-manage/src/device-manage-widget.component.d.ts +4 -0
- package/user-device-manage/src/services/api.service.d.ts +1 -1
- package/user-device-manage/src/services/user.service.d.ts +8 -2
- package/user-manage/src/app.constants.d.ts +1 -0
- package/user-manage/src/classes/simplified-user.d.ts +2 -0
- package/user-manage/src/services/api.service.d.ts +1 -1
- package/user-manage/src/services/user.service.d.ts +1 -0
- package/user-manage/src/user-calling/user-calling.component.d.ts +4 -1
|
@@ -140,7 +140,8 @@ const API = {
|
|
|
140
140
|
ASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/createLineAssociation/:token",
|
|
141
141
|
CHECK_DESTINATION_NUMBER: "/api/provision/:siteId/check-dn",
|
|
142
142
|
UPDATE_LINE_FIELDS: "/api/provision/:siteId/lineFields/:pkid/:token",
|
|
143
|
-
UPDATE_DEVICE_FIELDS: "/api/provision/:siteId/deviceFields/:deviceName/:token"
|
|
143
|
+
UPDATE_DEVICE_FIELDS: "/api/provision/:siteId/deviceFields/:deviceName/:token",
|
|
144
|
+
TRANSLATION_PATTERN_CUCM: "/dcp/api/sites/:cucmId/translation-pattern",
|
|
144
145
|
};
|
|
145
146
|
const REGEX_PATTERN = {
|
|
146
147
|
EMAIL: '^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))' +
|
|
@@ -456,15 +457,20 @@ class SimplifiedUser {
|
|
|
456
457
|
this.pagerNumber = user.pagerNumber;
|
|
457
458
|
this.displayName = user.displayName;
|
|
458
459
|
this.cucmId = user.cucmId;
|
|
460
|
+
this.lines = user.lines;
|
|
459
461
|
if (user.devices && user.devices.length) {
|
|
460
462
|
this.devices = user.devices.map((device) => new Device(device));
|
|
461
463
|
if (user.lines && user.lines.length) {
|
|
462
464
|
this.devices.forEach(device => {
|
|
463
465
|
if (device && device.lineAssociations && device.lineAssociations.length) {
|
|
464
|
-
device.lineAssociations.forEach(lineAssociation => {
|
|
466
|
+
device.lineAssociations.forEach((lineAssociation) => {
|
|
465
467
|
lineAssociation.callingSearchSpace = this.getLineVal(lineAssociation, user.lines, 'callingSearchSpace');
|
|
466
468
|
lineAssociation.textLabel = lineAssociation.textLabel || this.getLineVal(lineAssociation, user.lines, 'textLabel') || '';
|
|
467
469
|
lineAssociation.alertingName = lineAssociation.alertingName || this.getLineVal(lineAssociation, user.lines, 'alertingName') || '';
|
|
470
|
+
const line = user.lines.find((line) => line.pkid === lineAssociation.linePkid);
|
|
471
|
+
if (line) {
|
|
472
|
+
lineAssociation.mappedDids = line.mappedDids;
|
|
473
|
+
}
|
|
468
474
|
});
|
|
469
475
|
}
|
|
470
476
|
});
|
|
@@ -943,6 +949,14 @@ class UserService {
|
|
|
943
949
|
// .pipe(this.handleError(true, true));
|
|
944
950
|
}));
|
|
945
951
|
}
|
|
952
|
+
editTranslationPattern(cucmId, oldpattern, newPattern, extension, routePartitionName, description) {
|
|
953
|
+
const params = {
|
|
954
|
+
originalpattern: oldpattern,
|
|
955
|
+
};
|
|
956
|
+
const URL = API.TRANSLATION_PATTERN_CUCM.replace(':cucmId', cucmId);
|
|
957
|
+
return this.apiService
|
|
958
|
+
.put(URL, { calledPartyTransformationMask: extension, pattern: newPattern, routePartitionName: routePartitionName, description }, params);
|
|
959
|
+
}
|
|
946
960
|
processUserChangesToCache() {
|
|
947
961
|
const calls = [];
|
|
948
962
|
const body = UtilsService.diff(this.originUser.getUserDetailsSavableData(), this.user.getUserDetailsSavableData(), 'user');
|
|
@@ -1761,10 +1775,18 @@ class UserCallingComponent {
|
|
|
1761
1775
|
get form() {
|
|
1762
1776
|
return this.userService?.user?.devices[0] && this.userService?.user?.devices[0].lineAssociations[0].form;
|
|
1763
1777
|
}
|
|
1778
|
+
get isWebex() {
|
|
1779
|
+
return localStorage.getItem('webexUUID') && localStorage.getItem('webexUUID')?.length;
|
|
1780
|
+
}
|
|
1764
1781
|
get formControl() {
|
|
1765
1782
|
const control = this.form?.get('directoryNumber');
|
|
1766
1783
|
return control;
|
|
1767
1784
|
}
|
|
1785
|
+
get phoneNumberValue() {
|
|
1786
|
+
// const control = this.form?.get('directoryNumber') as FormControl;
|
|
1787
|
+
// return control;
|
|
1788
|
+
return this.userService?.user?.devices[0] && this.userService?.user?.devices[0]?.lineAssociations[0]?.mappedDids[0];
|
|
1789
|
+
}
|
|
1768
1790
|
get lineAssociation() {
|
|
1769
1791
|
return this.userService?.user?.devices[0].lineAssociations[0];
|
|
1770
1792
|
}
|
|
@@ -1779,7 +1801,13 @@ class UserCallingComponent {
|
|
|
1779
1801
|
ngOnInit() {
|
|
1780
1802
|
// this.getData();
|
|
1781
1803
|
}
|
|
1782
|
-
|
|
1804
|
+
onExtensionLineChange(event) {
|
|
1805
|
+
const value = event.target.innerText.trim();
|
|
1806
|
+
(this.userService?.user && this.userService?.user?.lines && this.userService?.user?.lines[0]?.mappedDids[0]) ? this.userService.user.lines[0].mappedDids[0] = value : void 0;
|
|
1807
|
+
this.onExtensionChange.next(true);
|
|
1808
|
+
}
|
|
1809
|
+
onDirectoryNumberChange(event) {
|
|
1810
|
+
const value = event.target.innerText.trim();
|
|
1783
1811
|
if (this.lineAssociation && this.lineAssociation.directoryNumber) {
|
|
1784
1812
|
// @ts-ignore
|
|
1785
1813
|
this.userService.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber = value;
|
|
@@ -1816,10 +1844,10 @@ class UserCallingComponent {
|
|
|
1816
1844
|
}
|
|
1817
1845
|
}
|
|
1818
1846
|
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 });
|
|
1819
|
-
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"] });
|
|
1847
|
+
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"] });
|
|
1820
1848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingComponent, decorators: [{
|
|
1821
1849
|
type: Component,
|
|
1822
|
-
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"] }]
|
|
1850
|
+
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"] }]
|
|
1823
1851
|
}], ctorParameters: function () { return [{ type: UserService }, { type: DnsService }]; }, propDecorators: { siteId: [{
|
|
1824
1852
|
type: Input
|
|
1825
1853
|
}], userId: [{
|
|
@@ -1942,8 +1970,15 @@ class UserManageWidgetComponent {
|
|
|
1942
1970
|
if (!this.userService.hasUnsavedChanges() || this.form?.invalid) {
|
|
1943
1971
|
return;
|
|
1944
1972
|
}
|
|
1945
|
-
|
|
1946
|
-
|
|
1973
|
+
this.dataPending = true;
|
|
1974
|
+
if (this.user.devices[0].lineAssociations[0] && !this.user.devices[0].lineAssociations[0].equals(this.userService.originUser.devices[0].lineAssociations[0])
|
|
1975
|
+
|| (this.user.lines && this.userService.originUser.lines && this.user.lines[0].mappedDids[0] !== this.userService.originUser.lines[0].mappedDids[0])) {
|
|
1976
|
+
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(() => {
|
|
1977
|
+
this.dataPending = false;
|
|
1978
|
+
this.onSave.next("user has been saved successfully..");
|
|
1979
|
+
subscription.unsubscribe();
|
|
1980
|
+
}, () => this.dataPending = false);
|
|
1981
|
+
;
|
|
1947
1982
|
}
|
|
1948
1983
|
else {
|
|
1949
1984
|
this.dataPending = true;
|