@tuki-io/tuki-widgets 0.0.135 → 0.0.136
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/widgets/site-upgrade/site-upgrade-data-table/site-upgrade-data-table.component.mjs +2 -2
- package/esm2020/di2mt/widgets/user-upgrade/user-upgrade-data-table/user-upgrade-data-table.component.mjs +2 -2
- package/esm2020/user-manage/src/user-info/user-info.component.mjs +6 -3
- package/esm2020/user-manage/src/user-manage-widget.component.mjs +3 -3
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs +4 -4
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs +10 -7
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs +4 -4
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs +10 -7
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/package.json +1 -1
- package/user-manage/src/user-info/user-info.component.d.ts +2 -1
|
@@ -12,6 +12,8 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
|
12
12
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
13
13
|
import * as i3 from '@angular/common';
|
|
14
14
|
import { CommonModule } from '@angular/common';
|
|
15
|
+
import * as i2 from '@angular/material/tooltip';
|
|
16
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
15
17
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
16
18
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
17
19
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
@@ -25,7 +27,6 @@ import * as i7$1 from '@angular/material/input';
|
|
|
25
27
|
import { MatInputModule } from '@angular/material/input';
|
|
26
28
|
import * as i7 from '@angular/material/core';
|
|
27
29
|
import { MatNativeDateModule } from '@angular/material/core';
|
|
28
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
29
30
|
import * as i6$1 from '@angular/material/form-field';
|
|
30
31
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
31
32
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
@@ -41,7 +42,7 @@ import { MatTableModule } from '@angular/material/table';
|
|
|
41
42
|
import * as i6 from '@angular/material/paginator';
|
|
42
43
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
43
44
|
import { Router } from '@angular/router';
|
|
44
|
-
import * as i2 from '@angular/material/divider';
|
|
45
|
+
import * as i2$1 from '@angular/material/divider';
|
|
45
46
|
import { Big } from 'big.js';
|
|
46
47
|
|
|
47
48
|
class APIService {
|
|
@@ -1113,10 +1114,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1113
1114
|
class UserInfoComponent {
|
|
1114
1115
|
}
|
|
1115
1116
|
UserInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1116
|
-
UserInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserInfoComponent, selector: "app-user-info", inputs: { name: "name", active: "active", email: "email", position: "position" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; justify-content: space-between; background-color: white;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\"
|
|
1117
|
+
UserInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserInfoComponent, selector: "app-user-info", inputs: { name: "name", active: "active", email: "email", position: "position", webexUUID: "webexUUID" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; justify-content: space-between; background-color: white;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\">\n {{name}}\n <ng-container *ngIf=\"webexUUID\">\n <span [matTooltip]=\"'Multi-Tenant'\" matTooltipPosition=\"right\" style=\"margin-left: 8px; vertical-align: middle;\">\n <img src=\"assets/icons/webex.svg\" width=\"20\" alt=\"\" />\n </span>\n </ng-container>\n <ng-container *ngIf=\"!webexUUID\">\n <span [matTooltip]=\"'Dedicated Instance'\" matTooltipPosition=\"right\" style=\"margin-left: 8px; vertical-align: middle;\">\n <img src=\"assets/icons/mt.svg\" width=\"20\" alt=\"\" />\n </span>\n </ng-container>\n </div>\n <div class=\"info-holder__user-breadcrumbs\">\n <div class=\"is-active\" *ngIf=\"active; else notActive\">\n <span class=\"icon-user-status icon-user-status-active\"></span>Active\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"email\">{{email}}</div>\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"position\">{{position}}</div>\n </div>\n </div>\n </div>\n <div class=\"action-btn-wrapper\">\n <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path 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\" fill=\"currentColor\"/></svg></button>\n </div>\n </div>\n <!-- </div> -->\n</div>\n\n<ng-template #notActive>\n <div class=\"is-active\">\n <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n </svg>\n <div>Not active</div>\n </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{flex:1;display:flex;align-items:center;justify-content:flex-end}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
1117
1118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, decorators: [{
|
|
1118
1119
|
type: Component,
|
|
1119
|
-
args: [{ selector: 'app-user-info', template: "<div style=\"display: flex; align-items: center; justify-content: space-between; background-color: white;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\"
|
|
1120
|
+
args: [{ selector: 'app-user-info', template: "<div style=\"display: flex; align-items: center; justify-content: space-between; background-color: white;\">\n <!-- <div class=\"content-box\"> -->\n <div class=\"info-holder\">\n <div class=\"info-holder__user-image\">\n <i class=\"icon-people-regular\"></i>\n </div>\n <div class=\"info-holder__user-information\">\n <div class=\"info-holder__user-name\">\n {{name}}\n <ng-container *ngIf=\"webexUUID\">\n <span [matTooltip]=\"'Multi-Tenant'\" matTooltipPosition=\"right\" style=\"margin-left: 8px; vertical-align: middle;\">\n <img src=\"assets/icons/webex.svg\" width=\"20\" alt=\"\" />\n </span>\n </ng-container>\n <ng-container *ngIf=\"!webexUUID\">\n <span [matTooltip]=\"'Dedicated Instance'\" matTooltipPosition=\"right\" style=\"margin-left: 8px; vertical-align: middle;\">\n <img src=\"assets/icons/mt.svg\" width=\"20\" alt=\"\" />\n </span>\n </ng-container>\n </div>\n <div class=\"info-holder__user-breadcrumbs\">\n <div class=\"is-active\" *ngIf=\"active; else notActive\">\n <span class=\"icon-user-status icon-user-status-active\"></span>Active\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"email\">{{email}}</div>\n </div>\n <div class=\"icon-text-wrapper\">\n <div class=\"icon-separator\"></div>\n <div class=\"position\">{{position}}</div>\n </div>\n </div>\n </div>\n <div class=\"action-btn-wrapper\">\n <button><span>Actions</span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"14\" viewBox=\"0 0 32 32\" style=\"vertical-align:middle;\"><path 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\" fill=\"currentColor\"/></svg></button>\n </div>\n </div>\n <!-- </div> -->\n</div>\n\n<ng-template #notActive>\n <div class=\"is-active\">\n <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n </svg>\n <div>Not active</div>\n </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:.75rem;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;padding:0 4.375rem;font-family:poppins,sans-serif}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:600}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .is-active,.info-holder .icon-text-wrapper{display:flex;gap:.5rem;align-items:center}.info-holder .icon-text-wrapper .icon-separator{flex-shrink:0;border-radius:50%;background-color:#000000bf;inline-size:.25rem;block-size:.25rem;margin-inline-end:.25rem}.info-holder .info-holder__user-image{width:40px;height:40px}.info-holder .info-holder__user-image .icon-people-regular{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.action-btn-wrapper{flex:1;display:flex;align-items:center;justify-content:flex-end}.action-btn-wrapper button{background-color:#000000f2;color:#fffffff2;position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;padding:8px .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%}\n"] }]
|
|
1120
1121
|
}], propDecorators: { name: [{
|
|
1121
1122
|
type: Input
|
|
1122
1123
|
}], active: [{
|
|
@@ -1125,6 +1126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1125
1126
|
type: Input
|
|
1126
1127
|
}], position: [{
|
|
1127
1128
|
type: Input
|
|
1129
|
+
}], webexUUID: [{
|
|
1130
|
+
type: Input
|
|
1128
1131
|
}] } });
|
|
1129
1132
|
|
|
1130
1133
|
class MaterialModule {
|
|
@@ -1856,7 +1859,7 @@ class DeviceListComponent {
|
|
|
1856
1859
|
}
|
|
1857
1860
|
}
|
|
1858
1861
|
DeviceListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1859
|
-
DeviceListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceListComponent, selector: "app-device-list", inputs: { devices: "devices" }, outputs: { onDeviceSelect: "onDeviceSelect" }, ngImport: i0, template: "<div class=\"info-boxes-container\">\n <!-- USER INFO BOX-->\n <div class=\"user-info-box user-details-box\">\n <h3 class=\"user-box-title\">Devices</h3>\n <div class=\"form-holder__inputs\">\n <ng-container *ngFor=\"let device of devices; let isLast = last\">\n <app-device-row [device]=\"device\" (onDeviceSelect)=\"selectDevice($event)\"></app-device-row>\n <mat-divider></mat-divider>\n </ng-container>\n <button class=\"add-btn\">\n Add device\n </button>\n </div>\n </div>\n\n <div class=\"user-info-box user-details-box\">\n <h3 class=\"user-box-title\">Devices settings</h3>\n <div class=\"form-holder__inputs\">\n <div class=\"input-holder\">\n <div class=\"input-holder__name\">\n <span class=\"phone-name\">Software upgrade channel</span>\n </div>\n <div class=\"input-holder__input\">\n <div class=\"info-labels\">\n <span class=\"info-icon\"></span>\n <span class=\"status-label\">Software upgrade channel setting has moved</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.info-holder{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;margin:0 0 30px}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{padding:10px;margin:10px;gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:500}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .icon-separator{height:5px;width:5px;background-color:#000000b3;border-radius:50%}.info-holder .is-active{display:flex;gap:8px;align-items:center}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.webex-list{padding:2.5rem}.webex-list-header{display:flex;align-items:center;padding:1rem}.webex-list-header__hr{width:100%;font-size:12px}.device-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #b0b0b0;padding:.8rem;z-index:10;transition:background-color .3s;cursor:pointer}.device-item__td{width:100%}.device-item__actions-menu{position:absolute;margin:0 1rem;right:0}.device-item__more{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b0b0;border-radius:50%;padding:.5rem;transition:background-color .3s ease-in-out}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.info-boxes-container .user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.info-boxes-container .user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.info-boxes-container .user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.info-boxes-container .user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem;display:flex;gap:.5rem;align-items:center;flex-basis:15rem!important}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .phone-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .primary-label{background-color:#08599c;display:inline-flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border-radius:.25rem;color:#fffffff2;font-size:.75rem;line-height:1;text-align:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1;gap:.75rem;align-items:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-indicator{height:7px;width:7px;background-color:#707070;border-radius:50px}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-label{display:flex;flex-wrap:wrap;gap:1.5rem;overflow:auto;font-size:.9rem;line-height:1.25;color:#000000f2}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels{display:flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border:.0625rem solid transparent;border-radius:.25rem;line-height:1;text-overflow:ellipsis;border-color:#d6b220;background-color:#f7f6dc;color:#735107}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels .info-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:13px;width:13px;display:block;background-size:contain;background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M15.75 10.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5M17 14.5a1 1 0 0 0-1-1h-2a1 1 0 1 0 0 2h1V22h-2a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2zM2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4%22%2F%3E%3C%2Fsvg%3E\")}.info-boxes-container .user-info-box .form-holder__inputs .add-btn{position:relative;display:inline-flex;gap:.375rem;align-items:center;justify-content:center;overflow:hidden!important;padding:.75rem;border:.0625rem solid transparent;border-radius:6.25rem;font-weight:500;font-size:.875rem;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%;border-color:#00000080;background-color:#0000;color:#000000f2;margin:1rem 0;block-size:2rem}.info-boxes-container .user-info-box .form-holder__inputs .mat-divider{margin:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DeviceRowComponent, selector: "app-device-row", inputs: ["device"], outputs: ["onDeviceSelect"] }] });
|
|
1862
|
+
DeviceListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceListComponent, selector: "app-device-list", inputs: { devices: "devices" }, outputs: { onDeviceSelect: "onDeviceSelect" }, ngImport: i0, template: "<div class=\"info-boxes-container\">\n <!-- USER INFO BOX-->\n <div class=\"user-info-box user-details-box\">\n <h3 class=\"user-box-title\">Devices</h3>\n <div class=\"form-holder__inputs\">\n <ng-container *ngFor=\"let device of devices; let isLast = last\">\n <app-device-row [device]=\"device\" (onDeviceSelect)=\"selectDevice($event)\"></app-device-row>\n <mat-divider></mat-divider>\n </ng-container>\n <button class=\"add-btn\">\n Add device\n </button>\n </div>\n </div>\n\n <div class=\"user-info-box user-details-box\">\n <h3 class=\"user-box-title\">Devices settings</h3>\n <div class=\"form-holder__inputs\">\n <div class=\"input-holder\">\n <div class=\"input-holder__name\">\n <span class=\"phone-name\">Software upgrade channel</span>\n </div>\n <div class=\"input-holder__input\">\n <div class=\"info-labels\">\n <span class=\"info-icon\"></span>\n <span class=\"status-label\">Software upgrade channel setting has moved</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.info-holder{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;margin:0 0 30px}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{padding:10px;margin:10px;gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:500}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .icon-separator{height:5px;width:5px;background-color:#000000b3;border-radius:50%}.info-holder .is-active{display:flex;gap:8px;align-items:center}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.webex-list{padding:2.5rem}.webex-list-header{display:flex;align-items:center;padding:1rem}.webex-list-header__hr{width:100%;font-size:12px}.device-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #b0b0b0;padding:.8rem;z-index:10;transition:background-color .3s;cursor:pointer}.device-item__td{width:100%}.device-item__actions-menu{position:absolute;margin:0 1rem;right:0}.device-item__more{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b0b0;border-radius:50%;padding:.5rem;transition:background-color .3s ease-in-out}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.info-boxes-container .user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.info-boxes-container .user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.info-boxes-container .user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.info-boxes-container .user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem;display:flex;gap:.5rem;align-items:center;flex-basis:15rem!important}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .phone-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .primary-label{background-color:#08599c;display:inline-flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border-radius:.25rem;color:#fffffff2;font-size:.75rem;line-height:1;text-align:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1;gap:.75rem;align-items:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-indicator{height:7px;width:7px;background-color:#707070;border-radius:50px}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-label{display:flex;flex-wrap:wrap;gap:1.5rem;overflow:auto;font-size:.9rem;line-height:1.25;color:#000000f2}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels{display:flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border:.0625rem solid transparent;border-radius:.25rem;line-height:1;text-overflow:ellipsis;border-color:#d6b220;background-color:#f7f6dc;color:#735107}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels .info-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:13px;width:13px;display:block;background-size:contain;background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M15.75 10.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5M17 14.5a1 1 0 0 0-1-1h-2a1 1 0 1 0 0 2h1V22h-2a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2zM2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4%22%2F%3E%3C%2Fsvg%3E\")}.info-boxes-container .user-info-box .form-holder__inputs .add-btn{position:relative;display:inline-flex;gap:.375rem;align-items:center;justify-content:center;overflow:hidden!important;padding:.75rem;border:.0625rem solid transparent;border-radius:6.25rem;font-weight:500;font-size:.875rem;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%;border-color:#00000080;background-color:#0000;color:#000000f2;margin:1rem 0;block-size:2rem}.info-boxes-container .user-info-box .form-holder__inputs .mat-divider{margin:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DeviceRowComponent, selector: "app-device-row", inputs: ["device"], outputs: ["onDeviceSelect"] }] });
|
|
1860
1863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceListComponent, decorators: [{
|
|
1861
1864
|
type: Component,
|
|
1862
1865
|
args: [{ selector: 'app-device-list', template: "<div class=\"info-boxes-container\">\n <!-- USER INFO BOX-->\n <div class=\"user-info-box user-details-box\">\n <h3 class=\"user-box-title\">Devices</h3>\n <div class=\"form-holder__inputs\">\n <ng-container *ngFor=\"let device of devices; let isLast = last\">\n <app-device-row [device]=\"device\" (onDeviceSelect)=\"selectDevice($event)\"></app-device-row>\n <mat-divider></mat-divider>\n </ng-container>\n <button class=\"add-btn\">\n Add device\n </button>\n </div>\n </div>\n\n <div class=\"user-info-box user-details-box\">\n <h3 class=\"user-box-title\">Devices settings</h3>\n <div class=\"form-holder__inputs\">\n <div class=\"input-holder\">\n <div class=\"input-holder__name\">\n <span class=\"phone-name\">Software upgrade channel</span>\n </div>\n <div class=\"input-holder__input\">\n <div class=\"info-labels\">\n <span class=\"info-icon\"></span>\n <span class=\"status-label\">Software upgrade channel setting has moved</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.info-holder{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;margin:0 0 30px}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{padding:10px;margin:10px;gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:500}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .icon-separator{height:5px;width:5px;background-color:#000000b3;border-radius:50%}.info-holder .is-active{display:flex;gap:8px;align-items:center}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.webex-list{padding:2.5rem}.webex-list-header{display:flex;align-items:center;padding:1rem}.webex-list-header__hr{width:100%;font-size:12px}.device-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #b0b0b0;padding:.8rem;z-index:10;transition:background-color .3s;cursor:pointer}.device-item__td{width:100%}.device-item__actions-menu{position:absolute;margin:0 1rem;right:0}.device-item__more{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b0b0;border-radius:50%;padding:.5rem;transition:background-color .3s ease-in-out}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.info-boxes-container .user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.info-boxes-container .user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.info-boxes-container .user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.info-boxes-container .user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem;display:flex;gap:.5rem;align-items:center;flex-basis:15rem!important}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .phone-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:40px;width:40px;display:block;background-size:contain}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__name .primary-label{background-color:#08599c;display:inline-flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border-radius:.25rem;color:#fffffff2;font-size:.75rem;line-height:1;text-align:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1;gap:.75rem;align-items:center}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-indicator{height:7px;width:7px;background-color:#707070;border-radius:50px}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .status-label{display:flex;flex-wrap:wrap;gap:1.5rem;overflow:auto;font-size:.9rem;line-height:1.25;color:#000000f2}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels{display:flex;gap:.25rem;align-items:center;justify-content:center;padding:.25rem .5rem;border:.0625rem solid transparent;border-radius:.25rem;line-height:1;text-overflow:ellipsis;border-color:#d6b220;background-color:#f7f6dc;color:#735107}.info-boxes-container .user-info-box .form-holder__inputs .input-holder__input .info-labels .info-icon{inline-size:2.25rem;block-size:2.25rem;background-repeat:no-repeat;background-position:center;height:13px;width:13px;display:block;background-size:contain;background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M15.75 10.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5M17 14.5a1 1 0 0 0-1-1h-2a1 1 0 1 0 0 2h1V22h-2a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2zM2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4%22%2F%3E%3C%2Fsvg%3E\")}.info-boxes-container .user-info-box .form-holder__inputs .add-btn{position:relative;display:inline-flex;gap:.375rem;align-items:center;justify-content:center;overflow:hidden!important;padding:.75rem;border:.0625rem solid transparent;border-radius:6.25rem;font-weight:500;font-size:.875rem;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);inline-size:min-content;max-inline-size:100%;border-color:#00000080;background-color:#0000;color:#000000f2;margin:1rem 0;block-size:2rem}.info-boxes-container .user-info-box .form-holder__inputs .mat-divider{margin:0!important}\n"] }]
|
|
@@ -2041,10 +2044,10 @@ class UserManageWidgetComponent {
|
|
|
2041
2044
|
}
|
|
2042
2045
|
}
|
|
2043
2046
|
UserManageWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, deps: [{ token: UserService }, { token: APIService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2044
|
-
UserManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserManageWidgetComponent, selector: "app-user-manage-widget", inputs: { token: "token", host: "host", siteId: "siteId", userId: "userId", deviceName: "deviceName", isLdap: "isLdap" }, outputs: { onSave: "onSave", onChange: "onChange", selectDevice: "selectDevice", goBack: "goBack" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input ::ng-deep .mat-form-field,:host .input-holder__input ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field:hover,:host .input-holder__input ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: UserInfoComponent, selector: "app-user-info", inputs: ["name", "active", "email", "position"] }, { kind: "component", type: LazyLoadingSelectComponent, selector: "app-lazy-loading-select", inputs: ["siteId", "form", "standalone", "placeholder", "controlName", "optionsToken", "appearance", "errorCode", "errorText", "default", "id"], outputs: ["changeField"] }, { kind: "component", type: UserCallingComponent, selector: "app-user-calling", inputs: ["siteId", "userId"], outputs: ["onExtensionChange"] }, { kind: "component", type: DeviceListComponent, selector: "app-device-list", inputs: ["devices"], outputs: ["onDeviceSelect"] }] });
|
|
2047
|
+
UserManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserManageWidgetComponent, selector: "app-user-manage-widget", inputs: { token: "token", host: "host", siteId: "siteId", userId: "userId", deviceName: "deviceName", isLdap: "isLdap" }, outputs: { onSave: "onSave", onChange: "onChange", selectDevice: "selectDevice", goBack: "goBack" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"\r\n [webexUUID]=\"user.webexUUID\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input ::ng-deep .mat-form-field,:host .input-holder__input ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field:hover,:host .input-holder__input ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: UserInfoComponent, selector: "app-user-info", inputs: ["name", "active", "email", "position", "webexUUID"] }, { kind: "component", type: LazyLoadingSelectComponent, selector: "app-lazy-loading-select", inputs: ["siteId", "form", "standalone", "placeholder", "controlName", "optionsToken", "appearance", "errorCode", "errorText", "default", "id"], outputs: ["changeField"] }, { kind: "component", type: UserCallingComponent, selector: "app-user-calling", inputs: ["siteId", "userId"], outputs: ["onExtensionChange"] }, { kind: "component", type: DeviceListComponent, selector: "app-device-list", inputs: ["devices"], outputs: ["onDeviceSelect"] }] });
|
|
2045
2048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, decorators: [{
|
|
2046
2049
|
type: Component,
|
|
2047
|
-
args: [{ selector: 'app-user-manage-widget', template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input ::ng-deep .mat-form-field,:host .input-holder__input ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field:hover,:host .input-holder__input ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"] }]
|
|
2050
|
+
args: [{ selector: 'app-user-manage-widget', template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"\r\n [webexUUID]=\"user.webexUUID\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input ::ng-deep .mat-form-field,:host .input-holder__input ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field:hover,:host .input-holder__input ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"] }]
|
|
2048
2051
|
}], ctorParameters: function () { return [{ type: UserService }, { type: APIService }]; }, propDecorators: { onSave: [{
|
|
2049
2052
|
type: Output
|
|
2050
2053
|
}], onChange: [{
|