@tuki-io/tuki-widgets 0.0.219-dev.60 → 0.0.219-dev.63

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

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, Input, NgModule, ChangeDetectionStrategy, EventEmitter, Output, inject } from '@angular/core';
+import { Injectable, Component, Input, NgModule, ChangeDetectionStrategy, EventEmitter, Output, inject } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpErrorResponse, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { map, switchMap, catchError } from 'rxjs/operators';
 import { Subject, forkJoin, of, throwError, BehaviorSubject, Observable } from 'rxjs';
-import * as i5$1 from '@angular/forms';
+import * as i6 from '@angular/forms';
 import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-import * as i5 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i4$1 from '@tuki-io/tuki-widgets/shared';
+import { TkLoaderComponent, UIModule } from '@tuki-io/tuki-widgets/shared';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i1$1 from '@angular/common';
 import { Location, CommonModule } from '@angular/common';
@@ -24,13 +24,15 @@ import { MatTreeModule } from '@angular/material/tree';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatInputModule } from '@angular/material/input';
 import * as i7 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
-import * as i6$1 from '@angular/material/form-field';
+import * as i6$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatStepperModule } from '@angular/material/stepper';
-import * as i9 from '@angular/material/tabs';
+import * as i10 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
 import * as i8 from '@angular/material/select';
@@ -39,7 +41,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTableModule } from '@angular/material/table';
-import * as i6 from '@angular/material/paginator';
+import * as i6$1 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
@@ -47,7 +49,6 @@ import * as i2$2 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import { Router } from '@angular/router';
 import { Big } from 'big.js';
-import { UIModule } from '@tuki-io/tuki-widgets/shared';
 
 class APIService {
     constructor(httpClient) {
@@ -1267,17 +1268,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: APIService }, { type: LineService }, { type: DcpApiService }]; } });
 
-class AppLoaderComponent {
-    constructor() {
-    }
-}
-AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"], dependencies: [{ kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
 class AuthInterceptor {
     constructor() {
     }
@@ -1735,7 +1725,7 @@ class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PaginationComponent, selector: "app-pagination", inputs: { pagination: "pagination", showPageSizeOptions: "showPageSizeOptions", showRefreshButton: "showRefreshButton", lengthPending: "lengthPending" }, outputs: { pageEmitter: "pageEmitter", pageNumberChangeEmitter: "pageNumberChangeEmitter" }, ngImport: i0, template: "<div class=\"flex-box pagination\">\r\n  <div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n    <mat-spinner class=\"length-spinner\" [diameter]=\"20\" mode=\"indeterminate\" *ngIf=\"lengthPending\">\r\n    </mat-spinner>\r\n  </div>\r\n\r\n  <div class=\"flex-box per-page-block\" *ngIf=\"showPageSizeOptions\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select [(ngModel)]=\"pagination.pageSize\" (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".search-header-refresh-icon{align-items:center;line-height:54px;margin-left:10px}button[mat-icon-button] i{font-size:18px}mat-spinner.length-spinner{position:absolute;right:120px}h3,.search-header-refresh-icon{float:left}.page-options,.mat-paginator{float:right}.per-page-block mat-form-field{width:70px!important}.per-page-block span{margin-right:20px}.pagination{display:flex;justify-content:flex-end}.select-page-size{width:60px;margin:0 0 0 15px;padding:0 10px}.item_per_page{line-height:35px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PaginationComponent, selector: "app-pagination", inputs: { pagination: "pagination", showPageSizeOptions: "showPageSizeOptions", showRefreshButton: "showRefreshButton", lengthPending: "lengthPending" }, outputs: { pageEmitter: "pageEmitter", pageNumberChangeEmitter: "pageNumberChangeEmitter" }, ngImport: i0, template: "<div class=\"flex-box pagination\">\r\n  <div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n    <mat-spinner class=\"length-spinner\" [diameter]=\"20\" mode=\"indeterminate\" *ngIf=\"lengthPending\">\r\n    </mat-spinner>\r\n  </div>\r\n\r\n  <div class=\"flex-box per-page-block\" *ngIf=\"showPageSizeOptions\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select [(ngModel)]=\"pagination.pageSize\" (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".search-header-refresh-icon{align-items:center;line-height:54px;margin-left:10px}button[mat-icon-button] i{font-size:18px}mat-spinner.length-spinner{position:absolute;right:120px}h3,.search-header-refresh-icon{float:left}.page-options,.mat-paginator{float:right}.per-page-block mat-form-field{width:70px!important}.per-page-block span{margin-right:20px}.pagination{display:flex;justify-content:flex-end}.select-page-size{width:60px;margin:0 0 0 15px;padding:0 10px}.item_per_page{line-height:35px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-pagination', template: "<div class=\"flex-box pagination\">\r\n  <div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n    <mat-spinner class=\"length-spinner\" [diameter]=\"20\" mode=\"indeterminate\" *ngIf=\"lengthPending\">\r\n    </mat-spinner>\r\n  </div>\r\n\r\n  <div class=\"flex-box per-page-block\" *ngIf=\"showPageSizeOptions\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select [(ngModel)]=\"pagination.pageSize\" (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".search-header-refresh-icon{align-items:center;line-height:54px;margin-left:10px}button[mat-icon-button] i{font-size:18px}mat-spinner.length-spinner{position:absolute;right:120px}h3,.search-header-refresh-icon{float:left}.page-options,.mat-paginator{float:right}.per-page-block mat-form-field{width:70px!important}.per-page-block span{margin-right:20px}.pagination{display:flex;justify-content:flex-end}.select-page-size{width:60px;margin:0 0 0 15px;padding:0 10px}.item_per_page{line-height:35px}\n"] }]
@@ -1822,7 +1812,7 @@ class LazyLoadingSelectComponent {
     }
 }
 LazyLoadingSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LazyLoadingSelectComponent, deps: [{ token: NotificationService }, { token: SiteSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-LazyLoadingSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LazyLoadingSelectComponent, selector: "app-lazy-loading-select", inputs: { siteId: "siteId", form: "form", standalone: "standalone", placeholder: "placeholder", controlName: "controlName", optionsToken: "optionsToken", appearance: "appearance", errorCode: "errorCode", errorText: "errorText", default: "default", id: "id" }, outputs: { changeField: "changeField" }, ngImport: i0, template: "<ng-container *ngIf=\"standalone\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <mat-select [formControl]=\"formControl\"\r\n                (openedChange)=\"getOptions()\"\r\n                [placeholder]=\"placeholder\"\r\n                (selectionChange)=\"onFieldChange(controlName)\"\r\n                [id]=\"id\">\r\n      <mat-option class=\"search-input\">\r\n        <div class=\"select-search-wrapper\">\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"Search\"\r\n            class=\"select-search-input\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (keydown)=\"$event.stopPropagation()\"\r\n            (input)=\"onInputChange($event)\"\r\n          >\r\n          <span class=\"search-icon-inside\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\">\r\n              <path d=\"M13 2.25C7.063 2.25 2.25 7.063 2.25 13S7.063 23.75 13 23.75c2.699 0 5.165-.994 7.053-2.637l8.417 8.417a.75.75 0 1 0 1.06-1.06l-8.417-8.417A10.7 10.7 0 0 0 23.75 13c0-5.937-4.813-10.75-10.75-10.75M3.75 13a9.25 9.25 0 1 1 18.5 0 9.25 9.25 0 0 1-18.5 0\" fill=\"#000\"/>\r\n            </svg>\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n      <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\r\n      <mat-option *ngFor=\"let type of filteredOptions\" [value]=\"type\">\r\n        {{type}}\r\n      </mat-option>\r\n      <mat-progress-spinner class=\"field-spinner\"\r\n                            [diameter]=\"70\"\r\n                            strokeWidth=\"3\"\r\n                            mode=\"indeterminate\"\r\n                            *ngIf=\"optionsPending\"></mat-progress-spinner>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\r\n      <i class=\"fa fa-exclamation-triangle\"></i>\r\n      {{errorText}}\r\n    </mat-error>\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<!--\r\nThis duplication is caused by the following bug: https://github.com/angular/components/issues/9411\r\nWhich doesn't allow projection in mat-form-field\r\n-->\r\n\r\n<ng-container *ngIf=\"!standalone\">\r\n  <mat-select *ngIf=\"form.get(controlName)\"\r\n              [formControl]=\"formControl\"\r\n              (openedChange)=\"getOptions()\"\r\n              [placeholder]=\"placeholder\"\r\n              (selectionChange)=\"onFieldChange(controlName)\"\r\n              [id]=\"id\"\r\n  >\r\n    <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\r\n    <mat-option *ngFor=\"let type of options\" [value]=\"type\">\r\n      {{type}}\r\n    </mat-option>\r\n    <mat-progress-spinner class=\"field-spinner\"\r\n                          [diameter]=\"20\"\r\n                          mode=\"indeterminate\"\r\n                          *ngIf=\"optionsPending\"></mat-progress-spinner>\r\n  </mat-select>\r\n  <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\r\n    <i class=\"fa fa-exclamation-triangle\"></i>\r\n    {{errorText}}\r\n  </mat-error>\r\n</ng-container>\r\n", styles: ["::ng-deep .mat-option{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;line-height:48px!important;height:48px!important;padding:0 10px!important;text-align:left!important;text-decoration:none!important;position:relative!important;cursor:pointer!important;outline:none!important;display:flex!important;flex-direction:row!important;max-width:100%!important;box-sizing:border-box!important;align-items:center!important;-webkit-tap-highlight-color:rgba(0,0,0,0)!important}::ng-deep .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple){background:#bfe3ff;color:#000}::ng-deep .mat-select-panel .mat-option:not(.search-input):hover{background:#daedfc}.select-search-wrapper{position:relative;width:100%}.search-icon-inside{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;display:flex;align-items:center}:host{height:35px;width:228px!important;max-width:228px!important;min-width:0!important;height:auto!important;box-sizing:border-box}:host ::ng-deep mat-form-field{width:100%;max-width:100%;height:35px}:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-start{border-radius:8px 0 0 8px}:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-end{border-radius:0 8px 8px 0}:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-start,:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-gap,:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-end{border-color:#00000080!important;font-family:inherit;font-size:.8125rem;color:#000000f2}:host ::ng-deep mat-form-field.mat-focused .mat-form-field-flex .mat-form-field-outline{box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;outline:none;border-radius:6px}.select-search-input{width:100%;box-sizing:border-box;padding:7px 14px 7px 38px;margin:10px 0;border:3px solid #ccc;border-radius:.5rem;outline:none;font-size:14px;transition:border-color .2s}.select-search-input:focus{border-color:#1170cf}.field-spinner{margin-top:-30px}::ng-deep .mat-select-arrow{display:none}::ng-deep .mat-select-trigger{background: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%22M28.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%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 12px center;background-size:16px;padding-right:32px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { 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: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }] });
+LazyLoadingSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LazyLoadingSelectComponent, selector: "app-lazy-loading-select", inputs: { siteId: "siteId", form: "form", standalone: "standalone", placeholder: "placeholder", controlName: "controlName", optionsToken: "optionsToken", appearance: "appearance", errorCode: "errorCode", errorText: "errorText", default: "default", id: "id" }, outputs: { changeField: "changeField" }, ngImport: i0, template: "<ng-container *ngIf=\"standalone\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <mat-select [formControl]=\"formControl\"\r\n                (openedChange)=\"getOptions()\"\r\n                [placeholder]=\"placeholder\"\r\n                (selectionChange)=\"onFieldChange(controlName)\"\r\n                [id]=\"id\">\r\n      <mat-option class=\"search-input\">\r\n        <div class=\"select-search-wrapper\">\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"Search\"\r\n            class=\"select-search-input\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (keydown)=\"$event.stopPropagation()\"\r\n            (input)=\"onInputChange($event)\"\r\n          >\r\n          <span class=\"search-icon-inside\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\">\r\n              <path d=\"M13 2.25C7.063 2.25 2.25 7.063 2.25 13S7.063 23.75 13 23.75c2.699 0 5.165-.994 7.053-2.637l8.417 8.417a.75.75 0 1 0 1.06-1.06l-8.417-8.417A10.7 10.7 0 0 0 23.75 13c0-5.937-4.813-10.75-10.75-10.75M3.75 13a9.25 9.25 0 1 1 18.5 0 9.25 9.25 0 0 1-18.5 0\" fill=\"#000\"/>\r\n            </svg>\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n      <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\r\n      <mat-option *ngFor=\"let type of filteredOptions\" [value]=\"type\">\r\n        {{type}}\r\n      </mat-option>\r\n      <mat-progress-spinner class=\"field-spinner\"\r\n                            [diameter]=\"70\"\r\n                            strokeWidth=\"3\"\r\n                            mode=\"indeterminate\"\r\n                            *ngIf=\"optionsPending\"></mat-progress-spinner>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\r\n      <i class=\"fa fa-exclamation-triangle\"></i>\r\n      {{errorText}}\r\n    </mat-error>\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<!--\r\nThis duplication is caused by the following bug: https://github.com/angular/components/issues/9411\r\nWhich doesn't allow projection in mat-form-field\r\n-->\r\n\r\n<ng-container *ngIf=\"!standalone\">\r\n  <mat-select *ngIf=\"form.get(controlName)\"\r\n              [formControl]=\"formControl\"\r\n              (openedChange)=\"getOptions()\"\r\n              [placeholder]=\"placeholder\"\r\n              (selectionChange)=\"onFieldChange(controlName)\"\r\n              [id]=\"id\"\r\n  >\r\n    <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\r\n    <mat-option *ngFor=\"let type of options\" [value]=\"type\">\r\n      {{type}}\r\n    </mat-option>\r\n    <mat-progress-spinner class=\"field-spinner\"\r\n                          [diameter]=\"20\"\r\n                          mode=\"indeterminate\"\r\n                          *ngIf=\"optionsPending\"></mat-progress-spinner>\r\n  </mat-select>\r\n  <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\r\n    <i class=\"fa fa-exclamation-triangle\"></i>\r\n    {{errorText}}\r\n  </mat-error>\r\n</ng-container>\r\n", styles: ["::ng-deep .mat-option{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;line-height:48px!important;height:48px!important;padding:0 10px!important;text-align:left!important;text-decoration:none!important;position:relative!important;cursor:pointer!important;outline:none!important;display:flex!important;flex-direction:row!important;max-width:100%!important;box-sizing:border-box!important;align-items:center!important;-webkit-tap-highlight-color:rgba(0,0,0,0)!important}::ng-deep .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple){background:#bfe3ff;color:#000}::ng-deep .mat-select-panel .mat-option:not(.search-input):hover{background:#daedfc}.select-search-wrapper{position:relative;width:100%}.search-icon-inside{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;display:flex;align-items:center}:host{height:35px;width:228px!important;max-width:228px!important;min-width:0!important;height:auto!important;box-sizing:border-box}:host ::ng-deep mat-form-field{width:100%;max-width:100%;height:35px}:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-start{border-radius:8px 0 0 8px}:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-end{border-radius:0 8px 8px 0}:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-start,:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-gap,:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-end{border-color:#00000080!important;font-family:inherit;font-size:.8125rem;color:#000000f2}:host ::ng-deep mat-form-field.mat-focused .mat-form-field-flex .mat-form-field-outline{box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;outline:none;border-radius:6px}.select-search-input{width:100%;box-sizing:border-box;padding:7px 14px 7px 38px;margin:10px 0;border:3px solid #ccc;border-radius:.5rem;outline:none;font-size:14px;transition:border-color .2s}.select-search-input:focus{border-color:#1170cf}.field-spinner{margin-top:-30px}::ng-deep .mat-select-arrow{display:none}::ng-deep .mat-select-trigger{background: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%22M28.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%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 12px center;background-size:16px;padding-right:32px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LazyLoadingSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-lazy-loading-select', template: "<ng-container *ngIf=\"standalone\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <mat-select [formControl]=\"formControl\"\r\n                (openedChange)=\"getOptions()\"\r\n                [placeholder]=\"placeholder\"\r\n                (selectionChange)=\"onFieldChange(controlName)\"\r\n                [id]=\"id\">\r\n      <mat-option class=\"search-input\">\r\n        <div class=\"select-search-wrapper\">\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"Search\"\r\n            class=\"select-search-input\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (keydown)=\"$event.stopPropagation()\"\r\n            (input)=\"onInputChange($event)\"\r\n          >\r\n          <span class=\"search-icon-inside\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\">\r\n              <path d=\"M13 2.25C7.063 2.25 2.25 7.063 2.25 13S7.063 23.75 13 23.75c2.699 0 5.165-.994 7.053-2.637l8.417 8.417a.75.75 0 1 0 1.06-1.06l-8.417-8.417A10.7 10.7 0 0 0 23.75 13c0-5.937-4.813-10.75-10.75-10.75M3.75 13a9.25 9.25 0 1 1 18.5 0 9.25 9.25 0 0 1-18.5 0\" fill=\"#000\"/>\r\n            </svg>\r\n          </span>\r\n        </div>\r\n      </mat-option>\r\n      <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\r\n      <mat-option *ngFor=\"let type of filteredOptions\" [value]=\"type\">\r\n        {{type}}\r\n      </mat-option>\r\n      <mat-progress-spinner class=\"field-spinner\"\r\n                            [diameter]=\"70\"\r\n                            strokeWidth=\"3\"\r\n                            mode=\"indeterminate\"\r\n                            *ngIf=\"optionsPending\"></mat-progress-spinner>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\r\n      <i class=\"fa fa-exclamation-triangle\"></i>\r\n      {{errorText}}\r\n    </mat-error>\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<!--\r\nThis duplication is caused by the following bug: https://github.com/angular/components/issues/9411\r\nWhich doesn't allow projection in mat-form-field\r\n-->\r\n\r\n<ng-container *ngIf=\"!standalone\">\r\n  <mat-select *ngIf=\"form.get(controlName)\"\r\n              [formControl]=\"formControl\"\r\n              (openedChange)=\"getOptions()\"\r\n              [placeholder]=\"placeholder\"\r\n              (selectionChange)=\"onFieldChange(controlName)\"\r\n              [id]=\"id\"\r\n  >\r\n    <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\r\n    <mat-option *ngFor=\"let type of options\" [value]=\"type\">\r\n      {{type}}\r\n    </mat-option>\r\n    <mat-progress-spinner class=\"field-spinner\"\r\n                          [diameter]=\"20\"\r\n                          mode=\"indeterminate\"\r\n                          *ngIf=\"optionsPending\"></mat-progress-spinner>\r\n  </mat-select>\r\n  <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\r\n    <i class=\"fa fa-exclamation-triangle\"></i>\r\n    {{errorText}}\r\n  </mat-error>\r\n</ng-container>\r\n", styles: ["::ng-deep .mat-option{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;line-height:48px!important;height:48px!important;padding:0 10px!important;text-align:left!important;text-decoration:none!important;position:relative!important;cursor:pointer!important;outline:none!important;display:flex!important;flex-direction:row!important;max-width:100%!important;box-sizing:border-box!important;align-items:center!important;-webkit-tap-highlight-color:rgba(0,0,0,0)!important}::ng-deep .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple){background:#bfe3ff;color:#000}::ng-deep .mat-select-panel .mat-option:not(.search-input):hover{background:#daedfc}.select-search-wrapper{position:relative;width:100%}.search-icon-inside{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;display:flex;align-items:center}:host{height:35px;width:228px!important;max-width:228px!important;min-width:0!important;height:auto!important;box-sizing:border-box}:host ::ng-deep mat-form-field{width:100%;max-width:100%;height:35px}:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-start{border-radius:8px 0 0 8px}:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-end{border-radius:0 8px 8px 0}:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-start,:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-gap,:host ::ng-deep mat-form-field .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-end{border-color:#00000080!important;font-family:inherit;font-size:.8125rem;color:#000000f2}:host ::ng-deep mat-form-field.mat-focused .mat-form-field-flex .mat-form-field-outline{box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;outline:none;border-radius:6px}.select-search-input{width:100%;box-sizing:border-box;padding:7px 14px 7px 38px;margin:10px 0;border:3px solid #ccc;border-radius:.5rem;outline:none;font-size:14px;transition:border-color .2s}.select-search-input:focus{border-color:#1170cf}.field-spinner{margin-top:-30px}::ng-deep .mat-select-arrow{display:none}::ng-deep .mat-select-trigger{background: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%22M28.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%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 12px center;background-size:16px;padding-right:32px}\n"] }]
@@ -2392,10 +2382,10 @@ class UserManageWidgetComponent {
     }
 }
 UserManageWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, deps: [{ token: UserService }, { token: APIService }, { token: DcpApiService }], target: i0.ɵɵFactoryTarget.Component });
-UserManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserManageWidgetComponent, selector: "app-user-manage-widget", inputs: { token: "token", host: "host", dcpHost: "dcpHost", siteId: "siteId", userId: "userId", deviceName: "deviceName", isLdap: "isLdap" }, outputs: { onSave: "onSave", onChange: "onChange", selectDevice: "selectDevice", goBack: "goBack" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending || savePending || 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\r\n    *ngIf=\"user\"\r\n    [name]=\"userName\"\r\n    [email]=\"user.email\"\r\n    [active]=\"true\"\r\n    [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"\r\n    [cucmid]=\"user.cucmId\">\r\n  </app-user-info>\r\n\r\n  <!-- Summary isn't available for Webex users, so they start on the Profile tab -->\r\n  <mat-tab-group disableRipple class=\"tabs-container\" [selectedIndex]=\"webexUUID ? 1 : 0\">\r\n    <mat-tab label=\"Summary\" [disabled]=\"!!webexUUID\">\r\n      <app-user-summary *ngIf=\"user\" [user]=\"user\"></app-user-summary>\r\n    </mat-tab>\r\n    <mat-tab label=\"Profile\">\r\n      <ng-container *ngTemplateOutlet=\"webexUUID ? webexUserProfile : 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]=\"!primaryLineReference\">\r\n      <app-user-calling\r\n        *ngIf=\"primaryLineReference\"\r\n        [siteId]=\"siteId\"\r\n        (onExtensionChange)=\"onExtensionChange()\"\r\n        [primaryLineDirectoryNumber]=\"primaryLineReference\">\r\n      </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\r\n        [devices]=\"user?.devices\"\r\n        (onDeviceSelect)=\"onDeviceSelect($event)\">\r\n      </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  <!-- keeps the bottom of the content reachable above the fixed panel -->\r\n  <!-- <div class=\"actions-panel-spacer\" [class.actions-panel-spacer--visible]=\"hasUnsavedChanges()\"></div>\r\n  <div class=\"actions-panel\"\r\n       [class.actions-panel--visible]=\"hasUnsavedChanges()\"\r\n       [attr.aria-hidden]=\"!hasUnsavedChanges()\">\r\n    <div class=\"actions-panel__actions\">\r\n      <button type=\"button\" class=\"btn-outline\" [disabled]=\"savePending\" (click)=\"cancelChanges()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn-filled\" [disabled]=\"isSavingDisabled()\" (click)=\"saveChanges()\">Save</button>\r\n    </div>\r\n  </div> -->  \r\n\r\n  <ng-template #userProfile>\r\n    <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n      <div class=\"info-boxes-container\">\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">User Details</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">User Id</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"User Id\" formControlName=\"userid\" (input)=\"onChangeField('userid')\">\r\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('required')\">\r\n                  <i class=\"fa fa-exclamation-triangle\"></i>\r\n                  This field is required\r\n                </span>\r\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n                  <i class=\"fa fa-exclamation-triangle\"></i>\r\n                  User ID already exists\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Primary email</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Primary email\" formControlName=\"email\" (input)=\"onChangeField('email')\">\r\n                <span class=\"field-error\" *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                </span>\r\n                <span class=\"field-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                </span>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Fisrt Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Fisrt Name\" formControlName=\"firstName\" (input)=\"onChangeField('firstName')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Last Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Last Name\" formControlName=\"lastName\" (input)=\"onChangeField('lastName')\">\r\n                <span class=\"field-error\" *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                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">General User Info</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">Department</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Department\" formControlName=\"department\" type=\"text\" (input)=\"onChangeField('department')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Manager user ID</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Manager user ID\" formControlName=\"manager\" type=\"text\" (input)=\"onChangeField('manager')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Associated PC</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Associated PC\" formControlName=\"associatedPc\" type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Digest credentials</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\" type=\"text\"\r\n                       (input)=\"onChangeField('digestCredentials')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">User profile</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Mobile voice access</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Userlocale</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Confirm digest credentials\" formControlName=\"confirmDigestCredentials\" type=\"text\"\r\n                       (input)=\"onChangeField('confirmDigestCredentials')\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Contact Information</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">Middle Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Middle Name\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Telephone Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Telephone Number\" formControlName=\"telephoneNumber\"\r\n                       (input)=\"onChangeField('telephoneNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Mobile Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Mobile Number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Directory URI</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Directory URI\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Title</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Title\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Home Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Home Number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Pager Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Pager Number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Display Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Display Name\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">EM Configurations</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">BLF Presence Group</div>\r\n              <app-lazy-loading-select\r\n                [siteId]=\"siteId\"\r\n                [controlName]=\"'presenceGroup'\"\r\n                [form]=\"user.form\"\r\n                (changeField)=\"changeField('presenceGroup')\"\r\n                [optionsToken]=\"'userProfiles'\"\r\n              ></app-lazy-loading-select>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Subscribe CSS</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Subscribe CSS\" formControlName=\"subscribeCss\" type=\"text\" (input)=\"onChangeField('subscribeCss')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Allow Control of Device from CTI</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"allowDeviceControlFromCti\"\r\n                  (change)=\"onChangeField('allowDeviceControlFromCti')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Enable Extension Mobility Cross Cluster</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"enableCrossClusterEm\"\r\n                  (change)=\"onChangeField('enableCrossClusterEm')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Multilevel Precedence and Preemption Authorization</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">MLPP User Identification Number</div>\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            <mat-divider />\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">MLPP Precedence Authorization Level</div>\r\n              <mat-form-field appearance=\"outline\" class=\"simple-select\">\r\n                <mat-select formControlName=\"mlppPrecedencePattern\"\r\n                            (selectionChange)=\"changeField('mlppPrecedencePattern')\">\r\n                  <mat-option *ngFor=\"let option of authLevelOptions\" [value]=\"option\">\r\n                    {{option}}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            <mat-divider />\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Enable MLPP</div>\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        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Service Settings</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Home Cluster</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"homeCluster\"\r\n                  (change)=\"onChangeField('homeCluster')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n      </div>\r\n    </form>\r\n  </ng-template>\r\n\r\n  <ng-template #webexUserProfile>\n    <form *ngIf=\"user && form\" [formGroup]=\"form\">\n      <div class=\"info-boxes-container\">\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">User Details</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">User Id</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"User Id\" formControlName=\"userid\" (input)=\"onChangeField('userid')\">\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('exist')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  User ID already exists\n                </span>\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Primary email</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Primary email\" formControlName=\"email\" (input)=\"onChangeField('email')\">\n                <span class=\"field-error\" *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n                <span class=\"field-error\" *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  Please enter valid email\n                </span>\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Fisrt Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Fisrt Name\" formControlName=\"firstName\" (input)=\"onChangeField('firstName')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Last Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Last Name\" formControlName=\"lastName\" (input)=\"onChangeField('lastName')\">\n                <span class=\"field-error\" *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n              </div>\n            </div>\n          </div>\n        </section>\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">General User Info</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">Department</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Department\" formControlName=\"department\" type=\"text\" (input)=\"onChangeField('department')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Manager user ID</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Manager user ID\" formControlName=\"manager\" type=\"text\" (input)=\"onChangeField('manager')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Associated PC</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Associated PC\" formControlName=\"associatedPc\" type=\"text\" (input)=\"onChangeField('associatedPc')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\" type=\"text\"\n                       (input)=\"onChangeField('digestCredentials')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">User profile</div>\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userProfile'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField('userProfile')\"\n                [optionsToken]=\"'userProfiles'\"\n              ></app-lazy-loading-select>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Mobile voice access</div>\n              <mat-slide-toggle class=\"custom-toggle\"\n                formControlName=\"enableMobileVoiceAccess\"\n                (change)=\"onChangeField('enableMobileVoiceAccess')\"\n                [checked]=\"user.enableMobileVoiceAccess\">\n              </mat-slide-toggle>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Userlocale</div>\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userLocale'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField($event)\"\n                [optionsToken]=\"'userLocales'\"\n                [default]=\"{key: '', value: 'None', disabled: false}\">\n              </app-lazy-loading-select>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Confirm digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Confirm digest credentials\" formControlName=\"confirmDigestCredentials\" type=\"text\"\n                       (input)=\"onChangeField('confirmDigestCredentials')\">\n              </div>\n            </div>\n          </div>\n        </section>\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">Contact Information</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">Middle Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Middle Name\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Telephone Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Telephone Number\" formControlName=\"telephoneNumber\"\n                       (input)=\"onChangeField('telephoneNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Mobile Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Mobile Number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\"\n                       (input)=\"onChangeField('digestCredentials')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Directory URI</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Directory URI\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Title</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Title\" formControlName=\"title\" (input)=\"onChangeField('title')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Home Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Home Number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Pager Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Pager Number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Display Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Display Name\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\n              </div>\n            </div>\n          </div>\n        </section>\n\n      </div>\n    </form>\n  </ng-template>\n</div>\r\n\r\n<!-- <button mat-raised-button color=\"primary\" (click)=\"save()\" >Save</button> -->", 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}.mat-divider{margin:5px 0!important}.actions-panel{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#dedede;border-top:1px solid rgba(0,0,0,.2);padding:.75rem 1.5rem;transform:translateY(100%);visibility:hidden;transition:transform .25s ease-in-out,visibility 0s linear .25s}.actions-panel--visible{transform:translateY(0);visibility:visible;transition:transform .25s ease-in-out,visibility 0s linear 0s}.actions-panel__actions{display:flex;justify-content:flex-end;gap:.75rem}.actions-panel-spacer{height:0;transition:height .25s ease-in-out}.actions-panel-spacer--visible{height:4rem}@media (prefers-reduced-motion: reduce){.actions-panel,.actions-panel--visible,.actions-panel-spacer{transition:none}}.btn-outline,.btn-filled{padding:.313rem .75rem;border-radius:50px;font-weight:500;font-size:.875rem;font-family:Poppins,Poppins,sans-serif;cursor:pointer;transition:background-color .1s ease-in-out;white-space:nowrap}.btn-outline{background:transparent;border:1px solid rgba(0,0,0,.2);color:#000000f2}.btn-outline:hover:not(:disabled){background:rgba(0,0,0,.0705882353)}.btn-outline:disabled{color:#babcc5;border-color:#dfe3e7;cursor:not-allowed}.btn-filled{background:rgba(0,0,0,.9490196078);color:#fff;border:1px solid transparent}.btn-filled:hover:not(:disabled){background:#2a2a2a}.btn-filled:disabled{background:#DFE3E7;color:#babcc5;cursor:not-allowed}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:3rem}.info-boxes-container .card{display:flex;flex-direction:column;padding:1.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#ffffff;min-width:0;font-family:Poppins,Poppins,sans-serif;gap:1.5rem}.info-boxes-container .card.vertical-card{flex-direction:row}.info-boxes-container .card.vertical-card .main-content{gap:0}.info-boxes-container .card.vertical-card .main-content .mat-divider{margin:0!important;border-top-color:#0003!important}.info-boxes-container .card.vertical-card .main-content .input-holder{min-height:2rem;box-sizing:content-box;display:flex;align-items:center;gap:3.25rem}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-top{padding:.75rem 0 0}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-bottom{padding:0 0 .75rem}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-top-bottom{padding:.75rem 0}.info-boxes-container .card.vertical-card .main-content .input-holder .input-holder__name{max-width:15rem;width:15rem;flex-shrink:0;color:#000000f2;font-size:.875rem;font-weight:400;white-space:normal;overflow-wrap:break-word}.info-boxes-container .card.vertical-card .main-content .input-holder .input-holder__field{display:flex;flex-direction:column;gap:.375rem}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input{width:calc(14.25rem - 26px);max-width:calc(100% - 26px);height:21px;padding:4px 12px;box-sizing:content-box;background:#fff;border:solid .0625rem rgba(0,0,0,.5019607843)!important;border-radius:8px;font-family:inherit;font-size:.875rem;font-weight:400;color:#000000f2}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input:hover{background-color:#00000012!important}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input:focus{color:#000000b3;background:#fff;border:solid .0625rem rgba(0,0,0,.5019607843)!important;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;outline:none}.info-boxes-container .card.vertical-card .main-content .input-holder app-lazy-loading-select,.info-boxes-container .card.vertical-card .main-content .input-holder .mat-form-field.simple-select{width:14.25rem!important;max-width:14.25rem!important}.info-boxes-container .card.vertical-card .main-content .input-holder .field-error{display:flex;align-items:center;gap:.375rem;color:#c73636;font-size:.75rem}.info-boxes-container .card .header{display:flex;align-items:start;width:15rem;flex-shrink:0}.info-boxes-container .card .header .title{font-weight:500;font-size:1rem;font-family:Poppins,Poppins,sans-serif;color:#000000f2}.info-boxes-container .card .main-content{display:flex;flex-direction:column;min-width:0;gap:1.5rem;flex:1}.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.simple-select{padding:0}.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-start,.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-gap,.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-end{border-color:#00000080!important}.mat-form-field.simple-select.mat-focused ::ng-deep .mat-form-field-outline{box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;border-radius:6px}.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}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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$1.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: i5$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i3.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", "cucmid"] }, { 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", "primaryLineDirectoryNumber"], outputs: ["onExtensionChange"] }, { kind: "component", type: DeviceListComponent, selector: "app-device-list", inputs: ["devices"], outputs: ["onDeviceSelect"] }, { kind: "component", type: UserSummaryComponent, selector: "app-user-summary", inputs: ["user"] }] });
+UserManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserManageWidgetComponent, selector: "app-user-manage-widget", inputs: { token: "token", host: "host", dcpHost: "dcpHost", siteId: "siteId", userId: "userId", deviceName: "deviceName", isLdap: "isLdap" }, outputs: { onSave: "onSave", onChange: "onChange", selectDevice: "selectDevice", goBack: "goBack" }, ngImport: i0, template: "<tk-loader *ngIf=\"dataPending || savePending || userService.dataPending\"></tk-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\r\n    *ngIf=\"user\"\r\n    [name]=\"userName\"\r\n    [email]=\"user.email\"\r\n    [active]=\"true\"\r\n    [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"\r\n    [cucmid]=\"user.cucmId\">\r\n  </app-user-info>\r\n\r\n  <!-- Summary isn't available for Webex users, so they start on the Profile tab -->\r\n  <mat-tab-group disableRipple class=\"tabs-container\" [selectedIndex]=\"webexUUID ? 1 : 0\">\r\n    <mat-tab label=\"Summary\" [disabled]=\"!!webexUUID\">\r\n      <app-user-summary *ngIf=\"user\" [user]=\"user\"></app-user-summary>\r\n    </mat-tab>\r\n    <mat-tab label=\"Profile\">\r\n      <ng-container *ngTemplateOutlet=\"webexUUID ? webexUserProfile : 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]=\"!primaryLineReference\">\r\n      <app-user-calling\r\n        *ngIf=\"primaryLineReference\"\r\n        [siteId]=\"siteId\"\r\n        (onExtensionChange)=\"onExtensionChange()\"\r\n        [primaryLineDirectoryNumber]=\"primaryLineReference\">\r\n      </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\r\n        [devices]=\"user?.devices\"\r\n        (onDeviceSelect)=\"onDeviceSelect($event)\">\r\n      </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  <!-- keeps the bottom of the content reachable above the fixed panel -->\r\n  <!-- <div class=\"actions-panel-spacer\" [class.actions-panel-spacer--visible]=\"hasUnsavedChanges()\"></div>\r\n  <div class=\"actions-panel\"\r\n       [class.actions-panel--visible]=\"hasUnsavedChanges()\"\r\n       [attr.aria-hidden]=\"!hasUnsavedChanges()\">\r\n    <div class=\"actions-panel__actions\">\r\n      <button type=\"button\" class=\"btn-outline\" [disabled]=\"savePending\" (click)=\"cancelChanges()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn-filled\" [disabled]=\"isSavingDisabled()\" (click)=\"saveChanges()\">Save</button>\r\n    </div>\r\n  </div> -->  \r\n\r\n  <ng-template #userProfile>\r\n    <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n      <div class=\"info-boxes-container\">\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">User Details</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">User Id</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"User Id\" formControlName=\"userid\" (input)=\"onChangeField('userid')\">\r\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('required')\">\r\n                  <i class=\"fa fa-exclamation-triangle\"></i>\r\n                  This field is required\r\n                </span>\r\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n                  <i class=\"fa fa-exclamation-triangle\"></i>\r\n                  User ID already exists\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Primary email</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Primary email\" formControlName=\"email\" (input)=\"onChangeField('email')\">\r\n                <span class=\"field-error\" *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                </span>\r\n                <span class=\"field-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                </span>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Fisrt Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Fisrt Name\" formControlName=\"firstName\" (input)=\"onChangeField('firstName')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Last Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Last Name\" formControlName=\"lastName\" (input)=\"onChangeField('lastName')\">\r\n                <span class=\"field-error\" *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                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">General User Info</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">Department</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Department\" formControlName=\"department\" type=\"text\" (input)=\"onChangeField('department')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Manager user ID</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Manager user ID\" formControlName=\"manager\" type=\"text\" (input)=\"onChangeField('manager')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Associated PC</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Associated PC\" formControlName=\"associatedPc\" type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Digest credentials</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\" type=\"text\"\r\n                       (input)=\"onChangeField('digestCredentials')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">User profile</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Mobile voice access</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Userlocale</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Confirm digest credentials\" formControlName=\"confirmDigestCredentials\" type=\"text\"\r\n                       (input)=\"onChangeField('confirmDigestCredentials')\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Contact Information</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">Middle Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Middle Name\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Telephone Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Telephone Number\" formControlName=\"telephoneNumber\"\r\n                       (input)=\"onChangeField('telephoneNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Mobile Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Mobile Number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Directory URI</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Directory URI\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Title</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Title\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Home Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Home Number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Pager Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Pager Number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Display Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Display Name\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">EM Configurations</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">BLF Presence Group</div>\r\n              <app-lazy-loading-select\r\n                [siteId]=\"siteId\"\r\n                [controlName]=\"'presenceGroup'\"\r\n                [form]=\"user.form\"\r\n                (changeField)=\"changeField('presenceGroup')\"\r\n                [optionsToken]=\"'userProfiles'\"\r\n              ></app-lazy-loading-select>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Subscribe CSS</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Subscribe CSS\" formControlName=\"subscribeCss\" type=\"text\" (input)=\"onChangeField('subscribeCss')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Allow Control of Device from CTI</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"allowDeviceControlFromCti\"\r\n                  (change)=\"onChangeField('allowDeviceControlFromCti')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Enable Extension Mobility Cross Cluster</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"enableCrossClusterEm\"\r\n                  (change)=\"onChangeField('enableCrossClusterEm')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Multilevel Precedence and Preemption Authorization</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">MLPP User Identification Number</div>\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            <mat-divider />\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">MLPP Precedence Authorization Level</div>\r\n              <mat-form-field appearance=\"outline\" class=\"simple-select\">\r\n                <mat-select formControlName=\"mlppPrecedencePattern\"\r\n                            (selectionChange)=\"changeField('mlppPrecedencePattern')\">\r\n                  <mat-option *ngFor=\"let option of authLevelOptions\" [value]=\"option\">\r\n                    {{option}}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            <mat-divider />\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Enable MLPP</div>\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        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Service Settings</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Home Cluster</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"homeCluster\"\r\n                  (change)=\"onChangeField('homeCluster')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n      </div>\r\n    </form>\r\n  </ng-template>\r\n\r\n  <ng-template #webexUserProfile>\n    <form *ngIf=\"user && form\" [formGroup]=\"form\">\n      <div class=\"info-boxes-container\">\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">User Details</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">User Id</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"User Id\" formControlName=\"userid\" (input)=\"onChangeField('userid')\">\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('exist')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  User ID already exists\n                </span>\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Primary email</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Primary email\" formControlName=\"email\" (input)=\"onChangeField('email')\">\n                <span class=\"field-error\" *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n                <span class=\"field-error\" *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  Please enter valid email\n                </span>\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Fisrt Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Fisrt Name\" formControlName=\"firstName\" (input)=\"onChangeField('firstName')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Last Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Last Name\" formControlName=\"lastName\" (input)=\"onChangeField('lastName')\">\n                <span class=\"field-error\" *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n              </div>\n            </div>\n          </div>\n        </section>\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">General User Info</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">Department</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Department\" formControlName=\"department\" type=\"text\" (input)=\"onChangeField('department')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Manager user ID</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Manager user ID\" formControlName=\"manager\" type=\"text\" (input)=\"onChangeField('manager')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Associated PC</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Associated PC\" formControlName=\"associatedPc\" type=\"text\" (input)=\"onChangeField('associatedPc')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\" type=\"text\"\n                       (input)=\"onChangeField('digestCredentials')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">User profile</div>\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userProfile'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField('userProfile')\"\n                [optionsToken]=\"'userProfiles'\"\n              ></app-lazy-loading-select>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Mobile voice access</div>\n              <mat-slide-toggle class=\"custom-toggle\"\n                formControlName=\"enableMobileVoiceAccess\"\n                (change)=\"onChangeField('enableMobileVoiceAccess')\"\n                [checked]=\"user.enableMobileVoiceAccess\">\n              </mat-slide-toggle>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Userlocale</div>\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userLocale'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField($event)\"\n                [optionsToken]=\"'userLocales'\"\n                [default]=\"{key: '', value: 'None', disabled: false}\">\n              </app-lazy-loading-select>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Confirm digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Confirm digest credentials\" formControlName=\"confirmDigestCredentials\" type=\"text\"\n                       (input)=\"onChangeField('confirmDigestCredentials')\">\n              </div>\n            </div>\n          </div>\n        </section>\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">Contact Information</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">Middle Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Middle Name\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Telephone Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Telephone Number\" formControlName=\"telephoneNumber\"\n                       (input)=\"onChangeField('telephoneNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Mobile Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Mobile Number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\"\n                       (input)=\"onChangeField('digestCredentials')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Directory URI</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Directory URI\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Title</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Title\" formControlName=\"title\" (input)=\"onChangeField('title')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Home Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Home Number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Pager Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Pager Number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Display Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Display Name\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\n              </div>\n            </div>\n          </div>\n        </section>\n\n      </div>\n    </form>\n  </ng-template>\n</div>\r\n\r\n<!-- <button mat-raised-button color=\"primary\" (click)=\"save()\" >Save</button> -->", 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}.mat-divider{margin:5px 0!important}.actions-panel{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#dedede;border-top:1px solid rgba(0,0,0,.2);padding:.75rem 1.5rem;transform:translateY(100%);visibility:hidden;transition:transform .25s ease-in-out,visibility 0s linear .25s}.actions-panel--visible{transform:translateY(0);visibility:visible;transition:transform .25s ease-in-out,visibility 0s linear 0s}.actions-panel__actions{display:flex;justify-content:flex-end;gap:.75rem}.actions-panel-spacer{height:0;transition:height .25s ease-in-out}.actions-panel-spacer--visible{height:4rem}@media (prefers-reduced-motion: reduce){.actions-panel,.actions-panel--visible,.actions-panel-spacer{transition:none}}.btn-outline,.btn-filled{padding:.313rem .75rem;border-radius:50px;font-weight:500;font-size:.875rem;font-family:Poppins,Poppins,sans-serif;cursor:pointer;transition:background-color .1s ease-in-out;white-space:nowrap}.btn-outline{background:transparent;border:1px solid rgba(0,0,0,.2);color:#000000f2}.btn-outline:hover:not(:disabled){background:rgba(0,0,0,.0705882353)}.btn-outline:disabled{color:#babcc5;border-color:#dfe3e7;cursor:not-allowed}.btn-filled{background:rgba(0,0,0,.9490196078);color:#fff;border:1px solid transparent}.btn-filled:hover:not(:disabled){background:#2a2a2a}.btn-filled:disabled{background:#DFE3E7;color:#babcc5;cursor:not-allowed}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:3rem}.info-boxes-container .card{display:flex;flex-direction:column;padding:1.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#ffffff;min-width:0;font-family:Poppins,Poppins,sans-serif;gap:1.5rem}.info-boxes-container .card.vertical-card{flex-direction:row}.info-boxes-container .card.vertical-card .main-content{gap:0}.info-boxes-container .card.vertical-card .main-content .mat-divider{margin:0!important;border-top-color:#0003!important}.info-boxes-container .card.vertical-card .main-content .input-holder{min-height:2rem;box-sizing:content-box;display:flex;align-items:center;gap:3.25rem}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-top{padding:.75rem 0 0}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-bottom{padding:0 0 .75rem}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-top-bottom{padding:.75rem 0}.info-boxes-container .card.vertical-card .main-content .input-holder .input-holder__name{max-width:15rem;width:15rem;flex-shrink:0;color:#000000f2;font-size:.875rem;font-weight:400;white-space:normal;overflow-wrap:break-word}.info-boxes-container .card.vertical-card .main-content .input-holder .input-holder__field{display:flex;flex-direction:column;gap:.375rem}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input{width:calc(14.25rem - 26px);max-width:calc(100% - 26px);height:21px;padding:4px 12px;box-sizing:content-box;background:#fff;border:solid .0625rem rgba(0,0,0,.5019607843)!important;border-radius:8px;font-family:inherit;font-size:.875rem;font-weight:400;color:#000000f2}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input:hover{background-color:#00000012!important}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input:focus{color:#000000b3;background:#fff;border:solid .0625rem rgba(0,0,0,.5019607843)!important;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;outline:none}.info-boxes-container .card.vertical-card .main-content .input-holder app-lazy-loading-select,.info-boxes-container .card.vertical-card .main-content .input-holder .mat-form-field.simple-select{width:14.25rem!important;max-width:14.25rem!important}.info-boxes-container .card.vertical-card .main-content .input-holder .field-error{display:flex;align-items:center;gap:.375rem;color:#c73636;font-size:.75rem}.info-boxes-container .card .header{display:flex;align-items:start;width:15rem;flex-shrink:0}.info-boxes-container .card .header .title{font-weight:500;font-size:1rem;font-family:Poppins,Poppins,sans-serif;color:#000000f2}.info-boxes-container .card .main-content{display:flex;flex-direction:column;min-width:0;gap:1.5rem;flex:1}.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.simple-select{padding:0}.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-start,.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-gap,.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-end{border-color:#00000080!important}.mat-form-field.simple-select.mat-focused ::ng-deep .mat-form-field-outline{box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;border-radius:6px}.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}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: "component", type: i4$1.TkLoaderComponent, selector: "tk-loader", inputs: ["diameter", "strokeWidth", "backdrop", "color"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: UserInfoComponent, selector: "app-user-info", inputs: ["name", "active", "email", "position", "cucmid"] }, { 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", "primaryLineDirectoryNumber"], outputs: ["onExtensionChange"] }, { kind: "component", type: DeviceListComponent, selector: "app-device-list", inputs: ["devices"], outputs: ["onDeviceSelect"] }, { kind: "component", type: UserSummaryComponent, selector: "app-user-summary", inputs: ["user"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-user-manage-widget', template: "<app-loader *ngIf=\"dataPending || savePending || 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\r\n    *ngIf=\"user\"\r\n    [name]=\"userName\"\r\n    [email]=\"user.email\"\r\n    [active]=\"true\"\r\n    [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"\r\n    [cucmid]=\"user.cucmId\">\r\n  </app-user-info>\r\n\r\n  <!-- Summary isn't available for Webex users, so they start on the Profile tab -->\r\n  <mat-tab-group disableRipple class=\"tabs-container\" [selectedIndex]=\"webexUUID ? 1 : 0\">\r\n    <mat-tab label=\"Summary\" [disabled]=\"!!webexUUID\">\r\n      <app-user-summary *ngIf=\"user\" [user]=\"user\"></app-user-summary>\r\n    </mat-tab>\r\n    <mat-tab label=\"Profile\">\r\n      <ng-container *ngTemplateOutlet=\"webexUUID ? webexUserProfile : 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]=\"!primaryLineReference\">\r\n      <app-user-calling\r\n        *ngIf=\"primaryLineReference\"\r\n        [siteId]=\"siteId\"\r\n        (onExtensionChange)=\"onExtensionChange()\"\r\n        [primaryLineDirectoryNumber]=\"primaryLineReference\">\r\n      </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\r\n        [devices]=\"user?.devices\"\r\n        (onDeviceSelect)=\"onDeviceSelect($event)\">\r\n      </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  <!-- keeps the bottom of the content reachable above the fixed panel -->\r\n  <!-- <div class=\"actions-panel-spacer\" [class.actions-panel-spacer--visible]=\"hasUnsavedChanges()\"></div>\r\n  <div class=\"actions-panel\"\r\n       [class.actions-panel--visible]=\"hasUnsavedChanges()\"\r\n       [attr.aria-hidden]=\"!hasUnsavedChanges()\">\r\n    <div class=\"actions-panel__actions\">\r\n      <button type=\"button\" class=\"btn-outline\" [disabled]=\"savePending\" (click)=\"cancelChanges()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn-filled\" [disabled]=\"isSavingDisabled()\" (click)=\"saveChanges()\">Save</button>\r\n    </div>\r\n  </div> -->  \r\n\r\n  <ng-template #userProfile>\r\n    <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n      <div class=\"info-boxes-container\">\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">User Details</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">User Id</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"User Id\" formControlName=\"userid\" (input)=\"onChangeField('userid')\">\r\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('required')\">\r\n                  <i class=\"fa fa-exclamation-triangle\"></i>\r\n                  This field is required\r\n                </span>\r\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n                  <i class=\"fa fa-exclamation-triangle\"></i>\r\n                  User ID already exists\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Primary email</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Primary email\" formControlName=\"email\" (input)=\"onChangeField('email')\">\r\n                <span class=\"field-error\" *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                </span>\r\n                <span class=\"field-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                </span>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Fisrt Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Fisrt Name\" formControlName=\"firstName\" (input)=\"onChangeField('firstName')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Last Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Last Name\" formControlName=\"lastName\" (input)=\"onChangeField('lastName')\">\r\n                <span class=\"field-error\" *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                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">General User Info</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">Department</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Department\" formControlName=\"department\" type=\"text\" (input)=\"onChangeField('department')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Manager user ID</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Manager user ID\" formControlName=\"manager\" type=\"text\" (input)=\"onChangeField('manager')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Associated PC</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Associated PC\" formControlName=\"associatedPc\" type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Digest credentials</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\" type=\"text\"\r\n                       (input)=\"onChangeField('digestCredentials')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">User profile</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Mobile voice access</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Userlocale</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Confirm digest credentials\" formControlName=\"confirmDigestCredentials\" type=\"text\"\r\n                       (input)=\"onChangeField('confirmDigestCredentials')\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Contact Information</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">Middle Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Middle Name\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Telephone Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Telephone Number\" formControlName=\"telephoneNumber\"\r\n                       (input)=\"onChangeField('telephoneNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Mobile Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Mobile Number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Directory URI</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Directory URI\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Title</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Title\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Home Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Home Number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Pager Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Pager Number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Display Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Display Name\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">EM Configurations</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">BLF Presence Group</div>\r\n              <app-lazy-loading-select\r\n                [siteId]=\"siteId\"\r\n                [controlName]=\"'presenceGroup'\"\r\n                [form]=\"user.form\"\r\n                (changeField)=\"changeField('presenceGroup')\"\r\n                [optionsToken]=\"'userProfiles'\"\r\n              ></app-lazy-loading-select>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Subscribe CSS</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Subscribe CSS\" formControlName=\"subscribeCss\" type=\"text\" (input)=\"onChangeField('subscribeCss')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Allow Control of Device from CTI</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"allowDeviceControlFromCti\"\r\n                  (change)=\"onChangeField('allowDeviceControlFromCti')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Enable Extension Mobility Cross Cluster</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"enableCrossClusterEm\"\r\n                  (change)=\"onChangeField('enableCrossClusterEm')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Multilevel Precedence and Preemption Authorization</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">MLPP User Identification Number</div>\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            <mat-divider />\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">MLPP Precedence Authorization Level</div>\r\n              <mat-form-field appearance=\"outline\" class=\"simple-select\">\r\n                <mat-select formControlName=\"mlppPrecedencePattern\"\r\n                            (selectionChange)=\"changeField('mlppPrecedencePattern')\">\r\n                  <mat-option *ngFor=\"let option of authLevelOptions\" [value]=\"option\">\r\n                    {{option}}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            <mat-divider />\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Enable MLPP</div>\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        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Service Settings</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Home Cluster</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"homeCluster\"\r\n                  (change)=\"onChangeField('homeCluster')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n      </div>\r\n    </form>\r\n  </ng-template>\r\n\r\n  <ng-template #webexUserProfile>\n    <form *ngIf=\"user && form\" [formGroup]=\"form\">\n      <div class=\"info-boxes-container\">\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">User Details</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">User Id</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"User Id\" formControlName=\"userid\" (input)=\"onChangeField('userid')\">\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('exist')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  User ID already exists\n                </span>\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Primary email</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Primary email\" formControlName=\"email\" (input)=\"onChangeField('email')\">\n                <span class=\"field-error\" *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n                <span class=\"field-error\" *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  Please enter valid email\n                </span>\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Fisrt Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Fisrt Name\" formControlName=\"firstName\" (input)=\"onChangeField('firstName')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Last Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Last Name\" formControlName=\"lastName\" (input)=\"onChangeField('lastName')\">\n                <span class=\"field-error\" *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n              </div>\n            </div>\n          </div>\n        </section>\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">General User Info</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">Department</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Department\" formControlName=\"department\" type=\"text\" (input)=\"onChangeField('department')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Manager user ID</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Manager user ID\" formControlName=\"manager\" type=\"text\" (input)=\"onChangeField('manager')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Associated PC</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Associated PC\" formControlName=\"associatedPc\" type=\"text\" (input)=\"onChangeField('associatedPc')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\" type=\"text\"\n                       (input)=\"onChangeField('digestCredentials')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">User profile</div>\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userProfile'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField('userProfile')\"\n                [optionsToken]=\"'userProfiles'\"\n              ></app-lazy-loading-select>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Mobile voice access</div>\n              <mat-slide-toggle class=\"custom-toggle\"\n                formControlName=\"enableMobileVoiceAccess\"\n                (change)=\"onChangeField('enableMobileVoiceAccess')\"\n                [checked]=\"user.enableMobileVoiceAccess\">\n              </mat-slide-toggle>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Userlocale</div>\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userLocale'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField($event)\"\n                [optionsToken]=\"'userLocales'\"\n                [default]=\"{key: '', value: 'None', disabled: false}\">\n              </app-lazy-loading-select>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Confirm digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Confirm digest credentials\" formControlName=\"confirmDigestCredentials\" type=\"text\"\n                       (input)=\"onChangeField('confirmDigestCredentials')\">\n              </div>\n            </div>\n          </div>\n        </section>\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">Contact Information</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">Middle Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Middle Name\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Telephone Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Telephone Number\" formControlName=\"telephoneNumber\"\n                       (input)=\"onChangeField('telephoneNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Mobile Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Mobile Number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\"\n                       (input)=\"onChangeField('digestCredentials')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Directory URI</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Directory URI\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Title</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Title\" formControlName=\"title\" (input)=\"onChangeField('title')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Home Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Home Number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Pager Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Pager Number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Display Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Display Name\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\n              </div>\n            </div>\n          </div>\n        </section>\n\n      </div>\n    </form>\n  </ng-template>\n</div>\r\n\r\n<!-- <button mat-raised-button color=\"primary\" (click)=\"save()\" >Save</button> -->", 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}.mat-divider{margin:5px 0!important}.actions-panel{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#dedede;border-top:1px solid rgba(0,0,0,.2);padding:.75rem 1.5rem;transform:translateY(100%);visibility:hidden;transition:transform .25s ease-in-out,visibility 0s linear .25s}.actions-panel--visible{transform:translateY(0);visibility:visible;transition:transform .25s ease-in-out,visibility 0s linear 0s}.actions-panel__actions{display:flex;justify-content:flex-end;gap:.75rem}.actions-panel-spacer{height:0;transition:height .25s ease-in-out}.actions-panel-spacer--visible{height:4rem}@media (prefers-reduced-motion: reduce){.actions-panel,.actions-panel--visible,.actions-panel-spacer{transition:none}}.btn-outline,.btn-filled{padding:.313rem .75rem;border-radius:50px;font-weight:500;font-size:.875rem;font-family:Poppins,Poppins,sans-serif;cursor:pointer;transition:background-color .1s ease-in-out;white-space:nowrap}.btn-outline{background:transparent;border:1px solid rgba(0,0,0,.2);color:#000000f2}.btn-outline:hover:not(:disabled){background:rgba(0,0,0,.0705882353)}.btn-outline:disabled{color:#babcc5;border-color:#dfe3e7;cursor:not-allowed}.btn-filled{background:rgba(0,0,0,.9490196078);color:#fff;border:1px solid transparent}.btn-filled:hover:not(:disabled){background:#2a2a2a}.btn-filled:disabled{background:#DFE3E7;color:#babcc5;cursor:not-allowed}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:3rem}.info-boxes-container .card{display:flex;flex-direction:column;padding:1.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#ffffff;min-width:0;font-family:Poppins,Poppins,sans-serif;gap:1.5rem}.info-boxes-container .card.vertical-card{flex-direction:row}.info-boxes-container .card.vertical-card .main-content{gap:0}.info-boxes-container .card.vertical-card .main-content .mat-divider{margin:0!important;border-top-color:#0003!important}.info-boxes-container .card.vertical-card .main-content .input-holder{min-height:2rem;box-sizing:content-box;display:flex;align-items:center;gap:3.25rem}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-top{padding:.75rem 0 0}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-bottom{padding:0 0 .75rem}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-top-bottom{padding:.75rem 0}.info-boxes-container .card.vertical-card .main-content .input-holder .input-holder__name{max-width:15rem;width:15rem;flex-shrink:0;color:#000000f2;font-size:.875rem;font-weight:400;white-space:normal;overflow-wrap:break-word}.info-boxes-container .card.vertical-card .main-content .input-holder .input-holder__field{display:flex;flex-direction:column;gap:.375rem}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input{width:calc(14.25rem - 26px);max-width:calc(100% - 26px);height:21px;padding:4px 12px;box-sizing:content-box;background:#fff;border:solid .0625rem rgba(0,0,0,.5019607843)!important;border-radius:8px;font-family:inherit;font-size:.875rem;font-weight:400;color:#000000f2}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input:hover{background-color:#00000012!important}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input:focus{color:#000000b3;background:#fff;border:solid .0625rem rgba(0,0,0,.5019607843)!important;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;outline:none}.info-boxes-container .card.vertical-card .main-content .input-holder app-lazy-loading-select,.info-boxes-container .card.vertical-card .main-content .input-holder .mat-form-field.simple-select{width:14.25rem!important;max-width:14.25rem!important}.info-boxes-container .card.vertical-card .main-content .input-holder .field-error{display:flex;align-items:center;gap:.375rem;color:#c73636;font-size:.75rem}.info-boxes-container .card .header{display:flex;align-items:start;width:15rem;flex-shrink:0}.info-boxes-container .card .header .title{font-weight:500;font-size:1rem;font-family:Poppins,Poppins,sans-serif;color:#000000f2}.info-boxes-container .card .main-content{display:flex;flex-direction:column;min-width:0;gap:1.5rem;flex:1}.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.simple-select{padding:0}.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-start,.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-gap,.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-end{border-color:#00000080!important}.mat-form-field.simple-select.mat-focused ::ng-deep .mat-form-field-outline{box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;border-radius:6px}.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}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"] }]
+            args: [{ selector: 'app-user-manage-widget', template: "<tk-loader *ngIf=\"dataPending || savePending || userService.dataPending\"></tk-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\r\n    *ngIf=\"user\"\r\n    [name]=\"userName\"\r\n    [email]=\"user.email\"\r\n    [active]=\"true\"\r\n    [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\"\r\n    [cucmid]=\"user.cucmId\">\r\n  </app-user-info>\r\n\r\n  <!-- Summary isn't available for Webex users, so they start on the Profile tab -->\r\n  <mat-tab-group disableRipple class=\"tabs-container\" [selectedIndex]=\"webexUUID ? 1 : 0\">\r\n    <mat-tab label=\"Summary\" [disabled]=\"!!webexUUID\">\r\n      <app-user-summary *ngIf=\"user\" [user]=\"user\"></app-user-summary>\r\n    </mat-tab>\r\n    <mat-tab label=\"Profile\">\r\n      <ng-container *ngTemplateOutlet=\"webexUUID ? webexUserProfile : 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]=\"!primaryLineReference\">\r\n      <app-user-calling\r\n        *ngIf=\"primaryLineReference\"\r\n        [siteId]=\"siteId\"\r\n        (onExtensionChange)=\"onExtensionChange()\"\r\n        [primaryLineDirectoryNumber]=\"primaryLineReference\">\r\n      </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\r\n        [devices]=\"user?.devices\"\r\n        (onDeviceSelect)=\"onDeviceSelect($event)\">\r\n      </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  <!-- keeps the bottom of the content reachable above the fixed panel -->\r\n  <!-- <div class=\"actions-panel-spacer\" [class.actions-panel-spacer--visible]=\"hasUnsavedChanges()\"></div>\r\n  <div class=\"actions-panel\"\r\n       [class.actions-panel--visible]=\"hasUnsavedChanges()\"\r\n       [attr.aria-hidden]=\"!hasUnsavedChanges()\">\r\n    <div class=\"actions-panel__actions\">\r\n      <button type=\"button\" class=\"btn-outline\" [disabled]=\"savePending\" (click)=\"cancelChanges()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn-filled\" [disabled]=\"isSavingDisabled()\" (click)=\"saveChanges()\">Save</button>\r\n    </div>\r\n  </div> -->  \r\n\r\n  <ng-template #userProfile>\r\n    <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n      <div class=\"info-boxes-container\">\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">User Details</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">User Id</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"User Id\" formControlName=\"userid\" (input)=\"onChangeField('userid')\">\r\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('required')\">\r\n                  <i class=\"fa fa-exclamation-triangle\"></i>\r\n                  This field is required\r\n                </span>\r\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n                  <i class=\"fa fa-exclamation-triangle\"></i>\r\n                  User ID already exists\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Primary email</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Primary email\" formControlName=\"email\" (input)=\"onChangeField('email')\">\r\n                <span class=\"field-error\" *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                </span>\r\n                <span class=\"field-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                </span>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Fisrt Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Fisrt Name\" formControlName=\"firstName\" (input)=\"onChangeField('firstName')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Last Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Last Name\" formControlName=\"lastName\" (input)=\"onChangeField('lastName')\">\r\n                <span class=\"field-error\" *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                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">General User Info</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">Department</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Department\" formControlName=\"department\" type=\"text\" (input)=\"onChangeField('department')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Manager user ID</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Manager user ID\" formControlName=\"manager\" type=\"text\" (input)=\"onChangeField('manager')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Associated PC</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Associated PC\" formControlName=\"associatedPc\" type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Digest credentials</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\" type=\"text\"\r\n                       (input)=\"onChangeField('digestCredentials')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">User profile</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Mobile voice access</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Userlocale</div>\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            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Confirm digest credentials\" formControlName=\"confirmDigestCredentials\" type=\"text\"\r\n                       (input)=\"onChangeField('confirmDigestCredentials')\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <!--    USER INFO BOX-->\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Contact Information</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">Middle Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Middle Name\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Telephone Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Telephone Number\" formControlName=\"telephoneNumber\"\r\n                       (input)=\"onChangeField('telephoneNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Mobile Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Mobile Number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Directory URI</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Directory URI\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Title</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Title\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Home Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Home Number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Pager Number</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Pager Number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Display Name</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Display Name\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">EM Configurations</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">BLF Presence Group</div>\r\n              <app-lazy-loading-select\r\n                [siteId]=\"siteId\"\r\n                [controlName]=\"'presenceGroup'\"\r\n                [form]=\"user.form\"\r\n                (changeField)=\"changeField('presenceGroup')\"\r\n                [optionsToken]=\"'userProfiles'\"\r\n              ></app-lazy-loading-select>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Subscribe CSS</div>\r\n              <div class=\"input-holder__field\">\r\n                <input class=\"plain-input\" placeholder=\"Subscribe CSS\" formControlName=\"subscribeCss\" type=\"text\" (input)=\"onChangeField('subscribeCss')\">\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">Allow Control of Device from CTI</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"allowDeviceControlFromCti\"\r\n                  (change)=\"onChangeField('allowDeviceControlFromCti')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Enable Extension Mobility Cross Cluster</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"enableCrossClusterEm\"\r\n                  (change)=\"onChangeField('enableCrossClusterEm')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Multilevel Precedence and Preemption Authorization</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder input-holder-bottom\">\r\n              <div class=\"input-holder__name\">MLPP User Identification Number</div>\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            <mat-divider />\r\n            <div class=\"input-holder input-holder-top-bottom\">\r\n              <div class=\"input-holder__name\">MLPP Precedence Authorization Level</div>\r\n              <mat-form-field appearance=\"outline\" class=\"simple-select\">\r\n                <mat-select formControlName=\"mlppPrecedencePattern\"\r\n                            (selectionChange)=\"changeField('mlppPrecedencePattern')\">\r\n                  <mat-option *ngFor=\"let option of authLevelOptions\" [value]=\"option\">\r\n                    {{option}}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            <mat-divider />\r\n            <div class=\"input-holder input-holder-top\">\r\n              <div class=\"input-holder__name\">Enable MLPP</div>\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        </section>\r\n\r\n        <section class=\"card vertical-card\">\r\n          <div class=\"header\">\r\n            <span class=\"title\">Service Settings</span>\r\n          </div>\r\n          <div class=\"main-content\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Home Cluster</div>\r\n              <mat-slide-toggle class=\"custom-toggle\"\r\n                  formControlName=\"homeCluster\"\r\n                  (change)=\"onChangeField('homeCluster')\">\r\n              </mat-slide-toggle>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n      </div>\r\n    </form>\r\n  </ng-template>\r\n\r\n  <ng-template #webexUserProfile>\n    <form *ngIf=\"user && form\" [formGroup]=\"form\">\n      <div class=\"info-boxes-container\">\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">User Details</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">User Id</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"User Id\" formControlName=\"userid\" (input)=\"onChangeField('userid')\">\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n                <span class=\"field-error\" *ngIf=\"form.get('userid')?.hasError('exist')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  User ID already exists\n                </span>\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Primary email</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Primary email\" formControlName=\"email\" (input)=\"onChangeField('email')\">\n                <span class=\"field-error\" *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n                <span class=\"field-error\" *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  Please enter valid email\n                </span>\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Fisrt Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Fisrt Name\" formControlName=\"firstName\" (input)=\"onChangeField('firstName')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Last Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Last Name\" formControlName=\"lastName\" (input)=\"onChangeField('lastName')\">\n                <span class=\"field-error\" *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </span>\n              </div>\n            </div>\n          </div>\n        </section>\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">General User Info</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">Department</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Department\" formControlName=\"department\" type=\"text\" (input)=\"onChangeField('department')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Manager user ID</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Manager user ID\" formControlName=\"manager\" type=\"text\" (input)=\"onChangeField('manager')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Associated PC</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Associated PC\" formControlName=\"associatedPc\" type=\"text\" (input)=\"onChangeField('associatedPc')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\" type=\"text\"\n                       (input)=\"onChangeField('digestCredentials')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">User profile</div>\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userProfile'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField('userProfile')\"\n                [optionsToken]=\"'userProfiles'\"\n              ></app-lazy-loading-select>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Mobile voice access</div>\n              <mat-slide-toggle class=\"custom-toggle\"\n                formControlName=\"enableMobileVoiceAccess\"\n                (change)=\"onChangeField('enableMobileVoiceAccess')\"\n                [checked]=\"user.enableMobileVoiceAccess\">\n              </mat-slide-toggle>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Userlocale</div>\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userLocale'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField($event)\"\n                [optionsToken]=\"'userLocales'\"\n                [default]=\"{key: '', value: 'None', disabled: false}\">\n              </app-lazy-loading-select>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Confirm digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" placeholder=\"Confirm digest credentials\" formControlName=\"confirmDigestCredentials\" type=\"text\"\n                       (input)=\"onChangeField('confirmDigestCredentials')\">\n              </div>\n            </div>\n          </div>\n        </section>\n\n        <!--    USER INFO BOX-->\n        <section class=\"card vertical-card\">\n          <div class=\"header\">\n            <span class=\"title\">Contact Information</span>\n          </div>\n          <div class=\"main-content\">\n            <div class=\"input-holder input-holder-bottom\">\n              <div class=\"input-holder__name\">Middle Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Middle Name\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Telephone Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Telephone Number\" formControlName=\"telephoneNumber\"\n                       (input)=\"onChangeField('telephoneNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Mobile Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Mobile Number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Digest credentials</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Digest credentials\" formControlName=\"digestCredentials\"\n                       (input)=\"onChangeField('digestCredentials')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Directory URI</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Directory URI\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Title</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Title\" formControlName=\"title\" (input)=\"onChangeField('title')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Home Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Home Number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top-bottom\">\n              <div class=\"input-holder__name\">Pager Number</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"number\" placeholder=\"Pager Number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\n              </div>\n            </div>\n            <mat-divider></mat-divider>\n            <div class=\"input-holder input-holder-top\">\n              <div class=\"input-holder__name\">Display Name</div>\n              <div class=\"input-holder__field\">\n                <input class=\"plain-input\" type=\"text\" placeholder=\"Display Name\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\n              </div>\n            </div>\n          </div>\n        </section>\n\n      </div>\n    </form>\n  </ng-template>\n</div>\r\n\r\n<!-- <button mat-raised-button color=\"primary\" (click)=\"save()\" >Save</button> -->", 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}.mat-divider{margin:5px 0!important}.actions-panel{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#dedede;border-top:1px solid rgba(0,0,0,.2);padding:.75rem 1.5rem;transform:translateY(100%);visibility:hidden;transition:transform .25s ease-in-out,visibility 0s linear .25s}.actions-panel--visible{transform:translateY(0);visibility:visible;transition:transform .25s ease-in-out,visibility 0s linear 0s}.actions-panel__actions{display:flex;justify-content:flex-end;gap:.75rem}.actions-panel-spacer{height:0;transition:height .25s ease-in-out}.actions-panel-spacer--visible{height:4rem}@media (prefers-reduced-motion: reduce){.actions-panel,.actions-panel--visible,.actions-panel-spacer{transition:none}}.btn-outline,.btn-filled{padding:.313rem .75rem;border-radius:50px;font-weight:500;font-size:.875rem;font-family:Poppins,Poppins,sans-serif;cursor:pointer;transition:background-color .1s ease-in-out;white-space:nowrap}.btn-outline{background:transparent;border:1px solid rgba(0,0,0,.2);color:#000000f2}.btn-outline:hover:not(:disabled){background:rgba(0,0,0,.0705882353)}.btn-outline:disabled{color:#babcc5;border-color:#dfe3e7;cursor:not-allowed}.btn-filled{background:rgba(0,0,0,.9490196078);color:#fff;border:1px solid transparent}.btn-filled:hover:not(:disabled){background:#2a2a2a}.btn-filled:disabled{background:#DFE3E7;color:#babcc5;cursor:not-allowed}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:3rem}.info-boxes-container .card{display:flex;flex-direction:column;padding:1.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#ffffff;min-width:0;font-family:Poppins,Poppins,sans-serif;gap:1.5rem}.info-boxes-container .card.vertical-card{flex-direction:row}.info-boxes-container .card.vertical-card .main-content{gap:0}.info-boxes-container .card.vertical-card .main-content .mat-divider{margin:0!important;border-top-color:#0003!important}.info-boxes-container .card.vertical-card .main-content .input-holder{min-height:2rem;box-sizing:content-box;display:flex;align-items:center;gap:3.25rem}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-top{padding:.75rem 0 0}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-bottom{padding:0 0 .75rem}.info-boxes-container .card.vertical-card .main-content .input-holder.input-holder-top-bottom{padding:.75rem 0}.info-boxes-container .card.vertical-card .main-content .input-holder .input-holder__name{max-width:15rem;width:15rem;flex-shrink:0;color:#000000f2;font-size:.875rem;font-weight:400;white-space:normal;overflow-wrap:break-word}.info-boxes-container .card.vertical-card .main-content .input-holder .input-holder__field{display:flex;flex-direction:column;gap:.375rem}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input{width:calc(14.25rem - 26px);max-width:calc(100% - 26px);height:21px;padding:4px 12px;box-sizing:content-box;background:#fff;border:solid .0625rem rgba(0,0,0,.5019607843)!important;border-radius:8px;font-family:inherit;font-size:.875rem;font-weight:400;color:#000000f2}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input:hover{background-color:#00000012!important}.info-boxes-container .card.vertical-card .main-content .input-holder .plain-input:focus{color:#000000b3;background:#fff;border:solid .0625rem rgba(0,0,0,.5019607843)!important;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;outline:none}.info-boxes-container .card.vertical-card .main-content .input-holder app-lazy-loading-select,.info-boxes-container .card.vertical-card .main-content .input-holder .mat-form-field.simple-select{width:14.25rem!important;max-width:14.25rem!important}.info-boxes-container .card.vertical-card .main-content .input-holder .field-error{display:flex;align-items:center;gap:.375rem;color:#c73636;font-size:.75rem}.info-boxes-container .card .header{display:flex;align-items:start;width:15rem;flex-shrink:0}.info-boxes-container .card .header .title{font-weight:500;font-size:1rem;font-family:Poppins,Poppins,sans-serif;color:#000000f2}.info-boxes-container .card .main-content{display:flex;flex-direction:column;min-width:0;gap:1.5rem;flex:1}.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.simple-select{padding:0}.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-start,.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-gap,.mat-form-field.simple-select ::ng-deep .mat-form-field-outline-end{border-color:#00000080!important}.mat-form-field.simple-select.mat-focused ::ng-deep .mat-form-field-outline{box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;border-radius:6px}.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}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"] }]
         }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }, { type: DcpApiService }]; }, propDecorators: { onSave: [{
                 type: Output
             }], onChange: [{
@@ -2459,7 +2449,7 @@ class UserCallingExtensionComponent {
     }
 }
 UserCallingExtensionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingExtensionComponent, deps: [{ token: UserService }, { token: DnsService }], target: i0.ɵɵFactoryTarget.Component });
-UserCallingExtensionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCallingExtensionComponent, selector: "app-user-calling-extension", inputs: { control: "control", routePartition: "routePartition", directoryNumber: "directoryNumber", siteId: "siteId" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div *ngIf=\"this.availableNumbers?.length\" class=\"user-calling-extension\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <mat-select [formControl]=\"control\" name=\"extension\"\r\n                (selectionChange)=\"this.onChangeField($event)\">\r\n      <mat-option *ngFor=\"let option of this.availableNumbers; let i = index;\"[value]=\"option\">{{option}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-spinner *ngIf=\"this.dataPending\" [diameter]=\"50\"></mat-spinner>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.user-calling-extension{max-width:200px;margin:0 0 0 6px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box h3{display:block;font-weight:500;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#F3F6F6;border:1px solid #E2E9EF;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }] });
+UserCallingExtensionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCallingExtensionComponent, selector: "app-user-calling-extension", inputs: { control: "control", routePartition: "routePartition", directoryNumber: "directoryNumber", siteId: "siteId" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div *ngIf=\"this.availableNumbers?.length\" class=\"user-calling-extension\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <mat-select [formControl]=\"control\" name=\"extension\"\r\n                (selectionChange)=\"this.onChangeField($event)\">\r\n      <mat-option *ngFor=\"let option of this.availableNumbers; let i = index;\"[value]=\"option\">{{option}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-spinner *ngIf=\"this.dataPending\" [diameter]=\"50\"></mat-spinner>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.user-calling-extension{max-width:200px;margin:0 0 0 6px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box h3{display:block;font-weight:500;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#F3F6F6;border:1px solid #E2E9EF;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingExtensionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-user-calling-extension', template: "<div *ngIf=\"this.availableNumbers?.length\" class=\"user-calling-extension\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <mat-select [formControl]=\"control\" name=\"extension\"\r\n                (selectionChange)=\"this.onChangeField($event)\">\r\n      <mat-option *ngFor=\"let option of this.availableNumbers; let i = index;\"[value]=\"option\">{{option}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-spinner *ngIf=\"this.dataPending\" [diameter]=\"50\"></mat-spinner>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.user-calling-extension{max-width:200px;margin:0 0 0 6px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box h3{display:block;font-weight:500;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#F3F6F6;border:1px solid #E2E9EF;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"] }]
@@ -2478,8 +2468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class UserManageModule {
 }
 UserManageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UserManageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UserManageModule, declarations: [AppLoaderComponent,
-        UserInfoComponent,
+UserManageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UserManageModule, declarations: [UserInfoComponent,
         NotificationsComponent,
         PaginationComponent,
         LazyLoadingSelectComponent,
@@ -2488,7 +2477,8 @@ UserManageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         UserCallingExtensionComponent,
         DeviceListComponent,
         DeviceRowComponent,
-        UserSummaryComponent], imports: [CommonModule,
+        UserSummaryComponent], imports: [TkLoaderComponent,
+        CommonModule,
         BrowserModule,
         BrowserAnimationsModule,
         FormsModule,
@@ -2507,7 +2497,8 @@ UserManageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
         LineService,
         DcpApiService,
         { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
-    ], imports: [CommonModule,
+    ], imports: [TkLoaderComponent,
+        CommonModule,
         BrowserModule,
         BrowserAnimationsModule,
         FormsModule,
@@ -2519,7 +2510,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: NgModule,
             args: [{
                     declarations: [
-                        AppLoaderComponent,
                         UserInfoComponent,
                         NotificationsComponent,
                         PaginationComponent,
@@ -2532,6 +2522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         UserSummaryComponent,
                     ],
                     imports: [
+                        TkLoaderComponent,
                         CommonModule,
                         BrowserModule,
                         BrowserAnimationsModule,