@tuki-io/tuki-widgets 0.0.5 → 0.0.7

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

@@ -0,0 +1,1232 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, Input, NgModule, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpErrorResponse, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { map, catchError } from 'rxjs/operators';
+import { of, forkJoin, throwError, Subject, BehaviorSubject } from 'rxjs';
+import * as i4 from '@angular/forms';
+import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import * as i1$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+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 * as i5$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i9 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i4$1 from '@angular/material/core';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i6$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatStepperModule } from '@angular/material/stepper';
+import * as i10 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i11 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTableModule } from '@angular/material/table';
+import * as i6 from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i6$2 from '@angular/material/divider';
+
+const apiUrl = 'http://192.168.0.191:8080';
+class APIService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+    }
+    fetch(url, params, cache) {
+        const headers = this.getHeaders(cache);
+        params = params || {};
+        return this.httpClient.get(apiUrl + url, { params: this.prepareEncodedParams(params), headers });
+    }
+    post(url, body, params = {}) {
+        body = body || null;
+        const headers = this.getHeaders();
+        return this.httpClient.post(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(apiUrl + url, body, {
+            headers,
+            observe: 'response',
+            params: this.prepareEncodedParams(params)
+        });
+    }
+    put(url, body = null, params = {}) {
+        const headers = this.getHeaders();
+        return this.httpClient.put(apiUrl + url, body, { headers, params: this.prepareEncodedParams(params) });
+    }
+    delete(url, params = {}) {
+        const headers = this.getHeaders();
+        return this.httpClient.delete(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.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.HttpClient }]; } });
+
+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",
+    LOCATION: "/api/provision/options/:siteId/locations",
+    USER_LOCALES: "/api/provision/options/:siteId/userlocales",
+    USER_PROFILES: "/api/provision/options/:siteId/userprofiles"
+};
+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 urlMap = {
+    locations: API.LOCATION,
+    userLocales: API.USER_LOCALES,
+    userProfiles: API.USER_PROFILES
+};
+class SiteSettingsService {
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    getSelectionOptions(siteId, token) {
+        if (!siteId) {
+            return;
+        }
+        // @ts-ignore
+        const URL = urlMap[token];
+        return this.apiService.fetch(URL.replace(':siteId', String(siteId)), null, true)
+            // @ts-ignore
+            .pipe(map((options) => {
+            // @ts-ignore
+            this[token] = options ? options.sort() : [];
+            // @ts-ignore
+            return this[token];
+        }));
+    }
+}
+SiteSettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteSettingsService, deps: [{ token: APIService }], target: i0.ɵɵFactoryTarget.Injectable });
+SiteSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteSettingsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteSettingsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: APIService }]; } });
+
+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;
+    }, {});
+};
+
+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.department = user.department;
+            this.manager = user.manager;
+            this.associatedPc = user.associatedPc;
+            this.digestCredentials = user.digestCredentials;
+            this.userProfile = user.userProfile;
+            this.enableMobileVoiceAccess = user.enableMobileVoiceAccess;
+            this.userLocale = user.userLocale;
+            this.confirmDigestCredentials = user.confirmDigestCredentials;
+            this.middleName = user.middleName;
+            this.telephoneNumber = user.telephoneNumber;
+            this.mobileNumber = user.mobileNumber;
+            this.directoryUri = user.directoryUri;
+            this.title = user.title;
+            this.homeNumber = user.homeNumber;
+            this.pagerNumber = user.pagerNumber;
+            this.displayName = user.displayName;
+        }
+        this.initForm();
+    }
+    initForm() {
+        const formBuilder = new FormBuilder();
+        const formSettings = {
+            userid: [{ value: this.userid || '', disabled: false }, [Validators.required, Validators.maxLength(128)]],
+            email: [{ value: this.email || '', disabled: false }, [
+                    Validators.pattern(REGEX_PATTERN.EMAIL),
+                    Validators.required
+                ]],
+            firstName: [{ value: this.firstName || '', disabled: false }],
+            lastName: [{ value: this.lastName || '', disabled: false }, Validators.required],
+            department: [{ value: this.department || '', disabled: false }],
+            middleName: [{ value: this.middleName || '', disabled: false }],
+            title: [{ value: this.title || '', disabled: false }],
+            telephoneNumber: [{ value: this.telephoneNumber || '', disabled: false }],
+            homeNumber: [{ value: this.homeNumber || '', disabled: false }],
+            mobileNumber: [{ value: this.mobileNumber || '', disabled: false }],
+            pagerNumber: [{ value: this.pagerNumber || '', disabled: false }],
+            displayName: [{ value: this.displayName || '', disabled: false }],
+            manager: [{ value: this.manager || '', disabled: false }],
+            associatedPc: [this.associatedPc || ''],
+            directoryUri: [this.directoryUri || ''],
+            userProfile: [this.userProfile],
+            enableMobileVoiceAccess: [this.enableMobileVoiceAccess],
+            userLocale: [this.userLocale || ''],
+            digestCredentials: [''],
+            confirmDigestCredentials: ['']
+        };
+        this.form = formBuilder.group(formSettings);
+    }
+    toggleEditMode() {
+        this.editMode = !this.editMode;
+        ['userid', 'email', 'firstName', 'lastName'].forEach(token => {
+            var _a, _b;
+            if (this.editMode) {
+                (_a = this.form.get(token)) === null || _a === void 0 ? void 0 : _a.enable();
+            }
+            else {
+                (_b = this.form.get(token)) === null || _b === void 0 ? void 0 : _b.disable();
+            }
+        });
+    }
+    getSavableData() {
+        const excludedFields = ['form', 'editMode', 'viewMode', 'token', 'hasModifiedCache', 'confirmDigestCredentials'];
+        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 UserService {
+    constructor(apiService) {
+        this.apiService = apiService;
+        this.siteId = -1;
+        this.userId = '';
+        this.userIdExistPending = false;
+        this.hasExistedUserId = false;
+    }
+    ngOnInit() {
+        console.log(this.siteId);
+    }
+    fetchUserToken(siteId, userId) {
+        if (this.siteId === siteId && this.userId === userId && this.user) {
+            return of(this.user);
+        }
+        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) => {
+            this.setSimplifiedUser(Object.values(result)[0]);
+        }));
+        // .pipe(this.handleError(false, true));
+    }
+    updateUserFields(body) {
+        var _a;
+        if (!this.userId || !this.siteId || !((_a = this.user) === null || _a === void 0 ? void 0 : _a.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));
+    }
+    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 === null || calls === void 0 ? void 0 : calls.length)) {
+            return of(this.user);
+        }
+        return forkJoin(calls)
+            .pipe(map((responses) => {
+            // ApiUserResponse
+            this.handleSaveUserResponse(responses);
+        }));
+        // .pipe(this.handleError(false, true));
+    }
+    hasUnsavedChanges() {
+        if (this.user && this.originUser) {
+            return !this.user.equal(this.originUser);
+        }
+        return false;
+    }
+    setSimplifiedUser(user) {
+        this.user = new SimplifiedUser(user);
+        const copiedUser = JSON.parse(JSON.stringify(user));
+        this.originUser = new SimplifiedUser(copiedUser);
+    }
+    handleSaveUserResponse(responses) {
+        if (!(responses === null || responses === void 0 ? void 0 : 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 }], 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 }]; } });
+
+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\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"120\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"], dependencies: [{ kind: "component", type: i1$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\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"120\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class AuthInterceptor {
+    constructor() {
+    }
+    intercept(request, next) {
+        request = request.clone({
+            setHeaders: {
+            // Authorization: basicAuthHeaderString
+            },
+            withCredentials: true
+        });
+        console.log('request :: ', request);
+        return next.handle(request).pipe(catchError(err => {
+            if (err instanceof HttpErrorResponse) {
+                if (err.status === 401) {
+                    if (window.history.length < 3) {
+                        err.error.message = '';
+                    }
+                    else {
+                        err.error.message = 'SESSION_INACTIVE';
+                    }
+                }
+            }
+            return throwError(err);
+        }));
+    }
+}
+AuthInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AuthInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthInterceptor });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class UserInfoComponent {
+}
+UserInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UserInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserInfoComponent, selector: "app-user-info", inputs: { name: "name", active: "active", email: "email", position: "position" }, ngImport: i0, template: "<div class=\"info-holder\">\n  <div class=\"content-box flex-box\">\n    <div class=\"info-holder__user-image\">\n      <img src=\"../../../assets/a24749b225874bb3e3a4cb5d2f42e82c.png\" alt=\"\" class=\"avatar\">\n    </div>\n    <div class=\"info-holder__user-information\">\n      <div class=\"info-holder__user-name\">{{name}}</div>\n      <div class=\"info-holder__user-breadcrumbs\">\n        <div class=\"is-active\" *ngIf=\"false; else notActive\">\n          <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"#1D805F\"/>\n          </svg>\n          <div>Active</div>\n        </div>\n        <div class=\"icon-separator\"></div>\n        <div class=\"email\">{{email}}</div>\n        <div class=\"icon-separator\"></div>\n        <div class=\"position\">{{position}}</div>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<ng-template #notActive>\n    <div class=\"is-active\">\n        <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n        </svg>\n        <div>Not active</div>\n    </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;margin:0 0 30px}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{padding:10px;margin:10px;gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:500}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .icon-separator{height:5px;width:5px;background-color:#000000b3;border-radius:50%}.info-holder .is-active{display:flex;gap:8px;align-items:center}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-user-info', template: "<div class=\"info-holder\">\n  <div class=\"content-box flex-box\">\n    <div class=\"info-holder__user-image\">\n      <img src=\"../../../assets/a24749b225874bb3e3a4cb5d2f42e82c.png\" alt=\"\" class=\"avatar\">\n    </div>\n    <div class=\"info-holder__user-information\">\n      <div class=\"info-holder__user-name\">{{name}}</div>\n      <div class=\"info-holder__user-breadcrumbs\">\n        <div class=\"is-active\" *ngIf=\"false; else notActive\">\n          <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"#1D805F\"/>\n          </svg>\n          <div>Active</div>\n        </div>\n        <div class=\"icon-separator\"></div>\n        <div class=\"email\">{{email}}</div>\n        <div class=\"icon-separator\"></div>\n        <div class=\"position\">{{position}}</div>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<ng-template #notActive>\n    <div class=\"is-active\">\n        <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z\" fill=\"grey\"/>\n        </svg>\n        <div>Not active</div>\n    </div>\n</ng-template>\n", styles: [".info-holder{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif;height:102px;width:100%;background:white;margin:0 0 30px}.info-holder__user-image img{width:40px;border-radius:120px;margin:20px 0 0}.info-holder__user-information{padding:10px;margin:10px;gap:10px;display:flex;flex-direction:column}.info-holder__user-name{font-size:20px;font-weight:500}.info-holder__user-breadcrumbs{display:flex;gap:8px;font-weight:400;font-size:14px;color:#000000b3;align-items:center}.info-holder .icon-separator{height:5px;width:5px;background-color:#000000b3;border-radius:50%}.info-holder .is-active{display:flex;gap:8px;align-items:center}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], email: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }] } });
+
+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], 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] });
+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, 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] });
+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
+                    ],
+                    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
+                    ],
+                }]
+        }] });
+
+const environment = {
+    production: false,
+    // apiUrl: 'http://localhost:4200',
+    apiUrl: 'http://192.168.0.191:8080',
+    notificationsLifetime: 30000,
+    longNotificationsLifetime: 45000,
+    cashCleanTimer: 900000,
+    cashArrayLength: 10000,
+    matomoUrl: 'http://192.168.0.136/matomo/',
+};
+
+const TTL_DEFAULT = environment.notificationsLifetime;
+const TTL_LONG_DEFAULT = environment.longNotificationsLifetime;
+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 NotificationsComponent {
+    constructor(notificationService, ref) {
+        this.notificationService = notificationService;
+        this.ref = ref;
+    }
+    ngOnInit() {
+        this.listChangeSubscribe();
+    }
+    ngOnDestroy() {
+        this.listSubscription.unsubscribe();
+    }
+    readMore() {
+        this.isReadMore = !this.isReadMore;
+    }
+    removeNotification(notification) {
+        this.notificationService.remove(notification);
+    }
+    listChangeSubscribe() {
+        this.listSubscription = this.notificationService.listChange
+            .subscribe((list) => {
+            this.list = list;
+            this.ref.detectChanges();
+        });
+    }
+}
+NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationsComponent, deps: [{ token: NotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationsComponent, selector: "app-notification", ngImport: i0, template: "<!--\n\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\n  <div class=\"notification\"\n       *ngFor=\"let notification of list\"\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\n\n    <div class=\"flex-box\">\n      <div class=\"notification-icons-block\">\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\n      </div>\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\n        {{notification.message | truncate:[93]}}\n      </div>\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\n        {{notification.message}}\n      </div>\n    </div>\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\n         (click)=\"readMore()\">{{(isReadMore ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>\n    <button\n      class=\"close\"\n      mat-icon-button\n      matTooltip=\"{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}\"\n      (click)=\"removeNotification(notification)\">\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\n    </button>\n  </div>\n</div>\n-->\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.notification-block{right:0;top:110px;position:absolute;width:20%;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .notification-icons-block{text-align:center;width:56px}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\n  <div class=\"notification\"\n       *ngFor=\"let notification of list\"\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\n\n    <div class=\"flex-box\">\n      <div class=\"notification-icons-block\">\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\n      </div>\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\n        {{notification.message | truncate:[93]}}\n      </div>\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\n        {{notification.message}}\n      </div>\n    </div>\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\n         (click)=\"readMore()\">{{(isReadMore ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>\n    <button\n      class=\"close\"\n      mat-icon-button\n      matTooltip=\"{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}\"\n      (click)=\"removeNotification(notification)\">\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\n    </button>\n  </div>\n</div>\n-->\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.notification-block{right:0;top:110px;position:absolute;width:20%;z-index:100}.notification-block .read-more-error{margin:10px 13px 3px 0;text-align:right}.notification-block .notification{padding:15px 0 10px;margin-bottom:18px;color:#333;border-radius:3px;border-top:1.5px solid #e5e1cd;background:#fcf8e3;box-shadow:0 8px 12px #091e4226,0 0 1px #091e424f;width:368px;position:relative}.notification-block .notification .notification-icons-block{text-align:center;width:56px}.notification-block .notification .message-block{font-size:14px;font-family:Poppins,Poppins,sans-serif!important;word-break:break-word;width:270px}.notification-block .notification .notification-icon-close{height:24px}.notification-block .notification.error{background:#FFE9E9;border-top:1.5px solid #E16D6D}.notification-block .notification.success{background:#e3f4dc;border-top:1.5px solid #b3d692}.notification-block .notification .fa-exclamation-triangle{color:#e16d6d!important}.notification-block .notification .fa-check{color:#a0c37f!important}.notification-block .notification .fa-info-circle,.notification-block .notification .fa-hand-paper-o{color:#bdb89e!important}.notification-block .notification .fa{font-size:20px}.notification-block .notification .close{position:absolute;top:2px;right:-5px}.notification-block .notification .close .fa{font-size:14px}.notification-block .notification .fa{margin:0;color:inherit}@media screen and (max-width: 600px){.notification-block{width:50%;min-width:150px}}\n"] }]
+        }], ctorParameters: function () { return [{ type: NotificationService }, { type: i0.ChangeDetectorRef }]; } });
+
+class ListUser {
+    constructor(user) {
+        this.devices = [];
+        this.deviceProfiles = [];
+        if (user) {
+            Object.assign(this, user);
+        }
+    }
+}
+
+let RemoveKynFromIBMService$1 = 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$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveKynFromIBMService$1, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RemoveKynFromIBMService$1.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveKynFromIBMService$1 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveKynFromIBMService$1, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class UsersSearchService {
+    constructor(apiService, removeKynFromIBMService) {
+        this.apiService = apiService;
+        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
+        };
+    }
+    quickRegularUsersSearch() {
+        this.searchParams = this.searchParams || { customerid: this.customerId };
+        return this.apiService.fetchPagination(API.QUICK_USERS_SEARCH, this.pageSize, this.pageIndex, this.searchParams)
+            .pipe(map((res) => {
+            this.total = res.total;
+            // this.totals = this.totals || {};
+            // this.totals['users'] = res.total;
+            const users = res.pageData && res.pageData.length ? res.pageData.map(user => new ListUser(user)) : [];
+            // this.foundUsers$.next(this.removeKynFromIBMService.removeCUCMS(users, this.customerId));
+            this.foundUsers$.next(users);
+        }));
+        // .pipe(this.handleError(true));
+    }
+}
+UsersSearchService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersSearchService, deps: [{ token: APIService }, { token: RemoveKynFromIBMService$1 }], 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: RemoveKynFromIBMService$1 }]; } });
+
+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\">\n  <div class=\"page-indexes-box\">\n    <mat-paginator\n      [id]=\"'commonPagination'\"\n      [hidePageSize]=\"true\"\n      [length]=\"pagination.total\"\n      [pageIndex]=\"pagination.pageIndex\"\n      [pageSize]=\"pagination.pageSize\"\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\n      (page)=\"pageEvent($event)\">\n    </mat-paginator>\n    <mat-spinner class=\"length-spinner\" [diameter]=\"20\" mode=\"indeterminate\" *ngIf=\"lengthPending\">\n    </mat-spinner>\n  </div>\n\n  <div class=\"flex-box per-page-block\" *ngIf=\"showPageSizeOptions\">\n    <div class=\"item_per_page\">Items per page:</div>\n    <div class=\"select-box select-page-size\">\n      <mat-select [(ngModel)]=\"pagination.pageSize\" (selectionChange)=\"changePerPageNumber($event)\" #page\n                  [id]=\"'commonPaginationSelect'\">\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\n      </mat-select>\n    </div>\n\n  </div>\n</div>\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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.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\">\n  <div class=\"page-indexes-box\">\n    <mat-paginator\n      [id]=\"'commonPagination'\"\n      [hidePageSize]=\"true\"\n      [length]=\"pagination.total\"\n      [pageIndex]=\"pagination.pageIndex\"\n      [pageSize]=\"pagination.pageSize\"\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\n      (page)=\"pageEvent($event)\">\n    </mat-paginator>\n    <mat-spinner class=\"length-spinner\" [diameter]=\"20\" mode=\"indeterminate\" *ngIf=\"lengthPending\">\n    </mat-spinner>\n  </div>\n\n  <div class=\"flex-box per-page-block\" *ngIf=\"showPageSizeOptions\">\n    <div class=\"item_per_page\">Items per page:</div>\n    <div class=\"select-box select-page-size\">\n      <mat-select [(ngModel)]=\"pagination.pageSize\" (selectionChange)=\"changePerPageNumber($event)\" #page\n                  [id]=\"'commonPaginationSelect'\">\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\n      </mat-select>\n    </div>\n\n  </div>\n</div>\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 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 LazyLoadingSelectComponent {
+    get formControl() {
+        var _a;
+        return (_a = this.form) === null || _a === void 0 ? void 0 : _a.get(this.controlName);
+    }
+    constructor(notificationService, siteSettingsService) {
+        this.notificationService = notificationService;
+        this.siteSettingsService = siteSettingsService;
+        this.standalone = true;
+        this.appearance = 'standard';
+        this.changeField = new EventEmitter();
+    }
+    ngAfterContentInit() {
+        var _a, _b;
+        this.options = [(_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get(this.controlName)) === null || _b === void 0 ? void 0 : _b.value];
+    }
+    getOptions() {
+        if (!this.siteId && this.options.length > 1) {
+            return;
+        }
+        this.optionsPending = true;
+        this.siteSettingsService.getSelectionOptions(this.siteId, this.optionsToken)
+            .subscribe(() => {
+            this.optionsPending = false;
+            // @ts-ignore
+            this.options = this.siteSettingsService[this.optionsToken];
+        }, () => {
+            this.optionsPending = false;
+            // this.notificationService.error(this.translate.instant('COMMON.LOAD_SELECT_OPTIONS_FAILED'));
+        });
+    }
+    onFieldChange(token) {
+        this.changeField.emit(token);
+    }
+}
+LazyLoadingSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LazyLoadingSelectComponent, deps: [{ token: NotificationService }, { token: SiteSettingsService }], target: i0.ɵɵFactoryTarget.Component });
+LazyLoadingSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LazyLoadingSelectComponent, selector: "app-lazy-loading-select", inputs: { siteId: "siteId", form: "form", standalone: "standalone", placeholder: "placeholder", controlName: "controlName", optionsToken: "optionsToken", appearance: "appearance", errorCode: "errorCode", errorText: "errorText", default: "default", id: "id" }, outputs: { changeField: "changeField" }, ngImport: i0, template: "<ng-container *ngIf=\"standalone\">\n  <mat-form-field appearance=\"outline\">\n    <mat-select [formControl]=\"formControl\"\n                (openedChange)=\"getOptions()\"\n                [placeholder]=\"placeholder\"\n                (selectionChange)=\"onFieldChange(controlName)\"\n                [id]=\"id\">\n      <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\n      <mat-option *ngFor=\"let type of options\" [value]=\"type\">\n        {{type}}\n      </mat-option>\n      <mat-progress-spinner class=\"field-spinner\"\n                            [diameter]=\"20\"\n                            mode=\"indeterminate\"\n                            *ngIf=\"optionsPending\"></mat-progress-spinner>\n    </mat-select>\n    <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\n      <i class=\"fa fa-exclamation-triangle\"></i>\n      {{errorText}}\n    </mat-error>\n  </mat-form-field>\n</ng-container>\n\n<!--\nThis duplication is caused by the following bug: https://github.com/angular/components/issues/9411\nWhich doesn't allow projection in mat-form-field\n-->\n\n<ng-container *ngIf=\"!standalone\">\n  <mat-select *ngIf=\"form.get(controlName)\"\n              [formControl]=\"formControl\"\n              (openedChange)=\"getOptions()\"\n              [placeholder]=\"placeholder\"\n              (selectionChange)=\"onFieldChange(controlName)\"\n              [id]=\"id\"\n  >\n    <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\n    <mat-option *ngFor=\"let type of options\" [value]=\"type\">\n      {{type}}\n    </mat-option>\n    <mat-progress-spinner class=\"field-spinner\"\n                          [diameter]=\"20\"\n                          mode=\"indeterminate\"\n                          *ngIf=\"optionsPending\"></mat-progress-spinner>\n  </mat-select>\n  <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\n    <i class=\"fa fa-exclamation-triangle\"></i>\n    {{errorText}}\n  </mat-error>\n</ng-container>\n", styles: [".field-spinner{margin-top:-30px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LazyLoadingSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-lazy-loading-select', template: "<ng-container *ngIf=\"standalone\">\n  <mat-form-field appearance=\"outline\">\n    <mat-select [formControl]=\"formControl\"\n                (openedChange)=\"getOptions()\"\n                [placeholder]=\"placeholder\"\n                (selectionChange)=\"onFieldChange(controlName)\"\n                [id]=\"id\">\n      <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\n      <mat-option *ngFor=\"let type of options\" [value]=\"type\">\n        {{type}}\n      </mat-option>\n      <mat-progress-spinner class=\"field-spinner\"\n                            [diameter]=\"20\"\n                            mode=\"indeterminate\"\n                            *ngIf=\"optionsPending\"></mat-progress-spinner>\n    </mat-select>\n    <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\n      <i class=\"fa fa-exclamation-triangle\"></i>\n      {{errorText}}\n    </mat-error>\n  </mat-form-field>\n</ng-container>\n\n<!--\nThis duplication is caused by the following bug: https://github.com/angular/components/issues/9411\nWhich doesn't allow projection in mat-form-field\n-->\n\n<ng-container *ngIf=\"!standalone\">\n  <mat-select *ngIf=\"form.get(controlName)\"\n              [formControl]=\"formControl\"\n              (openedChange)=\"getOptions()\"\n              [placeholder]=\"placeholder\"\n              (selectionChange)=\"onFieldChange(controlName)\"\n              [id]=\"id\"\n  >\n    <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\n    <mat-option *ngFor=\"let type of options\" [value]=\"type\">\n      {{type}}\n    </mat-option>\n    <mat-progress-spinner class=\"field-spinner\"\n                          [diameter]=\"20\"\n                          mode=\"indeterminate\"\n                          *ngIf=\"optionsPending\"></mat-progress-spinner>\n  </mat-select>\n  <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\n    <i class=\"fa fa-exclamation-triangle\"></i>\n    {{errorText}}\n  </mat-error>\n</ng-container>\n", styles: [".field-spinner{margin-top:-30px}\n"] }]
+        }], ctorParameters: function () { return [{ type: NotificationService }, { type: SiteSettingsService }]; }, propDecorators: { siteId: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], standalone: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], optionsToken: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], errorCode: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], default: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], changeField: [{
+                type: Output
+            }] } });
+
+class UserManageWidgetComponent {
+    get form() {
+        var _a, _b;
+        return (_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.form;
+    }
+    get user() {
+        return this.userService.user;
+    }
+    get userName() {
+        var _a, _b;
+        return `${((_a = this.user) === null || _a === void 0 ? void 0 : _a.firstName) || ''} ${((_b = this.user) === null || _b === void 0 ? void 0 : _b.lastName) || ''}`;
+    }
+    constructor(userService, apiService) {
+        this.userService = userService;
+        this.apiService = apiService;
+        this.onSave = new EventEmitter();
+    }
+    ngOnInit() {
+        this.apiService.token = this.token;
+        this.getData();
+    }
+    onChangeField(token) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!token) {
+            return;
+        }
+        this.userService.user[token] = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get(token)) === null || _b === void 0 ? void 0 : _b.value;
+        if (token === 'middleName') {
+            (_d = (_c = this.form) === null || _c === void 0 ? void 0 : _c.get(token)) === null || _d === void 0 ? void 0 : _d.setValidators([Validators.pattern('[ a-zA-Z-]+')]);
+        }
+        if (token === 'telephoneNumber' || token === 'mobileNumber' || token === 'pagerNumber' || token === 'homeNumber') {
+            (_f = (_e = this.form) === null || _e === void 0 ? void 0 : _e.get(token)) === null || _f === void 0 ? void 0 : _f.setValidators([Validators.pattern('[ 0-9-+]+')]);
+        }
+        (_h = (_g = this.form) === null || _g === void 0 ? void 0 : _g.get(token)) === null || _h === void 0 ? void 0 : _h.updateValueAndValidity();
+        this.validateUserId();
+    }
+    saveChanges() {
+        var _a;
+        this.onSave.next("start saving..");
+        if (!this.userService.hasUnsavedChanges() || ((_a = this.form) === null || _a === void 0 ? void 0 : _a.invalid)) {
+            return;
+        }
+        this.userService.persistCacheChanges()
+            .subscribe(() => {
+            this.onSave.next("saved");
+        });
+    }
+    toggleEditMode() {
+        this.userService.user.toggleEditMode();
+    }
+    isSavingDisabled() {
+        return !this.userService.hasUnsavedChanges() || this.userService.hasExistedUserId;
+    }
+    changeField(token) {
+        var _a, _b;
+        const formField = (_b = (_a = this.user) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.get(token);
+        if (token !== 'confirmDigestCredentials') {
+            // @ts-ignore
+            this.user[token] = formField === null || formField === void 0 ? void 0 : formField.value;
+        }
+        if (token === 'digestCredentials' || token === 'confirmDigestCredentials') {
+            this.digestCredentialsHandler(token, formField);
+        }
+    }
+    digestCredentialsHandler(token, field) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const fieldNameToCompare = token === 'digestCredentials' ? 'confirmDigestCredentials' : 'digestCredentials';
+        const fieldToCompare = this.userService.user.form.get(fieldNameToCompare);
+        if ((_b = (_a = this.userService.user) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.get(token)) {
+            (_e = (_d = (_c = this.userService.user) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.get(token)) === null || _e === void 0 ? void 0 : _e.setErrors(null);
+            (_h = (_g = (_f = this.userService.user) === null || _f === void 0 ? void 0 : _f.form) === null || _g === void 0 ? void 0 : _g.get(fieldNameToCompare)) === null || _h === void 0 ? void 0 : _h.setErrors(null);
+            /* if (!field.value && !fieldToCompare.value) {
+               this.userService.user?.digestCredentials = null;
+               return;
+             }
+       
+             if (!field.value && fieldToCompare.value || !fieldToCompare.value && field.value) {
+               const requiredFieldName = field.value ? fieldNameToCompare : token;
+               this.userService.user.form.get(requiredFieldName).setErrors({required: true});
+               return;
+             }
+             if (field.value && fieldToCompare.value && field.value !== fieldToCompare.value) {
+               this.userService.user.form.get(token).setErrors({mismatch: true});
+               this.userService.user.form.get(fieldNameToCompare).setErrors({mismatch: true});
+             }*/
+        }
+    }
+    getData() {
+        this.dataPending = true;
+        this.userService.fetchUserToken(this.siteId, this.userId)
+            .subscribe({
+            complete: (v) => {
+                this.dataPending = false;
+            },
+            error: (e) => this.dataPending = false,
+        });
+    }
+    setCookie(name, value, days) {
+        var expires = "";
+        if (days) {
+            var date = new Date();
+            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+            expires = "; expires=" + date.toUTCString();
+        }
+        document.cookie = name + "=" + (value || "") + expires + "; path=/";
+    }
+    validateUserId() {
+        var _a, _b;
+        const idControl = this.form.get('userid');
+        if ((idControl === null || idControl === void 0 ? void 0 : idControl.value) !== '' && (idControl === null || idControl === void 0 ? void 0 : idControl.value) !== this.userService.originUser.userid) {
+            this.userService.fetchUserById(idControl === null || idControl === void 0 ? void 0 : idControl.value)
+                .subscribe((res) => {
+                var _a, _b;
+                this.userService.userIdExistPending = false;
+                idControl === null || idControl === void 0 ? void 0 : idControl.setErrors({ exist: true });
+                if ((_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get('userid')) === null || _b === void 0 ? void 0 : _b.hasError('exist')) {
+                    this.userService.hasExistedUserId = true;
+                }
+                else {
+                    this.userService.hasExistedUserId = false;
+                }
+            }, ((error) => {
+                var _a, _b;
+                this.userService.userIdExistPending = false;
+                if (error.status !== 404) {
+                    // this.notificationService.warning(this.translate.instant('APP_USER_MSG.CHECK_USER_ID_FAILED'));
+                }
+                else {
+                    this.userService.user.newUserId = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get('userid')) === null || _b === void 0 ? void 0 : _b.value;
+                }
+            }));
+        }
+        else {
+            (_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? true : delete _b.newUserId;
+        }
+    }
+}
+UserManageWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, deps: [{ token: UserService }, { token: APIService }], target: i0.ɵɵFactoryTarget.Component });
+UserManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserManageWidgetComponent, selector: "app-user-manage-widget", inputs: { token: "token", siteId: "siteId", userId: "userId" }, outputs: { onSave: "onSave" }, ngImport: i0, template: "<div class=\"header-box\">\n  <div class=\"content-box\">\n    <div class=\"header-back-block\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z\" fill=\"black\" fill-opacity=\"0.95\"/>\n      </svg>\n      Users\n    </div>\n    <div class=\"header-button-block\">\n      <button mat-raised-button\n              [disabled]=\"!userService.hasUnsavedChanges()\"\n              (click)=\"saveChanges()\">Save</button>\n    </div>\n  </div>\n</div>\n<app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"false\" [position]=\"'Sales Senior VP'\"></app-user-info>\n\n<mat-tab-group disableRipple class=\"content-box\">\n  <mat-tab label=\"Profile\">\n    <ng-container *ngTemplateOutlet=\"userProfile\">\n    </ng-container>\n  </mat-tab>\n  <mat-tab ></mat-tab>\n  <mat-tab ></mat-tab>\n  <mat-tab ></mat-tab>\n</mat-tab-group>\n\n<ng-template #userProfile>\n  <form *ngIf=\"user && form\" [formGroup]=\"form\">\n    <div class=\"info-boxes-container\">\n      <div *ngIf=\"dataPending == true\" class=\"data-loader\">\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\n      </div>\n\n      <!--    USER INFO BOX-->\n      <div class=\"user-info-box user-details-box\">\n        <h3 class=\"user-box-title\">User General Info</h3>\n        <div class=\"form-holder__inputs\">\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">User Id</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"userid\"\n                       matInput (input)=\"onChangeField('userid')\">\n                <mat-error\n                  *ngIf=\"form.get('userid').hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </mat-error>\n                <mat-error *ngIf=\"form.get('userid').hasError('exist')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  User ID already exists\n                </mat-error>\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Email</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"email\"\n                       matInput (input)=\"onChangeField('email')\">\n                <mat-error\n                  *ngIf=\"form.get('email').touched && form.get('email').hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </mat-error>\n                <mat-error *ngIf=\"form.get('email').touched && form.get('email').hasError('pattern')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  Please enter valid email\n                </mat-error>\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Fisrt Name</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"firstName\"\n                       matInput (input)=\"onChangeField('firstName')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Last Name</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"lastName\"\n                       matInput (input)=\"onChangeField('lastName')\">\n                <mat-error\n                  *ngIf=\"form.get('lastName').touched && form.get('lastName').hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </mat-error>\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n        </div>\n\n      </div>\n\n\n      <!--    USER INFO BOX-->\n      <div class=\"user-info-box user-details-box\">\n        <h3 class=\"user-box-title\">User General Info</h3>\n        <div class=\"form-holder__inputs\">\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Department</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Manager user ID</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Associated PC</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Digest credentials</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"digestCredentials\" matInput type=\"text\" (input)=\"onChangeField('digestCredentials')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">User profile</div>\n            <div class=\"input-holder__input\">\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userProfile'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField('userProfile')\"\n                [optionsToken]=\"'userProfiles'\"\n              ></app-lazy-loading-select>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Mobile voice access</div>\n            <div class=\"input-holder__input\">\n              <mat-slide-toggle\n                formControlName=\"enableMobileVoiceAccess\"\n                (change)=\"onChangeField('enableMobileVoiceAccess')\"\n                [checked]=\"user.enableMobileVoiceAccess\">\n              </mat-slide-toggle>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Userlocale</div>\n            <div class=\"input-holder__input\">\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userLocale'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField($event)\"\n                [optionsToken]=\"'userLocales'\"\n                [default]=\"{key: '', value: 'None', disabled: false}\">\n              </app-lazy-loading-select>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Confirm digest credentials</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\" (input)=\"onChangeField('confirmDigestCredentials')\">\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!--    USER INFO BOX-->\n      <div class=\"user-info-box user-details-box\">\n        <h3 class=\"user-box-title\">Contact Information</h3>\n        <div class=\"form-holder__inputs\">\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Middle Name</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Telephone Number</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"number\" formControlName=\"telephoneNumber\" (input)=\"onChangeField('telephoneNumber')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Mobile Number</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Digest credentials</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"text\" formControlName=\"digestCredentials\" (input)=\"onChangeField('digestCredentials')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Diractory URI</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Title</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Home Number</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Pager Number</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Display Name</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </form>\n</ng-template>\n\n<mat-progress-spinner *ngIf=\"dataPending\"\n  class=\"page-spinner\"\n  mode=\"indeterminate\"\n  [diameter]=\"120\"></mat-progress-spinner>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.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(../assets/icons/icon_user.svg)}.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:70%}.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:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#F3F6F6;border:1px solid #E2E9EF;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.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{padding:0;max-width:300px}.mat-divider{margin:12px 0}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$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: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i1$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.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: i10.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: UserInfoComponent, selector: "app-user-info", inputs: ["name", "active", "email", "position"] }, { kind: "component", type: LazyLoadingSelectComponent, selector: "app-lazy-loading-select", inputs: ["siteId", "form", "standalone", "placeholder", "controlName", "optionsToken", "appearance", "errorCode", "errorText", "default", "id"], outputs: ["changeField"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-user-manage-widget', template: "<div class=\"header-box\">\n  <div class=\"content-box\">\n    <div class=\"header-back-block\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z\" fill=\"black\" fill-opacity=\"0.95\"/>\n      </svg>\n      Users\n    </div>\n    <div class=\"header-button-block\">\n      <button mat-raised-button\n              [disabled]=\"!userService.hasUnsavedChanges()\"\n              (click)=\"saveChanges()\">Save</button>\n    </div>\n  </div>\n</div>\n<app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"false\" [position]=\"'Sales Senior VP'\"></app-user-info>\n\n<mat-tab-group disableRipple class=\"content-box\">\n  <mat-tab label=\"Profile\">\n    <ng-container *ngTemplateOutlet=\"userProfile\">\n    </ng-container>\n  </mat-tab>\n  <mat-tab ></mat-tab>\n  <mat-tab ></mat-tab>\n  <mat-tab ></mat-tab>\n</mat-tab-group>\n\n<ng-template #userProfile>\n  <form *ngIf=\"user && form\" [formGroup]=\"form\">\n    <div class=\"info-boxes-container\">\n      <div *ngIf=\"dataPending == true\" class=\"data-loader\">\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\n      </div>\n\n      <!--    USER INFO BOX-->\n      <div class=\"user-info-box user-details-box\">\n        <h3 class=\"user-box-title\">User General Info</h3>\n        <div class=\"form-holder__inputs\">\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">User Id</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"userid\"\n                       matInput (input)=\"onChangeField('userid')\">\n                <mat-error\n                  *ngIf=\"form.get('userid').hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </mat-error>\n                <mat-error *ngIf=\"form.get('userid').hasError('exist')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  User ID already exists\n                </mat-error>\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Email</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"email\"\n                       matInput (input)=\"onChangeField('email')\">\n                <mat-error\n                  *ngIf=\"form.get('email').touched && form.get('email').hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </mat-error>\n                <mat-error *ngIf=\"form.get('email').touched && form.get('email').hasError('pattern')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  Please enter valid email\n                </mat-error>\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Fisrt Name</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"firstName\"\n                       matInput (input)=\"onChangeField('firstName')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Last Name</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"lastName\"\n                       matInput (input)=\"onChangeField('lastName')\">\n                <mat-error\n                  *ngIf=\"form.get('lastName').touched && form.get('lastName').hasError('required')\">\n                  <i class=\"fa fa-exclamation-triangle\"></i>\n                  This field is required\n                </mat-error>\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n        </div>\n\n      </div>\n\n\n      <!--    USER INFO BOX-->\n      <div class=\"user-info-box user-details-box\">\n        <h3 class=\"user-box-title\">User General Info</h3>\n        <div class=\"form-holder__inputs\">\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Department</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Manager user ID</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Associated PC</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Digest credentials</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"digestCredentials\" matInput type=\"text\" (input)=\"onChangeField('digestCredentials')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">User profile</div>\n            <div class=\"input-holder__input\">\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userProfile'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField('userProfile')\"\n                [optionsToken]=\"'userProfiles'\"\n              ></app-lazy-loading-select>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Mobile voice access</div>\n            <div class=\"input-holder__input\">\n              <mat-slide-toggle\n                formControlName=\"enableMobileVoiceAccess\"\n                (change)=\"onChangeField('enableMobileVoiceAccess')\"\n                [checked]=\"user.enableMobileVoiceAccess\">\n              </mat-slide-toggle>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Userlocale</div>\n            <div class=\"input-holder__input\">\n              <app-lazy-loading-select\n                [siteId]=\"siteId\"\n                [controlName]=\"'userLocale'\"\n                [form]=\"user.form\"\n                (changeField)=\"changeField($event)\"\n                [optionsToken]=\"'userLocales'\"\n                [default]=\"{key: '', value: 'None', disabled: false}\">\n              </app-lazy-loading-select>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Confirm digest credentials</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\" (input)=\"onChangeField('confirmDigestCredentials')\">\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!--    USER INFO BOX-->\n      <div class=\"user-info-box user-details-box\">\n        <h3 class=\"user-box-title\">Contact Information</h3>\n        <div class=\"form-holder__inputs\">\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Middle Name</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Telephone Number</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"number\" formControlName=\"telephoneNumber\" (input)=\"onChangeField('telephoneNumber')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Mobile Number</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Digest credentials</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"text\" formControlName=\"digestCredentials\" (input)=\"onChangeField('digestCredentials')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Diractory URI</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Title</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Home Number</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Pager Number</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-divider></mat-divider>\n          <div class=\"input-holder\">\n            <div class=\"input-holder__name\">Display Name</div>\n            <div class=\"input-holder__input\">\n              <mat-form-field appearance=\"outline\">\n                <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </form>\n</ng-template>\n\n<mat-progress-spinner *ngIf=\"dataPending\"\n  class=\"page-spinner\"\n  mode=\"indeterminate\"\n  [diameter]=\"120\"></mat-progress-spinner>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.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(../assets/icons/icon_user.svg)}.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:70%}.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:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#F3F6F6;border:1px solid #E2E9EF;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.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{padding:0;max-width:300px}.mat-divider{margin:12px 0}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }]; }, propDecorators: { onSave: [{
+                type: Output
+            }], token: [{
+                type: Input
+            }], siteId: [{
+                type: Input
+            }], userId: [{
+                type: Input
+            }] } });
+
+class UserManageModule {
+}
+UserManageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UserManageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UserManageModule, declarations: [AppLoaderComponent,
+        UserInfoComponent,
+        NotificationsComponent,
+        PaginationComponent,
+        LazyLoadingSelectComponent,
+        UserManageWidgetComponent], imports: [CommonModule,
+        BrowserModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        MaterialModule], exports: [UserManageWidgetComponent] });
+UserManageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageModule, providers: [
+        APIService,
+        UserService,
+        NotificationService,
+        UsersSearchService,
+        RemoveKynFromIBMService,
+        SiteSettingsService,
+        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
+    ], imports: [CommonModule,
+        BrowserModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        MaterialModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AppLoaderComponent,
+                        UserInfoComponent,
+                        NotificationsComponent,
+                        PaginationComponent,
+                        LazyLoadingSelectComponent,
+                        UserManageWidgetComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BrowserModule,
+                        BrowserAnimationsModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        HttpClientModule,
+                        MaterialModule,
+                    ],
+                    providers: [
+                        APIService,
+                        UserService,
+                        NotificationService,
+                        UsersSearchService,
+                        RemoveKynFromIBMService,
+                        SiteSettingsService,
+                        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
+                    ],
+                    exports: [UserManageWidgetComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { APIService, SiteSettingsService, UserManageModule, UserManageWidgetComponent, UserService, UtilsService };
+//# sourceMappingURL=tuki-io-tuki-widgets-user-manage.mjs.map