@tuki-io/tuki-widgets 0.0.28 → 0.0.30

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

@@ -0,0 +1,1512 @@
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, Inject, Injectable, EventEmitter, Input, Output, NgModule } from '@angular/core';
+import * as i10 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 { of, forkJoin, Subject, BehaviorSubject, Observable } from 'rxjs';
+import * as i3 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 i4$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i11$1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i4 from '@angular/material/core';
+import { MatNativeDateModule } from '@angular/material/core';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i6 from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as Big from 'big.js';
+import * as i6$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i9 from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
+import * as i11 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import { BrowserModule } from '@angular/platform-browser';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTreeModule } from '@angular/material/tree';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+
+class UserListConfirmDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.confirmButtonText = 'OK';
+        this.message = '';
+        this.title = '';
+    }
+    ngOnInit() {
+        this.confirmButtonText = this.data.confirmButtonText || '';
+        this.message = this.data.message || '';
+        this.title = this.data.title || '';
+    }
+    onClose(val) {
+        this.dialogRef.close(val);
+    }
+}
+UserListConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserListConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+UserListConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserListConfirmDialogComponent, selector: "app-info-dialog", ngImport: i0, template: "<div id=\"info-dialog\" class=\"app-dialog\" aria-labelledby=\"info-dialog-label\" role=\"dialog\">\r\n  <h3 *ngIf=\"title\" class=\"app-dialog-title\">{{title}}</h3>\r\n  <div mat-dialog-content *ngIf=\"message\" class=\"app-dialog-content\">\r\n    <div [innerHTML]=\"message\"></div>\r\n  </div>\r\n  <div mat-dialog-actions class=\"flex-gap-container\">\r\n    <button class=\"app-dialog-button app-dialog-cancel-button\" (click)=\"onClose(false)\">\r\n      Cancel\r\n    </button>\r\n    <button class=\"app-dialog-button app-dialog-confirm-button\" (click)=\"onClose(true)\">\r\n      {{confirmButtonText}}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";#info-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative}#info-dialog .fa{font-size:35px;margin:0 auto 20px;display:block;text-align:center;color:#009fdb;cursor:default}.scroll-content{overflow-y:auto;margin:auto;max-height:150px;width:100%}.app-dialog{font-family:Inter,Inter,sans-serif}.app-dialog .app-dialog-title{text-align:center;font-weight:600;font-size:16px;font-family:Inter,Inter,sans-serif;margin:0 0 24px}.app-dialog .flex-gap-container{gap:16px;position:absolute;right:0;bottom:0;gap:15px;display:flex}.app-dialog .app-dialog-content{color:#000000b3;font-size:14px}.app-dialog-button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Inter,sans-serif;cursor:pointer}.app-dialog-cancel-button{border:1px solid rgba(0,0,0,.5);color:#000}.app-dialog-confirm-button{background:#F23933;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserListConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-info-dialog', encapsulation: ViewEncapsulation.None, template: "<div id=\"info-dialog\" class=\"app-dialog\" aria-labelledby=\"info-dialog-label\" role=\"dialog\">\r\n  <h3 *ngIf=\"title\" class=\"app-dialog-title\">{{title}}</h3>\r\n  <div mat-dialog-content *ngIf=\"message\" class=\"app-dialog-content\">\r\n    <div [innerHTML]=\"message\"></div>\r\n  </div>\r\n  <div mat-dialog-actions class=\"flex-gap-container\">\r\n    <button class=\"app-dialog-button app-dialog-cancel-button\" (click)=\"onClose(false)\">\r\n      Cancel\r\n    </button>\r\n    <button class=\"app-dialog-button app-dialog-confirm-button\" (click)=\"onClose(true)\">\r\n      {{confirmButtonText}}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";#info-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative}#info-dialog .fa{font-size:35px;margin:0 auto 20px;display:block;text-align:center;color:#009fdb;cursor:default}.scroll-content{overflow-y:auto;margin:auto;max-height:150px;width:100%}.app-dialog{font-family:Inter,Inter,sans-serif}.app-dialog .app-dialog-title{text-align:center;font-weight:600;font-size:16px;font-family:Inter,Inter,sans-serif;margin:0 0 24px}.app-dialog .flex-gap-container{gap:16px;position:absolute;right:0;bottom:0;gap:15px;display:flex}.app-dialog .app-dialog-content{color:#000000b3;font-size:14px}.app-dialog-button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Inter,sans-serif;cursor:pointer}.app-dialog-cancel-button{border:1px solid rgba(0,0,0,.5);color:#000}.app-dialog-confirm-button{background:#F23933;color:#fff}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: InfoDialogConfig, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+class InfoDialogConfig {
+}
+
+const getSavableData = (model, exclude) => {
+    let result = Object.keys(model);
+    if (exclude && exclude.length) {
+        result = result.filter(key => !exclude.some(item => item === key));
+    }
+    return result.reduce((result, key) => {
+        if (model[key] instanceof Array && model[key].length && model[key][0].getSavableData) {
+            result[key] = model[key].map((item) => item.getSavableData());
+        }
+        else if (model[key] instanceof Object && model[key].getSavableData) {
+            result[key] = model[key].getSavableData();
+        }
+        else {
+            result[key] = model[key];
+        }
+        return result;
+    }, {});
+};
+
+const API = {
+    USER_TOKEN: '/api/provision/:siteId/users/:userId/token',
+    UPDATE_USER_FIELDS: '/api/provision/:siteId/userFields/:token',
+    PERSIST_USER_CACHE: '/api/provision/:siteId/saveUser/:token',
+    USER_BY_ID: '/api/provision/:siteId/users/:userId',
+    QUICK_USERS_SEARCH: "/api/search/quickusers",
+    DELETE_USER: "/api/search/quickusers",
+    MOVE_USER: "/api/migration/webex/singlemigration/features/PERSON",
+    AVAILABLE_DN_IN_RANGES: "/api/sites/:siteId/available-dn-in-ranges",
+    DELETE_LINE: "/api/provision/:siteId/deleteLine/:pkid/:token",
+    DISASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/deleteLineAssociation/:linePkid/:token",
+    CHECK_DELETE_LINE: "/api/provision/:siteId/checklinedeletion",
+    ASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/createLineAssociation/:token",
+    CHECK_DESTINATION_NUMBER: "/api/provision/:siteId/check-dn",
+    UPDATE_LINE_FIELDS: "/api/provision/:siteId/lineFields/:pkid/:token",
+    UPDATE_DEVICE_FIELDS: "/api/provision/:siteId/deviceFields/:deviceName/:token",
+    WEBEX_USERS: "/api/webex/provisioning/customers/:customerId/users",
+    MIGRATED_USERS: "/api/search/migratedusers",
+    REVERT_WEBEX_USER: "/api/webex/provisioning/customers/:customerId/persons/:webexUUID/removecallinglicense",
+    PHONE_NUMBERS: "/api/search/webex/customers/:customerId/locations/:locationId/phonenumbers"
+};
+const REGEX_PATTERN = {
+    EMAIL: '^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))' +
+        '@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,62}[a-zA-Z0-9])' +
+        '?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,62}[a-zA-Z0-9])?)*$'
+};
+const PAGINATION_DEFAULTS = {
+    SIZE: 10,
+    INDEX: 0
+};
+const PAGINATION_SIZE_OPTIONS = [
+    10,
+    50,
+    100,
+    500
+];
+const CUCS_TO_IGNORE = [
+    189,
+    194,
+    191,
+    190
+];
+const CUCMS_TO_IGNORE = [
+    249,
+    255,
+    251,
+    250
+];
+const MAX_INTEGER = 2147483647;
+
+class SimplifiedUser {
+    constructor(user) {
+        if (user) {
+            this.userid = user.userid;
+            this.email = user.email;
+            this.firstName = user.firstName;
+            this.lastName = user.lastName;
+            this.token = user.token;
+        }
+        this.initForm();
+    }
+    initForm() {
+        const formBuilder = new FormBuilder();
+        const formSettings = {
+            userid: [{ value: this.userid || '', disabled: true }, [Validators.required, Validators.maxLength(128)]],
+            email: [{ value: this.email || '', disabled: true }, [
+                    Validators.pattern(REGEX_PATTERN.EMAIL),
+                    Validators.required
+                ]],
+            firstName: [{ value: this.firstName || '', disabled: true }],
+            lastName: [{ value: this.lastName || '', disabled: true }, Validators.required],
+        };
+        this.form = formBuilder.group(formSettings);
+    }
+    toggleEditMode() {
+        this.editMode = !this.editMode;
+        ['userid', 'email', 'firstName', 'lastName'].forEach(token => {
+            if (this.editMode) {
+                this.form.get(token)?.enable();
+            }
+            else {
+                this.form.get(token)?.disable();
+            }
+        });
+    }
+    getSavableData() {
+        const excludedFields = ['form', 'editMode', 'viewMode', 'token', 'hasModifiedCache'];
+        return getSavableData(this, excludedFields);
+    }
+    equal(userToCompare) {
+        if (!userToCompare) {
+            return false;
+        }
+        return JSON.stringify(this.getSavableData()) === JSON.stringify(userToCompare.getSavableData());
+    }
+}
+
+class UtilsService {
+    static sortSortArrayByProperty(array, sortBy) {
+        if (!array) {
+            return null;
+        }
+        return array.sort((a, b) => {
+            if (!a[sortBy] && !b[sortBy]) {
+                return 0;
+            }
+            if (a[sortBy] && !b[sortBy]) {
+                return 1;
+            }
+            if (!a[sortBy] && b[sortBy]) {
+                return -1;
+            }
+            const positionA = a[sortBy];
+            const positionB = b[sortBy];
+            return (positionA < positionB) ? -1 : (positionA > positionB) ? 1 : 0;
+        });
+    }
+    static diff(origObject, updatedObj, path, keysToIgnore) {
+        let result = [];
+        if (Object.is(origObject, updatedObj)) {
+            return undefined;
+        }
+        if (!updatedObj || typeof updatedObj !== 'object') {
+            return updatedObj;
+        }
+        const concat = Array.from(new Set([...Object.keys(origObject || {}), ...Object.keys(updatedObj || {})]));
+        const filter = keysToIgnore ? concat.filter(key => !keysToIgnore.includes(key)) : concat;
+        filter
+            .forEach(key => {
+            if (typeof updatedObj[key] === 'object' && typeof origObject[key] === 'object') {
+                if (UtilsService.differs(updatedObj[key], origObject[key])) {
+                    const newPath = `${path}${path ? '.' : ''}${key}`;
+                    const values = UtilsService.diff(origObject[key], updatedObj[key], newPath, keysToIgnore);
+                    if (values !== undefined) {
+                        result = [...result, ...values];
+                    }
+                }
+            }
+            else if (updatedObj && !origObject || updatedObj[key] !== origObject[key] && !Object.is(origObject[key], updatedObj[key])) {
+                const value = updatedObj ? UtilsService.formatIfEmpty(updatedObj[key]) : null;
+                result.push(`${path}${path ? '.' : ''}${key}=${value}`);
+            }
+        });
+        return result;
+    }
+    static formatIfEmpty(value) {
+        if (value) {
+            return value;
+        }
+        switch (typeof value) {
+            case 'boolean':
+                return value;
+            case 'string':
+                return '';
+            default:
+                return null;
+        }
+    }
+    static differs(obj1, obj2) {
+        return JSON.stringify(obj1) !== JSON.stringify(obj2);
+    }
+}
+UtilsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+UtilsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, decorators: [{
+            type: Injectable
+        }] });
+
+class APIService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+        this.apiUrl = window.location.protocol + '//' + window.location.hostname + '/dcp';
+    }
+    fetch(url, params = {}, cache) {
+        const headers = this.getHeaders(cache);
+        return this.httpClient.get(this.apiUrl + url, { params: this.prepareEncodedParams(params), headers });
+    }
+    post(url, body, params = {}) {
+        body = body || null;
+        const headers = this.getHeaders();
+        return this.httpClient.post(this.apiUrl + url, body, { params: this.prepareEncodedParams(params), headers });
+    }
+    // use when response extended data is necessary:
+    postExtended(url, body = null, params = {}, headers = {}) {
+        headers = headers || this.getHeaders();
+        return this.httpClient.post(this.apiUrl + url, body, {
+            headers,
+            observe: 'response',
+            params: this.prepareEncodedParams(params)
+        });
+    }
+    put(url, body = null, params = {}) {
+        const headers = this.getHeaders();
+        return this.httpClient.put(this.apiUrl + url, body, { headers, params: this.prepareEncodedParams(params) });
+    }
+    delete(url, params = {}) {
+        const headers = this.getHeaders();
+        return this.httpClient.delete(this.apiUrl + url, { headers, params: this.prepareEncodedParams(params) });
+    }
+    fetchPagination(url, pageSize, pageNumber, additionalParams = {}, cache) {
+        const copyAdditionalParams = JSON.parse(JSON.stringify(additionalParams));
+        const params = Object.assign(copyAdditionalParams, { size: pageSize.toString(), page: pageNumber.toString() });
+        return this.fetch(url, params, cache);
+    }
+    prepareEncodedParams(params) {
+        const result = {};
+        if (!params) {
+            return {};
+        }
+        for (const key of Object.keys(params)) {
+            if (params[key]) {
+                const stringParam = params[key].toString();
+                result[key] = stringParam.includes('+') ? encodeURIComponent(stringParam) : stringParam;
+            }
+        }
+        return result;
+    }
+    getHeaders(cache) {
+        let headers = new HttpHeaders();
+        if (cache) {
+            headers = headers.append('_Cache', 'true ');
+        }
+        const token = this.token || this.getParameterByName('token');
+        headers = headers.append('Authorization', 'Bearer ' + token);
+        return headers;
+    }
+    getParameterByName(name, url = window.location.href) {
+        name = name.replace(/[\[\]]/g, '\\$&');
+        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url);
+        if (!results)
+            return null;
+        if (!results[2])
+            return '';
+        return decodeURIComponent(results[2].replace(/\+/g, ' '));
+    }
+}
+APIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+APIService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+
+class ApiWebexService extends APIService {
+    constructor(httpClient) {
+        super(httpClient);
+        //this.apiUrl = window.location.protocol + "//"+ window.location.hostname + environment.apiAuthUrl;
+        this.apiUrl = 'https://webex.car-west.net/webex';
+    }
+}
+ApiWebexService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ApiWebexService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+ApiWebexService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ApiWebexService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ApiWebexService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+
+class UserService {
+    constructor(apiService, apiWebexService) {
+        this.apiService = apiService;
+        this.apiWebexService = apiWebexService;
+        this.siteId = -1;
+        this.userId = '';
+        this.userIdExistPending = false;
+        this.hasExistedUserId = false;
+    }
+    ngOnInit() {
+        console.log(this.siteId);
+    }
+    fetchUserToken(siteId, userId) {
+        this.siteId = siteId;
+        this.userId = userId;
+        return this.apiService.fetch(API.USER_TOKEN.replace(':siteId', String(this.siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(userId))))
+            .pipe(map((result) => {
+            const token = Object.keys(result)[0];
+            this.setSimplifiedUser(Object.values(result)[0], token);
+        }));
+        // .pipe(this.handleError(false, true));
+    }
+    updateUserFields(body) {
+        if (!this.userId || !this.siteId || !this.user?.token) {
+            return;
+        }
+        return this.apiService.post(API.UPDATE_USER_FIELDS.replace(':siteId', String(this.siteId)).replace(':token', this.user.token), body);
+        // .pipe(this.handleError(false, true));
+    }
+    moveUser(customerId, user) {
+        // return new Observable<boolean>(observer => {
+        //   setTimeout(() => {
+        //     observer.next(true);
+        //
+        //   }, 80000);
+        // });
+        return this.apiWebexService.post(API.MOVE_USER, this.getMoveUserBody(customerId, user));
+        // .pipe(this.handleError(true, true));
+    }
+    moveUserToMT(customerId, user) {
+        // return new Observable<boolean>(observer => {
+        //   setTimeout(() => {
+        //     observer.next(true);
+        //
+        //   }, 80000);
+        // });
+        return this.apiWebexService.post(API.MOVE_USER, this.getMoveUserBody(customerId, user));
+        // .pipe(this.handleError(true, true));
+    }
+    moveUserToDI(customerId, user) {
+        // return new Observable<boolean>(observer => {
+        //   setTimeout(() => {
+        //     observer.next(true);
+        //
+        //   }, 80000);
+        // });
+        const URL = API.REVERT_WEBEX_USER.replace(':customerId', customerId).replace(':webexUUID', String(user.webexUUID));
+        return this.apiWebexService.post(URL, this.getMoveUserBody(customerId, user));
+        // .pipe(this.handleError(true, true));
+    }
+    getMoveUserBody(customerId, user) {
+        return {
+            customerId: customerId,
+            entities: {
+                PERSON: [{ cucmId: user.cucmId, entityId: user.userid }]
+            }
+        };
+    }
+    deleteUser(siteId, userId) {
+        return this.apiService.delete(API.DELETE_USER.replace(':siteId', String(siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(userId))));
+        // .pipe(this.handleError(true, true));
+    }
+    fetchUserById(id) {
+        this.userIdExistPending = true;
+        return this.apiService.fetch(API.USER_BY_ID.replace(':siteId', String(this.siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(id))))
+            .pipe(map(result => {
+            this.userIdExistPending = false;
+            return result;
+        }));
+    }
+    persistCacheChanges() {
+        const params = {
+            excludeDeviceExtraOptions: true
+        };
+        return this.processUserChangesToCache()
+            .pipe(map((result) => {
+            return this.apiService.post(API.PERSIST_USER_CACHE.replace(':siteId', String(this.siteId)).replace(':token', this.user.token), {}, params)
+                .subscribe(() => {
+            });
+            // .pipe(map((user) => {
+            //   // this.setUser(user, false, this.user.token);
+            //   this.user.hasModifiedCache = false;
+            // }))
+            // .pipe(this.handleError(true, true));
+        }));
+    }
+    processUserChangesToCache() {
+        const calls = [];
+        const body = UtilsService.diff(this.originUser.getSavableData(), this.user.getSavableData(), 'user');
+        if (body) {
+            calls.push(this.updateUserFields(body));
+        }
+        if (!calls?.length) {
+            return of(this.user);
+        }
+        return forkJoin(calls)
+            .pipe(map((responses) => {
+            // ApiUserResponse
+            this.handleSaveUserResponse(responses);
+        }));
+        // .pipe(this.handleError(false, true));
+    }
+    hasUnsavedChanges() {
+        return !this.user.equal(this.originUser);
+    }
+    setSimplifiedUser(user, token) {
+        this.user = new SimplifiedUser(user);
+        const copiedUser = JSON.parse(JSON.stringify(user));
+        this.originUser = new SimplifiedUser(copiedUser);
+        this.user.token = this.user.token || token;
+        this.originUser.token = this.originUser.token || token;
+    }
+    handleSaveUserResponse(responses) {
+        if (!responses?.length) {
+            return;
+        }
+        for (let len = responses.length, i = len - 1; i >= 0; i--) {
+            if (responses[i] && responses[i].currentUpdatedUser) {
+                // this.setUser(responses[i].currentUpdatedUser, false, this.user.token);
+                this.user.hasModifiedCache = true;
+                return;
+            }
+        }
+    }
+}
+UserService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserService, deps: [{ token: APIService }, { token: ApiWebexService }], target: i0.ɵɵFactoryTarget.Injectable });
+UserService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: APIService }, { type: ApiWebexService }]; } });
+
+const TTL_DEFAULT = 30000;
+const TTL_LONG_DEFAULT = 45000;
+var NotificationType;
+(function (NotificationType) {
+    NotificationType["info"] = "info";
+    NotificationType["error"] = "error";
+    NotificationType["success"] = "success";
+    NotificationType["warning"] = "warning";
+})(NotificationType || (NotificationType = {}));
+class Notification {
+    constructor(data) {
+        this.ttl = TTL_DEFAULT;
+        Object.assign(this, data || {});
+        if (this.ttl === undefined) {
+            this.ttl = this.message && this.message.length && this.message.length < 80 ? TTL_DEFAULT : TTL_LONG_DEFAULT;
+        }
+    }
+    isInfo() {
+        return this.type === NotificationType.info;
+    }
+    isError() {
+        return this.type === NotificationType.error;
+    }
+    isSuccess() {
+        return this.type === NotificationType.success;
+    }
+    isWarning() {
+        return this.type === NotificationType.warning;
+    }
+}
+
+const SUCCESS_TIME = 5000;
+const INACTIVE_SESSION_MESSAGE = 'Your session was lost due to inactivity. Please login again';
+const INACTIVE_SESSION = 'SESSION_INACTIVE';
+class NotificationService {
+    constructor() {
+        this.listChange = new Subject();
+        this.max = 0;
+        this.list = [];
+    }
+    error(message, ttl) {
+        this.notify('error', message, ttl);
+    }
+    success(message, ttl) {
+        this.notify('success', message, (!ttl) ? SUCCESS_TIME : ttl);
+    }
+    warning(message, ttl) {
+        this.notify('warning', message, ttl);
+    }
+    info(message, ttl) {
+        this.notify('info', message, ttl);
+    }
+    notify(type, message, ttl) {
+        const found = this.list.find((n) => n.message === message);
+        if (found) {
+            this.remove(found);
+        }
+        const notification = new Notification({
+            id: ++this.max,
+            type, message, ttl
+        });
+        if (notification.ttl > 0) {
+            notification.timerId = setTimeout(() => this.remove(notification, true), notification.ttl);
+        }
+        this.list.push(notification);
+        this.listChange.next(this.list);
+    }
+    remove(notification, auto) {
+        if (!auto && notification.timerId) {
+            // clear timeout in case of manual remove
+            clearInterval(notification.timerId);
+        }
+        this.list = this.list.filter(n => n.id !== notification.id);
+        this.listChange.next(this.list);
+    }
+    removeInactiveSessionError() {
+        if (!this.list || !this.list.length) {
+            return;
+        }
+        this.list = this.list.filter(n => n.message !== INACTIVE_SESSION_MESSAGE && n.message !== INACTIVE_SESSION);
+        this.listChange.next(this.list);
+    }
+}
+NotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class ListUser {
+    constructor(user, roleName) {
+        this.devices = [];
+        this.deviceProfiles = [];
+        if (user) {
+            Object.assign(this, user);
+        }
+        if (roleName) {
+            this.roleName = roleName;
+        }
+    }
+}
+
+class RemoveKynFromIBMService {
+    constructor() {
+    }
+    removeCUCMS(date, customerId) {
+        if (customerId === 8) {
+            return date.filter((val) => !CUCMS_TO_IGNORE.includes(Math.round(val.cucmId)));
+        }
+        return date;
+    }
+    removeCUCS(date, customerId) {
+        if (customerId === 8) {
+            return date.filter((val) => !CUCS_TO_IGNORE.includes(Math.round(val.cucId)));
+        }
+        return date;
+    }
+}
+RemoveKynFromIBMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveKynFromIBMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RemoveKynFromIBMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveKynFromIBMService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveKynFromIBMService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class UsersSearchService {
+    constructor(apiService, webexApiService, removeKynFromIBMService) {
+        this.apiService = apiService;
+        this.webexApiService = webexApiService;
+        this.removeKynFromIBMService = removeKynFromIBMService;
+        this.siteId = -1;
+        this.userId = '';
+        this.userIdExistPending = false;
+        this.hasExistedUserId = false;
+        this.pageSize = PAGINATION_DEFAULTS.SIZE;
+        this.pageIndex = PAGINATION_DEFAULTS.SIZE;
+        this.pageSizeOptions = PAGINATION_SIZE_OPTIONS;
+        this.foundUsers$ = new BehaviorSubject(null);
+    }
+    getPagination() {
+        return {
+            total: this.total,
+            pageSizeOptions: this.pageSizeOptions,
+            pageSize: this.pageSize,
+            pageIndex: this.pageIndex
+        };
+    }
+    setDefaultValues() {
+        this.total = 0;
+        this.pageSize = PAGINATION_DEFAULTS.SIZE;
+        this.pageIndex = PAGINATION_DEFAULTS.INDEX;
+        this.pageSizeOptions = PAGINATION_SIZE_OPTIONS;
+    }
+    quickRegularUsersSearch(searchParams, isMigratedUsersOnly, pageSize) {
+        console.log('searchParams = ', searchParams);
+        this.searchParams = searchParams || { customerid: this.customerId, siteid: this.siteId };
+        return this.apiService.fetchPagination(API.QUICK_USERS_SEARCH, this.pageSize, pageSize || this.pageIndex, this.searchParams)
+            .pipe(map((res) => {
+            // this.totals = this.totals || {};
+            // this.totals['users'] = res.total;
+            // this.foundUsers$.next(this.removeKynFromIBMService.removeCUCMS(users, this.customerId));
+            if (!isMigratedUsersOnly) {
+                const users = res.pageData && res.pageData.length ? res.pageData
+                    .map(user => new ListUser(user, 'Dedicated Instance Calling user')) : [];
+                if (this.migratedUsersIds?.length) {
+                    this.setMigratedPropToUsers(users);
+                }
+                this.total = res.total;
+                this.foundUsers$.next(users);
+            }
+            else {
+                this.migratedUsersIds = res.pageData && res.pageData.length ? res.pageData
+                    .map(user => user.userid) : [];
+            }
+        }));
+        // .pipe(this.handleError(true));
+    }
+    quickWebexUsersSearch(searchParams, isMigratedUsersOnly, pageSize) {
+        this.searchParams = searchParams || { customerid: this.customerId, siteid: this.siteId };
+        return this.webexApiService.fetchPagination(API.QUICK_USERS_SEARCH, this.pageSize, pageSize || this.pageIndex, this.searchParams)
+            .pipe(map((res) => {
+            if (!isMigratedUsersOnly) {
+                const users = res.pageData && res.pageData.length ? res.pageData
+                    .map(user => new ListUser(user, 'Dedicated Instance Calling user')) : [];
+                if (this.migratedUsersIds?.length) {
+                    this.setMigratedPropToUsers(users);
+                }
+                this.total = res.total;
+                this.foundUsers$.next(users);
+            }
+            else {
+                this.migratedUsersIds = res.pageData && res.pageData.length ? res.pageData
+                    .map(user => user.userid) : [];
+            }
+        }));
+        // .pipe(this.handleError(true));
+    }
+    getMigratedUsers(customerId) {
+        return this.webexApiService.fetch(API.WEBEX_USERS.replace(':customerId', String(customerId)), {})
+            .pipe(map((result) => {
+            if (result && result.length) {
+                this.migratedUsers = result.filter((user) => user.webexUUID && user.devices && user.devices.length);
+            }
+        }));
+    }
+    getMigratedWebexUsers(customerId) {
+        const params = { customerid: customerId, type: 'PERSON' };
+        return this.webexApiService.fetch(API.MIGRATED_USERS.replace(':customerId', String(customerId)), params, true)
+            .pipe(map((result) => {
+        }));
+    }
+    setMigratedPropToUsers(users) {
+        users.forEach((user) => {
+            const migratedUser = this.migratedUsers.filter((migratedUser) => migratedUser.userid === user.email);
+            if (migratedUser && migratedUser[0]) {
+                user.roleName = '';
+                user.isMigrated = true;
+                user.status = 'Migrated';
+                user.webexUUID = migratedUser[0].webexUUID;
+            }
+            else {
+                user.roleName = 'Dedicated Instance Calling user';
+                user.isMigrated = false;
+                user.status = 'Active';
+                user.webexUUID = '';
+            }
+        });
+        console.log('users ttt', users);
+    }
+}
+UsersSearchService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersSearchService, deps: [{ token: APIService }, { token: ApiWebexService }, { token: RemoveKynFromIBMService }], target: i0.ɵɵFactoryTarget.Injectable });
+UsersSearchService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersSearchService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersSearchService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: APIService }, { type: ApiWebexService }, { type: RemoveKynFromIBMService }]; } });
+
+class PaginationComponent {
+    constructor() {
+        this.pageEmitter = new EventEmitter();
+        this.pageNumberChangeEmitter = new EventEmitter();
+        this.pageSizeOptions = PAGINATION_SIZE_OPTIONS;
+    }
+    ngOnInit() {
+    }
+    pageEvent(event) {
+        this.pageEmitter.emit(event);
+    }
+    changePerPageNumber(event) {
+        this.pageNumberChangeEmitter.emit(event.value);
+    }
+}
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PaginationComponent, selector: "app-pagination", inputs: { pagination: "pagination", showPageSizeOptions: "showPageSizeOptions", showRefreshButton: "showRefreshButton", lengthPending: "lengthPending" }, outputs: { pageEmitter: "pageEmitter", pageNumberChangeEmitter: "pageNumberChangeEmitter" }, ngImport: i0, template: "<div class=\"flex-box pagination\">\r\n  <div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n    <mat-spinner class=\"length-spinner\" [diameter]=\"20\" mode=\"indeterminate\" *ngIf=\"lengthPending\">\r\n    </mat-spinner>\r\n  </div>\r\n\r\n  <div class=\"flex-box per-page-block\" *ngIf=\"showPageSizeOptions\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select [(ngModel)]=\"pagination.pageSize\" (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".search-header-refresh-icon{align-items:center;line-height:54px;margin-left:10px}button[mat-icon-button] i{font-size:18px}mat-spinner.length-spinner{position:absolute;right:120px}h3,.search-header-refresh-icon{float:left}.page-options,.mat-paginator{float:right}.per-page-block mat-form-field{width:70px!important}.per-page-block span{margin-right:20px}.pagination{display:flex;justify-content:flex-end}.select-page-size{width:60px;margin:0 0 0 15px;padding:0 10px}.item_per_page{line-height:35px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.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\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n    <mat-spinner class=\"length-spinner\" [diameter]=\"20\" mode=\"indeterminate\" *ngIf=\"lengthPending\">\r\n    </mat-spinner>\r\n  </div>\r\n\r\n  <div class=\"flex-box per-page-block\" *ngIf=\"showPageSizeOptions\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select [(ngModel)]=\"pagination.pageSize\" (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".search-header-refresh-icon{align-items:center;line-height:54px;margin-left:10px}button[mat-icon-button] i{font-size:18px}mat-spinner.length-spinner{position:absolute;right:120px}h3,.search-header-refresh-icon{float:left}.page-options,.mat-paginator{float:right}.per-page-block mat-form-field{width:70px!important}.per-page-block span{margin-right:20px}.pagination{display:flex;justify-content:flex-end}.select-page-size{width:60px;margin:0 0 0 15px;padding:0 10px}.item_per_page{line-height:35px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { pagination: [{
+                type: Input
+            }], showPageSizeOptions: [{
+                type: Input
+            }], showRefreshButton: [{
+                type: Input
+            }], lengthPending: [{
+                type: Input
+            }], pageEmitter: [{
+                type: Output
+            }], pageNumberChangeEmitter: [{
+                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]=\"120\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"], dependencies: [{ kind: "component", type: i3$1.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]=\"120\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+var EntityChangeType;
+(function (EntityChangeType) {
+    EntityChangeType["added"] = "added";
+    EntityChangeType["updated"] = "updated";
+    EntityChangeType["existing"] = "existing";
+    EntityChangeType["removed"] = "removed";
+    EntityChangeType["unassociated"] = "unassociated";
+})(EntityChangeType || (EntityChangeType = {}));
+var DnRangeType;
+(function (DnRangeType) {
+    DnRangeType["extension"] = "EXTENSION";
+    DnRangeType["cpg"] = "CPG";
+    DnRangeType["callpark"] = "CALLPARK";
+    DnRangeType["huntgroup"] = "HUNTGROUP";
+    DnRangeType["meetme"] = "MEETME";
+    DnRangeType["did"] = "DID";
+})(DnRangeType || (DnRangeType = {}));
+
+class DnsService {
+    constructor(apiService, apiWebexService) {
+        this.apiService = apiService;
+        this.apiWebexService = apiWebexService;
+        this.availableNumbers = {};
+        this.phoneNumbers = [];
+    }
+    getNumberRange(siteId, routePartition, withdids, from, pageSize) {
+        // @ts-ignore
+        if (this.availableNumbers[routePartition]?.length) {
+            return new Observable(observer => {
+                // @ts-ignore
+                observer.next(this.availableNumbers[routePartition]);
+            });
+        }
+        this.availableDidPatternsMappedToDn = {};
+        pageSize = pageSize ? pageSize : 20;
+        const params = { dntype: DnRangeType.extension, routepartition: routePartition, size: pageSize, page: 0 };
+        if (withdids) {
+            // @ts-ignore
+            params['withdids'] = 'true';
+        }
+        if (from) {
+            // @ts-ignore
+            params['from'] = from;
+        }
+        // @ts-ignore
+        this.availableNumbers[routePartition] = this.availableNumbers[routePartition] || [];
+        return this.apiService.fetch(API.AVAILABLE_DN_IN_RANGES.replace(':siteId', siteId), params)
+            .pipe(map((res) => {
+            res.availableNumberList.forEach((availableNumber) => {
+                this.setAvailableDidMappedToDn(availableNumber);
+                // @ts-ignore
+                this.availableNumbers[routePartition] = [...this.availableNumbers[routePartition], ...this.getUnwrapNumberRange(availableNumber)];
+            });
+        }));
+        // .pipe(this.handleError(true, false));
+    }
+    setAvailableDidMappedToDn(availableNumber) {
+        if (availableNumber.unUsedNumbersWithDids && availableNumber.unUsedNumbersWithDids.length) {
+            availableNumber.unUsedNumbersWithDids.forEach((numberWithDids) => {
+                const dn = numberWithDids['unUsedNumber'];
+                this.availableDidPatternsMappedToDn[dn] = [{}];
+                if (numberWithDids['translationPatternList'] && numberWithDids['translationPatternList'].length > 0) {
+                    this.availableDidPatternsMappedToDn[dn] = numberWithDids['translationPatternList'];
+                    this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] = [{}];
+                    if (numberWithDids['mappedDids'] && numberWithDids['mappedDids'].length > 0) {
+                        this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] = numberWithDids['mappedDids'];
+                    }
+                }
+                this.availableDidPatternsMappedToDn[dn][0]['vm'] = numberWithDids['vm'];
+            });
+        }
+    }
+    getUnwrapNumberRange(availableNumber) {
+        let unwrapNumberRange = this.unwrapNumberRange(availableNumber.phoneNumberRange.from, availableNumber.phoneNumberRange.to)
+            .map((unwrappedNumber) => {
+            const dn = availableNumber.phoneNumberRange.prefix + unwrappedNumber;
+            let str = dn;
+            if (this.availableDidPatternsMappedToDn[dn] && this.availableDidPatternsMappedToDn[dn].length > 0) {
+                if (this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] && this.availableDidPatternsMappedToDn[dn][0]['mappedDids'].length > 0) {
+                    str += '        DID:  ' + (this.availableDidPatternsMappedToDn[dn][0]['mappedDids'].length > 1 ? 'multiple' :
+                        this.availableDidPatternsMappedToDn[dn][0]['mappedDids'][0]);
+                }
+                if (this.availableDidPatternsMappedToDn[dn][0]['vm']) {
+                    str += '        In Use - VM';
+                }
+            }
+            return str;
+        });
+        unwrapNumberRange = unwrapNumberRange.filter((unwrappedNumber) => !availableNumber.usedNumbers.includes(unwrappedNumber));
+        return unwrapNumberRange;
+    }
+    unwrapNumberRange(start, end) {
+        const regExp = /(^0+)/;
+        let leadingZeros = '';
+        const matches = start.match(regExp);
+        if (matches) {
+            leadingZeros = matches[1];
+        }
+        const startNumeric = new Big(start);
+        const endNumeric = new Big(end);
+        // @ts-ignore
+        return Array.from({ length: (endNumeric.minus(startNumeric).plus(new Big(1)).toFixed(0)) }, (v, k) => {
+            const number = String(startNumeric.plus(new Big(k)).toFixed(0));
+            if ((leadingZeros + number).length > start.length) {
+                leadingZeros = leadingZeros.substr(1);
+            }
+            return leadingZeros + number;
+        });
+    }
+    fetchPhoneNumbers(customerId, locationId) {
+        const params = {
+            available: true,
+            numberType: 'NUMBER'
+        };
+        return this.apiWebexService.fetch(API.PHONE_NUMBERS.replace(':customerId', String(customerId)).replace(':locationId', locationId), params)
+            .pipe(map((result) => {
+            if (result?.length) {
+                this.phoneNumbers = result.map((item) => item.phoneNumber);
+            }
+            return result;
+        }));
+    }
+}
+DnsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DnsService, deps: [{ token: APIService }, { token: ApiWebexService }], target: i0.ɵɵFactoryTarget.Injectable });
+DnsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DnsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DnsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: APIService }, { type: ApiWebexService }]; } });
+
+// for test only
+const LOCATION = 'Y2lzY29zcGFyazovL3VzL0xPQ0FUSU9OLzE2YjY0NjljLTBjZmQtNDJjMS1iOWJjLTUyN2FlZTNhN2RlOQ';
+class MoveUserStepperComponent {
+    get currentNumber() {
+        if (this.user?.devices?.length && this.user.devices[0]?.lineAssociations && this.user.devices[0].lineAssociations[0]) {
+            return this.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber;
+        }
+        return '';
+    }
+    constructor(dnsService) {
+        this.dnsService = dnsService;
+        this.runMoveUser = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.isLinear = true;
+        this.phoneNumberPending = false;
+    }
+    ngOnInit() {
+        if (this.user) {
+            this.user.moveType = {
+                phoneNumber: '1',
+                extension: '1'
+            };
+        }
+    }
+    onStepChange(event) {
+        // alert('step change ' + event.selectedIndex);
+        /*if (event.selectedIndex === 4) {
+          this.runMoveUser.emit();
+        }*/
+    }
+    selectPhoneNumberMigrationType(event) {
+        if (event.value && event.value === '2') {
+            this.getPhoneNumbers();
+        }
+    }
+    onPhoneNumberChange(event) {
+        this.user.newNumber;
+    }
+    onExtensionCHange(event) {
+        this.user.newExtension;
+    }
+    isFieldAvailable(type, value) {
+        if (this.user?.moveType) {
+            return this.user.moveType[type] && this.user.moveType[type] === value;
+        }
+        return false;
+    }
+    getPhoneNumbers() {
+        this.phoneNumberPending = true;
+        this.dnsService.fetchPhoneNumbers(this.customerId, LOCATION)
+            .subscribe(() => {
+            this.phoneNumberPending = false;
+        }, () => this.phoneNumberPending = false);
+    }
+    goNextStep(stepper) {
+        /*const currentStep = stepper.selectedIndex;
+    
+        if (currentStep === 1) { stepper.selectedIndex = 3; }
+        // else if (currentStep === 3) { stepper.selectedIndex = 0; }
+    
+        [
+          stepper.steps.get(1),
+          stepper.steps.get(2)
+    
+        ].map(step => step ? step.completed = true : undefined);*/
+    }
+}
+MoveUserStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MoveUserStepperComponent, deps: [{ token: DnsService }], 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" }, outputs: { runMoveUser: "runMoveUser", cancel: "cancel" }, ngImport: i0, template: "<mat-stepper *ngIf=\"user?.moveType\" (selectionChange)=\"onStepChange($event)\" [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        <mat-label class=\"mat-label\">Phone number</mat-label>\r\n        <mat-radio-group\r\n          class=\"radio-group\"\r\n          [(ngModel)]=\"user.moveType.phoneNumber\"\r\n          name=\"phoneNumber\" (change)=\"selectPhoneNumberMigrationType($event)\">\r\n          <mat-radio-button class=\"radio-button\" value=\"1\" color=\"primary\">Keep current number {{currentNumber}}</mat-radio-button>\r\n          <mat-radio-button class=\"radio-button\" value=\"2\" color=\"primary\">Select a new number</mat-radio-button>\r\n\r\n          <div *ngIf=\"user.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n            <mat-progress-spinner *ngIf=\"phoneNumberPending\"\r\n                                  class=\"field-spinner\" mode=\"indeterminate\"\r\n                                  [diameter]=\"30\"></mat-progress-spinner>\r\n\r\n            <mat-select class=\"select\" placeholder=\"Select number\" [(ngModel)]=\"user.newNumber\"\r\n                        (selectionChange)=\"onPhoneNumberChange($event)\">\r\n              <mat-option *ngFor=\"let option of dnsService.phoneNumbers\" value=\"option\">{{option}}</mat-option>\r\n            </mat-select>\r\n          </div>\r\n\r\n          <mat-radio-button class=\"radio-button\" value=\"3\" color=\"primary\">Remove number</mat-radio-button>\r\n        </mat-radio-group>\r\n        <mat-label class=\"mat-label\">Extension</mat-label>\r\n        <mat-radio-group class=\"radio-group\" name=\"extension\"\r\n          [(ngModel)]=\"user.moveType.extension\">\r\n          <mat-radio-button class=\"radio-button\" value=\"1\" color=\"primary\">Keep current extension</mat-radio-button>\r\n          <mat-radio-button class=\"radio-button\" value=\"2\" color=\"primary\">Select a new extension</mat-radio-button>\r\n          <mat-form-field *ngIf=\"user.moveType.extension === '2'\" appearance=\"outline\">\r\n            <input matInput type=\"text\" (change)=\"onExtensionCHange($event)\"\r\n                   [(ngModel)]=\"user.newExtension\"\r\n                   [placeholder]=\"'Enter extension'\" />\r\n          </mat-form-field>\r\n\r\n          <mat-radio-button class=\"radio-button\" value=\"3\" color=\"primary\">Remove extension</mat-radio-button>\r\n        </mat-radio-group>\r\n<!--      </form>-->\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">Next</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]=\"true ? 'disabled_af' : null\">\r\n      <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n      <ng-template matStepLabel>Device eligibility check</ng-template>\r\n      <form></form>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">Next</button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>Previous</button>\r\n      </div>\r\n    </mat-step>-->\r\n    <!--<mat-step [aria-labelledby]=\"true ? 'disabled_af' : null\">\r\n      <div class=\"step-title\">Step 3: Validation</div>\r\n      <form>\r\n        <ng-template matStepLabel>Validation</ng-template>\r\n        <mat-label class=\"mat-label\">Validation Success!</mat-label>\r\n        <p class=\"validation-text\">There is no issue for moving this user to the new location, $MTlocationname. Please be aware of the changes below once the user is being moved to the new location.</p>\r\n        <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n        <ul>\r\n          <li>Tablet device (TABAVICK) needs to be reconfigured with Webex App. User will receive an email with link to download.</li>\r\n          <li>Cisco 8875 (SEP751FC9BAB854) will not be migrated.</li>\r\n          <li>The user will be removed from Call Park Group.</li>\r\n          <li>If the device is using the location level device settings, the device will pick up the new location device settings once the user is moved. If some of the device settings are overwritten at the user level, these user level settings will be retained and the rest of the settings will be picked up at the higher level (organization or location) settings.</li>\r\n          <li>If the current location has a different recording service from the one of the new location, the recording of this user may be lost after moving location.</li>\r\n        </ul>\r\n        <div>\r\n          <mat-checkbox class=\"checkbox\" checked=\"true\" color=\"primary\">I confirm that I understand these conditions. I acknowledge the changes.</mat-checkbox>\r\n        </div>\r\n      </form>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">Next</button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>Previous</button>\r\n      </div>\r\n    </mat-step>-->\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 2: Result</div>\r\n      <ng-template matStepLabel>Result</ng-template>\r\n      <form>\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, $MTlocationname.\r\n          <br>\r\n          For the progress of move, please visit the <a class=\"form-link\" href=\"#\">user details</a>.\r\n        </p>\r\n      </form>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-done\" matStepperNext (click)=\"runMoveUser.emit()\">Done</button>\r\n      </div>\r\n    </mat-step>\r\n  </mat-stepper>\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-horizontal-stepper-header-container {margin: 0 auto; width: 800px;};.mat-step-icon {width: 18px; height: 18px; border: 3px solid hsl(0deg 0% 50.2%);};.mat-step-icon-selected {background-color: hsl(0deg 0% 77.65%) !important; border-color: hsl(211.8deg 66.67% 29.41%);};.mat-step-icon-state-number {background-color: white;};.mat-step-icon-state-edit {background-color: hsl(210deg 84.82% 43.92%); border-color: hsl(210deg 84.82% 43.92%);};.mat-step-header .mat-step-icon-state-done {background-color: hsl(210deg 84.82% 43.92%); border-color: hsl(210deg 84.82% 43.92%);};.mat-step-icon-content {display: none;};.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after {border-top-width: 3px !important;};.mat-horizontal-stepper-header::before,.mat-horizontal-stepper-header::after,.mat-stepper-horizontal-line {border-top-width: 3px !important; background-color: hsl(0deg 0% 48.24%);}}::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}form{background-color:#fff;padding:2.5rem;height:350px;max-height:700px;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}.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\")}\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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.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: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.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: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i9.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i9.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: i9.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i11.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i11.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MoveUserStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-move-user-stepper', template: "<mat-stepper *ngIf=\"user?.moveType\" (selectionChange)=\"onStepChange($event)\" [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        <mat-label class=\"mat-label\">Phone number</mat-label>\r\n        <mat-radio-group\r\n          class=\"radio-group\"\r\n          [(ngModel)]=\"user.moveType.phoneNumber\"\r\n          name=\"phoneNumber\" (change)=\"selectPhoneNumberMigrationType($event)\">\r\n          <mat-radio-button class=\"radio-button\" value=\"1\" color=\"primary\">Keep current number {{currentNumber}}</mat-radio-button>\r\n          <mat-radio-button class=\"radio-button\" value=\"2\" color=\"primary\">Select a new number</mat-radio-button>\r\n\r\n          <div *ngIf=\"user.moveType.phoneNumber === '2'\" class=\"select-container\">\r\n            <mat-progress-spinner *ngIf=\"phoneNumberPending\"\r\n                                  class=\"field-spinner\" mode=\"indeterminate\"\r\n                                  [diameter]=\"30\"></mat-progress-spinner>\r\n\r\n            <mat-select class=\"select\" placeholder=\"Select number\" [(ngModel)]=\"user.newNumber\"\r\n                        (selectionChange)=\"onPhoneNumberChange($event)\">\r\n              <mat-option *ngFor=\"let option of dnsService.phoneNumbers\" value=\"option\">{{option}}</mat-option>\r\n            </mat-select>\r\n          </div>\r\n\r\n          <mat-radio-button class=\"radio-button\" value=\"3\" color=\"primary\">Remove number</mat-radio-button>\r\n        </mat-radio-group>\r\n        <mat-label class=\"mat-label\">Extension</mat-label>\r\n        <mat-radio-group class=\"radio-group\" name=\"extension\"\r\n          [(ngModel)]=\"user.moveType.extension\">\r\n          <mat-radio-button class=\"radio-button\" value=\"1\" color=\"primary\">Keep current extension</mat-radio-button>\r\n          <mat-radio-button class=\"radio-button\" value=\"2\" color=\"primary\">Select a new extension</mat-radio-button>\r\n          <mat-form-field *ngIf=\"user.moveType.extension === '2'\" appearance=\"outline\">\r\n            <input matInput type=\"text\" (change)=\"onExtensionCHange($event)\"\r\n                   [(ngModel)]=\"user.newExtension\"\r\n                   [placeholder]=\"'Enter extension'\" />\r\n          </mat-form-field>\r\n\r\n          <mat-radio-button class=\"radio-button\" value=\"3\" color=\"primary\">Remove extension</mat-radio-button>\r\n        </mat-radio-group>\r\n<!--      </form>-->\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">Next</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]=\"true ? 'disabled_af' : null\">\r\n      <div class=\"step-title\">Step 2: Device eligibility check</div>\r\n      <ng-template matStepLabel>Device eligibility check</ng-template>\r\n      <form></form>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">Next</button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>Previous</button>\r\n      </div>\r\n    </mat-step>-->\r\n    <!--<mat-step [aria-labelledby]=\"true ? 'disabled_af' : null\">\r\n      <div class=\"step-title\">Step 3: Validation</div>\r\n      <form>\r\n        <ng-template matStepLabel>Validation</ng-template>\r\n        <mat-label class=\"mat-label\">Validation Success!</mat-label>\r\n        <p class=\"validation-text\">There is no issue for moving this user to the new location, $MTlocationname. Please be aware of the changes below once the user is being moved to the new location.</p>\r\n        <mat-label class=\"mat-label\">Expected changes</mat-label>\r\n        <ul>\r\n          <li>Tablet device (TABAVICK) needs to be reconfigured with Webex App. User will receive an email with link to download.</li>\r\n          <li>Cisco 8875 (SEP751FC9BAB854) will not be migrated.</li>\r\n          <li>The user will be removed from Call Park Group.</li>\r\n          <li>If the device is using the location level device settings, the device will pick up the new location device settings once the user is moved. If some of the device settings are overwritten at the user level, these user level settings will be retained and the rest of the settings will be picked up at the higher level (organization or location) settings.</li>\r\n          <li>If the current location has a different recording service from the one of the new location, the recording of this user may be lost after moving location.</li>\r\n        </ul>\r\n        <div>\r\n          <mat-checkbox class=\"checkbox\" checked=\"true\" color=\"primary\">I confirm that I understand these conditions. I acknowledge the changes.</mat-checkbox>\r\n        </div>\r\n      </form>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-next\" matStepperNext (click)=\"goNextStep(stepper)\">Next</button>\r\n        <button mat-button class=\"webex-btn btn-cancel\" matStepperPrevious>Previous</button>\r\n      </div>\r\n    </mat-step>-->\r\n    <mat-step>\r\n      <div class=\"step-title\">Step 2: Result</div>\r\n      <ng-template matStepLabel>Result</ng-template>\r\n      <form>\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, $MTlocationname.\r\n          <br>\r\n          For the progress of move, please visit the <a class=\"form-link\" href=\"#\">user details</a>.\r\n        </p>\r\n      </form>\r\n      <div class=\"step-actions\">\r\n        <button mat-button class=\"webex-btn btn-done\" matStepperNext (click)=\"runMoveUser.emit()\">Done</button>\r\n      </div>\r\n    </mat-step>\r\n  </mat-stepper>\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-horizontal-stepper-header-container {margin: 0 auto; width: 800px;};.mat-step-icon {width: 18px; height: 18px; border: 3px solid hsl(0deg 0% 50.2%);};.mat-step-icon-selected {background-color: hsl(0deg 0% 77.65%) !important; border-color: hsl(211.8deg 66.67% 29.41%);};.mat-step-icon-state-number {background-color: white;};.mat-step-icon-state-edit {background-color: hsl(210deg 84.82% 43.92%); border-color: hsl(210deg 84.82% 43.92%);};.mat-step-header .mat-step-icon-state-done {background-color: hsl(210deg 84.82% 43.92%); border-color: hsl(210deg 84.82% 43.92%);};.mat-step-icon-content {display: none;};.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after {border-top-width: 3px !important;};.mat-horizontal-stepper-header::before,.mat-horizontal-stepper-header::after,.mat-stepper-horizontal-line {border-top-width: 3px !important; background-color: hsl(0deg 0% 48.24%);}}::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}form{background-color:#fff;padding:2.5rem;height:350px;max-height:700px;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}.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\")}\n"] }]
+        }], ctorParameters: function () { return [{ type: DnsService }]; }, propDecorators: { user: [{
+                type: Input
+            }], customerId: [{
+                type: Input
+            }], runMoveUser: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+class MoveUserWizardComponent {
+    constructor(dnsService) {
+        this.dnsService = dnsService;
+        this.closeMoveUserWizard = new EventEmitter();
+        this.runMoveUser = new EventEmitter();
+        this.dataPending = false;
+    }
+    onClose() {
+        this.closeMoveUserWizard.emit();
+    }
+    onRunMoveUser() {
+        this.runMoveUser.emit();
+    }
+}
+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" }, outputs: { closeMoveUserWizard: "closeMoveUserWizard", 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\">Move User</div>\r\n        <div class=\"move-user-header__close\">\r\n          <span class=\"app-icon icon-close\" (click)=\"onClose()\"></span>\r\n        </div>\r\n    </header>\r\n    <app-move-user-stepper *ngIf=\"user\" [customerId]=\"customerId\" [user]=\"user\" (cancel)=\"onClose()\"\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;& 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\")}\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"], outputs: ["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\">Move User</div>\r\n        <div class=\"move-user-header__close\">\r\n          <span class=\"app-icon icon-close\" (click)=\"onClose()\"></span>\r\n        </div>\r\n    </header>\r\n    <app-move-user-stepper *ngIf=\"user\" [customerId]=\"customerId\" [user]=\"user\" (cancel)=\"onClose()\"\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;& 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\")}\n"] }]
+        }], ctorParameters: function () { return [{ type: DnsService }]; }, propDecorators: { user: [{
+                type: Input
+            }], customerId: [{
+                type: Input
+            }], closeMoveUserWizard: [{
+                type: Output
+            }], runMoveUser: [{
+                type: Output
+            }] } });
+
+const DISPLAYED_COLS = ['user-icon', 'name', 'email', 'status', 'role', 'actions'];
+const LOCAL_STORAGE = {
+    USER_IN_MIGRATION: 'userIdInMigration'
+};
+class UsersListComponent {
+    get form() {
+        return this.userService?.user?.form;
+    }
+    constructor(userService, apiService, apiWebexService, notifications, usersSearchService, dialog) {
+        this.userService = userService;
+        this.apiService = apiService;
+        this.apiWebexService = apiWebexService;
+        this.notifications = notifications;
+        this.usersSearchService = usersSearchService;
+        this.dialog = dialog;
+        this.openUser = new EventEmitter();
+        this.userMoved = new EventEmitter();
+        this.switchToWizard = new EventEmitter();
+        this.displayedColumns = DISPLAYED_COLS;
+        this.showMoveUserWizard = false;
+    }
+    ngOnInit() {
+        this.usersSearchService.setDefaultValues();
+        this.usersSearchService.customerId = this.customerId;
+        this.usersSearchService.siteId = this.siteId;
+        this.apiService.token = this.token;
+        this.apiWebexService.token = this.token;
+        this.apiService.apiUrl = this.host + '/dcp';
+        this.apiWebexService.apiUrl = this.host + '/webex';
+        this.getMigratedUsers();
+        this.searchSubscription = this.usersSearchService.foundUsers$
+            .subscribe((users) => {
+            this.initializeDataSource(users);
+        });
+    }
+    pageNumberChangeEvent(perPageNumber) {
+        this.usersSearchService.pageSize = perPageNumber;
+        this.usersSearchService.pageIndex = 0;
+        this.runSearch();
+    }
+    closeMoveUserWizard() {
+        this.moveUser = null;
+        this.showMoveUserWizard = false;
+        this.switchToWizard.emit(false);
+    }
+    pageEvent(event) {
+        this.usersSearchService.pageSize = event.pageSize;
+        this.usersSearchService.pageIndex = event.pageIndex;
+        this.runSearch();
+    }
+    onUserClick(user) {
+        this.openUser.emit(user);
+    }
+    moveUserToMT(user, index) {
+        if (user && user.siteId && user.userid) {
+            this.moveUserPending = true;
+            this.moveInProgressUserId = user.userid;
+            this.setStatusToUser(index, 'In Progress');
+            localStorage.setItem(LOCAL_STORAGE.USER_IN_MIGRATION, user.userid);
+            const subscription = this.userService.moveUserToMT(this.customerId, user)
+                .subscribe(() => {
+                this.moveUser = null;
+                this.moveUserIndex = null;
+                this.getMigratedUsers();
+            }, () => {
+                this.removeUserInMigrationProgress();
+                this.setStatusToUser(index, 'Migration Error');
+            });
+        }
+    }
+    moveUserToDI(user, index) {
+        if (user && user.siteId && user.webexUUID) {
+            this.moveUserPending = true;
+            this.moveInProgressUserId = user.userid;
+            this.users[index].status = 'In Progress';
+            localStorage.setItem(LOCAL_STORAGE.USER_IN_MIGRATION, user.userid);
+            const subscription = this.userService.moveUserToDI(this.customerId, user)
+                .subscribe(() => {
+                this.removeUserInMigrationProgress();
+                this.setStatusToUser(index, 'Active');
+                this.users[index].webexUUID = '';
+                if (this.usersSearchService.migratedUsers && this.usersSearchService.migratedUsers.length) {
+                    this.usersSearchService.migratedUsers = this.usersSearchService.migratedUsers.filter((migratedUser) => migratedUser.userid !== user.email);
+                }
+            }, () => {
+                this.removeUserInMigrationProgress();
+                this.setStatusToUser(index, 'Migration Error');
+            });
+        }
+    }
+    removeUserInMigrationProgress() {
+        localStorage.removeItem(LOCAL_STORAGE.USER_IN_MIGRATION);
+        this.moveInProgressUserId = '';
+        this.moveUserPending = false;
+    }
+    setStatusToUser(index, status) {
+        if (this.users && this.users[index]) {
+            this.users[index].status = status;
+            if (status === 'Migrated') {
+                this.users[index].roleName = '';
+                this.users[index].isMigrated = true;
+                this.users[index].status = status;
+            }
+            else {
+                this.users[index].roleName = 'Dedicated Instance Calling user';
+                this.users[index].isMigrated = false;
+                this.users[index].status = status;
+            }
+        }
+        this.dataSource = new MatTableDataSource(this.users);
+    }
+    initializeDataSource(users) {
+        if (users?.length) {
+            // this.setRandomUserRole(users);
+            this.users = users;
+            this.setUserMigrationProgress();
+            this.usersSearchService.setMigratedPropToUsers(this.users);
+            this.dataSource = new MatTableDataSource(users);
+        }
+    }
+    setUserRole() {
+        if (this.users?.length) {
+            this.users.forEach(user => {
+                if (!user.isMigrated) {
+                    user.roleName = 'Dedicated Instance Calling user';
+                }
+            });
+        }
+    }
+    setRandomUserRole(users) {
+        const max = Math.round(this.usersSearchService.pageSize - this.usersSearchService.pageSize / 4);
+        const min = Math.round(this.usersSearchService.pageSize / 2);
+        const randomAmount = Math.round(Math.random() * (max - min) + min);
+        const indexes = this.getArrayOfRandomUserIndexes(randomAmount);
+        indexes.forEach(index => {
+            if (users[index]) {
+                users[index].roleName = 'Dedicated Instance Calling user';
+            }
+        });
+    }
+    getArrayOfRandomUserIndexes(randomAmount) {
+        const indexes = [];
+        while (randomAmount > 0) {
+            const index = Math.round(Math.random() * (this.usersSearchService.pageSize - 1));
+            indexes.push(index);
+            randomAmount--;
+        }
+        return indexes;
+    }
+    runSearch() {
+        this.dataPending = true;
+        this.usersSearchService.quickRegularUsersSearch()
+            .subscribe(() => {
+            this.dataPending = false;
+        }, () => {
+            this.dataPending = false;
+            this.notifications.error('The data can not be received');
+        });
+    }
+    setUserMigrationProgress() {
+        const userIdInMigration = localStorage.getItem(LOCAL_STORAGE.USER_IN_MIGRATION);
+        if (userIdInMigration) {
+            const index = this.users.findIndex(user => user.userid === userIdInMigration);
+            this.moveInProgressUserId = index > -1 ? this.users[index].userid : '';
+            this.moveUserPending = index > -1;
+        }
+    }
+    getMigratedUsers() {
+        this.dataPending = true;
+        const searchParams = {
+            customerid: this.customerId,
+            siteid: this.siteId,
+            'cloud-only': 'true'
+        };
+        // this.usersSearchService.quickWebexUsersSearch(searchParams, true, MAX_INTEGER)
+        this.usersSearchService.getMigratedUsers(this.customerId)
+            // this.usersSearchService.getMigratedWebexUsers(this.customerId)
+            .subscribe(() => {
+            const userIdInMigration = localStorage.getItem(LOCAL_STORAGE.USER_IN_MIGRATION);
+            if (userIdInMigration && this.usersSearchService.migratedUsers.filter((migratedUser) => migratedUser.userid === userIdInMigration)) {
+                localStorage.removeItem(LOCAL_STORAGE.USER_IN_MIGRATION);
+            }
+            this.runSearch();
+        }, () => {
+            this.dataPending = false;
+            this.notifications.error('The data can not be received');
+        });
+    }
+    onMoveUser(user, index, type) {
+        const dialogRef = this.dialog.open(UserListConfirmDialogComponent, {
+            data: {
+                title: `Move user to ${type}?`,
+                message: `You\'re sure that you want to move ${user.userid} to ${type}?`,
+                confirmButtonText: 'Yes, continue'
+            }
+        });
+        dialogRef.beforeClosed().subscribe((result) => {
+            if (result) {
+                switch (type) {
+                    case 'QuickMove':
+                        this.moveUserToMT(user, index);
+                        break;
+                    case 'MT':
+                        this.moveUser = user;
+                        this.moveUserIndex = index;
+                        this.showMoveUserWizard = true;
+                        this.switchToWizard.emit(true);
+                        break;
+                    case 'DI':
+                        this.moveUserToDI(user, index);
+                        break;
+                }
+            }
+        });
+    }
+    runMoveUserToMT() {
+        this.showMoveUserWizard = false;
+        this.moveUserToMT(this.moveUser, this.moveUserIndex);
+    }
+}
+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" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\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  </app-pagination>\r\nnew users list 2\r\n  <table class=\"webex-table\" mat-table *ngIf=\"users?.length\" #table [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 mat-header-cell *matHeaderCellDef class=\"webex-table-th\">First / Last Name</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)\"> {{ user.firstName }} {{ user.lastName }}\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 class=\"user-site\" [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\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\">Status</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-user-status icon-user-status-active\"></span>{{user.status}}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user, let i = index\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\">\r\n        <mat-progress-spinner class=\"field-spinner\"\r\n                              [diameter]=\"20\"\r\n                              mode=\"indeterminate\"\r\n                              *ngIf=\"user.status === 'In Progress'\"></mat-progress-spinner>\r\n        <button *ngIf=\"!(moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid)\"\r\n                class=\"button-action-dot\" mat-icon-button [matMenuTriggerFor]=\"menu\">\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 *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'QuickMove')\">Quick Move User</button>\r\n          <button *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'MT')\">Move User to MT</button>\r\n          <button *ngIf=\"user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'DI')\">Move User to DI</button>\r\n          <button mat-menu-item [disabled]=\"true\">Deactivate User</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\">Administrator Role</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">{{ user.roleName || '' }}</td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n</div>\r\n\r\n<app-move-user-wizard *ngIf=\"showMoveUserWizard\" [user]=\"moveUser\"\r\n                      [customerId]=\"customerId\" (runMoveUser)=\"runMoveUserToMT()\"\r\n                      (closeMoveUserWizard)=\"closeMoveUserWizard()\"></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";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}.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{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:#009fdb!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-weight:400;font-size:14px}.user-info-box h3{display:block;font-weight:500;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#000;font-size:14px}.webex-table tr:hover td:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#F3F6F6;border:1px solid #E2E9EF;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.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,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}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-paginator{background:transparent!important}::ng-deep .mat-paginator-container{min-height:30px!important}::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}::ng-deep .pagination{font-size:13px;color:#0000008a}::ng-deep .per-page-block{display:flex;line-height:42px!important}::ng-deep .item_per_page{line-height:42px!important}::ng-deep .select-page-size{line-height:42px!important}::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}::ng-deep mat-progress-spinner.field-spinner{position:relative;margin:-20px auto auto}::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}\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: i4$1.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: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$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"], outputs: ["closeMoveUserWizard", "runMoveUser"] }] });
+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<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\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  </app-pagination>\r\nnew users list 2\r\n  <table class=\"webex-table\" mat-table *ngIf=\"users?.length\" #table [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 mat-header-cell *matHeaderCellDef class=\"webex-table-th\">First / Last Name</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)\"> {{ user.firstName }} {{ user.lastName }}\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 class=\"user-site\" [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\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\">Status</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-user-status icon-user-status-active\"></span>{{user.status}}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user, let i = index\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\">\r\n        <mat-progress-spinner class=\"field-spinner\"\r\n                              [diameter]=\"20\"\r\n                              mode=\"indeterminate\"\r\n                              *ngIf=\"user.status === 'In Progress'\"></mat-progress-spinner>\r\n        <button *ngIf=\"!(moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid)\"\r\n                class=\"button-action-dot\" mat-icon-button [matMenuTriggerFor]=\"menu\">\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 *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'QuickMove')\">Quick Move User</button>\r\n          <button *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'MT')\">Move User to MT</button>\r\n          <button *ngIf=\"user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'DI')\">Move User to DI</button>\r\n          <button mat-menu-item [disabled]=\"true\">Deactivate User</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\">Administrator Role</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">{{ user.roleName || '' }}</td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n</div>\r\n\r\n<app-move-user-wizard *ngIf=\"showMoveUserWizard\" [user]=\"moveUser\"\r\n                      [customerId]=\"customerId\" (runMoveUser)=\"runMoveUserToMT()\"\r\n                      (closeMoveUserWizard)=\"closeMoveUserWizard()\"></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";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}.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{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:#009fdb!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-weight:400;font-size:14px}.user-info-box h3{display:block;font-weight:500;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#000;font-size:14px}.webex-table tr:hover td:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#F3F6F6;border:1px solid #E2E9EF;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.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,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}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-paginator{background:transparent!important}::ng-deep .mat-paginator-container{min-height:30px!important}::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}::ng-deep .pagination{font-size:13px;color:#0000008a}::ng-deep .per-page-block{display:flex;line-height:42px!important}::ng-deep .item_per_page{line-height:42px!important}::ng-deep .select-page-size{line-height:42px!important}::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}::ng-deep mat-progress-spinner.field-spinner{position:relative;margin:-20px auto auto}::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}\n"] }]
+        }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }, { type: ApiWebexService }, { type: NotificationService }, { type: UsersSearchService }, { type: i1.MatDialog }]; }, propDecorators: { token: [{
+                type: Input
+            }], customerId: [{
+                type: Input
+            }], siteId: [{
+                type: Input
+            }], openUser: [{
+                type: Output
+            }], userMoved: [{
+                type: Output
+            }], switchToWizard: [{
+                type: Output
+            }], host: [{
+                type: Input
+            }] } });
+
+class EventsCommunicationService {
+    constructor() {
+        this.onSuccessfulLoginEvent = new Subject();
+    }
+}
+EventsCommunicationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EventsCommunicationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+EventsCommunicationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EventsCommunicationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EventsCommunicationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class MaterialModule {
+}
+MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [DragDropModule,
+        MatButtonModule,
+        MatListModule,
+        MatProgressSpinnerModule,
+        MatExpansionModule,
+        MatInputModule,
+        MatInputModule,
+        MatListModule,
+        MatTreeModule,
+        MatTreeModule,
+        MatNativeDateModule,
+        MatDatepickerModule,
+        MatTooltipModule,
+        MatAutocompleteModule,
+        MatChipsModule,
+        MatSidenavModule,
+        MatFormFieldModule,
+        MatStepperModule,
+        MatTabsModule,
+        MatCardModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatSlideToggleModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatMenuModule,
+        MatDialogModule,
+        MatRadioModule], exports: [DragDropModule,
+        MatButtonModule,
+        MatListModule,
+        MatProgressSpinnerModule,
+        MatExpansionModule,
+        MatInputModule,
+        MatInputModule,
+        MatListModule,
+        MatTreeModule,
+        MatTreeModule,
+        MatNativeDateModule,
+        MatDatepickerModule,
+        MatTooltipModule,
+        MatAutocompleteModule,
+        MatChipsModule,
+        MatSidenavModule,
+        MatFormFieldModule,
+        MatStepperModule,
+        MatTabsModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatSelectModule,
+        MatSlideToggleModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatMenuModule,
+        MatDialogModule,
+        MatRadioModule] });
+MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [DragDropModule,
+        MatButtonModule,
+        MatListModule,
+        MatProgressSpinnerModule,
+        MatExpansionModule,
+        MatInputModule,
+        MatInputModule,
+        MatListModule,
+        MatTreeModule,
+        MatTreeModule,
+        MatNativeDateModule,
+        MatDatepickerModule,
+        MatTooltipModule,
+        MatAutocompleteModule,
+        MatChipsModule,
+        MatSidenavModule,
+        MatFormFieldModule,
+        MatStepperModule,
+        MatTabsModule,
+        MatCardModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatSlideToggleModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatMenuModule,
+        MatDialogModule,
+        MatRadioModule, DragDropModule,
+        MatButtonModule,
+        MatListModule,
+        MatProgressSpinnerModule,
+        MatExpansionModule,
+        MatInputModule,
+        MatInputModule,
+        MatListModule,
+        MatTreeModule,
+        MatTreeModule,
+        MatNativeDateModule,
+        MatDatepickerModule,
+        MatTooltipModule,
+        MatAutocompleteModule,
+        MatChipsModule,
+        MatSidenavModule,
+        MatFormFieldModule,
+        MatStepperModule,
+        MatTabsModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatSelectModule,
+        MatSlideToggleModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatMenuModule,
+        MatDialogModule,
+        MatRadioModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        DragDropModule,
+                        MatButtonModule,
+                        MatListModule,
+                        MatProgressSpinnerModule,
+                        MatExpansionModule,
+                        MatInputModule,
+                        MatInputModule,
+                        MatListModule,
+                        MatTreeModule,
+                        MatTreeModule,
+                        MatNativeDateModule,
+                        MatDatepickerModule,
+                        MatTooltipModule,
+                        MatAutocompleteModule,
+                        MatChipsModule,
+                        MatSidenavModule,
+                        MatFormFieldModule,
+                        MatStepperModule,
+                        MatTabsModule,
+                        MatCardModule,
+                        MatSelectModule,
+                        MatCheckboxModule,
+                        MatSlideToggleModule,
+                        MatTableModule,
+                        MatPaginatorModule,
+                        MatMenuModule,
+                        MatDialogModule,
+                        MatRadioModule
+                    ],
+                    exports: [
+                        DragDropModule,
+                        MatButtonModule,
+                        MatListModule,
+                        MatProgressSpinnerModule,
+                        MatExpansionModule,
+                        MatInputModule,
+                        MatInputModule,
+                        MatListModule,
+                        MatTreeModule,
+                        MatTreeModule,
+                        MatNativeDateModule,
+                        MatDatepickerModule,
+                        MatTooltipModule,
+                        MatAutocompleteModule,
+                        MatChipsModule,
+                        MatSidenavModule,
+                        MatFormFieldModule,
+                        MatStepperModule,
+                        MatTabsModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                        MatProgressSpinnerModule,
+                        MatTableModule,
+                        MatPaginatorModule,
+                        MatMenuModule,
+                        MatDialogModule,
+                        MatRadioModule
+                    ],
+                }]
+        }] });
+
+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], imports: [BrowserModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        MaterialModule], exports: [UsersListComponent] });
+UsersListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListModule, providers: [
+        UserService,
+        APIService,
+        EventsCommunicationService,
+        UsersSearchService,
+        NotificationService,
+        RemoveKynFromIBMService,
+        ApiWebexService,
+        DnsService
+    ], imports: [BrowserModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        MaterialModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        UsersListComponent,
+                        PaginationComponent,
+                        AppLoaderComponent,
+                        MoveUserWizardComponent,
+                        MoveUserStepperComponent,
+                        UserListConfirmDialogComponent
+                    ],
+                    imports: [
+                        BrowserModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        HttpClientModule,
+                        MaterialModule
+                    ],
+                    providers: [
+                        UserService,
+                        APIService,
+                        EventsCommunicationService,
+                        UsersSearchService,
+                        NotificationService,
+                        RemoveKynFromIBMService,
+                        ApiWebexService,
+                        DnsService
+                    ],
+                    exports: [UsersListComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { APIService, EventsCommunicationService, NotificationService, RemoveKynFromIBMService, UserService, UsersListComponent, UsersListModule, UsersSearchService };
+//# sourceMappingURL=tuki-io-tuki-widgets-users-list.mjs.map