@tuki-io/tuki-widgets 0.0.32 → 0.0.35

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

@@ -43,2080 +43,2080 @@ 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
+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 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
+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;
-    }, {});
+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 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 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 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 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;
-        this.lineAssociationsHasChanges = false;
-        this.plarService = false;
-        if (device) {
-            this.name = device.name;
-            this.pkiid = device.pkiid;
-            this.deviceType = device.deviceType;
-            this.protocol = device.protocol;
-            this.description = device.description;
-            this.buttonTemplate = device.buttonTemplate;
-            this.softkeyTemplate = device.softkeyTemplate;
-            this.devicePoolName = device.devicePoolName;
-            this.location = device.location;
-            this.firmwareVersion = device.firmwareVersion;
-            this.plarService = device.plarService;
-            this.callingSearchSpaceName = device.callingSearchSpaceName;
-            this.registrationStatus = 'Unknown'; // TEMP for demo
-            this.ipAddress = 'None'; // TEMP for demo
-            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";
+class Device {
+    constructor(device) {
+        var _a;
+        this.lineAssociationsHasChanges = false;
+        this.plarService = false;
+        if (device) {
+            this.name = device.name;
+            this.pkiid = device.pkiid;
+            this.deviceType = device.deviceType;
+            this.protocol = device.protocol;
+            this.description = device.description;
+            this.buttonTemplate = device.buttonTemplate;
+            this.softkeyTemplate = device.softkeyTemplate;
+            this.devicePoolName = device.devicePoolName;
+            this.location = device.location;
+            this.firmwareVersion = device.firmwareVersion;
+            this.plarService = device.plarService;
+            this.callingSearchSpaceName = device.callingSearchSpaceName;
+            this.registrationStatus = 'Unknown'; // TEMP for demo
+            this.ipAddress = 'None'; // TEMP for demo
+            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 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
+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
+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 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
+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"] }]
+class AppLoaderComponent {
+    constructor() {
+    }
+}
+AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"120\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"], dependencies: [{ kind: "component", type: 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\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"120\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}\n"] }]
         }], ctorParameters: function () { return []; } });
 
-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
+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 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\">\r\n  <div class=\"content-box flex-box\">\r\n    <div class=\"info-holder__user-image\">\r\n      <img src=\"../../../assets/a24749b225874bb3e3a4cb5d2f42e82c.png\" alt=\"\" class=\"avatar\">\r\n    </div>\r\n    <div class=\"info-holder__user-information\">\r\n      <div class=\"info-holder__user-name\">{{name}}</div>\r\n      <div class=\"info-holder__user-breadcrumbs\">\r\n        <div class=\"is-active\" *ngIf=\"active; else notActive\">\r\n          <span class=\"icon-user-status icon-user-status-active\"></span>Active\r\n        </div>\r\n        <div class=\"icon-separator\"></div>\r\n        <div class=\"email\">{{email}}</div>\r\n        <div class=\"icon-separator\"></div>\r\n        <div class=\"position\">{{position}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<ng-template #notActive>\r\n    <div class=\"is-active\">\r\n        <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\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\"/>\r\n        </svg>\r\n        <div>Not active</div>\r\n    </div>\r\n</ng-template>\r\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\">\r\n  <div class=\"content-box flex-box\">\r\n    <div class=\"info-holder__user-image\">\r\n      <img src=\"../../../assets/a24749b225874bb3e3a4cb5d2f42e82c.png\" alt=\"\" class=\"avatar\">\r\n    </div>\r\n    <div class=\"info-holder__user-information\">\r\n      <div class=\"info-holder__user-name\">{{name}}</div>\r\n      <div class=\"info-holder__user-breadcrumbs\">\r\n        <div class=\"is-active\" *ngIf=\"active; else notActive\">\r\n          <span class=\"icon-user-status icon-user-status-active\"></span>Active\r\n        </div>\r\n        <div class=\"icon-separator\"></div>\r\n        <div class=\"email\">{{email}}</div>\r\n        <div class=\"icon-separator\"></div>\r\n        <div class=\"position\">{{position}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<ng-template #notActive>\r\n    <div class=\"is-active\">\r\n        <svg width=\"8\" height=\"9\" viewBox=\"0 0 8 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\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\"/>\r\n        </svg>\r\n        <div>Not active</div>\r\n    </div>\r\n</ng-template>\r\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
-                    ],
-                }]
+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 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 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
+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"] }]
+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: "<!--\r\n\r\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\r\n  <div class=\"notification\"\r\n       *ngFor=\"let notification of list\"\r\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\r\n\r\n    <div class=\"flex-box\">\r\n      <div class=\"notification-icons-block\">\r\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\r\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\r\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\r\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\r\n      </div>\r\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\r\n        {{notification.message | truncate:[93]}}\r\n      </div>\r\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\r\n        {{notification.message}}\r\n      </div>\r\n    </div>\r\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\r\n         (click)=\"readMore()\">{{(isReadMore ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>\r\n    <button\r\n      class=\"close\"\r\n      mat-icon-button\r\n      matTooltip=\"{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}\"\r\n      (click)=\"removeNotification(notification)\">\r\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\r\n    </button>\r\n  </div>\r\n</div>\r\n-->\r\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: "<!--\r\n\r\n<div class=\"notification-block\" role=\"alert\" aria-live=\"assertive\">\r\n  <div class=\"notification\"\r\n       *ngFor=\"let notification of list\"\r\n       [ngClass]=\"{'error': notification.isError(), 'success': notification.isSuccess()}\">\r\n\r\n    <div class=\"flex-box\">\r\n      <div class=\"notification-icons-block\">\r\n        <i *ngIf=\"notification.isError()\" class=\"fa fa-exclamation-triangle\"></i>\r\n        <i *ngIf=\"notification.isWarning()\" class=\"fa fa-hand-paper-o\"></i>\r\n        <i *ngIf=\"notification.isSuccess()\" class=\"fa fa-check\"></i>\r\n        <i *ngIf=\"notification.isInfo()\" class=\"fa fa-info-circle\"></i>\r\n      </div>\r\n      <div *ngIf=\"!isReadMore\" class=\"message-block\">\r\n        {{notification.message | truncate:[93]}}\r\n      </div>\r\n      <div *ngIf=\"isReadMore\" class=\"message-block\">\r\n        {{notification.message}}\r\n      </div>\r\n    </div>\r\n    <div class=\"read-more-error link clickable\" *ngIf=\"notification.message && notification.message.length > 93\"\r\n         (click)=\"readMore()\">{{(isReadMore ? 'BUTTON.COLLAPSE' : 'BUTTON.READ_MORE') | translate}}</div>\r\n    <button\r\n      class=\"close\"\r\n      mat-icon-button\r\n      matTooltip=\"{{'BUTTON.CLOSE' | translate}} {{'NOTIFICATION_MSG.' + notification.type | translate}} {{'NOTIFICATION_MSG.NOTI' | translate}}\"\r\n      (click)=\"removeNotification(notification)\">\r\n      <img class=\"notification-icon-close\" src=\"assets/icons/close_icon_modal.svg\" alt=\"\">\r\n    </button>\r\n  </div>\r\n</div>\r\n-->\r\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);
-        }
-    }
+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
+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
+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 PaginationComponent {
+    constructor() {
+        this.pageEmitter = new EventEmitter();
+        this.pageNumberChangeEmitter = new EventEmitter();
+        this.pageSizeOptions = PAGINATION_SIZE_OPTIONS;
+    }
+    ngOnInit() {
+    }
+    pageEvent(event) {
+        this.pageEmitter.emit(event);
+    }
+    changePerPageNumber(event) {
+        this.pageNumberChangeEmitter.emit(event.value);
+    }
+}
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PaginationComponent, selector: "app-pagination", inputs: { pagination: "pagination", showPageSizeOptions: "showPageSizeOptions", showRefreshButton: "showRefreshButton", lengthPending: "lengthPending" }, outputs: { pageEmitter: "pageEmitter", pageNumberChangeEmitter: "pageNumberChangeEmitter" }, ngImport: i0, template: "<div class=\"flex-box pagination\">\r\n  <div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n    <mat-spinner class=\"length-spinner\" [diameter]=\"20\" mode=\"indeterminate\" *ngIf=\"lengthPending\">\r\n    </mat-spinner>\r\n  </div>\r\n\r\n  <div class=\"flex-box per-page-block\" *ngIf=\"showPageSizeOptions\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select [(ngModel)]=\"pagination.pageSize\" (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".search-header-refresh-icon{align-items:center;line-height:54px;margin-left:10px}button[mat-icon-button] i{font-size:18px}mat-spinner.length-spinner{position:absolute;right:120px}h3,.search-header-refresh-icon{float:left}.page-options,.mat-paginator{float:right}.per-page-block mat-form-field{width:70px!important}.per-page-block span{margin-right:20px}.pagination{display:flex;justify-content:flex-end}.select-page-size{width:60px;margin:0 0 0 15px;padding:0 10px}.item_per_page{line-height:35px}\n"], dependencies: [{ kind: "directive", type: 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\">\r\n  <div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n    <mat-spinner class=\"length-spinner\" [diameter]=\"20\" mode=\"indeterminate\" *ngIf=\"lengthPending\">\r\n    </mat-spinner>\r\n  </div>\r\n\r\n  <div class=\"flex-box per-page-block\" *ngIf=\"showPageSizeOptions\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select [(ngModel)]=\"pagination.pageSize\" (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".search-header-refresh-icon{align-items:center;line-height:54px;margin-left:10px}button[mat-icon-button] i{font-size:18px}mat-spinner.length-spinner{position:absolute;right:120px}h3,.search-header-refresh-icon{float:left}.page-options,.mat-paginator{float:right}.per-page-block mat-form-field{width:70px!important}.per-page-block span{margin-right:20px}.pagination{display:flex;justify-content:flex-end}.select-page-size{width:60px;margin:0 0 0 15px;padding:0 10px}.item_per_page{line-height:35px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { pagination: [{
+                type: Input
+            }], showPageSizeOptions: [{
+                type: Input
+            }], showRefreshButton: [{
+                type: Input
+            }], lengthPending: [{
+                type: Input
+            }], pageEmitter: [{
+                type: Output
+            }], pageNumberChangeEmitter: [{
+                type: Output
             }] } });
 
-class 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
+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
+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\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <mat-select [formControl]=\"formControl\"\r\n                (openedChange)=\"getOptions()\"\r\n                [placeholder]=\"placeholder\"\r\n                (selectionChange)=\"onFieldChange(controlName)\"\r\n                [id]=\"id\">\r\n      <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\r\n      <mat-option *ngFor=\"let type of options\" [value]=\"type\">\r\n        {{type}}\r\n      </mat-option>\r\n      <mat-progress-spinner class=\"field-spinner\"\r\n                            [diameter]=\"20\"\r\n                            mode=\"indeterminate\"\r\n                            *ngIf=\"optionsPending\"></mat-progress-spinner>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\r\n      <i class=\"fa fa-exclamation-triangle\"></i>\r\n      {{errorText}}\r\n    </mat-error>\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<!--\r\nThis duplication is caused by the following bug: https://github.com/angular/components/issues/9411\r\nWhich doesn't allow projection in mat-form-field\r\n-->\r\n\r\n<ng-container *ngIf=\"!standalone\">\r\n  <mat-select *ngIf=\"form.get(controlName)\"\r\n              [formControl]=\"formControl\"\r\n              (openedChange)=\"getOptions()\"\r\n              [placeholder]=\"placeholder\"\r\n              (selectionChange)=\"onFieldChange(controlName)\"\r\n              [id]=\"id\"\r\n  >\r\n    <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\r\n    <mat-option *ngFor=\"let type of options\" [value]=\"type\">\r\n      {{type}}\r\n    </mat-option>\r\n    <mat-progress-spinner class=\"field-spinner\"\r\n                          [diameter]=\"20\"\r\n                          mode=\"indeterminate\"\r\n                          *ngIf=\"optionsPending\"></mat-progress-spinner>\r\n  </mat-select>\r\n  <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\r\n    <i class=\"fa fa-exclamation-triangle\"></i>\r\n    {{errorText}}\r\n  </mat-error>\r\n</ng-container>\r\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\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <mat-select [formControl]=\"formControl\"\r\n                (openedChange)=\"getOptions()\"\r\n                [placeholder]=\"placeholder\"\r\n                (selectionChange)=\"onFieldChange(controlName)\"\r\n                [id]=\"id\">\r\n      <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\r\n      <mat-option *ngFor=\"let type of options\" [value]=\"type\">\r\n        {{type}}\r\n      </mat-option>\r\n      <mat-progress-spinner class=\"field-spinner\"\r\n                            [diameter]=\"20\"\r\n                            mode=\"indeterminate\"\r\n                            *ngIf=\"optionsPending\"></mat-progress-spinner>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\r\n      <i class=\"fa fa-exclamation-triangle\"></i>\r\n      {{errorText}}\r\n    </mat-error>\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<!--\r\nThis duplication is caused by the following bug: https://github.com/angular/components/issues/9411\r\nWhich doesn't allow projection in mat-form-field\r\n-->\r\n\r\n<ng-container *ngIf=\"!standalone\">\r\n  <mat-select *ngIf=\"form.get(controlName)\"\r\n              [formControl]=\"formControl\"\r\n              (openedChange)=\"getOptions()\"\r\n              [placeholder]=\"placeholder\"\r\n              (selectionChange)=\"onFieldChange(controlName)\"\r\n              [id]=\"id\"\r\n  >\r\n    <mat-option *ngIf=\"default\" [disabled]=\"default.disabled\" [value]=\"default.key\">{{default.value}}</mat-option>\r\n    <mat-option *ngFor=\"let type of options\" [value]=\"type\">\r\n      {{type}}\r\n    </mat-option>\r\n    <mat-progress-spinner class=\"field-spinner\"\r\n                          [diameter]=\"20\"\r\n                          mode=\"indeterminate\"\r\n                          *ngIf=\"optionsPending\"></mat-progress-spinner>\r\n  </mat-select>\r\n  <mat-error *ngIf=\"form.get(controlName)?.hasError(errorCode)\">\r\n    <i class=\"fa fa-exclamation-triangle\"></i>\r\n    {{errorText}}\r\n  </mat-error>\r\n</ng-container>\r\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";
+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
+// 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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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 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\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <mat-select [formControl]=\"control\" name=\"extension\"\r\n                (selectionChange)=\"this.onChangeField($event)\">\r\n      <mat-option *ngFor=\"let option of this.availableNumbers; let i = index;\"[value]=\"option\">{{option}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-spinner *ngIf=\"this.dataPending\" [diameter]=\"50\"></mat-spinner>\r\n</div>\r\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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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\">\r\n  <mat-form-field appearance=\"outline\">\r\n    <mat-select [formControl]=\"control\" name=\"extension\"\r\n                (selectionChange)=\"this.onChangeField($event)\">\r\n      <mat-option *ngFor=\"let option of this.availableNumbers; let i = index;\"[value]=\"option\">{{option}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-spinner *ngIf=\"this.dataPending\" [diameter]=\"50\"></mat-spinner>\r\n</div>\r\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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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{height:calc(100vh - 100px)}#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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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{height:calc(100vh - 100px)}#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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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 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\">\r\n  <!--    USER INFO BOX-->\r\n  <div class=\"user-info-box user-details-box\">\r\n    <h3 class=\"user-box-title\">Numbers</h3>\r\n    <div class=\"form-holder__inputs\">\r\n      <h4>Directory Number</h4>\r\n      <table>\r\n        <tr>\r\n          <th>Type</th>\r\n          <th>Number</th>\r\n          <th>Extension</th>\r\n        </tr>\r\n        <tr >\r\n          <td></td>\r\n          <td></td>\r\n          <td>\r\n            <app-user-calling-extension\r\n              *ngIf=\"formControl\"\r\n              [siteId]=\"this.siteId\"\r\n              [control]=\"formControl\"\r\n              [routePartition]=\"this.lineAssociation?.directoryNumber?.routePartitionName\"\r\n              [directoryNumber]=\"this.lineAssociation?.directoryNumber?.directoryNumber\"\r\n              (onChange)=\"onDirectoryNumberChange($event)\">\r\n            </app-user-calling-extension>\r\n\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";#user-calling{height:calc(100vh - 100px)}#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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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\">\r\n  <!--    USER INFO BOX-->\r\n  <div class=\"user-info-box user-details-box\">\r\n    <h3 class=\"user-box-title\">Numbers</h3>\r\n    <div class=\"form-holder__inputs\">\r\n      <h4>Directory Number</h4>\r\n      <table>\r\n        <tr>\r\n          <th>Type</th>\r\n          <th>Number</th>\r\n          <th>Extension</th>\r\n        </tr>\r\n        <tr >\r\n          <td></td>\r\n          <td></td>\r\n          <td>\r\n            <app-user-calling-extension\r\n              *ngIf=\"formControl\"\r\n              [siteId]=\"this.siteId\"\r\n              [control]=\"formControl\"\r\n              [routePartition]=\"this.lineAssociation?.directoryNumber?.routePartitionName\"\r\n              [directoryNumber]=\"this.lineAssociation?.directoryNumber?.directoryNumber\"\r\n              (onChange)=\"onDirectoryNumberChange($event)\">\r\n            </app-user-calling-extension>\r\n\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";#user-calling{height:calc(100vh - 100px)}#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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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 DeviceListComponent {
-    constructor() {
-        this.onDeviceSelect = new EventEmitter();
-        console.log('devices list');
-    }
-    selectDevice(device) {
-        this.onDeviceSelect.emit(device);
-    }
-}
-DeviceListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DeviceListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceListComponent, selector: "app-device-list", inputs: { devices: "devices" }, outputs: { onDeviceSelect: "onDeviceSelect" }, ngImport: i0, template: "<div class=\"webex-list device-list-container\">\n  <div class=\"webex-list-header\">\n    <div class=\"webex-list-header__hr\">Name</div>\n    <div class=\"webex-list-header__hr\">Type</div>\n    <div class=\"webex-list-header__hr\">Line</div>\n    <div class=\"webex-list-header__hr\">Device description</div>\n    <div class=\"webex-list-header__hr\">Plar service</div>\n  </div>\n  <ng-container *ngFor=\"let device of devices\">\n    <div class=\"device-item\" (click)=\"selectDevice(device)\">\n      <div class=\"device-item__td\">{{ device.name }}</div>\n      <div class=\"device-item__td\">{{ device.deviceType }}</div>\n      <div class=\"device-item__td\">\n        <span class=\"device-associated-line\" *ngFor=\"let line of device.lineAssociations\">{{line.directoryNumber?.directoryNumber}} | </span>\n      </div>\n      <div class=\"device-item__td\">{{ device.description }}</div>\n      <div class=\"device-item__td\">\n        <mat-slide-toggle class=\"device-slide-toggle\" [disabled]=\"true\" [checked]=\"device.plarService\"></mat-slide-toggle>\n      </div>\n      <div class=\"device-item__actions-menu\" style=\"text-align: right;\">\n        <div class=\"device-item__more\">\n<!--          <mat-icon>more_vert</mat-icon>-->\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\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}.webex-list{padding:2.5rem}.webex-list-header{display:flex;align-items:center;padding:1rem}.webex-list-header__hr{width:100%;font-size:12px}.device-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #b0b0b0;padding:.8rem;z-index:10;transition:background-color .3s;cursor:pointer}.device-item__td{width:100%}.device-item__actions-menu{position:absolute;margin:0 1rem;right:0}.device-item__more{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b0b0;border-radius:50%;padding:.5rem;transition:background-color .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-device-list', template: "<div class=\"webex-list device-list-container\">\n  <div class=\"webex-list-header\">\n    <div class=\"webex-list-header__hr\">Name</div>\n    <div class=\"webex-list-header__hr\">Type</div>\n    <div class=\"webex-list-header__hr\">Line</div>\n    <div class=\"webex-list-header__hr\">Device description</div>\n    <div class=\"webex-list-header__hr\">Plar service</div>\n  </div>\n  <ng-container *ngFor=\"let device of devices\">\n    <div class=\"device-item\" (click)=\"selectDevice(device)\">\n      <div class=\"device-item__td\">{{ device.name }}</div>\n      <div class=\"device-item__td\">{{ device.deviceType }}</div>\n      <div class=\"device-item__td\">\n        <span class=\"device-associated-line\" *ngFor=\"let line of device.lineAssociations\">{{line.directoryNumber?.directoryNumber}} | </span>\n      </div>\n      <div class=\"device-item__td\">{{ device.description }}</div>\n      <div class=\"device-item__td\">\n        <mat-slide-toggle class=\"device-slide-toggle\" [disabled]=\"true\" [checked]=\"device.plarService\"></mat-slide-toggle>\n      </div>\n      <div class=\"device-item__actions-menu\" style=\"text-align: right;\">\n        <div class=\"device-item__more\">\n<!--          <mat-icon>more_vert</mat-icon>-->\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\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}.webex-list{padding:2.5rem}.webex-list-header{display:flex;align-items:center;padding:1rem}.webex-list-header__hr{width:100%;font-size:12px}.device-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #b0b0b0;padding:.8rem;z-index:10;transition:background-color .3s;cursor:pointer}.device-item__td{width:100%}.device-item__actions-menu{position:absolute;margin:0 1rem;right:0}.device-item__more{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b0b0;border-radius:50%;padding:.5rem;transition:background-color .3s ease-in-out}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { devices: [{
-                type: Input
-            }], onDeviceSelect: [{
-                type: Output
+class DeviceListComponent {
+    constructor() {
+        this.onDeviceSelect = new EventEmitter();
+        console.log('devices list');
+    }
+    selectDevice(device) {
+        this.onDeviceSelect.emit(device);
+    }
+}
+DeviceListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DeviceListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceListComponent, selector: "app-device-list", inputs: { devices: "devices" }, outputs: { onDeviceSelect: "onDeviceSelect" }, ngImport: i0, template: "<div class=\"webex-list device-list-container\">\r\n  <div class=\"webex-list-header\">\r\n    <div class=\"webex-list-header__hr\">Name</div>\r\n    <div class=\"webex-list-header__hr\">Type</div>\r\n    <div class=\"webex-list-header__hr\">Line</div>\r\n    <div class=\"webex-list-header__hr\">Device description</div>\r\n    <div class=\"webex-list-header__hr\">Plar service</div>\r\n  </div>\r\n  <ng-container *ngFor=\"let device of devices\">\r\n    <div class=\"device-item\" (click)=\"selectDevice(device)\">\r\n      <div class=\"device-item__td\">{{ device.name }}</div>\r\n      <div class=\"device-item__td\">{{ device.deviceType }}</div>\r\n      <div class=\"device-item__td\">\r\n        <span class=\"device-associated-line\" *ngFor=\"let line of device.lineAssociations\">{{line.directoryNumber?.directoryNumber}} | </span>\r\n      </div>\r\n      <div class=\"device-item__td\">{{ device.description }}</div>\r\n      <div class=\"device-item__td\">\r\n        <mat-slide-toggle class=\"device-slide-toggle\" [disabled]=\"true\" [checked]=\"device.plarService\"></mat-slide-toggle>\r\n      </div>\r\n      <div class=\"device-item__actions-menu\" style=\"text-align: right;\">\r\n        <div class=\"device-item__more\">\r\n<!--          <mat-icon>more_vert</mat-icon>-->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\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}.webex-list{padding:2.5rem}.webex-list-header{display:flex;align-items:center;padding:1rem}.webex-list-header__hr{width:100%;font-size:12px}.device-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #b0b0b0;padding:.8rem;z-index:10;transition:background-color .3s;cursor:pointer}.device-item__td{width:100%}.device-item__actions-menu{position:absolute;margin:0 1rem;right:0}.device-item__more{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b0b0;border-radius:50%;padding:.5rem;transition:background-color .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-device-list', template: "<div class=\"webex-list device-list-container\">\r\n  <div class=\"webex-list-header\">\r\n    <div class=\"webex-list-header__hr\">Name</div>\r\n    <div class=\"webex-list-header__hr\">Type</div>\r\n    <div class=\"webex-list-header__hr\">Line</div>\r\n    <div class=\"webex-list-header__hr\">Device description</div>\r\n    <div class=\"webex-list-header__hr\">Plar service</div>\r\n  </div>\r\n  <ng-container *ngFor=\"let device of devices\">\r\n    <div class=\"device-item\" (click)=\"selectDevice(device)\">\r\n      <div class=\"device-item__td\">{{ device.name }}</div>\r\n      <div class=\"device-item__td\">{{ device.deviceType }}</div>\r\n      <div class=\"device-item__td\">\r\n        <span class=\"device-associated-line\" *ngFor=\"let line of device.lineAssociations\">{{line.directoryNumber?.directoryNumber}} | </span>\r\n      </div>\r\n      <div class=\"device-item__td\">{{ device.description }}</div>\r\n      <div class=\"device-item__td\">\r\n        <mat-slide-toggle class=\"device-slide-toggle\" [disabled]=\"true\" [checked]=\"device.plarService\"></mat-slide-toggle>\r\n      </div>\r\n      <div class=\"device-item__actions-menu\" style=\"text-align: right;\">\r\n        <div class=\"device-item__more\">\r\n<!--          <mat-icon>more_vert</mat-icon>-->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\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}.webex-list{padding:2.5rem}.webex-list-header{display:flex;align-items:center;padding:1rem}.webex-list-header__hr{width:100%;font-size:12px}.device-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:1px solid #b0b0b0;padding:.8rem;z-index:10;transition:background-color .3s;cursor:pointer}.device-item__td{width:100%}.device-item__actions-menu{position:absolute;margin:0 1rem;right:0}.device-item__more{display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b0b0;border-radius:50%;padding:.5rem;transition:background-color .3s ease-in-out}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { devices: [{
+                type: Input
+            }], onDeviceSelect: [{
+                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.selectDevice = new EventEmitter();
-        this.goBack = 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();
-    }
-    onDeviceSelect(device) {
-        this.selectDevice.emit(device.name);
-    }
-    onGoBack() {
-        this.goBack.emit();
-    }
-    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", deviceName: "deviceName", isLdap: "isLdap" }, outputs: { onSave: "onSave", onChange: "onChange", selectDevice: "selectDevice", goBack: "goBack" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\n\n<div *ngIf=\"!dataPending\">\n  <div class=\"go-back-box\" (click)=\"onGoBack()\">\n    <div class=\"go-back-box-container\">\n      <span class=\"app-icon icon-webex-left-arrow\"></span>\n      <span class=\"go-back-title\">Users</span>\n    </div>\n  </div>\n\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\">\n      dev\n<!--      //[disabled]=\"!user?.devices?.length\"-->\n      <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\n    </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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg id%3D%22arrow-right%22%3E%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg id%3D%22arrow-left%22%3E%3Cpath id%3D%22Vector%22 d%3D%22M5.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%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{width:95%;margin:auto;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}\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: i2.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"] }, { kind: "component", type: DeviceListComponent, selector: "app-device-list", inputs: ["devices"], outputs: ["onDeviceSelect"] }] });
-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=\"go-back-box\" (click)=\"onGoBack()\">\n    <div class=\"go-back-box-container\">\n      <span class=\"app-icon icon-webex-left-arrow\"></span>\n      <span class=\"go-back-title\">Users</span>\n    </div>\n  </div>\n\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\">\n      dev\n<!--      //[disabled]=\"!user?.devices?.length\"-->\n      <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\n    </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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg id%3D%22arrow-right%22%3E%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg id%3D%22arrow-left%22%3E%3Cpath id%3D%22Vector%22 d%3D%22M5.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%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{width:95%;margin:auto;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}\n"] }]
-        }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }]; }, propDecorators: { onSave: [{
-                type: Output
-            }], onChange: [{
-                type: Output
-            }], selectDevice: [{
-                type: Output
-            }], goBack: [{
-                type: Output
-            }], token: [{
-                type: Input
-            }], host: [{
-                type: Input
-            }], siteId: [{
-                type: Input
-            }], userId: [{
-                type: Input
-            }], deviceName: [{
-                type: Input
-            }], isLdap: [{
-                type: Input
+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.selectDevice = new EventEmitter();
+        this.goBack = 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();
+    }
+    onDeviceSelect(device) {
+        this.selectDevice.emit(device.name);
+    }
+    onGoBack() {
+        this.goBack.emit();
+    }
+    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", deviceName: "deviceName", isLdap: "isLdap" }, outputs: { onSave: "onSave", onChange: "onChange", selectDevice: "selectDevice", goBack: "goBack" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n  <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n    <div class=\"go-back-box-container\">\r\n      <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n      <span class=\"go-back-title\">Users</span>\r\n    </div>\r\n  </div>\r\n\r\n  <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n                 [position]=\"'Member of ' + user.siteName\"></app-user-info>\r\n\r\n  <mat-tab-group disableRipple class=\"content-box\">\r\n    <mat-tab label=\"Profile\">\r\n      <ng-container *ngTemplateOutlet=\"userProfile\">\r\n      </ng-container>\r\n    </mat-tab>\r\n    <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n      <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n                        (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n    </mat-tab>\r\n    <mat-tab label=\"Devices\">\r\n      <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n    </mat-tab>\r\n    <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n    <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <ng-template #userProfile>\r\n    <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n      <div class=\"info-boxes-container\">\r\n        <!--    USER INFO BOX-->\r\n        <div class=\"user-info-box user-details-box\">\r\n          <h3 class=\"user-box-title\">User Details</h3>\r\n          <div class=\"form-holder__inputs\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">User Id</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n                  <mat-error\r\n                    *ngIf=\"form.get('userid').hasError('required')\">\r\n                    <i class=\"fa fa-exclamation-triangle\"></i>\r\n                    This field is required\r\n                  </mat-error>\r\n                  <mat-error *ngIf=\"form.get('userid').hasError('exist')\">\r\n                    <i class=\"fa fa-exclamation-triangle\"></i>\r\n                    User ID already exists\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Email</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n                  <mat-error\r\n                    *ngIf=\"form.get('email').touched && form.get('email').hasError('required')\">\r\n                    <i class=\"fa fa-exclamation-triangle\"></i>\r\n                    This field is required\r\n                  </mat-error>\r\n                  <mat-error *ngIf=\"form.get('email').touched && form.get('email').hasError('pattern')\">\r\n                    <i class=\"fa fa-exclamation-triangle\"></i>\r\n                    Please enter valid email\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Fisrt Name</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Last Name</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n                  <mat-error\r\n                    *ngIf=\"form.get('lastName').touched && form.get('lastName').hasError('required')\">\r\n                    <i class=\"fa fa-exclamation-triangle\"></i>\r\n                    This field is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n          </div>\r\n\r\n        </div>\r\n\r\n\r\n        <!--    USER INFO BOX-->\r\n        <div class=\"user-info-box user-details-box\">\r\n          <h3 class=\"user-box-title\">General User Info</h3>\r\n          <div class=\"form-holder__inputs\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Department</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Manager user ID</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Associated PC</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Digest credentials</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n                         (input)=\"onChangeField('digestCredentials')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">User profile</div>\r\n              <div class=\"input-holder__input\">\r\n                <app-lazy-loading-select\r\n                  [siteId]=\"siteId\"\r\n                  [controlName]=\"'userProfile'\"\r\n                  [form]=\"user.form\"\r\n                  (changeField)=\"changeField('userProfile')\"\r\n                  [optionsToken]=\"'userProfiles'\"\r\n                ></app-lazy-loading-select>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Mobile voice access</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-slide-toggle\r\n                  formControlName=\"enableMobileVoiceAccess\"\r\n                  (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n                  [checked]=\"user.enableMobileVoiceAccess\">\r\n                </mat-slide-toggle>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Userlocale</div>\r\n              <div class=\"input-holder__input\">\r\n                <app-lazy-loading-select\r\n                  [siteId]=\"siteId\"\r\n                  [controlName]=\"'userLocale'\"\r\n                  [form]=\"user.form\"\r\n                  (changeField)=\"changeField($event)\"\r\n                  [optionsToken]=\"'userLocales'\"\r\n                  [default]=\"{key: '', value: 'None', disabled: false}\">\r\n                </app-lazy-loading-select>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n                         (input)=\"onChangeField('confirmDigestCredentials')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!--    USER INFO BOX-->\r\n        <div class=\"user-info-box user-details-box\">\r\n          <h3 class=\"user-box-title\">Contact Information</h3>\r\n          <div class=\"form-holder__inputs\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Middle Name</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Telephone Number</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n                         (input)=\"onChangeField('telephoneNumber')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Mobile Number</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Digest credentials</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n                         (input)=\"onChangeField('digestCredentials')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Diractory URI</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Title</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Home Number</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Pager Number</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Display Name</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </form>\r\n  </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!--  class=\"page-spinner\"-->\r\n<!--  mode=\"indeterminate\"-->\r\n<!--  [diameter]=\"120\"></mat-progress-spinner>-->\r\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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg id%3D%22arrow-right%22%3E%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg id%3D%22arrow-left%22%3E%3Cpath id%3D%22Vector%22 d%3D%22M5.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%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{width:95%;margin:auto;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}\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: i2.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"] }, { kind: "component", type: DeviceListComponent, selector: "app-device-list", inputs: ["devices"], outputs: ["onDeviceSelect"] }] });
+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>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n  <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n    <div class=\"go-back-box-container\">\r\n      <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n      <span class=\"go-back-title\">Users</span>\r\n    </div>\r\n  </div>\r\n\r\n  <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n                 [position]=\"'Member of ' + user.siteName\"></app-user-info>\r\n\r\n  <mat-tab-group disableRipple class=\"content-box\">\r\n    <mat-tab label=\"Profile\">\r\n      <ng-container *ngTemplateOutlet=\"userProfile\">\r\n      </ng-container>\r\n    </mat-tab>\r\n    <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n      <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n                        (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n    </mat-tab>\r\n    <mat-tab label=\"Devices\">\r\n      <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n    </mat-tab>\r\n    <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n    <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <ng-template #userProfile>\r\n    <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n      <div class=\"info-boxes-container\">\r\n        <!--    USER INFO BOX-->\r\n        <div class=\"user-info-box user-details-box\">\r\n          <h3 class=\"user-box-title\">User Details</h3>\r\n          <div class=\"form-holder__inputs\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">User Id</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n                  <mat-error\r\n                    *ngIf=\"form.get('userid').hasError('required')\">\r\n                    <i class=\"fa fa-exclamation-triangle\"></i>\r\n                    This field is required\r\n                  </mat-error>\r\n                  <mat-error *ngIf=\"form.get('userid').hasError('exist')\">\r\n                    <i class=\"fa fa-exclamation-triangle\"></i>\r\n                    User ID already exists\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Email</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n                  <mat-error\r\n                    *ngIf=\"form.get('email').touched && form.get('email').hasError('required')\">\r\n                    <i class=\"fa fa-exclamation-triangle\"></i>\r\n                    This field is required\r\n                  </mat-error>\r\n                  <mat-error *ngIf=\"form.get('email').touched && form.get('email').hasError('pattern')\">\r\n                    <i class=\"fa fa-exclamation-triangle\"></i>\r\n                    Please enter valid email\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Fisrt Name</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Last Name</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n                  <mat-error\r\n                    *ngIf=\"form.get('lastName').touched && form.get('lastName').hasError('required')\">\r\n                    <i class=\"fa fa-exclamation-triangle\"></i>\r\n                    This field is required\r\n                  </mat-error>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n          </div>\r\n\r\n        </div>\r\n\r\n\r\n        <!--    USER INFO BOX-->\r\n        <div class=\"user-info-box user-details-box\">\r\n          <h3 class=\"user-box-title\">General User Info</h3>\r\n          <div class=\"form-holder__inputs\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Department</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Manager user ID</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Associated PC</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Digest credentials</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n                         (input)=\"onChangeField('digestCredentials')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">User profile</div>\r\n              <div class=\"input-holder__input\">\r\n                <app-lazy-loading-select\r\n                  [siteId]=\"siteId\"\r\n                  [controlName]=\"'userProfile'\"\r\n                  [form]=\"user.form\"\r\n                  (changeField)=\"changeField('userProfile')\"\r\n                  [optionsToken]=\"'userProfiles'\"\r\n                ></app-lazy-loading-select>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Mobile voice access</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-slide-toggle\r\n                  formControlName=\"enableMobileVoiceAccess\"\r\n                  (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n                  [checked]=\"user.enableMobileVoiceAccess\">\r\n                </mat-slide-toggle>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Userlocale</div>\r\n              <div class=\"input-holder__input\">\r\n                <app-lazy-loading-select\r\n                  [siteId]=\"siteId\"\r\n                  [controlName]=\"'userLocale'\"\r\n                  [form]=\"user.form\"\r\n                  (changeField)=\"changeField($event)\"\r\n                  [optionsToken]=\"'userLocales'\"\r\n                  [default]=\"{key: '', value: 'None', disabled: false}\">\r\n                </app-lazy-loading-select>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n                         (input)=\"onChangeField('confirmDigestCredentials')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!--    USER INFO BOX-->\r\n        <div class=\"user-info-box user-details-box\">\r\n          <h3 class=\"user-box-title\">Contact Information</h3>\r\n          <div class=\"form-holder__inputs\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Middle Name</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Telephone Number</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n                         (input)=\"onChangeField('telephoneNumber')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Mobile Number</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Digest credentials</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n                         (input)=\"onChangeField('digestCredentials')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Diractory URI</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Title</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Home Number</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Pager Number</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Display Name</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </form>\r\n  </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!--  class=\"page-spinner\"-->\r\n<!--  mode=\"indeterminate\"-->\r\n<!--  [diameter]=\"120\"></mat-progress-spinner>-->\r\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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke: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%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg id%3D%22arrow-right%22%3E%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg id%3D%22arrow-left%22%3E%3Cpath id%3D%22Vector%22 d%3D%22M5.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%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{width:95%;margin:auto;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}\n"] }]
+        }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }]; }, propDecorators: { onSave: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }], selectDevice: [{
+                type: Output
+            }], goBack: [{
+                type: Output
+            }], token: [{
+                type: Input
+            }], host: [{
+                type: Input
+            }], siteId: [{
+                type: Input
+            }], userId: [{
+                type: Input
+            }], deviceName: [{
+                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,
-        DeviceListComponent], 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,
-                        DeviceListComponent
-                    ],
-                    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]
-                }]
+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,
+        DeviceListComponent], 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,
+                        DeviceListComponent
+                    ],
+                    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.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { APIService, SiteSettingsService, UserManageModule, UserManageWidgetComponent, UserService, UtilsService };