@tuki-io/tuki-widgets 0.0.133 → 0.0.134

package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs

@@ -1,2204 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, inject, Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation } from '@angular/core';
-import { SelectionModel } from '@angular/cdk/collections';
-import * as i2$1 from '@angular/material/table';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { catchError, of, Subject, Subscription, takeUntil, map, forkJoin } from 'rxjs';
-import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpClientModule } from '@angular/common/http';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3$1 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i5 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i6 from '@angular/material/core';
-import { MatOptionModule } from '@angular/material/core';
-import * as i7 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i8 from '@angular/material/paginator';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i2$2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$2 from 'ng-apexcharts';
-import { NgApexchartsModule } from 'ng-apexcharts';
-import { map as map$1, catchError as catchError$1 } from 'rxjs/operators';
-import * as i6$1 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-
-const API$1 = {
-    OVERVIEW: {
-        GET_UPGRADE_PRECONDITIONS: '/api/webex-upgrade/customers/:customerId/preconditions/fetch',
-        GET_SITE_INFRASTRUCTURE: '/api/webex-upgrade/customers/:customerId/infra/fetch',
-        GET_USERS_UPGRADE_SUMMARY: '/api/webex-upgrade/customers/:customerId/users/upgrade/fetch',
-        GET_SITES_UPGRADE_SUMMARY: '/api/webex-upgrade/customers/:customerId/sites/upgrade/fetch',
-        GET_USERS_UPGRADE_READINESS: '/api/webex-upgrade/customers/:customerId/users/readiness/fetch',
-        GET_SITES_UPGRADE_READINESS: '/api/webex-upgrade/customers/:customerId/sites/readiness/fetch'
-    },
-    USER_UPGRADE: {
-        GET_USERS_UPGRADE_DATA: '/api/webex-upgrade/customers/:customerId/user-upgrade',
-        GET_USERS_UPGRADE_STATUS_COUNTS: '/api/webex-upgrade/customers/:customerId/user-upgrades/status-counts',
-        UPGRADE_USER: '/api/migration/webex/sites/:siteId/users/:userId',
-        SINGLE_COLLECT: '/api/migration/webex/singlecollect/features/:featureName',
-        SINGLE_MIGRATION: '/api/migration/webex/singlemigration/features/:featureName',
-        UPGRADE_STATUS: '/api/webex-upgrade/customers/:customerId/users/upgrade-status'
-    },
-    SITE_UPGRADE: {
-        GET_SITES_UPGRADE_DATA: '/api/webex-upgrade/customers/:customerId/site-upgrades',
-        GET_SITES_UPGRADE_STATUS_COUNTS: '/api/webex-upgrade/customers/:customerId/site-upgrades/status-counts',
-        WEBEX_CACHE_COLLECTION: '/api/migration/:migrationType/sites/:siteId/collectbuildwebexcache',
-        UPGRADE_SITE: '/api/migration/webex/sites/:siteId',
-        WEBEX_BATCH_STATUS: "/api/migration/webex/customer/:customerId/batchesstatus",
-        MIGRATE_SITE: "/api/migration/webex/sites/:siteId/migrate",
-        BATCH_STATUS: "/api/e2emigration/batches-status/:customerId",
-        GET_BATCH_SITES: "/api/e2emigration/batch/:customerId/Sites",
-        WEBEX_CACHE_COLLECTION_SITE_LIST: "/api/migration/webex/customers/:customerId/sitelistforcollectbuildwebexcache",
-        WEBEX_CACHE_COLLECTION_CUCM_LIST: "/api/migration/webex/customers/:customerId/cucmlistforcollectbuildwebexcache",
-        MIGRATION_STATUS: "/api/migration/state/webex/customers/:customerId/migrationstatus"
-    }
-};
-
-class APIService {
-    constructor(httpClient) {
-        this.httpClient = httpClient;
-        this.apiUrl = window.location.protocol + '//' + window.location.hostname + '/dcp';
-        this.token = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbkBjb3JyZW5ldC5jb20iLCJyb2xlcyI6IlNVUEVSX1VTRVIiLCJpYXQiOjE3NTUwODUyMzgsImV4cCI6MTc1NTEwMzIzOH0.X1CKx-OBZvSs7Bzr_4SWW2ulBgHNkYZrmVuv6V7FZyo';
-        // this.apiUrl = window.location.protocol + '//' + window.location.host + '/dcp';
-        this.apiUrl = 'https://dev.tuki.io/webex';
-        // this.apiUrl = 'http://localhost:8088/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, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
-
-class UserUpgradeService {
-    constructor() {
-        this.apiService = inject(APIService);
-    }
-    // TODO: Impl the user upgrade logic here
-    bulkUpgrade(users) {
-        const body = this.generateUserUpgradeBody(users);
-        console.log('bulkUpgrade', users);
-        console.log(body);
-        // This is not done yet...
-        return this.apiService.post(API$1.USER_UPGRADE.SINGLE_MIGRATION.replace(':featureName', "PERSON"), body, {}).pipe(catchError((err) => of(err)));
-    }
-    collectUsers(users) {
-        const body = this.generateUserUpgradeBody(users);
-        console.log('collectUsers', body);
-        // This is not done yet...
-        return this.apiService.post(API$1.USER_UPGRADE.SINGLE_COLLECT.replace(':featureName', 'PERSON'), body, {}).pipe(catchError((err) => of(err)));
-    }
-    getUsersUpgradeStatuses(users) {
-        const body = this.generateUserUpgradeStatusBody(users);
-        console.log('getUsersUpgradeStatuses', body);
-        // This is not done yet...
-        return this.apiService.post(API$1.USER_UPGRADE.UPGRADE_STATUS.replace(':customerId', this.customerId), body, {}).pipe(catchError((err) => of(err)));
-    }
-    generateUserUpgradeBody(users) {
-        const entities = users.map(record => ({ cucmId: record.cucmId, entityId: record.userId }));
-        const customerId = users[0].customerId;
-        return {
-            customerId,
-            entities: {
-                PERSON: entities
-            }
-        };
-    }
-    generateUserUpgradeStatusBody(users) {
-        const body = {};
-        body[String(users[0].cucmId)] = users.map(user => String(user.userId));
-        return body;
-    }
-    getUserUpgradeStatusCounts() {
-        return this.apiService.fetch(API$1.USER_UPGRADE.GET_USERS_UPGRADE_STATUS_COUNTS.replace(':customerId', this.customerId));
-    }
-    getUserUpgradeRecords(pageSize, pageIndex, params) {
-        return this.apiService.fetchPagination(API$1.USER_UPGRADE.GET_USERS_UPGRADE_DATA.replace(':customerId', this.customerId), pageSize, pageIndex, params);
-    }
-    mapDevicesWithExtensions(devices, deviceDetails) {
-        if (!devices?.length) {
-            return [];
-        }
-        return devices.map(deviceName => {
-            const found = deviceDetails.find(d => d.name === deviceName);
-            return {
-                deviceName,
-                extensions: found?.extensions ?? []
-            };
-        });
-    }
-}
-UserUpgradeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-UserUpgradeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-class User2UpgradeStatusDTO {
-}
-// map UI keys -> server keys
-const FILTER_KEY_MAP = {
-    'Site': 'siteName',
-    'User Upgrade Status': 'upgradeStatus',
-    'User': 'userId',
-};
-
-const STATUS_ENTRIES = {
-    READY: 'Ready',
-    NOT_READY: 'Not Ready',
-    PARTIAL_READY: 'Partial Ready',
-    FAILED: 'Failed',
-    COMPLETED: 'Completed'
-};
-const DEPENDENCIES_STATUS = {
-    DEPENDENCIES_FOUND: 'Dependencies found',
-    NO_DEPENDENCIES: 'No dependencies',
-};
-var UPGRADE_STATUS;
-(function (UPGRADE_STATUS) {
-    UPGRADE_STATUS["NOT_READY"] = "not_ready";
-    UPGRADE_STATUS["READY"] = "ready";
-    UPGRADE_STATUS["COMPLETED"] = "completed";
-    UPGRADE_STATUS["IN_PROGRESS"] = "in progress";
-    UPGRADE_STATUS["FAILED"] = "failed";
-})(UPGRADE_STATUS || (UPGRADE_STATUS = {}));
-
-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 SummaryCardComponent {
-    constructor() {
-        this.value = 41;
-        this.status = 'Ready';
-    }
-    getStatusClass(status) {
-        switch (status?.toLowerCase()) {
-            case 'ready':
-                return 'ready';
-            case 'not ready':
-                return 'not-ready';
-            case 'failed':
-                return 'failed';
-            case 'completed':
-                return 'completed';
-            default:
-                return 'not-ready';
-        }
-    }
-}
-SummaryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SummaryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SummaryCardComponent, selector: "tk-summary-card", inputs: { value: "value", status: "status", description: "description" }, ngImport: i0, template: "<article class=\"summary-card\">\r\n    <header class=\"summary-card__header\">\r\n        <h2>{{ value }}</h2>\r\n    </header>\r\n    <div class=\"summary__card-description\">\r\n        <span>{{ description }}</span>\r\n        <div class=\"summary__card-status-wrapper\">\r\n            <span class=\"summary__card-status-indicator\" [ngClass]=\"getStatusClass(status)\"></span>\r\n          <span [ngClass]=\"{'status-ready': status === 'ready'}\">{{ status }}</span>\r\n        </div>\r\n    </div>\r\n</article>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;box-sizing:border-box;flex:1}.summary-card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:1rem;border:1px solid hsl(0,0%,20%);max-width:100%;height:100%;display:flex;box-sizing:border-box;flex-direction:column;gap:.25rem}.summary-card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.summary-card__header h2{font-size:28px;font-weight:500;margin:0}.summary__card-status-wrapper{display:flex;align-items:center;font-size:14px;gap:.5rem}.summary__card-status-wrapper .summary__card-status-indicator{width:8px;height:8px;border-radius:50%}.summary__card-status-wrapper .summary__card-status-indicator.ready{background-color:#1c3893}.summary__card-status-wrapper .summary__card-status-indicator.partial-ready{background-color:#f8cd00}.summary__card-status-wrapper .summary__card-status-indicator.not-ready{background-color:#9e9e9e}.summary__card-status-wrapper .summary__card-status-indicator.completed{background-color:#1d805f}.summary__card-status-wrapper .summary__card-status-indicator.failed{background-color:#f23933}.indicator-status-ready{color:#1170cf!important}.summary__card-description{font-size:14px;color:#333;display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SummaryCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-summary-card', template: "<article class=\"summary-card\">\r\n    <header class=\"summary-card__header\">\r\n        <h2>{{ value }}</h2>\r\n    </header>\r\n    <div class=\"summary__card-description\">\r\n        <span>{{ description }}</span>\r\n        <div class=\"summary__card-status-wrapper\">\r\n            <span class=\"summary__card-status-indicator\" [ngClass]=\"getStatusClass(status)\"></span>\r\n          <span [ngClass]=\"{'status-ready': status === 'ready'}\">{{ status }}</span>\r\n        </div>\r\n    </div>\r\n</article>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;box-sizing:border-box;flex:1}.summary-card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:1rem;border:1px solid hsl(0,0%,20%);max-width:100%;height:100%;display:flex;box-sizing:border-box;flex-direction:column;gap:.25rem}.summary-card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.summary-card__header h2{font-size:28px;font-weight:500;margin:0}.summary__card-status-wrapper{display:flex;align-items:center;font-size:14px;gap:.5rem}.summary__card-status-wrapper .summary__card-status-indicator{width:8px;height:8px;border-radius:50%}.summary__card-status-wrapper .summary__card-status-indicator.ready{background-color:#1c3893}.summary__card-status-wrapper .summary__card-status-indicator.partial-ready{background-color:#f8cd00}.summary__card-status-wrapper .summary__card-status-indicator.not-ready{background-color:#9e9e9e}.summary__card-status-wrapper .summary__card-status-indicator.completed{background-color:#1d805f}.summary__card-status-wrapper .summary__card-status-indicator.failed{background-color:#f23933}.indicator-status-ready{color:#1170cf!important}.summary__card-description{font-size:14px;color:#333;display:flex;align-items:center;justify-content:space-between}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], status: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }] } });
-
-class TableFiltersComponent {
-    constructor() {
-        this.filter = new EventEmitter();
-    }
-    ngOnInit() {
-        if (this.filters) {
-            this.filters.forEach(filter => {
-                if (filter.type === 'select' && !filter.options.some(opt => opt.value === 'all')) {
-                    filter.options.unshift({ label: 'All', value: 'all' });
-                }
-            });
-        }
-    }
-    onFilter(key, value) {
-        const val = { key, value };
-        this.filter.emit(val);
-    }
-}
-TableFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableFiltersComponent, selector: "tk-table-filters", inputs: { filters: "filters" }, outputs: { filter: "filter" }, ngImport: i0, template: "<div class=\"filters-wrapper\">\r\n    <ng-container *ngFor=\"let filter of filters\">\r\n        <div class=\"filter\">\r\n            <ng-container [ngSwitch]=\"filter.type\">\r\n                <!-- Search Input with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'search'\" appearance=\"outline\" class=\"search-field custom-mat-form-field\">\r\n<!--                    <mat-label>{{ filter.placeholder }}</mat-label>-->\r\n                    <input matInput\r\n                           [placeholder]=\"filter.placeholder\"\r\n                           (input)=\"onFilter(filter.columnKey, $event)\">\r\n                    <mat-icon matPrefix class=\"search-icon\">\r\n                        <!-- <img src=\"assets/icons/search_icon.png\" alt=\"Search\" /> -->\r\n                    </mat-icon>\r\n                </mat-form-field>\r\n\r\n                <!-- Select Dropdown with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'select'\" appearance=\"outline\" class=\"select-field custom-mat-form-field\">\r\n                    <mat-label>{{ filter.placeholder }}</mat-label>\r\n                    <mat-select (selectionChange)=\"onFilter(filter.columnKey, $event)\">\r\n                        <mat-option *ngFor=\"let option of filter.options\" [value]=\"option.value\">\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host .filters-wrapper{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding:0}:host .filters-wrapper .filter .search-field,:host .filters-wrapper .filter .select-field{width:100%}:host .filters-wrapper .filter .search-field .search-icon,:host .filters-wrapper .filter .select-field .search-icon{display:flex;align-items:center;justify-content:center;margin-right:.25rem;padding:0}:host .filters-wrapper .filter .search-field .search-icon img,:host .filters-wrapper .filter .select-field .search-icon img{width:24px;height:24px;object-fit:contain;opacity:.6;vertical-align:middle}::ng-deep .custom-mat-form-field{width:265px}::ng-deep .custom-mat-form-field .mat-form-field-wrapper{height:24px;padding-bottom:0}::ng-deep .custom-mat-form-field .mat-form-field-flex{height:34px;align-items:center;padding:0 12px}::ng-deep .custom-mat-form-field .mat-form-field-infix{padding:0;border:none;min-height:auto;display:flex;align-items:center;height:28px;margin:4px 0 0;font-size:14px}::ng-deep .custom-mat-form-field .mat-form-field-outline{color:#737480}::ng-deep .custom-mat-form-field .mat-form-field-outline-start,::ng-deep .custom-mat-form-field .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-color:#737480;border-width:1px}::ng-deep .custom-mat-form-field .mat-form-field-outline-start{border-radius:6px 0 0 6px;min-width:6px}::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-radius:0 6px 6px 0}::ng-deep .custom-mat-form-field .mat-form-field-outline-gap{border-radius:0}::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-start,::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-end{border-color:#737480;border-width:2px}::ng-deep .custom-mat-form-field .mat-form-field-subscript-wrapper{display:none}::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;font-size:14px}::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{transform:translateY(-50%)}::ng-deep .custom-mat-form-field .mat-select-value{max-width:calc(100% - 20px)}::ng-deep .custom-mat-form-field .mat-select-arrow-wrapper{transform:none;display:flex;align-items:center;position:absolute;right:-10px;top:5px}::ng-deep .custom-mat-form-field input.mat-input-element{height:24px;line-height:24px;margin:3px 0 0}::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-start,::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-end{border-color:#ccc}::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-start,::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-end{border-color:#e70707}::ng-deep .custom-mat-form-field .mat-select-arrow{width:16px;height:16px;border:none;margin:-6px 4px 0 0;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}::ng-deep .custom-mat-form-field.use-css-arrow .mat-select-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #737480;margin:-6px 4px 0 0;background:none}::ng-deep .custom-mat-form-field .mat-form-field-label-wrapper{top:2px;padding-top:0;height:28px;display:flex;overflow:visible!important;align-items:center}::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;position:relative;top:auto;transform:none;padding:0 4px;background:white}::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{position:absolute;top:-5px;width:-moz-fit-content;width:fit-content;font-size:12px;color:#555;background:white;padding:0 4px}::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{position:relative;top:auto;left:auto;transform:none;font-size:14px;background:transparent}::ng-deep .custom-mat-form-field .mat-select-placeholder{color:#555;line-height:34px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4.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: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableFiltersComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-table-filters', template: "<div class=\"filters-wrapper\">\r\n    <ng-container *ngFor=\"let filter of filters\">\r\n        <div class=\"filter\">\r\n            <ng-container [ngSwitch]=\"filter.type\">\r\n                <!-- Search Input with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'search'\" appearance=\"outline\" class=\"search-field custom-mat-form-field\">\r\n<!--                    <mat-label>{{ filter.placeholder }}</mat-label>-->\r\n                    <input matInput\r\n                           [placeholder]=\"filter.placeholder\"\r\n                           (input)=\"onFilter(filter.columnKey, $event)\">\r\n                    <mat-icon matPrefix class=\"search-icon\">\r\n                        <!-- <img src=\"assets/icons/search_icon.png\" alt=\"Search\" /> -->\r\n                    </mat-icon>\r\n                </mat-form-field>\r\n\r\n                <!-- Select Dropdown with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'select'\" appearance=\"outline\" class=\"select-field custom-mat-form-field\">\r\n                    <mat-label>{{ filter.placeholder }}</mat-label>\r\n                    <mat-select (selectionChange)=\"onFilter(filter.columnKey, $event)\">\r\n                        <mat-option *ngFor=\"let option of filter.options\" [value]=\"option.value\">\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host .filters-wrapper{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding:0}:host .filters-wrapper .filter .search-field,:host .filters-wrapper .filter .select-field{width:100%}:host .filters-wrapper .filter .search-field .search-icon,:host .filters-wrapper .filter .select-field .search-icon{display:flex;align-items:center;justify-content:center;margin-right:.25rem;padding:0}:host .filters-wrapper .filter .search-field .search-icon img,:host .filters-wrapper .filter .select-field .search-icon img{width:24px;height:24px;object-fit:contain;opacity:.6;vertical-align:middle}::ng-deep .custom-mat-form-field{width:265px}::ng-deep .custom-mat-form-field .mat-form-field-wrapper{height:24px;padding-bottom:0}::ng-deep .custom-mat-form-field .mat-form-field-flex{height:34px;align-items:center;padding:0 12px}::ng-deep .custom-mat-form-field .mat-form-field-infix{padding:0;border:none;min-height:auto;display:flex;align-items:center;height:28px;margin:4px 0 0;font-size:14px}::ng-deep .custom-mat-form-field .mat-form-field-outline{color:#737480}::ng-deep .custom-mat-form-field .mat-form-field-outline-start,::ng-deep .custom-mat-form-field .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-color:#737480;border-width:1px}::ng-deep .custom-mat-form-field .mat-form-field-outline-start{border-radius:6px 0 0 6px;min-width:6px}::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-radius:0 6px 6px 0}::ng-deep .custom-mat-form-field .mat-form-field-outline-gap{border-radius:0}::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-start,::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-end{border-color:#737480;border-width:2px}::ng-deep .custom-mat-form-field .mat-form-field-subscript-wrapper{display:none}::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;font-size:14px}::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{transform:translateY(-50%)}::ng-deep .custom-mat-form-field .mat-select-value{max-width:calc(100% - 20px)}::ng-deep .custom-mat-form-field .mat-select-arrow-wrapper{transform:none;display:flex;align-items:center;position:absolute;right:-10px;top:5px}::ng-deep .custom-mat-form-field input.mat-input-element{height:24px;line-height:24px;margin:3px 0 0}::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-start,::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-end{border-color:#ccc}::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-start,::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-gap,::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-end{border-color:#e70707}::ng-deep .custom-mat-form-field .mat-select-arrow{width:16px;height:16px;border:none;margin:-6px 4px 0 0;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}::ng-deep .custom-mat-form-field.use-css-arrow .mat-select-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #737480;margin:-6px 4px 0 0;background:none}::ng-deep .custom-mat-form-field .mat-form-field-label-wrapper{top:2px;padding-top:0;height:28px;display:flex;overflow:visible!important;align-items:center}::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;position:relative;top:auto;transform:none;padding:0 4px;background:white}::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{position:absolute;top:-5px;width:-moz-fit-content;width:fit-content;font-size:12px;color:#555;background:white;padding:0 4px}::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{position:relative;top:auto;left:auto;transform:none;font-size:14px;background:transparent}::ng-deep .custom-mat-form-field .mat-select-placeholder{color:#555;line-height:34px}\n"] }]
-        }], propDecorators: { filters: [{
-                type: Input
-            }], filter: [{
-                type: Output
-            }] } });
-
-class UserUpgradeDataTableComponent {
-    constructor() {
-        this.destroy$ = new Subject();
-        this.userUpgradeService = inject(UserUpgradeService);
-        this.apiService = inject(APIService);
-        this.STATUS_ENTRIES = STATUS_ENTRIES;
-        this.DEPENDENCIES_STATUS = DEPENDENCIES_STATUS;
-        this.dataPending = false;
-        this.displayedColumns = ['select', 'user', 'site', 'device', 'dialPlanStatus', 'dependencies', 'userUpgradeStatus', 'userUpgradeLoader'];
-        this.selection = new SelectionModel(true, []);
-        this.filters = [];
-        this.pagination = new PaginationDataDto();
-        this.users = [];
-        this.subscriptions = new Subscription();
-        this.statusCounts = {};
-        this.activeFilters = {};
-        this.pageSizeOptions = PAGINATION_SIZE_OPTIONS;
-    }
-    ngOnInit() {
-        this.dataPending = true;
-        this.apiService.token = this.token;
-        this.userUpgradeService.customerId = this.customerId;
-        const subsc1 = this.userUpgradeService.getUserUpgradeRecords(this.pagination.pageSize, this.pagination.pageIndex, this.activeFilters)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((results) => {
-            const records = results.content;
-            records.forEach(record => {
-                record.devicesWithExtensions = this.userUpgradeService.mapDevicesWithExtensions(record.devices, record.deviceDetails);
-            });
-            this.data = new MatTableDataSource(records);
-            this.pagination.total = results.totalElements;
-            this.dataPending = false;
-            this.setupCustomFilter();
-            this.initializeFilters(records);
-        });
-        this.subscriptions.add(subsc1);
-        const subsc2 = this.userUpgradeService.getUserUpgradeStatusCounts()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((statusCounts) => {
-            this.statusCounts['Ready'] = statusCounts['READY'] || 0;
-            this.statusCounts['Not Ready'] = statusCounts['NOT_READY'] || 0;
-            this.statusCounts['Completed'] = statusCounts['COMPLETED'] || 0;
-            this.statusCounts['Failed'] = statusCounts['FAILED'] || 0;
-        });
-        this.subscriptions.add(subsc2);
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.dataPending = false;
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
-    }
-    onMultipleDevices(user) {
-        user.showDevices = !user.showDevices;
-    }
-    pageEvent(event) {
-        this.pagination.pageIndex = event.pageIndex;
-        this.pagination.pageSize = event.pageSize;
-        this.getData();
-    }
-    getSiteUpgradeStatusClass(status) {
-        switch (status.toLowerCase()) {
-            case 'ready':
-                return 'status-ready';
-            case 'partial ready':
-                return 'partial-ready';
-            case 'completed':
-                return 'completed';
-            case 'failed':
-                return 'failed';
-            case 'not ready':
-                return 'not-ready';
-            default:
-                return 'not-ready';
-        }
-    }
-    changePerPageNumber(pageSizeEvent) {
-        this.pagination.pageSize = pageSizeEvent.value;
-        this.pagination.pageIndex = 0;
-        this.getData();
-    }
-    getData(params) {
-        this.dataPending = true;
-        const subsc1 = this.userUpgradeService.getUserUpgradeRecords(this.pagination.pageSize, this.pagination.pageIndex, params || {})
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((result) => {
-            const records = result.content;
-            records.forEach(record => {
-                record.devicesWithExtensions = this.userUpgradeService.mapDevicesWithExtensions(record.devices, record.deviceDetails);
-            });
-            this.data = new MatTableDataSource(records);
-            this.pagination.total = result.totalElements;
-            this.dataPending = false;
-        });
-        this.subscriptions.add(subsc1);
-    }
-    initializeFilters(records) {
-        if (!records?.length) {
-            this.filters = [];
-            return;
-        }
-        // Extract unique sites (skip empty/null)
-        const uniqueSites = [
-            ...new Set(records
-                .map(record => record.siteName?.trim())
-                .filter((site) => !!site))
-        ];
-        const siteOptions = uniqueSites.map(site => ({
-            label: site,
-            value: site.toLowerCase().replace(/\s+/g, '-')
-        }));
-        // Extract unique statuses (skip empty/null)
-        const uniqueStatuses = [
-            ...new Set(records
-                .map(record => record.upgradeStatus?.trim())
-                .filter((status) => !!status))
-        ];
-        const statusOptions = uniqueStatuses.map(status => ({
-            label: STATUS_ENTRIES[status],
-            value: status.toLowerCase().replace(/\s+/g, '-')
-        }));
-        this.filters = [
-            {
-                id: 'userName',
-                type: 'search',
-                columnKey: 'User',
-                placeholder: 'Search users...',
-                options: []
-            }
-        ];
-        if (siteOptions.length) {
-            this.filters.push({
-                id: 'sites',
-                type: 'select',
-                columnKey: 'Site',
-                placeholder: 'Sites',
-                options: siteOptions
-            });
-        }
-        if (statusOptions.length) {
-            this.filters.push({
-                id: 'status',
-                type: 'select',
-                columnKey: 'User Upgrade Status',
-                placeholder: 'Upgrade Status',
-                options: statusOptions
-            });
-        }
-    }
-    /** Whether the number of selected elements matches the total number of rows. */
-    isAllSelected() {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.data?.data.length ?? 0;
-        return numSelected === numRows;
-    }
-    /** Selects all rows if they are not all selected; otherwise clear selection. */
-    masterToggle() {
-        // this.isAllSelected() ?
-        //   this.selection.clear() :
-        //   this.data?.data.forEach(row => this.selection.select(row));
-        if (this.isAllSelected()) {
-            this.selection.clear();
-        }
-        else {
-            this.data?.data.forEach(row => {
-                if (row.upgradeStatus === 'READY') {
-                    this.selection.select(row);
-                }
-            });
-        }
-    }
-    upgradeUser(user) {
-        if (user?.upgradeStatus === 'READY')
-            user.pending = true;
-        this.userUpgradeService.collectUsers([user])
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.userUpgradeService.bulkUpgrade([user])
-                .pipe(takeUntil(this.destroy$))
-                .subscribe(() => {
-                this.updateUsersStatusAfterUpgrade([user]);
-            });
-        });
-    }
-    updateUsersStatusAfterUpgrade(users) {
-        this.userUpgradeService.getUsersUpgradeStatuses(users)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((upgradedStatuses) => {
-            upgradedStatuses.forEach(statusItem => {
-                const ind = this.getUserIndex(statusItem.userId);
-                if (ind > -1) {
-                    this.data.data[ind].upgradeStatus = statusItem.upgradeStatus;
-                    this.data.data[ind].pending = false;
-                }
-            });
-            this.dataPending = false;
-        });
-    }
-    getUserIndex(userId) {
-        return this.data.data.findIndex((record) => record.userId === userId);
-    }
-    upgradeSelectedUsers() {
-        if (this.selection.selected && this.selection.selected.length) {
-            this.dataPending = true;
-            this.userUpgradeService.collectUsers(this.selection.selected)
-                .pipe(takeUntil(this.destroy$))
-                .subscribe(() => {
-                this.userUpgradeService.bulkUpgrade(this.selection.selected)
-                    .pipe(takeUntil(this.destroy$))
-                    .subscribe(() => {
-                    this.updateUsersStatusAfterUpgrade(this.selection.selected);
-                });
-            });
-        }
-        this.userUpgradeService.bulkUpgrade(this.selection.selected);
-    }
-    getFilterValue(input) {
-        if (input && input.value !== undefined)
-            return input.value; // e.g. {value,label}
-        if (input && input.target)
-            return input.target.value; // DOM event
-        return input; // plain value
-    }
-    isEmptyFilter(v) {
-        if (v === undefined || v === null)
-            return true;
-        if (typeof v === 'string') {
-            const s = v.trim().toLowerCase();
-            return s === '' || s === 'all';
-        }
-        return false;
-    }
-    onFilter(filterEvent) {
-        const rawKey = filterEvent.key;
-        const serverKey = FILTER_KEY_MAP[rawKey];
-        const value = this.getFilterValue(filterEvent.value);
-        const next = { ...this.activeFilters };
-        if (this.isEmptyFilter(value)) {
-            delete next[serverKey];
-        }
-        else {
-            // normalize to string for API (trim)
-            next[serverKey] = typeof value === 'string' ? value.trim() : String(value);
-        }
-        this.activeFilters = next;
-        this.pagination.pageIndex = 0;
-        // quick fix for demo
-        if (this.activeFilters['upgradeStatus']) {
-            this.activeFilters['upgradeStatus'] = this.activeFilters['upgradeStatus']?.toUpperCase();
-        }
-        this.getData(this.activeFilters);
-    }
-    /*onFilter(filterEvent: { key: string, value: any }) {
-      const {key, value} = filterEvent;
-  
-      let filterValue: any;
-      if (value && value.value !== undefined) {
-        filterValue = value.value;
-      } else if (value && value.target) {
-        filterValue = value.target.value;
-      } else {
-        filterValue = value;
-      }
-  
-      // Handle "All" option or empty values - remove the filter
-      if (filterValue === 'all' || !filterValue || filterValue === '') {
-        delete this.activeFilters[key];
-      } else {
-        this.activeFilters[key] = filterValue;
-      }
-  
-      this.applyFilters();
-    }*/
-    setupCustomFilter() {
-        this.data.filterPredicate = (data, filter) => {
-            const filters = JSON.parse(filter || '{}');
-            for (const [key, value] of Object.entries(filters)) {
-                if (!value)
-                    continue;
-                switch (key) {
-                    case 'User':
-                        const searchTerm = value.toLowerCase();
-                        if (!data.userName.toLowerCase().includes(searchTerm)) {
-                            return false;
-                        }
-                        break;
-                    case 'Site':
-                        if (data.siteName !== this.getSiteNameFromValue(value)) {
-                            return false;
-                        }
-                        break;
-                    case 'User Upgrade Status':
-                        if (!this.matchesUpgradeStatus(data.upgradeStatus, value)) {
-                            return false;
-                        }
-                        break;
-                }
-            }
-            return true;
-        };
-    }
-    applyFilters() {
-        this.data.filter = JSON.stringify(this.activeFilters);
-    }
-    get filteredDataCount() {
-        return this.data?.filteredData?.length || 0;
-    }
-    getSiteNameFromValue(value) {
-        // Since we're now using actual site names, just convert back from slug format
-        return value.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
-    }
-    matchesUpgradeStatus(status, filterValue) {
-        // Handle direct status matching for cleaner implementation
-        return status.toLowerCase().replace(/\s+/g, '-') === filterValue.toLowerCase();
-    }
-    getStatusClass(status) {
-        switch (status.toLowerCase()) {
-            case 'ready':
-                return 'ready';
-            case 'not ready':
-                return 'not-ready';
-            case 'partial ready':
-                return 'partial-ready';
-            case 'completed':
-                return 'completed';
-            case 'failed':
-                return 'failed';
-            default:
-                return 'not-ready';
-        }
-    }
-}
-UserUpgradeDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UserUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserUpgradeDataTableComponent, selector: "tk-user-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"\r\n    ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n    <div class=\"user-upgrade-status-wrapper\">\r\n        <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n    </div>\r\n    <div class=\"table-action-panel\">\r\n        <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n        <div class=\"action-wrapper\">\r\n            <span>{{filteredDataCount}} Users</span>\r\n            <button\r\n                mat-button\r\n                class=\"upgrade-bulk-button\"\r\n                color=\"primary\"\r\n                [disabled]=\"selection.selected.length === 0\"\r\n                (click)=\"upgradeSelectedUsers()\">\r\n                Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n        <!-- Checkbox Column -->\r\n        <ng-container matColumnDef=\"select\">\r\n            <th mat-header-cell *matHeaderCellDef>\r\n                <mat-checkbox\r\n                    (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </th>\r\n            <td mat-cell *matCellDef=\"let row\">\r\n                <mat-checkbox\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"$event ? selection.toggle(row) : null\"\r\n                    [checked]=\"selection.isSelected(row)\"\r\n                    [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Column -->\r\n        <ng-container matColumnDef=\"user\">\r\n            <th mat-header-cell *matHeaderCellDef>User</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"user-info\">\r\n                    <div class=\"user-name\">{{element.userName}}</div>\r\n                    <div class=\"user-email\">{{element.userName}}</div>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Site Column -->\r\n        <ng-container matColumnDef=\"site\">\r\n            <th mat-header-cell *matHeaderCellDef>Site</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"site-info\">\r\n                  <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n                    <span>{{element.siteName}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Device Column -->\r\n        <ng-container matColumnDef=\"device\">\r\n            <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n            <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n              <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n                <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n                     class=\"device-item\"\r\n                     [class.no-border]=\"last\">\r\n                  <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n                  <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n                  <span class=\"device-model\">\r\n                    {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n                  </span>\r\n                </div>\r\n              </div>\r\n                <div class=\"device-info\">\r\n                    <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n                        <div class=\"device-name-wrapper clickable\"\r\n                             (mouseenter)=\"onMultipleDevices(element)\"\r\n                             (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n                            <span class=\"device-name\">Multiple devices ></span>\r\n                        </div>\r\n                    </div>\r\n                  <ng-template #oneDevice>\r\n                    <div class=\"device-name-wrapper\">\r\n                      <span class=\"device-indicator\"></span>\r\n                      <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n                    </div>\r\n                    <div class=\"device-model one-dev-extensions\">\r\n                      {{ element.devicesWithExtensions[0].extensions?.length ?\r\n                      'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dial Plan Status Column -->\r\n        <ng-container matColumnDef=\"dialPlanStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"status-info\">\r\n                    <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n                  <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dependencies Column -->\r\n        <ng-container matColumnDef=\"dependencies\">\r\n            <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Upgrade Status Column -->\r\n        <ng-container matColumnDef=\"userUpgradeStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"upgrade-status-cell\">\r\n                    <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n                        <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n                    </ng-container>\r\n                    <ng-template #statusBlock>\r\n                        <div class=\"status-info\">\r\n                            <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n                            <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n\r\n            </td>\r\n        </ng-container>\r\n\r\n      <ng-container matColumnDef=\"userUpgradeLoader\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n          <mat-progress-spinner\r\n            *ngIf=\"element.pending\"\r\n            class=\"field-spinner\"\r\n            [diameter]=\"20\"\r\n            mode=\"indeterminate\">\r\n          </mat-progress-spinner>\r\n        </td>\r\n      </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n            [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n    </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n  <mat-paginator\r\n    [length]=\"pagination.total\"\r\n    [pageSize]=\"pagination.pageSize\"\r\n    [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n    [pageIndex]=\"pagination.pageIndex\"\r\n    (page)=\"pageEvent($event)\"\r\n    showFirstLastButtons>\r\n  </mat-paginator>\r\n\r\n  <!--<div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n  </div>\r\n\r\n  <div class=\"per-page-block\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}::ng-deep .progress-spinner-td{position:relative}::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#000!important;color:#fffffff5!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-user-upgrade-data-table', template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"\r\n    ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" class=\"wrapper\">\r\n    <div class=\"user-upgrade-status-wrapper\">\r\n        <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n    </div>\r\n    <div class=\"table-action-panel\">\r\n        <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n        <div class=\"action-wrapper\">\r\n            <span>{{filteredDataCount}} Users</span>\r\n            <button\r\n                mat-button\r\n                class=\"upgrade-bulk-button\"\r\n                color=\"primary\"\r\n                [disabled]=\"selection.selected.length === 0\"\r\n                (click)=\"upgradeSelectedUsers()\">\r\n                Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n        <!-- Checkbox Column -->\r\n        <ng-container matColumnDef=\"select\">\r\n            <th mat-header-cell *matHeaderCellDef>\r\n                <mat-checkbox\r\n                    (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </th>\r\n            <td mat-cell *matCellDef=\"let row\">\r\n                <mat-checkbox\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"$event ? selection.toggle(row) : null\"\r\n                    [checked]=\"selection.isSelected(row)\"\r\n                    [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Column -->\r\n        <ng-container matColumnDef=\"user\">\r\n            <th mat-header-cell *matHeaderCellDef>User</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"user-info\">\r\n                    <div class=\"user-name\">{{element.userName}}</div>\r\n                    <div class=\"user-email\">{{element.userName}}</div>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Site Column -->\r\n        <ng-container matColumnDef=\"site\">\r\n            <th mat-header-cell *matHeaderCellDef>Site</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"site-info\">\r\n                  <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n                    <span>{{element.siteName}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Device Column -->\r\n        <ng-container matColumnDef=\"device\">\r\n            <th class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n            <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n              <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n                <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n                     class=\"device-item\"\r\n                     [class.no-border]=\"last\">\r\n                  <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n                  <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n                  <span class=\"device-model\">\r\n                    {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n                  </span>\r\n                </div>\r\n              </div>\r\n                <div class=\"device-info\">\r\n                    <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n                        <div class=\"device-name-wrapper clickable\"\r\n                             (mouseenter)=\"onMultipleDevices(element)\"\r\n                             (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n                            <span class=\"device-name\">Multiple devices ></span>\r\n                        </div>\r\n                    </div>\r\n                  <ng-template #oneDevice>\r\n                    <div class=\"device-name-wrapper\">\r\n                      <span class=\"device-indicator\"></span>\r\n                      <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n                    </div>\r\n                    <div class=\"device-model one-dev-extensions\">\r\n                      {{ element.devicesWithExtensions[0].extensions?.length ?\r\n                      'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dial Plan Status Column -->\r\n        <ng-container matColumnDef=\"dialPlanStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"status-info\">\r\n                    <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n                  <span [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dependencies Column -->\r\n        <ng-container matColumnDef=\"dependencies\">\r\n            <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Upgrade Status Column -->\r\n        <ng-container matColumnDef=\"userUpgradeStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"upgrade-status-cell\">\r\n                    <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n                        <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n                    </ng-container>\r\n                    <ng-template #statusBlock>\r\n                        <div class=\"status-info\">\r\n                            <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n                            <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n\r\n            </td>\r\n        </ng-container>\r\n\r\n      <ng-container matColumnDef=\"userUpgradeLoader\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n          <mat-progress-spinner\r\n            *ngIf=\"element.pending\"\r\n            class=\"field-spinner\"\r\n            [diameter]=\"20\"\r\n            mode=\"indeterminate\">\r\n          </mat-progress-spinner>\r\n        </td>\r\n      </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n            [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n    </table>\r\n</div>\r\n\r\n<div class=\"app-pagination\">\r\n  <mat-paginator\r\n    [length]=\"pagination.total\"\r\n    [pageSize]=\"pagination.pageSize\"\r\n    [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n    [pageIndex]=\"pagination.pageIndex\"\r\n    (page)=\"pageEvent($event)\"\r\n    showFirstLastButtons>\r\n  </mat-paginator>\r\n\r\n  <!--<div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n  </div>\r\n\r\n  <div class=\"per-page-block\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>-->\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}::ng-deep .progress-spinner-td{position:relative}::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.user-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#000!important;color:#fffffff5!important}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"] }]
-        }], propDecorators: { token: [{
-                type: Input
-            }], customerId: [{
-                type: Input
-            }] } });
-class PaginationDataDto {
-    constructor(data) {
-        this.pageSizeOptions = data?.pageSizeOptions || PAGINATION_DATA_DEFAULTS.OPTIONS;
-        this.pageSize = data?.pageSize || PAGINATION_DATA_DEFAULTS.SIZE;
-        this.pageIndex = data?.pageIndex || PAGINATION_DATA_DEFAULTS.PAGE_INDEX;
-        this.total = data?.total || 0;
-    }
-}
-const PAGINATION_DATA_DEFAULTS = {
-    OPTIONS: [10, 20, 50, 100],
-    SIZE: 10,
-    PAGE_INDEX: 0
-};
-
-class CardComponent {
-}
-CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, selector: "tk-card", inputs: { title: "title" }, ngImport: i0, template: "<article class=\"card\">\r\n    <header class=\"card__header\">\r\n        <h2>{{ title }}</h2>\r\n        <!--<div class=\"card__menu-button\">\r\n            <img width=\"18\" src=\"assets/icons/menu_icon.png\" alt=\"Menu Icon\">\r\n        </div>-->\r\n    </header>\r\n    <div class=\"card__content\">\r\n        <ng-content select=\"card-content\"></ng-content>\r\n    </div>\r\n</article>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;height:100%;box-sizing:border-box}.card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:2rem;border:1px solid hsla(0,0%,0%,.2);min-width:300px;max-width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:2.5rem}.card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.card__header h2{font-size:16px;margin:0}.card__header .card__menu-button{position:relative;display:flex;align-items:center}.card__content{display:flex;flex-direction:column;gap:2.5rem;flex-grow:1}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-card', template: "<article class=\"card\">\r\n    <header class=\"card__header\">\r\n        <h2>{{ title }}</h2>\r\n        <!--<div class=\"card__menu-button\">\r\n            <img width=\"18\" src=\"assets/icons/menu_icon.png\" alt=\"Menu Icon\">\r\n        </div>-->\r\n    </header>\r\n    <div class=\"card__content\">\r\n        <ng-content select=\"card-content\"></ng-content>\r\n    </div>\r\n</article>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;height:100%;box-sizing:border-box}.card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:2rem;border:1px solid hsla(0,0%,0%,.2);min-width:300px;max-width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:2.5rem}.card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.card__header h2{font-size:16px;margin:0}.card__header .card__menu-button{position:relative;display:flex;align-items:center}.card__content{display:flex;flex-direction:column;gap:2.5rem;flex-grow:1}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }] } });
-
-class MaterialModule {
-}
-MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule], exports: [MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule] });
-MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule, MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        MatProgressBarModule,
-                        MatTooltipModule,
-                        MatTableModule,
-                        MatCheckboxModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule
-                    ],
-                    exports: [
-                        MatProgressBarModule,
-                        MatTooltipModule,
-                        MatTableModule,
-                        MatCheckboxModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule
-                    ]
-                }]
-        }] });
-
-class StatCardComponent {
-    ngOnInit() {
-        if (this.type === 'user') {
-            this.stats = {
-                id: this.readinessStats?.id,
-                customerId: this.readinessStats?.customerId,
-                total: this.readinessStats?.['totalUsers'],
-                totalReady: this.readinessStats?.['totalReadyUsers'],
-                totalUpgraded: this.readinessStats?.['totalUpgradedUsers'],
-            };
-        }
-        else {
-            this.stats = {
-                id: this.readinessStats?.id,
-                customerId: this.readinessStats?.customerId,
-                total: this.readinessStats?.['totalSites'],
-                totalReady: this.readinessStats?.['totalReadySites'],
-                totalUpgraded: this.readinessStats?.['totalUpgradedSites'],
-            };
-        }
-    }
-    get readyPercentage() {
-        return (this.stats?.totalReady / this.stats?.total * 100) >> 0;
-    }
-    get upgradedPercentage() {
-        return (this.stats?.totalUpgraded / this.stats?.total * 100) >> 0;
-    }
-}
-StatCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StatCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StatCardComponent, selector: "tk-stat-card", inputs: { title: "title", type: "type", readinessStats: "readinessStats", upgradeStatus: "upgradeStatus" }, ngImport: i0, template: "<tk-card [title]=\"title\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div class=\"card__content-info\">\r\n      <div class=\"card__content-wrapper\">\r\n        <img width=\"42\" [src]=\"'assets/icons/' + type + '.png'\" alt=\"\" />\r\n        <div class=\"card__content-text\">\r\n          <div class=\"card__content-label\">\r\n            {{ upgradeStatus === 'ready' ? stats?.totalReady : stats?.totalUpgraded }}\r\n            {{ type === 'user' ? 'Users' : 'Sites' }}</div>\r\n          <div class=\"card__content-description\">{{ upgradeStatus === 'ready' ? 'Ready to Upgrade' : 'Already Upgraded' }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"card__content-progress-wrapper\">\r\n      <div class=\"card__content-progress\">\r\n        <div class=\"card__content-progress-label\">\r\n          <span>{{ readyPercentage }}%</span>\r\n          <span>From all {{ stats?.total }} {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n        </div>\r\n        <div class=\"card__content-progress-bar\">\r\n          <div\r\n            class=\"card__content-progress-bar-fill ready\"\r\n            [class.already]=\"upgradeStatus === 'already'\"\r\n            [style.width.%]=\"readyPercentage\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"upgradeStatus === 'already'\" class=\"card__content-progress\">\r\n        <div class=\"card__content-progress-label\">\r\n          <span>{{ upgradedPercentage }}%</span>\r\n          <span>From all {{ stats?.totalReady }} ready {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n        </div>\r\n        <div class=\"card__content-progress-bar\">\r\n          <div\r\n            class=\"card__content-progress-bar-fill ready\"\r\n            [class.already]=\"upgradeStatus === 'already'\"\r\n            [style.width.%]=\"upgradedPercentage\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</tk-card>\r\n", styles: [":host{display:block;height:100%;box-sizing:border-box}.card__content-info{display:flex;align-items:center;justify-content:space-between}.card__content-text{display:flex;flex-direction:column;gap:.25rem}.card__content-text .card__content-label{font-size:20px}.card__content-text .card__content-description{font-size:12px}.card__content-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem}.card__content-wrapper:first-child{display:flex;gap:.5rem}.card__content-progress-wrapper{display:flex;flex-direction:column;gap:1rem}.card__content-progress{display:flex;flex-direction:column;gap:.25rem;font-size:14px}.card__content-progress .card__content-progress-label{display:flex;align-items:center;justify-content:space-between;padding:.05rem}.card__content-progress .card__content-progress-bar{background-color:#ededed;border-radius:10rem}.card__content-progress .card__content-progress-bar .card__content-progress-bar-fill{height:10px;border-radius:inherit}.ready{background-color:#0a78cc}.already{background-color:#16a693}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StatCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-stat-card', template: "<tk-card [title]=\"title\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div class=\"card__content-info\">\r\n      <div class=\"card__content-wrapper\">\r\n        <img width=\"42\" [src]=\"'assets/icons/' + type + '.png'\" alt=\"\" />\r\n        <div class=\"card__content-text\">\r\n          <div class=\"card__content-label\">\r\n            {{ upgradeStatus === 'ready' ? stats?.totalReady : stats?.totalUpgraded }}\r\n            {{ type === 'user' ? 'Users' : 'Sites' }}</div>\r\n          <div class=\"card__content-description\">{{ upgradeStatus === 'ready' ? 'Ready to Upgrade' : 'Already Upgraded' }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"card__content-progress-wrapper\">\r\n      <div class=\"card__content-progress\">\r\n        <div class=\"card__content-progress-label\">\r\n          <span>{{ readyPercentage }}%</span>\r\n          <span>From all {{ stats?.total }} {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n        </div>\r\n        <div class=\"card__content-progress-bar\">\r\n          <div\r\n            class=\"card__content-progress-bar-fill ready\"\r\n            [class.already]=\"upgradeStatus === 'already'\"\r\n            [style.width.%]=\"readyPercentage\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"upgradeStatus === 'already'\" class=\"card__content-progress\">\r\n        <div class=\"card__content-progress-label\">\r\n          <span>{{ upgradedPercentage }}%</span>\r\n          <span>From all {{ stats?.totalReady }} ready {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n        </div>\r\n        <div class=\"card__content-progress-bar\">\r\n          <div\r\n            class=\"card__content-progress-bar-fill ready\"\r\n            [class.already]=\"upgradeStatus === 'already'\"\r\n            [style.width.%]=\"upgradedPercentage\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</tk-card>\r\n", styles: [":host{display:block;height:100%;box-sizing:border-box}.card__content-info{display:flex;align-items:center;justify-content:space-between}.card__content-text{display:flex;flex-direction:column;gap:.25rem}.card__content-text .card__content-label{font-size:20px}.card__content-text .card__content-description{font-size:12px}.card__content-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem}.card__content-wrapper:first-child{display:flex;gap:.5rem}.card__content-progress-wrapper{display:flex;flex-direction:column;gap:1rem}.card__content-progress{display:flex;flex-direction:column;gap:.25rem;font-size:14px}.card__content-progress .card__content-progress-label{display:flex;align-items:center;justify-content:space-between;padding:.05rem}.card__content-progress .card__content-progress-bar{background-color:#ededed;border-radius:10rem}.card__content-progress .card__content-progress-bar .card__content-progress-bar-fill{height:10px;border-radius:inherit}.ready{background-color:#0a78cc}.already{background-color:#16a693}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], readinessStats: [{
-                type: Input
-            }], upgradeStatus: [{
-                type: Input
-            }] } });
-
-class StatusListCardComponent {
-    constructor() {
-        this.displayLink = false;
-        this.displayStatsDialog = false;
-    }
-    onMouseOverItemText(event, label) {
-        this.hoveredItemLabel = label;
-        this.displayLink = true;
-    }
-    onMouseLeaveItemText(event, label) {
-        this.hoveredItemLabel = label;
-        this.displayLink = false;
-    }
-    onMouseOverItemStats(event, label) {
-        event.stopPropagation();
-        this.hoveredItemLabel = label;
-        this.displayStatsDialog = true;
-    }
-    onMouseLeaveItemStats(event, label) {
-        this.hoveredItemLabel = label;
-        this.displayStatsDialog = false;
-    }
-    trackByFn(index) {
-        return index;
-    }
-}
-StatusListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StatusListCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StatusListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StatusListCardComponent, selector: "tk-status-list-card", inputs: { title: "title", items: "items" }, ngImport: i0, template: "<tk-card [title]=\"title\">\r\n    <ng-container ngProjectAs=\"card-content\">\r\n        <div class=\"card__list-wrapper\">\r\n            <div class=\"card__list-item\" *ngFor=\"let item of items; trackBy: trackByFn\">\r\n                <img *ngIf=\"item.status\" src=\"{{ 'assets/icons/check_icon.png' }}\" alt=\"\">\r\n                <img *ngIf=\"!item.status\" src=\"{{ 'assets/icons/warning_icon.png' }}\" alt=\"\">\r\n                <div \r\n                    class=\"card__item-info\"\r\n                    (mouseover)=\"onMouseOverItemText($event, item.label)\"\r\n                    (mouseleave)=\"onMouseLeaveItemText($event, item.label)\">\r\n                    <div \r\n                        class=\"card__item-text-wrapper\">\r\n                        <div class=\"card__item-text\"\r\n                            [matTooltip]=\"item.tooltip\"\r\n                            [matTooltipPosition]=\"'above'\">\r\n                            <div class=\"card__item-label\">\r\n                                {{ item.label }}\r\n                            </div>\r\n                            <div class=\"card__item-description\">\r\n                                {{ item.description }}\r\n                            </div>\r\n                        </div>\r\n                        <div\r\n                            class=\"card__item-link-wrapper\"\r\n                            *ngIf=\"item.link.href && hoveredItemLabel === item.label && displayLink\"\r\n                            [matTooltip]=\"item.link.tooltip\"\r\n                            [matTooltipPosition]=\"'right'\">\r\n                            <mat-icon>open_in_new</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    <div\r\n                        *ngIf=\"title.includes('Site')\"\r\n                        class=\"card__item-stats\"\r\n                        (mouseover)=\"onMouseOverItemStats($event, item.label)\"\r\n                        (mouseleave)=\"onMouseLeaveItemStats($event, item.label)\">\r\n                        <div class=\"card__item-numbers\">\r\n                            {{ item.value }}/{{ item.totalSites }}\r\n                        </div>\r\n                        <div class=\"card__item-numbers-description\">\r\n                            Ready/All\r\n                        </div>\r\n\r\n                        <div class=\"card__item-stats-dialog\" [class.fade-in]=\"hoveredItemLabel === item.label && displayStatsDialog\">\r\n                            <div class=\"card__item-stats-dialog-item\">\r\n                                <span class=\"name\">Atlanta</span>\r\n                                <div class=\"status\">\r\n                                    <span class=\"indicator\"></span>\r\n                                    <span class=\"status-text\">Ready</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</tk-card>", styles: [":host{color:#333;display:block;height:100%;box-sizing:border-box}.card__list-wrapper{display:flex;flex-direction:column;gap:.5rem}.card__list-item{display:flex;align-items:center;gap:1rem;transition:background-color .3s ease-in-out;padding:.75rem;border-radius:1rem}.card__list-item:hover{background-color:#f9f9f9}.card__item-info{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.card__item-text-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem;cursor:help}.card__item-text{display:flex;flex-direction:column;gap:.05rem}.card__item-text .card__item-label{font-size:18px}.card__item-text .card__item-description{font-size:14px}::ng-deep .mat-tooltip{background:linear-gradient(90deg,rgb(0,0,0) 0%,rgb(73,73,73) 100%)!important;color:#fff!important;font-size:14px!important;border-radius:1rem!important;padding:.75rem!important;line-height:1.25rem}.card__item-link-wrapper{display:flex;align-items:center;justify-content:center;padding:.4rem;border-radius:.45rem;background-color:#eefaff;background:linear-gradient(90deg,#41a5cc,#95ea8b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;cursor:pointer;transition:all .3s ease-in-out}.card__item-link-wrapper:hover{background:linear-gradient(90deg,#41a5cc,#95ea8b);color:#fff;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset;transform:scale(.95)}.card__item-stats{right:0;position:absolute;text-align:right;cursor:pointer}.card__item-stats .card__item-numbers{font-size:28px}.card__item-stats .card__item-numbers-description{font-size:14px}.card__item-stats-dialog{pointer-events:none;z-index:9999;display:flex;flex-direction:column;gap:.5rem;position:absolute;top:50%;background-color:#fff;padding:1rem;border-radius:.5rem;box-shadow:0 4px 6px #0000001a;min-width:200px;max-width:300px;border:1px solid #ddd;opacity:0;transform:translate(-100%) translateY(-50%) scale(.95);transition:opacity .3s ease-in-out}.card__item-stats-dialog-item{display:flex;justify-content:space-between;align-items:center;gap:2.5rem}.card__item-stats-dialog-item span{font-size:18px;color:#555}.card__item-stats-dialog-item .status{display:flex;align-items:center;gap:8px}.card__item-stats-dialog-item .status-text{font-weight:600;color:#777;font-size:14px}.card__item-stats-dialog-item .indicator{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#1170cf}.fade-in{animation:fadeIn .3s forwards}@keyframes fadeIn{to{opacity:1;transform:translate(calc(-100% - 1.5rem)) translateY(-50%) scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StatusListCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tk-status-list-card", template: "<tk-card [title]=\"title\">\r\n    <ng-container ngProjectAs=\"card-content\">\r\n        <div class=\"card__list-wrapper\">\r\n            <div class=\"card__list-item\" *ngFor=\"let item of items; trackBy: trackByFn\">\r\n                <img *ngIf=\"item.status\" src=\"{{ 'assets/icons/check_icon.png' }}\" alt=\"\">\r\n                <img *ngIf=\"!item.status\" src=\"{{ 'assets/icons/warning_icon.png' }}\" alt=\"\">\r\n                <div \r\n                    class=\"card__item-info\"\r\n                    (mouseover)=\"onMouseOverItemText($event, item.label)\"\r\n                    (mouseleave)=\"onMouseLeaveItemText($event, item.label)\">\r\n                    <div \r\n                        class=\"card__item-text-wrapper\">\r\n                        <div class=\"card__item-text\"\r\n                            [matTooltip]=\"item.tooltip\"\r\n                            [matTooltipPosition]=\"'above'\">\r\n                            <div class=\"card__item-label\">\r\n                                {{ item.label }}\r\n                            </div>\r\n                            <div class=\"card__item-description\">\r\n                                {{ item.description }}\r\n                            </div>\r\n                        </div>\r\n                        <div\r\n                            class=\"card__item-link-wrapper\"\r\n                            *ngIf=\"item.link.href && hoveredItemLabel === item.label && displayLink\"\r\n                            [matTooltip]=\"item.link.tooltip\"\r\n                            [matTooltipPosition]=\"'right'\">\r\n                            <mat-icon>open_in_new</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    <div\r\n                        *ngIf=\"title.includes('Site')\"\r\n                        class=\"card__item-stats\"\r\n                        (mouseover)=\"onMouseOverItemStats($event, item.label)\"\r\n                        (mouseleave)=\"onMouseLeaveItemStats($event, item.label)\">\r\n                        <div class=\"card__item-numbers\">\r\n                            {{ item.value }}/{{ item.totalSites }}\r\n                        </div>\r\n                        <div class=\"card__item-numbers-description\">\r\n                            Ready/All\r\n                        </div>\r\n\r\n                        <div class=\"card__item-stats-dialog\" [class.fade-in]=\"hoveredItemLabel === item.label && displayStatsDialog\">\r\n                            <div class=\"card__item-stats-dialog-item\">\r\n                                <span class=\"name\">Atlanta</span>\r\n                                <div class=\"status\">\r\n                                    <span class=\"indicator\"></span>\r\n                                    <span class=\"status-text\">Ready</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</tk-card>", styles: [":host{color:#333;display:block;height:100%;box-sizing:border-box}.card__list-wrapper{display:flex;flex-direction:column;gap:.5rem}.card__list-item{display:flex;align-items:center;gap:1rem;transition:background-color .3s ease-in-out;padding:.75rem;border-radius:1rem}.card__list-item:hover{background-color:#f9f9f9}.card__item-info{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.card__item-text-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem;cursor:help}.card__item-text{display:flex;flex-direction:column;gap:.05rem}.card__item-text .card__item-label{font-size:18px}.card__item-text .card__item-description{font-size:14px}::ng-deep .mat-tooltip{background:linear-gradient(90deg,rgb(0,0,0) 0%,rgb(73,73,73) 100%)!important;color:#fff!important;font-size:14px!important;border-radius:1rem!important;padding:.75rem!important;line-height:1.25rem}.card__item-link-wrapper{display:flex;align-items:center;justify-content:center;padding:.4rem;border-radius:.45rem;background-color:#eefaff;background:linear-gradient(90deg,#41a5cc,#95ea8b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;cursor:pointer;transition:all .3s ease-in-out}.card__item-link-wrapper:hover{background:linear-gradient(90deg,#41a5cc,#95ea8b);color:#fff;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset;transform:scale(.95)}.card__item-stats{right:0;position:absolute;text-align:right;cursor:pointer}.card__item-stats .card__item-numbers{font-size:28px}.card__item-stats .card__item-numbers-description{font-size:14px}.card__item-stats-dialog{pointer-events:none;z-index:9999;display:flex;flex-direction:column;gap:.5rem;position:absolute;top:50%;background-color:#fff;padding:1rem;border-radius:.5rem;box-shadow:0 4px 6px #0000001a;min-width:200px;max-width:300px;border:1px solid #ddd;opacity:0;transform:translate(-100%) translateY(-50%) scale(.95);transition:opacity .3s ease-in-out}.card__item-stats-dialog-item{display:flex;justify-content:space-between;align-items:center;gap:2.5rem}.card__item-stats-dialog-item span{font-size:18px;color:#555}.card__item-stats-dialog-item .status{display:flex;align-items:center;gap:8px}.card__item-stats-dialog-item .status-text{font-weight:600;color:#777;font-size:14px}.card__item-stats-dialog-item .indicator{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#1170cf}.fade-in{animation:fadeIn .3s forwards}@keyframes fadeIn{to{opacity:1;transform:translate(calc(-100% - 1.5rem)) translateY(-50%) scale(1)}}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }] } });
-
-class ChartCardComponent {
-    ngOnInit() {
-        this.initChartOptions();
-    }
-    initChartOptions() {
-        if (this.totalUpgraded === 0)
-            this.totalNotUpgraded = 100;
-        this.chartOptions = {
-            series: [this.totalUpgraded, this.totalNotUpgraded],
-            chart: {
-                type: "donut",
-                height: 250
-            },
-            labels: ["MT", "DI"],
-            colors: ["#808080", "#16A693"],
-            legend: {
-                position: "right",
-                offsetY: 0,
-                fontSize: "14px",
-                // markers: {
-                //     size: 16,
-                //     strokeWidth: 0,
-                //     shape: 'circle'
-                // },
-                itemMargin: {
-                    horizontal: 20,
-                    vertical: 2
-                },
-                formatter: (seriesName, opts) => {
-                    const percentage = this.roundPercentage((opts.w.globals.series[opts.seriesIndex] / (opts.w.globals.series[0] + opts.w.globals.series[1])) * 100);
-                    return seriesName + " " + percentage + "%";
-                }
-            },
-            plotOptions: {
-                pie: {
-                    donut: {
-                        size: "75%"
-                    }
-                }
-            },
-            dataLabels: {
-                enabled: false
-            }
-        };
-    }
-    roundPercentage(value) {
-        return Number((Math.round(value * 100) / 100).toFixed(1));
-    }
-}
-ChartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartCardComponent, selector: "tk-chart-card", inputs: { title: "title", totalUpgraded: "totalUpgraded", totalNotUpgraded: "totalNotUpgraded" }, ngImport: i0, template: "<tk-card [title]=\"title\">\r\n    <ng-container ngProjectAs=\"card-content\">\r\n        <div class=\"chart-container\">\r\n            <apx-chart\r\n                [series]=\"chartOptions.series\"\r\n                [chart]=\"chartOptions.chart\"\r\n                [labels]=\"chartOptions.labels\"\r\n                [colors]=\"chartOptions.colors\"\r\n                [legend]=\"chartOptions.legend\"\r\n                [plotOptions]=\"chartOptions.plotOptions\"\r\n                [dataLabels]=\"chartOptions.dataLabels\">\r\n            </apx-chart>\r\n        </div>\r\n    </ng-container>\r\n</tk-card>", styles: [":host{width:100%;display:block;height:100%;box-sizing:border-box}.chart-container{width:100%;height:220px;display:flex;justify-content:flex-start;align-items:center;padding:0}.chart-container apx-chart{width:100%;max-width:400px}:host ::ng-deep .apexcharts-legend{display:flex!important;flex-direction:column!important;justify-content:center!important}:host ::ng-deep .apexcharts-legend .apexcharts-legend-marker{border-radius:2px!important}:host ::ng-deep .apexcharts-legend .apexcharts-legend-text{font-weight:500!important;color:#333!important}\n"], dependencies: [{ kind: "component", type: i1$2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-chart-card', template: "<tk-card [title]=\"title\">\r\n    <ng-container ngProjectAs=\"card-content\">\r\n        <div class=\"chart-container\">\r\n            <apx-chart\r\n                [series]=\"chartOptions.series\"\r\n                [chart]=\"chartOptions.chart\"\r\n                [labels]=\"chartOptions.labels\"\r\n                [colors]=\"chartOptions.colors\"\r\n                [legend]=\"chartOptions.legend\"\r\n                [plotOptions]=\"chartOptions.plotOptions\"\r\n                [dataLabels]=\"chartOptions.dataLabels\">\r\n            </apx-chart>\r\n        </div>\r\n    </ng-container>\r\n</tk-card>", styles: [":host{width:100%;display:block;height:100%;box-sizing:border-box}.chart-container{width:100%;height:220px;display:flex;justify-content:flex-start;align-items:center;padding:0}.chart-container apx-chart{width:100%;max-width:400px}:host ::ng-deep .apexcharts-legend{display:flex!important;flex-direction:column!important;justify-content:center!important}:host ::ng-deep .apexcharts-legend .apexcharts-legend-marker{border-radius:2px!important}:host ::ng-deep .apexcharts-legend .apexcharts-legend-text{font-weight:500!important;color:#333!important}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], totalUpgraded: [{
-                type: Input
-            }], totalNotUpgraded: [{
-                type: Input
-            }] } });
-
-class SharedModule {
-}
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, declarations: [CardComponent,
-        StatCardComponent,
-        StatusListCardComponent,
-        ChartCardComponent,
-        SummaryCardComponent,
-        TableFiltersComponent], imports: [CommonModule,
-        MaterialModule,
-        NgApexchartsModule,
-        HttpClientModule], exports: [MaterialModule,
-        CardComponent,
-        StatCardComponent,
-        StatusListCardComponent,
-        ChartCardComponent,
-        SummaryCardComponent,
-        TableFiltersComponent] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
-        MaterialModule,
-        NgApexchartsModule,
-        HttpClientModule, MaterialModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        CardComponent,
-                        StatCardComponent,
-                        StatusListCardComponent,
-                        ChartCardComponent,
-                        SummaryCardComponent,
-                        TableFiltersComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        MaterialModule,
-                        NgApexchartsModule,
-                        HttpClientModule
-                    ],
-                    exports: [
-                        MaterialModule,
-                        CardComponent,
-                        StatCardComponent,
-                        StatusListCardComponent,
-                        ChartCardComponent,
-                        SummaryCardComponent,
-                        TableFiltersComponent
-                    ]
-                }]
-        }] });
-
-class UserUpgradeModule {
-}
-UserUpgradeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UserUpgradeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeModule, declarations: [UserUpgradeDataTableComponent], imports: [CommonModule,
-        SharedModule,
-        MatTableModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MatSelectModule,
-        MatProgressSpinnerModule,
-        MatOptionModule,
-        MatPaginatorModule,
-        MatSelectModule], exports: [UserUpgradeDataTableComponent] });
-UserUpgradeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeModule, imports: [CommonModule,
-        SharedModule,
-        MatTableModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MatSelectModule,
-        MatProgressSpinnerModule,
-        MatOptionModule,
-        MatPaginatorModule,
-        MatSelectModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        UserUpgradeDataTableComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        SharedModule,
-                        MatTableModule,
-                        MatButtonModule,
-                        MatCheckboxModule,
-                        MatSelectModule,
-                        MatProgressSpinnerModule,
-                        MatOptionModule,
-                        MatPaginatorModule,
-                        MatSelectModule
-                    ],
-                    exports: [
-                        UserUpgradeDataTableComponent
-                    ]
-                }]
-        }] });
-
-class SiteUpgradeService {
-    constructor() {
-        this.siteUpdateStatusEvent = new Subject();
-        this.apiService = inject(APIService);
-    }
-    getSiteUpgradeStatusCounts() {
-        return this.apiService.fetch(API$1.SITE_UPGRADE.GET_SITES_UPGRADE_STATUS_COUNTS.replace(':customerId', this.customerId));
-    }
-    getSiteUpgradeRecords() {
-        return this.apiService.fetch(API$1.SITE_UPGRADE.GET_SITES_UPGRADE_DATA.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return resp.content.map((record) => ({
-                siteId: record.siteId,
-                siteName: record.siteName,
-                totalUsers: record.totalUsers,
-                totalReadyUsers: record.readyUsers,
-                totalNotReadyUsers: record.notReadyUsers,
-                totalUpgradedUsers: record.totalUpgradedUsers,
-                totalFailedUsers: record.totalFailedToUpgradeUsers,
-                locationMapping: record.locationMappingStatus,
-                PSTNTrunk: record.pstnTrunkStatus,
-                upgradeStatus: record.siteUpgradeStatus
-            }));
-        }));
-    }
-    getBatchSites() {
-        return this.apiService.fetch(API$1.SITE_UPGRADE.GET_BATCH_SITES.replace(':customerId', this.customerId));
-    }
-    collectSiteCache(siteId, migrationType = 'webex') {
-        return this.apiService.post(API$1.SITE_UPGRADE.WEBEX_CACHE_COLLECTION
-            .replace(':siteId', String(siteId))
-            .replace(':migrationType', migrationType), {});
-    }
-    migrateSite(siteId, batchId) {
-        return this.apiService.post(API$1.SITE_UPGRADE.MIGRATE_SITE.replace(':siteId', String(siteId)), {}, { batchId: batchId || '' });
-    }
-    getBatchesStatuses(batchIds) {
-        return this.apiService.post(API$1.SITE_UPGRADE.WEBEX_BATCH_STATUS
-            .replace(':customerId', this.customerId), batchIds, false)
-            .pipe(map((result) => {
-            this.siteUpdateStatusEvent.next(result);
-            return result;
-        }));
-    }
-    getSiteListForCollectAndBuildWebexCache() {
-        return this.apiService.fetch(API$1.SITE_UPGRADE.WEBEX_CACHE_COLLECTION_SITE_LIST.replace(':customerId', this.customerId))
-            .pipe(map((siteSet) => this.siteSetForCollectAndBuildWebexCache = siteSet));
-    }
-    getCUCMListCurrentlyInCollectAndBuildWebexCache() {
-        return this.apiService.fetch(API$1.SITE_UPGRADE.WEBEX_CACHE_COLLECTION_CUCM_LIST.replace(':customerId', this.customerId))
-            .pipe(map((cucmSet) => this.cucmSetInCollectAndBuildWebexCache = cucmSet));
-    }
-    getMigrationBatchesStatuses() {
-        return this.apiService.fetch(API$1.SITE_UPGRADE.BATCH_STATUS.replace(':customerId', this.customerId));
-        /*.pipe(map((result: BatchStatusDTO[]) => {
-          this.siteUpdateStatusEvent.next(result);
-          return result;
-        }))*/
-    }
-    getMigratedSiteStatus(pageSize, page) {
-        return this.apiService.fetchPagination(API$1.SITE_UPGRADE.MIGRATION_STATUS.replace(':customerId', this.customerId), pageSize, page, {}, false);
-    }
-    // TODO: Impl the site upgrade logic here
-    upgradeSite(site) {
-        const customerId = site.customerId;
-        const siteId = site.siteId;
-    }
-}
-SiteUpgradeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SiteUpgradeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-const STATUSES = {
-    COMPLETED: 'Completed',
-    NEW: 'New',
-    IN_PROGRESS: 'In Progress',
-    FAILED_IN_ERROR: 'Failed-in error',
-    FAILED: 'Failed',
-    FAILED_WITH_RETRY: 'Failed with Retry',
-    COLLECTING: 'Collecting',
-    FAILED_COLLECTING: 'Failed on collecting',
-    WAITING_FOR_REVIEW: 'Waiting for review'
-};
-
-class ProgressBarComponent {
-    constructor() {
-        this.isAvailable = false;
-        this._progress = 0;
-        this.color = 'grey';
-    }
-    set progress(value) {
-        this._progress = Math.max(0, Math.min(100, Number(value) || 0));
-        this.setColor(this._progress);
-    }
-    get progress() { return this._progress; }
-    setColor(p) {
-        if (p <= 20)
-            this.color = 'red';
-        else if (p <= 40)
-            this.color = 'yellow';
-        else if (p <= 60)
-            this.color = 'darkblue';
-        else if (p <= 80)
-            this.color = 'lightblue';
-        else
-            this.color = 'green';
-    }
-}
-ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ProgressBarComponent, selector: "app-progress-bar", inputs: { isAvailable: "isAvailable", progress: "progress" }, ngImport: i0, template: "<!--<div *ngIf=\"isAvailable\" class=\"progress-bar-container\">\n  <div class=\"progress-bar {{color}}\" [ngStyle]=\"{'width': progress + '%'}\"></div>\n</div>-->\n<div *ngIf=\"isAvailable\" class=\"progress-bar-container\">\n  <div class=\"progress-bar\" [ngClass]=\"color\" [style.width.%]=\"progress\"></div>\n</div>\n", styles: [".progress-bar-container{background-color:#e5e5e5;border-radius:20px;width:100%}.progress-bar{height:7px;width:0;border-radius:15px;text-align:center}.progress-percent{font-weight:600}.progress-bar.green{background-color:#94d326}.progress-bar.red{background-color:#ed4364}.progress-bar.yellow{background-color:#fed200}.progress-bar{height:8px;border-radius:4px;transition:width .25s ease,background-color .25s ease}.progress-bar.red{background-color:#e53935}.progress-bar.yellow{background-color:#fbc02d}.progress-bar.darkblue{background-color:#1e3a8a}.progress-bar.lightblue{background-color:#60a5fa}.progress-bar.green{background-color:#22c55e}.progress-bar.grey{background-color:#9ca3af}.progress-bar.darkblue{background-color:#2c355d}.progress-bar.lightblue{background-color:#2299d9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProgressBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-progress-bar', template: "<!--<div *ngIf=\"isAvailable\" class=\"progress-bar-container\">\n  <div class=\"progress-bar {{color}}\" [ngStyle]=\"{'width': progress + '%'}\"></div>\n</div>-->\n<div *ngIf=\"isAvailable\" class=\"progress-bar-container\">\n  <div class=\"progress-bar\" [ngClass]=\"color\" [style.width.%]=\"progress\"></div>\n</div>\n", styles: [".progress-bar-container{background-color:#e5e5e5;border-radius:20px;width:100%}.progress-bar{height:7px;width:0;border-radius:15px;text-align:center}.progress-percent{font-weight:600}.progress-bar.green{background-color:#94d326}.progress-bar.red{background-color:#ed4364}.progress-bar.yellow{background-color:#fed200}.progress-bar{height:8px;border-radius:4px;transition:width .25s ease,background-color .25s ease}.progress-bar.red{background-color:#e53935}.progress-bar.yellow{background-color:#fbc02d}.progress-bar.darkblue{background-color:#1e3a8a}.progress-bar.lightblue{background-color:#60a5fa}.progress-bar.green{background-color:#22c55e}.progress-bar.grey{background-color:#9ca3af}.progress-bar.darkblue{background-color:#2c355d}.progress-bar.lightblue{background-color:#2299d9}\n"] }]
-        }], propDecorators: { isAvailable: [{
-                type: Input
-            }], progress: [{
-                type: Input
-            }] } });
-
-const MAX_INTEGER = 2147483647;
-class SiteUpgradeDataTableComponent {
-    constructor() {
-        this.siteUpgradeService = inject(SiteUpgradeService);
-        this.apiService = inject(APIService);
-        this.destroy$ = new Subject();
-        this.STATUS_ENTRIES = STATUS_ENTRIES;
-        this.dataPending = false;
-        this.displayedColumns = ['site', 'ready users', 'upgraded users', 'location mapping', 'pstn trunk', 'site upgrade status', 'progressBar', 'actions', 'userUpgradeLoader'];
-        this.selection = new SelectionModel(true, []);
-        this.filters = [];
-        this.activeFilters = {};
-        this.subscriptions = new Subscription();
-        this.statusCounts = {};
-    }
-    ngOnInit() {
-        this.dataPending = true;
-        this.apiService.token = this.token;
-        this.siteUpgradeService.customerId = this.customerId;
-        const subsc1 = forkJoin([
-            this.siteUpgradeService.getSiteUpgradeRecords(),
-            this.siteUpgradeService.getMigratedSiteStatus(MAX_INTEGER, 0),
-            this.siteUpgradeService.getSiteListForCollectAndBuildWebexCache(),
-            this.siteUpgradeService.getCUCMListCurrentlyInCollectAndBuildWebexCache(),
-            this.siteUpgradeService.getBatchSites()
-        ]).pipe(takeUntil(this.destroy$))
-            .subscribe((results) => {
-            const records = results[0].map(site => ({
-                ...site,
-                siteId: Number(site.siteId)
-            }));
-            this.data = new MatTableDataSource(records);
-            this.dataPending = false;
-            this.setupCustomFilter();
-            this.initializeFilters(records);
-            this.setMigratedStatus(results[1]);
-            if (this.data?.data.length && results[2]?.length) {
-                this.initCollectProgress(results[2]);
-            }
-            if (this.data?.data.length && results[4]?.length) {
-                this.setBatchIdToSites(results[4]);
-            }
-        });
-        this.subscriptions.add(subsc1);
-        const subsc2 = this.siteUpgradeService.getSiteUpgradeStatusCounts()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((statusCounts) => {
-            this.statusCounts['Ready'] = statusCounts['READY'] || 0;
-            this.statusCounts['Not Ready'] = statusCounts['NOT_READY'] || 0;
-            this.statusCounts['Completed'] = statusCounts['COMPLETED'] || 0;
-            this.statusCounts['Failed'] = statusCounts['FAILED'] || 0;
-        });
-        this.subscriptions.add(subsc2);
-        const subsc3 = this.siteUpgradeService.siteUpdateStatusEvent
-            .subscribe((updatedStatuses) => {
-            this.handleCheckBatchStatusResponse(updatedStatuses);
-        });
-        this.subscriptions.add(subsc3);
-    }
-    onSiteMigration(site) {
-        site.pending = true;
-        site.isProgressBarAvailable = true;
-        site.isMigrationInProgress = true;
-        const subsc = this.siteUpgradeService.migrateSite(String(site.siteId), String(site.batchId))
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((migrationFormId) => {
-            site.migrationFormId = migrationFormId;
-            site.progress = 1;
-            this.runMigrationProgress(site);
-        });
-        this.subscriptions.add(subsc);
-    }
-    runMigrationProgress(site) {
-        this.updateMigrationProgress(site);
-        site.interval = setInterval(() => {
-            this.updateMigrationProgress(site);
-        }, 10000);
-    }
-    updateMigrationProgress(site) {
-        if (!site || !site.isMigrationInProgress) {
-            return;
-        }
-        this.siteUpgradeService.getMigrationBatchesStatuses()
-            .subscribe((statuses) => {
-            if (statuses?.length) {
-                statuses.forEach((statusItem) => {
-                    const ind = this.getSiteIndex(statusItem.id);
-                    if (ind > -1) {
-                        this.data.data[ind].progress = statusItem.progress;
-                        this.data.data[ind].status = statusItem.status;
-                        if (statusItem.status !== 'In Progress') {
-                            this.data.data[ind].pending = false;
-                            this.data.data[ind].isMigrationInProgress = false;
-                            this.data.data[ind].isProgressBarAvailable = false;
-                        }
-                    }
-                });
-                if (statuses.filter(statusItem => statusItem.status === 'In Progress').length < 1) {
-                    this.data.data.forEach(site => {
-                        site.pending = false;
-                        site.isMigrationInProgress = false;
-                        site.isProgressBarAvailable = false;
-                    });
-                }
-            }
-        }, () => {
-            this.resetMigrationProgress(site, 'FAILED');
-        });
-    }
-    resetMigrationProgress(site, status) {
-        site.isMigrationInProgress = false;
-        site.pending = false;
-        site.isProgressBarAvailable = false;
-        if (site.interval) {
-            clearInterval(site.interval);
-        }
-        if (status) {
-            site.status = status;
-        }
-    }
-    onCollect(site) {
-        site.pending = true;
-        site.status = STATUSES.COLLECTING;
-        // const ind =
-        const subscription = this.siteUpgradeService.collectSiteCache(Number(site.siteId), 'webex')
-            .subscribe({
-            error: () => site.pending = false
-        });
-        this.subscriptions.add(subscription);
-        /*setTimeout(() => {
-          this.runBatchCheckStatus();
-        }, 700);*/
-        setTimeout(() => {
-            this.initCollectInterval(site);
-        }, 700);
-    }
-    initCollectInterval(site) {
-        if (!site.interval && !site.initPending) {
-            site.initPending = true;
-            this.getCUCMListAlreadyInCollectWebexCache(site);
-            this.getSiteListForCollectAndBuildWebexCache(site);
-            site.interval = setInterval(() => {
-                this.getCUCMListAlreadyInCollectWebexCache(site);
-                this.getSiteListForCollectAndBuildWebexCache(site);
-            }, 10000);
-        }
-    }
-    getSiteListForCollectAndBuildWebexCache(site) {
-        this.siteUpgradeService.getSiteListForCollectAndBuildWebexCache()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((siteSet) => {
-            if (!siteSet || !siteSet.length) {
-                site.pending = false;
-                this.removeInterval(site);
-                site.isCollected = true;
-            }
-        }, () => {
-            site.pending = false;
-            this.removeInterval(site);
-        });
-    }
-    removeInterval(site) {
-        if (site.interval) {
-            clearInterval(site.interval);
-        }
-    }
-    handleBatchCUCMAlreadyInCollectCache() {
-        this.data.data.forEach(site => {
-            site.isCUCMInCollectCache =
-                this.siteUpgradeService?.cucmSetInCollectAndBuildWebexCache?.includes(Number(site.sourceId));
-        });
-    }
-    getCUCMListAlreadyInCollectWebexCache(site) {
-        this.siteUpgradeService.getCUCMListCurrentlyInCollectAndBuildWebexCache()
-            .pipe(takeUntil(this.destroy$))
-            .pipe(map$1((cucmList) => {
-            this.handleBatchCUCMAlreadyInCollectCache();
-            if (!cucmList || !cucmList.length) {
-                site.pending = false;
-                this.removeInterval(site);
-                site.isCollected = true;
-            }
-            return cucmList;
-        })).subscribe({
-            error: () => {
-                site.pending = false;
-                site.initPending = true;
-                this.removeInterval(site);
-            }
-        });
-    }
-    checkBatchStatus(batchIds) {
-        const subsc = this.siteUpgradeService.getBatchesStatuses(batchIds)
-            .pipe(takeUntil(this.destroy$), catchError$1(() => {
-            clearInterval(this.collectingBatchInterval);
-            return of([]);
-        })).subscribe((updatedStatuses) => {
-            this.handleCheckBatchStatusResponse(updatedStatuses);
-        });
-        this.subscriptions.add(subsc);
-    }
-    handleCheckBatchStatusResponse(updatedStatuses) {
-        if (updatedStatuses && updatedStatuses.length && this.data?.data?.length) {
-            updatedStatuses.forEach(updatedStatus => {
-                const ind = this.data?.data.findIndex(batch => batch.siteId === updatedStatus.id);
-                if (ind > -1 && this.data?.data[ind] && updatedStatus.status) {
-                    this.data.data[ind].upgradeStatus = updatedStatus.status;
-                }
-            });
-        }
-        else {
-            if (this.collectingBatchInterval) {
-                clearInterval(this.collectingBatchInterval);
-            }
-        }
-    }
-    getSiteIndex(batchId) {
-        if (this.data.data.length) {
-            return this.data.data.findIndex(siteItem => siteItem.batchId === batchId);
-        }
-        return -1;
-    }
-    initializeFilters(records) {
-        if (!records?.length) {
-            this.filters = [];
-            return;
-        }
-        // Extract unique sites (skip empty/null)
-        const uniqueSites = [
-            ...new Set(records
-                .map(record => record.siteName?.trim())
-                .filter((site) => !!site))
-        ];
-        const siteOptions = uniqueSites.map(site => ({
-            label: site,
-            value: site.toLowerCase().replace(/\s+/g, '-')
-        }));
-        // Extract unique statuses (skip empty/null)
-        const uniqueStatuses = [
-            ...new Set(records
-                .map(record => record.upgradeStatus?.trim())
-                .filter((status) => !!status))
-        ];
-        const statusOptions = uniqueStatuses.map(status => ({
-            label: STATUS_ENTRIES[status],
-            value: status.toLowerCase().replace(/\s+/g, '-')
-        }));
-        this.filters = [];
-        if (siteOptions.length) {
-            this.filters.push({
-                id: 'sites',
-                type: 'select',
-                columnKey: 'Site',
-                placeholder: 'Sites',
-                options: siteOptions
-            });
-        }
-        if (statusOptions.length) {
-            this.filters.push({
-                id: 'status',
-                type: 'select',
-                columnKey: 'Site Upgrade Status',
-                placeholder: 'Upgrade Status',
-                options: statusOptions
-            });
-        }
-    }
-    onFilter(filterEvent) {
-        const { key, value } = filterEvent;
-        let filterValue;
-        if (value && value.value !== undefined) {
-            filterValue = value.value;
-        }
-        else if (value && value.target) {
-            filterValue = value.target.value;
-        }
-        else {
-            filterValue = value;
-        }
-        // Handle "All" option or empty values - remove the filter
-        if (filterValue === 'all' || !filterValue || filterValue === '') {
-            delete this.activeFilters[key];
-        }
-        else {
-            this.activeFilters[key] = filterValue;
-        }
-        this.applyFilters();
-    }
-    setupCustomFilter() {
-        this.data.filterPredicate = (data, filter) => {
-            const filters = JSON.parse(filter || '{}');
-            for (const [key, value] of Object.entries(filters)) {
-                if (!value)
-                    continue;
-                switch (key) {
-                    case 'Site':
-                        if (data.siteName !== this.getSiteNameFromValue(value)) {
-                            return false;
-                        }
-                        break;
-                    case 'Site Upgrade Status':
-                        if (!this.matchesUpgradeStatus(data.upgradeStatus, value)) {
-                            return false;
-                        }
-                        break;
-                }
-            }
-            return true;
-        };
-    }
-    applyFilters() {
-        this.data.filter = JSON.stringify(this.activeFilters);
-    }
-    getSiteNameFromValue(value) {
-        // Since we're now using actual site names, just convert back from slug format
-        return value.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
-    }
-    matchesUpgradeStatus(status, filterValue) {
-        // Handle direct status matching for cleaner implementation
-        return status.toLowerCase().replace(/\s+/g, '-') === filterValue.toLowerCase();
-    }
-    get filteredDataCount() {
-        return this.data?.filteredData?.length || 0;
-    }
-    /** Whether the number of selected elements matches the total number of rows. */
-    isAllSelected() {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.data?.data.length || 0;
-        return numSelected === numRows;
-    }
-    /** Selects all rows if they are not all selected; otherwise clear selection. */
-    masterToggle() {
-        this.isAllSelected() ?
-            this.selection.clear() :
-            this.data?.data.forEach(row => this.selection.select(row));
-    }
-    getLocationMappingClass(locationMapping) {
-        return locationMapping ? 'success' : 'error';
-    }
-    getSiteUpgradeStatusClass(status) {
-        switch (status.toLowerCase()) {
-            case 'ready':
-                return 'status-ready';
-            case 'partial ready':
-                return 'partial-ready';
-            case 'completed':
-                return 'completed';
-            case 'failed':
-                return 'failed';
-            case 'not ready':
-                return 'not-ready';
-            default:
-                return 'not-ready';
-        }
-    }
-    upgradeSite(site) {
-        this.siteUpgradeService.upgradeSite(site);
-    }
-    setMigratedStatus(webexMigratedSites) {
-        if (webexMigratedSites && webexMigratedSites.length && this.data?.data?.length) {
-            const statusObj = this.getSiteStatusMappingObj(webexMigratedSites);
-            this.data.data.forEach(site => site.migrationFormStatus = statusObj[site.siteId] || '');
-        }
-    }
-    getSiteStatusMappingObj(webexMigratedSites) {
-        const statusObj = {};
-        webexMigratedSites.forEach(item => {
-            if (item.site?.id) {
-                statusObj[String(item.site.id)] = item.migrationFormStatus;
-            }
-        });
-        return statusObj;
-    }
-    setBatchIdToSites(batches) {
-        if (this.data?.data?.length) {
-            this.data.data.forEach(site => {
-                site.batchId = this.getBatchId(batches, site.siteId);
-            });
-        }
-    }
-    getBatchId(batches, siteId) {
-        const ind = batches.findIndex(batch => batch.siteId === siteId);
-        return ind > -1 ? batches[ind].id : null;
-    }
-    initCollectProgress(sitesInProgress) {
-        this.data?.data.forEach(site => {
-            if (sitesInProgress.includes(site.siteId)) {
-                site.pending = true;
-                this.initCollectInterval(site);
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.dataPending = false;
-        if (this.collectingBatchInterval) {
-            clearInterval(this.collectingBatchInterval);
-        }
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
-    }
-}
-SiteUpgradeDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SiteUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SiteUpgradeDataTableComponent, selector: "tk-site-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"siteUpgradeTable\" class=\"wrapper\">\r\n  <div class=\"site-upgrade-status-wrapper\">\r\n    <tk-summary-card [description]=\"'Sites are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites are not ready'\" [value]=\"statusCounts['Not Ready']\"\r\n                     [status]=\"'Not Ready'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites failed to upgrade'\" [value]=\"statusCounts['Failed']\"\r\n                     [status]=\"'Failed'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\"\r\n                     [status]=\"'Completed'\"></tk-summary-card>\r\n  </div>\r\n  <div class=\"table-action-panel\">\r\n    <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n    <div class=\"action-wrapper\">\r\n      <span>{{ filteredDataCount }} Sites</span>\r\n    </div>\r\n  </div>\r\n  <table mat-table [dataSource]=\"data\" class=\"site-upgrade-table\">\r\n\r\n    <!-- Site Column -->\r\n    <ng-container matColumnDef=\"site\">\r\n      <th mat-header-cell *matHeaderCellDef>Site</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"site-info\">\r\n          {{ element.siteName }}\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Ready Users Column -->\r\n    <ng-container matColumnDef=\"ready users\">\r\n      <th mat-header-cell *matHeaderCellDef>Ready Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalReadyUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Ready/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Upgraded Users Column -->\r\n    <ng-container matColumnDef=\"upgraded users\">\r\n      <th mat-header-cell *matHeaderCellDef>Upgraded Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalUpgradedUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Upgraded/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Location Mapping Column -->\r\n    <ng-container matColumnDef=\"location mapping\">\r\n      <th mat-header-cell *matHeaderCellDef>Location Mapping</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.locationMapping\" src=\"assets/icons/check2_icon.png\" alt=\"Location Mapping Enabled\"/>\r\n          <img *ngIf=\"!element.locationMapping\" src=\"assets/icons/issue_icon.png\" alt=\"Location Mapping Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- PSTN Trunk Column -->\r\n    <ng-container matColumnDef=\"pstn trunk\">\r\n      <th mat-header-cell *matHeaderCellDef>PSTN Trunk</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.PSTNTrunk\" src=\"assets/icons/check2_icon.png\" alt=\"PSTN Trunk Enabled\"/>\r\n          <img *ngIf=\"!element.PSTNTrunk\" src=\"assets/icons/issue_icon.png\" alt=\"PSTN Trunk Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Site Upgrade Status Column -->\r\n    <ng-container matColumnDef=\"site upgrade status\">\r\n      <th mat-header-cell *matHeaderCellDef>Site Upgrade Status</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"upgrade-status-cell\">\r\n          <ng-container *ngIf=\"element.upgradeStatus === 'READY'; else statusBlock\">\r\n            <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"onSiteMigration(element)\">Upgrade</button>\r\n          </ng-container>\r\n          <ng-template #statusBlock>\r\n            <div class=\"status-info\">\r\n              <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n              <span>{{ STATUS_ENTRIES[element.upgradeStatus] }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"progressBar\">\r\n      <th class=\"header\" mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"app-progress-bar-container\">\r\n          <app-progress-bar\r\n            [isAvailable]=\"element.isProgressBarAvailable\"\r\n            [progress]=\"element.progress\"\r\n            #progressBars>\r\n          </app-progress-bar>\r\n        </div>\r\n        <span *ngIf=\"element.isProgressBarAvailable\" class=\"progress-percents\">\r\n            {{ element.progress }} %\r\n          </span>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Action Column -->\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\r\n      <td mat-cell *matCellDef=\"let element\" class=\"progress-spinner-td\">\r\n        <div class=\"flex-container\">\r\n          <button mat-icon-button [matMenuTriggerFor]=\"defaultBatchMenu\">\r\n            <span style=\"font-size: 17px;\">\u22EE</span>\r\n          </button>\r\n        </div>\r\n\r\n        <mat-menu\r\n          #defaultBatchMenu=\"matMenu\"\r\n          xPosition=\"after\"\r\n          class=\"webex-action-menu\">\r\n\r\n          <div class=\"webex-action-menu-row\"\r\n               [ngClass]=\"{ 'webex-action-menu-row-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED' }\"\r\n               (click)=\"element.pending || element.migrationFormStatus === 'NOT_PREPARED' ? $event.stopPropagation() : onCollect(element)\">\r\n                    <span\r\n                      class=\"webex-details-icon webex-icon\"\r\n                      [ngClass]=\"{ 'migration-action-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED'}\">\r\n                    </span>\r\n            <span class=\"webex-action-menu-title\">Collect</span>\r\n          </div>\r\n        </mat-menu>\r\n\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"userUpgradeLoader\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n        <mat-progress-spinner\r\n          *ngIf=\"element.pending\"\r\n          class=\"field-spinner\"\r\n          [diameter]=\"20\"\r\n          mode=\"indeterminate\">\r\n        </mat-progress-spinner>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.webex-action-menu{box-shadow:0 4px 40px #0000001a!important;border-radius:0!important;width:258px;box-sizing:content-box;cursor:pointer}.webex-action-menu-row-disabled{cursor:default!important;opacity:.4}.webex-action-menu-row-disabled .webex-action-menu-title{color:#bababa!important;line-height:23px}.app-progress-bar-container{margin:7px 20px 0 0}.progress-bar-container{min-width:40px}.webex-action-menu-row:hover{background:#f5f5f5}.webex-icon{display:inline-block;height:25px;width:25px;margin:0 7px 0 0}.webex-details-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.2115 19.5H17.0961V16H16.2115V19.5ZM16.6538 15.0865C16.7743 15.0929 16.8782 15.0509 16.9653 14.9606C17.0525 14.8702 17.0961 14.7647 17.0961 14.6442C17.0961 14.5237 17.0509 14.4199 16.9605 14.3327C16.8701 14.2455 16.7679 14.2019 16.6538 14.2019C16.5333 14.2019 16.4294 14.2455 16.3422 14.3327C16.2551 14.4199 16.2115 14.5237 16.2115 14.6442C16.2115 14.7583 16.2551 14.8606 16.3422 14.951C16.4294 15.0413 16.5333 15.0865 16.6538 15.0865ZM4.99997 3.99998V10.1827V10.1538V20V3.99998ZM7.25 13.75H10.7231C10.8679 13.4692 11.0307 13.2038 11.2115 12.9538C11.3923 12.7038 11.591 12.4692 11.8077 12.25H7.25V13.75ZM7.25 17.75H10.0173C9.98009 17.5 9.9615 17.2516 9.9615 17.0048C9.9615 16.758 9.97688 16.5064 10.0076 16.25H7.25V17.75ZM5.3077 21.5C4.80257 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V4.3077C3.5 3.80257 3.675 3.375 4.025 3.025C4.375 2.675 4.80257 2.5 5.3077 2.5H13.25L18.5 7.74995V10.425C18.2538 10.3506 18.0073 10.2933 17.7605 10.2529C17.5137 10.2125 17.2602 10.1891 17 10.1827V8.49995H12.5V3.99998H5.3077C5.23077 3.99998 5.16024 4.03203 5.09612 4.09613C5.03202 4.16024 4.99997 4.23077 4.99997 4.3077V19.6923C4.99997 19.7692 5.03202 19.8397 5.09612 19.9038C5.16024 19.9679 5.23077 20 5.3077 20H10.7615C10.9064 20.2871 11.0692 20.5557 11.25 20.8057C11.4307 21.0557 11.6327 21.2871 11.8557 21.5H5.3077ZM16.6538 12.3462C17.9025 12.3462 18.9647 12.784 19.8403 13.6596C20.7159 14.5352 21.1538 15.5974 21.1538 16.8461C21.1538 18.0948 20.7159 19.157 19.8403 20.0326C18.9647 20.9083 17.9025 21.3461 16.6538 21.3461C15.4051 21.3461 14.3429 20.9083 13.4673 20.0326C12.5916 19.157 12.1538 18.0948 12.1538 16.8461C12.1538 15.5974 12.5916 14.5352 13.4673 13.6596C14.3429 12.784 15.4051 12.3462 16.6538 12.3462Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\")}.webex-action-menu-row{padding:5px 15px;display:flex;justify-content:flex-start}.webex-action-menu-row .webex-action-menu-title{line-height:23px}.mat-menu-content:not(:empty){padding-top:0!important}.mat-menu-panel{min-height:auto!important}#siteUpgradeTable{font-family:Inter,sans-serif!important}.wrapper{display:flex;flex-direction:column;gap:1rem}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}.mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0;position:absolute}.progress-percents{font-weight:500;font-size:12px}::ng-deep .mat-progress-spinner-td{position:relative}::ng-deep #siteUpgradeTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.site-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.site-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.site-upgrade-table .mat-header-row{font-size:12px;height:35px}.site-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}.site-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}.site-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#1170cf}.site-upgrade-table .indicator-status-ready{color:#1170cf!important}.site-upgrade-table .device-info{display:flex;align-items:center;gap:12px}.site-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:4px}.site-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.site-upgrade-table .device-info .device-name-wrapper .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.site-upgrade-table .device-info .device-model{font-size:12px;color:#757575}.site-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.site-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.site-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.site-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.site-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.site-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.site-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.site-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.site-upgrade-table .flex-container{display:flex}.site-upgrade-table .upgrade-button{border:1px solid #08599c!important;color:#08599c!important;background:white!important;border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}.site-upgrade-table .upgrade-button:hover{background-color:#e3f2fd!important}.site-upgrade-table .user-count-info .user-count{font-weight:500;color:#212121}.site-upgrade-table .user-count-info .user-label{font-size:12px;color:#757575}.site-upgrade-table .status-icon-cell,.site-upgrade-table .collect-icon-cell{display:flex;align-items:center}.site-upgrade-table .icon-play{width:24px;height:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2219%22 viewBox%3D%220 0 18 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.09567 11.7427L11.3625 9.64421C11.523 9.54226 11.6033 9.40067 11.6033 9.21945C11.6033 9.03821 11.523 8.89615 11.3625 8.79326L8.09567 6.69472C7.92739 6.57933 7.75479 6.5701 7.57787 6.66701C7.40096 6.76391 7.3125 6.91497 7.3125 7.12019V11.3173C7.3125 11.5225 7.40096 11.6736 7.57787 11.7705C7.75479 11.8674 7.92739 11.8581 8.09567 11.7427ZM9.00124 16.3437C8.01579 16.3437 7.08951 16.1567 6.22241 15.7827C5.3553 15.4087 4.60104 14.9012 3.95963 14.26C3.3182 13.6189 2.81041 12.865 2.43624 11.9982C2.06208 11.1315 1.875 10.2054 1.875 9.21999C1.875 8.23454 2.062 7.30826 2.436 6.44116C2.81 5.57405 3.31756 4.81979 3.95869 4.17838C4.59983 3.53695 5.35376 3.02916 6.22048 2.65499C7.08719 2.28083 8.01328 2.09375 8.99873 2.09375C9.98418 2.09375 10.9105 2.28075 11.7776 2.65475C12.6447 3.02875 13.3989 3.53631 14.0403 4.17744C14.6818 4.81858 15.1896 5.57251 15.5637 6.43923C15.9379 7.30594 16.125 8.23203 16.125 9.21748C16.125 10.2029 15.938 11.1292 15.564 11.9963C15.19 12.8634 14.6824 13.6177 14.0413 14.2591C13.4001 14.9005 12.6462 15.4083 11.7795 15.7825C10.9128 16.1566 9.98669 16.3437 9.00124 16.3437ZM8.99998 15.2187C10.675 15.2187 12.0937 14.6375 13.2562 13.475C14.4187 12.3125 15 10.8937 15 9.21873C15 7.54373 14.4187 6.12498 13.2562 4.96248C12.0937 3.79998 10.675 3.21873 8.99998 3.21873C7.32498 3.21873 5.90623 3.79998 4.74373 4.96248C3.58123 6.12498 2.99998 7.54373 2.99998 9.21873C2.99998 10.8937 3.58123 12.3125 4.74373 13.475C5.90623 14.6375 7.32498 15.2187 8.99998 15.2187Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}.site-upgrade-table .collect-icon-cell{cursor:pointer}::ng-deep .action-wrapper{display:flex;align-items:center;flex:1;justify-content:space-between;gap:1rem;color:#555}.table-action-panel{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:1rem}.pay-button-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid #2c355d;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.pay-button-icon:after{content:\"\";width:0;height:0;border-left:6px solid #2c355d;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}.pay-button-icon:hover{border-color:#2c355d;background-color:#f8fafc;transform:scale(1.05)}.pay-button-icon:hover:after{border-left-color:#2c355d}.pay-button-icon:active{transform:scale(.95);background-color:#e2e8f0}.pay-button-icon:disabled,.pay-button-icon.disabled{opacity:.5;cursor:not-allowed}.pay-button-icon:disabled:hover,.pay-button-icon.disabled:hover{transform:none;border-color:#d1d5db;background-color:#fff}.pay-button-icon:disabled:hover:after,.pay-button-icon.disabled:hover:after{border-left-color:#2c355d}.pay-button-icon.small{width:32px;height:32px;border-width:1.5px}.pay-button-icon.small:after{border-left-width:6px;border-top-width:5px;border-bottom-width:5px;margin-left:1px}.pay-button-icon.large{width:48px;height:48px;border-width:2.5px}.pay-button-icon.large:after{border-left-width:10px;border-top-width:7px;border-bottom-width:7px;margin-left:3px}.pay-button-icon.xl{width:56px;height:56px;border-width:3px}.pay-button-icon.xl:after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px;margin-left:3px}.pay-button-icon.loading:after{display:none}.pay-button-icon.loading:before{content:\"\";width:16px;height:16px;border:2px solid #2c355d;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pay-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#2c355d;transition:color .3s ease}.pay-button .pay-button-icon{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ProgressBarComponent, selector: "app-progress-bar", inputs: ["isAvailable", "progress"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeDataTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-site-upgrade-data-table', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"siteUpgradeTable\" class=\"wrapper\">\r\n  <div class=\"site-upgrade-status-wrapper\">\r\n    <tk-summary-card [description]=\"'Sites are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites are not ready'\" [value]=\"statusCounts['Not Ready']\"\r\n                     [status]=\"'Not Ready'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites failed to upgrade'\" [value]=\"statusCounts['Failed']\"\r\n                     [status]=\"'Failed'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\"\r\n                     [status]=\"'Completed'\"></tk-summary-card>\r\n  </div>\r\n  <div class=\"table-action-panel\">\r\n    <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n    <div class=\"action-wrapper\">\r\n      <span>{{ filteredDataCount }} Sites</span>\r\n    </div>\r\n  </div>\r\n  <table mat-table [dataSource]=\"data\" class=\"site-upgrade-table\">\r\n\r\n    <!-- Site Column -->\r\n    <ng-container matColumnDef=\"site\">\r\n      <th mat-header-cell *matHeaderCellDef>Site</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"site-info\">\r\n          {{ element.siteName }}\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Ready Users Column -->\r\n    <ng-container matColumnDef=\"ready users\">\r\n      <th mat-header-cell *matHeaderCellDef>Ready Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalReadyUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Ready/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Upgraded Users Column -->\r\n    <ng-container matColumnDef=\"upgraded users\">\r\n      <th mat-header-cell *matHeaderCellDef>Upgraded Users</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"user-count-info\">\r\n          <div class=\"user-count\">{{ element.totalUpgradedUsers }}/{{ element.totalUsers }}</div>\r\n          <div class=\"user-label\">Upgraded/Total</div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Location Mapping Column -->\r\n    <ng-container matColumnDef=\"location mapping\">\r\n      <th mat-header-cell *matHeaderCellDef>Location Mapping</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.locationMapping\" src=\"assets/icons/check2_icon.png\" alt=\"Location Mapping Enabled\"/>\r\n          <img *ngIf=\"!element.locationMapping\" src=\"assets/icons/issue_icon.png\" alt=\"Location Mapping Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- PSTN Trunk Column -->\r\n    <ng-container matColumnDef=\"pstn trunk\">\r\n      <th mat-header-cell *matHeaderCellDef>PSTN Trunk</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"status-icon-cell\">\r\n          <img *ngIf=\"element.PSTNTrunk\" src=\"assets/icons/check2_icon.png\" alt=\"PSTN Trunk Enabled\"/>\r\n          <img *ngIf=\"!element.PSTNTrunk\" src=\"assets/icons/issue_icon.png\" alt=\"PSTN Trunk Disabled\"/>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Site Upgrade Status Column -->\r\n    <ng-container matColumnDef=\"site upgrade status\">\r\n      <th mat-header-cell *matHeaderCellDef>Site Upgrade Status</th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"upgrade-status-cell\">\r\n          <ng-container *ngIf=\"element.upgradeStatus === 'READY'; else statusBlock\">\r\n            <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"onSiteMigration(element)\">Upgrade</button>\r\n          </ng-container>\r\n          <ng-template #statusBlock>\r\n            <div class=\"status-info\">\r\n              <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n              <span>{{ STATUS_ENTRIES[element.upgradeStatus] }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"progressBar\">\r\n      <th class=\"header\" mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"app-progress-bar-container\">\r\n          <app-progress-bar\r\n            [isAvailable]=\"element.isProgressBarAvailable\"\r\n            [progress]=\"element.progress\"\r\n            #progressBars>\r\n          </app-progress-bar>\r\n        </div>\r\n        <span *ngIf=\"element.isProgressBarAvailable\" class=\"progress-percents\">\r\n            {{ element.progress }} %\r\n          </span>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Action Column -->\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\r\n      <td mat-cell *matCellDef=\"let element\" class=\"progress-spinner-td\">\r\n        <div class=\"flex-container\">\r\n          <button mat-icon-button [matMenuTriggerFor]=\"defaultBatchMenu\">\r\n            <span style=\"font-size: 17px;\">\u22EE</span>\r\n          </button>\r\n        </div>\r\n\r\n        <mat-menu\r\n          #defaultBatchMenu=\"matMenu\"\r\n          xPosition=\"after\"\r\n          class=\"webex-action-menu\">\r\n\r\n          <div class=\"webex-action-menu-row\"\r\n               [ngClass]=\"{ 'webex-action-menu-row-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED' }\"\r\n               (click)=\"element.pending || element.migrationFormStatus === 'NOT_PREPARED' ? $event.stopPropagation() : onCollect(element)\">\r\n                    <span\r\n                      class=\"webex-details-icon webex-icon\"\r\n                      [ngClass]=\"{ 'migration-action-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED'}\">\r\n                    </span>\r\n            <span class=\"webex-action-menu-title\">Collect</span>\r\n          </div>\r\n        </mat-menu>\r\n\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"userUpgradeLoader\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n        <mat-progress-spinner\r\n          *ngIf=\"element.pending\"\r\n          class=\"field-spinner\"\r\n          [diameter]=\"20\"\r\n          mode=\"indeterminate\">\r\n        </mat-progress-spinner>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\";.webex-action-menu{box-shadow:0 4px 40px #0000001a!important;border-radius:0!important;width:258px;box-sizing:content-box;cursor:pointer}.webex-action-menu-row-disabled{cursor:default!important;opacity:.4}.webex-action-menu-row-disabled .webex-action-menu-title{color:#bababa!important;line-height:23px}.app-progress-bar-container{margin:7px 20px 0 0}.progress-bar-container{min-width:40px}.webex-action-menu-row:hover{background:#f5f5f5}.webex-icon{display:inline-block;height:25px;width:25px;margin:0 7px 0 0}.webex-details-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.2115 19.5H17.0961V16H16.2115V19.5ZM16.6538 15.0865C16.7743 15.0929 16.8782 15.0509 16.9653 14.9606C17.0525 14.8702 17.0961 14.7647 17.0961 14.6442C17.0961 14.5237 17.0509 14.4199 16.9605 14.3327C16.8701 14.2455 16.7679 14.2019 16.6538 14.2019C16.5333 14.2019 16.4294 14.2455 16.3422 14.3327C16.2551 14.4199 16.2115 14.5237 16.2115 14.6442C16.2115 14.7583 16.2551 14.8606 16.3422 14.951C16.4294 15.0413 16.5333 15.0865 16.6538 15.0865ZM4.99997 3.99998V10.1827V10.1538V20V3.99998ZM7.25 13.75H10.7231C10.8679 13.4692 11.0307 13.2038 11.2115 12.9538C11.3923 12.7038 11.591 12.4692 11.8077 12.25H7.25V13.75ZM7.25 17.75H10.0173C9.98009 17.5 9.9615 17.2516 9.9615 17.0048C9.9615 16.758 9.97688 16.5064 10.0076 16.25H7.25V17.75ZM5.3077 21.5C4.80257 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V4.3077C3.5 3.80257 3.675 3.375 4.025 3.025C4.375 2.675 4.80257 2.5 5.3077 2.5H13.25L18.5 7.74995V10.425C18.2538 10.3506 18.0073 10.2933 17.7605 10.2529C17.5137 10.2125 17.2602 10.1891 17 10.1827V8.49995H12.5V3.99998H5.3077C5.23077 3.99998 5.16024 4.03203 5.09612 4.09613C5.03202 4.16024 4.99997 4.23077 4.99997 4.3077V19.6923C4.99997 19.7692 5.03202 19.8397 5.09612 19.9038C5.16024 19.9679 5.23077 20 5.3077 20H10.7615C10.9064 20.2871 11.0692 20.5557 11.25 20.8057C11.4307 21.0557 11.6327 21.2871 11.8557 21.5H5.3077ZM16.6538 12.3462C17.9025 12.3462 18.9647 12.784 19.8403 13.6596C20.7159 14.5352 21.1538 15.5974 21.1538 16.8461C21.1538 18.0948 20.7159 19.157 19.8403 20.0326C18.9647 20.9083 17.9025 21.3461 16.6538 21.3461C15.4051 21.3461 14.3429 20.9083 13.4673 20.0326C12.5916 19.157 12.1538 18.0948 12.1538 16.8461C12.1538 15.5974 12.5916 14.5352 13.4673 13.6596C14.3429 12.784 15.4051 12.3462 16.6538 12.3462Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\")}.webex-action-menu-row{padding:5px 15px;display:flex;justify-content:flex-start}.webex-action-menu-row .webex-action-menu-title{line-height:23px}.mat-menu-content:not(:empty){padding-top:0!important}.mat-menu-panel{min-height:auto!important}#siteUpgradeTable{font-family:Inter,sans-serif!important}.wrapper{display:flex;flex-direction:column;gap:1rem}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}.mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0;position:absolute}.progress-percents{font-weight:500;font-size:12px}::ng-deep .mat-progress-spinner-td{position:relative}::ng-deep #siteUpgradeTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.site-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.site-upgrade-table{width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.site-upgrade-table .mat-header-row{font-size:12px;height:35px}.site-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}.site-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}.site-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#1170cf}.site-upgrade-table .indicator-status-ready{color:#1170cf!important}.site-upgrade-table .device-info{display:flex;align-items:center;gap:12px}.site-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:4px}.site-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.site-upgrade-table .device-info .device-name-wrapper .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.site-upgrade-table .device-info .device-model{font-size:12px;color:#757575}.site-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.site-upgrade-table .status-info .status-indicator.ready{background-color:#1170cf}.site-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.site-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.site-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.site-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.site-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.site-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.site-upgrade-table .flex-container{display:flex}.site-upgrade-table .upgrade-button{border:1px solid #08599c!important;color:#08599c!important;background:white!important;border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}.site-upgrade-table .upgrade-button:hover{background-color:#e3f2fd!important}.site-upgrade-table .user-count-info .user-count{font-weight:500;color:#212121}.site-upgrade-table .user-count-info .user-label{font-size:12px;color:#757575}.site-upgrade-table .status-icon-cell,.site-upgrade-table .collect-icon-cell{display:flex;align-items:center}.site-upgrade-table .icon-play{width:24px;height:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2219%22 viewBox%3D%220 0 18 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.09567 11.7427L11.3625 9.64421C11.523 9.54226 11.6033 9.40067 11.6033 9.21945C11.6033 9.03821 11.523 8.89615 11.3625 8.79326L8.09567 6.69472C7.92739 6.57933 7.75479 6.5701 7.57787 6.66701C7.40096 6.76391 7.3125 6.91497 7.3125 7.12019V11.3173C7.3125 11.5225 7.40096 11.6736 7.57787 11.7705C7.75479 11.8674 7.92739 11.8581 8.09567 11.7427ZM9.00124 16.3437C8.01579 16.3437 7.08951 16.1567 6.22241 15.7827C5.3553 15.4087 4.60104 14.9012 3.95963 14.26C3.3182 13.6189 2.81041 12.865 2.43624 11.9982C2.06208 11.1315 1.875 10.2054 1.875 9.21999C1.875 8.23454 2.062 7.30826 2.436 6.44116C2.81 5.57405 3.31756 4.81979 3.95869 4.17838C4.59983 3.53695 5.35376 3.02916 6.22048 2.65499C7.08719 2.28083 8.01328 2.09375 8.99873 2.09375C9.98418 2.09375 10.9105 2.28075 11.7776 2.65475C12.6447 3.02875 13.3989 3.53631 14.0403 4.17744C14.6818 4.81858 15.1896 5.57251 15.5637 6.43923C15.9379 7.30594 16.125 8.23203 16.125 9.21748C16.125 10.2029 15.938 11.1292 15.564 11.9963C15.19 12.8634 14.6824 13.6177 14.0413 14.2591C13.4001 14.9005 12.6462 15.4083 11.7795 15.7825C10.9128 16.1566 9.98669 16.3437 9.00124 16.3437ZM8.99998 15.2187C10.675 15.2187 12.0937 14.6375 13.2562 13.475C14.4187 12.3125 15 10.8937 15 9.21873C15 7.54373 14.4187 6.12498 13.2562 4.96248C12.0937 3.79998 10.675 3.21873 8.99998 3.21873C7.32498 3.21873 5.90623 3.79998 4.74373 4.96248C3.58123 6.12498 2.99998 7.54373 2.99998 9.21873C2.99998 10.8937 3.58123 12.3125 4.74373 13.475C5.90623 14.6375 7.32498 15.2187 8.99998 15.2187Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}.site-upgrade-table .collect-icon-cell{cursor:pointer}::ng-deep .action-wrapper{display:flex;align-items:center;flex:1;justify-content:space-between;gap:1rem;color:#555}.table-action-panel{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:1rem}.pay-button-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid #2c355d;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.pay-button-icon:after{content:\"\";width:0;height:0;border-left:6px solid #2c355d;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}.pay-button-icon:hover{border-color:#2c355d;background-color:#f8fafc;transform:scale(1.05)}.pay-button-icon:hover:after{border-left-color:#2c355d}.pay-button-icon:active{transform:scale(.95);background-color:#e2e8f0}.pay-button-icon:disabled,.pay-button-icon.disabled{opacity:.5;cursor:not-allowed}.pay-button-icon:disabled:hover,.pay-button-icon.disabled:hover{transform:none;border-color:#d1d5db;background-color:#fff}.pay-button-icon:disabled:hover:after,.pay-button-icon.disabled:hover:after{border-left-color:#2c355d}.pay-button-icon.small{width:32px;height:32px;border-width:1.5px}.pay-button-icon.small:after{border-left-width:6px;border-top-width:5px;border-bottom-width:5px;margin-left:1px}.pay-button-icon.large{width:48px;height:48px;border-width:2.5px}.pay-button-icon.large:after{border-left-width:10px;border-top-width:7px;border-bottom-width:7px;margin-left:3px}.pay-button-icon.xl{width:56px;height:56px;border-width:3px}.pay-button-icon.xl:after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px;margin-left:3px}.pay-button-icon.loading:after{display:none}.pay-button-icon.loading:before{content:\"\";width:16px;height:16px;border:2px solid #2c355d;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pay-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#2c355d;transition:color .3s ease}.pay-button .pay-button-icon{margin:0}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { token: [{
-                type: Input
-            }], customerId: [{
-                type: Input
-            }] } });
-
-class SiteUpgradeModule {
-}
-SiteUpgradeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SiteUpgradeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeModule, declarations: [SiteUpgradeDataTableComponent,
-        ProgressBarComponent], imports: [CommonModule,
-        SharedModule,
-        MatTableModule,
-        MatIconModule,
-        MatMenuModule,
-        MatButtonModule,
-        MatProgressSpinnerModule], exports: [SiteUpgradeDataTableComponent,
-        ProgressBarComponent] });
-SiteUpgradeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeModule, imports: [CommonModule,
-        SharedModule,
-        MatTableModule,
-        MatIconModule,
-        MatMenuModule,
-        MatButtonModule,
-        MatProgressSpinnerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SiteUpgradeDataTableComponent,
-                        ProgressBarComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        SharedModule,
-                        MatTableModule,
-                        MatIconModule,
-                        MatMenuModule,
-                        MatButtonModule,
-                        MatProgressSpinnerModule
-                    ],
-                    exports: [
-                        SiteUpgradeDataTableComponent,
-                        ProgressBarComponent
-                    ]
-                }]
-        }] });
-
-class UpgradeOverviewService {
-    constructor(apiService) {
-        this.apiService = apiService;
-    }
-    getUpgradePreconditions() {
-        return this.apiService.fetch(API$1.OVERVIEW.GET_UPGRADE_PRECONDITIONS.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                controlHubIntegration: resp.controlHubIntegration,
-                numberOfAvailableLicences: resp.availableLicences
-            };
-        }));
-    }
-    getSiteInfrastructureSummary() {
-        return this.apiService.fetch(API$1.OVERVIEW.GET_SITE_INFRASTRUCTURE.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                totalSites: resp.totalSites,
-                totalLocations: resp.totalLocations,
-                totalPSTNs: resp.totalPSTNS
-            };
-        }));
-    }
-    getUsersUpgradeSummary() {
-        return this.apiService.fetch(API$1.OVERVIEW.GET_USERS_UPGRADE_SUMMARY.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                totalUsers: resp.totalUsers,
-                totalReadyUsers: resp.totalUsersReady,
-                totalUpgradedUsers: resp.totalUsersUpgraded
-            };
-        }));
-    }
-    getSitesUpgradeSummary() {
-        return this.apiService.fetch(API$1.OVERVIEW.GET_SITES_UPGRADE_SUMMARY.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                totalSites: resp.totalSites,
-                totalReadySites: resp.totalSitesReady,
-                totalUpgradedSites: resp.totalSitesUpgraded
-            };
-        }));
-    }
-    getUsersUpgradeReadiness() {
-        return this.apiService.fetch(API$1.OVERVIEW.GET_USERS_UPGRADE_READINESS.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                totalUsers: resp.totalUsers,
-                totalReadyUsers: resp.totalUsersReady
-            };
-        }));
-    }
-    getSitesUpgradeReadiness() {
-        return this.apiService.fetch(API$1.OVERVIEW.GET_SITES_UPGRADE_READINESS.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                totalSites: resp.totalSites,
-                totalReadySites: resp.totalSitesReady
-            };
-        }));
-    }
-}
-UpgradeOverviewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewService, deps: [{ token: APIService }], target: i0.ɵɵFactoryTarget.Injectable });
-UpgradeOverviewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: APIService }]; } });
-
-class ReadyToUpgradeUsersCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-        this.title = 'Ready Users';
-        this.type = 'user';
-        this.upgradeStatus = 'ready';
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.upgradeOverviewService.customerId = this.customerId;
-        this.loading = true;
-        this.upgradeOverviewService.getUsersUpgradeReadiness()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((stats) => {
-            this.readinessStats = stats;
-            this.loading = false;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-ReadyToUpgradeUsersCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReadyToUpgradeUsersCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReadyToUpgradeUsersCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ReadyToUpgradeUsersCardComponent, selector: "tk-ready-to-upgrade-users-card", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "  <tk-stat-card\r\n    *ngIf=\"!loading\"\r\n    [title]=\"title\"\r\n    [type]=\"type\"\r\n    [readinessStats]=\"readinessStats\"\r\n    [upgradeStatus]=\"upgradeStatus\">\r\n  </tk-stat-card>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StatCardComponent, selector: "tk-stat-card", inputs: ["title", "type", "readinessStats", "upgradeStatus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReadyToUpgradeUsersCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-ready-to-upgrade-users-card', template: "  <tk-stat-card\r\n    *ngIf=\"!loading\"\r\n    [title]=\"title\"\r\n    [type]=\"type\"\r\n    [readinessStats]=\"readinessStats\"\r\n    [upgradeStatus]=\"upgradeStatus\">\r\n  </tk-stat-card>" }]
-        }], propDecorators: { token: [{
-                type: Input
-            }], customerId: [{
-                type: Input
-            }] } });
-
-class ReadyToUpgradeSitesCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-        this.title = 'Ready Sites';
-        this.type = 'site';
-        this.upgradeStatus = 'ready';
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.upgradeOverviewService.customerId = this.customerId;
-        this.loading = true;
-        this.upgradeOverviewService.getSitesUpgradeReadiness()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((stats) => {
-            this.readinessStats = stats;
-            this.loading = false;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-ReadyToUpgradeSitesCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReadyToUpgradeSitesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReadyToUpgradeSitesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ReadyToUpgradeSitesCardComponent, selector: "tk-ready-to-upgrade-sites-card", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "  <tk-stat-card\r\n    *ngIf=\"!loading\"\r\n    [title]=\"title\"\r\n    [type]=\"type\"\r\n    [readinessStats]=\"readinessStats\"\r\n    [upgradeStatus]=\"upgradeStatus\">\r\n  </tk-stat-card>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StatCardComponent, selector: "tk-stat-card", inputs: ["title", "type", "readinessStats", "upgradeStatus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReadyToUpgradeSitesCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-ready-to-upgrade-sites-card', template: "  <tk-stat-card\r\n    *ngIf=\"!loading\"\r\n    [title]=\"title\"\r\n    [type]=\"type\"\r\n    [readinessStats]=\"readinessStats\"\r\n    [upgradeStatus]=\"upgradeStatus\">\r\n  </tk-stat-card>" }]
-        }], propDecorators: { token: [{
-                type: Input
-            }], customerId: [{
-                type: Input
-            }] } });
-
-class AlreadyUpgradedUsersCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-        this.title = 'Upgraded Users';
-        this.type = 'user';
-        this.upgradeStatus = 'already';
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.upgradeOverviewService.customerId = this.customerId;
-        this.loading = true;
-        this.upgradeOverviewService.getUsersUpgradeSummary()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((stats) => {
-            this.readinessStats = stats;
-            this.loading = false;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-AlreadyUpgradedUsersCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlreadyUpgradedUsersCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlreadyUpgradedUsersCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AlreadyUpgradedUsersCardComponent, selector: "tk-already-upgraded-users-card", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: `
-        <tk-stat-card
-            *ngIf="!loading"
-            [title]="title"
-            [type]="type"
-            [readinessStats]="readinessStats"
-            [upgradeStatus]="upgradeStatus"
-        ></tk-stat-card>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StatCardComponent, selector: "tk-stat-card", inputs: ["title", "type", "readinessStats", "upgradeStatus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlreadyUpgradedUsersCardComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'tk-already-upgraded-users-card',
-                    template: `
-        <tk-stat-card
-            *ngIf="!loading"
-            [title]="title"
-            [type]="type"
-            [readinessStats]="readinessStats"
-            [upgradeStatus]="upgradeStatus"
-        ></tk-stat-card>
-    `
-                }]
-        }], propDecorators: { token: [{
-                type: Input
-            }], customerId: [{
-                type: Input
-            }] } });
-
-class AlreadyUpgradedSitesCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-        this.title = 'Upgraded Sites';
-        this.type = 'site';
-        this.upgradeStatus = 'already';
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.upgradeOverviewService.customerId = this.customerId;
-        this.loading = true;
-        this.upgradeOverviewService.getSitesUpgradeSummary()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((stats) => {
-            this.readinessStats = stats;
-            this.loading = false;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-AlreadyUpgradedSitesCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlreadyUpgradedSitesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlreadyUpgradedSitesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AlreadyUpgradedSitesCardComponent, selector: "tk-already-upgraded-sites-card", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: `
-        <tk-stat-card
-            *ngIf="!loading"
-            [title]="title"
-            [type]="type"
-            [readinessStats]="readinessStats"
-            [upgradeStatus]="upgradeStatus"
-        ></tk-stat-card>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StatCardComponent, selector: "tk-stat-card", inputs: ["title", "type", "readinessStats", "upgradeStatus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlreadyUpgradedSitesCardComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'tk-already-upgraded-sites-card',
-                    template: `
-        <tk-stat-card
-            *ngIf="!loading"
-            [title]="title"
-            [type]="type"
-            [readinessStats]="readinessStats"
-            [upgradeStatus]="upgradeStatus"
-        ></tk-stat-card>
-    `
-                }]
-        }], propDecorators: { token: [{
-                type: Input
-            }], customerId: [{
-                type: Input
-            }] } });
-
-class PreconditionsStatusListCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.destroy$ = new Subject();
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.title = 'Mandatory Preconditions for Upgrade';
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.upgradeOverviewService.customerId = this.customerId;
-        this.upgradeOverviewService.getUpgradePreconditions()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((resp) => {
-            this.preconditions = resp;
-            this.init();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    init() {
-        this.items = [
-            {
-                label: 'Control Hub Integration',
-                description: 'Control Hub Connectivity',
-                status: this.preconditions.controlHubIntegration === 'CONNECTED',
-                tooltip: 'Your tenant must be connected to Webex Control Hub to enable and manage the upgrade process.',
-                link: {
-                    href: 'https://dev.tuki.io/',
-                    tooltip: 'Click below to open the integration setup wizard in Tuki. If the tenant is not yet connected, you will be redirected to create the integration in Control Hub.'
-                }
-            },
-            {
-                label: 'SIP Trunk (Local Gateway)',
-                description: 'CUCM trunk connectivity estabilished',
-                status: true,
-                tooltip: 'CUCM must have an active SIP trunk to the Local Gateway for tenant-wide external calling.',
-                link: {
-                    href: 'https://dev.tuki.io/',
-                    tooltip: 'Confirm that the trunk is configured and connected in CUCM.'
-                }
-            },
-            {
-                label: `${this.preconditions.numberOfAvailableLicences} Available User Licences`,
-                description: 'Webex calling licences provisioned and assgined',
-                status: this.preconditions.numberOfAvailableLicences > 0,
-                tooltip: 'Webex Calling licenses are required for users who are being upgraded.',
-                link: {
-                    href: '',
-                    tooltip: ''
-                }
-            }
-        ];
-    }
-}
-PreconditionsStatusListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PreconditionsStatusListCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PreconditionsStatusListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PreconditionsStatusListCardComponent, selector: "tk-preconditions-status-list-card", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: `
-        <tk-status-list-card 
-            [title]="title"
-            [items]="items"
-        ></tk-status-list-card>
-    `, isInline: true, styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: StatusListCardComponent, selector: "tk-status-list-card", inputs: ["title", "items"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PreconditionsStatusListCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-preconditions-status-list-card', template: `
-        <tk-status-list-card 
-            [title]="title"
-            [items]="items"
-        ></tk-status-list-card>
-    `, styles: [":host{width:100%}\n"] }]
-        }], propDecorators: { token: [{
-                type: Input
-            }], customerId: [{
-                type: Input
-            }] } });
-
-class SiteInfrastructureStatusListCardComponent {
-    constructor() {
-        this.title = 'Site Preconditions';
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.upgradeOverviewService.customerId = this.customerId;
-        this.upgradeOverviewService.getSiteInfrastructureSummary()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((siteInfrastructure) => {
-            this.items = [
-                {
-                    label: 'PSTN Trunk',
-                    description: 'Public network connectivity',
-                    status: siteInfrastructure.totalPSTNs === siteInfrastructure.totalSites,
-                    totalSites: siteInfrastructure.totalSites,
-                    value: siteInfrastructure.totalPSTNs,
-                    tooltip: 'Public network connectivity is required for external calling.',
-                    link: {
-                        href: 'https://dev.tuki.io/',
-                        tooltip: 'Ensure that the site has a configured PSTN trunk in Control Hub and verify that the connection is established and active. If setup is incomplete, contact your administrator or PSTN provider.'
-                    }
-                },
-                {
-                    label: 'Location Mapping',
-                    description: 'Sites defined in Control Hub with proper configuration',
-                    status: siteInfrastructure.totalLocations === siteInfrastructure.totalSites,
-                    totalSites: siteInfrastructure.totalSites,
-                    value: siteInfrastructure.totalLocations,
-                    tooltip: 'Each site must be mapped to a Control Hub location.',
-                    link: {
-                        href: 'https://dev.tuki.io/',
-                        tooltip: 'Click below to open the Tuki mapping tool and complete the site-to-location mapping.'
-                    }
-                },
-                {
-                    label: 'Ready users',
-                    description: 'All users in the site are ready or already upgraded',
-                    status: false,
-                    totalSites: 12,
-                    value: siteInfrastructure.totalLocations,
-                    tooltip: 'All users in the site must be ready or already upgraded to ensure a successful migration.',
-                    link: {
-                        href: '',
-                        tooltip: ''
-                    }
-                }
-            ];
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-SiteInfrastructureStatusListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteInfrastructureStatusListCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SiteInfrastructureStatusListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SiteInfrastructureStatusListCardComponent, selector: "tk-site-infrastructure-status-list-card", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: `
-        <tk-status-list-card 
-            [title]="title"
-            [items]="items"
-        ></tk-status-list-card>
-    `, isInline: true, styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: StatusListCardComponent, selector: "tk-status-list-card", inputs: ["title", "items"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteInfrastructureStatusListCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-site-infrastructure-status-list-card', template: `
-        <tk-status-list-card 
-            [title]="title"
-            [items]="items"
-        ></tk-status-list-card>
-    `, styles: [":host{width:100%}\n"] }]
-        }], propDecorators: { token: [{
-                type: Input
-            }], customerId: [{
-                type: Input
-            }] } });
-
-class UpgradeStateComparisonChartCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-        this.type = 'Users';
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.upgradeOverviewService.customerId = this.customerId;
-        this.totalUpgraded = 0;
-        this.totalNotUpgraded = 0;
-        this.loading = true;
-        this.title = `${this.type} - Upgraded vs. Not Upgraded`;
-        if (this.type === 'Sites') {
-            this.upgradeOverviewService.getSitesUpgradeSummary()
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((stats) => {
-                this.totalUpgraded = parseInt(stats.totalUpgradedSites);
-                this.totalNotUpgraded = parseInt(stats.totalReadySites);
-                this.loading = false;
-            });
-        }
-        else {
-            this.upgradeOverviewService.getUsersUpgradeSummary()
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((stats) => {
-                this.totalUpgraded = parseInt(stats.totalUpgradedUsers);
-                this.totalNotUpgraded = parseInt(stats.totalReadyUsers);
-                this.loading = false;
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-UpgradeStateComparisonChartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeStateComparisonChartCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UpgradeStateComparisonChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UpgradeStateComparisonChartCardComponent, selector: "tk-upgrade-state-comparison-chart-card", inputs: { type: "type", token: "token", customerId: "customerId" }, ngImport: i0, template: `
-        <tk-chart-card
-            *ngIf="!loading"
-            [title]="title"
-            [totalUpgraded]="totalUpgraded"
-            [totalNotUpgraded]="totalNotUpgraded"
-        ></tk-chart-card>
-    `, isInline: true, styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartCardComponent, selector: "tk-chart-card", inputs: ["title", "totalUpgraded", "totalNotUpgraded"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeStateComparisonChartCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tk-upgrade-state-comparison-chart-card", template: `
-        <tk-chart-card
-            *ngIf="!loading"
-            [title]="title"
-            [totalUpgraded]="totalUpgraded"
-            [totalNotUpgraded]="totalNotUpgraded"
-        ></tk-chart-card>
-    `, styles: [":host{width:100%}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], token: [{
-                type: Input
-            }], customerId: [{
-                type: Input
-            }] } });
-
-class UpgradeOverviewModule {
-}
-UpgradeOverviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UpgradeOverviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewModule, declarations: [ReadyToUpgradeUsersCardComponent,
-        ReadyToUpgradeSitesCardComponent,
-        AlreadyUpgradedUsersCardComponent,
-        AlreadyUpgradedSitesCardComponent,
-        PreconditionsStatusListCardComponent,
-        SiteInfrastructureStatusListCardComponent,
-        UpgradeStateComparisonChartCardComponent], imports: [CommonModule,
-        SharedModule], exports: [ReadyToUpgradeUsersCardComponent,
-        ReadyToUpgradeSitesCardComponent,
-        AlreadyUpgradedUsersCardComponent,
-        AlreadyUpgradedSitesCardComponent,
-        PreconditionsStatusListCardComponent,
-        SiteInfrastructureStatusListCardComponent,
-        UpgradeStateComparisonChartCardComponent] });
-UpgradeOverviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewModule, imports: [CommonModule,
-        SharedModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ReadyToUpgradeUsersCardComponent,
-                        ReadyToUpgradeSitesCardComponent,
-                        AlreadyUpgradedUsersCardComponent,
-                        AlreadyUpgradedSitesCardComponent,
-                        PreconditionsStatusListCardComponent,
-                        SiteInfrastructureStatusListCardComponent,
-                        UpgradeStateComparisonChartCardComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        SharedModule
-                    ],
-                    exports: [
-                        ReadyToUpgradeUsersCardComponent,
-                        ReadyToUpgradeSitesCardComponent,
-                        AlreadyUpgradedUsersCardComponent,
-                        AlreadyUpgradedSitesCardComponent,
-                        PreconditionsStatusListCardComponent,
-                        SiteInfrastructureStatusListCardComponent,
-                        UpgradeStateComparisonChartCardComponent
-                    ],
-                    providers: []
-                }]
-        }] });
-
-/*
- * Public API Surface of @tuki-io/tuki-widgets
- */
-// Shared Components
-// export * from './shared/shared.module';
-// Widget Modules
-// Types
-// export * from './shared/types/data-table';
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AlreadyUpgradedSitesCardComponent, AlreadyUpgradedUsersCardComponent, PreconditionsStatusListCardComponent, ProgressBarComponent, ReadyToUpgradeSitesCardComponent, ReadyToUpgradeUsersCardComponent, SiteInfrastructureStatusListCardComponent, SiteUpgradeDataTableComponent, SiteUpgradeModule, UpgradeOverviewModule, UpgradeStateComparisonChartCardComponent, UserUpgradeDataTableComponent, UserUpgradeModule };
-//# sourceMappingURL=tuki-io-tuki-widgets-di2mt.mjs.map