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

package/fesm2020/tuki-io-tuki-widgets-users-list.mjs

@@ -1,23 +1,25 @@
 import * as i0 from '@angular/core';
 import { Component, ViewEncapsulation, Inject, Injectable, EventEmitter, Input, Output, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { Subject, of, forkJoin, BehaviorSubject, Observable, takeUntil, map as map$1, switchMap, EMPTY, timer, takeWhile } from 'rxjs';
-import * as i11$1 from '@angular/material/table';
+import * as i12$1 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i2 from '@angular/common';
-import * as i7 from '@angular/forms';
+import * as i8 from '@angular/forms';
 import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { map } from 'rxjs/operators';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders, HttpClientModule } from '@angular/common/http';
-import * as i8 from '@angular/material/button';
+import * as i6$2 from '@tuki-io/tuki-widgets/shared';
+import { TkLoaderComponent } from '@tuki-io/tuki-widgets/shared';
+import * as i9 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i9 from '@angular/material/progress-spinner';
+import * as i10 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i12$1 from '@angular/material/menu';
+import * as i13$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i4 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
@@ -26,17 +28,17 @@ import { MatSelectModule } from '@angular/material/select';
 import * as i6 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import Big from 'big.js';
-import * as i10 from '@angular/material/form-field';
+import * as i11 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i11 from '@angular/material/input';
+import * as i12 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i12 from '@angular/material/autocomplete';
+import * as i13 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i14 from '@angular/material/stepper';
+import * as i15 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
-import * as i7$1 from '@angular/material/checkbox';
+import * as i7 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i16 from '@angular/material/radio';
+import * as i17 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i6$1 from '@angular/material/divider';
 import { BrowserModule } from '@angular/platform-browser';
@@ -879,7 +881,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 || [5, 10, 25, 100]\"\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\" style=\"justify-content: left;\" *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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.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 || [5, 10, 25, 100]\"\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\" style=\"justify-content: left;\" *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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.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 || [5, 10, 25, 100]\"\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\" style=\"justify-content: left;\" *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"] }]
@@ -897,17 +899,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
 
-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}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"], dependencies: [{ kind: "component", type: i9.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}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
 var EntityChangeType;
 (function (EntityChangeType) {
     EntityChangeType["added"] = "added";
@@ -1337,7 +1328,7 @@ class DeviceMoveUserWizardComponent {
     }
 }
 DeviceMoveUserWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceMoveUserWizardComponent, deps: [{ token: DnsService }, { token: UserService }, { token: SiteSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-DeviceMoveUserWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceMoveUserWizardComponent, selector: "app-device-move-user-wizard", inputs: { device: "device" }, ngImport: i0, template: "<form>\r\n  <div class=\"device-item-panel-container\">\r\n    <div class=\"device-left\">\r\n      <div\r\n        class=\"device-migration-status\"\r\n        [ngClass]=\"{'--checked':  device.toMigrate}\"\r\n      >\r\n        <mat-checkbox\r\n          class=\"rounded\"\r\n          [checked]=\"device.toMigrate\"\r\n        ></mat-checkbox>\r\n      </div>\r\n    </div>\r\n    <div class=\"device-right\">\r\n      <div class=\"device-header\">\r\n        <div class=\"device-name\">{{ device.name }}</div>\r\n        <div class=\"device-migrate\" *ngIf=\"device.isEligible\">\r\n          <mat-checkbox name=\"toMigrate\"\r\n            [(ngModel)]=\"device.toMigrate\"\r\n          >Migrate this device</mat-checkbox>\r\n        </div>\r\n      </div>\r\n      <mat-divider></mat-divider>\r\n      <div class=\"device-info\">\r\n        <div *ngIf=\"device.product\" class=\"device-info__item\">\r\n          <div class=\"key\">Device type</div>\r\n          <div class=\"value\">{{ device.product }}</div>\r\n        </div>\r\n        <div *ngIf=\"device.mac\" class=\"device-info__item\">\r\n          <div class=\"key\">MAC address</div>\r\n          <div class=\"value\">{{ device.mac }}</div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n", styles: [".device-item-panel-container{display:flex;border:1px solid gray;border-radius:.5rem;margin-bottom:1.5rem;overflow:hidden}.device-migration-status{height:100%;padding:1rem;box-sizing:border-box;background-color:#ffebc2}.device-right{width:100%;display:flex;flex-direction:column;justify-content:space-between;padding:1rem 2rem}.device-header{display:flex;justify-content:space-between;align-items:center;padding:0 0 7px;gap:1rem}.device-header .device-name{font-size:18px;font-weight:700}.device-header .device-migrate{font-weight:700}.device-header .device-migrate .mat-checkbox ::ng-deep .mat-checkbox-label{margin-left:.4rem}.device-header .device-migrate ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#05f!important}.device-header .device-migrate ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.device-header .device-migrate ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background{background-color:#05f!important}.device-header .device-migrate ::ng-deep .mat-checkbox.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#05f!important}.device-info{display:grid;grid-template-columns:auto auto;gap:2.5rem}.device-info__item{font-size:16px;font-weight:700}.device-info__item .key{margin:10px 0 0}.device-info__item .value{color:#a0a0a0}.--checked{background-color:#cef5eb}.mat-checkbox ::ng-deep .mat-checkbox-inner-container{width:20px;height:20px}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#185e46!important}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background{background-color:#185e46}::ng-deep .mat-checkbox.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#185e46!important}::ng-deep .rounded{pointer-events:none}::ng-deep .rounded .mat-checkbox-background,::ng-deep .rounded .mat-checkbox-frame{border-radius:50%!important}::ng-deep .mat-divider{display:block;margin:0;border-top-width:2px;border-top-style:solid}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+DeviceMoveUserWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceMoveUserWizardComponent, selector: "app-device-move-user-wizard", inputs: { device: "device" }, ngImport: i0, template: "<form>\r\n  <div class=\"device-item-panel-container\">\r\n    <div class=\"device-left\">\r\n      <div\r\n        class=\"device-migration-status\"\r\n        [ngClass]=\"{'--checked':  device.toMigrate}\"\r\n      >\r\n        <mat-checkbox\r\n          class=\"rounded\"\r\n          [checked]=\"device.toMigrate\"\r\n        ></mat-checkbox>\r\n      </div>\r\n    </div>\r\n    <div class=\"device-right\">\r\n      <div class=\"device-header\">\r\n        <div class=\"device-name\">{{ device.name }}</div>\r\n        <div class=\"device-migrate\" *ngIf=\"device.isEligible\">\r\n          <mat-checkbox name=\"toMigrate\"\r\n            [(ngModel)]=\"device.toMigrate\"\r\n          >Migrate this device</mat-checkbox>\r\n        </div>\r\n      </div>\r\n      <mat-divider></mat-divider>\r\n      <div class=\"device-info\">\r\n        <div *ngIf=\"device.product\" class=\"device-info__item\">\r\n          <div class=\"key\">Device type</div>\r\n          <div class=\"value\">{{ device.product }}</div>\r\n        </div>\r\n        <div *ngIf=\"device.mac\" class=\"device-info__item\">\r\n          <div class=\"key\">MAC address</div>\r\n          <div class=\"value\">{{ device.mac }}</div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n", styles: [".device-item-panel-container{display:flex;border:1px solid gray;border-radius:.5rem;margin-bottom:1.5rem;overflow:hidden}.device-migration-status{height:100%;padding:1rem;box-sizing:border-box;background-color:#ffebc2}.device-right{width:100%;display:flex;flex-direction:column;justify-content:space-between;padding:1rem 2rem}.device-header{display:flex;justify-content:space-between;align-items:center;padding:0 0 7px;gap:1rem}.device-header .device-name{font-size:18px;font-weight:700}.device-header .device-migrate{font-weight:700}.device-header .device-migrate .mat-checkbox ::ng-deep .mat-checkbox-label{margin-left:.4rem}.device-header .device-migrate ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#05f!important}.device-header .device-migrate ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.device-header .device-migrate ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background{background-color:#05f!important}.device-header .device-migrate ::ng-deep .mat-checkbox.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#05f!important}.device-info{display:grid;grid-template-columns:auto auto;gap:2.5rem}.device-info__item{font-size:16px;font-weight:700}.device-info__item .key{margin:10px 0 0}.device-info__item .value{color:#a0a0a0}.--checked{background-color:#cef5eb}.mat-checkbox ::ng-deep .mat-checkbox-inner-container{width:20px;height:20px}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#185e46!important}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background{background-color:#185e46}::ng-deep .mat-checkbox.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#185e46!important}::ng-deep .rounded{pointer-events:none}::ng-deep .rounded .mat-checkbox-background,::ng-deep .rounded .mat-checkbox-frame{border-radius:50%!important}::ng-deep .mat-divider{display:block;margin:0;border-top-width:2px;border-top-style:solid}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceMoveUserWizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-device-move-user-wizard', template: "<form>\r\n  <div class=\"device-item-panel-container\">\r\n    <div class=\"device-left\">\r\n      <div\r\n        class=\"device-migration-status\"\r\n        [ngClass]=\"{'--checked':  device.toMigrate}\"\r\n      >\r\n        <mat-checkbox\r\n          class=\"rounded\"\r\n          [checked]=\"device.toMigrate\"\r\n        ></mat-checkbox>\r\n      </div>\r\n    </div>\r\n    <div class=\"device-right\">\r\n      <div class=\"device-header\">\r\n        <div class=\"device-name\">{{ device.name }}</div>\r\n        <div class=\"device-migrate\" *ngIf=\"device.isEligible\">\r\n          <mat-checkbox name=\"toMigrate\"\r\n            [(ngModel)]=\"device.toMigrate\"\r\n          >Migrate this device</mat-checkbox>\r\n        </div>\r\n      </div>\r\n      <mat-divider></mat-divider>\r\n      <div class=\"device-info\">\r\n        <div *ngIf=\"device.product\" class=\"device-info__item\">\r\n          <div class=\"key\">Device type</div>\r\n          <div class=\"value\">{{ device.product }}</div>\r\n        </div>\r\n        <div *ngIf=\"device.mac\" class=\"device-info__item\">\r\n          <div class=\"key\">MAC address</div>\r\n          <div class=\"value\">{{ device.mac }}</div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n", styles: [".device-item-panel-container{display:flex;border:1px solid gray;border-radius:.5rem;margin-bottom:1.5rem;overflow:hidden}.device-migration-status{height:100%;padding:1rem;box-sizing:border-box;background-color:#ffebc2}.device-right{width:100%;display:flex;flex-direction:column;justify-content:space-between;padding:1rem 2rem}.device-header{display:flex;justify-content:space-between;align-items:center;padding:0 0 7px;gap:1rem}.device-header .device-name{font-size:18px;font-weight:700}.device-header .device-migrate{font-weight:700}.device-header .device-migrate .mat-checkbox ::ng-deep .mat-checkbox-label{margin-left:.4rem}.device-header .device-migrate ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#05f!important}.device-header .device-migrate ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.device-header .device-migrate ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background{background-color:#05f!important}.device-header .device-migrate ::ng-deep .mat-checkbox.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#05f!important}.device-info{display:grid;grid-template-columns:auto auto;gap:2.5rem}.device-info__item{font-size:16px;font-weight:700}.device-info__item .key{margin:10px 0 0}.device-info__item .value{color:#a0a0a0}.--checked{background-color:#cef5eb}.mat-checkbox ::ng-deep .mat-checkbox-inner-container{width:20px;height:20px}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#185e46!important}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background{background-color:#185e46}::ng-deep .mat-checkbox.mat-accent .mat-checkbox-ripple .mat-ripple-element{background-color:#185e46!important}::ng-deep .rounded{pointer-events:none}::ng-deep .rounded .mat-checkbox-background,::ng-deep .rounded .mat-checkbox-frame{border-radius:50%!important}::ng-deep .mat-divider{display:block;margin:0;border-top-width:2px;border-top-style:solid}\n"] }]
@@ -1519,10 +1510,10 @@ class MoveUserStepperComponent {
     }
 }
 MoveUserStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MoveUserStepperComponent, deps: [{ token: DnsService }, { token: UserService }, { token: SiteSettingsService }, { token: NotificationService }, { token: MoveUserService }], target: i0.ɵɵFactoryTarget.Component });
-MoveUserStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MoveUserStepperComponent, selector: "app-move-user-stepper", inputs: { user: "user", customerId: "customerId", host: "host" }, outputs: { done: "done", runMoveUser: "runMoveUser", cancel: "cancel" }, viewQueries: [{ propertyName: "nextAfterMoveBtn", first: true, predicate: ["nextAfterMoveBtn"], descendants: true }, { propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<app-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\"></app-loader>\r\n<div id=\"move-user-stepper\">\r\n  <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 1: Select location</div>\r\n      <!--      <form>-->\r\n      <ng-template matStepLabel>Select location</ng-template>\r\n      <form>\r\n        <div class=\"move-user-tab-content-box\">\r\n          <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n          <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n            <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n                   (input)=\"onLocationAutocomplete($event)\"/>\r\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n                              (optionSelected)=\"onLocationChange($event)\">\r\n              <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n                {{ location.name }}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <div *ngIf=\"!dataPending && !locations?.length\" class=\"mat-error\">\r\n            Locations are not available\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n            <mat-label class=\"mat-label\">Phone number</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n                             (change)=\"selectPhoneNumberMigrationType($event)\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current number\r\n                {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\"\r\n                [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n                Select a new number\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n                <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n                                      [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n                <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n                  <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n                         [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n                         (input)=\"onNumberAutocomplete()\"/>\r\n                  <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n                    <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n                      {{ number }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                </mat-form-field>\r\n                <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n                  Phone numbers are not available for this location\r\n                </div>\r\n              </div>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removeExtension\">\r\n                Remove number\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n\r\n            <mat-label class=\"mat-label\">Extension</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n                             (change)=\"selectExtensionMigrationType($event)\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\">\r\n                Select a new extension\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    name=\"newExtension\"\r\n                    (change)=\"onExtensionChange($event)\"\r\n                    [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n                    [placeholder]=\"'Enter extension'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n          </ng-container>\r\n        </div>\r\n      </form>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n                [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n      <ng-template matStepLabel>Device eligibility check</ng-template>\r\n      <div class=\"move-user-tab-content-box\">\r\n        <app-devices-move-user-tab></app-devices-move-user-tab>\r\n      </div>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 3: Validation</div>\r\n      <ng-template matStepLabel>Validation</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Validation</mat-label>\r\n        <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n              (click)=\"goNextStep(stepper)\"></button>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\"\r\n                [disabled]=\"prepareMigrationData && prepareMigrationData.errors && prepareMigrationData.errors.length > 0 || !prepareMigrationData.isConfirm\"\r\n                (click)=\"startMigration()\">\r\n          Upgrade\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 4: Result</div>\r\n      <ng-template matStepLabel>Result</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n        <p class=\"validation-text\">\r\n          The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n          <br/>\r\n          For the progress of move, please visit the\r\n          <a class=\"form-link\" [href]=\"userDetailsUrl\" target=\"_blank\" rel=\"noopener noreferrer\">user details</a>.\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n          Done\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n  </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n  <p class=\"validation-text\">\r\n    Validation has completed successfully. The user can be moved to the\r\n    new location. Please be aware of the potential impact of the changes\r\n    below.\r\n  </p>\r\n  <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n  <ul>\r\n    <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n    <li>\r\n      The user will be removed from the Call Pickup Group:\r\n      1675090334-Paris_pickup\r\n    </li>\r\n    <li>\r\n      If Webex App is currently in use, the user will to sign in again to\r\n      update the service.\r\n    </li>\r\n  </ul>\r\n  <form>\r\n    <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n                  color=\"primary\">\r\n      I confirm that I understand these conditions. I acknowledge the\r\n      changes.\r\n    </mat-checkbox>\r\n  </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n  <p class=\"validation-text\">\r\n    Validation is failed. User migration is not available\r\n  </p>\r\n  <ul>\r\n    <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::ng-deep .mat-form-field-infix{padding:0!important;width:100%}::ng-deep .mat-form-field-appearance-outline .mat-input-element{height:35px;width:100%;line-height:35px;margin:5px 0 0}::ng-deep .mat-form-field{width:350px}::ng-deep .mat-step-header[aria-labelledby=disabled_af]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-icon,::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-label{cursor:not-allowed;opacity:.6}.mat-mdc-form-field{margin-top:16px}.mat-label{font-size:16px;font-weight:600;margin:1rem 0}.step-title{font-size:28px;font-weight:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.5rem}.step-actions{display:flex;flex-flow:row-reverse;margin-top:2rem;gap:1rem}.webex-btn{border:1px solid black;border-radius:1rem;cursor:pointer;gap:1rem}.btn-next{background-color:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i12.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i12.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i14.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i14.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i14.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "directive", type: i14.MatStepperPrevious, selector: "button[matStepperPrevious]", inputs: ["type"] }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i16.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: DevicesMoveUserWizardTabComponent, selector: "app-devices-move-user-tab" }], encapsulation: i0.ViewEncapsulation.None });
+MoveUserStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MoveUserStepperComponent, selector: "app-move-user-stepper", inputs: { user: "user", customerId: "customerId", host: "host" }, outputs: { done: "done", runMoveUser: "runMoveUser", cancel: "cancel" }, viewQueries: [{ propertyName: "nextAfterMoveBtn", first: true, predicate: ["nextAfterMoveBtn"], descendants: true }, { propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<tk-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\" color=\"#000000\"></tk-loader>\r\n<div id=\"move-user-stepper\">\r\n  <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 1: Select location</div>\r\n      <!--      <form>-->\r\n      <ng-template matStepLabel>Select location</ng-template>\r\n      <form>\r\n        <div class=\"move-user-tab-content-box\">\r\n          <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n          <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n            <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n                   (input)=\"onLocationAutocomplete($event)\"/>\r\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n                              (optionSelected)=\"onLocationChange($event)\">\r\n              <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n                {{ location.name }}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <div *ngIf=\"!dataPending && !locations?.length\" class=\"mat-error\">\r\n            Locations are not available\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n            <mat-label class=\"mat-label\">Phone number</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n                             (change)=\"selectPhoneNumberMigrationType($event)\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current number\r\n                {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\"\r\n                [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n                Select a new number\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n                <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n                                      [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n                <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n                  <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n                         [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n                         (input)=\"onNumberAutocomplete()\"/>\r\n                  <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n                    <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n                      {{ number }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                </mat-form-field>\r\n                <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n                  Phone numbers are not available for this location\r\n                </div>\r\n              </div>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removeExtension\">\r\n                Remove number\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n\r\n            <mat-label class=\"mat-label\">Extension</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n                             (change)=\"selectExtensionMigrationType($event)\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\">\r\n                Select a new extension\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    name=\"newExtension\"\r\n                    (change)=\"onExtensionChange($event)\"\r\n                    [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n                    [placeholder]=\"'Enter extension'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n          </ng-container>\r\n        </div>\r\n      </form>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n                [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n      <ng-template matStepLabel>Device eligibility check</ng-template>\r\n      <div class=\"move-user-tab-content-box\">\r\n        <app-devices-move-user-tab></app-devices-move-user-tab>\r\n      </div>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 3: Validation</div>\r\n      <ng-template matStepLabel>Validation</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Validation</mat-label>\r\n        <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n              (click)=\"goNextStep(stepper)\"></button>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\"\r\n                [disabled]=\"prepareMigrationData && prepareMigrationData.errors && prepareMigrationData.errors.length > 0 || !prepareMigrationData.isConfirm\"\r\n                (click)=\"startMigration()\">\r\n          Upgrade\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 4: Result</div>\r\n      <ng-template matStepLabel>Result</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n        <p class=\"validation-text\">\r\n          The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n          <br/>\r\n          For the progress of move, please visit the\r\n          <a class=\"form-link\" [href]=\"userDetailsUrl\" target=\"_blank\" rel=\"noopener noreferrer\">user details</a>.\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n          Done\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n  </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n  <p class=\"validation-text\">\r\n    Validation has completed successfully. The user can be moved to the\r\n    new location. Please be aware of the potential impact of the changes\r\n    below.\r\n  </p>\r\n  <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n  <ul>\r\n    <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n    <li>\r\n      The user will be removed from the Call Pickup Group:\r\n      1675090334-Paris_pickup\r\n    </li>\r\n    <li>\r\n      If Webex App is currently in use, the user will to sign in again to\r\n      update the service.\r\n    </li>\r\n  </ul>\r\n  <form>\r\n    <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n                  color=\"primary\">\r\n      I confirm that I understand these conditions. I acknowledge the\r\n      changes.\r\n    </mat-checkbox>\r\n  </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n  <p class=\"validation-text\">\r\n    Validation is failed. User migration is not available\r\n  </p>\r\n  <ul>\r\n    <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::ng-deep .mat-form-field-infix{padding:0!important;width:100%}::ng-deep .mat-form-field-appearance-outline .mat-input-element{height:35px;width:100%;line-height:35px;margin:5px 0 0}::ng-deep .mat-form-field{width:350px}::ng-deep .mat-step-header[aria-labelledby=disabled_af]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-icon,::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-label{cursor:not-allowed;opacity:.6}.mat-mdc-form-field{margin-top:16px}.mat-label{font-size:16px;font-weight:600;margin:1rem 0}.step-title{font-size:28px;font-weight:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.5rem}.step-actions{display:flex;flex-flow:row-reverse;margin-top:2rem;gap:1rem}.webex-btn{border:1px solid black;border-radius:1rem;cursor:pointer;gap:1rem}.btn-next{background-color:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"], dependencies: [{ kind: "component", type: i6$2.TkLoaderComponent, selector: "tk-loader", inputs: ["diameter", "strokeWidth", "backdrop", "color"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i13.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i15.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i15.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i15.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i15.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "directive", type: i15.MatStepperPrevious, selector: "button[matStepperPrevious]", inputs: ["type"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i17.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: DevicesMoveUserWizardTabComponent, selector: "app-devices-move-user-tab" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MoveUserStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-move-user-stepper', encapsulation: ViewEncapsulation.None, template: "<app-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\"></app-loader>\r\n<div id=\"move-user-stepper\">\r\n  <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 1: Select location</div>\r\n      <!--      <form>-->\r\n      <ng-template matStepLabel>Select location</ng-template>\r\n      <form>\r\n        <div class=\"move-user-tab-content-box\">\r\n          <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n          <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n            <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n                   (input)=\"onLocationAutocomplete($event)\"/>\r\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n                              (optionSelected)=\"onLocationChange($event)\">\r\n              <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n                {{ location.name }}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <div *ngIf=\"!dataPending && !locations?.length\" class=\"mat-error\">\r\n            Locations are not available\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n            <mat-label class=\"mat-label\">Phone number</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n                             (change)=\"selectPhoneNumberMigrationType($event)\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current number\r\n                {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\"\r\n                [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n                Select a new number\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n                <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n                                      [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n                <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n                  <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n                         [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n                         (input)=\"onNumberAutocomplete()\"/>\r\n                  <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n                    <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n                      {{ number }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                </mat-form-field>\r\n                <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n                  Phone numbers are not available for this location\r\n                </div>\r\n              </div>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removeExtension\">\r\n                Remove number\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n\r\n            <mat-label class=\"mat-label\">Extension</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n                             (change)=\"selectExtensionMigrationType($event)\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\">\r\n                Select a new extension\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    name=\"newExtension\"\r\n                    (change)=\"onExtensionChange($event)\"\r\n                    [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n                    [placeholder]=\"'Enter extension'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n          </ng-container>\r\n        </div>\r\n      </form>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n                [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n      <ng-template matStepLabel>Device eligibility check</ng-template>\r\n      <div class=\"move-user-tab-content-box\">\r\n        <app-devices-move-user-tab></app-devices-move-user-tab>\r\n      </div>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 3: Validation</div>\r\n      <ng-template matStepLabel>Validation</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Validation</mat-label>\r\n        <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n              (click)=\"goNextStep(stepper)\"></button>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\"\r\n                [disabled]=\"prepareMigrationData && prepareMigrationData.errors && prepareMigrationData.errors.length > 0 || !prepareMigrationData.isConfirm\"\r\n                (click)=\"startMigration()\">\r\n          Upgrade\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 4: Result</div>\r\n      <ng-template matStepLabel>Result</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n        <p class=\"validation-text\">\r\n          The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n          <br/>\r\n          For the progress of move, please visit the\r\n          <a class=\"form-link\" [href]=\"userDetailsUrl\" target=\"_blank\" rel=\"noopener noreferrer\">user details</a>.\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n          Done\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n  </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n  <p class=\"validation-text\">\r\n    Validation has completed successfully. The user can be moved to the\r\n    new location. Please be aware of the potential impact of the changes\r\n    below.\r\n  </p>\r\n  <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n  <ul>\r\n    <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n    <li>\r\n      The user will be removed from the Call Pickup Group:\r\n      1675090334-Paris_pickup\r\n    </li>\r\n    <li>\r\n      If Webex App is currently in use, the user will to sign in again to\r\n      update the service.\r\n    </li>\r\n  </ul>\r\n  <form>\r\n    <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n                  color=\"primary\">\r\n      I confirm that I understand these conditions. I acknowledge the\r\n      changes.\r\n    </mat-checkbox>\r\n  </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n  <p class=\"validation-text\">\r\n    Validation is failed. User migration is not available\r\n  </p>\r\n  <ul>\r\n    <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::ng-deep .mat-form-field-infix{padding:0!important;width:100%}::ng-deep .mat-form-field-appearance-outline .mat-input-element{height:35px;width:100%;line-height:35px;margin:5px 0 0}::ng-deep .mat-form-field{width:350px}::ng-deep .mat-step-header[aria-labelledby=disabled_af]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-icon,::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-label{cursor:not-allowed;opacity:.6}.mat-mdc-form-field{margin-top:16px}.mat-label{font-size:16px;font-weight:600;margin:1rem 0}.step-title{font-size:28px;font-weight:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.5rem}.step-actions{display:flex;flex-flow:row-reverse;margin-top:2rem;gap:1rem}.webex-btn{border:1px solid black;border-radius:1rem;cursor:pointer;gap:1rem}.btn-next{background-color:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"] }]
+            args: [{ selector: 'app-move-user-stepper', encapsulation: ViewEncapsulation.None, template: "<tk-loader *ngIf=\"prepareMigrationData.pending || moveUserPending || dataPending\" color=\"#000000\"></tk-loader>\r\n<div id=\"move-user-stepper\">\r\n  <mat-stepper *ngIf=\"prepareMigrationData?.moveType\" [linear]=\"isLinear\" labelPosition=\"bottom\" #stepper>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 1: Select location</div>\r\n      <!--      <form>-->\r\n      <ng-template matStepLabel>Select location</ng-template>\r\n      <form>\r\n        <div class=\"move-user-tab-content-box\">\r\n          <mat-label class=\"mat-label\">Select a new location</mat-label>\r\n          <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n            <input placeholder=\"Select location\" [matAutocomplete]=\"auto\" matInput\r\n                   (input)=\"onLocationAutocomplete($event)\"/>\r\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayLocation\"\r\n                              (optionSelected)=\"onLocationChange($event)\">\r\n              <mat-option *ngFor=\"let location of filteredLocations\" [value]=\"location\">\r\n                {{ location.name }}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n          <div *ngIf=\"!dataPending && !locations?.length\" class=\"mat-error\">\r\n            Locations are not available\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"prepareMigrationData?.newLocation?.id\">\r\n            <mat-label class=\"mat-label\">Phone number</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypePhoneNumber\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.phoneNumber\" name=\"phoneNumber\"\r\n                             (change)=\"selectPhoneNumberMigrationType($event)\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current number\r\n                {{ prepareMigrationData.primaryPhoneNumber || currentNumber }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\"\r\n                [disabled]=\"!prepareMigrationData.newLocation?.id\">\r\n                Select a new number\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n                <mat-progress-spinner *ngIf=\"phoneNumberPending\" class=\"field-spinner\" mode=\"indeterminate\"\r\n                                      [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>\r\n\r\n                <mat-form-field class=\"app-autocomplete-input\" appearance=\"outline\">\r\n                  <input placeholder=\"Select number\" [(ngModel)]=\"prepareMigrationData.newPhoneNumber\"\r\n                         [matAutocomplete]=\"autoPh\" matInput name=\"newPhoneNumber\"\r\n                         (input)=\"onNumberAutocomplete()\"/>\r\n                  <mat-autocomplete #autoPh=\"matAutocomplete\" (optionSelected)=\"onPhoneNumberChange($event)\">\r\n                    <mat-option *ngFor=\"let number of filteredPhoneNumbers\" [value]=\"number\">\r\n                      {{ number }}\r\n                    </mat-option>\r\n                  </mat-autocomplete>\r\n                </mat-form-field>\r\n                <div *ngIf=\"!phoneNumberPending && !dnsService.phoneNumbers?.length\" class=\"mat-error\">\r\n                  Phone numbers are not available for this location\r\n                </div>\r\n              </div>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removeExtension\">\r\n                Remove number\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n\r\n            <mat-label class=\"mat-label\">Extension</mat-label>\r\n            <mat-radio-group class=\"radio-group\" name=\"moveTypeExtension\"\r\n                             (change)=\"selectExtensionMigrationType($event)\"\r\n                             [(ngModel)]=\"prepareMigrationData.moveType.extension\">\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"1\"\r\n                color=\"primary\">\r\n                Keep current extension {{ prepareMigrationData.primaryExtension }}\r\n              </mat-radio-button>\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"2\"\r\n                color=\"primary\">\r\n                Select a new extension\r\n              </mat-radio-button>\r\n\r\n              <div *ngIf=\"prepareMigrationData.moveType.extension === '2'\" class=\"input-container\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    name=\"newExtension\"\r\n                    (change)=\"onExtensionChange($event)\"\r\n                    [(ngModel)]=\"prepareMigrationData.newExtension\"\r\n                    [placeholder]=\"'Enter extension'\"\r\n                  />\r\n                </mat-form-field>\r\n              </div>\r\n\r\n              <mat-radio-button\r\n                class=\"radio-button\"\r\n                value=\"3\"\r\n                color=\"primary\"\r\n                [disabled]=\"prepareMigrationData.removePhoneNumber\">Remove extension\r\n              </mat-radio-button>\r\n            </mat-radio-group>\r\n          </ng-container>\r\n        </div>\r\n      </form>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext\r\n                [disabled]=\"isNextFromSelectLocationDisabled()\" (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" (click)=\"cancel.emit()\">Cancel</button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n      <ng-template matStepLabel>Device eligibility check</ng-template>\r\n      <div class=\"move-user-tab-content-box\">\r\n        <app-devices-move-user-tab></app-devices-move-user-tab>\r\n      </div>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">\r\n          Next\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step [aria-labelledby]=\"'disabled_af'\">\r\n      <div class=\"step-title\">Step 3: Validation</div>\r\n      <ng-template matStepLabel>Validation</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Validation</mat-label>\r\n        <div *ngIf=\"!prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationSuccess\">\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"prepareMigrationData.errors?.length\">\r\n          <ng-container *ngTemplateOutlet=\"validationFailed\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <button #nextAfterMoveBtn mat-button class=\"invisible-next-btn\" matStepperNext\r\n              (click)=\"goNextStep(stepper)\"></button>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\"\r\n                [disabled]=\"prepareMigrationData && prepareMigrationData.errors && prepareMigrationData.errors.length > 0 || !prepareMigrationData.isConfirm\"\r\n                (click)=\"startMigration()\">\r\n          Upgrade\r\n        </button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>\r\n          Previous\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 4: Result</div>\r\n      <ng-template matStepLabel>Result</ng-template>\r\n\r\n      <div class=\"devices-move-user-box\">\r\n        <mat-label class=\"mat-label\">Moving user has been successfully initiated!</mat-label>\r\n        <p class=\"validation-text\">\r\n          The user will be moved to the new location {{prepareMigrationData.newLocation?.name}}\r\n          <br/>\r\n          For the progress of move, please visit the\r\n          <a class=\"form-link\" [href]=\"userDetailsUrl\" target=\"_blank\" rel=\"noopener noreferrer\">user details</a>.\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-done\" (click)=\"done.emit(true)\">\r\n          Done\r\n        </button>\r\n      </div>\r\n    </mat-step>\r\n  </mat-stepper>\r\n</div>\r\n\r\n<ng-template #validationSuccess>\r\n  <p class=\"validation-text\">\r\n    Validation has completed successfully. The user can be moved to the\r\n    new location. Please be aware of the potential impact of the changes\r\n    below.\r\n  </p>\r\n  <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n  <ul>\r\n    <li>Cisco 6941 device (SEP987987987987) will not be migrated</li>\r\n    <li>\r\n      The user will be removed from the Call Pickup Group:\r\n      1675090334-Paris_pickup\r\n    </li>\r\n    <li>\r\n      If Webex App is currently in use, the user will to sign in again to\r\n      update the service.\r\n    </li>\r\n  </ul>\r\n  <form>\r\n    <mat-checkbox class=\"checkbox\" name=\"isConfirm\" [(ngModel)]=\"prepareMigrationData.isConfirm\"\r\n                  color=\"primary\">\r\n      I confirm that I understand these conditions. I acknowledge the\r\n      changes.\r\n    </mat-checkbox>\r\n  </form>\r\n\r\n</ng-template>\r\n\r\n<ng-template #validationFailed>\r\n  <p class=\"validation-text\">\r\n    Validation is failed. User migration is not available\r\n  </p>\r\n  <ul>\r\n    <li *ngFor=\"let error of prepareMigrationData.errors\">{{ error }}</li>\r\n  </ul>\r\n</ng-template>\r\n", styles: [".mat-stepper-horizontal{height:-moz-fit-content;height:fit-content;max-height:750px;margin:0 auto;width:70%;background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}.mat-stepper-horizontal .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}.mat-stepper-horizontal .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}.mat-stepper-horizontal .mat-step-icon-state-number{background-color:#fff}.mat-stepper-horizontal .mat-step-icon-state-edit,.mat-stepper-horizontal .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}.mat-stepper-horizontal .mat-step-icon-content{display:none}.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,.mat-stepper-horizontal .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,.mat-stepper-horizontal [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}.mat-stepper-horizontal .mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header:after,.mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,.mat-stepper-horizontal .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}::ng-deep .mat-form-field-infix{padding:0!important;width:100%}::ng-deep .mat-form-field-appearance-outline .mat-input-element{height:35px;width:100%;line-height:35px;margin:5px 0 0}::ng-deep .mat-form-field{width:350px}::ng-deep .mat-step-header[aria-labelledby=disabled_af]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-icon,::ng-deep .mat-step-header[aria-labelledby=disabled_af] .mat-step-label{cursor:not-allowed;opacity:.6}.mat-mdc-form-field{margin-top:16px}.mat-label{font-size:16px;font-weight:600;margin:1rem 0}.step-title{font-size:28px;font-weight:700;margin:.5rem 0 1.5rem 2rem}.validation-text{margin-top:.5rem;margin-bottom:2rem}ul{padding:.5rem 2rem;margin-top:.5rem;margin-bottom:2rem}.devices-move-user-box{background-color:#fff;padding:2.5rem;padding:1rem 2.5rem;min-height:350px;border-radius:.5rem}.user-select-location-box{background-color:#fff;padding:2.5rem;height:350px;border-radius:.5rem}.form-link{text-decoration:none;color:#007bff}.radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.radio-button{margin:.5rem 0}.select{width:350px;padding:.5rem;margin:.5rem 0;border:1px solid #a0a0a0;border-radius:.5rem}.step-actions{display:flex;flex-flow:row-reverse;margin-top:2rem;gap:1rem}.webex-btn{border:1px solid black;border-radius:1rem;cursor:pointer;gap:1rem}.btn-next{background-color:#000;color:#fff}.btn-cancel,.btn-done{background-color:#fff;color:#000}.select-container{position:relative;width:100%;max-width:300px}.select-container .mat-progress-spinner{position:absolute;left:45%;top:35px}.invisible-next-btn{height:1px;width:1px}.mat-error{margin:0 0 15px}mat-label{display:block}.btn-next{min-width:80px}.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important}.move-user-tab-content-box{background-color:#fff;min-height:350px;border-radius:.5rem;box-sizing:border-box;padding:25px}.input-container{display:flex;flex-direction:column;gap:1rem}.input-container input{height:-moz-fit-content!important;height:fit-content!important}\n"] }]
         }], ctorParameters: function () { return [{ type: DnsService }, { type: UserService }, { type: SiteSettingsService }, { type: NotificationService }, { type: MoveUserService }]; }, propDecorators: { nextAfterMoveBtn: [{
                 type: ViewChild,
                 args: ['nextAfterMoveBtn']
@@ -1559,10 +1550,10 @@ class MoveUserWizardComponent {
     }
 }
 MoveUserWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MoveUserWizardComponent, deps: [{ token: DnsService }], target: i0.ɵɵFactoryTarget.Component });
-MoveUserWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MoveUserWizardComponent, selector: "app-move-user-wizard", inputs: { user: "user", customerId: "customerId", host: "host" }, outputs: { closeMoveUserWizard: "closeMoveUserWizard", done: "done", runMoveUser: "runMoveUser" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div class=\"move-user-stepper-container\">\r\n    <header class=\"move-user-header\">\r\n        <div class=\"move-user-header__title\">Upgrade User {{user.userid}}</div>\r\n        <div class=\"move-user-header__close\">\r\n          <span class=\"app-icon icon-white-close\" (click)=\"onClose()\"></span>\r\n        </div>\r\n    </header>\r\n    <app-move-user-stepper *ngIf=\"user\" [customerId]=\"customerId\" [host]=\"host\"\r\n                           [user]=\"user\" (cancel)=\"onClose()\" (done)=\"done.emit()\"\r\n                           (runMoveUser)=\"onRunMoveUser()\"></app-move-user-stepper>\r\n</div>\r\n", styles: [".move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.icon-close{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12.0005 13.0538L6.92737 18.1269C6.78892 18.2654 6.61489 18.3362 6.40527 18.3394C6.19567 18.3426 6.01844 18.2718 5.87357 18.1269C5.72869 17.982 5.65625 17.8064 5.65625 17.6C5.65625 17.3936 5.72869 17.218 5.87357 17.0731L10.9466 12L5.87357 6.92689C5.73511 6.78844 5.66427 6.6144 5.66107 6.40479C5.65786 6.19519 5.72869 6.01795 5.87357 5.87309C6.01844 5.7282 6.19407 5.65576 6.40047 5.65576C6.60687 5.65576 6.78251 5.7282 6.92737 5.87309L12.0005 10.9462L17.0736 5.87309C17.212 5.73462 17.3861 5.66379 17.5957 5.66059C17.8053 5.65737 17.9825 5.7282 18.1274 5.87309C18.2723 6.01795 18.3447 6.19359 18.3447 6.39999C18.3447 6.60639 18.2723 6.78202 18.1274 6.92689L13.0543 12L18.1274 17.0731C18.2658 17.2115 18.3367 17.3856 18.3399 17.5952C18.3431 17.8048 18.2723 17.982 18.1274 18.1269C17.9825 18.2718 17.8069 18.3442 17.6005 18.3442C17.3941 18.3442 17.2184 18.2718 17.0736 18.1269L12.0005 13.0538Z%22 fill%3D%22%23333333%22%2F%3E%0D%3C%2Fsvg%3E%0D\")}.icon-white-close{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fsvg%3E%0D\")}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: MoveUserStepperComponent, selector: "app-move-user-stepper", inputs: ["user", "customerId", "host"], outputs: ["done", "runMoveUser", "cancel"] }] });
+MoveUserWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MoveUserWizardComponent, selector: "app-move-user-wizard", inputs: { user: "user", customerId: "customerId", host: "host" }, outputs: { closeMoveUserWizard: "closeMoveUserWizard", done: "done", runMoveUser: "runMoveUser" }, ngImport: i0, template: "<tk-loader *ngIf=\"dataPending\" color=\"#000000\"></tk-loader>\r\n<div class=\"move-user-stepper-container\">\r\n    <header class=\"move-user-header\">\r\n        <div class=\"move-user-header__title\">Upgrade User {{user.userid}}</div>\r\n        <div class=\"move-user-header__close\">\r\n          <span class=\"app-icon icon-white-close\" (click)=\"onClose()\"></span>\r\n        </div>\r\n    </header>\r\n    <app-move-user-stepper *ngIf=\"user\" [customerId]=\"customerId\" [host]=\"host\"\r\n                           [user]=\"user\" (cancel)=\"onClose()\" (done)=\"done.emit()\"\r\n                           (runMoveUser)=\"onRunMoveUser()\"></app-move-user-stepper>\r\n</div>\r\n", styles: [".move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.icon-close{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12.0005 13.0538L6.92737 18.1269C6.78892 18.2654 6.61489 18.3362 6.40527 18.3394C6.19567 18.3426 6.01844 18.2718 5.87357 18.1269C5.72869 17.982 5.65625 17.8064 5.65625 17.6C5.65625 17.3936 5.72869 17.218 5.87357 17.0731L10.9466 12L5.87357 6.92689C5.73511 6.78844 5.66427 6.6144 5.66107 6.40479C5.65786 6.19519 5.72869 6.01795 5.87357 5.87309C6.01844 5.7282 6.19407 5.65576 6.40047 5.65576C6.60687 5.65576 6.78251 5.7282 6.92737 5.87309L12.0005 10.9462L17.0736 5.87309C17.212 5.73462 17.3861 5.66379 17.5957 5.66059C17.8053 5.65737 17.9825 5.7282 18.1274 5.87309C18.2723 6.01795 18.3447 6.19359 18.3447 6.39999C18.3447 6.60639 18.2723 6.78202 18.1274 6.92689L13.0543 12L18.1274 17.0731C18.2658 17.2115 18.3367 17.3856 18.3399 17.5952C18.3431 17.8048 18.2723 17.982 18.1274 18.1269C17.9825 18.2718 17.8069 18.3442 17.6005 18.3442C17.3941 18.3442 17.2184 18.2718 17.0736 18.1269L12.0005 13.0538Z%22 fill%3D%22%23333333%22%2F%3E%0D%3C%2Fsvg%3E%0D\")}.icon-white-close{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fsvg%3E%0D\")}\n"], dependencies: [{ kind: "component", type: i6$2.TkLoaderComponent, selector: "tk-loader", inputs: ["diameter", "strokeWidth", "backdrop", "color"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MoveUserStepperComponent, selector: "app-move-user-stepper", inputs: ["user", "customerId", "host"], outputs: ["done", "runMoveUser", "cancel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MoveUserWizardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-move-user-wizard', template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div class=\"move-user-stepper-container\">\r\n    <header class=\"move-user-header\">\r\n        <div class=\"move-user-header__title\">Upgrade User {{user.userid}}</div>\r\n        <div class=\"move-user-header__close\">\r\n          <span class=\"app-icon icon-white-close\" (click)=\"onClose()\"></span>\r\n        </div>\r\n    </header>\r\n    <app-move-user-stepper *ngIf=\"user\" [customerId]=\"customerId\" [host]=\"host\"\r\n                           [user]=\"user\" (cancel)=\"onClose()\" (done)=\"done.emit()\"\r\n                           (runMoveUser)=\"onRunMoveUser()\"></app-move-user-stepper>\r\n</div>\r\n", styles: [".move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.icon-close{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12.0005 13.0538L6.92737 18.1269C6.78892 18.2654 6.61489 18.3362 6.40527 18.3394C6.19567 18.3426 6.01844 18.2718 5.87357 18.1269C5.72869 17.982 5.65625 17.8064 5.65625 17.6C5.65625 17.3936 5.72869 17.218 5.87357 17.0731L10.9466 12L5.87357 6.92689C5.73511 6.78844 5.66427 6.6144 5.66107 6.40479C5.65786 6.19519 5.72869 6.01795 5.87357 5.87309C6.01844 5.7282 6.19407 5.65576 6.40047 5.65576C6.60687 5.65576 6.78251 5.7282 6.92737 5.87309L12.0005 10.9462L17.0736 5.87309C17.212 5.73462 17.3861 5.66379 17.5957 5.66059C17.8053 5.65737 17.9825 5.7282 18.1274 5.87309C18.2723 6.01795 18.3447 6.19359 18.3447 6.39999C18.3447 6.60639 18.2723 6.78202 18.1274 6.92689L13.0543 12L18.1274 17.0731C18.2658 17.2115 18.3367 17.3856 18.3399 17.5952C18.3431 17.8048 18.2723 17.982 18.1274 18.1269C17.9825 18.2718 17.8069 18.3442 17.6005 18.3442C17.3941 18.3442 17.2184 18.2718 17.0736 18.1269L12.0005 13.0538Z%22 fill%3D%22%23333333%22%2F%3E%0D%3C%2Fsvg%3E%0D\")}.icon-white-close{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fsvg%3E%0D\")}\n"] }]
+            args: [{ selector: 'app-move-user-wizard', template: "<tk-loader *ngIf=\"dataPending\" color=\"#000000\"></tk-loader>\r\n<div class=\"move-user-stepper-container\">\r\n    <header class=\"move-user-header\">\r\n        <div class=\"move-user-header__title\">Upgrade User {{user.userid}}</div>\r\n        <div class=\"move-user-header__close\">\r\n          <span class=\"app-icon icon-white-close\" (click)=\"onClose()\"></span>\r\n        </div>\r\n    </header>\r\n    <app-move-user-stepper *ngIf=\"user\" [customerId]=\"customerId\" [host]=\"host\"\r\n                           [user]=\"user\" (cancel)=\"onClose()\" (done)=\"done.emit()\"\r\n                           (runMoveUser)=\"onRunMoveUser()\"></app-move-user-stepper>\r\n</div>\r\n", styles: [".move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer}.move-user-header__close i{font-size:25px;font-weight:100}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.icon-close{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M12.0005 13.0538L6.92737 18.1269C6.78892 18.2654 6.61489 18.3362 6.40527 18.3394C6.19567 18.3426 6.01844 18.2718 5.87357 18.1269C5.72869 17.982 5.65625 17.8064 5.65625 17.6C5.65625 17.3936 5.72869 17.218 5.87357 17.0731L10.9466 12L5.87357 6.92689C5.73511 6.78844 5.66427 6.6144 5.66107 6.40479C5.65786 6.19519 5.72869 6.01795 5.87357 5.87309C6.01844 5.7282 6.19407 5.65576 6.40047 5.65576C6.60687 5.65576 6.78251 5.7282 6.92737 5.87309L12.0005 10.9462L17.0736 5.87309C17.212 5.73462 17.3861 5.66379 17.5957 5.66059C17.8053 5.65737 17.9825 5.7282 18.1274 5.87309C18.2723 6.01795 18.3447 6.19359 18.3447 6.39999C18.3447 6.60639 18.2723 6.78202 18.1274 6.92689L13.0543 12L18.1274 17.0731C18.2658 17.2115 18.3367 17.3856 18.3399 17.5952C18.3431 17.8048 18.2723 17.982 18.1274 18.1269C17.9825 18.2718 17.8069 18.3442 17.6005 18.3442C17.3941 18.3442 17.2184 18.2718 17.0736 18.1269L12.0005 13.0538Z%22 fill%3D%22%23333333%22%2F%3E%0D%3C%2Fsvg%3E%0D\")}.icon-white-close{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M13.0606 11.9998L19.2803 5.78001C19.35 5.71038 19.4052 5.6277 19.4429 5.53672C19.4806 5.44573 19.5 5.34822 19.5 5.24974C19.5 5.15126 19.4806 5.05374 19.4429 4.96276C19.4052 4.87177 19.3499 4.7891 19.2803 4.71947C19.2107 4.64983 19.128 4.5946 19.037 4.55691C18.946 4.51923 18.8485 4.49983 18.75 4.49983C18.6515 4.49984 18.554 4.51924 18.463 4.55692C18.3721 4.59461 18.2894 4.64985 18.2198 4.71949L12 10.9392L5.78026 4.71949C5.71077 4.64921 5.62807 4.59335 5.53691 4.55514C5.44576 4.51692 5.34795 4.49711 5.24911 4.49683C5.15027 4.49655 5.05235 4.51581 4.96098 4.55351C4.86961 4.59121 4.78659 4.64659 4.7167 4.71648C4.64681 4.78638 4.59143 4.8694 4.55374 4.96077C4.51605 5.05214 4.49679 5.15006 4.49707 5.2489C4.49736 5.34774 4.51718 5.44555 4.5554 5.5367C4.59361 5.62786 4.64947 5.71055 4.71976 5.78004L10.9395 11.9998L4.71976 18.2195C4.65013 18.2892 4.59489 18.3718 4.5572 18.4628C4.51951 18.5538 4.50011 18.6513 4.50011 18.7498C4.50011 18.8483 4.51951 18.9458 4.5572 19.0368C4.59488 19.1278 4.65012 19.2105 4.71976 19.2801C4.7894 19.3497 4.87207 19.405 4.96305 19.4427C5.05403 19.4803 5.15155 19.4997 5.25003 19.4997C5.34851 19.4997 5.44603 19.4803 5.53701 19.4427C5.628 19.405 5.71067 19.3497 5.78031 19.2801L12.0001 13.0603L18.2198 19.2801C18.3604 19.4207 18.5512 19.4997 18.7501 19.4997C18.949 19.4997 19.1397 19.4207 19.2804 19.2801C19.421 19.1395 19.5 18.9487 19.5 18.7498C19.5 18.5509 19.421 18.3602 19.2804 18.2195L13.0606 11.9998Z%22 fill%3D%22white%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fsvg%3E%0D\")}\n"] }]
         }], ctorParameters: function () { return [{ type: DnsService }]; }, propDecorators: { user: [{
                 type: Input
             }], customerId: [{
@@ -1582,7 +1573,10 @@ class TableToolbarComponent {
         this.searchValue = '';
         this.selectedUserType = null;
         this.searchChange = new EventEmitter();
+        this.sites = [];
+        this.selectedSiteId = null;
         this.searchByType = new EventEmitter();
+        this.searchBySite = new EventEmitter();
         this.addUser = new EventEmitter();
     }
     onSearchInputChange(event) {
@@ -1595,15 +1589,19 @@ class TableToolbarComponent {
         const value = event.target.value;
         this.searchByType.emit(value);
     }
+    onSiteChange(event) {
+        const value = event.target.value;
+        this.searchBySite.emit(value ? Number(value) : null);
+    }
     onAddUser() {
         this.addUser.emit();
     }
 }
 TableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableToolbarComponent, selector: "tk-users-table-toolbar", inputs: { totalUsersCount: "totalUsersCount", searchValue: "searchValue", selectedUserType: "selectedUserType" }, outputs: { searchChange: "searchChange", searchByType: "searchByType", addUser: "addUser" }, ngImport: i0, template: "<header style=\"margin-bottom: 1rem\">\r\n  <div\r\n    style=\"display: flex; align-items: center; justify-content: space-between\"\r\n  >\r\n    <div class=\"collection-header-left\">\r\n      <div style=\"display: flex; align-items: center; gap: 12px\">\r\n        <!-- Search Input -->\r\n        <div style=\"position: relative; width: fit-content; min-width: 200px\">\r\n          <input\r\n            [value]=\"searchValue\"\r\n            (input)=\"onSearchInputChange($event)\"\r\n            type=\"text\"\r\n            placeholder=\"Search by display name, email\"\r\n            style=\"\r\n              width: 100%;\r\n              height: 34px;\r\n              border-radius: 0.5rem;\r\n              font-size: 16px;\r\n              padding: 6px 12px 6px 44px;\r\n              border: 1px solid #00000080;\r\n              background: #fff;\r\n              color: #222;\r\n              outline: none;\r\n              box-sizing: border-box;\r\n              min-width: 280px;\r\n            \"\r\n          />\r\n          <span\r\n            style=\"\r\n              position: absolute;\r\n              left: 12px;\r\n              top: 50%;\r\n              transform: translateY(-50%);\r\n              color: #757575;\r\n              font-size: 18px;\r\n              font-weight: normal;\r\n              pointer-events: none;\r\n            \"\r\n          >\r\n            <i\r\n              class=\"material-icons\"\r\n              style=\"font-size: 18px; font-weight: normal\"\r\n              >search</i\r\n            >\r\n          </span>\r\n        </div>\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n        <!-- Filter Select -->\r\n        <div\r\n          style=\"\r\n            display: flex;\r\n            align-items: center;\r\n            position: relative;\r\n            width: fit-content;\r\n            min-width: 200px;\r\n          \"\r\n        >\r\n          <span\r\n            style=\"\r\n              position: absolute;\r\n              left: 12px;\r\n              top: 50%;\r\n              transform: translateY(-50%);\r\n              color: #757575;\r\n              font-size: 18px;\r\n              font-weight: normal;\r\n              pointer-events: none;\r\n            \"\r\n          >\r\n            <i\r\n              class=\"material-icons\"\r\n              style=\"font-size: 18px; font-weight: normal\"\r\n              >filter_list</i\r\n            >\r\n          </span>\r\n          <select\r\n            style=\"\r\n              height: 34px;\r\n              border-radius: 0.5rem;\r\n              font-size: 16px;\r\n              padding: 6px 32px 6px 44px;\r\n              border: 1px solid #00000080;\r\n              background: #fff;\r\n              min-width: 200px;\r\n              width: fit-content;\r\n              color: #222;\r\n              appearance: none;\r\n              -webkit-appearance: none;\r\n              -moz-appearance: none;\r\n              background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n              background-repeat: no-repeat;\r\n              background-position: right 12px center;\r\n              background-size: 20px 20px;\r\n            \"\r\n          >\r\n            <option>Filter</option>\r\n          </select>\r\n        </div>\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n        <!-- Location Select -->\r\n        <select\r\n          style=\"\r\n            height: 34px;\r\n            border-radius: 0.5rem;\r\n            font-size: 16px;\r\n            padding: 6px 32px 6px 12px;\r\n            border: 1px solid #00000080;\r\n            background: #fff;\r\n            min-width: 200px;\r\n            width: fit-content;\r\n            color: #222;\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            -moz-appearance: none;\r\n            background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n            background-repeat: no-repeat;\r\n            background-position: right 12px center;\r\n            background-size: 20px 20px;\r\n          \"\r\n        >\r\n          <option>Select a Location</option>\r\n        </select>\r\n\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n\r\n        <select\r\n          [value]=\"selectedUserType || ''\"\r\n          style=\"\r\n            height: 34px;\r\n            border-radius: 0.5rem;\r\n            font-size: 16px;\r\n            padding: 6px 32px 6px 12px;\r\n            border: 1px solid #00000080;\r\n            background: #fff;\r\n            min-width: 200px;\r\n            width: fit-content;\r\n            color: #222;\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            -moz-appearance: none;\r\n            background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n            background-repeat: no-repeat;\r\n            background-position: right 12px center;\r\n            background-size: 20px 20px;\r\n          \"\r\n          (change)=\"onTypeChange($event)\"\r\n        >\r\n          <option value=\"null\" disabled hidden>Select type</option>\r\n          <option value=\"\">All</option>\r\n          <option value=\"CUCM\">Webex Calling DI</option>\r\n          <option value=\"WEBEX\">Webex Calling</option>\r\n          <option value=\"ONPREM\">UCM</option>\r\n          <option value=\"HYBRID\">Hybrid</option>\r\n        </select>\r\n        <span\r\n          style=\"\r\n            margin-left: 8px;\r\n            color: #757575;\r\n            font-size: 1rem;\r\n            white-space: nowrap;\r\n          \"\r\n          >{{ totalUsersCount }} users</span\r\n        >\r\n      </div>\r\n    </div>\r\n    <div style=\"display: flex; gap: 1rem\">\r\n      <button class=\"btn mu\" (click)=\"onAddUser()\">Add user</button>\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: [".btn{position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;width:min-content;max-width:100%;padding:0rem .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);height:2rem;cursor:pointer}.btn:hover{background-color:#0000000d}.si{border-color:#0000004d;background-color:#0000;color:#000000f2}.mu{color:#fff;background-color:#000000f2}.mu:hover{background-color:#232323e6!important}\n"], dependencies: [{ kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+TableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableToolbarComponent, selector: "tk-users-table-toolbar", inputs: { totalUsersCount: "totalUsersCount", searchValue: "searchValue", selectedUserType: "selectedUserType", sites: "sites", selectedSiteId: "selectedSiteId" }, outputs: { searchChange: "searchChange", searchByType: "searchByType", searchBySite: "searchBySite", addUser: "addUser" }, ngImport: i0, template: "<header style=\"margin-bottom: 1rem\">\r\n  <div\r\n    style=\"display: flex; align-items: center; justify-content: space-between\"\r\n  >\r\n    <div class=\"collection-header-left\">\r\n      <div style=\"display: flex; align-items: center; gap: 12px\">\r\n        <!-- Search Input -->\r\n        <div style=\"position: relative; width: fit-content; min-width: 200px\">\r\n          <input\r\n            [value]=\"searchValue\"\r\n            (input)=\"onSearchInputChange($event)\"\r\n            type=\"text\"\r\n            placeholder=\"Search by display name, email\"\r\n            style=\"\r\n              width: 100%;\r\n              height: 34px;\r\n              border-radius: 0.5rem;\r\n              font-size: 16px;\r\n              padding: 6px 12px 6px 44px;\r\n              border: 1px solid #00000080;\r\n              background: #fff;\r\n              color: #222;\r\n              outline: none;\r\n              box-sizing: border-box;\r\n              min-width: 280px;\r\n            \"\r\n          />\r\n          <span\r\n            style=\"\r\n              position: absolute;\r\n              left: 12px;\r\n              top: 50%;\r\n              transform: translateY(-50%);\r\n              color: #757575;\r\n              font-size: 18px;\r\n              font-weight: normal;\r\n              pointer-events: none;\r\n            \"\r\n          >\r\n            <i\r\n              class=\"material-icons\"\r\n              style=\"font-size: 18px; font-weight: normal\"\r\n              >search</i\r\n            >\r\n          </span>\r\n        </div>\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n        <!-- Filter Select -->\r\n        <div\r\n          style=\"\r\n            display: flex;\r\n            align-items: center;\r\n            position: relative;\r\n            width: fit-content;\r\n            min-width: 200px;\r\n          \"\r\n        >\r\n          <span\r\n            style=\"\r\n              position: absolute;\r\n              left: 12px;\r\n              top: 50%;\r\n              transform: translateY(-50%);\r\n              color: #757575;\r\n              font-size: 18px;\r\n              font-weight: normal;\r\n              pointer-events: none;\r\n            \"\r\n          >\r\n            <i\r\n              class=\"material-icons\"\r\n              style=\"font-size: 18px; font-weight: normal\"\r\n              >filter_list</i\r\n            >\r\n          </span>\r\n          <select\r\n            style=\"\r\n              height: 34px;\r\n              border-radius: 0.5rem;\r\n              font-size: 16px;\r\n              padding: 6px 32px 6px 44px;\r\n              border: 1px solid #00000080;\r\n              background: #fff;\r\n              min-width: 200px;\r\n              width: fit-content;\r\n              color: #222;\r\n              appearance: none;\r\n              -webkit-appearance: none;\r\n              -moz-appearance: none;\r\n              background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n              background-repeat: no-repeat;\r\n              background-position: right 12px center;\r\n              background-size: 20px 20px;\r\n            \"\r\n          >\r\n            <option>Filter</option>\r\n          </select>\r\n        </div>\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n        <!-- Location Select -->\r\n        <select\r\n          style=\"\r\n            height: 34px;\r\n            border-radius: 0.5rem;\r\n            font-size: 16px;\r\n            padding: 6px 32px 6px 12px;\r\n            border: 1px solid #00000080;\r\n            background: #fff;\r\n            min-width: 200px;\r\n            width: fit-content;\r\n            color: #222;\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            -moz-appearance: none;\r\n            background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n            background-repeat: no-repeat;\r\n            background-position: right 12px center;\r\n            background-size: 20px 20px;\r\n          \"\r\n          (change)=\"onSiteChange($event)\"\r\n        >\r\n          <option value=\"\" disabled hidden [selected]=\"selectedSiteId === null\">Select a Location</option>\r\n          <option value=\"\">All</option>\r\n          <option\r\n            *ngFor=\"let site of sites\"\r\n            [value]=\"site.id\"\r\n            [selected]=\"site.id === selectedSiteId\"\r\n          >{{ site.name }}</option>\r\n        </select>\r\n\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n\r\n        <select\r\n          [value]=\"selectedUserType || ''\"\r\n          style=\"\r\n            height: 34px;\r\n            border-radius: 0.5rem;\r\n            font-size: 16px;\r\n            padding: 6px 32px 6px 12px;\r\n            border: 1px solid #00000080;\r\n            background: #fff;\r\n            min-width: 200px;\r\n            width: fit-content;\r\n            color: #222;\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            -moz-appearance: none;\r\n            background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n            background-repeat: no-repeat;\r\n            background-position: right 12px center;\r\n            background-size: 20px 20px;\r\n          \"\r\n          (change)=\"onTypeChange($event)\"\r\n        >\r\n          <option value=\"null\" disabled hidden>Select type</option>\r\n          <option value=\"\">All</option>\r\n          <option value=\"CUCM\">Webex Calling DI</option>\r\n          <option value=\"WEBEX\">Webex Calling</option>\r\n          <option value=\"ONPREM\">UCM</option>\r\n          <option value=\"HYBRID\">Hybrid</option>\r\n        </select>\r\n        <span\r\n          style=\"\r\n            margin-left: 8px;\r\n            color: #757575;\r\n            font-size: 1rem;\r\n            white-space: nowrap;\r\n          \"\r\n          >{{ totalUsersCount }} users</span\r\n        >\r\n      </div>\r\n    </div>\r\n    <div style=\"display: flex; gap: 1rem\">\r\n      <button class=\"btn mu\" (click)=\"onAddUser()\">Add user</button>\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: [".btn{position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;width:min-content;max-width:100%;padding:0rem .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);height:2rem;cursor:pointer}.btn:hover{background-color:#0000000d}.si{border-color:#0000004d;background-color:#0000;color:#000000f2}.mu{color:#fff;background-color:#000000f2}.mu:hover{background-color:#232323e6!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-users-table-toolbar', template: "<header style=\"margin-bottom: 1rem\">\r\n  <div\r\n    style=\"display: flex; align-items: center; justify-content: space-between\"\r\n  >\r\n    <div class=\"collection-header-left\">\r\n      <div style=\"display: flex; align-items: center; gap: 12px\">\r\n        <!-- Search Input -->\r\n        <div style=\"position: relative; width: fit-content; min-width: 200px\">\r\n          <input\r\n            [value]=\"searchValue\"\r\n            (input)=\"onSearchInputChange($event)\"\r\n            type=\"text\"\r\n            placeholder=\"Search by display name, email\"\r\n            style=\"\r\n              width: 100%;\r\n              height: 34px;\r\n              border-radius: 0.5rem;\r\n              font-size: 16px;\r\n              padding: 6px 12px 6px 44px;\r\n              border: 1px solid #00000080;\r\n              background: #fff;\r\n              color: #222;\r\n              outline: none;\r\n              box-sizing: border-box;\r\n              min-width: 280px;\r\n            \"\r\n          />\r\n          <span\r\n            style=\"\r\n              position: absolute;\r\n              left: 12px;\r\n              top: 50%;\r\n              transform: translateY(-50%);\r\n              color: #757575;\r\n              font-size: 18px;\r\n              font-weight: normal;\r\n              pointer-events: none;\r\n            \"\r\n          >\r\n            <i\r\n              class=\"material-icons\"\r\n              style=\"font-size: 18px; font-weight: normal\"\r\n              >search</i\r\n            >\r\n          </span>\r\n        </div>\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n        <!-- Filter Select -->\r\n        <div\r\n          style=\"\r\n            display: flex;\r\n            align-items: center;\r\n            position: relative;\r\n            width: fit-content;\r\n            min-width: 200px;\r\n          \"\r\n        >\r\n          <span\r\n            style=\"\r\n              position: absolute;\r\n              left: 12px;\r\n              top: 50%;\r\n              transform: translateY(-50%);\r\n              color: #757575;\r\n              font-size: 18px;\r\n              font-weight: normal;\r\n              pointer-events: none;\r\n            \"\r\n          >\r\n            <i\r\n              class=\"material-icons\"\r\n              style=\"font-size: 18px; font-weight: normal\"\r\n              >filter_list</i\r\n            >\r\n          </span>\r\n          <select\r\n            style=\"\r\n              height: 34px;\r\n              border-radius: 0.5rem;\r\n              font-size: 16px;\r\n              padding: 6px 32px 6px 44px;\r\n              border: 1px solid #00000080;\r\n              background: #fff;\r\n              min-width: 200px;\r\n              width: fit-content;\r\n              color: #222;\r\n              appearance: none;\r\n              -webkit-appearance: none;\r\n              -moz-appearance: none;\r\n              background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n              background-repeat: no-repeat;\r\n              background-position: right 12px center;\r\n              background-size: 20px 20px;\r\n            \"\r\n          >\r\n            <option>Filter</option>\r\n          </select>\r\n        </div>\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n        <!-- Location Select -->\r\n        <select\r\n          style=\"\r\n            height: 34px;\r\n            border-radius: 0.5rem;\r\n            font-size: 16px;\r\n            padding: 6px 32px 6px 12px;\r\n            border: 1px solid #00000080;\r\n            background: #fff;\r\n            min-width: 200px;\r\n            width: fit-content;\r\n            color: #222;\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            -moz-appearance: none;\r\n            background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n            background-repeat: no-repeat;\r\n            background-position: right 12px center;\r\n            background-size: 20px 20px;\r\n          \"\r\n        >\r\n          <option>Select a Location</option>\r\n        </select>\r\n\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n\r\n        <select\r\n          [value]=\"selectedUserType || ''\"\r\n          style=\"\r\n            height: 34px;\r\n            border-radius: 0.5rem;\r\n            font-size: 16px;\r\n            padding: 6px 32px 6px 12px;\r\n            border: 1px solid #00000080;\r\n            background: #fff;\r\n            min-width: 200px;\r\n            width: fit-content;\r\n            color: #222;\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            -moz-appearance: none;\r\n            background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n            background-repeat: no-repeat;\r\n            background-position: right 12px center;\r\n            background-size: 20px 20px;\r\n          \"\r\n          (change)=\"onTypeChange($event)\"\r\n        >\r\n          <option value=\"null\" disabled hidden>Select type</option>\r\n          <option value=\"\">All</option>\r\n          <option value=\"CUCM\">Webex Calling DI</option>\r\n          <option value=\"WEBEX\">Webex Calling</option>\r\n          <option value=\"ONPREM\">UCM</option>\r\n          <option value=\"HYBRID\">Hybrid</option>\r\n        </select>\r\n        <span\r\n          style=\"\r\n            margin-left: 8px;\r\n            color: #757575;\r\n            font-size: 1rem;\r\n            white-space: nowrap;\r\n          \"\r\n          >{{ totalUsersCount }} users</span\r\n        >\r\n      </div>\r\n    </div>\r\n    <div style=\"display: flex; gap: 1rem\">\r\n      <button class=\"btn mu\" (click)=\"onAddUser()\">Add user</button>\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: [".btn{position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;width:min-content;max-width:100%;padding:0rem .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);height:2rem;cursor:pointer}.btn:hover{background-color:#0000000d}.si{border-color:#0000004d;background-color:#0000;color:#000000f2}.mu{color:#fff;background-color:#000000f2}.mu:hover{background-color:#232323e6!important}\n"] }]
+            args: [{ selector: 'tk-users-table-toolbar', template: "<header style=\"margin-bottom: 1rem\">\r\n  <div\r\n    style=\"display: flex; align-items: center; justify-content: space-between\"\r\n  >\r\n    <div class=\"collection-header-left\">\r\n      <div style=\"display: flex; align-items: center; gap: 12px\">\r\n        <!-- Search Input -->\r\n        <div style=\"position: relative; width: fit-content; min-width: 200px\">\r\n          <input\r\n            [value]=\"searchValue\"\r\n            (input)=\"onSearchInputChange($event)\"\r\n            type=\"text\"\r\n            placeholder=\"Search by display name, email\"\r\n            style=\"\r\n              width: 100%;\r\n              height: 34px;\r\n              border-radius: 0.5rem;\r\n              font-size: 16px;\r\n              padding: 6px 12px 6px 44px;\r\n              border: 1px solid #00000080;\r\n              background: #fff;\r\n              color: #222;\r\n              outline: none;\r\n              box-sizing: border-box;\r\n              min-width: 280px;\r\n            \"\r\n          />\r\n          <span\r\n            style=\"\r\n              position: absolute;\r\n              left: 12px;\r\n              top: 50%;\r\n              transform: translateY(-50%);\r\n              color: #757575;\r\n              font-size: 18px;\r\n              font-weight: normal;\r\n              pointer-events: none;\r\n            \"\r\n          >\r\n            <i\r\n              class=\"material-icons\"\r\n              style=\"font-size: 18px; font-weight: normal\"\r\n              >search</i\r\n            >\r\n          </span>\r\n        </div>\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n        <!-- Filter Select -->\r\n        <div\r\n          style=\"\r\n            display: flex;\r\n            align-items: center;\r\n            position: relative;\r\n            width: fit-content;\r\n            min-width: 200px;\r\n          \"\r\n        >\r\n          <span\r\n            style=\"\r\n              position: absolute;\r\n              left: 12px;\r\n              top: 50%;\r\n              transform: translateY(-50%);\r\n              color: #757575;\r\n              font-size: 18px;\r\n              font-weight: normal;\r\n              pointer-events: none;\r\n            \"\r\n          >\r\n            <i\r\n              class=\"material-icons\"\r\n              style=\"font-size: 18px; font-weight: normal\"\r\n              >filter_list</i\r\n            >\r\n          </span>\r\n          <select\r\n            style=\"\r\n              height: 34px;\r\n              border-radius: 0.5rem;\r\n              font-size: 16px;\r\n              padding: 6px 32px 6px 44px;\r\n              border: 1px solid #00000080;\r\n              background: #fff;\r\n              min-width: 200px;\r\n              width: fit-content;\r\n              color: #222;\r\n              appearance: none;\r\n              -webkit-appearance: none;\r\n              -moz-appearance: none;\r\n              background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n              background-repeat: no-repeat;\r\n              background-position: right 12px center;\r\n              background-size: 20px 20px;\r\n            \"\r\n          >\r\n            <option>Filter</option>\r\n          </select>\r\n        </div>\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n        <!-- Location Select -->\r\n        <select\r\n          style=\"\r\n            height: 34px;\r\n            border-radius: 0.5rem;\r\n            font-size: 16px;\r\n            padding: 6px 32px 6px 12px;\r\n            border: 1px solid #00000080;\r\n            background: #fff;\r\n            min-width: 200px;\r\n            width: fit-content;\r\n            color: #222;\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            -moz-appearance: none;\r\n            background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n            background-repeat: no-repeat;\r\n            background-position: right 12px center;\r\n            background-size: 20px 20px;\r\n          \"\r\n          (change)=\"onSiteChange($event)\"\r\n        >\r\n          <option value=\"\" disabled hidden [selected]=\"selectedSiteId === null\">Select a Location</option>\r\n          <option value=\"\">All</option>\r\n          <option\r\n            *ngFor=\"let site of sites\"\r\n            [value]=\"site.id\"\r\n            [selected]=\"site.id === selectedSiteId\"\r\n          >{{ site.name }}</option>\r\n        </select>\r\n\r\n        <span style=\"margin: 0 4px; color: #757575; font-size: 1rem\">or</span>\r\n\r\n        <select\r\n          [value]=\"selectedUserType || ''\"\r\n          style=\"\r\n            height: 34px;\r\n            border-radius: 0.5rem;\r\n            font-size: 16px;\r\n            padding: 6px 32px 6px 12px;\r\n            border: 1px solid #00000080;\r\n            background: #fff;\r\n            min-width: 200px;\r\n            width: fit-content;\r\n            color: #222;\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            -moz-appearance: none;\r\n            background-image: url(&quot;data:image/svg+xml;utf8,<svg fill='%23757575' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>&quot;);\r\n            background-repeat: no-repeat;\r\n            background-position: right 12px center;\r\n            background-size: 20px 20px;\r\n          \"\r\n          (change)=\"onTypeChange($event)\"\r\n        >\r\n          <option value=\"null\" disabled hidden>Select type</option>\r\n          <option value=\"\">All</option>\r\n          <option value=\"CUCM\">Webex Calling DI</option>\r\n          <option value=\"WEBEX\">Webex Calling</option>\r\n          <option value=\"ONPREM\">UCM</option>\r\n          <option value=\"HYBRID\">Hybrid</option>\r\n        </select>\r\n        <span\r\n          style=\"\r\n            margin-left: 8px;\r\n            color: #757575;\r\n            font-size: 1rem;\r\n            white-space: nowrap;\r\n          \"\r\n          >{{ totalUsersCount }} users</span\r\n        >\r\n      </div>\r\n    </div>\r\n    <div style=\"display: flex; gap: 1rem\">\r\n      <button class=\"btn mu\" (click)=\"onAddUser()\">Add user</button>\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: [".btn{position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;width:min-content;max-width:100%;padding:0rem .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);height:2rem;cursor:pointer}.btn:hover{background-color:#0000000d}.si{border-color:#0000004d;background-color:#0000;color:#000000f2}.mu{color:#fff;background-color:#000000f2}.mu:hover{background-color:#232323e6!important}\n"] }]
         }], propDecorators: { totalUsersCount: [{
                 type: Input
             }], searchValue: [{
@@ -1612,8 +1610,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], searchChange: [{
                 type: Output
+            }], sites: [{
+                type: Input
+            }], selectedSiteId: [{
+                type: Input
             }], searchByType: [{
                 type: Output
+            }], searchBySite: [{
+                type: Output
             }], addUser: [{
                 type: Output
             }] } });
@@ -1644,7 +1648,7 @@ class NotificationsComponent {
     }
 }
 NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationsComponent, deps: [{ token: NotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationsComponent, selector: "app-notification", ngImport: i0, template: "<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\r\n  <div\r\n    class=\"notification\"\r\n    *ngFor=\"let notification of list\"\r\n    [ngClass]=\"{\r\n      error: notification.isError(),\r\n      success: notification.isSuccess(),\r\n    }\"\r\n  >\r\n    <div class=\"flex-box\">\r\n      <div class=\"notification-icons-block\">\r\n        <i\r\n          *ngIf=\"notification.isError()\"\r\n          class=\"fa fa-exclamation-triangle\"\r\n        ></i>\r\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\r\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\r\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\r\n      </div>\r\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\r\n        {{ notification.message }}\r\n      </div>\r\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\r\n        {{ notification.message }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"read-more-error link clickable\"\r\n      *ngIf=\"notification.message && notification.message.length > 93\"\r\n      (click)=\"readMore()\"\r\n    >\r\n      {{ isReadMore ? \"Collapse\" : \"Read more\" }}\r\n    </div>\r\n    <button\r\n      class=\"close\"\r\n      mat-icon-button\r\n      matTooltip=\"Close notification\"\r\n      (click)=\"removeNotification(notification)\"\r\n    >\r\n      <img\r\n        class=\"notification-icon-close\"\r\n        src=\"assets/icons/close_icon_modal.svg\"\r\n        alt=\"\"\r\n      />\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".notification-block{position:absolute;top:96px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:12px;width:360px;pointer-events:none}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 14px 12px;color:#333;border-radius:8px;border:1px solid #e5e1cd;background:#fcf8e3;box-shadow:0 10px 24px #091e4229;width:100%;position:relative;pointer-events:auto}.notification-block .notification .notification-icons-block{width:28px;min-width:28px;display:flex;justify-content:center;align-items:flex-start;padding-top:2px}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,sans-serif!important;word-break:break-word;line-height:1.4;flex:1}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#ffe9e9;border-color:#e16d6d}.notification-block .notification.success{background:#e3f4dc;border-color:#b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:6px;right:6px;width:28px;height:28px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{right:12px;left:12px;width:auto}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationsComponent, selector: "app-notification", ngImport: i0, template: "<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\r\n  <div\r\n    class=\"notification\"\r\n    *ngFor=\"let notification of list\"\r\n    [ngClass]=\"{\r\n      error: notification.isError(),\r\n      success: notification.isSuccess(),\r\n    }\"\r\n  >\r\n    <div class=\"flex-box\">\r\n      <div class=\"notification-icons-block\">\r\n        <i\r\n          *ngIf=\"notification.isError()\"\r\n          class=\"fa fa-exclamation-triangle\"\r\n        ></i>\r\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\r\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\r\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\r\n      </div>\r\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\r\n        {{ notification.message }}\r\n      </div>\r\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\r\n        {{ notification.message }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"read-more-error link clickable\"\r\n      *ngIf=\"notification.message && notification.message.length > 93\"\r\n      (click)=\"readMore()\"\r\n    >\r\n      {{ isReadMore ? \"Collapse\" : \"Read more\" }}\r\n    </div>\r\n    <button\r\n      class=\"close\"\r\n      mat-icon-button\r\n      matTooltip=\"Close notification\"\r\n      (click)=\"removeNotification(notification)\"\r\n    >\r\n      <img\r\n        class=\"notification-icon-close\"\r\n        src=\"assets/icons/close_icon_modal.svg\"\r\n        alt=\"\"\r\n      />\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".notification-block{position:absolute;top:96px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:12px;width:360px;pointer-events:none}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 14px 12px;color:#333;border-radius:8px;border:1px solid #e5e1cd;background:#fcf8e3;box-shadow:0 10px 24px #091e4229;width:100%;position:relative;pointer-events:auto}.notification-block .notification .notification-icons-block{width:28px;min-width:28px;display:flex;justify-content:center;align-items:flex-start;padding-top:2px}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,sans-serif!important;word-break:break-word;line-height:1.4;flex:1}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#ffe9e9;border-color:#e16d6d}.notification-block .notification.success{background:#e3f4dc;border-color:#b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:6px;right:6px;width:28px;height:28px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{right:12px;left:12px;width:auto}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\r\n  <div\r\n    class=\"notification\"\r\n    *ngFor=\"let notification of list\"\r\n    [ngClass]=\"{\r\n      error: notification.isError(),\r\n      success: notification.isSuccess(),\r\n    }\"\r\n  >\r\n    <div class=\"flex-box\">\r\n      <div class=\"notification-icons-block\">\r\n        <i\r\n          *ngIf=\"notification.isError()\"\r\n          class=\"fa fa-exclamation-triangle\"\r\n        ></i>\r\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\r\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\r\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\r\n      </div>\r\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\r\n        {{ notification.message }}\r\n      </div>\r\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\r\n        {{ notification.message }}\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"read-more-error link clickable\"\r\n      *ngIf=\"notification.message && notification.message.length > 93\"\r\n      (click)=\"readMore()\"\r\n    >\r\n      {{ isReadMore ? \"Collapse\" : \"Read more\" }}\r\n    </div>\r\n    <button\r\n      class=\"close\"\r\n      mat-icon-button\r\n      matTooltip=\"Close notification\"\r\n      (click)=\"removeNotification(notification)\"\r\n    >\r\n      <img\r\n        class=\"notification-icon-close\"\r\n        src=\"assets/icons/close_icon_modal.svg\"\r\n        alt=\"\"\r\n      />\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".notification-block{position:absolute;top:96px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:12px;width:360px;pointer-events:none}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 14px 12px;color:#333;border-radius:8px;border:1px solid #e5e1cd;background:#fcf8e3;box-shadow:0 10px 24px #091e4229;width:100%;position:relative;pointer-events:auto}.notification-block .notification .notification-icons-block{width:28px;min-width:28px;display:flex;justify-content:center;align-items:flex-start;padding-top:2px}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,sans-serif!important;word-break:break-word;line-height:1.4;flex:1}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#ffe9e9;border-color:#e16d6d}.notification-block .notification.success{background:#e3f4dc;border-color:#b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:6px;right:6px;width:28px;height:28px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{right:12px;left:12px;width:auto}}\n"] }]
@@ -1663,6 +1667,7 @@ const LOCAL_STORAGE = {
     USER_IN_MIGRATION: 'userIdInMigration',
     MIGRATION_FORM_ID: 'migrationFormId',
 };
+const USERS_LIST_FILTER_STORAGE_KEY = 'tkUsersListFilter';
 class UsersListComponent {
     getTodayShortDate() {
         const now = new Date();
@@ -1722,6 +1727,8 @@ class UsersListComponent {
         this.showPaginator = true;
         this.activeSearchToken = '';
         this.activeUserType = null;
+        this.activeSiteId = null;
+        this.sites = [];
         this.ON_PREM_ID = ON_PREM_ID;
         this.totalUsersCount = 0;
         this.destroy$ = new Subject();
@@ -1734,6 +1741,8 @@ class UsersListComponent {
         this.apiWebexService.token = this.token;
         this.apiService.apiUrl = this.host + '/dcp';
         this.apiWebexService.apiUrl = this.host + '/webex';
+        this.restoreFilterState();
+        this.loadSites();
         /*this.usersSearchService.getUsersUpgradeStatus(this.usersSearchService.customerId)
           .pipe(takeUntil(this.destroy$))
           .subscribe();*/
@@ -2086,41 +2095,39 @@ class UsersListComponent {
         });
         this.subscriptions.push(subscription);
     }
-    searchUsers(token, type) {
+    // search token, provisioning type and location filters are combined — changing one keeps the others
+    searchUsers(token, type = this.activeUserType, siteId = this.activeSiteId) {
         const normalizedToken = (token || '').trim();
         const normalizedType = type || null;
-        // if token is empty — restore current page datasource
-        if (!normalizedToken && !normalizedType) {
-            this.activeSearchToken = '';
-            this.activeUserType = null;
+        const normalizedSiteId = siteId ?? null;
+        this.activeSearchToken = normalizedToken;
+        this.activeUserType = normalizedType;
+        this.activeSiteId = normalizedSiteId;
+        this.saveFilterState();
+        this.searchSubscription?.unsubscribe();
+        // if no filter is active — restore current page datasource
+        if (!normalizedToken && !normalizedType && normalizedSiteId === null) {
             this.setUsers(this.baseUsers);
             this.dataSource = new MatTableDataSource(this.users);
             this.totalUsersCount = this.usersSearchService?.total || this.users.length;
             this.setShowPaginator(true);
+            this.dataPending = false;
             return;
         }
-        if (normalizedType) {
-            this.activeUserType = normalizedType;
-            this.activeSearchToken = '';
-        }
-        else {
-            this.activeSearchToken = normalizedToken;
-            this.activeUserType = null;
-        }
         // fetch all users (server-side) and filter locally across the whole dataset
         this.dataPending = true;
-        const subscription = this.usersSearchService.getAllRegularUsers()
+        this.searchSubscription = this.usersSearchService.getAllRegularUsers()
             .subscribe((allUsers) => {
-            let filtered;
-            const normalizedUsers = this.normalizeUsersForHybrid(allUsers);
-            if (normalizedType === null) {
-                filtered = this.filterByToken(allUsers, normalizedToken);
-                this.setShowPaginator(true);
+            let filtered = normalizedType
+                ? this.filterByType(this.normalizeUsersForHybrid(allUsers), normalizedType)
+                : allUsers;
+            if (normalizedSiteId !== null) {
+                filtered = this.filterBySite(filtered, normalizedSiteId);
             }
-            else {
-                filtered = this.filterByType(normalizedUsers, normalizedType);
-                this.setShowPaginator(false);
+            if (normalizedToken) {
+                filtered = this.filterByToken(filtered, normalizedToken);
             }
+            this.setShowPaginator(!normalizedType && normalizedSiteId === null);
             this.setUsers(filtered);
             this.dataSource = new MatTableDataSource(this.users);
             this.totalUsersCount = this.users.length;
@@ -2129,23 +2136,74 @@ class UsersListComponent {
             this.dataPending = false;
             this.notifications.error('The data can not be received');
         });
-        this.subscriptions.push(subscription);
+        this.subscriptions.push(this.searchSubscription);
     }
     searchByType(userType) {
-        const normalizedType = userType || null;
-        if (!normalizedType) {
-            this.searchUsers('');
-            return;
+        this.searchUsers(this.activeSearchToken, userType || null);
+    }
+    searchBySite(siteId) {
+        this.searchUsers(this.activeSearchToken, this.activeUserType, siteId);
+    }
+    loadSites() {
+        const sitesUrl = API.SITES.replace(':customerId', String(this.customerId));
+        const subscription = this.apiService.fetchPagination(sitesUrl, MAX_INTEGER, 0, {}, false)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((sitesRes) => {
+            const sites = sitesRes?.pageData || [];
+            this.sites = sites
+                .filter((site) => Number.isFinite(Number(site?.id)))
+                .map((site) => ({ id: Number(site.id), name: String(site.name || site.id) }))
+                .sort((a, b) => a.name.localeCompare(b.name));
+            // drop a restored location that no longer exists for this customer
+            if (this.activeSiteId !== null && !this.sites.some((site) => site.id === this.activeSiteId)) {
+                this.searchBySite(null);
+            }
+        }, () => this.notifications.error('The locations can not be received'));
+        this.subscriptions.push(subscription);
+    }
+    get filterStorageKey() {
+        return `${USERS_LIST_FILTER_STORAGE_KEY}_${this.customerId}_${this.siteId}`;
+    }
+    // the host app destroys this component when navigating to the user profile,
+    // so persist the active filter to restore it on return
+    saveFilterState() {
+        try {
+            if (!this.activeSearchToken && !this.activeUserType && this.activeSiteId === null) {
+                sessionStorage.removeItem(this.filterStorageKey);
+                return;
+            }
+            const state = {
+                token: this.activeSearchToken,
+                type: this.activeUserType,
+                siteId: this.activeSiteId,
+            };
+            sessionStorage.setItem(this.filterStorageKey, JSON.stringify(state));
+        }
+        catch {
+            // storage unavailable — filter just won't survive navigation
         }
-        this.searchUsers('', normalizedType);
     }
-    applyActiveFilter() {
-        if (this.activeSearchToken) {
-            this.searchUsers(this.activeSearchToken);
-            return;
+    restoreFilterState() {
+        try {
+            const raw = sessionStorage.getItem(this.filterStorageKey);
+            if (!raw) {
+                return;
+            }
+            const state = JSON.parse(raw);
+            const type = state.type && state.type in USER_TYPES_MAP ? state.type : null;
+            this.activeUserType = type;
+            this.activeSearchToken = (state.token || '').trim();
+            this.activeSiteId = Number.isFinite(state.siteId) ? Number(state.siteId) : null;
         }
-        if (this.activeUserType) {
-            this.searchUsers('', this.activeUserType);
+        catch {
+            this.activeSearchToken = '';
+            this.activeUserType = null;
+            this.activeSiteId = null;
+        }
+    }
+    applyActiveFilter() {
+        if (this.activeSearchToken || this.activeUserType || this.activeSiteId !== null) {
+            this.searchUsers(this.activeSearchToken, this.activeUserType, this.activeSiteId);
         }
     }
     onCreateUserRequested() {
@@ -2165,6 +2223,10 @@ class UsersListComponent {
         });
         return filtered;
     }
+    // hybrid users can belong to a site through their partner (CUCM) record as well
+    filterBySite(users, siteId) {
+        return (users || []).filter((user) => user.siteId === siteId || user.partnerSiteId === siteId);
+    }
     filterByType(users, userType) {
         let filteredUsers;
         if (userType === USER_TYPES_MAP.CUCM) {
@@ -2518,10 +2580,10 @@ class UsersListComponent {
     }
 }
 UsersListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListComponent, deps: [{ token: UserService }, { token: APIService }, { token: ApiWebexService }, { token: NotificationService }, { token: UsersSearchService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-UsersListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UsersListComponent, selector: "app-users-list", inputs: { token: "token", customerId: "customerId", siteId: "siteId", host: "host" }, outputs: { openUser: "openUser", userMoved: "userMoved", switchToWizard: "switchToWizard", createUserRequested: "createUserRequested" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<app-notification></app-notification>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n  <tk-users-table-toolbar\r\n    [totalUsersCount]=\"totalUsersCount\"\r\n    [searchValue]=\"activeSearchToken\"\r\n    [selectedUserType]=\"activeUserType\"\r\n    (searchChange)=\"searchUsers($event)\"\r\n    (searchByType)=\"searchByType($event)\"\r\n    (addUser)=\"onCreateUserRequested()\"\r\n  ></tk-users-table-toolbar>\r\n  <table\r\n    class=\"webex-table\"\r\n    mat-table\r\n    *ngIf=\"users?.length\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n  >\r\n    <!-- <ng-container matColumnDef=\"user-icon\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n      </td>\r\n    </ng-container> -->\r\n\r\n    <ng-container matColumnDef=\"name\">\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        class=\"webex-table-th\"\r\n        style=\"padding-left: 60px\"\r\n      >\r\n        Display name\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        <div class=\"display-name-wrapper\">\r\n          <span\r\n            class=\"user-name-text\"\r\n            [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n          >\r\n            {{ user.firstName }} {{ user.lastName }}\r\n          </span>\r\n          <span class=\"icon-webex-box\"\r\n            ><span class=\"icon-webex icon-webex-user\"></span\r\n          ></span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"email\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ user.email }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"status\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Status\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n        </span>\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n        [matTooltip]=\"\r\n          user.status !== 'Active' && user.webexUUID && !user.isHybrid\r\n            ? 'Pending cutover to MT. Please contact your administrator for details.'\r\n            : ''\r\n        \"\r\n        matTooltipPosition=\"above\"\r\n      >\r\n        <span\r\n          class=\"icon-user-status\"\r\n          [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active', 'icon-user-status-hybrid': user.isHybrid }\"\r\n        ></span\r\n        >{{ user.isHybrid ? 'Hybrid' : user.status }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        class=\"webex-table-th\"\r\n        style=\"padding-left: 24px; padding-top: 4px\"\r\n      >\r\n        <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n      </th>\r\n      <td\r\n        class=\"user-site actions-cell\"\r\n        mat-cell\r\n        *matCellDef=\"let user; let i = index\"\r\n        style=\"position: relative\"\r\n      >\r\n        <mat-progress-spinner\r\n          class=\"field-spinner\"\r\n          [diameter]=\"30\"\r\n          strokeWidth=\"3\"\r\n          mode=\"indeterminate\"\r\n          *ngIf=\"\r\n            user.status === 'In Progress' ||\r\n            user.status === 'Pending Activation' ||\r\n            user.status === 'Pending Deactivation'\r\n          \"\r\n        ></mat-progress-spinner>\r\n        <button\r\n          *ngIf=\"\r\n            !(\r\n              user.status === 'In Progress' ||\r\n              user.status === 'Pending Activation' ||\r\n              user.status === 'Pending Deactivation'\r\n            ) &&\r\n            !(\r\n              moveUserPending &&\r\n              moveInProgressUserId &&\r\n              moveInProgressUserId === user?.userid\r\n            )\r\n          \"\r\n          class=\"button-action-dot\"\r\n          mat-icon-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n        >\r\n          <div class=\"icon-actions-dots\">\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n          </div>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n          <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n          <button\r\n            *ngIf=\"!user.webexUUID && user.cucmId == ON_PREM_ID\"\r\n            mat-menu-item\r\n            [disabled]=\"true\"\r\n            matTooltip=\"Coming soon\"\r\n            matTooltipPosition=\"right\"\r\n          >\r\n            Enable AI Transcribe\r\n          </button>\r\n          <button\r\n            [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n            *ngIf=\"!user.isMigrated && !user.isHybrid\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n          >\r\n<!--   for TU-4960         !user.isReadyToUpgrade ||-->\r\n            License with Cloud Intelligence\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.partnerStatus !== 'Active'\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n          >\r\n<!--   for TU-4960         !user.isReadyToUpgrade ||-->\r\n            License with Cloud Intelligence\r\n          </button>\r\n          <button\r\n            [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n            *ngIf=\"!user.isMigrated && !user.isHybrid\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n          >\r\n            Migrate User to Webex Calling\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.partnerStatus !== 'Active'\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n          >\r\n            Migrate User to Webex Calling\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isMigrated\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n          >\r\n            Revert User to UCM/DI\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            *ngIf=\"!user.isHybrid\"\r\n            [disabled]=\"!isValidWebexUuid(user) || user.status !== 'Inactive'\"\r\n            (click)=\"onFirmwareUpgradeClicked(user)\"\r\n          >\r\n            Enable Webex Calling\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.status !== 'Inactive'\"\r\n            (click)=\"onFirmwareUpgradeClicked(user)\"\r\n          >\r\n            Enable Webex Calling\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            [disabled]=\"!user.webexUUID || user.status !== 'Active'\"\r\n            (click)=\"onRevertClicked(user)\"\r\n          >\r\n            Migrate User to UCM\r\n          </button>\r\n          <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"role\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        Admin roles\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ user.roleName || \"-\" }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"source\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        Provisioning Type\r\n      </th>\r\n      <td\r\n        class=\"user-provisioning-type\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        <div class=\"icons-wrapper\">\r\n          <ng-container *ngIf=\"user.webexUUID && !user.isHybrid\">\r\n            <span class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/webex.svg\"\r\n                [matTooltip]=\"'Webex Calling'\"\r\n                matTooltipPosition=\"right\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n            /></span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!user.webexUUID && !user.isHybrid\">\r\n            <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/local_24.svg\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n                [matTooltip]=\"'UCM'\"\r\n                matTooltipPosition=\"right\"\r\n            /></span>\r\n            <span *ngIf=\"user.cucmId != ON_PREM_ID\" class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/di_cloud_24.svg\"\r\n                [matTooltip]=\"'Webex Calling DI'\"\r\n                matTooltipPosition=\"right\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n            /></span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"user.isHybrid\">\r\n            <span class=\"icon-wrapper\" [class.disabled]=\"user.status !== 'Active'\">\r\n              <img\r\n                src=\"assets/icons/webex.svg\"\r\n                [matTooltip]=\"'Webex Calling' + (user.status === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'webex'); $event.stopPropagation();\"\r\n                width=\"20\"\r\n                alt=\"\"/>\r\n            </span>\r\n            <span class=\"icon-wrapper\" [class.disabled]=\"user.partnerStatus !== 'Active'\"\r\n              *ngIf=\"user.cucmId != ON_PREM_ID\">\r\n              <img\r\n                src=\"assets/icons/di_cloud_24.svg\"\r\n                [matTooltip]=\"'Webex Calling DI' + (user.partnerStatus === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'di'); $event.stopPropagation();\"\r\n                width=\"20\"\r\n                alt=\"\"/>\r\n            </span>\r\n            <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n              [class.disabled]=\"user.partnerStatus !== 'Active'\"\r\n              ><img\r\n                src=\"assets/icons/local_24.svg\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n                [matTooltip]=\"'UCM' + (user.partnerStatus === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'ucm'); $event.stopPropagation();\"\r\n            /></span>\r\n          </ng-container>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"last-active-time\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Last active time\r\n          <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n        </span>\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ getTodayShortDate() }}\r\n      </td>\r\n      /\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: displayedColumns\"\r\n      [ngClass]=\"{\r\n        'disabled-user-row':\r\n          moveUserPending &&\r\n          moveInProgressUserId &&\r\n          moveInProgressUserId === row?.userid && !row?.isHybrid,\r\n        'inactive-user-row': row.status !== 'Active' && !row?.isHybrid,\r\n      }\"\r\n    ></tr>\r\n  </table>\r\n\r\n  <ng-container *ngIf=\"showPaginator\">\r\n    <app-pagination\r\n      [pagination]=\"usersSearchService.getPagination()\"\r\n      [showPageSizeOptions]=\"true\"\r\n      (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n      (pageEmitter)=\"pageEvent($event)\"\r\n    >\r\n    </app-pagination>\r\n  </ng-container>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n  *ngIf=\"showMoveUserWizard\"\r\n  [user]=\"moveUser\"\r\n  (done)=\"closeMoveUserWizard(true)\"\r\n  [customerId]=\"customerId\"\r\n  [host]=\"host\"\r\n  (runMoveUser)=\"runMoveUserToMT()\"\r\n  (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px;position:relative}::ng-deep app-notification{position:absolute;top:96px;right:24px;z-index:1000;width:360px;display:block}::ng-deep app-notification .notification-block{display:flex;flex-direction:column;gap:12px;width:100%;pointer-events:none}::ng-deep app-notification .notification{display:flex;align-items:center;gap:12px;padding:14px 16px;color:#111;border-radius:10px;border:1px solid rgba(17,17,17,.08);background:#ffffff;box-shadow:0 14px 32px #1118271f,0 2px 6px #11182714;width:100%;position:relative;pointer-events:auto}::ng-deep app-notification .notification.success{border-color:#10b98140}::ng-deep app-notification .notification.error{border-color:#ef444440}::ng-deep app-notification .notification-icons-block{width:32px;min-width:32px;display:flex;justify-content:center;align-items:center}::ng-deep app-notification .flex-box{display:flex;align-items:center;gap:12px;width:100%}::ng-deep app-notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;color:#111;word-break:break-word;line-height:1.5;flex:1}::ng-deep app-notification .notification-icon-close{height:24px}::ng-deep app-notification .close{position:absolute;top:8px;right:8px;width:28px;height:28px}::ng-deep app-notification .fa{font-size:18px}::ng-deep app-notification .notification.success .fa{color:#16a34a}::ng-deep app-notification .notification.error .fa{color:#dc2626}@media screen and (max-width: 600px){::ng-deep app-notification{right:12px;left:12px;width:auto}}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.icon-user-status.icon-user-status-hybrid{background-color:#639fff;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center;flex-shrink:0}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{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;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D  %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{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;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D  %0D  %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D    stroke%3D%22currentColor%22 %0D    stroke-width%3D%221.2%22 %0D    stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}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}:host .mat-progress-spinner circle,:host .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}.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-size:14px}.user-info-box h3{display:block;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:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table tr{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table tr.inactive-user-row{opacity:.35}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:absolute;margin:-15px -29px}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}.actions-cell .field-spinner{position:absolute;right:32px;top:50%;transform:translateY(-50%);margin:0}.user-provisioning-type{text-align:start}.user-provisioning-type .icons-wrapper{display:flex;align-items:center;gap:1rem}.user-provisioning-type .icon-wrapper{display:flex;align-items:center}.user-provisioning-type .icon-wrapper.disabled{opacity:.35}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i12$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["pagination", "showPageSizeOptions", "showRefreshButton", "lengthPending"], outputs: ["pageEmitter", "pageNumberChangeEmitter"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: MoveUserWizardComponent, selector: "app-move-user-wizard", inputs: ["user", "customerId", "host"], outputs: ["closeMoveUserWizard", "done", "runMoveUser"] }, { kind: "component", type: TableToolbarComponent, selector: "tk-users-table-toolbar", inputs: ["totalUsersCount", "searchValue", "selectedUserType"], outputs: ["searchChange", "searchByType", "addUser"] }, { kind: "component", type: NotificationsComponent, selector: "app-notification" }] });
+UsersListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UsersListComponent, selector: "app-users-list", inputs: { token: "token", customerId: "customerId", siteId: "siteId", host: "host" }, outputs: { openUser: "openUser", userMoved: "userMoved", switchToWizard: "switchToWizard", createUserRequested: "createUserRequested" }, ngImport: i0, template: "<tk-loader *ngIf=\"dataPending\" color=\"#000000\"></tk-loader>\r\n<app-notification></app-notification>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n  <tk-users-table-toolbar\r\n    [totalUsersCount]=\"totalUsersCount\"\r\n    [searchValue]=\"activeSearchToken\"\r\n    [selectedUserType]=\"activeUserType\"\r\n    [sites]=\"sites\"\r\n    [selectedSiteId]=\"activeSiteId\"\r\n    (searchChange)=\"searchUsers($event)\"\r\n    (searchByType)=\"searchByType($event)\"\r\n    (searchBySite)=\"searchBySite($event)\"\r\n    (addUser)=\"onCreateUserRequested()\"\r\n  ></tk-users-table-toolbar>\r\n  <table\r\n    class=\"webex-table\"\r\n    mat-table\r\n    *ngIf=\"users?.length\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n  >\r\n    <!-- <ng-container matColumnDef=\"user-icon\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n      </td>\r\n    </ng-container> -->\r\n\r\n    <ng-container matColumnDef=\"name\">\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        class=\"webex-table-th\"\r\n        style=\"padding-left: 60px\"\r\n      >\r\n        Display name\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        <div class=\"display-name-wrapper\">\r\n          <span\r\n            class=\"user-name-text\"\r\n            [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n          >\r\n            {{ user.firstName }} {{ user.lastName }}\r\n          </span>\r\n          <span class=\"icon-webex-box\"\r\n            ><span class=\"icon-webex icon-webex-user\"></span\r\n          ></span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"email\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ user.email }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"status\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Status\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n        </span>\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n        [matTooltip]=\"\r\n          user.status !== 'Active' && user.webexUUID && !user.isHybrid\r\n            ? 'Pending cutover to MT. Please contact your administrator for details.'\r\n            : ''\r\n        \"\r\n        matTooltipPosition=\"above\"\r\n      >\r\n        <span\r\n          class=\"icon-user-status\"\r\n          [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active', 'icon-user-status-hybrid': user.isHybrid }\"\r\n        ></span\r\n        >{{ user.isHybrid ? 'Hybrid' : user.status }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        class=\"webex-table-th\"\r\n        style=\"padding-left: 24px; padding-top: 4px\"\r\n      >\r\n        <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n      </th>\r\n      <td\r\n        class=\"user-site actions-cell\"\r\n        mat-cell\r\n        *matCellDef=\"let user; let i = index\"\r\n        style=\"position: relative\"\r\n      >\r\n        <mat-progress-spinner\r\n          class=\"field-spinner\"\r\n          [diameter]=\"30\"\r\n          strokeWidth=\"3\"\r\n          mode=\"indeterminate\"\r\n          *ngIf=\"\r\n            user.status === 'In Progress' ||\r\n            user.status === 'Pending Activation' ||\r\n            user.status === 'Pending Deactivation'\r\n          \"\r\n        ></mat-progress-spinner>\r\n        <button\r\n          *ngIf=\"\r\n            !(\r\n              user.status === 'In Progress' ||\r\n              user.status === 'Pending Activation' ||\r\n              user.status === 'Pending Deactivation'\r\n            ) &&\r\n            !(\r\n              moveUserPending &&\r\n              moveInProgressUserId &&\r\n              moveInProgressUserId === user?.userid\r\n            )\r\n          \"\r\n          class=\"button-action-dot\"\r\n          mat-icon-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n        >\r\n          <div class=\"icon-actions-dots\">\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n          </div>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n          <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n          <button\r\n            *ngIf=\"!user.webexUUID && user.cucmId == ON_PREM_ID\"\r\n            mat-menu-item\r\n            [disabled]=\"true\"\r\n            matTooltip=\"Coming soon\"\r\n            matTooltipPosition=\"right\"\r\n          >\r\n            Enable AI Transcribe\r\n          </button>\r\n          <button\r\n            [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n            *ngIf=\"!user.isMigrated && !user.isHybrid\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n          >\r\n<!--   for TU-4960         !user.isReadyToUpgrade ||-->\r\n            License with Cloud Intelligence\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.partnerStatus !== 'Active'\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n          >\r\n<!--   for TU-4960         !user.isReadyToUpgrade ||-->\r\n            License with Cloud Intelligence\r\n          </button>\r\n          <button\r\n            [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n            *ngIf=\"!user.isMigrated && !user.isHybrid\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n          >\r\n            Migrate User to Webex Calling\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.partnerStatus !== 'Active'\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n          >\r\n            Migrate User to Webex Calling\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isMigrated\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n          >\r\n            Revert User to UCM/DI\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            *ngIf=\"!user.isHybrid\"\r\n            [disabled]=\"!isValidWebexUuid(user) || user.status !== 'Inactive'\"\r\n            (click)=\"onFirmwareUpgradeClicked(user)\"\r\n          >\r\n            Enable Webex Calling\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.status !== 'Inactive'\"\r\n            (click)=\"onFirmwareUpgradeClicked(user)\"\r\n          >\r\n            Enable Webex Calling\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            [disabled]=\"!user.webexUUID || user.status !== 'Active'\"\r\n            (click)=\"onRevertClicked(user)\"\r\n          >\r\n            Migrate User to UCM\r\n          </button>\r\n          <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"role\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        Admin roles\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ user.roleName || \"-\" }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"source\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        Provisioning Type\r\n      </th>\r\n      <td\r\n        class=\"user-provisioning-type\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        <div class=\"icons-wrapper\">\r\n          <ng-container *ngIf=\"user.webexUUID && !user.isHybrid\">\r\n            <span class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/webex.svg\"\r\n                [matTooltip]=\"'Webex Calling'\"\r\n                matTooltipPosition=\"right\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n            /></span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!user.webexUUID && !user.isHybrid\">\r\n            <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/local_24.svg\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n                [matTooltip]=\"'UCM'\"\r\n                matTooltipPosition=\"right\"\r\n            /></span>\r\n            <span *ngIf=\"user.cucmId != ON_PREM_ID\" class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/di_cloud_24.svg\"\r\n                [matTooltip]=\"'Webex Calling DI'\"\r\n                matTooltipPosition=\"right\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n            /></span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"user.isHybrid\">\r\n            <span class=\"icon-wrapper\" [class.disabled]=\"user.status !== 'Active'\">\r\n              <img\r\n                src=\"assets/icons/webex.svg\"\r\n                [matTooltip]=\"'Webex Calling' + (user.status === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'webex'); $event.stopPropagation();\"\r\n                width=\"20\"\r\n                alt=\"\"/>\r\n            </span>\r\n            <span class=\"icon-wrapper\" [class.disabled]=\"user.partnerStatus !== 'Active'\"\r\n              *ngIf=\"user.cucmId != ON_PREM_ID\">\r\n              <img\r\n                src=\"assets/icons/di_cloud_24.svg\"\r\n                [matTooltip]=\"'Webex Calling DI' + (user.partnerStatus === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'di'); $event.stopPropagation();\"\r\n                width=\"20\"\r\n                alt=\"\"/>\r\n            </span>\r\n            <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n              [class.disabled]=\"user.partnerStatus !== 'Active'\"\r\n              ><img\r\n                src=\"assets/icons/local_24.svg\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n                [matTooltip]=\"'UCM' + (user.partnerStatus === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'ucm'); $event.stopPropagation();\"\r\n            /></span>\r\n          </ng-container>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"last-active-time\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Last active time\r\n          <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n        </span>\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ getTodayShortDate() }}\r\n      </td>\r\n      /\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: displayedColumns\"\r\n      [ngClass]=\"{\r\n        'disabled-user-row':\r\n          moveUserPending &&\r\n          moveInProgressUserId &&\r\n          moveInProgressUserId === row?.userid && !row?.isHybrid,\r\n        'inactive-user-row': row.status !== 'Active' && !row?.isHybrid,\r\n      }\"\r\n    ></tr>\r\n  </table>\r\n\r\n  <ng-container *ngIf=\"showPaginator\">\r\n    <app-pagination\r\n      [pagination]=\"usersSearchService.getPagination()\"\r\n      [showPageSizeOptions]=\"true\"\r\n      (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n      (pageEmitter)=\"pageEvent($event)\"\r\n    >\r\n    </app-pagination>\r\n  </ng-container>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n  *ngIf=\"showMoveUserWizard\"\r\n  [user]=\"moveUser\"\r\n  (done)=\"closeMoveUserWizard(true)\"\r\n  [customerId]=\"customerId\"\r\n  [host]=\"host\"\r\n  (runMoveUser)=\"runMoveUserToMT()\"\r\n  (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px;position:relative}::ng-deep app-notification{position:absolute;top:96px;right:24px;z-index:1000;width:360px;display:block}::ng-deep app-notification .notification-block{display:flex;flex-direction:column;gap:12px;width:100%;pointer-events:none}::ng-deep app-notification .notification{display:flex;align-items:center;gap:12px;padding:14px 16px;color:#111;border-radius:10px;border:1px solid rgba(17,17,17,.08);background:#ffffff;box-shadow:0 14px 32px #1118271f,0 2px 6px #11182714;width:100%;position:relative;pointer-events:auto}::ng-deep app-notification .notification.success{border-color:#10b98140}::ng-deep app-notification .notification.error{border-color:#ef444440}::ng-deep app-notification .notification-icons-block{width:32px;min-width:32px;display:flex;justify-content:center;align-items:center}::ng-deep app-notification .flex-box{display:flex;align-items:center;gap:12px;width:100%}::ng-deep app-notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;color:#111;word-break:break-word;line-height:1.5;flex:1}::ng-deep app-notification .notification-icon-close{height:24px}::ng-deep app-notification .close{position:absolute;top:8px;right:8px;width:28px;height:28px}::ng-deep app-notification .fa{font-size:18px}::ng-deep app-notification .notification.success .fa{color:#16a34a}::ng-deep app-notification .notification.error .fa{color:#dc2626}@media screen and (max-width: 600px){::ng-deep app-notification{right:12px;left:12px;width:auto}}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.icon-user-status.icon-user-status-hybrid{background-color:#639fff;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center;flex-shrink:0}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{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;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D  %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{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;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D  %0D  %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D    stroke%3D%22currentColor%22 %0D    stroke-width%3D%221.2%22 %0D    stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}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}:host .mat-progress-spinner circle,:host .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}.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-size:14px}.user-info-box h3{display:block;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:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table tr{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table tr.inactive-user-row{opacity:.35}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:absolute;margin:-15px -29px}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}.actions-cell .field-spinner{position:absolute;right:32px;top:50%;transform:translateY(-50%);margin:0}.user-provisioning-type{text-align:start}.user-provisioning-type .icons-wrapper{display:flex;align-items:center;gap:1rem}.user-provisioning-type .icon-wrapper{display:flex;align-items:center}.user-provisioning-type .icon-wrapper.disabled{opacity:.35}\n"], dependencies: [{ kind: "component", type: i6$2.TkLoaderComponent, selector: "tk-loader", inputs: ["diameter", "strokeWidth", "backdrop", "color"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i12$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i13$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i13$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["pagination", "showPageSizeOptions", "showRefreshButton", "lengthPending"], outputs: ["pageEmitter", "pageNumberChangeEmitter"] }, { kind: "component", type: MoveUserWizardComponent, selector: "app-move-user-wizard", inputs: ["user", "customerId", "host"], outputs: ["closeMoveUserWizard", "done", "runMoveUser"] }, { kind: "component", type: TableToolbarComponent, selector: "tk-users-table-toolbar", inputs: ["totalUsersCount", "searchValue", "selectedUserType", "sites", "selectedSiteId"], outputs: ["searchChange", "searchByType", "searchBySite", "addUser"] }, { kind: "component", type: NotificationsComponent, selector: "app-notification" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-users-list', template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<app-notification></app-notification>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n  <tk-users-table-toolbar\r\n    [totalUsersCount]=\"totalUsersCount\"\r\n    [searchValue]=\"activeSearchToken\"\r\n    [selectedUserType]=\"activeUserType\"\r\n    (searchChange)=\"searchUsers($event)\"\r\n    (searchByType)=\"searchByType($event)\"\r\n    (addUser)=\"onCreateUserRequested()\"\r\n  ></tk-users-table-toolbar>\r\n  <table\r\n    class=\"webex-table\"\r\n    mat-table\r\n    *ngIf=\"users?.length\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n  >\r\n    <!-- <ng-container matColumnDef=\"user-icon\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n      </td>\r\n    </ng-container> -->\r\n\r\n    <ng-container matColumnDef=\"name\">\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        class=\"webex-table-th\"\r\n        style=\"padding-left: 60px\"\r\n      >\r\n        Display name\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        <div class=\"display-name-wrapper\">\r\n          <span\r\n            class=\"user-name-text\"\r\n            [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n          >\r\n            {{ user.firstName }} {{ user.lastName }}\r\n          </span>\r\n          <span class=\"icon-webex-box\"\r\n            ><span class=\"icon-webex icon-webex-user\"></span\r\n          ></span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"email\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ user.email }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"status\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Status\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n        </span>\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n        [matTooltip]=\"\r\n          user.status !== 'Active' && user.webexUUID && !user.isHybrid\r\n            ? 'Pending cutover to MT. Please contact your administrator for details.'\r\n            : ''\r\n        \"\r\n        matTooltipPosition=\"above\"\r\n      >\r\n        <span\r\n          class=\"icon-user-status\"\r\n          [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active', 'icon-user-status-hybrid': user.isHybrid }\"\r\n        ></span\r\n        >{{ user.isHybrid ? 'Hybrid' : user.status }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        class=\"webex-table-th\"\r\n        style=\"padding-left: 24px; padding-top: 4px\"\r\n      >\r\n        <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n      </th>\r\n      <td\r\n        class=\"user-site actions-cell\"\r\n        mat-cell\r\n        *matCellDef=\"let user; let i = index\"\r\n        style=\"position: relative\"\r\n      >\r\n        <mat-progress-spinner\r\n          class=\"field-spinner\"\r\n          [diameter]=\"30\"\r\n          strokeWidth=\"3\"\r\n          mode=\"indeterminate\"\r\n          *ngIf=\"\r\n            user.status === 'In Progress' ||\r\n            user.status === 'Pending Activation' ||\r\n            user.status === 'Pending Deactivation'\r\n          \"\r\n        ></mat-progress-spinner>\r\n        <button\r\n          *ngIf=\"\r\n            !(\r\n              user.status === 'In Progress' ||\r\n              user.status === 'Pending Activation' ||\r\n              user.status === 'Pending Deactivation'\r\n            ) &&\r\n            !(\r\n              moveUserPending &&\r\n              moveInProgressUserId &&\r\n              moveInProgressUserId === user?.userid\r\n            )\r\n          \"\r\n          class=\"button-action-dot\"\r\n          mat-icon-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n        >\r\n          <div class=\"icon-actions-dots\">\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n          </div>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n          <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n          <button\r\n            *ngIf=\"!user.webexUUID && user.cucmId == ON_PREM_ID\"\r\n            mat-menu-item\r\n            [disabled]=\"true\"\r\n            matTooltip=\"Coming soon\"\r\n            matTooltipPosition=\"right\"\r\n          >\r\n            Enable AI Transcribe\r\n          </button>\r\n          <button\r\n            [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n            *ngIf=\"!user.isMigrated && !user.isHybrid\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n          >\r\n<!--   for TU-4960         !user.isReadyToUpgrade ||-->\r\n            License with Cloud Intelligence\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.partnerStatus !== 'Active'\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n          >\r\n<!--   for TU-4960         !user.isReadyToUpgrade ||-->\r\n            License with Cloud Intelligence\r\n          </button>\r\n          <button\r\n            [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n            *ngIf=\"!user.isMigrated && !user.isHybrid\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n          >\r\n            Migrate User to Webex Calling\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.partnerStatus !== 'Active'\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n          >\r\n            Migrate User to Webex Calling\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isMigrated\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n          >\r\n            Revert User to UCM/DI\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            *ngIf=\"!user.isHybrid\"\r\n            [disabled]=\"!isValidWebexUuid(user) || user.status !== 'Inactive'\"\r\n            (click)=\"onFirmwareUpgradeClicked(user)\"\r\n          >\r\n            Enable Webex Calling\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.status !== 'Inactive'\"\r\n            (click)=\"onFirmwareUpgradeClicked(user)\"\r\n          >\r\n            Enable Webex Calling\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            [disabled]=\"!user.webexUUID || user.status !== 'Active'\"\r\n            (click)=\"onRevertClicked(user)\"\r\n          >\r\n            Migrate User to UCM\r\n          </button>\r\n          <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"role\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        Admin roles\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ user.roleName || \"-\" }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"source\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        Provisioning Type\r\n      </th>\r\n      <td\r\n        class=\"user-provisioning-type\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        <div class=\"icons-wrapper\">\r\n          <ng-container *ngIf=\"user.webexUUID && !user.isHybrid\">\r\n            <span class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/webex.svg\"\r\n                [matTooltip]=\"'Webex Calling'\"\r\n                matTooltipPosition=\"right\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n            /></span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!user.webexUUID && !user.isHybrid\">\r\n            <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/local_24.svg\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n                [matTooltip]=\"'UCM'\"\r\n                matTooltipPosition=\"right\"\r\n            /></span>\r\n            <span *ngIf=\"user.cucmId != ON_PREM_ID\" class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/di_cloud_24.svg\"\r\n                [matTooltip]=\"'Webex Calling DI'\"\r\n                matTooltipPosition=\"right\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n            /></span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"user.isHybrid\">\r\n            <span class=\"icon-wrapper\" [class.disabled]=\"user.status !== 'Active'\">\r\n              <img\r\n                src=\"assets/icons/webex.svg\"\r\n                [matTooltip]=\"'Webex Calling' + (user.status === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'webex'); $event.stopPropagation();\"\r\n                width=\"20\"\r\n                alt=\"\"/>\r\n            </span>\r\n            <span class=\"icon-wrapper\" [class.disabled]=\"user.partnerStatus !== 'Active'\"\r\n              *ngIf=\"user.cucmId != ON_PREM_ID\">\r\n              <img\r\n                src=\"assets/icons/di_cloud_24.svg\"\r\n                [matTooltip]=\"'Webex Calling DI' + (user.partnerStatus === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'di'); $event.stopPropagation();\"\r\n                width=\"20\"\r\n                alt=\"\"/>\r\n            </span>\r\n            <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n              [class.disabled]=\"user.partnerStatus !== 'Active'\"\r\n              ><img\r\n                src=\"assets/icons/local_24.svg\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n                [matTooltip]=\"'UCM' + (user.partnerStatus === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'ucm'); $event.stopPropagation();\"\r\n            /></span>\r\n          </ng-container>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"last-active-time\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Last active time\r\n          <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n        </span>\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ getTodayShortDate() }}\r\n      </td>\r\n      /\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: displayedColumns\"\r\n      [ngClass]=\"{\r\n        'disabled-user-row':\r\n          moveUserPending &&\r\n          moveInProgressUserId &&\r\n          moveInProgressUserId === row?.userid && !row?.isHybrid,\r\n        'inactive-user-row': row.status !== 'Active' && !row?.isHybrid,\r\n      }\"\r\n    ></tr>\r\n  </table>\r\n\r\n  <ng-container *ngIf=\"showPaginator\">\r\n    <app-pagination\r\n      [pagination]=\"usersSearchService.getPagination()\"\r\n      [showPageSizeOptions]=\"true\"\r\n      (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n      (pageEmitter)=\"pageEvent($event)\"\r\n    >\r\n    </app-pagination>\r\n  </ng-container>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n  *ngIf=\"showMoveUserWizard\"\r\n  [user]=\"moveUser\"\r\n  (done)=\"closeMoveUserWizard(true)\"\r\n  [customerId]=\"customerId\"\r\n  [host]=\"host\"\r\n  (runMoveUser)=\"runMoveUserToMT()\"\r\n  (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px;position:relative}::ng-deep app-notification{position:absolute;top:96px;right:24px;z-index:1000;width:360px;display:block}::ng-deep app-notification .notification-block{display:flex;flex-direction:column;gap:12px;width:100%;pointer-events:none}::ng-deep app-notification .notification{display:flex;align-items:center;gap:12px;padding:14px 16px;color:#111;border-radius:10px;border:1px solid rgba(17,17,17,.08);background:#ffffff;box-shadow:0 14px 32px #1118271f,0 2px 6px #11182714;width:100%;position:relative;pointer-events:auto}::ng-deep app-notification .notification.success{border-color:#10b98140}::ng-deep app-notification .notification.error{border-color:#ef444440}::ng-deep app-notification .notification-icons-block{width:32px;min-width:32px;display:flex;justify-content:center;align-items:center}::ng-deep app-notification .flex-box{display:flex;align-items:center;gap:12px;width:100%}::ng-deep app-notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;color:#111;word-break:break-word;line-height:1.5;flex:1}::ng-deep app-notification .notification-icon-close{height:24px}::ng-deep app-notification .close{position:absolute;top:8px;right:8px;width:28px;height:28px}::ng-deep app-notification .fa{font-size:18px}::ng-deep app-notification .notification.success .fa{color:#16a34a}::ng-deep app-notification .notification.error .fa{color:#dc2626}@media screen and (max-width: 600px){::ng-deep app-notification{right:12px;left:12px;width:auto}}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.icon-user-status.icon-user-status-hybrid{background-color:#639fff;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center;flex-shrink:0}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{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;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D  %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{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;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D  %0D  %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D    stroke%3D%22currentColor%22 %0D    stroke-width%3D%221.2%22 %0D    stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}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}:host .mat-progress-spinner circle,:host .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}.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-size:14px}.user-info-box h3{display:block;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:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table tr{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table tr.inactive-user-row{opacity:.35}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:absolute;margin:-15px -29px}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}.actions-cell .field-spinner{position:absolute;right:32px;top:50%;transform:translateY(-50%);margin:0}.user-provisioning-type{text-align:start}.user-provisioning-type .icons-wrapper{display:flex;align-items:center;gap:1rem}.user-provisioning-type .icon-wrapper{display:flex;align-items:center}.user-provisioning-type .icon-wrapper.disabled{opacity:.35}\n"] }]
+            args: [{ selector: 'app-users-list', template: "<tk-loader *ngIf=\"dataPending\" color=\"#000000\"></tk-loader>\r\n<app-notification></app-notification>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n  <tk-users-table-toolbar\r\n    [totalUsersCount]=\"totalUsersCount\"\r\n    [searchValue]=\"activeSearchToken\"\r\n    [selectedUserType]=\"activeUserType\"\r\n    [sites]=\"sites\"\r\n    [selectedSiteId]=\"activeSiteId\"\r\n    (searchChange)=\"searchUsers($event)\"\r\n    (searchByType)=\"searchByType($event)\"\r\n    (searchBySite)=\"searchBySite($event)\"\r\n    (addUser)=\"onCreateUserRequested()\"\r\n  ></tk-users-table-toolbar>\r\n  <table\r\n    class=\"webex-table\"\r\n    mat-table\r\n    *ngIf=\"users?.length\"\r\n    #table\r\n    [dataSource]=\"dataSource\"\r\n  >\r\n    <!-- <ng-container matColumnDef=\"user-icon\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n      </td>\r\n    </ng-container> -->\r\n\r\n    <ng-container matColumnDef=\"name\">\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        class=\"webex-table-th\"\r\n        style=\"padding-left: 60px\"\r\n      >\r\n        Display name\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        <div class=\"display-name-wrapper\">\r\n          <span\r\n            class=\"user-name-text\"\r\n            [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n          >\r\n            {{ user.firstName }} {{ user.lastName }}\r\n          </span>\r\n          <span class=\"icon-webex-box\"\r\n            ><span class=\"icon-webex icon-webex-user\"></span\r\n          ></span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"email\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ user.email }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"status\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Status\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n        </span>\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n        [matTooltip]=\"\r\n          user.status !== 'Active' && user.webexUUID && !user.isHybrid\r\n            ? 'Pending cutover to MT. Please contact your administrator for details.'\r\n            : ''\r\n        \"\r\n        matTooltipPosition=\"above\"\r\n      >\r\n        <span\r\n          class=\"icon-user-status\"\r\n          [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active', 'icon-user-status-hybrid': user.isHybrid }\"\r\n        ></span\r\n        >{{ user.isHybrid ? 'Hybrid' : user.status }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        class=\"webex-table-th\"\r\n        style=\"padding-left: 24px; padding-top: 4px\"\r\n      >\r\n        <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n      </th>\r\n      <td\r\n        class=\"user-site actions-cell\"\r\n        mat-cell\r\n        *matCellDef=\"let user; let i = index\"\r\n        style=\"position: relative\"\r\n      >\r\n        <mat-progress-spinner\r\n          class=\"field-spinner\"\r\n          [diameter]=\"30\"\r\n          strokeWidth=\"3\"\r\n          mode=\"indeterminate\"\r\n          *ngIf=\"\r\n            user.status === 'In Progress' ||\r\n            user.status === 'Pending Activation' ||\r\n            user.status === 'Pending Deactivation'\r\n          \"\r\n        ></mat-progress-spinner>\r\n        <button\r\n          *ngIf=\"\r\n            !(\r\n              user.status === 'In Progress' ||\r\n              user.status === 'Pending Activation' ||\r\n              user.status === 'Pending Deactivation'\r\n            ) &&\r\n            !(\r\n              moveUserPending &&\r\n              moveInProgressUserId &&\r\n              moveInProgressUserId === user?.userid\r\n            )\r\n          \"\r\n          class=\"button-action-dot\"\r\n          mat-icon-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n        >\r\n          <div class=\"icon-actions-dots\">\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n          </div>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n          <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n          <button\r\n            *ngIf=\"!user.webexUUID && user.cucmId == ON_PREM_ID\"\r\n            mat-menu-item\r\n            [disabled]=\"true\"\r\n            matTooltip=\"Coming soon\"\r\n            matTooltipPosition=\"right\"\r\n          >\r\n            Enable AI Transcribe\r\n          </button>\r\n          <button\r\n            [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n            *ngIf=\"!user.isMigrated && !user.isHybrid\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n          >\r\n<!--   for TU-4960         !user.isReadyToUpgrade ||-->\r\n            License with Cloud Intelligence\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.partnerStatus !== 'Active'\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n          >\r\n<!--   for TU-4960         !user.isReadyToUpgrade ||-->\r\n            License with Cloud Intelligence\r\n          </button>\r\n          <button\r\n            [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n            *ngIf=\"!user.isMigrated && !user.isHybrid\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n          >\r\n            Migrate User to Webex Calling\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.partnerStatus !== 'Active'\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n          >\r\n            Migrate User to Webex Calling\r\n          </button>\r\n          <button\r\n            *ngIf=\"user.isMigrated\"\r\n            mat-menu-item\r\n            (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n          >\r\n            Revert User to UCM/DI\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            *ngIf=\"!user.isHybrid\"\r\n            [disabled]=\"!isValidWebexUuid(user) || user.status !== 'Inactive'\"\r\n            (click)=\"onFirmwareUpgradeClicked(user)\"\r\n          >\r\n            Enable Webex Calling\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            *ngIf=\"user.isHybrid\"\r\n            [disabled]=\"user.status !== 'Inactive'\"\r\n            (click)=\"onFirmwareUpgradeClicked(user)\"\r\n          >\r\n            Enable Webex Calling\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            [disabled]=\"!user.webexUUID || user.status !== 'Active'\"\r\n            (click)=\"onRevertClicked(user)\"\r\n          >\r\n            Migrate User to UCM\r\n          </button>\r\n          <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"role\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        Admin roles\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ user.roleName || \"-\" }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"source\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        Provisioning Type\r\n      </th>\r\n      <td\r\n        class=\"user-provisioning-type\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        <div class=\"icons-wrapper\">\r\n          <ng-container *ngIf=\"user.webexUUID && !user.isHybrid\">\r\n            <span class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/webex.svg\"\r\n                [matTooltip]=\"'Webex Calling'\"\r\n                matTooltipPosition=\"right\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n            /></span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!user.webexUUID && !user.isHybrid\">\r\n            <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/local_24.svg\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n                [matTooltip]=\"'UCM'\"\r\n                matTooltipPosition=\"right\"\r\n            /></span>\r\n            <span *ngIf=\"user.cucmId != ON_PREM_ID\" class=\"icon-wrapper\"\r\n              ><img\r\n                src=\"assets/icons/di_cloud_24.svg\"\r\n                [matTooltip]=\"'Webex Calling DI'\"\r\n                matTooltipPosition=\"right\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n            /></span>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"user.isHybrid\">\r\n            <span class=\"icon-wrapper\" [class.disabled]=\"user.status !== 'Active'\">\r\n              <img\r\n                src=\"assets/icons/webex.svg\"\r\n                [matTooltip]=\"'Webex Calling' + (user.status === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'webex'); $event.stopPropagation();\"\r\n                width=\"20\"\r\n                alt=\"\"/>\r\n            </span>\r\n            <span class=\"icon-wrapper\" [class.disabled]=\"user.partnerStatus !== 'Active'\"\r\n              *ngIf=\"user.cucmId != ON_PREM_ID\">\r\n              <img\r\n                src=\"assets/icons/di_cloud_24.svg\"\r\n                [matTooltip]=\"'Webex Calling DI' + (user.partnerStatus === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'di'); $event.stopPropagation();\"\r\n                width=\"20\"\r\n                alt=\"\"/>\r\n            </span>\r\n            <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n              [class.disabled]=\"user.partnerStatus !== 'Active'\"\r\n              ><img\r\n                src=\"assets/icons/local_24.svg\"\r\n                width=\"20\"\r\n                alt=\"\"\r\n                [matTooltip]=\"'UCM' + (user.partnerStatus === 'Active' ? '' : ' (inactive)')\"\r\n                matTooltipPosition=\"right\"\r\n                (click)=\"onUserClick(user, 'ucm'); $event.stopPropagation();\"\r\n            /></span>\r\n          </ng-container>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"last-active-time\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Last active time\r\n          <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\" />\r\n        </span>\r\n      </th>\r\n      <td\r\n        class=\"user-site\"\r\n        mat-cell\r\n        *matCellDef=\"let user\"\r\n        [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n        (click)=\"onUserClick(user)\"\r\n      >\r\n        {{ getTodayShortDate() }}\r\n      </td>\r\n      /\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: displayedColumns\"\r\n      [ngClass]=\"{\r\n        'disabled-user-row':\r\n          moveUserPending &&\r\n          moveInProgressUserId &&\r\n          moveInProgressUserId === row?.userid && !row?.isHybrid,\r\n        'inactive-user-row': row.status !== 'Active' && !row?.isHybrid,\r\n      }\"\r\n    ></tr>\r\n  </table>\r\n\r\n  <ng-container *ngIf=\"showPaginator\">\r\n    <app-pagination\r\n      [pagination]=\"usersSearchService.getPagination()\"\r\n      [showPageSizeOptions]=\"true\"\r\n      (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n      (pageEmitter)=\"pageEvent($event)\"\r\n    >\r\n    </app-pagination>\r\n  </ng-container>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n  *ngIf=\"showMoveUserWizard\"\r\n  [user]=\"moveUser\"\r\n  (done)=\"closeMoveUserWizard(true)\"\r\n  [customerId]=\"customerId\"\r\n  [host]=\"host\"\r\n  (runMoveUser)=\"runMoveUserToMT()\"\r\n  (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px;position:relative}::ng-deep app-notification{position:absolute;top:96px;right:24px;z-index:1000;width:360px;display:block}::ng-deep app-notification .notification-block{display:flex;flex-direction:column;gap:12px;width:100%;pointer-events:none}::ng-deep app-notification .notification{display:flex;align-items:center;gap:12px;padding:14px 16px;color:#111;border-radius:10px;border:1px solid rgba(17,17,17,.08);background:#ffffff;box-shadow:0 14px 32px #1118271f,0 2px 6px #11182714;width:100%;position:relative;pointer-events:auto}::ng-deep app-notification .notification.success{border-color:#10b98140}::ng-deep app-notification .notification.error{border-color:#ef444440}::ng-deep app-notification .notification-icons-block{width:32px;min-width:32px;display:flex;justify-content:center;align-items:center}::ng-deep app-notification .flex-box{display:flex;align-items:center;gap:12px;width:100%}::ng-deep app-notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;color:#111;word-break:break-word;line-height:1.5;flex:1}::ng-deep app-notification .notification-icon-close{height:24px}::ng-deep app-notification .close{position:absolute;top:8px;right:8px;width:28px;height:28px}::ng-deep app-notification .fa{font-size:18px}::ng-deep app-notification .notification.success .fa{color:#16a34a}::ng-deep app-notification .notification.error .fa{color:#dc2626}@media screen and (max-width: 600px){::ng-deep app-notification{right:12px;left:12px;width:auto}}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.icon-user-status.icon-user-status-hybrid{background-color:#639fff;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center;flex-shrink:0}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{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;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D  %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{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;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D  %0D  %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D    stroke%3D%22currentColor%22 %0D    stroke-width%3D%221.2%22 %0D    stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}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}:host .mat-progress-spinner circle,:host .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}.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-size:14px}.user-info-box h3{display:block;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:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table tr{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table tr.inactive-user-row{opacity:.35}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:absolute;margin:-15px -29px}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}.actions-cell .field-spinner{position:absolute;right:32px;top:50%;transform:translateY(-50%);margin:0}.user-provisioning-type{text-align:start}.user-provisioning-type .icons-wrapper{display:flex;align-items:center;gap:1rem}.user-provisioning-type .icon-wrapper{display:flex;align-items:center}.user-provisioning-type .icon-wrapper.disabled{opacity:.35}\n"] }]
         }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }, { type: ApiWebexService }, { type: NotificationService }, { type: UsersSearchService }, { type: i1.MatDialog }]; }, propDecorators: { token: [{
                 type: Input
             }], customerId: [{
@@ -2744,14 +2806,14 @@ class UsersListModule {
 UsersListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 UsersListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UsersListModule, declarations: [UsersListComponent,
         PaginationComponent,
-        AppLoaderComponent,
         MoveUserWizardComponent,
         MoveUserStepperComponent,
         UserListConfirmDialogComponent,
         DevicesMoveUserWizardTabComponent,
         DeviceMoveUserWizardComponent,
         TableToolbarComponent,
-        NotificationsComponent], imports: [BrowserModule,
+        NotificationsComponent], imports: [TkLoaderComponent,
+        BrowserModule,
         FormsModule,
         ReactiveFormsModule,
         HttpClientModule,
@@ -2767,7 +2829,8 @@ UsersListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         DnsService,
         SiteSettingsService,
         MoveUserService
-    ], imports: [BrowserModule,
+    ], imports: [TkLoaderComponent,
+        BrowserModule,
         FormsModule,
         ReactiveFormsModule,
         HttpClientModule,
@@ -2778,7 +2841,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     declarations: [
                         UsersListComponent,
                         PaginationComponent,
-                        AppLoaderComponent,
                         MoveUserWizardComponent,
                         MoveUserStepperComponent,
                         UserListConfirmDialogComponent,
@@ -2788,6 +2850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         NotificationsComponent
                     ],
                     imports: [
+                        TkLoaderComponent,
                         BrowserModule,
                         FormsModule,
                         ReactiveFormsModule,