@tuki-io/tuki-widgets 0.0.26 → 0.0.28

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

@@ -1,2074 +0,0 @@
-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 { Subject, of, forkJoin, throwError, BehaviorSubject, Observable } from 'rxjs';
-import * as i4 from '@angular/forms';
-import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-import * as i5 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 { MatButtonModule } from '@angular/material/button';
-import * as i7$1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i7 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 i8$1 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatCardModule } from '@angular/material/card';
-import * as i8 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i9 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 i5$1 from '@angular/material/divider';
-import { Big } from 'big.js';
-
-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);
-        params = params || {};
-        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 }]; } });
-
-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",
-    AVAILABLE_DN_IN_RANGES: "/api/sites/:siteId/available-dn-in-ranges",
-    DELETE_LINE: "/api/provision/:siteId/deleteLine/:pkid/:token",
-    DISASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/deleteLineAssociation/:linePkid/:token",
-    CHECK_DELETE_LINE: "/api/provision/:siteId/checklinedeletion",
-    ASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/createLineAssociation/:token",
-    CHECK_DESTINATION_NUMBER: "/api/provision/:siteId/check-dn",
-    UPDATE_LINE_FIELDS: "/api/provision/:siteId/lineFields/:pkid/:token",
-    UPDATE_DEVICE_FIELDS: "/api/provision/:siteId/deviceFields/:deviceName/:token"
-};
-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 RECORDING_MEDIA_SOURCE = [
-    "Gateway Preferred",
-    "Phone Preferred"
-];
-
-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 LineDirectory {
-    constructor(lineDirectory) {
-        Object.assign(this, lineDirectory || {});
-        // @ts-ignore
-        if (this.directoryNumber && this.routePartitionName) {
-            this.displayValue = `${this.directoryNumber}/${this.routePartitionName}`;
-        }
-        this.initForm();
-    }
-    getSavableData() {
-        return getSavableData(this, ['form', 'displayValue', 'templateDirectoryNumber']);
-    }
-    equal(itemToCompare) {
-        return JSON.stringify(this.getSavableData()) === JSON.stringify(itemToCompare.getSavableData());
-    }
-    initForm() {
-        const formBuilder = new FormBuilder();
-        const formSettings = {
-            directoryNumber: [{ value: this.directoryNumber || '', disabled: true }, [Validators.required]],
-            routePartitionName: [{ value: this.routePartitionName || '', disabled: true }]
-        };
-        this.form = formBuilder.group(formSettings);
-    }
-}
-
-class LineCallInfoDisplay {
-    constructor(lineCallInfoDisplay) {
-        Object.assign(this, lineCallInfoDisplay || {});
-    }
-    getSavableData() {
-        return getSavableData(this, ['form']);
-    }
-}
-
-class TranslationPattern {
-    constructor(translationPattern) {
-        Object.assign(this, translationPattern || {});
-        this.initForm();
-    }
-    getSavableData() {
-        return getSavableData(this, ['form', 'isNewForExistingLine']);
-    }
-    initForm() {
-        const formBuilder = new FormBuilder();
-        const formSettings = {
-            pattern: [{ value: this.pattern || '' }],
-            calledPartyTransformationMask: [{ value: this.calledPartyTransformationMask || '' }]
-        };
-        this.form = formBuilder.group(formSettings);
-    }
-    getSiteId() {
-        if (this.site && this.site.id != null) {
-            return this.site.id;
-        }
-        if (this.hasMultipleSiteIds()) {
-            return this.multipleSitesId.split(',')[0];
-        }
-        return null;
-    }
-    hasMultipleSiteIds() {
-        return this.hasMultipleSites && !!this.multipleSitesId && this.multipleSitesId.length > 0;
-    }
-}
-
-class LineAssociation {
-    constructor(lineAssociation) {
-        this.sharedUsers = [];
-        this.sharedDevices = [];
-        Object.assign(this, lineAssociation || {});
-        if (lineAssociation) {
-            this.index = lineAssociation.index || null;
-            this.position = lineAssociation.position || null;
-            this.e164Mask = lineAssociation.e164Mask || '';
-            this.textLabel = lineAssociation.textLabel || '';
-            this.displayLabel = lineAssociation.displayLabel || '';
-            this.displayLabelAscii = lineAssociation.displayLabelAscii || '';
-            this.linePkid = lineAssociation.linePkid || lineAssociation.pkid || '';
-            this.maxNumberOfCalls = lineAssociation.maxNumberOfCalls || null;
-            this.busyTrigger = lineAssociation.busyTrigger || null;
-            this.directoryNumber = new LineDirectory(lineAssociation.directoryNumber);
-            this.didPattern = new TranslationPattern(lineAssociation.didPattern);
-            this.recordingOption = lineAssociation.recordingOption || RecordingOptions.disabled;
-            this.recordingProfile = lineAssociation.recordingProfile || '';
-            this.recordingMediaSource = lineAssociation.recordingMediaSource || RECORDING_MEDIA_SOURCE[0];
-            this.visualMWI = lineAssociation.visualMWI || '';
-            this.audibleMWI = lineAssociation.audibleMWI || '';
-            this.ringSetting_idle = lineAssociation.ringSetting_idle || '';
-            this.ringSetting_active = lineAssociation.ringSetting_active || '';
-            this.pickupAAS_idle = lineAssociation.pickupAAS_idle || '';
-            this.pickupAAS_active = lineAssociation.pickupAAS_active || '';
-            this.monitorCSS = lineAssociation.monitorCSS || '';
-            this.logMissedCall = lineAssociation.logMissedCall || true;
-            this.callInfoDisplay = new LineCallInfoDisplay(lineAssociation.callInfoDisplay);
-            this.lineLocalId = lineAssociation.lineLocalId || lineAssociation.localId || '';
-            this.callingSearchSpace = lineAssociation.callingSearchSpace || '';
-            this.ownerUserId = lineAssociation.ownerUserId;
-            this.associated = lineAssociation.associated;
-            this.alertingName = lineAssociation.alertingName;
-            this.description = lineAssociation.description;
-            this.patternUsage = lineAssociation.patternUsage;
-            this.plarDestinationNumber = lineAssociation.plarDestinationNumber;
-            this.prefixDigits = lineAssociation.prefixDigits;
-            this.plarDescription = lineAssociation.plarDescription;
-            this.plarEnabled = lineAssociation.plarEnabled;
-            this.populateWithDid = lineAssociation.populateWithDid;
-        }
-        this.initForm();
-    }
-    getSavableData() {
-        const excludedFields = ['viewMode', 'form', 'callingSearchSpace', 'plarDestinationNumber', 'prefixDigits', 'plarDescription', 'plarEnabled'];
-        return getSavableData(this, excludedFields);
-    }
-    getDnSavableData() {
-    }
-    initForm() {
-        // TEMP simplified line form
-        const formBuilder = new FormBuilder();
-        const formSettings = {
-            directoryNumber: [this.directoryNumber.directoryNumber || ''],
-        };
-        this.form = formBuilder.group(formSettings);
-    }
-    /*initForm(appValidators: ValidationService) {
-      const formBuilder = new FormBuilder();
-      const formSettings = {
-        displayLabel: [this.displayLabel || '', [Validators.maxLength(30), Validators.pattern('[^%&\\[{}|"<>\\]]*')]],
-        alertingName: [this.alertingName || ''],
-        description: [this.description || ''],
-        e164Mask: [this.e164Mask || '', [appValidators.e164MaskLabel]],
-        displayLabelAscii: [this.displayLabelAscii || '', [appValidators.displayLabelAscii]],
-        textLabel: [this.textLabel || '', [Validators.maxLength(30), Validators.pattern('[^"]*')]],
-        maxNumberOfCalls: [this.maxNumberOfCalls || '', [ Validators.min(0)]],
-        busyTrigger: [this.busyTrigger || '', [Validators.min(0), Validators.max(this.maxNumberOfCalls || 200)]],
-        recordingOption: [this.recordingOption || ''],
-        recordingProfile: [this.recordingProfile || '', [appValidators.conditionalRequired('recordingOption',
-          [RecordingOptions.auto_enabled, RecordingOptions.selective_enabled])]],
-        recordingMediaSource: [this.recordingMediaSource || ''],
-        visualMWI: [this.visualMWI || ''],
-        audibleMWI: [this.audibleMWI || ''],
-        ringSetting_idle: [this.ringSetting_idle || ''],
-        ringSetting_active: [this.ringSetting_active || ''],
-        pickupAAS_idle: [this.pickupAAS_idle || ''],
-        pickupAAS_active: [this.pickupAAS_active || ''],
-        monitorCSS: [this.monitorCSS || ''],
-        logMissedCall: [this.logMissedCall === 'true'],
-        callerName:  [this.callInfoDisplay && this.callInfoDisplay.callerName === 'true'],
-        callerNumber: [this.callInfoDisplay && this.callInfoDisplay.callerNumber === 'true'],
-        redirectedNumber: [this.callInfoDisplay && this.callInfoDisplay.redirectedNumber === 'true'],
-        dialedNumber: [this.callInfoDisplay && this.callInfoDisplay.dialedNumber === 'true' ]
-      };
-      this.form = formBuilder.group(formSettings);
-      if (this.directoryNumber) {
-        this.form.addControl('directoryNumber', this.directoryNumber.form);
-      }
-      if (this.didPattern) {
-        this.form.addControl('didPattern', this.didPattern.form);
-      }
-    }*/
-    equals(line) {
-        if (!line) {
-            return false;
-        }
-        return this.directoryNumber.directoryNumber === line.directoryNumber.directoryNumber &&
-            this.directoryNumber.routePartitionName === line.directoryNumber.routePartitionName;
-    }
-}
-
-class Device {
-    constructor(device) {
-        var _a;
-        if (device) {
-            this.name = device.name;
-            this.deviceType = device.deviceType;
-            this.pkiid = device.pkiid;
-            this.lineAssociations = ((_a = device.lineAssociations) === null || _a === void 0 ? void 0 : _a.length) ?
-                device.lineAssociations.map((line) => new LineAssociation(line)) : [];
-        }
-    }
-    getSavableData() {
-        const excludedFields = ['form'];
-        return getSavableData(this, excludedFields);
-    }
-}
-var RecordingOptions;
-(function (RecordingOptions) {
-    RecordingOptions["disabled"] = "Call Recording Disabled";
-    RecordingOptions["auto_enabled"] = "Automatic Call Recording Enabled";
-    RecordingOptions["selective_enabled"] = "Selective Call Recording Enabled";
-})(RecordingOptions || (RecordingOptions = {}));
-
-class SimplifiedUser {
-    constructor(user, isLdap) {
-        // isLdap TEMP because of token response issue
-        if (user) {
-            this.userid = user.userid;
-            this.email = user.email;
-            this.firstName = user.firstName;
-            this.lastName = user.lastName;
-            this.siteId = user.siteId;
-            this.siteName = user.siteName;
-            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.ldapIntegrated = user.ldapIntegrated || isLdap || false;
-            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;
-            if (user.devices && user.devices.length) {
-                this.devices = user.devices.map((device) => new Device(device));
-                if (user.lines && user.lines.length) {
-                    this.devices.forEach(device => {
-                        if (device && device.lineAssociations && device.lineAssociations.length) {
-                            device.lineAssociations.forEach(lineAssociation => {
-                                lineAssociation.callingSearchSpace = this.getLineVal(lineAssociation, user.lines, 'callingSearchSpace');
-                                lineAssociation.textLabel = lineAssociation.textLabel || this.getLineVal(lineAssociation, user.lines, 'textLabel') || '';
-                                lineAssociation.alertingName = lineAssociation.alertingName || this.getLineVal(lineAssociation, user.lines, 'alertingName') || '';
-                            });
-                        }
-                    });
-                }
-            }
-        }
-        this.initForm();
-    }
-    getLineVal(lineAssociation, lines, token) {
-        const lineForVal = lines.find((line) => line.directoryNumber.directoryNumber === lineAssociation.directoryNumber.directoryNumber);
-        return lineForVal && lineForVal[token] || '';
-    }
-    getUserDetailsSavableData() {
-        const excludedFields = ['devices', 'deviceProfiles', 'lines', 'singleNumberReach', 'vmPassword', 'vmUnifiedMessagingAccount', 'alternateExtensions', 'callerInput', 'lineAppearances', 'meetMes', 'webAppPasswordSettings', 'form'];
-        return getSavableData(this, excludedFields);
-    }
-    initForm() {
-        const formBuilder = new FormBuilder();
-        const formSettings = {
-            userid: [{ value: this.userid || '', disabled: this.ldapIntegrated }, [Validators.required, Validators.maxLength(128)]],
-            email: [{ value: this.email || '', disabled: this.ldapIntegrated }, [
-                    Validators.pattern(REGEX_PATTERN.EMAIL),
-                    Validators.required
-                ]],
-            firstName: [{ value: this.firstName || '', disabled: this.ldapIntegrated }],
-            lastName: [{ value: this.lastName || '', disabled: this.ldapIntegrated }, 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],
-            ldapIntegrated: [this.ldapIntegrated],
-            userLocale: [this.userLocale || ''],
-            digestCredentials: [''],
-            confirmDigestCredentials: ['']
-        };
-        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', '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
-        }] });
-
-const string_array = function (original, updated, fullKey) {
-    if (!updated || !SortingUtilsService.differs(original, updated)) {
-        return null;
-    }
-    return `${fullKey}=${updated.join(',')}`;
-};
-const line_reference = function (original, updated, fullKey) {
-    if (!updated || !SortingUtilsService.differs(original, updated)) {
-        return null;
-    }
-    // @ts-ignore
-    return Object.keys(updated).map(key => `${fullKey}.${key}=${updated[key]}`);
-};
-const nullable = function (original, updated, fullKey) {
-    if (!original && updated) {
-        // @ts-ignore
-        return Object.keys(updated).map(key => `${fullKey}.${key}=${updated[key]}`);
-    }
-    else if (original && !updated) {
-        return `${fullKey}=null`;
-    }
-    else {
-        return SortingUtilsService.diff(original, updated, fullKey, []);
-    }
-};
-class SortingUtilsService {
-    static sortDevicesByTypeAndName(array) {
-        if (!array) {
-            return null;
-        }
-        return array.sort((a, b) => {
-            if (a.deviceType === b.deviceType) {
-                return (a.name < b.name) ? -1 : (a.name > b.name) ? 1 : 0;
-            }
-            else {
-                return (a.deviceType < b.deviceType) ? -1 : 1;
-            }
-        });
-    }
-    static sortLinesByDirectoryName(array) {
-        if (!array) {
-            return null;
-        }
-        return array.sort((a, b) => {
-            if (!a.directoryNumber && !b.directoryNumber) {
-                return 0;
-            }
-            if (a.directoryNumber && !b.directoryNumber) {
-                return 1;
-            }
-            if (!a.directoryNumber && b.directoryNumber) {
-                return -1;
-            }
-            const directoryNumberA = a.directoryNumber.directoryNumber;
-            const directoryNumberB = b.directoryNumber.directoryNumber;
-            return (directoryNumberA < directoryNumberB) ? -1 : (directoryNumberA > directoryNumberB) ? 1 : 0;
-        });
-    }
-    static sortLineAssociationsByPosition(array) {
-        if (!array) {
-            return null;
-        }
-        return array.sort((a, b) => {
-            if (!a.position && !b.position) {
-                return 0;
-            }
-            if (a.position && !b.position) {
-                return 1;
-            }
-            if (!a.position && b.position) {
-                return -1;
-            }
-            const positionA = a.position;
-            const positionB = b.position;
-            return (positionA < positionB) ? -1 : (positionA > positionB) ? 1 : 0;
-        });
-    }
-    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 => {
-            // @ts-ignore
-            if (this.dictionary[key]) {
-                // @ts-ignore
-                const complexResult = this.dictionary[key](origObject[key], updatedObj[key], `${path}${path ? '.' : ''}${key}`);
-                if (complexResult) {
-                    if (Array.isArray(complexResult)) {
-                        result = [...result, ...complexResult];
-                    }
-                    else {
-                        result.push(complexResult);
-                    }
-                }
-            }
-            else if (typeof updatedObj[key] === 'object' && typeof origObject[key] === 'object') {
-                if (SortingUtilsService.differs(updatedObj[key], origObject[key])) {
-                    const newPath = `${path}${path ? '.' : ''}${key}`;
-                    const values = SortingUtilsService.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 ? SortingUtilsService.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);
-    }
-}
-SortingUtilsService.dictionary = {
-    features: string_array,
-    services: string_array,
-    directoryNumber: line_reference,
-    primaryLineReference: line_reference,
-    speedDials: function (original, updated, fullKey) {
-        if (!updated || !SortingUtilsService.differs(original, updated)) {
-            return null;
-        }
-        // todo only changes, identification
-        let map = [];
-        updated.map((speedDial) => {
-            const currentFullKey = `${fullKey}.${speedDial.index}`; // ${speedDial.type} CHECk ?
-            map = [...map, Object.keys(speedDial).map(key => `${currentFullKey}.${key}=${speedDial[key]}`)];
-        });
-        return map;
-    },
-    lineAssociations: function (original, updated, fullKey) {
-        if (!updated || !SortingUtilsService.differs(original, updated)) {
-            return null;
-        }
-        let map = [];
-        updated.map((lineAssociation) => {
-            const currentFullKey = `${fullKey}.${lineAssociation.linePkid ? lineAssociation.linePkid : lineAssociation.lineLocalId}`;
-            const originalLineAssociation = original.find(line => line.index === lineAssociation.index);
-            if (SortingUtilsService.differs(originalLineAssociation, lineAssociation)) {
-                const diff = SortingUtilsService.diff(originalLineAssociation, lineAssociation, currentFullKey, []);
-                map = [...map, ...diff];
-            }
-        });
-        return map;
-    },
-    enterpriseAltNum: nullable,
-    e164AltNum: nullable
-};
-SortingUtilsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortingUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SortingUtilsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortingUtilsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortingUtilsService, decorators: [{
-            type: Injectable
-        }] });
-
-class LineService {
-    generateLineAssociationFromLine(lineAssociation) {
-        return {
-            directoryNumber: lineAssociation ? this.generateLineDirectory(lineAssociation) : null,
-            didPattern: lineAssociation ? this.generateDidPatternForLineAssociation(lineAssociation) : null,
-            mappedDids: lineAssociation ? '' : 'null',
-            index: lineAssociation ? lineAssociation.index : null,
-            position: lineAssociation ? lineAssociation.position : null,
-            textLabel: lineAssociation ? lineAssociation.textLabel : null,
-            // displayLabel: lineAssociation ? lineAssociation.displayLabel  : 'null',
-            alertingName: lineAssociation ? lineAssociation.alertingName : null,
-            callerNumber: lineAssociation ? '' : 'null'
-        };
-    }
-    generateLineDirectory(lineAssociation) {
-        return {
-            directoryNumber: lineAssociation.directoryNumber.directoryNumber,
-            routePartitionName: lineAssociation.directoryNumber.routePartitionName,
-        };
-    }
-    generateDidPatternForLineAssociation(lineAssociation) {
-        return {
-            calledPartyTransformationMask: lineAssociation.directoryNumber && lineAssociation.directoryNumber.directoryNumber
-        };
-    }
-}
-LineService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-LineService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineService, decorators: [{
-            type: Injectable
-        }] });
-
-class UserService {
-    get lineAssociation() {
-        return this.user && this.originUser.devices && this.user.devices[0] && this.user.devices[0].lineAssociations && this.user.devices[0].lineAssociations[0];
-    }
-    get originLineAssociation() {
-        return this.originUser && this.originUser.devices && this.originUser.devices[0] && this.originUser.devices[0].lineAssociations && this.originUser.devices[0].lineAssociations[0];
-    }
-    constructor(apiService, lineService) {
-        this.apiService = apiService;
-        this.lineService = lineService;
-        this.siteId = -1;
-        this.userId = '';
-        this.dataPending = false;
-        this.userIdExistPending = false;
-        this.hasExistedUserId = false;
-        this.onUserLineSaved$ = new Subject();
-    }
-    ngOnInit() {
-        console.log(this.siteId);
-    }
-    fetchUserToken(siteId, userId, isLdap, isSetNewTokenOnly) {
-        // isLdap TEMP because of token response issue
-        this.siteId = siteId;
-        this.userId = userId;
-        return this.apiService.fetch(API.USER_TOKEN.replace(':siteId', String(this.siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(userId))))
-            .pipe(map((result) => {
-            const user = result && Object.values(result)[0];
-            const token = Object.keys(result)[0];
-            if (user) {
-                if (!isSetNewTokenOnly) {
-                    this.setSimplifiedUser(user);
-                    this.user.token = user.token;
-                }
-                this.user.token = user.token || token;
-                this.originUser.token = user.token || token;
-            }
-        }));
-        // .pipe(this.handleError(false, true));
-    }
-    updateUserFields(body) {
-        if (!this.siteId) {
-            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), {})
-                .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.getUserDetailsSavableData(), this.user.getUserDetailsSavableData(), 'user');
-        if (body === null || body === void 0 ? void 0 : body.length) {
-            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));
-    }
-    saveNewLine() {
-        this.dataPending = true;
-        this.deleteLine(this.user.siteId, this.lineAssociation.linePkid, encodeURIComponent(this.user.token))
-            .subscribe(() => {
-            const URL = API.PERSIST_USER_CACHE.replace(':siteId', String(this.siteId)).replace(':token', this.user.token);
-            this.apiService.post(URL, {})
-                .subscribe(() => {
-                this.fetchUserToken(this.siteId, this.user.userid, false, true)
-                    .subscribe(() => {
-                    this.runNewLineCreation();
-                });
-            });
-        });
-    }
-    runNewLineCreation() {
-        // CREATE NEW LINE
-        const newLineBody = SortingUtilsService.diff(this.lineService.generateLineAssociationFromLine(null), this.lineService.generateLineAssociationFromLine(this.lineAssociation), 'device.lineAssociations', null);
-        this.associateLineToUserDevice(this.user.siteId, this.user.devices[0].name, newLineBody, null, this.lineAssociation.callingSearchSpace).subscribe((response) => {
-            var _a;
-            if (response && response.currentUpdatedUser) {
-                const linePkId = this.getLinePkIdFromUser(response === null || response === void 0 ? void 0 : response.currentUpdatedUser, 0);
-                forkJoin([
-                    this.updateLineFields(this.siteId, linePkId, this.user.token, this.lineAssociation.alertingName),
-                    this.updateDeviceFields(this.siteId, (_a = this.user.devices[0]) === null || _a === void 0 ? void 0 : _a.name, this.user.token)
-                ]).subscribe((response) => {
-                    this.originUser.devices[0].lineAssociations[0].directoryNumber.directoryNumber = this.lineAssociation.directoryNumber.directoryNumber;
-                    this.onUserLineSaved$.next(true);
-                });
-            }
-        });
-        // -----
-    }
-    getLinePkIdFromUser(user, index) {
-        if (user.devices && user.devices[index] && user.devices[index].lineAssociations && user.devices[index].lineAssociations[index]) {
-            return user.devices[index].lineAssociations[index].linePkid || user.devices[index].lineAssociations[index].lineLocalId;
-        }
-    }
-    deleteLine(siteId, pkid, token) {
-        return this.apiService.delete(API.DELETE_LINE.replace(':siteId', String(siteId)).replace(':pkid', pkid).replace(':token', encodeURIComponent(token)), {});
-        // .pipe(this.handleError(true, false));
-    }
-    disassociateLine(siteId, linePkid, token, deviceName) {
-        return this.apiService.delete(API.DISASSOCIATE_LINE.replace(':siteId', String(siteId))
-            .replace(':linePkid', linePkid)
-            .replace(':deviceName', deviceName)
-            .replace(':token', encodeURIComponent(token)), {});
-        // .pipe(this.handleError(true, false));
-    }
-    updateLineFields(siteId, pkid, token, alertingName) {
-        const body = ['line.description=', `line.alertingName=${alertingName}`];
-        return this.apiService.post(API.UPDATE_LINE_FIELDS.replace(':siteId', String(siteId)).replace(':pkid', encodeURIComponent(pkid)).replace(':token', encodeURIComponent(token)), body);
-        // .pipe(this.handleError(true, false));
-    }
-    updateDeviceFields(siteId, deviceName, token) {
-        const body = ['device.associatedDNs.0=null'];
-        return this.apiService.post(API.UPDATE_DEVICE_FIELDS.replace(':siteId', String(siteId)).replace(':deviceName', deviceName).replace(':token', encodeURIComponent(token)), body);
-        // .pipe(this.handleError(true, false));
-    }
-    checkDestinationNumber(siteId, directoryNumber, routePartitionName) {
-        const params = {
-            dntype: 'EXTENSION'
-        };
-        const body = {
-            directoryNumber: directoryNumber,
-            routePartitionName: routePartitionName
-        };
-        return this.apiService.post(API.CHECK_DESTINATION_NUMBER.replace(':siteId', siteId), body, params);
-    }
-    associateLineToUserDevice(siteId, deviceName, body, pkid, css) {
-        let params = {};
-        if (pkid) {
-            params = { linePkid: pkid };
-        }
-        if (css) {
-            // @ts-ignore
-            params['css'] = css;
-        }
-        return this.apiService.post(API.ASSOCIATE_LINE.replace(':siteId', String(siteId)).replace(':deviceName', deviceName)
-            .replace(':token', encodeURIComponent(this.user.token)), body, params);
-        // .pipe(this.handleError(true, true));
-    }
-    hasUnsavedChanges() {
-        if (this.user && this.originUser) {
-            return !this.user.equal(this.originUser);
-        }
-        return false;
-    }
-    setSimplifiedUser(user, isLdap) {
-        // isLdap TEMP because of token response issue
-        this.user = new SimplifiedUser(user, isLdap);
-        const copiedUser = JSON.parse(JSON.stringify(user));
-        this.originUser = new SimplifiedUser(copiedUser, isLdap);
-    }
-    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 }, { token: LineService }], target: i0.ɵɵFactoryTarget.Injectable });
-UserService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: APIService }, { type: LineService }]; } });
-
-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: i5.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
-        });
-        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=\"active; else notActive\">\n          <span class=\"icon-user-status icon-user-status-active\"></span>Active\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}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}\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=\"active; else notActive\">\n          <span class=\"icon-user-status icon-user-status-active\"></span>Active\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}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}\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: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.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}mat-form-field{width:300px;max-width:300px}\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: i5.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: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.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}mat-form-field{width:300px;max-width:300px}\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
-            }] } });
-
-var EntityChangeType;
-(function (EntityChangeType) {
-    EntityChangeType["added"] = "added";
-    EntityChangeType["updated"] = "updated";
-    EntityChangeType["existing"] = "existing";
-    EntityChangeType["removed"] = "removed";
-    EntityChangeType["unassociated"] = "unassociated";
-})(EntityChangeType || (EntityChangeType = {}));
-var DnRangeType;
-(function (DnRangeType) {
-    DnRangeType["extension"] = "EXTENSION";
-    DnRangeType["cpg"] = "CPG";
-    DnRangeType["callpark"] = "CALLPARK";
-    DnRangeType["huntgroup"] = "HUNTGROUP";
-    DnRangeType["meetme"] = "MEETME";
-    DnRangeType["did"] = "DID";
-})(DnRangeType || (DnRangeType = {}));
-
-// import * as Big from 'big.js';
-class DnsService {
-    constructor(apiService) {
-        this.apiService = apiService;
-        this.availableNumbers = {};
-    }
-    getNumberRange(siteId, routePartition, withdids, from, pageSize) {
-        // @ts-ignore
-        if (this.availableNumbers[routePartition] && this.availableNumbers[routePartition].length) {
-            return new Observable(observer => {
-                // @ts-ignore
-                observer.next(this.availableNumbers[routePartition]);
-            });
-        }
-        this.availableDidPatternsMappedToDn = {};
-        pageSize = pageSize ? pageSize : 20;
-        const params = { dntype: DnRangeType.extension, routepartition: routePartition, size: pageSize, page: 0 };
-        if (withdids) {
-            // @ts-ignore
-            params['withdids'] = 'true';
-        }
-        if (from) {
-            // @ts-ignore
-            params['from'] = from;
-        }
-        // @ts-ignore
-        this.availableNumbers[routePartition] = this.availableNumbers[routePartition] || [];
-        return this.apiService.fetch(API.AVAILABLE_DN_IN_RANGES.replace(':siteId', siteId), params)
-            .pipe(map((res) => {
-            res.availableNumberList.forEach((availableNumber) => {
-                this.setAvailableDidMappedToDn(availableNumber);
-                // @ts-ignore
-                this.availableNumbers[routePartition] = [...this.availableNumbers[routePartition], ...this.getUnwrapNumberRange(availableNumber)];
-            });
-        }));
-        // .pipe(this.handleError(true, false));
-    }
-    setAvailableDidMappedToDn(availableNumber) {
-        if (availableNumber.unUsedNumbersWithDids && availableNumber.unUsedNumbersWithDids.length) {
-            availableNumber.unUsedNumbersWithDids.forEach((numberWithDids) => {
-                const dn = numberWithDids['unUsedNumber'];
-                this.availableDidPatternsMappedToDn[dn] = [{}];
-                if (numberWithDids['translationPatternList'] && numberWithDids['translationPatternList'].length > 0) {
-                    this.availableDidPatternsMappedToDn[dn] = numberWithDids['translationPatternList'];
-                    this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] = [{}];
-                    if (numberWithDids['mappedDids'] && numberWithDids['mappedDids'].length > 0) {
-                        this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] = numberWithDids['mappedDids'];
-                    }
-                }
-                this.availableDidPatternsMappedToDn[dn][0]['vm'] = numberWithDids['vm'];
-            });
-        }
-    }
-    getUnwrapNumberRange(availableNumber) {
-        const unwrapNumberRangeArray = this.unwrapNumberRange(availableNumber.phoneNumberRange.from, availableNumber.phoneNumberRange.to);
-        if (unwrapNumberRangeArray === null || unwrapNumberRangeArray === void 0 ? void 0 : unwrapNumberRangeArray.length) {
-            let unwrapNumberRange = unwrapNumberRangeArray.map((unwrappedNumber) => {
-                const dn = availableNumber.phoneNumberRange.prefix + unwrappedNumber;
-                let str = dn;
-                if (this.availableDidPatternsMappedToDn[dn] && this.availableDidPatternsMappedToDn[dn].length > 0) {
-                    if (this.availableDidPatternsMappedToDn[dn][0]['mappedDids'] && this.availableDidPatternsMappedToDn[dn][0]['mappedDids'].length > 0) {
-                        str += '        DID:  ' + (this.availableDidPatternsMappedToDn[dn][0]['mappedDids'].length > 1 ? 'multiple' :
-                            this.availableDidPatternsMappedToDn[dn][0]['mappedDids'][0]);
-                    }
-                    if (this.availableDidPatternsMappedToDn[dn][0]['vm']) {
-                        str += '        In Use - VM';
-                    }
-                }
-                return str;
-            });
-            unwrapNumberRange = unwrapNumberRange.filter((unwrappedNumber) => !availableNumber.usedNumbers.includes(unwrappedNumber));
-            return unwrapNumberRange;
-        }
-        else {
-            return [];
-        }
-    }
-    unwrapNumberRange(start, end) {
-        const regExp = /(^0+)/;
-        let leadingZeros = '';
-        const matches = start.match(regExp);
-        if (matches) {
-            leadingZeros = matches[1];
-        }
-        const startNumeric = new Big(start);
-        const endNumeric = new Big(end);
-        // @ts-ignore
-        return Array.from({ length: (endNumeric.minus(startNumeric).plus(new Big(1)).toFixed(0)) }, (v, k) => {
-            const number = String(startNumeric.plus(new Big(k)).toFixed(0));
-            if ((leadingZeros + number).length > start.length) {
-                leadingZeros = leadingZeros.substr(1);
-            }
-            return leadingZeros + number;
-        });
-    }
-}
-DnsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DnsService, deps: [{ token: APIService }], target: i0.ɵɵFactoryTarget.Injectable });
-DnsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DnsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DnsService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: APIService }]; } });
-
-class UserCallingExtensionComponent {
-    get user() {
-        return this.userService.user;
-    }
-    get availableNumbers() {
-        // @ts-ignore
-        return this.routePartition && this.dnsService.availableNumbers ? this.dnsService.availableNumbers[this.routePartition] : null;
-    }
-    constructor(userService, dnsService) {
-        this.userService = userService;
-        this.dnsService = dnsService;
-        this.onChange = new EventEmitter();
-    }
-    ngOnInit() {
-        this.getData();
-    }
-    onChangeField(event) {
-        // if (!token) {
-        //   return;
-        // }
-        // (this.userService.user as any)[token] = this.form?.get(token)?.value;
-        this.onChange.emit(event === null || event === void 0 ? void 0 : event.value);
-    }
-    getData() {
-        if (!this.siteId || !this.routePartition) {
-            return;
-        }
-        this.dataPending = true;
-        this.dnsService.getNumberRange(String(this.siteId), this.routePartition)
-            .subscribe(() => {
-            if (this.availableNumbers) {
-                // @ts-ignore
-                this.dnsService.availableNumbers[this.routePartition].push(this.directoryNumber);
-            }
-            this.dataPending = false;
-        });
-    }
-}
-UserCallingExtensionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingExtensionComponent, deps: [{ token: UserService }, { token: DnsService }], target: i0.ɵɵFactoryTarget.Component });
-UserCallingExtensionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCallingExtensionComponent, selector: "app-user-calling-extension", inputs: { control: "control", routePartition: "routePartition", directoryNumber: "directoryNumber", siteId: "siteId" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div *ngIf=\"this.availableNumbers?.length\" class=\"user-calling-extension\">\n  <mat-form-field appearance=\"outline\">\n    <mat-select [formControl]=\"control\" name=\"extension\"\n                (selectionChange)=\"this.onChangeField($event)\">\n      <mat-option *ngFor=\"let option of this.availableNumbers; let i = index;\"[value]=\"option\">{{option}}</mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-spinner *ngIf=\"this.dataPending\" [diameter]=\"50\"></mat-spinner>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.user-calling-extension{max-width:200px;margin:0 0 0 6px}.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:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.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}.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}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap: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: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingExtensionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-user-calling-extension', template: "<div *ngIf=\"this.availableNumbers?.length\" class=\"user-calling-extension\">\n  <mat-form-field appearance=\"outline\">\n    <mat-select [formControl]=\"control\" name=\"extension\"\n                (selectionChange)=\"this.onChangeField($event)\">\n      <mat-option *ngFor=\"let option of this.availableNumbers; let i = index;\"[value]=\"option\">{{option}}</mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-spinner *ngIf=\"this.dataPending\" [diameter]=\"50\"></mat-spinner>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.user-calling-extension{max-width:200px;margin:0 0 0 6px}.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:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.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}.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}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"] }]
-        }], ctorParameters: function () { return [{ type: UserService }, { type: DnsService }]; }, propDecorators: { control: [{
-                type: Input
-            }], routePartition: [{
-                type: Input
-            }], directoryNumber: [{
-                type: Input
-            }], siteId: [{
-                type: Input
-            }], onChange: [{
-                type: Output
-            }] } });
-
-class UserCallingComponent {
-    get form() {
-        var _a, _b, _c, _d;
-        return ((_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.devices[0]) && ((_d = (_c = this.userService) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.devices[0].lineAssociations[0].form);
-    }
-    get formControl() {
-        var _a;
-        const control = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get('directoryNumber');
-        return control;
-    }
-    get lineAssociation() {
-        var _a, _b;
-        return (_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.devices[0].lineAssociations[0];
-    }
-    get user() {
-        return this.userService.user;
-    }
-    constructor(userService, dnsService) {
-        this.userService = userService;
-        this.dnsService = dnsService;
-        this.onExtensionChange = new EventEmitter();
-    }
-    ngOnInit() {
-        // this.getData();
-    }
-    onDirectoryNumberChange(value) {
-        if (this.lineAssociation && this.lineAssociation.directoryNumber) {
-            // @ts-ignore
-            this.userService.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber = value;
-            this.onExtensionChange.next(true);
-        }
-    }
-    onChangeField(token) {
-        var _a, _b;
-        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;
-    }
-    toggleEditMode() {
-        this.userService.user.toggleEditMode();
-    }
-    isSavingDisabled() {
-        return !this.userService.hasUnsavedChanges() || this.userService.hasExistedUserId;
-    }
-    onChangeExtension(value) {
-        if (this.lineAssociation && this.lineAssociation.directoryNumber) {
-            // @ts-ignore
-            this.userService.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber = value;
-        }
-    }
-    getData() {
-        this.dataPending = true;
-        this.dnsService.getNumberRange(String(this.siteId), this.userId)
-            .subscribe({
-            complete: (v) => {
-                this.dataPending = false;
-            },
-            error: (e) => this.dataPending = false,
-        });
-    }
-}
-UserCallingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingComponent, deps: [{ token: UserService }, { token: DnsService }], target: i0.ɵɵFactoryTarget.Component });
-UserCallingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCallingComponent, selector: "app-user-calling", inputs: { siteId: "siteId", userId: "userId" }, outputs: { onExtensionChange: "onExtensionChange" }, ngImport: i0, template: "<div id=\"user-calling\" class=\"info-boxes-container\" *ngIf=\"siteId && lineAssociation && form\" [formGroup]=\"form\">\n  <!--    USER INFO BOX-->\n  <div class=\"user-info-box user-details-box\">\n    <h3 class=\"user-box-title\">Numbers</h3>\n    <div class=\"form-holder__inputs\">\n      <h4>Directory Number</h4>\n      <table>\n        <tr>\n          <th>Type</th>\n          <th>Number</th>\n          <th>Extension</th>\n        </tr>\n        <tr >\n          <td></td>\n          <td></td>\n          <td>\n            <app-user-calling-extension\n              *ngIf=\"formControl\"\n              [siteId]=\"this.siteId\"\n              [control]=\"formControl\"\n              [routePartition]=\"this.lineAssociation?.directoryNumber?.routePartitionName\"\n              [directoryNumber]=\"this.lineAssociation?.directoryNumber?.directoryNumber\"\n              (onChange)=\"onDirectoryNumberChange($event)\">\n            </app-user-calling-extension>\n\n          </td>\n        </tr>\n      </table>\n    </div>\n\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";#user-calling table{margin:10px 0;width:100%}#user-calling th{color:#000;text-align:left;background:#efefef;font-size:14px;font-weight:500;padding:2px 5px}.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:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.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}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: UserCallingExtensionComponent, selector: "app-user-calling-extension", inputs: ["control", "routePartition", "directoryNumber", "siteId"], outputs: ["onChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-user-calling', template: "<div id=\"user-calling\" class=\"info-boxes-container\" *ngIf=\"siteId && lineAssociation && form\" [formGroup]=\"form\">\n  <!--    USER INFO BOX-->\n  <div class=\"user-info-box user-details-box\">\n    <h3 class=\"user-box-title\">Numbers</h3>\n    <div class=\"form-holder__inputs\">\n      <h4>Directory Number</h4>\n      <table>\n        <tr>\n          <th>Type</th>\n          <th>Number</th>\n          <th>Extension</th>\n        </tr>\n        <tr >\n          <td></td>\n          <td></td>\n          <td>\n            <app-user-calling-extension\n              *ngIf=\"formControl\"\n              [siteId]=\"this.siteId\"\n              [control]=\"formControl\"\n              [routePartition]=\"this.lineAssociation?.directoryNumber?.routePartitionName\"\n              [directoryNumber]=\"this.lineAssociation?.directoryNumber?.directoryNumber\"\n              (onChange)=\"onDirectoryNumberChange($event)\">\n            </app-user-calling-extension>\n\n          </td>\n        </tr>\n      </table>\n    </div>\n\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";#user-calling table{margin:10px 0;width:100%}#user-calling th{color:#000;text-align:left;background:#efefef;font-size:14px;font-weight:500;padding:2px 5px}.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:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.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}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"] }]
-        }], ctorParameters: function () { return [{ type: UserService }, { type: DnsService }]; }, propDecorators: { siteId: [{
-                type: Input
-            }], userId: [{
-                type: Input
-            }], onExtensionChange: [{
-                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) || ''}`;
-    }
-    get lineAssociation() {
-        var _a, _b;
-        return (_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.devices[0].lineAssociations[0];
-    }
-    constructor(userService, apiService) {
-        this.userService = userService;
-        this.apiService = apiService;
-        this.onSave = new EventEmitter();
-        this.onChange = new EventEmitter();
-        this.userService.onUserLineSaved$
-            .subscribe(() => {
-            this.userService.persistCacheChanges()
-                .subscribe(() => {
-                this.userService.dataPending = false;
-                this.onSave.next("saved");
-            });
-        }, () => this.userService.dataPending = false);
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.apiService.apiUrl = this.host;
-        this.getData();
-    }
-    onExtensionChange() {
-        this.onChange.next("start extension change..");
-    }
-    onChangeField(token) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        this.onChange.next("start change..");
-        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;
-        if (!this.userService.hasUnsavedChanges() || ((_a = this.form) === null || _a === void 0 ? void 0 : _a.invalid)) {
-            return;
-        }
-        if (this.user.devices[0].lineAssociations[0] && !this.user.devices[0].lineAssociations[0].equals(this.userService.originUser.devices[0].lineAssociations[0])) {
-            return this.userService.saveNewLine();
-        }
-        else {
-            this.dataPending = true;
-            const subscription = this.userService.persistCacheChanges()
-                .subscribe(() => {
-                this.dataPending = false;
-                this.onSave.next("user has been saved successfully..");
-                subscription.unsubscribe();
-            }, () => this.dataPending = false);
-        }
-    }
-    toggleEditMode() {
-        this.userService.user.toggleEditMode();
-    }
-    isSavingDisabled() {
-        return !this.userService.hasUnsavedChanges() || this.userService.hasExistedUserId;
-    }
-    changeField(token) {
-        var _a, _b;
-        this.onChange.next("start change..");
-        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, this.isLdap)
-            .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() {
-        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 {
-            // delete this.userService?.user?.newUserId;
-        }
-    }
-    save() {
-        this.saveChanges();
-    }
-}
-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", host: "host", siteId: "siteId", userId: "userId", isLdap: "isLdap" }, outputs: { onSave: "onSave", onChange: "onChange" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\n\n<div *ngIf=\"!dataPending\">\n  <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\n            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\"\n            fill=\"black\" fill-opacity=\"0.95\"/>\n        </svg>\n        Users\n      </div>\n    </div>\n  </div>\n  <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\n                 [position]=\"'Member of ' + user.siteName\"></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 label=\"Calling\" [disabled]=\"!lineAssociation\">\n      <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\n                        (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\n    </mat-tab>\n    <mat-tab label=\"Devices\" [disabled]=\"true\"></mat-tab>\n    <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\n    <mat-tab label=\"Features\" [disabled]=\"true\"></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        <!--    USER INFO BOX-->\n        <div class=\"user-info-box user-details-box\">\n          <h3 class=\"user-box-title\">User Details</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\" 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\" 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\" 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\" 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\">General User 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\"\n                         (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\"\n                         (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\"\n                         (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\"\n                         (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</div>\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\";.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:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.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}.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}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}\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.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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: i7$1.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: i8$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { 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"] }, { kind: "component", type: UserCallingComponent, selector: "app-user-calling", inputs: ["siteId", "userId"], outputs: ["onExtensionChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-user-manage-widget', template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\n\n<div *ngIf=\"!dataPending\">\n  <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\n            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\"\n            fill=\"black\" fill-opacity=\"0.95\"/>\n        </svg>\n        Users\n      </div>\n    </div>\n  </div>\n  <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\n                 [position]=\"'Member of ' + user.siteName\"></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 label=\"Calling\" [disabled]=\"!lineAssociation\">\n      <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\n                        (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\n    </mat-tab>\n    <mat-tab label=\"Devices\" [disabled]=\"true\"></mat-tab>\n    <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\n    <mat-tab label=\"Features\" [disabled]=\"true\"></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        <!--    USER INFO BOX-->\n        <div class=\"user-info-box user-details-box\">\n          <h3 class=\"user-box-title\">User Details</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\" 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\" 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\" 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\" 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\">General User 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\"\n                         (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\"\n                         (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\"\n                         (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\"\n                         (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</div>\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\";.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:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.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}.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}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}\n"] }]
-        }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }]; }, propDecorators: { onSave: [{
-                type: Output
-            }], onChange: [{
-                type: Output
-            }], token: [{
-                type: Input
-            }], host: [{
-                type: Input
-            }], siteId: [{
-                type: Input
-            }], userId: [{
-                type: Input
-            }], isLdap: [{
-                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,
-        UserCallingComponent,
-        UserCallingExtensionComponent], 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,
-        DnsService,
-        LineService,
-        { 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,
-                        UserCallingComponent,
-                        UserCallingExtensionComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        BrowserModule,
-                        BrowserAnimationsModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        HttpClientModule,
-                        MaterialModule,
-                    ],
-                    providers: [
-                        APIService,
-                        UserService,
-                        NotificationService,
-                        UsersSearchService,
-                        RemoveKynFromIBMService,
-                        SiteSettingsService,
-                        DnsService,
-                        LineService,
-                        { 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