@tuki-io/tuki-widgets 0.0.7 → 0.0.9

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

@@ -1,866 +0,0 @@
-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
-        }] });
-
-const apiUrl = 'http://192.168.0.191:8080';
-class APIService {
-    constructor(httpClient) {
-        this.httpClient = httpClient;
-    }
-    fetch(url, params = {}, cache) {
-        const headers = this.getHeaders(cache);
-        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 }]; } });
-
-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.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" }, 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
-            }] } });
-
-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