@tuki-io/tuki-widgets 0.0.75 → 0.0.77

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

@@ -0,0 +1,3402 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, NgModule, ChangeDetectionStrategy, EventEmitter, Input, Output, Inject, ViewChild } from '@angular/core';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpErrorResponse, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { map, catchError } from 'rxjs/operators';
+import { Subject, of, forkJoin, throwError, Observable } from 'rxjs';
+import * as i9 from '@angular/forms';
+import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import * as i5 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as i8 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i12 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTreeModule } from '@angular/material/tree';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MatButtonModule } from '@angular/material/button';
+import * as i11 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i13 from '@angular/material/core';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i6 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatStepperModule } from '@angular/material/stepper';
+import * as i14 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
+import * as i8$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i1$1 from '@angular/material/dialog';
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import * as Big from 'big.js';
+import * as i10 from '@angular/material/divider';
+
+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",
+    RECORDING_PROFILE: "/api/provision/options/:siteId/recordingprofiles",
+    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",
+    SOFTKEY_TEMPLATES: "/api/provision/options/:siteId/softkeytemplates",
+    SITE_SETTINGS: "/api/sites/:siteId/settings",
+    LINE_SLOTS: "/api/provision/:siteId/buttontemplate",
+    LEAN_USER_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserDetailsToken",
+    LEAN_USER_DEVICES_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserDevicesToken",
+    LEAN_USER_LINES_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/:leanUserDevicesToken/leanUserLinesToken",
+    LEAN_USER_SNR_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserSNRToken",
+    DEVICE_LINE_MONITOR_CSS: "/api/provision/options/:siteId/callingSearchSpace"
+};
+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 STATIC_OPTIONS = {
+    CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_ACTIVE: ['Use System Default', 'Disable', 'Beep Only'],
+    CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_IDLE: ['Use System Default', 'Disable', 'Ring Once'],
+    CONF_ACCESS_MODE: ['Fixed', 'Variable'],
+    DEFAULT_ON_OFF: ['Default', 'On', 'Off'],
+    DEFAULT_EN_DIS: ['Default', 'Enabled', 'Disabled'],
+    DND: ['Use Common Phone Profile Setting', 'Call Reject', 'Ringer Off'],
+    DND_INCOMING_CALL_ALLERT: ['Disable', 'Flash Only', 'Beep Only'],
+    LATENT_CAPABILITY: ['Gateway Controlled', 'Modem Relay', 'Modem Passthrough', 'Modem Relay and Passthrough', 'None'],
+    LINE_MODE: ['Session Line mode', 'Enhanced Line mode'],
+    ACTIONABLE_ALERT: ['Disabled', 'Show for all Incoming Call', 'Show for Invisible Incoming Call'],
+    MLPP_PREEMPTION: ['Default', 'Forceful', 'Disabled'],
+    PACKET_CAPTURE_MODE: ['None', 'Batch Processing Mode'],
+    RING_VOLUME: ['0-Silent', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
+    PORT_DIRECTION: ['Bothways', 'Inbound', 'Outbound'],
+    RING_SETTING_IDLE: ['Use System Default', 'Disable', 'Flash Only', 'Ring Once', 'Ring'],
+    RING_SETTING_ACTIVE: ['Use System Default', 'Disable', 'Flash Only', 'Ring Once', 'Ring', 'Beep Only'],
+    SERVICE_PROVISIONING: ['Default', 'Internal', 'External URL', 'Both'],
+    SETTINGS_ACCES: ['Enabled', 'Disabled', 'Restricted'],
+    VISUAL_MWI: ['Use System Policy', 'Light and Prompt', 'Prompt Only', 'Light Only', 'None'],
+    WEEKDAYS: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    BUILD_BRIDGE: ['None', 'On', 'Off', 'Default'],
+    TRANSFER_TYPES: ['Release to Switch', 'Supervise Transfer'],
+    EXTENSION_IS_BUSY_TYPES: ['Send Callers to Voicemail', 'Put Callers on Hold Without Asking', 'Ask Callers to Hold'],
+    CALL_ACTIONS: ['Hang Up', 'Restart Greeting', 'Route From Next Call Routing Rule', 'Take Message'],
+    AUTHENTICATION_802: ['User controlled', 'Disabled', 'Enabled'],
+    CERTIFICATE_OPERATION: ['No Pending Operation', 'Install/Upgrade', 'Delete', 'Troubleshoot'],
+    AUTHENTICATION_MODE: ['By Authentication String', 'By Null String', 'By Existing Certificate (precedence to LSC)', 'By Existing Certificate (precedence to MIC)'],
+    KEY_ORDER: ['RSA Only', 'EC Only', 'EC Preferred, RSA Backup'],
+    RSA_KEY_SIZE: ['512', '1024', '2048'],
+    RSA_KEY_SIZE_SPECIFIC_DEVICE: ['512', '1024', '2048', '3072', '4096']
+};
+const TOGGLE_TYPES = {
+    TABS: 'TABS',
+    ASSOCIATED_LINE_ONLY: 'ASSOCIATED_LINE_ONLY'
+};
+
+class SiteDefaults {
+    constructor(siteDefaults, isSharedLineSite) {
+        var _a, _b, _c, _d;
+        this.routePartitionFilter = [];
+        this.devicePoolFilter = [];
+        this.cssFilter = [];
+        this.voicemailProfileFilter = [];
+        if (siteDefaults) {
+            Object.assign(this, siteDefaults);
+            this.enableEm = siteDefaults.enableEm === 'true';
+            (_a = this.routePartitionFilter) === null || _a === void 0 ? void 0 : _a.sort();
+            (_b = this.devicePoolFilter) === null || _b === void 0 ? void 0 : _b.sort();
+            (_c = this.cssFilter) === null || _c === void 0 ? void 0 : _c.sort();
+            (_d = this.voicemailProfileFilter) === null || _d === void 0 ? void 0 : _d.sort();
+        }
+        /*if (isSharedLineSite && siteDefaults) {
+          this.cssFilter = siteDefaults?.sharedSitesCssFilter;
+          this.routePartitionFilter = siteDefaults?.sharedSitesRPFilter;
+        }*/
+    }
+}
+
+const urlMap = {
+    locations: API.LOCATION,
+    userLocales: API.USER_LOCALES,
+    userProfiles: API.USER_PROFILES,
+    recordingProfile: API.RECORDING_PROFILE,
+};
+class SiteSettingsService {
+    get callingSearchSpaceTypes() {
+        var _a;
+        return ((_a = this.siteDefaults) === null || _a === void 0 ? void 0 : _a.cssFilter) || [];
+    }
+    get devicePools() {
+        var _a;
+        return ((_a = this.siteDefaults) === null || _a === void 0 ? void 0 : _a.devicePoolFilter) || [];
+    }
+    constructor(apiService) {
+        this.apiService = apiService;
+        this.options = {};
+    }
+    getSelectionOptions(siteId, token) {
+        if (!siteId) {
+            return;
+        }
+        // @ts-ignore
+        const URL = urlMap[token];
+        return this.apiService.fetch(URL.replace(':siteId', String(siteId)))
+            .pipe(map((res) => {
+            this.options[token] = res;
+            return this.options;
+        }));
+    }
+    getDeviceSoftkeyTemplates(siteId) {
+        // @ts-ignore
+        return this.apiService.fetch(API.SOFTKEY_TEMPLATES.replace(':siteId', String(siteId)), null, false)
+            .pipe(map((templates) => this.deviceSoftkeyTemplates = templates));
+        // .pipe(this.handleError(false, true));
+    }
+    getSiteDefaults(siteId, directAccess, sharedLineSiteIds) {
+        /*const params = {directAccess: directAccess};
+        if (sharedLineSiteIds) {
+          // @ts-ignore
+          params['sharedLineSiteIds'] = sharedLineSiteIds;
+        }*/
+        return this.apiService.fetch(API.SITE_SETTINGS.replace(':siteId', String(siteId)), {})
+            .pipe(map((siteDefaults) => {
+            this.siteDefaults = new SiteDefaults(siteDefaults, !!sharedLineSiteIds);
+            const copiedSiteDefaults = JSON.parse(JSON.stringify(siteDefaults));
+            this.originalSiteDefaults = new SiteDefaults(copiedSiteDefaults, !!sharedLineSiteIds);
+        }));
+        // .pipe(this.handleError(true, true));
+    }
+    getMonitorCss(siteId) {
+        return this.apiService.fetch(API.DEVICE_LINE_MONITOR_CSS.replace(':siteId', String(siteId)), null);
+        // .pipe(this.handleError(false, true));
+    }
+    getRecordingProfile(siteId) {
+        return this.apiService.fetch(API.RECORDING_PROFILE.replace(':siteId', String(siteId)), null);
+        // .pipe(this.handleError(false, true));
+    }
+}
+SiteSettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteSettingsService, deps: [{ token: APIService }], target: i0.ɵɵFactoryTarget.Injectable });
+SiteSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteSettingsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteSettingsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: APIService }]; } });
+
+const getSavableData = (model, exclude) => {
+    let result = Object.keys(model);
+    if (exclude && exclude.length) {
+        result = result.filter(key => !exclude.some(item => item === key));
+    }
+    return result.reduce((result, key) => {
+        if (model[key] instanceof Array && model[key].length && model[key][0].getSavableData) {
+            result[key] = model[key].map((item) => item.getSavableData());
+        }
+        else if (model[key] instanceof Object && model[key].getSavableData) {
+            result[key] = model[key].getSavableData();
+        }
+        else {
+            result[key] = model[key];
+        }
+        return result;
+    }, {});
+};
+
+class LineDirectory {
+    constructor(lineDirectory) {
+        Object.assign(this, lineDirectory || {});
+        // @ts-ignore
+        if (this.directoryNumber && this.routePartitionName) {
+            this.displayValue = `${this.directoryNumber}/${this.routePartitionName}`;
+        }
+        this.initForm();
+    }
+    getSavableData() {
+        return getSavableData(this, ['form', 'displayValue', 'templateDirectoryNumber']);
+    }
+    equal(itemToCompare) {
+        return JSON.stringify(this.getSavableData()) === JSON.stringify(itemToCompare.getSavableData());
+    }
+    initForm() {
+        const formBuilder = new FormBuilder();
+        const formSettings = {
+            directoryNumber: [{ value: this.directoryNumber || '', disabled: true }, [Validators.required]],
+            routePartitionName: [{ value: this.routePartitionName || '', disabled: true }]
+        };
+        this.form = formBuilder.group(formSettings);
+    }
+}
+
+class LineCallInfoDisplay {
+    constructor(lineCallInfoDisplay) {
+        Object.assign(this, lineCallInfoDisplay || {});
+    }
+    getSavableData() {
+        return getSavableData(this, ['form']);
+    }
+}
+
+class TranslationPattern {
+    constructor(translationPattern) {
+        Object.assign(this, translationPattern || {});
+        this.initForm();
+    }
+    getSavableData() {
+        return getSavableData(this, ['form', 'isNewForExistingLine']);
+    }
+    initForm() {
+        const formBuilder = new FormBuilder();
+        const formSettings = {
+            pattern: [{ value: this.pattern || '' }],
+            calledPartyTransformationMask: [{ value: this.calledPartyTransformationMask || '' }]
+        };
+        this.form = formBuilder.group(formSettings);
+    }
+    getSiteId() {
+        if (this.site && this.site.id != null) {
+            return this.site.id;
+        }
+        if (this.hasMultipleSiteIds()) {
+            return this.multipleSitesId.split(',')[0];
+        }
+        return null;
+    }
+    hasMultipleSiteIds() {
+        return this.hasMultipleSites && !!this.multipleSitesId && this.multipleSitesId.length > 0;
+    }
+}
+
+class LineAssociation {
+    constructor(lineAssociation, appValidators) {
+        this.sharedUsers = [];
+        this.sharedDevices = [];
+        this.active = false;
+        this.hasChanges = false;
+        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(appValidators);
+    }
+    getSavableData() {
+        const excludedFields = ['viewMode', 'form', 'callingSearchSpace', 'plarDestinationNumber', 'prefixDigits', 'plarDescription', 'plarEnabled', 'hasChanges', 'active'];
+        return getSavableData(this, excludedFields);
+    }
+    getFullData() {
+        return getSavableData(this, ['form', 'hasChanges', 'active']);
+    }
+    getDnSavableData() {
+    }
+    /*initForm() {
+      // TEMP simplified line form
+      const formBuilder = new FormBuilder();
+      const formSettings = {
+        directoryNumber: [this.directoryNumber.directoryNumber || ''],
+        textLabel: [this.textLabel || ''],
+      };
+      this.form = formBuilder.group(formSettings);
+    }*/
+    initForm(appValidators) {
+        const formBuilder = new FormBuilder();
+        const formSettings = {
+            displayLabel: [this.displayLabel || '', [Validators.maxLength(30), Validators.pattern('[^%&\\[{}|"<>\\]]*')]],
+            e164Mask: [this.e164Mask || '', [appValidators.e164MaskLabel]],
+            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'],
+            // alertingName: [this.alertingName || ''],
+            // description: [this.description || ''],
+            // displayLabelAscii: [this.displayLabelAscii || '', [appValidators.displayLabelAscii]]
+        };
+        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;
+    }
+    fullEqual(line) {
+        if (!line) {
+            return false;
+        }
+        return JSON.stringify(this.getFullData()) === JSON.stringify(line.getFullData());
+    }
+}
+
+class Device {
+    constructor(device, validationService) {
+        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, validationService)) : [];
+        }
+        this.initForm();
+    }
+    initForm() {
+        const formBuilder = new FormBuilder();
+        const formSettings = {
+            ipAddress: [{ value: this.ipAddress || '', disabled: true }],
+            registrationStatus: [{ value: this.registrationStatus || '', disabled: true }],
+            description: [{ value: this.description || '', disabled: false }],
+            protocol: [{ value: this.protocol || '', disabled: true }],
+            softkeyTemplate: [{ value: this.softkeyTemplate || '', disabled: false }],
+            buttonTemplate: [{ value: this.buttonTemplate || '', disabled: true }],
+            location: [{ value: this.location || '', disabled: true }],
+            devicePoolName: [{ value: this.devicePoolName || '', disabled: false }],
+            callingSearchSpaceName: [{ value: this.callingSearchSpaceName || '', disabled: false }],
+            firmwareVersion: [{ value: this.firmwareVersion || '', disabled: true }],
+            plarService: [{ value: this.plarService || '', disabled: true }],
+        };
+        this.form = formBuilder.group(formSettings);
+    }
+    getSavableData() {
+        const excludedFields = ['form', 'ipAddress', 'registrationStatus', 'isCtiRoutePoint', 'deviceKind', 'alreadyUsedName', 'lineAssociationsHasChanges'];
+        return getSavableData(this, excludedFields);
+    }
+    getNoLinesFullData() {
+        const excludedFields = ['form', 'lineAssociations', 'lineAssociationsHasChanges'];
+        return getSavableData(this, excludedFields);
+    }
+    getDeviceInfoSavableData() {
+        const excludedFields = ['form', 'ipAddress', 'registrationStatus', 'lineAssociations', 'lineAssociationsHasChanges'];
+        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 Buttontemplate {
+    constructor() { }
+}
+var DeviceViewType;
+(function (DeviceViewType) {
+    DeviceViewType[DeviceViewType["INFO"] = 0] = "INFO";
+    DeviceViewType[DeviceViewType["LINES"] = 1] = "LINES";
+    DeviceViewType[DeviceViewType["DIALS"] = 2] = "DIALS";
+    DeviceViewType[DeviceViewType["BLF"] = 3] = "BLF";
+})(DeviceViewType || (DeviceViewType = {}));
+var DeviceKind;
+(function (DeviceKind) {
+    DeviceKind["device"] = "devices";
+    DeviceKind["deviceProfile"] = "deviceProfiles";
+})(DeviceKind || (DeviceKind = {}));
+var DeviceTypes$1;
+(function (DeviceTypes) {
+    DeviceTypes["CTI_ROUTE_POINT"] = "CTI Route Point";
+    DeviceTypes["CTI_PORT"] = "CTI Port";
+    DeviceTypes["CTI_REMOTE"] = "CTI Remote Device";
+})(DeviceTypes$1 || (DeviceTypes$1 = {}));
+
+class SimplifiedUser {
+    constructor(user, validationService) {
+        var _a, _b;
+        if (user) {
+            this.userid = user.userid;
+            this.email = user.email;
+            this.firstName = user.firstName;
+            this.lastName = user.lastName;
+            this.token = user.token;
+            this.siteId = user.siteId;
+            this.siteName = user.siteName;
+            this.department = user.department;
+            this.manager = user.manager;
+            this.associatedPc = user.associatedPc;
+            this.digestCredentials = user.digestCredentials;
+            this.userProfile = user.userProfile;
+            this.enableMobileVoiceAccess = user.enableMobileVoiceAccess;
+            this.userLocale = user.userLocale;
+            this.confirmDigestCredentials = user.confirmDigestCredentials;
+            this.middleName = user.middleName;
+            this.telephoneNumber = user.telephoneNumber;
+            this.mobileNumber = user.mobileNumber;
+            this.directoryUri = user.directoryUri;
+            this.title = user.title;
+            this.homeNumber = user.homeNumber;
+            this.pagerNumber = user.pagerNumber;
+            this.displayName = user.displayName;
+            if ((_a = user.devices) === null || _a === void 0 ? void 0 : _a.length) {
+                this.devices = user.devices.map((device) => new Device(device, validationService));
+                if ((_b = user.lines) === null || _b === void 0 ? void 0 : _b.length) {
+                    this.devices.forEach(device => {
+                        var _a;
+                        if ((_a = device === null || device === void 0 ? void 0 : device.lineAssociations) === null || _a === void 0 ? void 0 : _a.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] || '';
+    }
+    initForm() {
+        const formBuilder = new FormBuilder();
+        const formSettings = {
+            userid: [{ value: this.userid || '', disabled: false }, [Validators.required, Validators.maxLength(128)]],
+            email: [{ value: this.email || '', disabled: false }, [
+                    Validators.pattern(REGEX_PATTERN.EMAIL),
+                    Validators.required
+                ]],
+            firstName: [{ value: this.firstName || '', disabled: false }],
+            lastName: [{ value: this.lastName || '', disabled: false }, Validators.required],
+            department: [{ value: this.department || '', disabled: false }],
+            middleName: [{ value: this.middleName || '', disabled: false }],
+            title: [{ value: this.title || '', disabled: false }],
+            telephoneNumber: [{ value: this.telephoneNumber || '', disabled: false }],
+            homeNumber: [{ value: this.homeNumber || '', disabled: false }],
+            mobileNumber: [{ value: this.mobileNumber || '', disabled: false }],
+            pagerNumber: [{ value: this.pagerNumber || '', disabled: false }],
+            displayName: [{ value: this.displayName || '', disabled: false }],
+            manager: [{ value: this.manager || '', disabled: false }],
+            associatedPc: [this.associatedPc || ''],
+            directoryUri: [this.directoryUri || ''],
+            userProfile: [this.userProfile],
+            enableMobileVoiceAccess: [this.enableMobileVoiceAccess],
+            userLocale: [this.userLocale || ''],
+            digestCredentials: [''],
+            confirmDigestCredentials: ['']
+        };
+        this.form = formBuilder.group(formSettings);
+    }
+    toggleEditMode() {
+        this.editMode = !this.editMode;
+        ['userid', 'email', 'firstName', 'lastName'].forEach(token => {
+            var _a, _b;
+            if (this.editMode) {
+                (_a = this.form.get(token)) === null || _a === void 0 ? void 0 : _a.enable();
+            }
+            else {
+                (_b = this.form.get(token)) === null || _b === void 0 ? void 0 : _b.disable();
+            }
+        });
+    }
+    getSavableData() {
+        const excludedFields = ['form', 'editMode', 'viewMode', 'token', 'hasModifiedCache', 'confirmDigestCredentials'];
+        return getSavableData(this, excludedFields);
+    }
+    getFullData() {
+        const excludedFields = ['form'];
+        return getSavableData(this, excludedFields);
+    }
+    getUserDetailsSavableData() {
+        const excludedFields = ['devices', 'deviceProfiles', 'lines', 'singleNumberReach', 'vmPassword', 'vmUnifiedMessagingAccount', 'alternateExtensions', 'callerInput', 'lineAppearances', 'meetMes', 'webAppPasswordSettings', 'form'];
+        return getSavableData(this, excludedFields);
+    }
+    equal(userToCompare) {
+        if (!userToCompare) {
+            return false;
+        }
+        return JSON.stringify(this.getSavableData()) === JSON.stringify(userToCompare.getSavableData());
+    }
+}
+
+class UtilsService {
+    static filterOptions(options, query, shownValue, field) {
+        if (!options) {
+            return [];
+        }
+        if (!query) {
+            return options;
+        }
+        return options.filter(option => {
+            return (field ? String(option[field]).toLowerCase().includes(String(query).toLowerCase()) :
+                String(option).toLowerCase().includes(String(query).toLowerCase()) ||
+                    (shownValue && shownValue === option));
+        });
+    }
+    ;
+    static sortSortArrayByProperty(array, sortBy) {
+        if (!array) {
+            return null;
+        }
+        return array.sort((a, b) => {
+            if (!a[sortBy] && !b[sortBy]) {
+                return 0;
+            }
+            if (a[sortBy] && !b[sortBy]) {
+                return 1;
+            }
+            if (!a[sortBy] && b[sortBy]) {
+                return -1;
+            }
+            const positionA = a[sortBy];
+            const positionB = b[sortBy];
+            return (positionA < positionB) ? -1 : (positionA > positionB) ? 1 : 0;
+        });
+    }
+    static diff(origObject, updatedObj, path, keysToIgnore) {
+        let result = [];
+        if (Object.is(origObject, updatedObj)) {
+            return undefined;
+        }
+        if (!updatedObj || typeof updatedObj !== 'object') {
+            return updatedObj;
+        }
+        const concat = Array.from(new Set([...Object.keys(origObject || {}), ...Object.keys(updatedObj || {})]));
+        const filter = keysToIgnore ? concat.filter(key => !keysToIgnore.includes(key)) : concat;
+        filter
+            .forEach(key => {
+            if (typeof updatedObj[key] === 'object' && typeof origObject[key] === 'object') {
+                if (UtilsService.differs(updatedObj[key], origObject[key])) {
+                    const newPath = `${path}${path ? '.' : ''}${key}`;
+                    const values = UtilsService.diff(origObject[key], updatedObj[key], newPath, keysToIgnore);
+                    if (values !== undefined) {
+                        result = [...result, ...values];
+                    }
+                }
+            }
+            else if (updatedObj && !origObject || updatedObj[key] !== origObject[key] && !Object.is(origObject[key], updatedObj[key])) {
+                const value = updatedObj ? UtilsService.formatIfEmpty(updatedObj[key]) : null;
+                result.push(`${path}${path ? '.' : ''}${key}=${value}`);
+            }
+        });
+        return result;
+    }
+    static formatIfEmpty(value) {
+        if (value) {
+            return value;
+        }
+        switch (typeof value) {
+            case 'boolean':
+                return value;
+            case 'string':
+                return '';
+            default:
+                return null;
+        }
+    }
+    static differs(obj1, obj2) {
+        return JSON.stringify(obj1) !== JSON.stringify(obj2);
+    }
+}
+UtilsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+UtilsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, decorators: [{
+            type: Injectable
+        }] });
+
+const string_array = function (original, updated, fullKey) {
+    if (!updated || !SortingUtilsService.differs(original, updated)) {
+        return null;
+    }
+    return `${fullKey}=${updated.join(',')}`;
+};
+const line_reference = function (original, updated, fullKey) {
+    if (!updated || !SortingUtilsService.differs(original, updated)) {
+        return null;
+    }
+    // @ts-ignore
+    return Object.keys(updated).map(key => `${fullKey}.${key}=${updated[key]}`);
+};
+const nullable = function (original, updated, fullKey) {
+    if (!original && updated) {
+        // @ts-ignore
+        return Object.keys(updated).map(key => `${fullKey}.${key}=${updated[key]}`);
+    }
+    else if (original && !updated) {
+        return `${fullKey}=null`;
+    }
+    else {
+        return SortingUtilsService.diff(original, updated, fullKey, []);
+    }
+};
+class SortingUtilsService {
+    static sortDevicesByTypeAndName(array) {
+        if (!array) {
+            return null;
+        }
+        return array.sort((a, b) => {
+            if (a.deviceType === b.deviceType) {
+                return (a.name < b.name) ? -1 : (a.name > b.name) ? 1 : 0;
+            }
+            else {
+                return (a.deviceType < b.deviceType) ? -1 : 1;
+            }
+        });
+    }
+    static sortLinesByDirectoryName(array) {
+        if (!array) {
+            return null;
+        }
+        return array.sort((a, b) => {
+            if (!a.directoryNumber && !b.directoryNumber) {
+                return 0;
+            }
+            if (a.directoryNumber && !b.directoryNumber) {
+                return 1;
+            }
+            if (!a.directoryNumber && b.directoryNumber) {
+                return -1;
+            }
+            const directoryNumberA = a.directoryNumber.directoryNumber;
+            const directoryNumberB = b.directoryNumber.directoryNumber;
+            return (directoryNumberA < directoryNumberB) ? -1 : (directoryNumberA > directoryNumberB) ? 1 : 0;
+        });
+    }
+    static sortLineAssociationsByPosition(array) {
+        if (!array) {
+            return null;
+        }
+        return array.sort((a, b) => {
+            if (!a.position && !b.position) {
+                return 0;
+            }
+            if (a.position && !b.position) {
+                return 1;
+            }
+            if (!a.position && b.position) {
+                return -1;
+            }
+            const positionA = a.position;
+            const positionB = b.position;
+            return (positionA < positionB) ? -1 : (positionA > positionB) ? 1 : 0;
+        });
+    }
+    static sortSortArrayByProperty(array, sortBy) {
+        if (!array) {
+            return null;
+        }
+        return array.sort((a, b) => {
+            if (!a[sortBy] && !b[sortBy]) {
+                return 0;
+            }
+            if (a[sortBy] && !b[sortBy]) {
+                return 1;
+            }
+            if (!a[sortBy] && b[sortBy]) {
+                return -1;
+            }
+            const positionA = a[sortBy];
+            const positionB = b[sortBy];
+            return (positionA < positionB) ? -1 : (positionA > positionB) ? 1 : 0;
+        });
+    }
+    static diff(origObject, updatedObj, path, keysToIgnore) {
+        let result = [];
+        if (Object.is(origObject, updatedObj)) {
+            return undefined;
+        }
+        if (!updatedObj || typeof updatedObj !== 'object') {
+            return updatedObj;
+        }
+        const concat = Array.from(new Set([...Object.keys(origObject || {}), ...Object.keys(updatedObj || {})]));
+        const filter = keysToIgnore ? concat.filter(key => !keysToIgnore.includes(key)) : concat;
+        filter
+            .forEach(key => {
+            // @ts-ignore
+            if (this.dictionary[key]) {
+                // @ts-ignore
+                const complexResult = this.dictionary[key](origObject[key], updatedObj[key], `${path}${path ? '.' : ''}${key}`);
+                if (complexResult) {
+                    if (Array.isArray(complexResult)) {
+                        result = [...result, ...complexResult];
+                    }
+                    else {
+                        result.push(complexResult);
+                    }
+                }
+            }
+            else if (typeof updatedObj[key] === 'object' && typeof origObject[key] === 'object') {
+                if (SortingUtilsService.differs(updatedObj[key], origObject[key])) {
+                    const newPath = `${path}${path ? '.' : ''}${key}`;
+                    const values = SortingUtilsService.diff(origObject[key], updatedObj[key], newPath, keysToIgnore);
+                    if (values !== undefined) {
+                        result = [...result, ...values];
+                    }
+                }
+            }
+            else if (updatedObj && !origObject || updatedObj[key] !== origObject[key] && !Object.is(origObject[key], updatedObj[key])) {
+                const value = updatedObj ? SortingUtilsService.formatIfEmpty(updatedObj[key]) : null;
+                result.push(`${path}${path ? '.' : ''}${key}=${value}`);
+            }
+        });
+        return result;
+    }
+    static formatIfEmpty(value) {
+        if (value) {
+            return value;
+        }
+        switch (typeof value) {
+            case 'boolean':
+                return value;
+            case 'string':
+                return '';
+            default:
+                return null;
+        }
+    }
+    static differs(obj1, obj2) {
+        return JSON.stringify(obj1) !== JSON.stringify(obj2);
+    }
+}
+SortingUtilsService.dictionary = {
+    features: string_array,
+    services: string_array,
+    directoryNumber: line_reference,
+    primaryLineReference: line_reference,
+    speedDials: function (original, updated, fullKey) {
+        if (!updated || !SortingUtilsService.differs(original, updated)) {
+            return null;
+        }
+        // todo only changes, identification
+        let map = [];
+        updated.map((speedDial) => {
+            const currentFullKey = `${fullKey}.${speedDial.index}`; // ${speedDial.type} CHECk ?
+            map = [...map, Object.keys(speedDial).map(key => `${currentFullKey}.${key}=${speedDial[key]}`)];
+        });
+        return map;
+    },
+    lineAssociations: function (original, updated, fullKey) {
+        if (!updated || !SortingUtilsService.differs(original, updated)) {
+            return null;
+        }
+        let map = [];
+        updated.map((lineAssociation) => {
+            const currentFullKey = `${fullKey}.${lineAssociation.linePkid ? lineAssociation.linePkid : lineAssociation.lineLocalId}`;
+            const originalLineAssociation = original.find(line => line.index === lineAssociation.index);
+            if (SortingUtilsService.differs(originalLineAssociation, lineAssociation)) {
+                const diff = SortingUtilsService.diff(originalLineAssociation, lineAssociation, currentFullKey, []);
+                map = [...map, ...diff];
+            }
+        });
+        return map;
+    },
+    enterpriseAltNum: nullable,
+    e164AltNum: nullable
+};
+SortingUtilsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortingUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SortingUtilsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortingUtilsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortingUtilsService, decorators: [{
+            type: Injectable
+        }] });
+
+class LineService {
+    constructor(apiService) {
+        this.apiService = apiService;
+        this.onSaveLineAssociationEvent = new Subject();
+    }
+    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'
+        };
+    }
+    hasUnsavedChanges() {
+        if (this.line && this.originLine) {
+            return JSON.stringify(this.line.getSavableData()) !== JSON.stringify(this.originLine.getSavableData());
+        }
+        return false;
+    }
+    generateLineDirectory(lineAssociation) {
+        return {
+            directoryNumber: lineAssociation.directoryNumber.directoryNumber,
+            routePartitionName: lineAssociation.directoryNumber.routePartitionName,
+        };
+    }
+    generateDidPatternForLineAssociation(lineAssociation) {
+        return {
+            calledPartyTransformationMask: lineAssociation.directoryNumber.directoryNumber
+        };
+    }
+    checkLineDeletion(line, siteId) {
+        const params = {
+            extension: line.directoryNumber.directoryNumber,
+            routePartition: line.directoryNumber.routePartitionName,
+        };
+        return this.apiService.fetch(API.CHECK_DELETE_LINE.replace(':siteId', String(siteId)), params);
+        // .pipe(this.handleError(true, true));
+    }
+    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));
+    }
+    getLineAssociationBody(originLineAssociation, lineAssociation) {
+        const body = SortingUtilsService.diff(originLineAssociation.getSavableData(), lineAssociation.getSavableData(), `device.lineAssociations.${lineAssociation.linePkid}`, null);
+        return body;
+    }
+}
+LineService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineService, deps: [{ token: APIService }], 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
+        }], ctorParameters: function () { return [{ type: APIService }]; } });
+
+class UserService {
+    get lineAssociation() {
+        var _a;
+        return (_a = this.user) === null || _a === void 0 ? void 0 : _a.devices[0].lineAssociations[0];
+    }
+    get originLineAssociation() {
+        var _a;
+        return (_a = this.originUser) === null || _a === void 0 ? void 0 : _a.devices[0].lineAssociations[0];
+    }
+    constructor(apiService, lineService) {
+        this.apiService = apiService;
+        this.lineService = lineService;
+        this.siteId = -1;
+        this.userId = '';
+        this.userIdExistPending = false;
+        this.hasExistedUserId = false;
+        this.onUserLineSaved$ = new Subject();
+        this.onFetchUserToken$ = new Subject();
+    }
+    ngOnInit() {
+        console.log(this.siteId);
+    }
+    resetLineAssociation(deviceIndex, lineIndex, validationService) {
+        var _a, _b, _c, _d;
+        const originLine = (_b = (_a = this.originUser) === null || _a === void 0 ? void 0 : _a.devices[deviceIndex]) === null || _b === void 0 ? void 0 : _b.lineAssociations[lineIndex];
+        if (((_d = (_c = this.user) === null || _c === void 0 ? void 0 : _c.devices[deviceIndex]) === null || _d === void 0 ? void 0 : _d.lineAssociations[lineIndex]) && originLine) {
+            this.user.devices[deviceIndex].lineAssociations[lineIndex] = new LineAssociation(JSON.parse(JSON.stringify(originLine.getFullData())), validationService);
+        }
+    }
+    resetDevice(currentDevice, validationService) {
+        const originDevice = this.originUser.devices.find(device => device.name === currentDevice.name);
+        const deviceInd = this.user.devices.findIndex(device => device.name === currentDevice.name);
+        if (originDevice && deviceInd > -1) {
+            const lineAssociations = this.user.devices[deviceInd].lineAssociations;
+            this.user.devices[deviceInd] = new Device(JSON.parse(JSON.stringify(originDevice.getNoLinesFullData())), validationService);
+            this.user.devices[deviceInd].lineAssociations = lineAssociations;
+            console.log('device after reset = ', this.user.devices[deviceInd]);
+        }
+    }
+    fetchUserToken(siteId, userId, validationService, isSetNewTokenOnly) {
+        /*if (this.siteId === siteId && this.userId === userId && this.user) {
+          return of(this.user);
+        }*/
+        this.siteId = siteId;
+        this.userId = userId;
+        return this.apiService.fetch(API.USER_TOKEN.replace(':siteId', String(this.siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(userId))))
+            .pipe(map((result) => {
+            const user = result && Object.values(result)[0];
+            const userToken = result && Object.keys(result)[0];
+            if (user) {
+                if (!isSetNewTokenOnly) {
+                    this.setSimplifiedUser(user, validationService, userToken);
+                }
+                else {
+                    this.user.token = user.token;
+                    this.originUser.token = user.token;
+                }
+                this.onFetchUserToken$.next(true);
+            }
+        }));
+        // .pipe(this.handleError(false, true));
+    }
+    updateUserFields(body) {
+        var _a;
+        if (!this.userId || !this.siteId || !((_a = this.user) === null || _a === void 0 ? void 0 : _a.token)) {
+            return;
+        }
+        return this.apiService.post(API.UPDATE_USER_FIELDS.replace(':siteId', String(this.siteId)).replace(':token', this.user.token), body);
+        // .pipe(this.handleError(false, true));
+    }
+    fetchUserById(id) {
+        this.userIdExistPending = true;
+        return this.apiService.fetch(API.USER_BY_ID.replace(':siteId', String(this.siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(id))))
+            .pipe(map(result => {
+            this.userIdExistPending = false;
+            return result;
+        }));
+    }
+    fetchLeanUserConversationById(id) {
+        return this.apiService.fetch(API.LEAN_USER_CONVERSATION_START.replace(':siteId', String(this.siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(id))));
+    }
+    fetchLeanUserDevicesConversationById(id) {
+        return this.apiService.fetch(API.LEAN_USER_DEVICES_CONVERSATION_START.replace(':siteId', String(this.siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(id))));
+    }
+    fetchLeanUserLinesConversationById(id, leanUserDevicesToken) {
+        return this.apiService.fetch(API.LEAN_USER_LINES_CONVERSATION_START.replace(':siteId', String(this.siteId))
+            .replace(':userId', encodeURIComponent(encodeURIComponent(id))).replace(':leanUserDevicesToken', leanUserDevicesToken));
+    }
+    fetchLeanUserSNRConversationById(id) {
+        return this.apiService.fetch(API.LEAN_USER_SNR_CONVERSATION_START.replace(':siteId', String(this.siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(id))));
+    }
+    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(validationService) {
+        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, validationService, true)
+                    .subscribe(() => {
+                    this.runNewLineCreation();
+                });
+            });
+        });
+    }
+    persistUserCache() {
+        const URL = API.PERSIST_USER_CACHE.replace(':siteId', String(this.siteId)).replace(':token', this.user.token);
+        return this.apiService.post(URL, {});
+    }
+    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, _b, _c, _d, _e;
+            if (response === null || response === void 0 ? void 0 : response.currentUpdatedUser) {
+                const linePkId = ((_b = (_a = response.currentUpdatedUser.devices[0]) === null || _a === void 0 ? void 0 : _a.lineAssociations[0]) === null || _b === void 0 ? void 0 : _b.linePkid) || ((_d = (_c = response.currentUpdatedUser.devices[0]) === null || _c === void 0 ? void 0 : _c.lineAssociations[0]) === null || _d === void 0 ? void 0 : _d.lineLocalId);
+                forkJoin([
+                    this.updateLineFields(this.siteId, linePkId, this.user.token, this.lineAssociation.alertingName),
+                    this.updateDeviceFields(this.siteId, (_e = this.user.devices[0]) === null || _e === void 0 ? void 0 : _e.name, this.user.token)
+                ]).subscribe((response) => {
+                    this.originUser.devices[0].lineAssociations[0].directoryNumber.directoryNumber = this.lineAssociation.directoryNumber.directoryNumber;
+                    this.onUserLineSaved$.next(true);
+                });
+            }
+        });
+        // -----
+    }
+    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, validationService, userToken) {
+        this.user = new SimplifiedUser(user, validationService);
+        const copiedUser = JSON.parse(JSON.stringify(user));
+        this.originUser = new SimplifiedUser(copiedUser, validationService);
+        if (!this.user.token && userToken) {
+            this.user.token = userToken;
+            this.originUser.token = userToken;
+        }
+    }
+    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 DeviceService {
+    constructor(apiService) {
+        this.apiService = apiService;
+        this.dataPending = false;
+    }
+    hasUnsavedChanges(device, originDevice) {
+        if (device === null || device === void 0 ? void 0 : device.lineAssociationsHasChanges) {
+            return true;
+        }
+        if (device && originDevice) {
+            return JSON.stringify(device.getSavableData()) !== JSON.stringify(originDevice.getSavableData());
+        }
+        return false;
+    }
+    hasDeviceInfoUnsavedChanges(device, originDevice) {
+        if (device && originDevice) {
+            return JSON.stringify(device.getDeviceInfoSavableData()) !== JSON.stringify(originDevice.getDeviceInfoSavableData());
+        }
+        return false;
+    }
+    getDataToUpdateDevice(device, originalDevice) {
+        // --- to exclude newLines from update
+        // const devToUpdate = new Device(device, this.validationService);
+        // const originalDevToUpdate = new Device(originalDevice, this.validationService);
+        // // @ts-ignore
+        // devToUpdate.lineAssociations = devToUpdate.lineAssociations?.filter(line => line.linePkid);
+        // // @ts-ignore
+        // originalDevToUpdate.lineAssociations = originalDevToUpdate.lineAssociations?.filter(line => line.linePkid);
+        const body = SortingUtilsService.diff(originalDevice.getDeviceInfoSavableData(), device.getDeviceInfoSavableData(), 'device', ['speedDials', 'busyLampFields']);
+        return body;
+    }
+    fetchLeanUserDevicesConversationById(userId, siteId) {
+        return this.apiService.fetch(API.LEAN_USER_DEVICES_CONVERSATION_START.replace(':siteId', String(siteId)).replace(':userId', encodeURIComponent(encodeURIComponent(userId))));
+    }
+    getSlotsByButtonTemplate(siteId, buttonTemplateName) {
+        return this.apiService.fetch(API.LINE_SLOTS.replace(':siteId', String(siteId)), { name: buttonTemplateName }, true);
+        // .pipe(this.handleError(true, true));
+    }
+    putDeviceFields(siteId, deviceName, token, body) {
+        console.log('userToken = ', token);
+        const URL = API.UPDATE_DEVICE_FIELDS
+            .replace(':siteId', String(siteId))
+            .replace(':deviceName', deviceName)
+            .replace(':token', token);
+        console.log('url = ', URL);
+        return this.apiService.post(URL, body);
+        // .pipe(this.handleError(true, true));
+    }
+    updateAvailableSlots(siteId, device) {
+        if (!device) {
+            throw throwError(() => new Error('test'));
+        }
+        if (!device.buttonTemplate) {
+            throw throwError(() => new Error('test'));
+        }
+        if (device.buttonTemplate === '') {
+            device.availableSlots = [];
+            return of(device);
+        }
+        const existingPositions = device.lineAssociations.map((lineAssociation) => lineAssociation.position);
+        return this.getSlotsByButtonTemplate(siteId, device.buttonTemplate)
+            .pipe(map((buttonTemplate) => {
+            this.lineSlotsList = buttonTemplate.lineSlots;
+            device.availableSlots = this.lineSlotsList.filter((position) => !existingPositions.includes(position));
+            this.availableLineSlotsList = device.availableSlots.slice();
+            return device;
+        }));
+        // .pipe(this.handleError(true, true));
+    }
+}
+DeviceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceService, deps: [{ token: APIService }], target: i0.ɵɵFactoryTarget.Injectable });
+DeviceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: APIService }]; } });
+
+class AppLoaderComponent {
+    constructor() {
+    }
+}
+AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\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
+        }], ctorParameters: function () { return []; } });
+
+class MaterialModule {
+}
+MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [DragDropModule,
+        MatButtonModule,
+        MatListModule,
+        MatProgressSpinnerModule,
+        MatExpansionModule,
+        MatInputModule,
+        MatInputModule,
+        MatListModule,
+        MatTreeModule,
+        MatTreeModule,
+        MatNativeDateModule,
+        MatDatepickerModule,
+        MatTooltipModule,
+        MatAutocompleteModule,
+        MatChipsModule,
+        MatSidenavModule,
+        MatFormFieldModule,
+        MatStepperModule,
+        MatTabsModule,
+        MatCardModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatSlideToggleModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatDialogModule], 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,
+        MatDialogModule, 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,
+                        MatDialogModule
+                    ],
+                    exports: [
+                        DragDropModule,
+                        MatButtonModule,
+                        MatListModule,
+                        MatProgressSpinnerModule,
+                        MatExpansionModule,
+                        MatInputModule,
+                        MatInputModule,
+                        MatListModule,
+                        MatTreeModule,
+                        MatTreeModule,
+                        MatNativeDateModule,
+                        MatDatepickerModule,
+                        MatTooltipModule,
+                        MatAutocompleteModule,
+                        MatChipsModule,
+                        MatSidenavModule,
+                        MatFormFieldModule,
+                        MatStepperModule,
+                        MatTabsModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                        MatProgressSpinnerModule,
+                        MatTableModule,
+                        MatPaginatorModule
+                    ],
+                }]
+        }] });
+
+const environment = {
+    production: false,
+    // apiUrl: 'http://localhost:4200',
+    apiUrl: 'http://192.168.0.191:8080',
+    notificationsLifetime: 30000,
+    longNotificationsLifetime: 45000,
+    cashCleanTimer: 900000,
+    cashArrayLength: 10000,
+    matomoUrl: 'http://192.168.0.136/matomo/',
+};
+
+const TTL_DEFAULT = environment.notificationsLifetime;
+const TTL_LONG_DEFAULT = environment.longNotificationsLifetime;
+var NotificationType;
+(function (NotificationType) {
+    NotificationType["info"] = "info";
+    NotificationType["error"] = "error";
+    NotificationType["success"] = "success";
+    NotificationType["warning"] = "warning";
+})(NotificationType || (NotificationType = {}));
+class Notification {
+    constructor(data) {
+        this.ttl = TTL_DEFAULT;
+        Object.assign(this, data || {});
+        if (this.ttl === undefined) {
+            this.ttl = this.message && this.message.length && this.message.length < 80 ? TTL_DEFAULT : TTL_LONG_DEFAULT;
+        }
+    }
+    isInfo() {
+        return this.type === NotificationType.info;
+    }
+    isError() {
+        return this.type === NotificationType.error;
+    }
+    isSuccess() {
+        return this.type === NotificationType.success;
+    }
+    isWarning() {
+        return this.type === NotificationType.warning;
+    }
+}
+
+const SUCCESS_TIME = 5000;
+const INACTIVE_SESSION_MESSAGE = 'Your session was lost due to inactivity. Please login again';
+const INACTIVE_SESSION = 'SESSION_INACTIVE';
+class NotificationService {
+    constructor() {
+        this.listChange = new Subject();
+        this.max = 0;
+        this.list = [];
+    }
+    error(message, ttl) {
+        this.notify('error', message, ttl);
+    }
+    success(message, ttl) {
+        this.notify('success', message, (!ttl) ? SUCCESS_TIME : ttl);
+    }
+    warning(message, ttl) {
+        this.notify('warning', message, ttl);
+    }
+    info(message, ttl) {
+        this.notify('info', message, ttl);
+    }
+    notify(type, message, ttl) {
+        const found = this.list.find((n) => n.message === message);
+        if (found) {
+            this.remove(found);
+        }
+        const notification = new Notification({
+            id: ++this.max,
+            type, message, ttl
+        });
+        if (notification.ttl > 0) {
+            notification.timerId = setTimeout(() => this.remove(notification, true), notification.ttl);
+        }
+        this.list.push(notification);
+        this.listChange.next(this.list);
+    }
+    remove(notification, auto) {
+        if (!auto && notification.timerId) {
+            // clear timeout in case of manual remove
+            clearInterval(notification.timerId);
+        }
+        this.list = this.list.filter(n => n.id !== notification.id);
+        this.listChange.next(this.list);
+    }
+    removeInactiveSessionError() {
+        if (!this.list || !this.list.length) {
+            return;
+        }
+        this.list = this.list.filter(n => n.message !== INACTIVE_SESSION_MESSAGE && n.message !== INACTIVE_SESSION);
+        this.listChange.next(this.list);
+    }
+}
+NotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class NotificationsComponent {
+    constructor(notificationService, ref) {
+        this.notificationService = notificationService;
+        this.ref = ref;
+    }
+    ngOnInit() {
+        this.listChangeSubscribe();
+    }
+    ngOnDestroy() {
+        this.listSubscription.unsubscribe();
+    }
+    readMore() {
+        this.isReadMore = !this.isReadMore;
+    }
+    removeNotification(notification) {
+        this.notificationService.remove(notification);
+    }
+    listChangeSubscribe() {
+        this.listSubscription = this.notificationService.listChange
+            .subscribe((list) => {
+            this.list = list;
+            this.ref.detectChanges();
+        });
+    }
+}
+NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationsComponent, deps: [{ token: NotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationsComponent, selector: "app-notification", ngImport: i0, template: "<!--\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 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\">\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: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.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.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.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";
+})(DnRangeType || (DnRangeType = {}));
+
+class DnsService {
+    constructor(apiService) {
+        this.apiService = apiService;
+        this.availableNumbers = {};
+    }
+    getNumberRange(siteId, routePartition, withdids, from, pageSize) {
+        var _a;
+        // @ts-ignore
+        if ((_a = this.availableNumbers[routePartition]) === null || _a === void 0 ? void 0 : _a.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) {
+        let unwrapNumberRange = this.unwrapNumberRange(availableNumber.phoneNumberRange.from, availableNumber.phoneNumberRange.to)
+            .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;
+    }
+    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 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\" *ngIf=\"device.lineAssociations?.length\">\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: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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\" *ngIf=\"device.lineAssociations?.length\">\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 InfoDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.confirmButtonText = 'OK';
+        this.message = '';
+        this.title = '';
+    }
+    ngOnInit() {
+        this.confirmButtonText = this.data.confirmButtonText || '';
+        this.message = this.data.message || '';
+        this.title = this.data.title || '';
+    }
+    onClose(val) {
+        this.dialogRef.close(val);
+    }
+}
+InfoDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfoDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+InfoDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: InfoDialogComponent, selector: "app-info-dialog", ngImport: i0, template: "<div id=\"info-dialog\" class=\"app-dialog\" aria-labelledby=\"info-dialog-label\" role=\"dialog\">\r\n  <h3 *ngIf=\"title\" class=\"app-dialog-title\">{{title}}</h3>\r\n  <div mat-dialog-content *ngIf=\"message\" class=\"app-dialog-content\">\r\n    <div [innerHTML]=\"message\"></div>\r\n  </div>\r\n  <div mat-dialog-actions class=\"flex-gap-container\">\r\n    <button class=\"app-dialog-button app-dialog-cancel-button\" (click)=\"onClose(false)\">\r\n      Cancel\r\n    </button>\r\n    <button class=\"app-dialog-button app-dialog-confirm-button\" (click)=\"onClose(true)\">\r\n      {{confirmButtonText}}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";#info-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative}#info-dialog .fa{font-size:35px;margin:0 auto 20px;display:block;text-align:center;color:#009fdb;cursor:default}.scroll-content{overflow-y:auto;margin:auto;max-height:150px;width:100%}.app-dialog{font-family:Inter,Inter,sans-serif}.app-dialog .app-dialog-title{text-align:center;font-weight:600;font-size:16px;font-family:Inter,Inter,sans-serif;margin:0 0 24px}.app-dialog .flex-gap-container{gap:16px;position:absolute;right:0;bottom:0;gap:15px;display:flex}.app-dialog .app-dialog-content{color:#000000b3;font-size:14px}.app-dialog-button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Inter,sans-serif;cursor:pointer}.app-dialog-cancel-button{border:1px solid rgba(0,0,0,.5);color:#000;background:white}.app-dialog-confirm-button{background:black;color:#fff}\n"], dependencies: [{ kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfoDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-info-dialog', encapsulation: ViewEncapsulation.None, template: "<div id=\"info-dialog\" class=\"app-dialog\" aria-labelledby=\"info-dialog-label\" role=\"dialog\">\r\n  <h3 *ngIf=\"title\" class=\"app-dialog-title\">{{title}}</h3>\r\n  <div mat-dialog-content *ngIf=\"message\" class=\"app-dialog-content\">\r\n    <div [innerHTML]=\"message\"></div>\r\n  </div>\r\n  <div mat-dialog-actions class=\"flex-gap-container\">\r\n    <button class=\"app-dialog-button app-dialog-cancel-button\" (click)=\"onClose(false)\">\r\n      Cancel\r\n    </button>\r\n    <button class=\"app-dialog-button app-dialog-confirm-button\" (click)=\"onClose(true)\">\r\n      {{confirmButtonText}}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";#info-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative}#info-dialog .fa{font-size:35px;margin:0 auto 20px;display:block;text-align:center;color:#009fdb;cursor:default}.scroll-content{overflow-y:auto;margin:auto;max-height:150px;width:100%}.app-dialog{font-family:Inter,Inter,sans-serif}.app-dialog .app-dialog-title{text-align:center;font-weight:600;font-size:16px;font-family:Inter,Inter,sans-serif;margin:0 0 24px}.app-dialog .flex-gap-container{gap:16px;position:absolute;right:0;bottom:0;gap:15px;display:flex}.app-dialog .app-dialog-content{color:#000000b3;font-size:14px}.app-dialog-button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Inter,sans-serif;cursor:pointer}.app-dialog-cancel-button{border:1px solid rgba(0,0,0,.5);color:#000;background:white}.app-dialog-confirm-button{background:black;color:#fff}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.MatDialogRef }, { type: InfoDialogConfig, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
+    } });
+class InfoDialogConfig {
+}
+
+var SpeedDialType;
+(function (SpeedDialType) {
+    SpeedDialType["slotBasic"] = "slotBasic";
+    SpeedDialType["abbreviated"] = "abbreviated";
+})(SpeedDialType || (SpeedDialType = {}));
+var MailboxQuotasType;
+(function (MailboxQuotasType) {
+    MailboxQuotasType["system"] = "system";
+    MailboxQuotasType["custom"] = "custom";
+})(MailboxQuotasType || (MailboxQuotasType = {}));
+var VMNotificationsTypes;
+(function (VMNotificationsTypes) {
+    VMNotificationsTypes["Pager Device"] = "Pager Device";
+    VMNotificationsTypes["Phone Device"] = "Phone Device";
+    VMNotificationsTypes["SMTP Device"] = "SMTP Device";
+    VMNotificationsTypes["HTML Device"] = "HTML Device";
+})(VMNotificationsTypes || (VMNotificationsTypes = {}));
+var DeviceTypes;
+(function (DeviceTypes) {
+    DeviceTypes["CTI_ROUTE_POINT"] = "CTI Route Point";
+    DeviceTypes["CTI_PORT"] = "CTI Port";
+    DeviceTypes["CTI_REMOTE"] = "CTI Remote Device";
+})(DeviceTypes || (DeviceTypes = {}));
+
+const speedDialRegex = new RegExp('^[^"]*$');
+const BLFRegex = new RegExp('^[^"><&%]*$');
+const timeRegex = new RegExp('^([0-1][0-9]|[2][0-3]):([0-5][0-9])$');
+class ValidationService {
+    constructor(siteSettingsService) {
+        this.siteSettingsService = siteSettingsService;
+        this.matchControl = (fieldName) => {
+            return (control) => {
+                if (!(control === null || control === void 0 ? void 0 : control.parent)) {
+                    return null;
+                }
+                const matchingControl = control.parent.get(fieldName);
+                if (matchingControl.value && matchingControl.value !== control.value) {
+                    return {
+                        matchControl: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.matchLength = (fieldName) => {
+            return (control) => {
+                if (!control.parent || !control.value) {
+                    return null;
+                }
+                const matchingControl = control.parent.get(fieldName);
+                if (((!control.value.startsWith('+') && !matchingControl.value.startsWith('+')) ||
+                    (control.value.startsWith('+') && matchingControl.value.startsWith('+'))) &&
+                    ((!control.value.startsWith('\\+') && !matchingControl.value.startsWith('\\+')) ||
+                        (control.value.startsWith('\\+') && matchingControl.value.startsWith('\\+'))) &&
+                    matchingControl.value.length !== control.value.length) {
+                    return {
+                        matchLength: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.dynamicMaxLength = (length1, length2) => {
+            return (control) => {
+                if (!control.parent || !control.value) {
+                    return null;
+                }
+                const maxLength = String(control.value).includes('[') ? length1 : length2;
+                if (control.value.length > maxLength) {
+                    return {
+                        maxLength: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.biggerThan = (fieldName) => {
+            return (control) => {
+                if (!control.parent || !control.value) {
+                    return null;
+                }
+                const matchingControl = control.parent.get(fieldName);
+                if (matchingControl.value.length === control.value.length && matchingControl.value && matchingControl.value > control.value) {
+                    return {
+                        biggerThan: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.requiredByType = (fieldName, type) => {
+            return (control) => {
+                if (fieldName === 'phoneSystem' && (type === VMNotificationsTypes['Phone Device'] || type === VMNotificationsTypes['Pager Device']) ||
+                    fieldName === 'htmlTemplate' && type === VMNotificationsTypes['HTML Device']) {
+                    return {
+                        required: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.smallerThanQuota = (fieldName, quotaType, secondQuotaType) => {
+            return (control) => {
+                if (!control.parent) {
+                    return null;
+                }
+                const matchingControl = control.parent.get(fieldName);
+                const quotaTypeControl = control.parent.get(quotaType);
+                const secondQuotaTypeControl = control.parent.get(secondQuotaType);
+                if (quotaTypeControl && secondQuotaTypeControl && secondQuotaTypeControl.value === MailboxQuotasType.system) {
+                    return null;
+                }
+                if (quotaTypeControl && quotaTypeControl.value === MailboxQuotasType.system || matchingControl && matchingControl.value && parseInt(matchingControl.value) < parseInt(control.value)) {
+                    return {
+                        smallerThan: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.biggerThanQuota = (fieldName, quotaType) => {
+            return (control) => {
+                if (!(control === null || control === void 0 ? void 0 : control.parent)) {
+                    return null;
+                }
+                const matchingControl = control.parent.get(fieldName);
+                const quotaTypeControl = control.parent.get(quotaType);
+                if (quotaTypeControl && quotaTypeControl.value === MailboxQuotasType.custom && matchingControl.value && parseInt(matchingControl.value) > parseInt(control.value)) {
+                    return {
+                        biggerThan: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.rangeLimit = (fieldName) => {
+            return (control) => {
+                if (!(control === null || control === void 0 ? void 0 : control.parent) || !control.value) {
+                    return null;
+                }
+                const matchingControl = control.parent.get(fieldName);
+                if ((control.value - matchingControl.value) > 50000) {
+                    return {
+                        rangeLimit: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.comparepatternParts = (fieldName) => {
+            return (control) => {
+                if (!(control === null || control === void 0 ? void 0 : control.value)) {
+                    return null;
+                }
+                const matches = control.value.match(/\[(.*?)\]/);
+                if (matches) {
+                    const submatch = matches[1];
+                    const submatchsplit = submatch.split('-');
+                    for (let i = 0; i < submatchsplit.length; i++) {
+                        if (submatchsplit[i] >= submatchsplit[i + 1]) {
+                            return {
+                                comparepatternParts: true
+                            };
+                        }
+                    }
+                }
+                return null;
+            };
+        };
+        this.matchPrefix = (fieldName) => {
+            return (control) => {
+                if (!(control === null || control === void 0 ? void 0 : control.parent) || !control.value) {
+                    return null;
+                }
+                const matchingControl = control.parent.get(fieldName);
+                if ((matchingControl.value.startsWith('+') || control.value.startsWith('+') || matchingControl.value.startsWith('\\+') || control.value.startsWith('\\+')) && (control.value.charAt(0) !== matchingControl.value.charAt(0))) {
+                    return {
+                        matchPrefix: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.deviceNameValidator = (device) => {
+            return (control) => {
+                var _a;
+                if (!control.value || device.deviceKind === DeviceKind.deviceProfile) {
+                    return;
+                }
+                if (device.isCtiRoutePoint) {
+                    let err = '';
+                    if (!control.value.match(/^[a-zA-Z0-9-_.]+$/)) {
+                        err = 'pattern';
+                    }
+                    if (control.value.trim().length > 15) {
+                        err = 'maxLength';
+                    }
+                    return err ? { nameRule: err } : null;
+                }
+                if (device.deviceDefaults && !device.isCtiRoutePoint) {
+                    const ruleText = device.deviceDefaults.deviceNameRegex;
+                    const rule = new RegExp(ruleText, 'g');
+                    const caption = (_a = device.deviceDefaults) === null || _a === void 0 ? void 0 : _a.deviceNameExplained;
+                    const match = (control.value || '').match(rule) || [];
+                    const exactMatch = match && control.value === match[0];
+                    if (rule && !exactMatch) {
+                        return { nameRule: { caption } };
+                    }
+                }
+                return null;
+            };
+        };
+        this.deviceNameValueValidator = (device, deviceName) => {
+            return (control) => {
+                if (!control.value || device.deviceKind === DeviceKind.deviceProfile) {
+                    return;
+                }
+                if (device.name && device.alreadyUsedName && device.name === device.alreadyUsedName) {
+                    return { nameRule: 'alreadyUsedName' };
+                }
+                if (device.isCtiRoutePoint) {
+                    let err = '';
+                    if (!deviceName.match(/^[a-zA-Z0-9-_.]+$/)) {
+                        err = 'pattern';
+                    }
+                    if (deviceName.trim().length > 15) {
+                        err = 'maxLength';
+                    }
+                    return err ? { nameRule: err } : null;
+                }
+                if (device.deviceDefaults && !device.isCtiRoutePoint) {
+                    const ruleText = device.deviceDefaults.deviceNameRegex;
+                    // console.log('Dev name rule - ', ruleText);
+                    const rule = new RegExp(ruleText, 'g');
+                    let caption = device.deviceDefaults.deviceNameExplained;
+                    if (!caption) {
+                        caption = ruleText;
+                    }
+                    const match = (deviceName || '').match(rule) || [];
+                    const exactMatch = match && deviceName === match[0];
+                    if (rule && !exactMatch) {
+                        return { nameRule: { caption } };
+                    }
+                }
+                return null;
+            };
+        };
+        this.deviceDuplicatingNameValidator = (user, pkid, prefix) => {
+            return (control) => {
+                if (!control.value || !user || !user.devices || user.devices.length === 0) {
+                    return;
+                }
+                const deviceName = prefix ? `${prefix}${control.value}` : control.value;
+                const devicesWithTheSameName = user.devices.filter((device) => device.name === deviceName);
+                if (devicesWithTheSameName.length > 0) {
+                    if (!pkid) { // For new device
+                        return { duplicateNameRule: true };
+                    }
+                    else if (pkid !== devicesWithTheSameName[0].pkid) { // For updating device, avoid validating with itself
+                        return { duplicateNameRule: true };
+                    }
+                }
+                return null;
+            };
+        };
+        this.conditionalRequired = (fieldName, requiredConditionValues) => {
+            return (control) => {
+                const parent1 = control.parent;
+                if (!parent1 || !parent1.get(fieldName) || !parent1.get(fieldName).value) {
+                    return;
+                }
+                if (requiredConditionValues.includes(parent1.get(fieldName).value) && !control.value) {
+                    return {
+                        required: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.conditionalRequiredForGroupAdmin = (fieldName, requiredConditionValues) => {
+            return (control) => {
+                const parent1 = control.parent;
+                if (!parent1 || !parent1.get(fieldName) || !parent1.get(fieldName).value || !parent1.get(fieldName).value.type) {
+                    return;
+                }
+                if (requiredConditionValues.includes(parent1.get(fieldName).value.type) && !control.value) {
+                    return {
+                        required: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.conditionalSiteGroupCheckForGroupAdmin = (fieldName, requiredConditionValues) => {
+            return (control) => {
+                const parent1 = control.parent;
+                if (!parent1 || !parent1.get(fieldName) || !parent1.get(fieldName).value || !parent1.get(fieldName).value.type) {
+                    return;
+                }
+                if (parent1.get(fieldName).value && requiredConditionValues.includes(parent1.get(fieldName).value.type) &&
+                    parent1.get('siteGroup') && parent1.get('siteGroup').value &&
+                    parent1.get('siteGroup').value.siteGroupMembers && parent1.get('siteGroup').value.siteGroupMembers.length < 1) {
+                    return {
+                        hasSiteGroupError: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.requiredIfFieldIsEmptyForBLF = (fieldName) => {
+            const DATE_PATTERN = '^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d$';
+            return (control) => {
+                const parent = control.parent;
+                if (!parent || !parent.get(fieldName)) {
+                    return null;
+                }
+                if (!parent.get(fieldName).value && !control.value) {
+                    return {
+                        requiredEither: true,
+                        requiredBLFDN: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.validDate = (fieldName) => {
+            return (control) => {
+                const parent = control.parent;
+                const ruleText = '^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d$';
+                const rule = new RegExp(ruleText, 'g');
+                const val = control.value && control.value.getDate();
+                if (rule && !rule.test(val)) {
+                    return { pattern: true };
+                }
+                return null;
+            };
+        };
+        this.matchOption = (optionType, list, isFullList) => {
+            return (control) => {
+                if (!control.value || control.value === DeviceTypes.CTI_ROUTE_POINT) {
+                    return null;
+                }
+                let optionList = list || this.getOptionsList(optionType);
+                if (optionList && optionList.length) {
+                    if (!isFullList && optionType === 'directoryNumbers') {
+                        optionList = optionList.map((str) => str.indexOf(' ') > -1 ? str.substring(0, str.indexOf(' ')) : str);
+                    }
+                    if (!optionList.includes(control.value)) {
+                        return {
+                            matchOptions: true
+                        };
+                    }
+                }
+                return null;
+            };
+        };
+        this.confidentialAccessLevel = (confidentialAccessMode) => {
+            return (control) => {
+                if (!control.value && !confidentialAccessMode) {
+                    return null;
+                }
+                if (!control.value) {
+                    return {
+                        required: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.noResultDN = (optionType, list) => {
+            return (control) => {
+                if (!control.value || list === null) {
+                    return null;
+                }
+                if (list && list.length === 0) {
+                    return {
+                        noResultDNs: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.matchExtensionOption = (optionType, optionList) => {
+            return (control) => {
+                if (!control.value) {
+                    return control.value;
+                }
+                // @ts-ignore
+                const newList = [];
+                if (optionList && optionList.length) {
+                    optionList.forEach((list) => {
+                        const newOptionList = this.getMatchExistingVmLineValue(list);
+                        newList.push(newOptionList);
+                    });
+                    // @ts-ignore
+                    if (newList && !newList.includes(control.value)) {
+                        return {
+                            matchOptions: true
+                        };
+                    }
+                }
+                else if (!optionList || !optionList.length) {
+                    return {
+                        matchOptions: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.requiredEitherForVmExtension = (fieldName1, fieldName2) => {
+            return (control) => {
+                if (!control.parent) {
+                    return null;
+                }
+                const matchControl1 = control.parent.get(fieldName1).value;
+                const matchControl2 = control.parent.get(fieldName2).value;
+                if (!matchControl1 && !matchControl2) {
+                    return {
+                        requiredEitherForVmExtension: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.requiredEitherOne = (fieldName1, fieldName2) => {
+            return (control) => {
+                if (!control.parent) {
+                    return null;
+                }
+                const matchControl1 = control.parent.get(fieldName1) && control.parent.get(fieldName1).value;
+                const matchControl2 = control.parent.get(fieldName2) && control.parent.get(fieldName2).value;
+                if (!matchControl1 && !matchControl2) {
+                    return {
+                        requiredEitherOne: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.requiredByValue = (fieldName, requestedFieldVal) => {
+            return (control) => {
+                if (!control || !control.parent) {
+                    return null;
+                }
+                const fieldVal = control.parent.get(fieldName) && control.parent.get(fieldName).value;
+                if (fieldVal && fieldVal === requestedFieldVal && !control.value) {
+                    return {
+                        required: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.OneExtensionEmpty = (fieldName1, fieldName2) => {
+            return (control) => {
+                if (!control.parent) {
+                    return null;
+                }
+                const matchControl1 = control.parent.get(fieldName1).value;
+                const matchControl2 = control.parent.get(fieldName2).value;
+                if (matchControl1 && matchControl2) {
+                    return {
+                        OneExtensionIsEmpty: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.requiredByCondition = (requiredBy, fieldName) => {
+            return (control) => {
+                if (!control.parent) {
+                    return null;
+                }
+                const requiredByControl = control.parent.get(requiredBy).value;
+                const requiredControl = control.parent.get(fieldName).value;
+                if (requiredByControl && !requiredControl) {
+                    return {
+                        required: true
+                    };
+                }
+                return null;
+            };
+        };
+        this.pinMultiCharacterCheck = (fieldName) => {
+            // @ts-ignore
+            return (control) => {
+                if (!control.parent) {
+                    return null;
+                }
+                const matchingControl = control.parent.get(fieldName);
+                const ruleMultiCharacter = new RegExp('([0-9])\\1{2}');
+                if (matchingControl.value) {
+                    const hasMultiCharacter = ruleMultiCharacter.test(matchingControl.value);
+                    if (hasMultiCharacter) {
+                        return {
+                            multiCharacter: true
+                        };
+                    }
+                }
+            };
+        };
+        this.pinConsecutiveNumberCheck = (fieldName) => {
+            // @ts-ignore
+            return (control) => {
+                if (!control.parent) {
+                    return null;
+                }
+                const matchingControl = control.parent.get(fieldName);
+                const strToCheck = matchingControl.value;
+                if (strToCheck && strToCheck.length > 1) {
+                    const resAsc = this.pinOrderCheck(strToCheck);
+                    if (resAsc === true) {
+                        return {
+                            consecutiveNumbers: true
+                        };
+                    }
+                }
+            };
+        };
+        this.pinMailboxExtensionCheck = (fieldName, extension) => {
+            return (control) => {
+                if (!control.parent) {
+                    return null;
+                }
+                const matchingControl = control.parent.get(fieldName);
+                const strToCheck = matchingControl.value;
+                if (strToCheck === extension || strToCheck.includes(extension)) {
+                    return {
+                        mailboxExtension: true
+                    };
+                }
+                return null;
+            };
+        };
+    }
+    e164MaskLabel(control) {
+        const ruleText = `^[0-9*#+X]{0,24}$`;
+        const rule = new RegExp(ruleText, 'g');
+        if (control.value && rule && !rule.test(control.value)) {
+            return { e164MaskRule: { rule: ruleText } };
+        }
+        return null;
+    }
+    index(control) {
+        const value = parseInt(control.value);
+        if (!value) {
+            return null;
+        }
+        const pattern = '^[+0-9]*$';
+        if (value && !Number.isInteger(value) || value < 1 || value > 199) {
+            return { indexRule: true };
+        }
+        return null;
+    }
+    displayLabel(control) {
+        const ruleText = `^[^""""%&<>]{0,30}$`;
+        const rule = new RegExp(ruleText, 'g');
+        if (rule && !rule.test(control.value)) {
+            return { labelRule: { rule: ruleText, count: 30 } };
+        }
+        return null;
+    }
+    displayLabelAscii(control) {
+        const ruleText = '^[a-zA-Z0-9 !#$\'()*+,./:;=?@\\^_`}~-]{0,30}$';
+        const rule = new RegExp(ruleText, 'g');
+        if (rule && !rule.test(control.value)) {
+            return { labelRule: { rule: ruleText, count: 30 } };
+        }
+        return null;
+    }
+    requiredForSpeedDialPosition(type) {
+        return (control) => {
+            const parent = control.parent;
+            if (type === SpeedDialType.slotBasic || !parent) {
+                return null;
+            }
+            if (!control.value) {
+                return { required: true };
+            }
+            return null;
+        };
+    }
+    speedDialDestination() {
+        return (control) => {
+            if (!control || !control.value) {
+                return null;
+            }
+            const numberOrHostNameIP = '' +
+                '^([0-9\\*#+PpCcFf,]+)$' +
+                '|' +
+                '^(' +
+                '([a-zA-Z0-9]){1,47}@' +
+                '(' +
+                '((?:[0-9]{1,3}\\.){3}[0-9]{1,3})' +
+                '|' +
+                '([a-zA-Z0-9][a-zA-Z0-9\\-]{1,61}[a-zA-Z0-9]\\.[a-zA-Z]{2,})' +
+                ')' +
+                ')$';
+            const rule = new RegExp(numberOrHostNameIP, 'g');
+            if (rule && !rule.test(control.value)) {
+                return { pattern: true };
+            }
+            return null;
+        };
+    }
+    requiredForSpeedDialDestination(type) {
+        return (control) => {
+            const parent = control.parent;
+            if ((!parent || !parent.get('label')) || (type === SpeedDialType.slotBasic && !control.value && !parent.get('label').value)) {
+                return null;
+            }
+            return null;
+        };
+    }
+    labelPatternDependingOnType(control) {
+        const parent = control === null || control === void 0 ? void 0 : control.parent;
+        if (!parent || !parent.get('type') || !control.value) {
+            return null;
+        }
+        const type = parent.get('type').value;
+        if (!type && !speedDialRegex.test(control.value)) {
+            return { labelRule: { wrong: '"' } };
+        }
+        if (type && !BLFRegex.test(control.value)) {
+            return { labelRule: { wrong: '"><&%' } };
+        }
+        return null;
+    }
+    labelPatternBLF(control) {
+        if (control.value && !BLFRegex.test(control.value)) {
+            return { labelRule: { wrong: '"><&%' } };
+        }
+        return null;
+    }
+    labelPatternSpeedDial(control) {
+        if ((control === null || control === void 0 ? void 0 : control.value) && !speedDialRegex.test(control.value)) {
+            return { labelRule: { wrong: '"' } };
+        }
+        return null;
+    }
+    getMatchExistingVmLineValue(dnWithType) {
+        const ind = dnWithType.indexOf('Type:');
+        let dn = dnWithType;
+        if (ind > -1) {
+            dn = dnWithType.slice(0, ind);
+            dn = dn.trim();
+        }
+        return dn;
+    }
+    getOptionsList(token) {
+        switch (token) {
+            case 'css':
+            case 'rerouteCss':
+            case 'callingSearchSpace':
+                return this.siteSettingsService.callingSearchSpaceTypes;
+            case 'reroutingCss':
+                return this.siteSettingsService.siteDefaults && this.siteSettingsService.siteDefaults.cssFilter;
+            case 'deviceType':
+                return this.siteSettingsService.deviceTypes;
+            case 'routePartition':
+                return this.siteSettingsService.routePartitionNames;
+            case 'routePartitionFiltered':
+                return this.siteSettingsService.filteredRoutePartitionNames;
+            case 'devicePools':
+                return this.siteSettingsService.devicePools;
+            case 'allRoutePartitions':
+                return this.siteSettingsService.allRoutePartitionNames;
+            case 'directoryNumbers':
+                return this.siteSettingsService.directoryNumbers;
+            default:
+                return [];
+        }
+    }
+    autocompleteType(control) {
+        if (!control.value) {
+            return null;
+        }
+        if (typeof control.value !== 'object' && control.value !== '') {
+            return {
+                stringEntered: true
+            };
+        }
+        return null;
+    }
+    password(control) {
+        const ruleNumeric = new RegExp(/\d+/, 'g');
+        const ruleCapitals = new RegExp(/[A-Z]+/, 'g');
+        const ruleSmall = new RegExp(/[a-z]+/, 'g');
+        const ruleSpecial = new RegExp(/[!@#$%&\/=\?_\.,:;\-\\+]+/, 'g');
+        const hasNumeric = +ruleNumeric.test(control.value);
+        const hasCapitals = +ruleCapitals.test(control.value);
+        const hasSmall = +ruleSmall.test(control.value);
+        const hasSpecial = +ruleSpecial.test(control.value);
+        if (hasNumeric + hasCapitals + hasSmall + hasSpecial < 3) {
+            return {
+                weakPassword: true
+            };
+        }
+        return null;
+    }
+    verifyAutoAnswer(control) {
+        if (!(control === null || control === void 0 ? void 0 : control.value) || control.value.length === 0) {
+            return null;
+        }
+        let autoAnswerErrorLine = null;
+        if (control.parent && control.parent.parent && control.parent.parent.parent && control.parent.parent.parent.parent) {
+            const controlSNR = control.parent;
+            const controlUser = control.parent.parent.parent.parent;
+            const lineAssociations = controlSNR.get('lineAssociations');
+            const lines = controlUser.get('lines');
+            if (lines) {
+                lineAssociations.value.forEach((lineAssociation) => {
+                    const autoAnswerLine = lines.controls.find((line) => line.get('directoryNumber').value.directoryNumber === lineAssociation.directoryNumber && line.get('directoryNumber').value.routePartitionName === lineAssociation.routePartitionName
+                        && line.get('autoAnswer').value !== 'Auto Answer Off');
+                    if (autoAnswerLine) {
+                        autoAnswerErrorLine = {
+                            autoAnswerErrorLine: lineAssociation.directoryNumber
+                        };
+                    }
+                });
+            }
+        }
+        return autoAnswerErrorLine;
+    }
+    verifyBeginEndTime(control) {
+        const parent = control.parent;
+        if (!parent || !parent.get('isActive') || !parent.get('allDay') || !parent.get('from') || !parent.get('to')) {
+            return null;
+        }
+        if (parent.get('isActive').value) {
+            if (!parent.get('allDay').value) {
+                if (!parent.get('from').value || parent.get('from').value === 'No Office Hours'
+                    || !parent.get('to').value || parent.get('to').value === 'No Office Hours'
+                    || parent.get('from').value > parent.get('to').value) {
+                    return {
+                        fromGreaterThanTo: true
+                    };
+                }
+            }
+        }
+        return null;
+    }
+    time(control) {
+        if (control.value && !timeRegex.test(control.value)) {
+            return { timeFormat: true };
+        }
+        return null;
+    }
+    pinOrderCheck(str) {
+        if (str) {
+            const arr_num = ('' + str).split('');
+            for (let i = 0; i < arr_num.length - 2; i++) {
+                const num1 = parseInt(arr_num[i]);
+                const num2 = parseInt(arr_num[i + 1]);
+                const num3 = parseInt(arr_num[i + 2]);
+                if ((num2 - num1) === 1 && (num3 - num2 === num2 - num1)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+    }
+    isItemAlreadyInList(item, list) {
+        if (!item || !list || !list.length) {
+            return false;
+        }
+        for (const listItem of list) {
+            if (item.equals(listItem)) {
+                return true;
+            }
+        }
+        return false;
+    }
+}
+ValidationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidationService, deps: [{ token: SiteSettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
+ValidationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SiteSettingsService }]; } });
+
+class DeviceAssociatedLineDetailsBoxComponent {
+    constructor() {
+        this.title = '';
+    }
+}
+DeviceAssociatedLineDetailsBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceAssociatedLineDetailsBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DeviceAssociatedLineDetailsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceAssociatedLineDetailsBoxComponent, selector: "app-line-details-block", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"line-details-block\">\r\n    <div class=\"line-details-block__title\">{{ title }}</div>\r\n    <div class=\"line-details-block__content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".line-details-block{display:flex;padding:1rem 1.5rem}.line-details-block__title{width:150px;max-width:150px;font-weight:500}.line-details-block__content{display:flex;flex-direction:column;width:100%;margin-left:2.5rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceAssociatedLineDetailsBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-line-details-block", template: "<div class=\"line-details-block\">\r\n    <div class=\"line-details-block__title\">{{ title }}</div>\r\n    <div class=\"line-details-block__content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".line-details-block{display:flex;padding:1rem 1.5rem}.line-details-block__title{width:150px;max-width:150px;font-weight:500}.line-details-block__content{display:flex;flex-direction:column;width:100%;margin-left:2.5rem}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }] } });
+
+class DeviceAssociatedLineComponent {
+    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[this.deviceIndex]) && ((_d = (_c = this.userService) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.devices[this.deviceIndex].lineAssociations[this.lineIndex].form);
+    }
+    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[this.deviceIndex].lineAssociations[this.lineIndex];
+    }
+    get originLineAssociation() {
+        var _a, _b;
+        return (_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.originUser) === null || _b === void 0 ? void 0 : _b.devices[this.deviceIndex].lineAssociations[this.lineIndex];
+    }
+    get user() {
+        return this.userService.user;
+    }
+    constructor(userService, apiService, siteSettingsService, lineService, deviceService, dialog, validationService) {
+        this.userService = userService;
+        this.apiService = apiService;
+        this.siteSettingsService = siteSettingsService;
+        this.lineService = lineService;
+        this.deviceService = deviceService;
+        this.dialog = dialog;
+        this.validationService = validationService;
+        this.updatedLineAssociationEvent = new EventEmitter();
+        this.onChange = new EventEmitter();
+        this.recordingOptions = RecordingOptions;
+        this.recordingMediaSources = RECORDING_MEDIA_SOURCE;
+        this.staticOptions = STATIC_OPTIONS;
+        this.subscriptions = [];
+    }
+    ngOnInit() {
+        this.getData();
+        this.lineService.onSaveLineAssociationEvent
+            .subscribe(() => {
+            this.updateLine(this.lineAssociation);
+        });
+    }
+    ngOnDestroy() {
+        var _a;
+        if ((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.length) {
+            this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+        }
+    }
+    onChangeField(token) {
+        var _a, _b;
+        if (!token) {
+            return;
+        }
+        this.userService.user.devices[this.deviceIndex].lineAssociations[this.lineIndex][token] = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get(token)) === null || _b === void 0 ? void 0 : _b.value;
+        this.setHasChangesToLine();
+        this.onChange.emit();
+    }
+    onAutocomplete(token) {
+        var _a, _b;
+        const value = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get(token)) === null || _b === void 0 ? void 0 : _b.value;
+        this.filteredMonitorCssList = UtilsService.filterOptions(this.monitorCssList, value);
+    }
+    recordingOptionChanged(token) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const value = (_a = this.form.get(token)) === null || _a === void 0 ? void 0 : _a.value;
+        this.onChangeField(token);
+        if (value === RecordingOptions.auto_enabled || value === RecordingOptions.selective_enabled) {
+            if (!((_c = (_b = this.form) === null || _b === void 0 ? void 0 : _b.get('recordingProfile')) === null || _c === void 0 ? void 0 : _c.touched)) {
+                (_d = this.form.get('recordingProfile')) === null || _d === void 0 ? void 0 : _d.markAsTouched();
+            }
+            (_e = this.form.get('recordingProfile')) === null || _e === void 0 ? void 0 : _e.enable();
+            (_f = this.form.get('recordingMediaSource')) === null || _f === void 0 ? void 0 : _f.enable();
+        }
+        else {
+            (_g = this.form.get('recordingProfile')) === null || _g === void 0 ? void 0 : _g.disable();
+            (_h = this.form.get('recordingProfile')) === null || _h === void 0 ? void 0 : _h.setValue('');
+            this.onChangeField('recordingProfile');
+            /* if (!this.authService.hasRole('SUPER_USER')) {
+               recordingMediaSource.disable();
+               recordingMediaSource.setValue(this.recordingMediaSources[0]);
+               this.changeField('recordingMediaSource');
+             }*/
+        }
+    }
+    getRule() {
+        var _a, _b, _c;
+        // @ts-ignore
+        if (((_a = this.form.get('e164Mask')) === null || _a === void 0 ? void 0 : _a.errors) && ((_b = this.form.get('e164Mask')) === null || _b === void 0 ? void 0 : _b.errors['e164MaskRule'])) {
+            // @ts-ignore
+            return (_c = this.form.get('e164Mask')) === null || _c === void 0 ? void 0 : _c.errors['e164MaskRule']['rule'];
+        }
+        return '';
+    }
+    toggleEditMode() {
+        this.userService.user.toggleEditMode();
+    }
+    isSavingDisabled() {
+        return !this.userService.hasUnsavedChanges() || this.userService.hasExistedUserId;
+    }
+    onChangeExtension(value) {
+        if (this.lineAssociation && this.lineAssociation.directoryNumber) {
+            this.userService.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber = value;
+        }
+    }
+    onLineRemove() {
+    }
+    getData() {
+        this.dataPending = true;
+        const subscription = this.siteSettingsService.getMonitorCss(this.siteId)
+            .subscribe((res) => {
+            this.monitorCssList = (res === null || res === void 0 ? void 0 : res.length) ? res.slice() : [];
+            this.filteredMonitorCssList = (res === null || res === void 0 ? void 0 : res.length) ? res.slice() : [];
+        });
+        this.subscriptions.push(subscription);
+    }
+    updateLine(line) {
+        const body = this.lineService.getLineAssociationBody(this.originLineAssociation, this.lineAssociation);
+        console.log('update line', body);
+        this.deviceService.dataPending = true;
+        this.deviceService.putDeviceFields(this.siteId, this.deviceName, this.userService.user.token, body)
+            .subscribe(() => {
+            this.userService.persistUserCache()
+                .subscribe(() => {
+                this.userService.fetchUserToken(this.siteId, this.userService.user.userid, this.validationService)
+                    .subscribe(() => {
+                    this.updatedLineAssociationEvent.emit();
+                    this.deviceService.dataPending = false;
+                }, () => this.deviceService.dataPending = false);
+            }, () => this.deviceService.dataPending = true);
+        }, () => this.deviceService.dataPending = true);
+    }
+    deleteLine(line) {
+        this.lineService.deleteLine(this.siteId, line.linePkid, this.userService.user.token)
+            .subscribe(() => {
+            this.userService.persistUserCache()
+                .subscribe(() => {
+                this.userService.fetchUserToken(this.siteId, this.userService.user.userid, this.validationService)
+                    .subscribe(() => {
+                    this.updatedLineAssociationEvent.emit();
+                });
+            });
+        });
+    }
+    setHasChangesToLine() {
+        if (this.lineAssociation) {
+            this.userService.user.devices[this.deviceIndex].lineAssociations[this.lineIndex].hasChanges = !this.lineAssociation.fullEqual(this.originLineAssociation);
+            this.userService.user.devices[this.deviceIndex].lineAssociationsHasChanges = !this.lineAssociation.fullEqual(this.originLineAssociation);
+        }
+    }
+}
+DeviceAssociatedLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceAssociatedLineComponent, deps: [{ token: UserService }, { token: APIService }, { token: SiteSettingsService }, { token: LineService }, { token: DeviceService }, { token: i1$1.MatDialog }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Component });
+DeviceAssociatedLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceAssociatedLineComponent, selector: "app-device-associated-line", inputs: { lineIndex: "lineIndex", deviceIndex: "deviceIndex", deviceName: "deviceName", siteId: "siteId" }, outputs: { updatedLineAssociationEvent: "updatedLineAssociationEvent", onChange: "onChange" }, ngImport: i0, template: "<div id=\"device-associated-line\" *ngIf=\"lineAssociation && form\" [formGroup]=\"form\">\r\n  <ng-container class=\"line-details__container\">\r\n      <app-line-details-block [title]=\"'Line setting on the device'\">\r\n        <div class=\"form-group\">\r\n          <label>Display Caller ID</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input matInput type=\"text\" name=\"displayLabel\" formControlName=\"displayLabel\"\r\n                   (input)=\"onChangeField('displayLabel')\">\r\n            <mat-error *ngIf=\"form.get('displayLabel')?.hasError('maxlength')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              This field can\u2019t have more than 30 characters\r\n            </mat-error>\r\n            <mat-error *ngIf=\"form.get('displayLabel')?.hasError('pattern')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              Invalid symbols are used\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Text Label</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input formControlName=\"textLabel\" name=\"textLabel\"\r\n                   matInput (input)=\"onChangeField('textLabel')\">\r\n            <mat-error *ngIf=\"form.get('textLabel')?.hasError('maxlength')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              This field can\u2019t have more than 30 characters\r\n            </mat-error>\r\n            <mat-error *ngIf=\"form.get('textLabel')?.hasError('pattern')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              Invalid symbols are used\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>External Phone Number Mask</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input matInput type=\"text\" name=\"e164Mask\" formControlName=\"e164Mask\"\r\n                   (input)=\"onChangeField('e164Mask')\">\r\n            <mat-error *ngIf=\"form.get('e164Mask')?.hasError('e164MaskRule')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              e164Mask does not match the rule {{getRule()}}\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n      </app-line-details-block>\r\n      <div class=\"form-group__separator_2px\"></div>\r\n      <app-line-details-block [title]=\"'Multiple Call/Call Waiting Settings'\">\r\n        <div class=\"form-group\">\r\n          <label>Max Calls</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input matInput type=\"number\" name=\"maxNumberOfCalls\" formControlName=\"maxNumberOfCalls\"\r\n                   (input)=\"onChangeField('maxNumberOfCalls')\">\r\n            <mat-error *ngIf=\"form.get('maxNumberOfCalls')?.hasError('max')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              Value is too big\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Busy Trigger</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input matInput type=\"number\" name=\"busyTrigger\" formControlName=\"busyTrigger\"\r\n                   (input)=\"onChangeField('busyTrigger')\">\r\n            <mat-error *ngIf=\"form.get('busyTrigger')?.hasError('max')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              Value can't be bigger than Max Calls\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n      </app-line-details-block>\r\n      <div class=\"form-group__separator_2px\"></div>\r\n      <app-line-details-block [title]=\"'Call Recording'\">\r\n        <div class=\"form-group\">\r\n          <label>Recording Option</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              (selectionChange)=\"recordingOptionChanged('recordingOption')\"\r\n              formControlName=\"recordingOption\"\r\n              [id]=\"'associatedLineRecordingOptionField'\">\r\n              <mat-option [value]=recordingOptions.disabled>Call Recording Disabled</mat-option>\r\n              <mat-option [value]=recordingOptions.auto_enabled>Automatic Call Recording Enabled</mat-option>\r\n              <mat-option [value]=recordingOptions.selective_enabled>Selective Call Recording Enabled</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Recording Media Source</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              (selectionChange)=\"onChangeField('recordingMediaSource')\" formControlName=\"recordingMediaSource\"\r\n              [id]=\"'associatedLineRecordingMediaSourceField'\">\r\n              <mat-option *ngFor=\"let source of recordingMediaSources\" [value]=\"source\">{{source}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Recording Profile</label>\r\n          <app-lazy-loading-select\r\n            [siteId]=\"siteId\"\r\n            [controlName]=\"'recordingProfile'\"\r\n            [form]=\"form\"\r\n            (changeField)=\"onChangeField('recordingProfile')\"\r\n            [optionsToken]=\"'recordingProfile'\"></app-lazy-loading-select>\r\n        </div>\r\n      </app-line-details-block>\r\n      <div class=\"form-group__separator_2px\"></div>\r\n      <app-line-details-block [title]=\"'Additional line settings on the device'\">\r\n        <div class=\"form-group\">\r\n          <label>Visual Message Waiting Indicator Policy</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              formControlName=\"visualMWI\"\r\n              (selectionChange)=\"onChangeField('visualMWI')\">\r\n              <mat-option\r\n                *ngFor=\"let option of staticOptions.VISUAL_MWI\" [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Ring Setting (Phone Idle)</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              formControlName=\"ringSetting_idle\"\r\n              (selectionChange)=\"onChangeField('ringSetting_idle')\">\r\n              <mat-option *ngFor=\"let option of staticOptions.RING_SETTING_IDLE\" [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Call Pickup Audio Alert Setting (Phone Idle)</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select name=\"pickupAAS_idle\"\r\n              formControlName=\"pickupAAS_idle\"\r\n              (selectionChange)=\"onChangeField('pickupAAS_idle')\">\r\n              <mat-option *ngFor=\"let option of staticOptions.CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_IDLE\" [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Monitoring Calling Search Space</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input\r\n              [matAutocomplete]=\"auto\"\r\n              matInput\r\n              (input)=\"onAutocomplete('monitorCSS')\"\r\n              formControlName=\"monitorCSS\">\r\n            <mat-autocomplete\r\n              #auto=\"matAutocomplete\"\r\n              (optionSelected)=\"onChangeField('monitorCSS')\">\r\n              <mat-option  *ngFor=\"let option of filteredMonitorCssList\" [value]=\"option\" >\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Audible Message Waiting Indicator Policy</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              formControlName=\"audibleMWI\"\r\n              (selectionChange)=\"onChangeField('audibleMWI')\">\r\n              <mat-option *ngFor=\"let option of staticOptions.DEFAULT_ON_OFF\" [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Ring Setting (Phone Active)</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              formControlName=\"ringSetting_active\"\r\n              (selectionChange)=\"onChangeField('ringSetting_active')\">\r\n              <mat-option *ngFor=\"let option of staticOptions.RING_SETTING_ACTIVE\" [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Call Pickup Audio Alert Setting (Phone Active)</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              formControlName=\"pickupAAS_active\"\r\n              (selectionChange)=\"onChangeField('pickupAAS_active')\">\r\n              <mat-option\r\n                *ngFor=\"let option of staticOptions.CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_ACTIVE\"\r\n                [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Log Missed Calls</label>\r\n          <mat-slide-toggle name=\"logMissedCalls\" formControlName=\"logMissedCall\"></mat-slide-toggle>\r\n        </div>\r\n      </app-line-details-block>\r\n      <div class=\"form-group__separator_2px\"></div>\r\n      <app-line-details-block [title]=\"'Forwardred call information display'\">\r\n        <div class=\"form-group\">\r\n          <label>Caller Name</label>\r\n          <mat-slide-toggle name=\"callerName\" formControlName=\"callerName\" (change)=\"onChangeField('callerName')\"></mat-slide-toggle>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Redirected Number</label>\r\n          <mat-slide-toggle name=\"redirectedNumber\" formControlName=\"redirectedNumber\" (change)=\"onChangeField('redirectedNumber')\"></mat-slide-toggle>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Caller Number</label>\r\n          <mat-slide-toggle name=\"callerNumber\" formControlName=\"callerNumber\" (change)=\"onChangeField('callerNumber')\"></mat-slide-toggle>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Dialed Number</label>\r\n          <mat-slide-toggle name=\"dialedNumber\" formControlName=\"dialedNumber\" (change)=\"onChangeField('dialedNumber')\"></mat-slide-toggle>\r\n        </div>\r\n      </app-line-details-block>\r\n  </ng-container>\r\n\r\n</div>\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-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}.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%}table{border-collapse:collapse;border-spacing:0}.line-row{background:#ececec;cursor:pointer;width:100%;padding:5px;box-sizing:border-box}.line-row.disabled-line-row{cursor:default;color:silver}.user-details-box__info{grid-template-columns:100%}.form-holder__blocks{margin-top:1rem}.user-box-block{padding:1rem 0;gap:4rem;display:flex}.user-box-block-item__title{margin-bottom:.5rem}.user-box-block-item__tag{font-size:14px;color:#6d6d6d}#device-associated-line{background-color:#fff;padding:1rem;position:relative;border-left:3px solid #737480}.form-group{display:flex;align-items:center}.form-group__separator,.form-group__separator_2px{width:100%;height:1px;background-color:#cccccc80;margin:1rem 0}.form-group__separator_2px{height:2px}.form-group label{width:200px;max-width:200px;font-size:14px;color:#666}.form-group input{width:300px}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#009dff!important}.mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#fff!important}.form-group .mat-form-field{max-width:300px}\n"], dependencies: [{ kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.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: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.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: i12.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i12.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { 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: DeviceAssociatedLineDetailsBoxComponent, selector: "app-line-details-block", inputs: ["title"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceAssociatedLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-device-associated-line', template: "<div id=\"device-associated-line\" *ngIf=\"lineAssociation && form\" [formGroup]=\"form\">\r\n  <ng-container class=\"line-details__container\">\r\n      <app-line-details-block [title]=\"'Line setting on the device'\">\r\n        <div class=\"form-group\">\r\n          <label>Display Caller ID</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input matInput type=\"text\" name=\"displayLabel\" formControlName=\"displayLabel\"\r\n                   (input)=\"onChangeField('displayLabel')\">\r\n            <mat-error *ngIf=\"form.get('displayLabel')?.hasError('maxlength')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              This field can\u2019t have more than 30 characters\r\n            </mat-error>\r\n            <mat-error *ngIf=\"form.get('displayLabel')?.hasError('pattern')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              Invalid symbols are used\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Text Label</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input formControlName=\"textLabel\" name=\"textLabel\"\r\n                   matInput (input)=\"onChangeField('textLabel')\">\r\n            <mat-error *ngIf=\"form.get('textLabel')?.hasError('maxlength')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              This field can\u2019t have more than 30 characters\r\n            </mat-error>\r\n            <mat-error *ngIf=\"form.get('textLabel')?.hasError('pattern')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              Invalid symbols are used\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>External Phone Number Mask</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input matInput type=\"text\" name=\"e164Mask\" formControlName=\"e164Mask\"\r\n                   (input)=\"onChangeField('e164Mask')\">\r\n            <mat-error *ngIf=\"form.get('e164Mask')?.hasError('e164MaskRule')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              e164Mask does not match the rule {{getRule()}}\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n      </app-line-details-block>\r\n      <div class=\"form-group__separator_2px\"></div>\r\n      <app-line-details-block [title]=\"'Multiple Call/Call Waiting Settings'\">\r\n        <div class=\"form-group\">\r\n          <label>Max Calls</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input matInput type=\"number\" name=\"maxNumberOfCalls\" formControlName=\"maxNumberOfCalls\"\r\n                   (input)=\"onChangeField('maxNumberOfCalls')\">\r\n            <mat-error *ngIf=\"form.get('maxNumberOfCalls')?.hasError('max')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              Value is too big\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Busy Trigger</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input matInput type=\"number\" name=\"busyTrigger\" formControlName=\"busyTrigger\"\r\n                   (input)=\"onChangeField('busyTrigger')\">\r\n            <mat-error *ngIf=\"form.get('busyTrigger')?.hasError('max')\">\r\n              <i class=\"fa fa-exclamation-triangle\"></i>\r\n              Value can't be bigger than Max Calls\r\n            </mat-error>\r\n          </mat-form-field>\r\n        </div>\r\n      </app-line-details-block>\r\n      <div class=\"form-group__separator_2px\"></div>\r\n      <app-line-details-block [title]=\"'Call Recording'\">\r\n        <div class=\"form-group\">\r\n          <label>Recording Option</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              (selectionChange)=\"recordingOptionChanged('recordingOption')\"\r\n              formControlName=\"recordingOption\"\r\n              [id]=\"'associatedLineRecordingOptionField'\">\r\n              <mat-option [value]=recordingOptions.disabled>Call Recording Disabled</mat-option>\r\n              <mat-option [value]=recordingOptions.auto_enabled>Automatic Call Recording Enabled</mat-option>\r\n              <mat-option [value]=recordingOptions.selective_enabled>Selective Call Recording Enabled</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Recording Media Source</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              (selectionChange)=\"onChangeField('recordingMediaSource')\" formControlName=\"recordingMediaSource\"\r\n              [id]=\"'associatedLineRecordingMediaSourceField'\">\r\n              <mat-option *ngFor=\"let source of recordingMediaSources\" [value]=\"source\">{{source}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Recording Profile</label>\r\n          <app-lazy-loading-select\r\n            [siteId]=\"siteId\"\r\n            [controlName]=\"'recordingProfile'\"\r\n            [form]=\"form\"\r\n            (changeField)=\"onChangeField('recordingProfile')\"\r\n            [optionsToken]=\"'recordingProfile'\"></app-lazy-loading-select>\r\n        </div>\r\n      </app-line-details-block>\r\n      <div class=\"form-group__separator_2px\"></div>\r\n      <app-line-details-block [title]=\"'Additional line settings on the device'\">\r\n        <div class=\"form-group\">\r\n          <label>Visual Message Waiting Indicator Policy</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              formControlName=\"visualMWI\"\r\n              (selectionChange)=\"onChangeField('visualMWI')\">\r\n              <mat-option\r\n                *ngFor=\"let option of staticOptions.VISUAL_MWI\" [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Ring Setting (Phone Idle)</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              formControlName=\"ringSetting_idle\"\r\n              (selectionChange)=\"onChangeField('ringSetting_idle')\">\r\n              <mat-option *ngFor=\"let option of staticOptions.RING_SETTING_IDLE\" [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Call Pickup Audio Alert Setting (Phone Idle)</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select name=\"pickupAAS_idle\"\r\n              formControlName=\"pickupAAS_idle\"\r\n              (selectionChange)=\"onChangeField('pickupAAS_idle')\">\r\n              <mat-option *ngFor=\"let option of staticOptions.CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_IDLE\" [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Monitoring Calling Search Space</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <input\r\n              [matAutocomplete]=\"auto\"\r\n              matInput\r\n              (input)=\"onAutocomplete('monitorCSS')\"\r\n              formControlName=\"monitorCSS\">\r\n            <mat-autocomplete\r\n              #auto=\"matAutocomplete\"\r\n              (optionSelected)=\"onChangeField('monitorCSS')\">\r\n              <mat-option  *ngFor=\"let option of filteredMonitorCssList\" [value]=\"option\" >\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Audible Message Waiting Indicator Policy</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              formControlName=\"audibleMWI\"\r\n              (selectionChange)=\"onChangeField('audibleMWI')\">\r\n              <mat-option *ngFor=\"let option of staticOptions.DEFAULT_ON_OFF\" [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Ring Setting (Phone Active)</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              formControlName=\"ringSetting_active\"\r\n              (selectionChange)=\"onChangeField('ringSetting_active')\">\r\n              <mat-option *ngFor=\"let option of staticOptions.RING_SETTING_ACTIVE\" [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Call Pickup Audio Alert Setting (Phone Active)</label>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-select\r\n              formControlName=\"pickupAAS_active\"\r\n              (selectionChange)=\"onChangeField('pickupAAS_active')\">\r\n              <mat-option\r\n                *ngFor=\"let option of staticOptions.CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_ACTIVE\"\r\n                [value]=\"option\">\r\n                {{option}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Log Missed Calls</label>\r\n          <mat-slide-toggle name=\"logMissedCalls\" formControlName=\"logMissedCall\"></mat-slide-toggle>\r\n        </div>\r\n      </app-line-details-block>\r\n      <div class=\"form-group__separator_2px\"></div>\r\n      <app-line-details-block [title]=\"'Forwardred call information display'\">\r\n        <div class=\"form-group\">\r\n          <label>Caller Name</label>\r\n          <mat-slide-toggle name=\"callerName\" formControlName=\"callerName\" (change)=\"onChangeField('callerName')\"></mat-slide-toggle>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Redirected Number</label>\r\n          <mat-slide-toggle name=\"redirectedNumber\" formControlName=\"redirectedNumber\" (change)=\"onChangeField('redirectedNumber')\"></mat-slide-toggle>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Caller Number</label>\r\n          <mat-slide-toggle name=\"callerNumber\" formControlName=\"callerNumber\" (change)=\"onChangeField('callerNumber')\"></mat-slide-toggle>\r\n        </div>\r\n        <div class=\"form-group__separator\"></div>\r\n        <div class=\"form-group\">\r\n          <label>Dialed Number</label>\r\n          <mat-slide-toggle name=\"dialedNumber\" formControlName=\"dialedNumber\" (change)=\"onChangeField('dialedNumber')\"></mat-slide-toggle>\r\n        </div>\r\n      </app-line-details-block>\r\n  </ng-container>\r\n\r\n</div>\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-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}.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%}table{border-collapse:collapse;border-spacing:0}.line-row{background:#ececec;cursor:pointer;width:100%;padding:5px;box-sizing:border-box}.line-row.disabled-line-row{cursor:default;color:silver}.user-details-box__info{grid-template-columns:100%}.form-holder__blocks{margin-top:1rem}.user-box-block{padding:1rem 0;gap:4rem;display:flex}.user-box-block-item__title{margin-bottom:.5rem}.user-box-block-item__tag{font-size:14px;color:#6d6d6d}#device-associated-line{background-color:#fff;padding:1rem;position:relative;border-left:3px solid #737480}.form-group{display:flex;align-items:center}.form-group__separator,.form-group__separator_2px{width:100%;height:1px;background-color:#cccccc80;margin:1rem 0}.form-group__separator_2px{height:2px}.form-group label{width:200px;max-width:200px;font-size:14px;color:#666}.form-group input{width:300px}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#009dff!important}.mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#fff!important}.form-group .mat-form-field{max-width:300px}\n"] }]
+        }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }, { type: SiteSettingsService }, { type: LineService }, { type: DeviceService }, { type: i1$1.MatDialog }, { type: ValidationService }]; }, propDecorators: { lineIndex: [{
+                type: Input
+            }], deviceIndex: [{
+                type: Input
+            }], deviceName: [{
+                type: Input
+            }], siteId: [{
+                type: Input
+            }], updatedLineAssociationEvent: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }] } });
+
+class AssociatedLineRowComponent {
+    constructor() {
+        this.toggled = false;
+        this.toggleAssociatedLine = new EventEmitter();
+        this.removeAssociatedLine = new EventEmitter();
+    }
+    onToggleDetails() {
+        this.toggled = !this.toggled;
+        this.toggleAssociatedLine.emit(this.toggled ? this.line.displayLabel : '');
+    }
+    onLineRemove() {
+        this.removeAssociatedLine.emit();
+    }
+}
+AssociatedLineRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AssociatedLineRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AssociatedLineRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AssociatedLineRowComponent, selector: "app-associated-line-row", inputs: { line: "line", toggled: "toggled" }, outputs: { toggleAssociatedLine: "toggleAssociatedLine", removeAssociatedLine: "removeAssociatedLine" }, ngImport: i0, template: "<div class=\"line-item\">\r\n    <div class=\"line-informations\">\r\n        <div class=\"line-drag\">\r\n          <i class=\"app-icon icon-dragger-vertical\"></i>\r\n        </div>\r\n        <div class=\"line-label\">Button Position {{ line.position }}</div>\r\n        <div class=\"line-sep flex-box\">\r\n          <div class=\"app-icon icon-vertical-divider\"></div>\r\n          <div class=\"line-dn-box\">Line {{line.directoryNumber.directoryNumber}}</div>\r\n        </div>\r\n        <div class=\"line-name\">{{ line.displayLabel }}</div>\r\n    </div>\r\n    <div class=\"line-actions\">\r\n        <div class=\"line-delete\">\r\n          <i class=\"app-icon icon-delete\" (click)=\"onLineRemove()\"></i>\r\n        </div>\r\n        <div class=\"line-toggle-details\" (click)=\"onToggleDetails()\">\r\n          <i class=\"app-icon icon-arrow-right\"></i>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".line-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-radius:.5rem;border:1px solid #cfcfcf;padding:1rem;margin:1rem 0 0;z-index:10}.line-informations,.line-actions{display:inherit;align-items:inherit;gap:.5rem;padding:0 .5rem}.line-actions{cursor:pointer}.line-drag,.line-toggle-details,.line-delete{display:inherit;align-items:inherit;justify-content:center;font-size:1rem;color:#969696;width:36px;height:36px;border-radius:50%;transition:all .25s ease-out}.line-delete :hover{color:red!important}.line-drag{cursor:grab}.line-label{margin-right:2.5rem}.flex-box{display:flex;justify-content:flex-start}.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}.toggled{transform:rotate(-90deg)}.line-dn-box{line-height:20px}.icon-dragger-vertical{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%0D%3Cpath d%3D%22M13.125 5C12.7935 5 12.4755 4.8683 12.2411 4.63388C12.0067 4.39946 11.875 4.08152 11.875 3.75C11.875 3.41848 12.0067 3.10054 12.2411 2.86612C12.4755 2.6317 12.7935 2.5 13.125 2.5C13.4565 2.5 13.7745 2.6317 14.0089 2.86612C14.2433 3.10054 14.375 3.41848 14.375 3.75C14.375 4.08152 14.2433 4.39946 14.0089 4.63388C13.7745 4.8683 13.4565 5 13.125 5ZM6.875 5C6.54348 5 6.22554 4.8683 5.99112 4.63388C5.7567 4.39946 5.625 4.08152 5.625 3.75C5.625 3.41848 5.7567 3.10054 5.99112 2.86612C6.22554 2.6317 6.54348 2.5 6.875 2.5C7.20652 2.5 7.52446 2.6317 7.75888 2.86612C7.9933 3.10054 8.125 3.41848 8.125 3.75C8.125 4.08152 7.9933 4.39946 7.75888 4.63388C7.52446 4.8683 7.20652 5 6.875 5ZM13.125 11.25C12.7935 11.25 12.4755 11.1183 12.2411 10.8839C12.0067 10.6495 11.875 10.3315 11.875 10C11.875 9.66848 12.0067 9.35054 12.2411 9.11612C12.4755 8.8817 12.7935 8.75 13.125 8.75C13.4565 8.75 13.7745 8.8817 14.0089 9.11612C14.2433 9.35054 14.375 9.66848 14.375 10C14.375 10.3315 14.2433 10.6495 14.0089 10.8839C13.7745 11.1183 13.4565 11.25 13.125 11.25ZM6.875 11.25C6.54348 11.25 6.22554 11.1183 5.99112 10.8839C5.7567 10.6495 5.625 10.3315 5.625 10C5.625 9.66848 5.7567 9.35054 5.99112 9.11612C6.22554 8.8817 6.54348 8.75 6.875 8.75C7.20652 8.75 7.52446 8.8817 7.75888 9.11612C7.9933 9.35054 8.125 9.66848 8.125 10C8.125 10.3315 7.9933 10.6495 7.75888 10.8839C7.52446 11.1183 7.20652 11.25 6.875 11.25ZM13.125 17.5C12.7935 17.5 12.4755 17.3683 12.2411 17.1339C12.0067 16.8995 11.875 16.5815 11.875 16.25C11.875 15.9185 12.0067 15.6005 12.2411 15.3661C12.4755 15.1317 12.7935 15 13.125 15C13.4565 15 13.7745 15.1317 14.0089 15.3661C14.2433 15.6005 14.375 15.9185 14.375 16.25C14.375 16.5815 14.2433 16.8995 14.0089 17.1339C13.7745 17.3683 13.4565 17.5 13.125 17.5ZM6.875 17.5C6.54348 17.5 6.22554 17.3683 5.99112 17.1339C5.7567 16.8995 5.625 16.5815 5.625 16.25C5.625 15.9185 5.7567 15.6005 5.99112 15.3661C6.22554 15.1317 6.54348 15 6.875 15C7.20652 15 7.52446 15.1317 7.75888 15.3661C7.9933 15.6005 8.125 15.9185 8.125 16.25C8.125 16.5815 7.9933 16.8995 7.75888 17.1339C7.52446 17.3683 7.20652 17.5 6.875 17.5Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fsvg%3E%0D\");width:1px;margin:0 10px 0 0}.icon-delete{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%0D%3Cg id%3D%22Icon%2FDelete%22%3E%0D%3Cpath id%3D%22Remove all%22 d%3D%22M9.5835 1.96973C10.9439 1.96973 12.0528 3.09413 12.1036 4.50119L12.1054 4.60217H15.2853C15.588 4.60217 15.8335 4.85838 15.8335 5.17444C15.8335 5.47074 15.6178 5.71444 15.3413 5.74375L15.2853 5.7467H14.8067L14.0597 16.0795C13.9864 17.0944 13.176 17.8788 12.201 17.8788H6.966C5.99094 17.8788 5.18064 17.0944 5.10725 16.0795L4.35981 5.7467H3.88174C3.59788 5.7467 3.3644 5.52152 3.33633 5.23295L3.3335 5.17444C3.3335 4.87813 3.54923 4.63443 3.82569 4.60512L3.88174 4.60217H7.06157C7.06157 3.14831 8.19067 1.96973 9.5835 1.96973ZM13.7072 5.7467L5.45977 5.7467L6.20064 15.9934C6.23085 16.4113 6.56451 16.7343 6.966 16.7343H12.201C12.6025 16.7343 12.9361 16.4113 12.9664 15.9934L13.7072 5.7467ZM11.0089 8.15024C11.2928 8.15024 11.5263 8.37542 11.5543 8.66399L11.5572 8.72251V13.7585C11.5572 14.0745 11.3117 14.3307 11.0089 14.3307C10.7251 14.3307 10.4916 14.1056 10.4635 13.817L10.4607 13.7585L10.4607 8.72251C10.4607 8.40645 10.7061 8.15024 11.0089 8.15024ZM8.15806 8.15024C8.44192 8.15024 8.6754 8.37542 8.70347 8.66399L8.7063 8.72251L8.7063 13.7585C8.7063 14.0745 8.46084 14.3307 8.15806 14.3307C7.87419 14.3307 7.64072 14.1056 7.61264 13.817L7.60981 13.7585L7.60981 8.72251C7.60981 8.40645 7.85527 8.15024 8.15806 8.15024ZM9.5835 3.11427C8.82339 3.11427 8.20225 3.73527 8.16031 4.51773L8.15806 4.60217L11.0089 4.60217C11.0089 3.78042 10.3707 3.11427 9.5835 3.11427Z%22 fill%3D%22%23737480%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-arrow-right{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%0D%3Cg id%3D%22arrow-right%22%3E%0D%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%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-vertical-divider{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%221%22 height%3D%2218%22 viewBox%3D%220 0 1 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cline x1%3D%220.5%22 y1%3D%222.18557e-08%22 x2%3D%220.499999%22 y2%3D%2218%22 stroke%3D%22%23333333%22%2F%3E%0D%3C%2Fsvg%3E%0D\");height:20px}.line-item:hover{background-color:#d6d6d680}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AssociatedLineRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-associated-line-row", template: "<div class=\"line-item\">\r\n    <div class=\"line-informations\">\r\n        <div class=\"line-drag\">\r\n          <i class=\"app-icon icon-dragger-vertical\"></i>\r\n        </div>\r\n        <div class=\"line-label\">Button Position {{ line.position }}</div>\r\n        <div class=\"line-sep flex-box\">\r\n          <div class=\"app-icon icon-vertical-divider\"></div>\r\n          <div class=\"line-dn-box\">Line {{line.directoryNumber.directoryNumber}}</div>\r\n        </div>\r\n        <div class=\"line-name\">{{ line.displayLabel }}</div>\r\n    </div>\r\n    <div class=\"line-actions\">\r\n        <div class=\"line-delete\">\r\n          <i class=\"app-icon icon-delete\" (click)=\"onLineRemove()\"></i>\r\n        </div>\r\n        <div class=\"line-toggle-details\" (click)=\"onToggleDetails()\">\r\n          <i class=\"app-icon icon-arrow-right\"></i>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".line-item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-radius:.5rem;border:1px solid #cfcfcf;padding:1rem;margin:1rem 0 0;z-index:10}.line-informations,.line-actions{display:inherit;align-items:inherit;gap:.5rem;padding:0 .5rem}.line-actions{cursor:pointer}.line-drag,.line-toggle-details,.line-delete{display:inherit;align-items:inherit;justify-content:center;font-size:1rem;color:#969696;width:36px;height:36px;border-radius:50%;transition:all .25s ease-out}.line-delete :hover{color:red!important}.line-drag{cursor:grab}.line-label{margin-right:2.5rem}.flex-box{display:flex;justify-content:flex-start}.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}.toggled{transform:rotate(-90deg)}.line-dn-box{line-height:20px}.icon-dragger-vertical{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%0D%3Cpath d%3D%22M13.125 5C12.7935 5 12.4755 4.8683 12.2411 4.63388C12.0067 4.39946 11.875 4.08152 11.875 3.75C11.875 3.41848 12.0067 3.10054 12.2411 2.86612C12.4755 2.6317 12.7935 2.5 13.125 2.5C13.4565 2.5 13.7745 2.6317 14.0089 2.86612C14.2433 3.10054 14.375 3.41848 14.375 3.75C14.375 4.08152 14.2433 4.39946 14.0089 4.63388C13.7745 4.8683 13.4565 5 13.125 5ZM6.875 5C6.54348 5 6.22554 4.8683 5.99112 4.63388C5.7567 4.39946 5.625 4.08152 5.625 3.75C5.625 3.41848 5.7567 3.10054 5.99112 2.86612C6.22554 2.6317 6.54348 2.5 6.875 2.5C7.20652 2.5 7.52446 2.6317 7.75888 2.86612C7.9933 3.10054 8.125 3.41848 8.125 3.75C8.125 4.08152 7.9933 4.39946 7.75888 4.63388C7.52446 4.8683 7.20652 5 6.875 5ZM13.125 11.25C12.7935 11.25 12.4755 11.1183 12.2411 10.8839C12.0067 10.6495 11.875 10.3315 11.875 10C11.875 9.66848 12.0067 9.35054 12.2411 9.11612C12.4755 8.8817 12.7935 8.75 13.125 8.75C13.4565 8.75 13.7745 8.8817 14.0089 9.11612C14.2433 9.35054 14.375 9.66848 14.375 10C14.375 10.3315 14.2433 10.6495 14.0089 10.8839C13.7745 11.1183 13.4565 11.25 13.125 11.25ZM6.875 11.25C6.54348 11.25 6.22554 11.1183 5.99112 10.8839C5.7567 10.6495 5.625 10.3315 5.625 10C5.625 9.66848 5.7567 9.35054 5.99112 9.11612C6.22554 8.8817 6.54348 8.75 6.875 8.75C7.20652 8.75 7.52446 8.8817 7.75888 9.11612C7.9933 9.35054 8.125 9.66848 8.125 10C8.125 10.3315 7.9933 10.6495 7.75888 10.8839C7.52446 11.1183 7.20652 11.25 6.875 11.25ZM13.125 17.5C12.7935 17.5 12.4755 17.3683 12.2411 17.1339C12.0067 16.8995 11.875 16.5815 11.875 16.25C11.875 15.9185 12.0067 15.6005 12.2411 15.3661C12.4755 15.1317 12.7935 15 13.125 15C13.4565 15 13.7745 15.1317 14.0089 15.3661C14.2433 15.6005 14.375 15.9185 14.375 16.25C14.375 16.5815 14.2433 16.8995 14.0089 17.1339C13.7745 17.3683 13.4565 17.5 13.125 17.5ZM6.875 17.5C6.54348 17.5 6.22554 17.3683 5.99112 17.1339C5.7567 16.8995 5.625 16.5815 5.625 16.25C5.625 15.9185 5.7567 15.6005 5.99112 15.3661C6.22554 15.1317 6.54348 15 6.875 15C7.20652 15 7.52446 15.1317 7.75888 15.3661C7.9933 15.6005 8.125 15.9185 8.125 16.25C8.125 16.5815 7.9933 16.8995 7.75888 17.1339C7.52446 17.3683 7.20652 17.5 6.875 17.5Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fsvg%3E%0D\");width:1px;margin:0 10px 0 0}.icon-delete{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%0D%3Cg id%3D%22Icon%2FDelete%22%3E%0D%3Cpath id%3D%22Remove all%22 d%3D%22M9.5835 1.96973C10.9439 1.96973 12.0528 3.09413 12.1036 4.50119L12.1054 4.60217H15.2853C15.588 4.60217 15.8335 4.85838 15.8335 5.17444C15.8335 5.47074 15.6178 5.71444 15.3413 5.74375L15.2853 5.7467H14.8067L14.0597 16.0795C13.9864 17.0944 13.176 17.8788 12.201 17.8788H6.966C5.99094 17.8788 5.18064 17.0944 5.10725 16.0795L4.35981 5.7467H3.88174C3.59788 5.7467 3.3644 5.52152 3.33633 5.23295L3.3335 5.17444C3.3335 4.87813 3.54923 4.63443 3.82569 4.60512L3.88174 4.60217H7.06157C7.06157 3.14831 8.19067 1.96973 9.5835 1.96973ZM13.7072 5.7467L5.45977 5.7467L6.20064 15.9934C6.23085 16.4113 6.56451 16.7343 6.966 16.7343H12.201C12.6025 16.7343 12.9361 16.4113 12.9664 15.9934L13.7072 5.7467ZM11.0089 8.15024C11.2928 8.15024 11.5263 8.37542 11.5543 8.66399L11.5572 8.72251V13.7585C11.5572 14.0745 11.3117 14.3307 11.0089 14.3307C10.7251 14.3307 10.4916 14.1056 10.4635 13.817L10.4607 13.7585L10.4607 8.72251C10.4607 8.40645 10.7061 8.15024 11.0089 8.15024ZM8.15806 8.15024C8.44192 8.15024 8.6754 8.37542 8.70347 8.66399L8.7063 8.72251L8.7063 13.7585C8.7063 14.0745 8.46084 14.3307 8.15806 14.3307C7.87419 14.3307 7.64072 14.1056 7.61264 13.817L7.60981 13.7585L7.60981 8.72251C7.60981 8.40645 7.85527 8.15024 8.15806 8.15024ZM9.5835 3.11427C8.82339 3.11427 8.20225 3.73527 8.16031 4.51773L8.15806 4.60217L11.0089 4.60217C11.0089 3.78042 10.3707 3.11427 9.5835 3.11427Z%22 fill%3D%22%23737480%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-arrow-right{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%0D%3Cg id%3D%22arrow-right%22%3E%0D%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%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-vertical-divider{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%221%22 height%3D%2218%22 viewBox%3D%220 0 1 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cline x1%3D%220.5%22 y1%3D%222.18557e-08%22 x2%3D%220.499999%22 y2%3D%2218%22 stroke%3D%22%23333333%22%2F%3E%0D%3C%2Fsvg%3E%0D\");height:20px}.line-item:hover{background-color:#d6d6d680}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { line: [{
+                type: Input
+            }], toggled: [{
+                type: Input
+            }], toggleAssociatedLine: [{
+                type: Output
+            }], removeAssociatedLine: [{
+                type: Output
+            }] } });
+
+class DeviceManageWidgetComponent {
+    get form() {
+        var _a;
+        return (_a = this.device) === null || _a === void 0 ? void 0 : _a.form;
+    }
+    get lineAssociations() {
+        var _a;
+        return (_a = this.device) === null || _a === void 0 ? void 0 : _a.lineAssociations;
+    }
+    get device() {
+        // @ts-ignore
+        return this.deviceIndex !== undefined && this.deviceIndex > -1 ? this.userService.user.devices[this.deviceIndex] : null;
+    }
+    get originDevice() {
+        var _a;
+        // @ts-ignore
+        return this.deviceIndex !== undefined && this.deviceIndex > -1 ? (_a = this.userService) === null || _a === void 0 ? void 0 : _a.originUser.devices[this.deviceIndex] : null;
+    }
+    get userToken() {
+        var _a;
+        return (_a = this.userService.user) === null || _a === void 0 ? void 0 : _a.token;
+    }
+    get user() {
+        return this.userService.user;
+    }
+    get hasDeviceUnsavedChanges() {
+        return this.deviceService.hasUnsavedChanges(this.device, this.originDevice);
+    }
+    constructor(userService, deviceService, apiService, lineService, siteSettingsService, validationService, dialog) {
+        this.userService = userService;
+        this.deviceService = deviceService;
+        this.apiService = apiService;
+        this.lineService = lineService;
+        this.siteSettingsService = siteSettingsService;
+        this.validationService = validationService;
+        this.dialog = dialog;
+        this.onSave = new EventEmitter();
+        this.onChange = new EventEmitter();
+        this.discardChanges = new EventEmitter();
+        this.goBack = new EventEmitter();
+        this.tabIndex = 0;
+        this.tabInit = false;
+    }
+    ngOnInit() {
+        this.apiService.token = this.token;
+        this.apiService.apiUrl = this.host;
+        console.log('this.apiService.apiUrl = ', this.apiService.apiUrl);
+        // this.setData(true);
+        this.getData();
+        this.userService.onFetchUserToken$
+            .subscribe(() => {
+            this.setData();
+        });
+    }
+    ngAfterViewInit() {
+        console.log('TABS = ', this.tabs);
+        if (this.tabs && !this.tabInit) {
+            const handleTabClick = this.tabs._handleClick;
+            this.tabInit = true;
+            // 2. Replace the click handler with our custom function
+            this.tabs._handleClick = (tab, header, index) => {
+                // 3. Implement your conditional logic in canDeactivateTab()
+                // (return the boolean here)
+                if (this.hasDeviceUnsavedChanges) {
+                    this.openUnsavedChangesDialog(TOGGLE_TYPES.TABS, { handleTabClick, tab, header, index });
+                    // 4. If the tab *should* be changed, call the 'old' click handler
+                    // handleTabClick.apply(this.tabs, [tab, header, index]);
+                }
+                else {
+                    handleTabClick.apply(this.tabs, [tab, header, index]);
+                    this.tabIndex = index;
+                }
+            };
+        }
+    }
+    ngOnDestroy() {
+    }
+    onGoBack() {
+        this.goBack.emit();
+    }
+    toggleAssociatedLine(lineIndex, lineAssociation) {
+        if (!this.lineService.currentActiveLinePkid) {
+            lineAssociation.active = true;
+            this.lineService.currentActiveLinePkid = lineAssociation.linePkid;
+            return;
+        }
+        if (!lineAssociation.hasChanges && lineAssociation.active) {
+            lineAssociation.active = false;
+            this.lineService.currentActiveLinePkid = null;
+            return;
+        }
+        if (this.device.lineAssociationsHasChanges) {
+            this.openUnsavedChangesDialog(TOGGLE_TYPES.ASSOCIATED_LINE_ONLY);
+        }
+        else {
+            this.setLineActive(lineIndex);
+        }
+    }
+    openUnsavedChangesDialog(toggleType, handleTabClick) {
+        const dialogRef = this.dialog.open(InfoDialogComponent, {
+            data: {
+                title: 'Discard unsaved edits?',
+                message: 'You\'re about to leave this page and discard all unsaved app edits',
+                confirmButtonText: 'Discard'
+            }
+        });
+        dialogRef.beforeClosed().subscribe(result => {
+            if (result) {
+                switch (toggleType) {
+                    case TOGGLE_TYPES.TABS:
+                        this.resetByTabToggle(handleTabClick);
+                        break;
+                    case TOGGLE_TYPES.ASSOCIATED_LINE_ONLY:
+                        this.resetLine(handleTabClick);
+                        break;
+                }
+                this.tabIndex = handleTabClick.index;
+            }
+        });
+    }
+    resetByTabToggle(handleTabClick) {
+        switch (this.tabIndex) {
+            case 0:
+                this.userService.resetDevice(this.device, this.validationService);
+                break;
+            case 1:
+                this.resetLine();
+                break;
+        }
+        this.discardChanges.emit();
+        if (handleTabClick) {
+            handleTabClick.handleTabClick.apply(this.tabs, [handleTabClick.tab, handleTabClick.header, handleTabClick.index]);
+        }
+    }
+    resetLine(lineIndex, handleTabClick) {
+        const lineIndToReset = this.lineAssociations.findIndex((line) => line.active && line.hasChanges);
+        if (lineIndToReset > -1) {
+            this.resetAssociatedLine(lineIndToReset);
+        }
+        if (lineIndex !== undefined && lineIndex > -1) {
+            this.setLineActive(lineIndex);
+        }
+        this.discardChanges.emit();
+        if (handleTabClick) {
+            handleTabClick.handleTabClick.apply(this.tabs, [handleTabClick.tab, handleTabClick.header, handleTabClick.index]);
+        }
+    }
+    onRemoveLine(lineIndex) {
+        var _a;
+        if (!this.lineAssociations || !this.lineAssociations[lineIndex]) {
+            return;
+        }
+        const dialogRef = this.dialog.open(InfoDialogComponent, {
+            data: {
+                title: 'Remove device associated line?',
+                message: `You\'re sure that you want to delete ${(_a = this.lineAssociations[lineIndex].directoryNumber) === null || _a === void 0 ? void 0 : _a.directoryNumber} associated line`,
+                confirmButtonText: 'Delete Line'
+            }
+        });
+        dialogRef.beforeClosed().subscribe(result => {
+            if (result) {
+                this.dataPending = true;
+                this.deleteLine(this.lineAssociations[lineIndex]);
+            }
+        });
+    }
+    resetAssociatedLine(lineIndex) {
+        var _a, _b, _c;
+        if ((_b = (_a = this.userService.user) === null || _a === void 0 ? void 0 : _a.devices) === null || _b === void 0 ? void 0 : _b.length) {
+            const deviceInd = (_c = this.userService.user) === null || _c === void 0 ? void 0 : _c.devices.findIndex((device) => device.name === this.device.name);
+            if (deviceInd > -1) {
+                this.userService.resetLineAssociation(deviceInd, lineIndex, this.validationService);
+                this.userService.user.devices[this.deviceIndex].lineAssociationsHasChanges = false;
+            }
+        }
+    }
+    setLineActive(index) {
+        var _a;
+        if ((_a = this.lineAssociations) === null || _a === void 0 ? void 0 : _a.length) {
+            this.device.lineAssociations.forEach(line => line.active = false);
+        }
+        if (this.lineAssociations[index]) {
+            this.lineService.currentActiveLinePkid = this.device.lineAssociations[index].linePkid;
+            this.device.lineAssociations[index].active = true;
+        }
+    }
+    onDeviceSave() {
+        var _a;
+        switch (this.tabIndex) {
+            case DeviceViewType.INFO:
+                this.updateDevice(this.siteId, (_a = this.device) === null || _a === void 0 ? void 0 : _a.name, this.userToken);
+                break;
+            case DeviceViewType.LINES:
+                this.onUpdateLine();
+                break;
+        }
+    }
+    save() {
+        this.onDeviceSave();
+    }
+    onUpdateDevice() {
+        var _a;
+        this.updateDevice(this.siteId, (_a = this.device) === null || _a === void 0 ? void 0 : _a.name, this.userToken);
+    }
+    onUpdateLine() {
+        this.lineService.onSaveLineAssociationEvent.next(true);
+    }
+    afterLineUpdate() {
+        this.onSave.emit('associated line is updated');
+    }
+    updateDevice(siteId, deviceName, token) {
+        if (this.deviceService.hasUnsavedChanges(this.device, this.originDevice) && !this.dataPending) {
+            this.dataPending = true;
+            const calls = [];
+            if (this.deviceService.hasDeviceInfoUnsavedChanges(this.device, this.originDevice)) {
+                const body = this.deviceService.getDataToUpdateDevice(this.device, this.originDevice);
+                calls.push(this.deviceService.putDeviceFields(siteId, deviceName, token, body));
+            }
+            if (calls === null || calls === void 0 ? void 0 : calls.length) {
+                forkJoin(calls).subscribe((results) => {
+                    this.userService.persistUserCache()
+                        .subscribe(() => {
+                        this.userService.fetchUserToken(this.siteId, this.userService.user.userid, this.validationService)
+                            .subscribe(() => {
+                            this.dataPending = false;
+                            this.onSave.emit('device updated');
+                        }, () => this.dataPending = false);
+                    });
+                }, () => this.dataPending = false);
+            }
+        }
+    }
+    onChangeField(token) {
+        var _a, _b;
+        if (!token) {
+            return;
+        }
+        if (this.device) {
+            this.userService.user.devices[this.deviceIndex][token] = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get(token)) === null || _b === void 0 ? void 0 : _b.value;
+            this.onChange.emit();
+        }
+    }
+    getData() {
+        this.dataPending = true;
+        forkJoin([
+            this.userService.fetchUserToken(this.siteId, this.userId, this.validationService),
+            this.siteSettingsService.getDeviceSoftkeyTemplates(this.siteId),
+            this.siteSettingsService.getSiteDefaults(this.siteId)
+        ]).subscribe(() => {
+            var _a, _b, _c;
+            console.log('device widget user', this.user);
+            if (((_a = this.originDevice) === null || _a === void 0 ? void 0 : _a.callingSearchSpaceName) && ((_c = (_b = this.siteSettingsService) === null || _b === void 0 ? void 0 : _b.siteDefaults) === null || _c === void 0 ? void 0 : _c.cssFilter)) {
+                this.siteSettingsService.siteDefaults.cssFilter.push(this.originDevice.callingSearchSpaceName);
+            }
+            this.setData();
+            this.ngAfterViewInit();
+            this.dataPending = false;
+        }, () => 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=/";
+    }
+    setData(isInit) {
+        var _a, _b;
+        /*if (isInit) {
+          this.userService.user = new SimplifiedUser(JSON.parse(JSON.stringify(this.user.getFullData())), this.validationService);
+          this.userService.originUser = new SimplifiedUser(JSON.parse(JSON.stringify(this.user.getFullData())), this.validationService);
+        }*/
+        if (this.deviceName && ((_b = (_a = this.userService.user) === null || _a === void 0 ? void 0 : _a.devices) === null || _b === void 0 ? void 0 : _b.length)) {
+            this.deviceIndex = this.userService.user.devices.findIndex((device) => device.name === this.deviceName);
+        }
+    }
+    deleteLine(line) {
+        this.lineService.deleteLine(this.siteId, line.linePkid, this.userService.user.token)
+            .subscribe(() => {
+            this.userService.persistUserCache()
+                .subscribe(() => {
+                this.userService.fetchUserToken(this.siteId, this.userService.user.userid, this.validationService)
+                    .subscribe(() => {
+                    // this.updatedLineAssociationEvent.emit();
+                    this.dataPending = false;
+                });
+            });
+        });
+    }
+}
+DeviceManageWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceManageWidgetComponent, deps: [{ token: UserService }, { token: DeviceService }, { token: APIService }, { token: LineService }, { token: SiteSettingsService }, { token: ValidationService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+DeviceManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceManageWidgetComponent, selector: "app-device-manage-widget", inputs: { token: "token", host: "host", siteId: "siteId", userId: "userId", isLdap: "isLdap", deviceName: "deviceName" }, outputs: { onSave: "onSave", onChange: "onChange", discardChanges: "discardChanges", goBack: "goBack" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true }], ngImport: i0, template: "<app-loader *ngIf=\"dataPending || deviceService.dataPending\"></app-loader>\r\n<div id=\"device-manage-widget\">\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\">User Devices</span>\r\n    </div>\r\n  </div>\r\n  <mat-tab-group #tabs animationDuration=\"0\"  mat-align-tabs=\"start\"\r\n                 class=\"content-box\">\r\n    <mat-tab label=\"Device\">\r\n      <div *ngIf=\"user\">\r\n        <ng-container *ngTemplateOutlet=\"editDevice\">\r\n        </ng-container>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Associated Lines\">\r\n      <ng-container *ngIf=\"user\">\r\n        <div *ngFor=\"let lineAssociation of lineAssociations, let i = index\">\r\n          <app-associated-line-row\r\n            [line]=\"lineAssociation\"\r\n            (removeAssociatedLine)=\"onRemoveLine(i)\"\r\n            (toggleAssociatedLine)=\"toggleAssociatedLine(i, lineAssociation)\"></app-associated-line-row>\r\n          <app-device-associated-line *ngIf=\"lineAssociation.active\"\r\n                                      [deviceIndex]=\"deviceIndex\"\r\n                                      [deviceName]=\"deviceName\"\r\n                                      [siteId]=\"siteId\"\r\n                                      (onChange)=\"onChange.emit()\"\r\n                                      (updatedLineAssociationEvent)=\"afterLineUpdate()\"\r\n                                      [lineIndex]=\"i\"></app-device-associated-line>\r\n        </div>\r\n      </ng-container>\r\n    </mat-tab>\r\n    <mat-tab ></mat-tab>\r\n    <mat-tab ></mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <ng-template #editDevice>\r\n    <form *ngIf=\"device && form\" [formGroup]=\"form\">\r\n      <div class=\"info-boxes-container\">\r\n        <div class=\"user-info-box user-details-box__info\">\r\n          <h3 class=\"user-box-title\">Details</h3>\r\n          <div class=\"form-holder__blocks\">\r\n            <div class=\"user-box-block\">\r\n              <div class=\"user-box-block-item\">\r\n                <div class=\"user-box-block-item__title\">{{user.firstName}} {{user.lastName}}</div>\r\n                <div class=\"user-box-block-item__tag\">Name</div>\r\n              </div>\r\n              <div class=\"user-box-block-item\">\r\n                <div class=\"user-box-block-item__title\">Cisco dual mode for andorid</div>\r\n                <div class=\"user-box-block-item__tag\">Type</div>\r\n              </div>\r\n              <div class=\"user-box-block-item\">\r\n                <div class=\"user-box-block-item__title\">David Alexander 1545545154554</div>\r\n                <div class=\"user-box-block-item__tag\">Device Description</div>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"user-box-block\">\r\n              <div class=\"user-box-block-item\">\r\n                <div class=\"user-box-block-item__title\">1545415455545 | 5545544485454 | 998989454</div>\r\n                <div class=\"user-box-block-item__tag\">Line</div>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"user-box-block\">\r\n              <div class=\"user-box-block-item\">\r\n                <div class=\"user-box-block-item__title\">PLAR Service</div>\r\n                <mat-slide-toggle name=\"plarService\" formControlName=\"plarService\"></mat-slide-toggle>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!--    DEVICE INFO BOX-->\r\n        <div class=\"user-info-box user-details-box\">\r\n          <h3 class=\"user-box-title\">Device Info</h3>\r\n          <div class=\"form-holder__inputs\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Registration Status</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.registrationStatus}}</span>\r\n                <!--<mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"registrationStatus\"\r\n                         matInput (input)=\"onChangeField('registrationStatus')\">\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\">IP Address</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.ipAddress}}</span>\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\">Description</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"description\"\r\n                         matInput (input)=\"onChangeField('description')\">\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\">Protocol</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.protocol}}</span>\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\">Softkey Template</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-select formControlName=\"softkeyTemplate\"\r\n                              (selectionChange)=\"onChangeField('softkeyTemplate')\">\r\n                    <mat-option *ngFor=\"let type of siteSettingsService.deviceSoftkeyTemplates\" [value]=\"type\">\r\n                      {{type}}\r\n                    </mat-option>\r\n                  </mat-select>\r\n                  <mat-error\r\n                    *ngIf=\"form.get('softkeyTemplate')?.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 class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Button Template</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.buttonTemplate}}</span>\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\">Location</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.location}}</span>\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\">Device Pool</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-select formControlName=\"devicePoolName\"\r\n                              (selectionChange)=\"onChangeField('devicePoolName')\">\r\n                    <mat-option *ngFor=\"let type of siteSettingsService.devicePools\" [value]=\"type\">\r\n                      {{type}}\r\n                    </mat-option>\r\n                  </mat-select>\r\n                  <mat-error\r\n                    *ngIf=\"form.get('devicePoolName')?.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 class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Device CSS</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-select formControlName=\"callingSearchSpaceName\"\r\n                              (selectionChange)=\"onChangeField('callingSearchSpaceName')\">\r\n                    <mat-option *ngFor=\"let type of siteSettingsService.callingSearchSpaceTypes\" [value]=\"type\">\r\n                      {{type}}\r\n                    </mat-option>\r\n                  </mat-select>\r\n                  <mat-error\r\n                    *ngIf=\"form.get('callingSearchSpaceName')?.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 class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Firmware version</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.firmwareVersion}}</span>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n\r\n      </div>\r\n\r\n    </form>\r\n  </ng-template>\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\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}.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%}table{border-collapse:collapse;border-spacing:0}.line-row{background:#ececec;cursor:pointer;width:100%;padding:5px;box-sizing:border-box}.line-row.disabled-line-row{cursor:default;color:silver}.user-details-box__info{grid-template-columns:100%}.form-holder__blocks{margin-top:1rem}.user-box-block{padding:1rem 0;gap:4rem;display:flex}.user-box-block-item__title{margin-bottom:.5rem}.user-box-block-item__tag{font-size:14px;color:#6d6d6d}.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%0D%3Cg id%3D%22arrow-right%22%3E%0D%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%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.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%0D%3Cg id%3D%22arrow-left%22%3E%0D%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%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;margin:0 0 30px;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: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.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: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i14.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { 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: DeviceAssociatedLineComponent, selector: "app-device-associated-line", inputs: ["lineIndex", "deviceIndex", "deviceName", "siteId"], outputs: ["updatedLineAssociationEvent", "onChange"] }, { kind: "component", type: AssociatedLineRowComponent, selector: "app-associated-line-row", inputs: ["line", "toggled"], outputs: ["toggleAssociatedLine", "removeAssociatedLine"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceManageWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-device-manage-widget', template: "<app-loader *ngIf=\"dataPending || deviceService.dataPending\"></app-loader>\r\n<div id=\"device-manage-widget\">\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\">User Devices</span>\r\n    </div>\r\n  </div>\r\n  <mat-tab-group #tabs animationDuration=\"0\"  mat-align-tabs=\"start\"\r\n                 class=\"content-box\">\r\n    <mat-tab label=\"Device\">\r\n      <div *ngIf=\"user\">\r\n        <ng-container *ngTemplateOutlet=\"editDevice\">\r\n        </ng-container>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Associated Lines\">\r\n      <ng-container *ngIf=\"user\">\r\n        <div *ngFor=\"let lineAssociation of lineAssociations, let i = index\">\r\n          <app-associated-line-row\r\n            [line]=\"lineAssociation\"\r\n            (removeAssociatedLine)=\"onRemoveLine(i)\"\r\n            (toggleAssociatedLine)=\"toggleAssociatedLine(i, lineAssociation)\"></app-associated-line-row>\r\n          <app-device-associated-line *ngIf=\"lineAssociation.active\"\r\n                                      [deviceIndex]=\"deviceIndex\"\r\n                                      [deviceName]=\"deviceName\"\r\n                                      [siteId]=\"siteId\"\r\n                                      (onChange)=\"onChange.emit()\"\r\n                                      (updatedLineAssociationEvent)=\"afterLineUpdate()\"\r\n                                      [lineIndex]=\"i\"></app-device-associated-line>\r\n        </div>\r\n      </ng-container>\r\n    </mat-tab>\r\n    <mat-tab ></mat-tab>\r\n    <mat-tab ></mat-tab>\r\n  </mat-tab-group>\r\n\r\n  <ng-template #editDevice>\r\n    <form *ngIf=\"device && form\" [formGroup]=\"form\">\r\n      <div class=\"info-boxes-container\">\r\n        <div class=\"user-info-box user-details-box__info\">\r\n          <h3 class=\"user-box-title\">Details</h3>\r\n          <div class=\"form-holder__blocks\">\r\n            <div class=\"user-box-block\">\r\n              <div class=\"user-box-block-item\">\r\n                <div class=\"user-box-block-item__title\">{{user.firstName}} {{user.lastName}}</div>\r\n                <div class=\"user-box-block-item__tag\">Name</div>\r\n              </div>\r\n              <div class=\"user-box-block-item\">\r\n                <div class=\"user-box-block-item__title\">Cisco dual mode for andorid</div>\r\n                <div class=\"user-box-block-item__tag\">Type</div>\r\n              </div>\r\n              <div class=\"user-box-block-item\">\r\n                <div class=\"user-box-block-item__title\">David Alexander 1545545154554</div>\r\n                <div class=\"user-box-block-item__tag\">Device Description</div>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"user-box-block\">\r\n              <div class=\"user-box-block-item\">\r\n                <div class=\"user-box-block-item__title\">1545415455545 | 5545544485454 | 998989454</div>\r\n                <div class=\"user-box-block-item__tag\">Line</div>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            <div class=\"user-box-block\">\r\n              <div class=\"user-box-block-item\">\r\n                <div class=\"user-box-block-item__title\">PLAR Service</div>\r\n                <mat-slide-toggle name=\"plarService\" formControlName=\"plarService\"></mat-slide-toggle>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!--    DEVICE INFO BOX-->\r\n        <div class=\"user-info-box user-details-box\">\r\n          <h3 class=\"user-box-title\">Device Info</h3>\r\n          <div class=\"form-holder__inputs\">\r\n            <div class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Registration Status</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.registrationStatus}}</span>\r\n                <!--<mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"registrationStatus\"\r\n                         matInput (input)=\"onChangeField('registrationStatus')\">\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\">IP Address</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.ipAddress}}</span>\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\">Description</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <input formControlName=\"description\"\r\n                         matInput (input)=\"onChangeField('description')\">\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\">Protocol</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.protocol}}</span>\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\">Softkey Template</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-select formControlName=\"softkeyTemplate\"\r\n                              (selectionChange)=\"onChangeField('softkeyTemplate')\">\r\n                    <mat-option *ngFor=\"let type of siteSettingsService.deviceSoftkeyTemplates\" [value]=\"type\">\r\n                      {{type}}\r\n                    </mat-option>\r\n                  </mat-select>\r\n                  <mat-error\r\n                    *ngIf=\"form.get('softkeyTemplate')?.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 class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Button Template</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.buttonTemplate}}</span>\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\">Location</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.location}}</span>\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\">Device Pool</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-select formControlName=\"devicePoolName\"\r\n                              (selectionChange)=\"onChangeField('devicePoolName')\">\r\n                    <mat-option *ngFor=\"let type of siteSettingsService.devicePools\" [value]=\"type\">\r\n                      {{type}}\r\n                    </mat-option>\r\n                  </mat-select>\r\n                  <mat-error\r\n                    *ngIf=\"form.get('devicePoolName')?.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 class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Device CSS</div>\r\n              <div class=\"input-holder__input\">\r\n                <mat-form-field appearance=\"outline\">\r\n                  <mat-select formControlName=\"callingSearchSpaceName\"\r\n                              (selectionChange)=\"onChangeField('callingSearchSpaceName')\">\r\n                    <mat-option *ngFor=\"let type of siteSettingsService.callingSearchSpaceTypes\" [value]=\"type\">\r\n                      {{type}}\r\n                    </mat-option>\r\n                  </mat-select>\r\n                  <mat-error\r\n                    *ngIf=\"form.get('callingSearchSpaceName')?.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 class=\"input-holder\">\r\n              <div class=\"input-holder__name\">Firmware version</div>\r\n              <div class=\"input-holder__input\">\r\n                <span class=\"disabled-data-block\">{{device.firmwareVersion}}</span>\r\n              </div>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n\r\n      </div>\r\n\r\n    </form>\r\n  </ng-template>\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\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}.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%}table{border-collapse:collapse;border-spacing:0}.line-row{background:#ececec;cursor:pointer;width:100%;padding:5px;box-sizing:border-box}.line-row.disabled-line-row{cursor:default;color:silver}.user-details-box__info{grid-template-columns:100%}.form-holder__blocks{margin-top:1rem}.user-box-block{padding:1rem 0;gap:4rem;display:flex}.user-box-block-item__title{margin-bottom:.5rem}.user-box-block-item__tag{font-size:14px;color:#6d6d6d}.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%0D%3Cg id%3D%22arrow-right%22%3E%0D%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%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.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%0D%3Cg id%3D%22arrow-left%22%3E%0D%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%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;margin:0 0 30px;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: DeviceService }, { type: APIService }, { type: LineService }, { type: SiteSettingsService }, { type: ValidationService }, { type: i1$1.MatDialog }]; }, propDecorators: { tabs: [{
+                type: ViewChild,
+                args: ["tabs", { static: false }]
+            }], onSave: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }], discardChanges: [{
+                type: Output
+            }], goBack: [{
+                type: Output
+            }], token: [{
+                type: Input
+            }], host: [{
+                type: Input
+            }], siteId: [{
+                type: Input
+            }], userId: [{
+                type: Input
+            }], isLdap: [{
+                type: Input
+            }], deviceName: [{
+                type: Input
+            }] } });
+
+class DeviceAssociatedLineExtensionComponent {
+    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;
+        });
+    }
+}
+DeviceAssociatedLineExtensionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceAssociatedLineExtensionComponent, deps: [{ token: UserService }, { token: DnsService }], target: i0.ɵɵFactoryTarget.Component });
+DeviceAssociatedLineExtensionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DeviceAssociatedLineExtensionComponent, selector: "app-device-associated-line-extension", inputs: { formControl: "formControl", routePartition: "routePartition", directoryNumber: "directoryNumber", siteId: "siteId" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div *ngIf=\"this.availableNumbers?.length\" class=\"user-calling-extension\">\r\n  <mat-select [formControl]=\"formControl\" (selectionChange)=\"this.onChangeField($event)\" #page>\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-spinner *ngIf=\"this.dataPending\" [diameter]=\"50\"></mat-spinner>\r\n</div>\r\n", styles: ["table{border-collapse:collapse;border-spacing:0}\n"], dependencies: [{ kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.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: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DeviceAssociatedLineExtensionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-device-associated-line-extension', template: "<div *ngIf=\"this.availableNumbers?.length\" class=\"user-calling-extension\">\r\n  <mat-select [formControl]=\"formControl\" (selectionChange)=\"this.onChangeField($event)\" #page>\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-spinner *ngIf=\"this.dataPending\" [diameter]=\"50\"></mat-spinner>\r\n</div>\r\n", styles: ["table{border-collapse:collapse;border-spacing:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: UserService }, { type: DnsService }]; }, propDecorators: { formControl: [{
+                type: Input
+            }], routePartition: [{
+                type: Input
+            }], directoryNumber: [{
+                type: Input
+            }], siteId: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+class UserDeviceManageModule {
+}
+UserDeviceManageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDeviceManageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UserDeviceManageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UserDeviceManageModule, declarations: [AppLoaderComponent,
+        NotificationsComponent,
+        LazyLoadingSelectComponent,
+        DeviceListComponent,
+        DeviceManageWidgetComponent,
+        DeviceAssociatedLineComponent,
+        DeviceAssociatedLineExtensionComponent,
+        DeviceAssociatedLineDetailsBoxComponent,
+        AssociatedLineRowComponent,
+        InfoDialogComponent], imports: [CommonModule,
+        BrowserModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        MaterialModule], exports: [DeviceManageWidgetComponent] });
+UserDeviceManageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserDeviceManageModule, providers: [
+        APIService,
+        UserService,
+        NotificationService,
+        RemoveKynFromIBMService,
+        SiteSettingsService,
+        DnsService,
+        LineService,
+        DeviceService,
+        ValidationService,
+        { 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: UserDeviceManageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AppLoaderComponent,
+                        NotificationsComponent,
+                        LazyLoadingSelectComponent,
+                        DeviceListComponent,
+                        DeviceManageWidgetComponent,
+                        DeviceAssociatedLineComponent,
+                        DeviceAssociatedLineExtensionComponent,
+                        DeviceAssociatedLineDetailsBoxComponent,
+                        AssociatedLineRowComponent,
+                        InfoDialogComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BrowserModule,
+                        BrowserAnimationsModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        HttpClientModule,
+                        MaterialModule,
+                    ],
+                    providers: [
+                        APIService,
+                        UserService,
+                        NotificationService,
+                        RemoveKynFromIBMService,
+                        SiteSettingsService,
+                        DnsService,
+                        LineService,
+                        DeviceService,
+                        ValidationService,
+                        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
+                    ],
+                    exports: [
+                        DeviceManageWidgetComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { APIService, DeviceManageWidgetComponent, DeviceService, LineService, SiteSettingsService, UserDeviceManageModule, UserService, UtilsService };
+//# sourceMappingURL=tuki-io-tuki-widgets-user-device-manage.mjs.map