@tuki-io/tuki-widgets 0.0.6 → 0.0.8

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

@@ -0,0 +1,869 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import * as i6$1 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { of, forkJoin, Subject, BehaviorSubject } from 'rxjs';
+import * as i2 from '@angular/forms';
+import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { map } from 'rxjs/operators';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i1$1 from '@angular/common';
+import * as i3 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i4 from '@angular/material/core';
+import { MatNativeDateModule } from '@angular/material/core';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i6 from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { BrowserModule } from '@angular/platform-browser';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTreeModule } from '@angular/material/tree';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+
+const getSavableData = (model, exclude) => {
+    let result = Object.keys(model);
+    if (exclude && exclude.length) {
+        result = result.filter(key => !exclude.some(item => item === key));
+    }
+    return result.reduce((result, key) => {
+        if (model[key] instanceof Array && model[key].length && model[key][0].getSavableData) {
+            result[key] = model[key].map((item) => item.getSavableData());
+        }
+        else if (model[key] instanceof Object && model[key].getSavableData) {
+            result[key] = model[key].getSavableData();
+        }
+        else {
+            result[key] = model[key];
+        }
+        return result;
+    }, {});
+};
+
+const API = {
+    USER_TOKEN: '/api/provision/:siteId/users/:userId/token',
+    UPDATE_USER_FIELDS: '/api/provision/:siteId/userFields/:token',
+    PERSIST_USER_CACHE: '/api/provision/:siteId/saveUser/:token',
+    USER_BY_ID: '/api/provision/:siteId/users/:userId',
+    QUICK_USERS_SEARCH: "/api/search/quickusers"
+};
+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
+];
+
+class SimplifiedUser {
+    constructor(user) {
+        if (user) {
+            this.userid = user.userid;
+            this.email = user.email;
+            this.firstName = user.firstName;
+            this.lastName = user.lastName;
+            this.token = user.token;
+        }
+        this.initForm();
+    }
+    initForm() {
+        const formBuilder = new FormBuilder();
+        const formSettings = {
+            userid: [{ value: this.userid || '', disabled: true }, [Validators.required, Validators.maxLength(128)]],
+            email: [{ value: this.email || '', disabled: true }, [
+                    Validators.pattern(REGEX_PATTERN.EMAIL),
+                    Validators.required
+                ]],
+            firstName: [{ value: this.firstName || '', disabled: true }],
+            lastName: [{ value: this.lastName || '', disabled: true }, Validators.required],
+        };
+        this.form = formBuilder.group(formSettings);
+    }
+    toggleEditMode() {
+        this.editMode = !this.editMode;
+        ['userid', 'email', 'firstName', 'lastName'].forEach(token => {
+            if (this.editMode) {
+                this.form.get(token)?.enable();
+            }
+            else {
+                this.form.get(token)?.disable();
+            }
+        });
+    }
+    getSavableData() {
+        const excludedFields = ['form', 'editMode', 'viewMode', 'token', 'hasModifiedCache'];
+        return getSavableData(this, excludedFields);
+    }
+    equal(userToCompare) {
+        if (!userToCompare) {
+            return false;
+        }
+        return JSON.stringify(this.getSavableData()) === JSON.stringify(userToCompare.getSavableData());
+    }
+}
+
+class UtilsService {
+    static sortSortArrayByProperty(array, sortBy) {
+        if (!array) {
+            return null;
+        }
+        return array.sort((a, b) => {
+            if (!a[sortBy] && !b[sortBy]) {
+                return 0;
+            }
+            if (a[sortBy] && !b[sortBy]) {
+                return 1;
+            }
+            if (!a[sortBy] && b[sortBy]) {
+                return -1;
+            }
+            const positionA = a[sortBy];
+            const positionB = b[sortBy];
+            return (positionA < positionB) ? -1 : (positionA > positionB) ? 1 : 0;
+        });
+    }
+    static diff(origObject, updatedObj, path, keysToIgnore) {
+        let result = [];
+        if (Object.is(origObject, updatedObj)) {
+            return undefined;
+        }
+        if (!updatedObj || typeof updatedObj !== 'object') {
+            return updatedObj;
+        }
+        const concat = Array.from(new Set([...Object.keys(origObject || {}), ...Object.keys(updatedObj || {})]));
+        const filter = keysToIgnore ? concat.filter(key => !keysToIgnore.includes(key)) : concat;
+        filter
+            .forEach(key => {
+            if (typeof updatedObj[key] === 'object' && typeof origObject[key] === 'object') {
+                if (UtilsService.differs(updatedObj[key], origObject[key])) {
+                    const newPath = `${path}${path ? '.' : ''}${key}`;
+                    const values = UtilsService.diff(origObject[key], updatedObj[key], newPath, keysToIgnore);
+                    if (values !== undefined) {
+                        result = [...result, ...values];
+                    }
+                }
+            }
+            else if (updatedObj && !origObject || updatedObj[key] !== origObject[key] && !Object.is(origObject[key], updatedObj[key])) {
+                const value = updatedObj ? UtilsService.formatIfEmpty(updatedObj[key]) : null;
+                result.push(`${path}${path ? '.' : ''}${key}=${value}`);
+            }
+        });
+        return result;
+    }
+    static formatIfEmpty(value) {
+        if (value) {
+            return value;
+        }
+        switch (typeof value) {
+            case 'boolean':
+                return value;
+            case 'string':
+                return '';
+            default:
+                return null;
+        }
+    }
+    static differs(obj1, obj2) {
+        return JSON.stringify(obj1) !== JSON.stringify(obj2);
+    }
+}
+UtilsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+UtilsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, decorators: [{
+            type: Injectable
+        }] });
+
+class APIService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+        this.apiUrl = window.location.protocol + '//' + window.location.hostname + '/dcp';
+    }
+    fetch(url, params = {}, cache) {
+        const headers = this.getHeaders(cache);
+        return this.httpClient.get(this.apiUrl + url, { params: this.prepareEncodedParams(params), headers });
+    }
+    post(url, body, params = {}) {
+        body = body || null;
+        const headers = this.getHeaders();
+        return this.httpClient.post(this.apiUrl + url, body, { params: this.prepareEncodedParams(params), headers });
+    }
+    // use when response extended data is necessary:
+    postExtended(url, body = null, params = {}, headers = {}) {
+        headers = headers || this.getHeaders();
+        return this.httpClient.post(this.apiUrl + url, body, {
+            headers,
+            observe: 'response',
+            params: this.prepareEncodedParams(params)
+        });
+    }
+    put(url, body = null, params = {}) {
+        const headers = this.getHeaders();
+        return this.httpClient.put(this.apiUrl + url, body, { headers, params: this.prepareEncodedParams(params) });
+    }
+    delete(url, params = {}) {
+        const headers = this.getHeaders();
+        return this.httpClient.delete(this.apiUrl + url, { headers, params: this.prepareEncodedParams(params) });
+    }
+    fetchPagination(url, pageSize, pageNumber, additionalParams = {}, cache) {
+        const copyAdditionalParams = JSON.parse(JSON.stringify(additionalParams));
+        const params = Object.assign(copyAdditionalParams, { size: pageSize.toString(), page: pageNumber.toString() });
+        return this.fetch(url, params, cache);
+    }
+    prepareEncodedParams(params) {
+        const result = {};
+        if (!params) {
+            return {};
+        }
+        for (const key of Object.keys(params)) {
+            if (params[key]) {
+                const stringParam = params[key].toString();
+                result[key] = stringParam.includes('+') ? encodeURIComponent(stringParam) : stringParam;
+            }
+        }
+        return result;
+    }
+    getHeaders(cache) {
+        let headers = new HttpHeaders();
+        if (cache) {
+            headers = headers.append('_Cache', 'true ');
+        }
+        const token = this.token || this.getParameterByName('token');
+        headers = headers.append('Authorization', 'Bearer ' + token);
+        return headers;
+    }
+    getParameterByName(name, url = window.location.href) {
+        name = name.replace(/[\[\]]/g, '\\$&');
+        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url);
+        if (!results)
+            return null;
+        if (!results[2])
+            return '';
+        return decodeURIComponent(results[2].replace(/\+/g, ' '));
+    }
+}
+APIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, deps: [{ token: i1.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 }]; } });
+
+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) {
+        if (!this.userId || !this.siteId || !this.user?.token) {
+            return;
+        }
+        return this.apiService.post(API.UPDATE_USER_FIELDS.replace(':siteId', String(this.siteId)).replace(':token', this.user.token), body);
+        // .pipe(this.handleError(false, true));
+    }
+    fetchUserById(id) {
+        this.userIdExistPending = true;
+        return this.apiService.fetch(API.USER_BY_ID.replace(':siteId', String(this.siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(id))))
+            .pipe(map(result => {
+            this.userIdExistPending = false;
+            return result;
+        }));
+    }
+    persistCacheChanges() {
+        const params = {
+            excludeDeviceExtraOptions: true
+        };
+        return this.processUserChangesToCache()
+            .pipe(map((result) => {
+            return this.apiService.post(API.PERSIST_USER_CACHE.replace(':siteId', String(this.siteId)).replace(':token', this.user.token), {}, params)
+                .subscribe(() => {
+            });
+            // .pipe(map((user) => {
+            //   // this.setUser(user, false, this.user.token);
+            //   this.user.hasModifiedCache = false;
+            // }))
+            // .pipe(this.handleError(true, true));
+        }));
+    }
+    processUserChangesToCache() {
+        const calls = [];
+        const body = UtilsService.diff(this.originUser.getSavableData(), this.user.getSavableData(), 'user');
+        if (body) {
+            calls.push(this.updateUserFields(body));
+        }
+        if (!calls?.length) {
+            return of(this.user);
+        }
+        return forkJoin(calls)
+            .pipe(map((responses) => {
+            // ApiUserResponse
+            this.handleSaveUserResponse(responses);
+        }));
+        // .pipe(this.handleError(false, true));
+    }
+    hasUnsavedChanges() {
+        return !this.user.equal(this.originUser);
+    }
+    setSimplifiedUser(user) {
+        this.user = new SimplifiedUser(user);
+        const copiedUser = JSON.parse(JSON.stringify(user));
+        this.originUser = new SimplifiedUser(copiedUser);
+    }
+    handleSaveUserResponse(responses) {
+        if (!responses?.length) {
+            return;
+        }
+        for (let len = responses.length, i = len - 1; i >= 0; i--) {
+            if (responses[i] && responses[i].currentUpdatedUser) {
+                // this.setUser(responses[i].currentUpdatedUser, false, this.user.token);
+                this.user.hasModifiedCache = true;
+                return;
+            }
+        }
+    }
+}
+UserService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserService, deps: [{ token: APIService }], 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 }]; } });
+
+const TTL_DEFAULT = 30000;
+const TTL_LONG_DEFAULT = 45000;
+var NotificationType;
+(function (NotificationType) {
+    NotificationType["info"] = "info";
+    NotificationType["error"] = "error";
+    NotificationType["success"] = "success";
+    NotificationType["warning"] = "warning";
+})(NotificationType || (NotificationType = {}));
+class Notification {
+    constructor(data) {
+        this.ttl = TTL_DEFAULT;
+        Object.assign(this, data || {});
+        if (this.ttl === undefined) {
+            this.ttl = this.message && this.message.length && this.message.length < 80 ? TTL_DEFAULT : TTL_LONG_DEFAULT;
+        }
+    }
+    isInfo() {
+        return this.type === NotificationType.info;
+    }
+    isError() {
+        return this.type === NotificationType.error;
+    }
+    isSuccess() {
+        return this.type === NotificationType.success;
+    }
+    isWarning() {
+        return this.type === NotificationType.warning;
+    }
+}
+
+const SUCCESS_TIME = 5000;
+const INACTIVE_SESSION_MESSAGE = 'Your session was lost due to inactivity. Please login again';
+const INACTIVE_SESSION = 'SESSION_INACTIVE';
+class NotificationService {
+    constructor() {
+        this.listChange = new Subject();
+        this.max = 0;
+        this.list = [];
+    }
+    error(message, ttl) {
+        this.notify('error', message, ttl);
+    }
+    success(message, ttl) {
+        this.notify('success', message, (!ttl) ? SUCCESS_TIME : ttl);
+    }
+    warning(message, ttl) {
+        this.notify('warning', message, ttl);
+    }
+    info(message, ttl) {
+        this.notify('info', message, ttl);
+    }
+    notify(type, message, ttl) {
+        const found = this.list.find((n) => n.message === message);
+        if (found) {
+            this.remove(found);
+        }
+        const notification = new Notification({
+            id: ++this.max,
+            type, message, ttl
+        });
+        if (notification.ttl > 0) {
+            notification.timerId = setTimeout(() => this.remove(notification, true), notification.ttl);
+        }
+        this.list.push(notification);
+        this.listChange.next(this.list);
+    }
+    remove(notification, auto) {
+        if (!auto && notification.timerId) {
+            // clear timeout in case of manual remove
+            clearInterval(notification.timerId);
+        }
+        this.list = this.list.filter(n => n.id !== notification.id);
+        this.listChange.next(this.list);
+    }
+    removeInactiveSessionError() {
+        if (!this.list || !this.list.length) {
+            return;
+        }
+        this.list = this.list.filter(n => n.message !== INACTIVE_SESSION_MESSAGE && n.message !== INACTIVE_SESSION);
+        this.listChange.next(this.list);
+    }
+}
+NotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class ListUser {
+    constructor(user) {
+        this.devices = [];
+        this.deviceProfiles = [];
+        if (user) {
+            Object.assign(this, user);
+        }
+    }
+}
+
+class RemoveKynFromIBMService {
+    constructor() {
+    }
+    removeCUCMS(date, customerId) {
+        if (customerId === 8) {
+            return date.filter((val) => !CUCMS_TO_IGNORE.includes(Math.round(val.cucmId)));
+        }
+        return date;
+    }
+    removeCUCS(date, customerId) {
+        if (customerId === 8) {
+            return date.filter((val) => !CUCS_TO_IGNORE.includes(Math.round(val.cucId)));
+        }
+        return date;
+    }
+}
+RemoveKynFromIBMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveKynFromIBMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RemoveKynFromIBMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveKynFromIBMService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveKynFromIBMService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class UsersSearchService {
+    constructor(apiService, 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 }], 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 }]; } });
+
+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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-pagination', template: "<div class=\"flex-box pagination\">\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
+            }] } });
+
+const DISPLAYED_COLS = ['user-icon', 'name', 'email', 'status', 'role'];
+class UsersListComponent {
+    get form() {
+        return this.userService?.user?.form;
+    }
+    constructor(userService, apiService, notifications, usersSearchService) {
+        this.userService = userService;
+        this.apiService = apiService;
+        this.notifications = notifications;
+        this.usersSearchService = usersSearchService;
+        this.openUser = new EventEmitter();
+        this.displayedColumns = DISPLAYED_COLS;
+        console.log('users list 1');
+    }
+    ngOnInit() {
+        console.log('users list 2');
+        this.usersSearchService.customerId = this.customerId;
+        this.apiService.token = this.token;
+        this.apiService.apiUrl = this.apiUrl;
+        this.runSearch();
+        this.searchSubscription = this.usersSearchService.foundUsers$
+            .subscribe((users) => {
+            this.initializeDataSource(users);
+            this.users = users;
+        });
+    }
+    pageNumberChangeEvent(perPageNumber) {
+        this.usersSearchService.pageSize = perPageNumber;
+        this.usersSearchService.pageIndex = 0;
+        this.runSearch();
+    }
+    pageEvent(event) {
+        this.usersSearchService.pageSize = event.pageSize;
+        this.usersSearchService.pageIndex = event.pageIndex;
+        this.runSearch();
+    }
+    onUserClick(user) {
+        this.openUser.emit(user);
+    }
+    initializeDataSource(users) {
+        this.dataSource = new MatTableDataSource(users);
+    }
+    runSearch() {
+        this.dataPending = true;
+        this.usersSearchService.quickRegularUsersSearch()
+            .subscribe(() => {
+            this.dataPending = false;
+        }, () => {
+            this.dataPending = false;
+            this.notifications.error('The data can not be received');
+        });
+    }
+}
+UsersListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListComponent, deps: [{ token: UserService }, { token: APIService }, { token: NotificationService }, { token: UsersSearchService }], target: i0.ɵɵFactoryTarget.Component });
+UsersListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UsersListComponent, selector: "app-users-list", inputs: { token: "token", customerId: "customerId", apiUrl: "apiUrl" }, outputs: { openUser: "openUser" }, ngImport: i0, template: "<app-pagination\n        [pagination]=\"usersSearchService.getPagination()\"\n        [showPageSizeOptions]=\"true\"\n        (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\n        (pageEmitter)=\"pageEvent($event)\">\n</app-pagination>\n\n<table class=\"webex-table\" mat-table *ngIf=\"users?.length\" #table [dataSource]=\"dataSource\">\n\n    <ng-container matColumnDef=\"user-icon\">\n        <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\n        <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\n            <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\n        </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">First Name/Last Name</th>\n        <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\"> {{ user.firstName }} {{ user.lastName }}</td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\n        <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\"> {{ user.email }}</td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Status</th>\n        <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\"></td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"role\">\n        <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Administrator Role</th>\n        <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\"></td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n", styles: ["table{border-collapse:collapse;border-spacing:0}table.mat-table{border-spacing:0;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["pagination", "showPageSizeOptions", "showRefreshButton", "lengthPending"], outputs: ["pageEmitter", "pageNumberChangeEmitter"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-users-list', template: "<app-pagination\n        [pagination]=\"usersSearchService.getPagination()\"\n        [showPageSizeOptions]=\"true\"\n        (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\n        (pageEmitter)=\"pageEvent($event)\">\n</app-pagination>\n\n<table class=\"webex-table\" mat-table *ngIf=\"users?.length\" #table [dataSource]=\"dataSource\">\n\n    <ng-container matColumnDef=\"user-icon\">\n        <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\n        <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\n            <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\n        </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">First Name/Last Name</th>\n        <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\"> {{ user.firstName }} {{ user.lastName }}</td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\n        <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\"> {{ user.email }}</td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Status</th>\n        <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\"></td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"role\">\n        <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Administrator Role</th>\n        <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\"></td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n", styles: ["table{border-collapse:collapse;border-spacing:0}table.mat-table{border-spacing:0;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }, { type: NotificationService }, { type: UsersSearchService }]; }, propDecorators: { token: [{
+                type: Input
+            }], customerId: [{
+                type: Input
+            }], openUser: [{
+                type: Output
+            }], apiUrl: [{
+                type: Input
+            }] } });
+
+class EventsCommunicationService {
+    constructor() {
+        this.onSuccessfulLoginEvent = new Subject();
+    }
+}
+EventsCommunicationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EventsCommunicationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+EventsCommunicationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EventsCommunicationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EventsCommunicationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class MaterialModule {
+}
+MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [DragDropModule,
+        MatButtonModule,
+        MatListModule,
+        MatProgressSpinnerModule,
+        MatExpansionModule,
+        MatInputModule,
+        MatInputModule,
+        MatListModule,
+        MatTreeModule,
+        MatTreeModule,
+        MatNativeDateModule,
+        MatDatepickerModule,
+        MatTooltipModule,
+        MatAutocompleteModule,
+        MatChipsModule,
+        MatSidenavModule,
+        MatFormFieldModule,
+        MatStepperModule,
+        MatTabsModule,
+        MatCardModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatSlideToggleModule,
+        MatTableModule,
+        MatPaginatorModule], 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
+                    ],
+                }]
+        }] });
+
+class UsersListModule {
+}
+UsersListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UsersListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UsersListModule, declarations: [UsersListComponent, PaginationComponent], imports: [BrowserModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        MaterialModule], exports: [UsersListComponent] });
+UsersListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListModule, providers: [
+        UserService,
+        APIService,
+        EventsCommunicationService,
+        UsersSearchService,
+        NotificationService,
+        RemoveKynFromIBMService
+    ], imports: [BrowserModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        MaterialModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [UsersListComponent, PaginationComponent],
+                    imports: [
+                        BrowserModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        HttpClientModule,
+                        MaterialModule
+                    ],
+                    providers: [
+                        UserService,
+                        APIService,
+                        EventsCommunicationService,
+                        UsersSearchService,
+                        NotificationService,
+                        RemoveKynFromIBMService
+                    ],
+                    exports: [UsersListComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { APIService, EventsCommunicationService, NotificationService, RemoveKynFromIBMService, UserService, UsersListComponent, UsersListModule, UsersSearchService };
+//# sourceMappingURL=tuki-io-tuki-widgets-users-list.mjs.map