npm - @tuki-io/tuki-widgets - Versions diffs - 0.0.219-dev.48 → 0.0.219-dev.50 - Mend

@tuki-io/tuki-widgets 0.0.219-dev.48 → 0.0.219-dev.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

package/fesm2020/tuki-io-tuki-widgets-locations.mjs CHANGED Viewed

@@ -77,10 +77,10 @@ class LocationConfirmDialogComponent {
     }
 }
 LocationConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-LocationConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LocationConfirmDialogComponent, selector: "tk-location-confirm-dialog", ngImport: i0, template: "<div class=\"tk-location-confirm-dialog\" role=\"dialog\" aria-labelledby=\"tk-location-confirm-dialog-title\">\r\n  <h3 id=\"tk-location-confirm-dialog-title\" class=\"tk-location-confirm-dialog__title\">{{ data.title }}</h3>\r\n  <div mat-dialog-content class=\"tk-location-confirm-dialog__content\" [innerHTML]=\"data.message\"></div>\r\n  <div mat-dialog-actions class=\"tk-location-confirm-dialog__actions\">\r\n    <button type=\"button\" class=\"tk-location-confirm-dialog__button tk-location-confirm-dialog__button--cancel\" (click)=\"onClose(false)\">\r\n      Cancel\r\n    </button>\r\n    <button type=\"button\" class=\"tk-location-confirm-dialog__button tk-location-confirm-dialog__button--confirm\" (click)=\"onClose(true)\">\r\n      {{ data.confirmButtonText }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".tk-location-confirm-dialog-panel .mat-dialog-container{padding:24px;border-radius:8px;background:#fff;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.tk-location-confirm-dialog-backdrop{background:rgba(0,0,0,.32)}.tk-location-confirm-dialog{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;width:400px;box-sizing:border-box;padding:0 0 16px}.tk-location-confirm-dialog__title{text-align:center;font-weight:600;font-size:16px;margin:0 0 20px}.tk-location-confirm-dialog__content{color:#000000b3;font-size:14px;padding:0}.tk-location-confirm-dialog__content p{margin:0 0 12px}.tk-location-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:12px;margin:16px 0 0}.tk-location-confirm-dialog__button{height:32px;padding:0 16px;border-radius:50px;box-shadow:none;border:none;font-size:14px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;cursor:pointer}.tk-location-confirm-dialog__button--cancel{border:1px solid rgba(0,0,0,.5);color:#000;background:#fff}.tk-location-confirm-dialog__button--confirm{background:#000;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }], encapsulation: i0.ViewEncapsulation.None });
+LocationConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LocationConfirmDialogComponent, selector: "tk-location-confirm-dialog", ngImport: i0, template: "<div class=\"tk-location-confirm-dialog\" role=\"dialog\" aria-labelledby=\"tk-location-confirm-dialog-title\">\n  <h3 id=\"tk-location-confirm-dialog-title\" class=\"tk-location-confirm-dialog__title\">{{ data.title }}</h3>\n  <div mat-dialog-content class=\"tk-location-confirm-dialog__content\" [innerHTML]=\"data.message\"></div>\n  <div mat-dialog-actions class=\"tk-location-confirm-dialog__actions\">\n    <button type=\"button\" class=\"tk-location-confirm-dialog__button tk-location-confirm-dialog__button--cancel\" (click)=\"onClose(false)\">\n      Cancel\n    </button>\n    <button type=\"button\" class=\"tk-location-confirm-dialog__button tk-location-confirm-dialog__button--confirm\" (click)=\"onClose(true)\">\n      {{ data.confirmButtonText }}\n    </button>\n  </div>\n</div>\n", styles: [".tk-location-confirm-dialog-panel .mat-dialog-container{padding:24px;border-radius:8px;background:#fff;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.tk-location-confirm-dialog-backdrop{background:rgba(0,0,0,.32)}.tk-location-confirm-dialog{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;width:400px;box-sizing:border-box;padding:0 0 16px}.tk-location-confirm-dialog__title{text-align:center;font-weight:600;font-size:16px;margin:0 0 20px}.tk-location-confirm-dialog__content{color:#000000b3;font-size:14px;padding:0}.tk-location-confirm-dialog__content p{margin:0 0 12px}.tk-location-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:12px;margin:16px 0 0}.tk-location-confirm-dialog__button{height:32px;padding:0 16px;border-radius:50px;box-shadow:none;border:none;font-size:14px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;cursor:pointer}.tk-location-confirm-dialog__button--cancel{border:1px solid rgba(0,0,0,.5);color:#000;background:#fff}.tk-location-confirm-dialog__button--confirm{background:#000;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-location-confirm-dialog', encapsulation: ViewEncapsulation.None, template: "<div class=\"tk-location-confirm-dialog\" role=\"dialog\" aria-labelledby=\"tk-location-confirm-dialog-title\">\r\n  <h3 id=\"tk-location-confirm-dialog-title\" class=\"tk-location-confirm-dialog__title\">{{ data.title }}</h3>\r\n  <div mat-dialog-content class=\"tk-location-confirm-dialog__content\" [innerHTML]=\"data.message\"></div>\r\n  <div mat-dialog-actions class=\"tk-location-confirm-dialog__actions\">\r\n    <button type=\"button\" class=\"tk-location-confirm-dialog__button tk-location-confirm-dialog__button--cancel\" (click)=\"onClose(false)\">\r\n      Cancel\r\n    </button>\r\n    <button type=\"button\" class=\"tk-location-confirm-dialog__button tk-location-confirm-dialog__button--confirm\" (click)=\"onClose(true)\">\r\n      {{ data.confirmButtonText }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".tk-location-confirm-dialog-panel .mat-dialog-container{padding:24px;border-radius:8px;background:#fff;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.tk-location-confirm-dialog-backdrop{background:rgba(0,0,0,.32)}.tk-location-confirm-dialog{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;width:400px;box-sizing:border-box;padding:0 0 16px}.tk-location-confirm-dialog__title{text-align:center;font-weight:600;font-size:16px;margin:0 0 20px}.tk-location-confirm-dialog__content{color:#000000b3;font-size:14px;padding:0}.tk-location-confirm-dialog__content p{margin:0 0 12px}.tk-location-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:12px;margin:16px 0 0}.tk-location-confirm-dialog__button{height:32px;padding:0 16px;border-radius:50px;box-shadow:none;border:none;font-size:14px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;cursor:pointer}.tk-location-confirm-dialog__button--cancel{border:1px solid rgba(0,0,0,.5);color:#000;background:#fff}.tk-location-confirm-dialog__button--confirm{background:#000;color:#fff}\n"] }]
+            args: [{ selector: 'tk-location-confirm-dialog', encapsulation: ViewEncapsulation.None, template: "<div class=\"tk-location-confirm-dialog\" role=\"dialog\" aria-labelledby=\"tk-location-confirm-dialog-title\">\n  <h3 id=\"tk-location-confirm-dialog-title\" class=\"tk-location-confirm-dialog__title\">{{ data.title }}</h3>\n  <div mat-dialog-content class=\"tk-location-confirm-dialog__content\" [innerHTML]=\"data.message\"></div>\n  <div mat-dialog-actions class=\"tk-location-confirm-dialog__actions\">\n    <button type=\"button\" class=\"tk-location-confirm-dialog__button tk-location-confirm-dialog__button--cancel\" (click)=\"onClose(false)\">\n      Cancel\n    </button>\n    <button type=\"button\" class=\"tk-location-confirm-dialog__button tk-location-confirm-dialog__button--confirm\" (click)=\"onClose(true)\">\n      {{ data.confirmButtonText }}\n    </button>\n  </div>\n</div>\n", styles: [".tk-location-confirm-dialog-panel .mat-dialog-container{padding:24px;border-radius:8px;background:#fff;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.tk-location-confirm-dialog-backdrop{background:rgba(0,0,0,.32)}.tk-location-confirm-dialog{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;width:400px;box-sizing:border-box;padding:0 0 16px}.tk-location-confirm-dialog__title{text-align:center;font-weight:600;font-size:16px;margin:0 0 20px}.tk-location-confirm-dialog__content{color:#000000b3;font-size:14px;padding:0}.tk-location-confirm-dialog__content p{margin:0 0 12px}.tk-location-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:12px;margin:16px 0 0}.tk-location-confirm-dialog__button{height:32px;padding:0 16px;border-radius:50px;box-shadow:none;border:none;font-size:14px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;cursor:pointer}.tk-location-confirm-dialog__button--cancel{border:1px solid rgba(0,0,0,.5);color:#000;background:#fff}.tk-location-confirm-dialog__button--confirm{background:#000;color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -150,8 +150,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 const API = {
-    LOCATIONS: {
-        GET_ALL: "/api/webex/locations/customers/:customerId",
+    SITES_LOCATIONS: {
+        // Returns every site for the customer paired with its mapped Control Hub
+        // location (or null when the site hasn't been migrated yet) — this is the
+        // source of truth for siteId, superseding the old LOCATIONS.GET_ALL
+        // endpoint, which only listed already-mapped locations and exposed no siteId.
+        GET_ALL: "/api/webex/configuration/customers/:customerId/siteslocations",
     },
     SITE_MIGRATION: {
         MIGRATE_SITE: "/api/migration/webex/sites/:siteId/migrate",
@@ -181,22 +185,28 @@ function toLocation(raw) {
         hasPendingActions: !!raw?.hasPendingActions,
     };
 }
+function toSite(raw) {
+    return {
+        id: Number(raw?.id),
+        name: raw?.name || '',
+    };
+}
+function toSiteLocation(raw) {
+    return {
+        site: toSite(raw?.site),
+        location: raw?.location ? toLocation(raw.location) : null,
+    };
+}
 class LocationsService {
     constructor(apiService) {
         this.apiService = apiService;
     }
-    fetchLocations(customerId, page, size) {
-        const url = API.LOCATIONS.GET_ALL.replace(':customerId', String(customerId));
-        return this.apiService.fetch(url, { page, size }).pipe(map((response) => {
-            const content = response?.content || [];
-            return {
-                locations: content.map(toLocation),
-                totalElements: response?.totalElements ?? content.length,
-            };
-        }));
+    fetchSiteLocations(customerId) {
+        const url = API.SITES_LOCATIONS.GET_ALL.replace(':customerId', String(customerId));
+        return this.apiService.fetch(url).pipe(map((response) => (Array.isArray(response) ? response : []).map(toSiteLocation)));
     }
     migrateSite(siteId) {
-        const url = API.SITE_MIGRATION.MIGRATE_SITE.replace(':siteId', siteId);
+        const url = API.SITE_MIGRATION.MIGRATE_SITE.replace(':siteId', String(siteId));
         return this.apiService.post(url, {}, { batchId: '' });
     }
     getMigrationBatchStatuses(customerId, batchIds) {
@@ -218,10 +228,10 @@ class AppLoaderComponent {
     }
 }
 AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"], dependencies: [{ kind: "component", type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
+AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"70\"\n    strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"], dependencies: [{ kind: "component", type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"] }]
+            args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\n  <mat-progress-spinner\n    class=\"page-spinner\"\n    mode=\"indeterminate\"\n    [diameter]=\"70\"\n    strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"] }]
         }], ctorParameters: function () { return []; } });
 const MIGRATION_POLL_INTERVAL_MS = 10000;
@@ -236,8 +246,10 @@ class LocationsComponent {
         this.removeLocation = new EventEmitter();
         this.addLocation = new EventEmitter();
         this.importLocations = new EventEmitter();
-        this.locations = [];
-        this.totalElements = 0;
+        // Every site for the customer, each paired with its mapped Control Hub
+        // location or null — the siteslocations API returns the full, unpaged list,
+        // so search/filter/sort/pagination below all run client-side over this.
+        this.siteLocations = [];
         this.isLoading = false;
         this.searchTerm = '';
         this.sortDirection = 'asc';
@@ -249,6 +261,7 @@ class LocationsComponent {
         this.filters = {
             country: '',
             pendingActions: '',
+            mapped: '',
         };
         this.countryDisplayNames = typeof Intl !== 'undefined' && 'DisplayNames' in Intl
             ? new Intl.DisplayNames(['en'], { type: 'region' })
@@ -265,18 +278,17 @@ class LocationsComponent {
     ngOnInit() {
         this.apiService.token = this.token;
         this.apiService.apiUrl = this.exHost + '/webex';
-        this.loadPage();
+        this.loadSiteLocations();
     }
     ngOnDestroy() {
         this.migrationIntervals.forEach(interval => clearInterval(interval));
         this.migrationIntervals.clear();
     }
-    loadPage() {
+    loadSiteLocations() {
         this.isLoading = true;
-        this.locationsService.fetchLocations(this.customerId, this.pageIndex, this.pageSize).subscribe({
-            next: ({ locations, totalElements }) => {
-                this.locations = locations;
-                this.totalElements = totalElements;
+        this.locationsService.fetchSiteLocations(this.customerId).subscribe({
+            next: (siteLocations) => {
+                this.siteLocations = siteLocations;
                 this.isLoading = false;
             },
             error: () => {
@@ -285,37 +297,43 @@ class LocationsComponent {
         });
     }
     get pendingLocations() {
-        return this.locations.filter(location => location.hasPendingActions);
+        return this.siteLocations.filter(row => !!row.location?.hasPendingActions);
     }
     get showPendingBanner() {
         return !this.isBannerDismissed && this.pendingLocations.length > 0;
     }
     get countries() {
-        return Array.from(new Set(this.locations.map(location => this.countryLabel(location)).filter(Boolean))).sort();
+        return Array.from(new Set(this.siteLocations.map(row => this.countryLabel(row)).filter(Boolean))).sort();
     }
-    // Search/filter/sort apply only to the currently loaded page — the API paginates
-    // server-side (page/size) and doesn't expose a documented search/filter parameter.
-    get filteredLocations() {
+    get filteredRows() {
         const term = this.searchTerm.trim().toLowerCase();
-        const filtered = this.locations.filter(location => (!term ||
-            location.name.toLowerCase().includes(term) ||
-            this.addressLine(location).toLowerCase().includes(term) ||
-            location.address.city.toLowerCase().includes(term) ||
-            location.address.state.toLowerCase().includes(term) ||
-            this.countryLabel(location).toLowerCase().includes(term)) &&
-            (!this.filters.country || this.countryLabel(location) === this.filters.country) &&
-            (!this.filters.pendingActions || String(location.hasPendingActions) === this.filters.pendingActions));
+        const filtered = this.siteLocations.filter(row => (!term ||
+            this.rowName(row).toLowerCase().includes(term) ||
+            this.addressLine(row).toLowerCase().includes(term) ||
+            (row.location?.address?.city || '').toLowerCase().includes(term) ||
+            (row.location?.address?.state || '').toLowerCase().includes(term) ||
+            this.countryLabel(row).toLowerCase().includes(term)) &&
+            (!this.filters.country || this.countryLabel(row) === this.filters.country) &&
+            (!this.filters.pendingActions || String(!!row.location?.hasPendingActions) === this.filters.pendingActions) &&
+            (!this.filters.mapped || (this.filters.mapped === 'mapped' ? this.isMapped(row) : !this.isMapped(row))));
         return filtered.sort((a, b) => {
-            const comparison = a.name.localeCompare(b.name);
+            const comparison = this.rowName(a).localeCompare(this.rowName(b));
             return this.sortDirection === 'asc' ? comparison : -comparison;
         });
     }
+    get pagedRows() {
+        const start = this.pageIndex * this.pageSize;
+        return this.filteredRows.slice(start, start + this.pageSize);
+    }
+    get totalElements() {
+        return this.filteredRows.length;
+    }
     get pageRangeLabel() {
         if (!this.totalElements) {
             return '0 of 0';
         }
         const start = this.pageIndex * this.pageSize + 1;
-        const end = Math.min(this.totalElements, start + this.locations.length - 1);
+        const end = Math.min(this.totalElements, start + this.pagedRows.length - 1);
         return `${start} – ${end} of ${this.totalElements}`;
     }
     get hasPreviousPage() {
@@ -324,13 +342,25 @@ class LocationsComponent {
     get hasNextPage() {
         return (this.pageIndex + 1) * this.pageSize < this.totalElements;
     }
-    addressLine(location) {
-        return [location.address.address1, location.address.address2, location.address.city]
+    rowName(row) {
+        return row.site.name;
+    }
+    isMapped(row) {
+        return !!row.location;
+    }
+    addressLine(row) {
+        if (!row.location) {
+            return '';
+        }
+        return [row.location.address.address1, row.location.address.address2, row.location.address.city]
             .filter(Boolean)
             .join(' - ');
     }
-    countryLabel(location) {
-        const { countryName, country } = location.address;
+    countryLabel(row) {
+        if (!row.location) {
+            return '';
+        }
+        const { countryName, country } = row.location.address;
         if (countryName) {
             return countryName;
         }
@@ -339,11 +369,15 @@ class LocationsComponent {
         }
         return this.countryDisplayNames?.of(country) || country;
     }
-    provisioningTypeIcon(location) {
-        return this.provisioningTypeIcons[location.provisioningType] || null;
+    provisioningTypeIcon(row) {
+        if (!row.location) {
+            return null;
+        }
+        return this.provisioningTypeIcons[row.location.provisioningType] || null;
     }
     onSearchInputChange(event) {
         this.searchTerm = event.target.value;
+        this.pageIndex = 0;
     }
     toggleNameSort() {
         this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
@@ -357,73 +391,80 @@ class LocationsComponent {
     closeFilterPanel() {
         this.isFilterPanelOpen = false;
     }
+    onFilterChange() {
+        this.pageIndex = 0;
+    }
     clearFilters() {
-        this.filters = { country: '', pendingActions: '' };
+        this.filters = { country: '', pendingActions: '', mapped: '' };
+        this.pageIndex = 0;
     }
     onPageSizeChange(event) {
         this.pageSize = Number(event.target.value);
         this.pageIndex = 0;
-        this.loadPage();
     }
     goToPreviousPage() {
         if (this.hasPreviousPage) {
             this.pageIndex--;
-            this.loadPage();
         }
     }
     goToNextPage() {
         if (this.hasNextPage) {
             this.pageIndex++;
-            this.loadPage();
         }
     }
-    onOpenLocation(location) {
-        this.openLocation.emit(location.id);
+    onOpenLocation(row) {
+        if (row.location) {
+            this.openLocation.emit(row.location.id);
+        }
     }
-    onEditLocation(location) {
-        this.editLocation.emit(location.id);
+    onEditLocation(row) {
+        if (row.location) {
+            this.editLocation.emit(row.location.id);
+        }
     }
-    onRemoveLocation(location) {
-        this.removeLocation.emit(location.id);
+    onRemoveLocation(row) {
+        if (row.location) {
+            this.removeLocation.emit(row.location.id);
+        }
     }
-    canMigrateSite(location) {
-        return location.migrationStatus !== 'IN_PROGRESS';
+    canMigrateSite(row) {
+        return row.migrationStatus !== 'IN_PROGRESS';
     }
-    onMigrateSite(location) {
+    onMigrateSite(row) {
         const dialogRef = this.dialog.open(LocationConfirmDialogComponent, {
             panelClass: 'tk-location-confirm-dialog-panel',
             backdropClass: 'tk-location-confirm-dialog-backdrop',
             data: {
-                title: `Migrate ${location.name}?`,
-                message: `<p>Are you sure you want to migrate this location?</p>`,
+                title: `Migrate ${row.site.name}?`,
+                message: `<p>Are you sure you want to migrate this site?</p>`,
                 confirmButtonText: 'Yes, migrate',
             },
         });
         dialogRef.afterClosed().subscribe(confirmed => {
             if (confirmed) {
-                this.migrateSite(location);
+                this.migrateSite(row);
             }
         });
     }
-    migrateSite(location) {
-        location.migrationStatus = 'IN_PROGRESS';
-        this.locationsService.migrateSite(location.id).subscribe({
+    migrateSite(row) {
+        const siteId = row.site.id;
+        row.migrationStatus = 'IN_PROGRESS';
+        this.locationsService.migrateSite(siteId).subscribe({
             next: (batchId) => {
                 if (batchId) {
-                    this.pollMigrationStatus(location, batchId);
+                    this.pollMigrationStatus(siteId, batchId);
                 }
                 else {
-                    location.migrationStatus = 'COMPLETED';
-                    location.provisioningType = 'WEBEX';
+                    this.onMigrationComplete(siteId);
                 }
             },
             error: () => {
-                location.migrationStatus = 'FAILED';
+                this.setMigrationStatus(siteId, 'FAILED');
             },
         });
     }
-    pollMigrationStatus(location, batchId) {
-        this.clearMigrationInterval(location.id);
+    pollMigrationStatus(siteId, batchId) {
+        this.clearMigrationInterval(siteId);
         const poll = () => {
             this.locationsService.getMigrationBatchStatuses(this.customerId, [batchId]).subscribe({
                 next: (statuses) => {
@@ -431,26 +472,54 @@ class LocationsComponent {
                     if (!status || status.status === 'In Progress') {
                         return;
                     }
-                    this.clearMigrationInterval(location.id);
-                    location.migrationStatus = status.status === 'Completed' ? 'COMPLETED' : 'FAILED';
-                    if (location.migrationStatus === 'COMPLETED') {
-                        location.provisioningType = 'WEBEX';
+                    this.clearMigrationInterval(siteId);
+                    if (status.status === 'Completed') {
+                        this.onMigrationComplete(siteId);
+                    }
+                    else {
+                        this.setMigrationStatus(siteId, 'FAILED');
                     }
                 },
                 error: () => {
-                    this.clearMigrationInterval(location.id);
-                    location.migrationStatus = 'FAILED';
+                    this.clearMigrationInterval(siteId);
+                    this.setMigrationStatus(siteId, 'FAILED');
                 },
             });
         };
         poll();
-        this.migrationIntervals.set(location.id, setInterval(poll, MIGRATION_POLL_INTERVAL_MS));
+        this.migrationIntervals.set(siteId, setInterval(poll, MIGRATION_POLL_INTERVAL_MS));
+    }
+    // Looks the row up by siteId (rather than closing over a row reference) so
+    // status updates still land on whatever object is currently in
+    // siteLocations, even after loadSiteLocations()/mergeSiteLocations() below
+    // have replaced the array with freshly-fetched row objects.
+    setMigrationStatus(siteId, status) {
+        const row = this.siteLocations.find(item => item.site.id === siteId);
+        if (row) {
+            row.migrationStatus = status;
+        }
+    }
+    // The migrate/batch-status APIs don't return the newly created location's
+    // details, so re-fetch to pick up its mapping, address, timezone, etc.
+    onMigrationComplete(siteId) {
+        this.setMigrationStatus(siteId, 'COMPLETED');
+        this.locationsService.fetchSiteLocations(this.customerId).subscribe({
+            next: (fresh) => this.mergeSiteLocations(fresh),
+        });
+    }
+    // Preserves the IN_PROGRESS status of any other site still migrating so a
+    // concurrent poll's next tick doesn't land on a row that briefly lost it.
+    mergeSiteLocations(fresh) {
+        const inProgressSiteIds = new Set(this.siteLocations.filter(row => row.migrationStatus === 'IN_PROGRESS').map(row => row.site.id));
+        this.siteLocations = fresh.map(row => inProgressSiteIds.has(row.site.id) && !row.location
+            ? { ...row, migrationStatus: 'IN_PROGRESS' }
+            : row);
     }
-    clearMigrationInterval(locationId) {
-        const interval = this.migrationIntervals.get(locationId);
+    clearMigrationInterval(siteId) {
+        const interval = this.migrationIntervals.get(siteId);
         if (interval) {
             clearInterval(interval);
-            this.migrationIntervals.delete(locationId);
+            this.migrationIntervals.delete(siteId);
         }
     }
     onAddLocation() {
@@ -460,14 +529,14 @@ class LocationsComponent {
         this.importLocations.emit();
     }
     exportLocations() {
-        const rows = this.filteredLocations.map(location => [
-            location.name,
-            this.addressLine(location),
-            this.countryLabel(location),
-            this.provisioningTypeIcon(location)?.tooltip || '',
+        const rows = this.filteredRows.map(row => [
+            row.site.name,
+            this.addressLine(row),
+            this.countryLabel(row),
+            this.isMapped(row) ? 'Mapped' : 'Not mapped',
         ]);
         const csvLines = [
-            ['Location Name', 'Address', 'Country/Region', 'Provisioning Type'],
+            ['Location Name', 'Address', 'Country/Region', 'Mapping Status'],
             ...rows,
         ].map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(','));
         const blob = new Blob([csvLines.join('\n')], { type: 'text/csv;charset=utf-8;' });
@@ -480,10 +549,10 @@ class LocationsComponent {
     }
 }
 LocationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationsComponent, deps: [{ token: APIService }, { token: LocationsService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-LocationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LocationsComponent, selector: "tk-locations", inputs: { exHost: "exHost", token: "token", customerId: "customerId" }, outputs: { openLocation: "openLocation", editLocation: "editLocation", removeLocation: "removeLocation", addLocation: "addLocation", importLocations: "importLocations" }, ngImport: i0, template: "<div class=\"tk-locations\">\r\n  <app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n  <div class=\"tk-locations__view-toggle\">\r\n    <button type=\"button\" class=\"tk-locations__view-button tk-locations__view-button--active\">\r\n      <mat-icon class=\"tk-locations__view-icon\">menu</mat-icon>\r\n      List\r\n    </button>\r\n    <button type=\"button\" class=\"tk-locations__view-button\" disabled title=\"Map view coming soon\">\r\n      <mat-icon class=\"tk-locations__view-icon\">place</mat-icon>\r\n      Map\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"tk-locations__banner\" *ngIf=\"showPendingBanner\">\r\n    <mat-icon class=\"tk-locations__banner-icon\">warning</mat-icon>\r\n    <span class=\"tk-locations__banner-text\">\r\n      View location(s) with pending action items to resume your calling service in {{ pendingLocations.length }} or more locations.\r\n    </span>\r\n    <button type=\"button\" class=\"tk-locations__banner-close\" aria-label=\"Dismiss\" (click)=\"dismissBanner()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"tk-locations__toolbar\">\r\n    <div style=\"position: relative; width: fit-content; min-width: 200px\">\r\n      <input\r\n        [value]=\"searchTerm\"\r\n        class=\"blue-input\"\r\n        (input)=\"onSearchInputChange($event)\"\r\n        type=\"text\"\r\n        placeholder=\"Search by name, city, state, country\"\r\n        style=\"\r\n          width: 100%;\r\n          height: 34px;\r\n          border-radius: 0.5rem;\r\n          font-size: 16px;\r\n          padding: 6px 12px 6px 44px;\r\n          border: 1px solid #00000080;\r\n          background: #fff;\r\n          color: #222;\r\n          outline: none;\r\n          box-sizing: border-box;\r\n          min-width: 280px;\r\n        \"\r\n      />\r\n      <span\r\n        style=\"\r\n          position: absolute;\r\n          left: 12px;\r\n          top: 50%;\r\n          transform: translateY(-50%);\r\n          color: #757575;\r\n          font-size: 18px;\r\n          font-weight: normal;\r\n          pointer-events: none;\r\n        \"\r\n      >\r\n        <i\r\n          class=\"material-icons\"\r\n          style=\"font-size: 18px; font-weight: normal\"\r\n          >search</i\r\n        >\r\n      </span>\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"tk-locations__filter-button\" (click)=\"toggleFilterPanel()\">\r\n      <img class=\"tk-locations__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n      Filter\r\n    </button>\r\n\r\n    <span class=\"tk-locations__count\">{{ filteredLocations.length }} locations</span>\r\n\r\n    <button type=\"button\" class=\"tk-locations__download-button\" aria-label=\"Download locations\" title=\"Download locations\" (click)=\"exportLocations()\">\r\n      <mat-icon>file_download</mat-icon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"tk-locations__manage-button\" [matMenuTriggerFor]=\"manageMenu\">\r\n      Manage locations\r\n      <mat-icon class=\"tk-locations__manage-chevron\">expand_more</mat-icon>\r\n    </button>\r\n    <mat-menu #manageMenu=\"matMenu\" xPosition=\"before\">\r\n      <button mat-menu-item type=\"button\" (click)=\"onAddLocation()\">Add location</button>\r\n      <button mat-menu-item type=\"button\" (click)=\"onImportLocations()\">Import locations</button>\r\n    </mat-menu>\r\n  </div>\r\n\r\n  <table class=\"tk-locations__table\">\r\n    <thead>\r\n      <tr>\r\n        <th (click)=\"toggleNameSort()\">\r\n          Location Name\r\n          <mat-icon class=\"tk-locations__sort-icon\">{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\r\n        </th>\r\n        <th>Address</th>\r\n        <th>Country/Region</th>\r\n        <th>Provisioning Type</th>\r\n        <th class=\"tk-locations__actions-col\"></th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let location of filteredLocations\" (click)=\"onOpenLocation(location)\">\r\n        <td class=\"tk-locations__name-cell\">\r\n          <a href=\"javascript:void(0)\" class=\"tk-locations__name-link\" (click)=\"$event.stopPropagation(); onOpenLocation(location)\">{{ location.name }}</a>\r\n        </td>\r\n        <td>{{ addressLine(location) || '\u2014' }}</td>\r\n        <td>{{ countryLabel(location) || '\u2014' }}</td>\r\n        <td>\r\n          <span class=\"tk-locations__icon-wrapper\" *ngIf=\"provisioningTypeIcon(location) as pt; else noProvisioningType\">\r\n            <img [src]=\"pt.src\" [matTooltip]=\"pt.tooltip\" matTooltipPosition=\"right\" width=\"20\" alt=\"\">\r\n          </span>\r\n          <ng-template #noProvisioningType>\u2014</ng-template>\r\n        </td>\r\n        <td class=\"tk-locations__actions-col\">\r\n          <mat-progress-spinner\r\n            *ngIf=\"location.migrationStatus === 'IN_PROGRESS'\"\r\n            class=\"tk-locations__row-action-spinner\"\r\n            [diameter]=\"20\"\r\n            strokeWidth=\"2\"\r\n            mode=\"indeterminate\"\r\n            matTooltip=\"Migrating site\u2026\">\r\n          </mat-progress-spinner>\r\n          <button\r\n            *ngIf=\"location.migrationStatus !== 'IN_PROGRESS'\"\r\n            mat-icon-button\r\n            class=\"tk-locations__row-action-button\"\r\n            [matMenuTriggerFor]=\"rowMenu\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            aria-label=\"Open location actions\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #rowMenu=\"matMenu\" yPosition=\"below\">\r\n            <button mat-menu-item type=\"button\" (click)=\"onOpenLocation(location)\">View details</button>\r\n            <button mat-menu-item type=\"button\" (click)=\"onEditLocation(location)\">Edit location</button>\r\n            <button\r\n              *ngIf=\"canMigrateSite(location)\"\r\n              mat-menu-item\r\n              type=\"button\"\r\n              (click)=\"onMigrateSite(location)\">Migrate site</button>\r\n            <button mat-menu-item type=\"button\" (click)=\"onRemoveLocation(location)\">Remove location</button>\r\n          </mat-menu>\r\n        </td>\r\n      </tr>\r\n      <tr *ngIf=\"!filteredLocations.length\">\r\n        <td colspan=\"5\" class=\"tk-locations__empty\">No locations match your search.</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n\r\n  <div class=\"tk-locations__footer\">\r\n    <div class=\"tk-locations__rows-per-page\">\r\n      <label for=\"tk-locations-page-size\">Rows per page:</label>\r\n      <select id=\"tk-locations-page-size\" class=\"tk-locations__rows-per-page-select\" [ngModel]=\"pageSize\" (change)=\"onPageSizeChange($event)\">\r\n        <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">{{ size }}</option>\r\n      </select>\r\n    </div>\r\n    <span class=\"tk-locations__footer-text\">{{ pageRangeLabel }}</span>\r\n    <div class=\"tk-locations__pagination\">\r\n      <button type=\"button\" class=\"tk-locations__pagination-button\" [disabled]=\"!hasPreviousPage\" (click)=\"goToPreviousPage()\" aria-label=\"Previous page\">\r\n        <mat-icon>chevron_left</mat-icon>\r\n      </button>\r\n      <button type=\"button\" class=\"tk-locations__pagination-button\" [disabled]=\"!hasNextPage\" (click)=\"goToNextPage()\" aria-label=\"Next page\">\r\n        <mat-icon>chevron_right</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"tk-locations__filter-backdrop\"\r\n    *ngIf=\"isFilterPanelOpen\"\r\n    (click)=\"closeFilterPanel()\">\r\n  </div>\r\n\r\n  <aside class=\"tk-locations__filter-panel\" [class.tk-locations__filter-panel--open]=\"isFilterPanelOpen\">\r\n    <div class=\"tk-locations__filter-panel-header\">\r\n      <h3 class=\"tk-locations__filter-panel-title\">Filter locations</h3>\r\n      <button\r\n        type=\"button\"\r\n        class=\"tk-locations__filter-panel-close\"\r\n        aria-label=\"Close filter panel\"\r\n        (click)=\"closeFilterPanel()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"tk-locations__filter-panel-body\">\r\n      <div class=\"tk-locations__filter-field\">\r\n        <label class=\"tk-locations__filter-label\" for=\"tk-locations-filter-country\">Country/Region</label>\r\n        <div class=\"tk-locations__filter-select-wrap\">\r\n          <select id=\"tk-locations-filter-country\" class=\"tk-locations__filter-select\" [(ngModel)]=\"filters.country\">\r\n            <option value=\"\">All countries</option>\r\n            <option *ngFor=\"let country of countries\" [value]=\"country\">{{ country }}</option>\r\n          </select>\r\n          <mat-icon class=\"tk-locations__filter-select-icon\">expand_more</mat-icon>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"tk-locations__filter-field\">\r\n        <label class=\"tk-locations__filter-label\" for=\"tk-locations-filter-pending\">Pending action items</label>\r\n        <div class=\"tk-locations__filter-select-wrap\">\r\n          <select id=\"tk-locations-filter-pending\" class=\"tk-locations__filter-select\" [(ngModel)]=\"filters.pendingActions\">\r\n            <option value=\"\">All</option>\r\n            <option value=\"true\">Yes</option>\r\n            <option value=\"false\">No</option>\r\n          </select>\r\n          <mat-icon class=\"tk-locations__filter-select-icon\">expand_more</mat-icon>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"tk-locations__filter-panel-footer\">\r\n      <button type=\"button\" class=\"tk-locations__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n      <button type=\"button\" class=\"tk-locations__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n    </div>\r\n  </aside>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-locations{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding-top:0}.tk-locations__view-toggle{display:flex;align-items:center;gap:.25rem;margin-bottom:1rem;width:-moz-fit-content;width:fit-content}.tk-locations__view-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:none;border:none;border-radius:6.25rem;font-family:inherit;font-size:1rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-locations__view-button:hover:not(:disabled){background:rgba(0,0,0,.0705882353)}.tk-locations__view-button--active{background:#C1C1C1;color:#000000f2}.tk-locations__view-button--active:hover{background:rgba(0,0,0,.3019607843)}.tk-locations__view-button:disabled{cursor:default;opacity:.5}.tk-locations__view-button:disabled:hover{background:none}.tk-locations__view-icon{height:1.125rem;width:1.125rem;opacity:.6}.tk-locations__view-button--active .tk-locations__view-icon{opacity:1}.tk-locations__banner{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem 1rem;background:#fdf1d6;border:1px solid #f0d9a6;border-radius:.5rem;color:#7a5b0a}.tk-locations__banner-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#b5860b;flex-shrink:0}.tk-locations__banner-text{flex:1;font-size:.8125rem}.tk-locations__banner-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#7a5b0a;cursor:pointer}.tk-locations__banner-close:hover{color:#000000f2}.tk-locations__toolbar{display:flex;align-items:center;gap:.75rem;margin:.5rem .5rem 1rem}.tk-locations__filter-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-locations__filter-button:hover{background:rgba(0,0,0,.03)}.tk-locations__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-locations__count{font-size:.8125rem;color:#0009;white-space:nowrap}.tk-locations__download-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:auto;background:none;border:none;color:#0009;cursor:pointer}.tk-locations__download-button:hover{color:#000000f2}.tk-locations__manage-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-locations__manage-button:hover{background:#222}.tk-locations__manage-icon,.tk-locations__manage-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-locations__table{width:100%;border-collapse:collapse;font-family:Inter,sans-serif}.tk-locations__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-locations__table th:hover{background-color:#dedede}.tk-locations__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-locations__table tbody tr:hover td{background:#ededed}.tk-locations__sort-icon{font-size:1rem;height:1rem;width:1rem;vertical-align:middle;margin-left:.25rem;color:#00000080}.tk-locations__name-cell{min-width:0}.tk-locations__name-link{color:#000000de;font-weight:500;text-decoration:none}.tk-locations__actions-col{width:3rem;text-align:center!important;position:relative}.tk-locations__row-action-spinner{display:inline-block;margin:0 auto}.tk-locations__icon-wrapper{display:inline-flex;align-items:center}.tk-locations__row-action-button{color:#0009}.tk-locations__row-action-button:hover{color:#000000f2}.tk-locations__empty{padding:1.5rem;text-align:center;color:#0009}.tk-locations__footer{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-locations__rows-per-page{display:flex;align-items:center;gap:.5rem}.tk-locations__rows-per-page-select{padding:.25rem .5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-locations__pagination{display:flex;align-items:center;gap:.25rem}.tk-locations__pagination-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-locations__pagination-button:hover:not(:disabled){color:#000000f2}.tk-locations__pagination-button:disabled{color:#00000040;cursor:default}.tk-locations__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-locations__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-locations__filter-panel--open{transform:translate(0)}.tk-locations__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-locations__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-locations__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-locations__filter-panel-close:hover{color:#000000f2}.tk-locations__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-locations__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-locations__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-locations__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-locations__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-locations__filter-select:focus{outline:none;border-color:#0006}.tk-locations__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-locations__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem 1.5rem}.tk-locations__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-locations__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-locations__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-locations__filter-done:hover{background-color:oklch(95.5% .005 260)}::ng-deep input.blue-input{border:solid .0625rem rgba(0,0,0,.5019607843)!important}::ng-deep input.blue-input:focus{color:#000000b3;background-color:#ededed;border:solid .0625rem rgba(0,0,0,.5019607843);font-weight:500;cursor:pointer;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important}::ng-deep input.blue-input:focus:focus-visible{outline:none}::ng-deep input.blue-input:hover{background-color:#00000012!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
+LocationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LocationsComponent, selector: "tk-locations", inputs: { exHost: "exHost", token: "token", customerId: "customerId" }, outputs: { openLocation: "openLocation", editLocation: "editLocation", removeLocation: "removeLocation", addLocation: "addLocation", importLocations: "importLocations" }, ngImport: i0, template: "<div class=\"tk-locations\">\n  <app-loader *ngIf=\"isLoading\"></app-loader>\n\n  <div class=\"tk-locations__view-toggle\">\n    <button type=\"button\" class=\"tk-locations__view-button tk-locations__view-button--active\">\n      <mat-icon class=\"tk-locations__view-icon\">menu</mat-icon>\n      List\n    </button>\n    <button type=\"button\" class=\"tk-locations__view-button\" disabled title=\"Map view coming soon\">\n      <mat-icon class=\"tk-locations__view-icon\">place</mat-icon>\n      Map\n    </button>\n  </div>\n\n  <div class=\"tk-locations__banner\" *ngIf=\"showPendingBanner\">\n    <mat-icon class=\"tk-locations__banner-icon\">warning</mat-icon>\n    <span class=\"tk-locations__banner-text\">\n      View location(s) with pending action items to resume your calling service in {{ pendingLocations.length }} or more locations.\n    </span>\n    <button type=\"button\" class=\"tk-locations__banner-close\" aria-label=\"Dismiss\" (click)=\"dismissBanner()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"tk-locations__toolbar\">\n    <div style=\"position: relative; width: fit-content; min-width: 200px\">\n      <input\n        [value]=\"searchTerm\"\n        class=\"blue-input\"\n        (input)=\"onSearchInputChange($event)\"\n        type=\"text\"\n        placeholder=\"Search by name, city, state, country\"\n        style=\"\n          width: 100%;\n          height: 34px;\n          border-radius: 0.5rem;\n          font-size: 16px;\n          padding: 6px 12px 6px 44px;\n          border: 1px solid #00000080;\n          background: #fff;\n          color: #222;\n          outline: none;\n          box-sizing: border-box;\n          min-width: 280px;\n        \"\n      />\n      <span\n        style=\"\n          position: absolute;\n          left: 12px;\n          top: 50%;\n          transform: translateY(-50%);\n          color: #757575;\n          font-size: 18px;\n          font-weight: normal;\n          pointer-events: none;\n        \"\n      >\n        <i\n          class=\"material-icons\"\n          style=\"font-size: 18px; font-weight: normal\"\n          >search</i\n        >\n      </span>\n    </div>\n\n    <button type=\"button\" class=\"tk-locations__filter-button\" (click)=\"toggleFilterPanel()\">\n      <img class=\"tk-locations__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\n      Filter\n    </button>\n\n    <span class=\"tk-locations__count\">{{ totalElements }} locations</span>\n\n    <button type=\"button\" class=\"tk-locations__download-button\" aria-label=\"Download locations\" title=\"Download locations\" (click)=\"exportLocations()\">\n      <mat-icon>file_download</mat-icon>\n    </button>\n\n    <button type=\"button\" class=\"tk-locations__manage-button\" [matMenuTriggerFor]=\"manageMenu\">\n      Manage locations\n      <mat-icon class=\"tk-locations__manage-chevron\">expand_more</mat-icon>\n    </button>\n    <mat-menu #manageMenu=\"matMenu\" xPosition=\"before\">\n      <button mat-menu-item type=\"button\" (click)=\"onAddLocation()\">Add location</button>\n      <button mat-menu-item type=\"button\" (click)=\"onImportLocations()\">Import locations</button>\n    </mat-menu>\n  </div>\n\n  <table class=\"tk-locations__table\">\n    <thead>\n      <tr>\n        <th (click)=\"toggleNameSort()\">\n          Location Name\n          <mat-icon class=\"tk-locations__sort-icon\">{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\n        </th>\n        <th>Address</th>\n        <th>Country/Region</th>\n        <th>Mapping</th>\n        <th>Provisioning Type</th>\n        <th class=\"tk-locations__actions-col\"></th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let row of pagedRows\" (click)=\"onOpenLocation(row)\">\n        <td class=\"tk-locations__name-cell\">\n          <a href=\"javascript:void(0)\" class=\"tk-locations__name-link\" (click)=\"$event.stopPropagation(); onOpenLocation(row)\">{{ row.site.name }}</a>\n        </td>\n        <td>{{ addressLine(row) || '\u2014' }}</td>\n        <td>{{ countryLabel(row) || '\u2014' }}</td>\n        <td>\n          <span class=\"tk-locations__mapping-badge\" [class.tk-locations__mapping-badge--mapped]=\"isMapped(row)\">\n            {{ isMapped(row) ? 'Mapped' : 'Not mapped' }}\n          </span>\n        </td>\n        <td>\n          <span class=\"tk-locations__icon-wrapper\" *ngIf=\"provisioningTypeIcon(row) as pt; else noProvisioningType\">\n            <img [src]=\"pt.src\" [matTooltip]=\"pt.tooltip\" matTooltipPosition=\"right\" width=\"20\" alt=\"\">\n          </span>\n          <ng-template #noProvisioningType>\u2014</ng-template>\n        </td>\n        <td class=\"tk-locations__actions-col\">\n          <mat-progress-spinner\n            *ngIf=\"row.migrationStatus === 'IN_PROGRESS'\"\n            class=\"tk-locations__row-action-spinner\"\n            [diameter]=\"20\"\n            strokeWidth=\"2\"\n            mode=\"indeterminate\"\n            matTooltip=\"Migrating site\u2026\">\n          </mat-progress-spinner>\n          <button\n            *ngIf=\"row.migrationStatus !== 'IN_PROGRESS'\"\n            mat-icon-button\n            class=\"tk-locations__row-action-button\"\n            [matMenuTriggerFor]=\"rowMenu\"\n            (click)=\"$event.stopPropagation()\"\n            aria-label=\"Open location actions\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n          <mat-menu #rowMenu=\"matMenu\" yPosition=\"below\">\n            <button *ngIf=\"row.location\" mat-menu-item type=\"button\" (click)=\"onOpenLocation(row)\">View details</button>\n            <button *ngIf=\"row.location\" mat-menu-item type=\"button\" (click)=\"onEditLocation(row)\">Edit location</button>\n            <button\n              *ngIf=\"canMigrateSite(row)\"\n              mat-menu-item\n              type=\"button\"\n              (click)=\"onMigrateSite(row)\">Migrate site</button>\n            <button *ngIf=\"row.location\" mat-menu-item type=\"button\" (click)=\"onRemoveLocation(row)\">Remove location</button>\n          </mat-menu>\n        </td>\n      </tr>\n      <tr *ngIf=\"!pagedRows.length\">\n        <td colspan=\"6\" class=\"tk-locations__empty\">No locations match your search.</td>\n      </tr>\n    </tbody>\n  </table>\n\n  <div class=\"tk-locations__footer\">\n    <div class=\"tk-locations__rows-per-page\">\n      <label for=\"tk-locations-page-size\">Rows per page:</label>\n      <select id=\"tk-locations-page-size\" class=\"tk-locations__rows-per-page-select\" [ngModel]=\"pageSize\" (change)=\"onPageSizeChange($event)\">\n        <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">{{ size }}</option>\n      </select>\n    </div>\n    <span class=\"tk-locations__footer-text\">{{ pageRangeLabel }}</span>\n    <div class=\"tk-locations__pagination\">\n      <button type=\"button\" class=\"tk-locations__pagination-button\" [disabled]=\"!hasPreviousPage\" (click)=\"goToPreviousPage()\" aria-label=\"Previous page\">\n        <mat-icon>chevron_left</mat-icon>\n      </button>\n      <button type=\"button\" class=\"tk-locations__pagination-button\" [disabled]=\"!hasNextPage\" (click)=\"goToNextPage()\" aria-label=\"Next page\">\n        <mat-icon>chevron_right</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <div\n    class=\"tk-locations__filter-backdrop\"\n    *ngIf=\"isFilterPanelOpen\"\n    (click)=\"closeFilterPanel()\">\n  </div>\n\n  <aside class=\"tk-locations__filter-panel\" [class.tk-locations__filter-panel--open]=\"isFilterPanelOpen\">\n    <div class=\"tk-locations__filter-panel-header\">\n      <h3 class=\"tk-locations__filter-panel-title\">Filter locations</h3>\n      <button\n        type=\"button\"\n        class=\"tk-locations__filter-panel-close\"\n        aria-label=\"Close filter panel\"\n        (click)=\"closeFilterPanel()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"tk-locations__filter-panel-body\">\n      <div class=\"tk-locations__filter-field\">\n        <label class=\"tk-locations__filter-label\" for=\"tk-locations-filter-mapped\">Mapping</label>\n        <div class=\"tk-locations__filter-select-wrap\">\n          <select id=\"tk-locations-filter-mapped\" class=\"tk-locations__filter-select\" [(ngModel)]=\"filters.mapped\" (change)=\"onFilterChange()\">\n            <option value=\"\">All</option>\n            <option value=\"mapped\">Mapped</option>\n            <option value=\"unmapped\">Not mapped</option>\n          </select>\n          <mat-icon class=\"tk-locations__filter-select-icon\">expand_more</mat-icon>\n        </div>\n      </div>\n\n      <div class=\"tk-locations__filter-field\">\n        <label class=\"tk-locations__filter-label\" for=\"tk-locations-filter-country\">Country/Region</label>\n        <div class=\"tk-locations__filter-select-wrap\">\n          <select id=\"tk-locations-filter-country\" class=\"tk-locations__filter-select\" [(ngModel)]=\"filters.country\" (change)=\"onFilterChange()\">\n            <option value=\"\">All countries</option>\n            <option *ngFor=\"let country of countries\" [value]=\"country\">{{ country }}</option>\n          </select>\n          <mat-icon class=\"tk-locations__filter-select-icon\">expand_more</mat-icon>\n        </div>\n      </div>\n\n      <div class=\"tk-locations__filter-field\">\n        <label class=\"tk-locations__filter-label\" for=\"tk-locations-filter-pending\">Pending action items</label>\n        <div class=\"tk-locations__filter-select-wrap\">\n          <select id=\"tk-locations-filter-pending\" class=\"tk-locations__filter-select\" [(ngModel)]=\"filters.pendingActions\" (change)=\"onFilterChange()\">\n            <option value=\"\">All</option>\n            <option value=\"true\">Yes</option>\n            <option value=\"false\">No</option>\n          </select>\n          <mat-icon class=\"tk-locations__filter-select-icon\">expand_more</mat-icon>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"tk-locations__filter-panel-footer\">\n      <button type=\"button\" class=\"tk-locations__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\n      <button type=\"button\" class=\"tk-locations__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\n    </div>\n  </aside>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-locations{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding-top:0}.tk-locations__view-toggle{display:flex;align-items:center;gap:.25rem;margin-bottom:1rem;width:-moz-fit-content;width:fit-content}.tk-locations__view-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:none;border:none;border-radius:6.25rem;font-family:inherit;font-size:1rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-locations__view-button:hover:not(:disabled){background:rgba(0,0,0,.0705882353)}.tk-locations__view-button--active{background:#C1C1C1;color:#000000f2}.tk-locations__view-button--active:hover{background:rgba(0,0,0,.3019607843)}.tk-locations__view-button:disabled{cursor:default;opacity:.5}.tk-locations__view-button:disabled:hover{background:none}.tk-locations__view-icon{height:1.125rem;width:1.125rem;opacity:.6}.tk-locations__view-button--active .tk-locations__view-icon{opacity:1}.tk-locations__banner{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem 1rem;background:#fdf1d6;border:1px solid #f0d9a6;border-radius:.5rem;color:#7a5b0a}.tk-locations__banner-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#b5860b;flex-shrink:0}.tk-locations__banner-text{flex:1;font-size:.8125rem}.tk-locations__banner-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#7a5b0a;cursor:pointer}.tk-locations__banner-close:hover{color:#000000f2}.tk-locations__toolbar{display:flex;align-items:center;gap:.75rem;margin:.5rem .5rem 1rem}.tk-locations__filter-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-locations__filter-button:hover{background:rgba(0,0,0,.03)}.tk-locations__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-locations__count{font-size:.8125rem;color:#0009;white-space:nowrap}.tk-locations__download-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:auto;background:none;border:none;color:#0009;cursor:pointer}.tk-locations__download-button:hover{color:#000000f2}.tk-locations__manage-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-locations__manage-button:hover{background:#222}.tk-locations__manage-icon,.tk-locations__manage-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-locations__table{width:100%;border-collapse:collapse;font-family:Inter,sans-serif}.tk-locations__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-locations__table th:hover{background-color:#dedede}.tk-locations__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-locations__table tbody tr:hover td{background:#ededed}.tk-locations__sort-icon{font-size:1rem;height:1rem;width:1rem;vertical-align:middle;margin-left:.25rem;color:#00000080}.tk-locations__name-cell{min-width:0}.tk-locations__name-link{color:#000000de;font-weight:500;text-decoration:none}.tk-locations__actions-col{width:3rem;text-align:center!important;position:relative}.tk-locations__row-action-spinner{display:inline-block;margin:0 auto}.tk-locations__icon-wrapper{display:inline-flex;align-items:center}.tk-locations__mapping-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:6.25rem;font-size:.75rem;font-weight:500;color:#0009;background:rgba(0,0,0,.06)}.tk-locations__mapping-badge--mapped{color:#1a7f37;background:rgba(26,127,55,.1)}.tk-locations__row-action-button{color:#0009}.tk-locations__row-action-button:hover{color:#000000f2}.tk-locations__empty{padding:1.5rem;text-align:center;color:#0009}.tk-locations__footer{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-locations__rows-per-page{display:flex;align-items:center;gap:.5rem}.tk-locations__rows-per-page-select{padding:.25rem .5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-locations__pagination{display:flex;align-items:center;gap:.25rem}.tk-locations__pagination-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-locations__pagination-button:hover:not(:disabled){color:#000000f2}.tk-locations__pagination-button:disabled{color:#00000040;cursor:default}.tk-locations__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-locations__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-locations__filter-panel--open{transform:translate(0)}.tk-locations__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-locations__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-locations__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-locations__filter-panel-close:hover{color:#000000f2}.tk-locations__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-locations__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-locations__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-locations__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-locations__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-locations__filter-select:focus{outline:none;border-color:#0006}.tk-locations__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-locations__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem 1.5rem}.tk-locations__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-locations__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-locations__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-locations__filter-done:hover{background-color:oklch(95.5% .005 260)}::ng-deep input.blue-input{border:solid .0625rem rgba(0,0,0,.5019607843)!important}::ng-deep input.blue-input:focus{color:#000000b3;background-color:#ededed;border:solid .0625rem rgba(0,0,0,.5019607843);font-weight:500;cursor:pointer;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important}::ng-deep input.blue-input:focus:focus-visible{outline:none}::ng-deep input.blue-input:hover{background-color:#00000012!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-locations', template: "<div class=\"tk-locations\">\r\n  <app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n  <div class=\"tk-locations__view-toggle\">\r\n    <button type=\"button\" class=\"tk-locations__view-button tk-locations__view-button--active\">\r\n      <mat-icon class=\"tk-locations__view-icon\">menu</mat-icon>\r\n      List\r\n    </button>\r\n    <button type=\"button\" class=\"tk-locations__view-button\" disabled title=\"Map view coming soon\">\r\n      <mat-icon class=\"tk-locations__view-icon\">place</mat-icon>\r\n      Map\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"tk-locations__banner\" *ngIf=\"showPendingBanner\">\r\n    <mat-icon class=\"tk-locations__banner-icon\">warning</mat-icon>\r\n    <span class=\"tk-locations__banner-text\">\r\n      View location(s) with pending action items to resume your calling service in {{ pendingLocations.length }} or more locations.\r\n    </span>\r\n    <button type=\"button\" class=\"tk-locations__banner-close\" aria-label=\"Dismiss\" (click)=\"dismissBanner()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"tk-locations__toolbar\">\r\n    <div style=\"position: relative; width: fit-content; min-width: 200px\">\r\n      <input\r\n        [value]=\"searchTerm\"\r\n        class=\"blue-input\"\r\n        (input)=\"onSearchInputChange($event)\"\r\n        type=\"text\"\r\n        placeholder=\"Search by name, city, state, country\"\r\n        style=\"\r\n          width: 100%;\r\n          height: 34px;\r\n          border-radius: 0.5rem;\r\n          font-size: 16px;\r\n          padding: 6px 12px 6px 44px;\r\n          border: 1px solid #00000080;\r\n          background: #fff;\r\n          color: #222;\r\n          outline: none;\r\n          box-sizing: border-box;\r\n          min-width: 280px;\r\n        \"\r\n      />\r\n      <span\r\n        style=\"\r\n          position: absolute;\r\n          left: 12px;\r\n          top: 50%;\r\n          transform: translateY(-50%);\r\n          color: #757575;\r\n          font-size: 18px;\r\n          font-weight: normal;\r\n          pointer-events: none;\r\n        \"\r\n      >\r\n        <i\r\n          class=\"material-icons\"\r\n          style=\"font-size: 18px; font-weight: normal\"\r\n          >search</i\r\n        >\r\n      </span>\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"tk-locations__filter-button\" (click)=\"toggleFilterPanel()\">\r\n      <img class=\"tk-locations__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n      Filter\r\n    </button>\r\n\r\n    <span class=\"tk-locations__count\">{{ filteredLocations.length }} locations</span>\r\n\r\n    <button type=\"button\" class=\"tk-locations__download-button\" aria-label=\"Download locations\" title=\"Download locations\" (click)=\"exportLocations()\">\r\n      <mat-icon>file_download</mat-icon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"tk-locations__manage-button\" [matMenuTriggerFor]=\"manageMenu\">\r\n      Manage locations\r\n      <mat-icon class=\"tk-locations__manage-chevron\">expand_more</mat-icon>\r\n    </button>\r\n    <mat-menu #manageMenu=\"matMenu\" xPosition=\"before\">\r\n      <button mat-menu-item type=\"button\" (click)=\"onAddLocation()\">Add location</button>\r\n      <button mat-menu-item type=\"button\" (click)=\"onImportLocations()\">Import locations</button>\r\n    </mat-menu>\r\n  </div>\r\n\r\n  <table class=\"tk-locations__table\">\r\n    <thead>\r\n      <tr>\r\n        <th (click)=\"toggleNameSort()\">\r\n          Location Name\r\n          <mat-icon class=\"tk-locations__sort-icon\">{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\r\n        </th>\r\n        <th>Address</th>\r\n        <th>Country/Region</th>\r\n        <th>Provisioning Type</th>\r\n        <th class=\"tk-locations__actions-col\"></th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let location of filteredLocations\" (click)=\"onOpenLocation(location)\">\r\n        <td class=\"tk-locations__name-cell\">\r\n          <a href=\"javascript:void(0)\" class=\"tk-locations__name-link\" (click)=\"$event.stopPropagation(); onOpenLocation(location)\">{{ location.name }}</a>\r\n        </td>\r\n        <td>{{ addressLine(location) || '\u2014' }}</td>\r\n        <td>{{ countryLabel(location) || '\u2014' }}</td>\r\n        <td>\r\n          <span class=\"tk-locations__icon-wrapper\" *ngIf=\"provisioningTypeIcon(location) as pt; else noProvisioningType\">\r\n            <img [src]=\"pt.src\" [matTooltip]=\"pt.tooltip\" matTooltipPosition=\"right\" width=\"20\" alt=\"\">\r\n          </span>\r\n          <ng-template #noProvisioningType>\u2014</ng-template>\r\n        </td>\r\n        <td class=\"tk-locations__actions-col\">\r\n          <mat-progress-spinner\r\n            *ngIf=\"location.migrationStatus === 'IN_PROGRESS'\"\r\n            class=\"tk-locations__row-action-spinner\"\r\n            [diameter]=\"20\"\r\n            strokeWidth=\"2\"\r\n            mode=\"indeterminate\"\r\n            matTooltip=\"Migrating site\u2026\">\r\n          </mat-progress-spinner>\r\n          <button\r\n            *ngIf=\"location.migrationStatus !== 'IN_PROGRESS'\"\r\n            mat-icon-button\r\n            class=\"tk-locations__row-action-button\"\r\n            [matMenuTriggerFor]=\"rowMenu\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            aria-label=\"Open location actions\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #rowMenu=\"matMenu\" yPosition=\"below\">\r\n            <button mat-menu-item type=\"button\" (click)=\"onOpenLocation(location)\">View details</button>\r\n            <button mat-menu-item type=\"button\" (click)=\"onEditLocation(location)\">Edit location</button>\r\n            <button\r\n              *ngIf=\"canMigrateSite(location)\"\r\n              mat-menu-item\r\n              type=\"button\"\r\n              (click)=\"onMigrateSite(location)\">Migrate site</button>\r\n            <button mat-menu-item type=\"button\" (click)=\"onRemoveLocation(location)\">Remove location</button>\r\n          </mat-menu>\r\n        </td>\r\n      </tr>\r\n      <tr *ngIf=\"!filteredLocations.length\">\r\n        <td colspan=\"5\" class=\"tk-locations__empty\">No locations match your search.</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n\r\n  <div class=\"tk-locations__footer\">\r\n    <div class=\"tk-locations__rows-per-page\">\r\n      <label for=\"tk-locations-page-size\">Rows per page:</label>\r\n      <select id=\"tk-locations-page-size\" class=\"tk-locations__rows-per-page-select\" [ngModel]=\"pageSize\" (change)=\"onPageSizeChange($event)\">\r\n        <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">{{ size }}</option>\r\n      </select>\r\n    </div>\r\n    <span class=\"tk-locations__footer-text\">{{ pageRangeLabel }}</span>\r\n    <div class=\"tk-locations__pagination\">\r\n      <button type=\"button\" class=\"tk-locations__pagination-button\" [disabled]=\"!hasPreviousPage\" (click)=\"goToPreviousPage()\" aria-label=\"Previous page\">\r\n        <mat-icon>chevron_left</mat-icon>\r\n      </button>\r\n      <button type=\"button\" class=\"tk-locations__pagination-button\" [disabled]=\"!hasNextPage\" (click)=\"goToNextPage()\" aria-label=\"Next page\">\r\n        <mat-icon>chevron_right</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"tk-locations__filter-backdrop\"\r\n    *ngIf=\"isFilterPanelOpen\"\r\n    (click)=\"closeFilterPanel()\">\r\n  </div>\r\n\r\n  <aside class=\"tk-locations__filter-panel\" [class.tk-locations__filter-panel--open]=\"isFilterPanelOpen\">\r\n    <div class=\"tk-locations__filter-panel-header\">\r\n      <h3 class=\"tk-locations__filter-panel-title\">Filter locations</h3>\r\n      <button\r\n        type=\"button\"\r\n        class=\"tk-locations__filter-panel-close\"\r\n        aria-label=\"Close filter panel\"\r\n        (click)=\"closeFilterPanel()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"tk-locations__filter-panel-body\">\r\n      <div class=\"tk-locations__filter-field\">\r\n        <label class=\"tk-locations__filter-label\" for=\"tk-locations-filter-country\">Country/Region</label>\r\n        <div class=\"tk-locations__filter-select-wrap\">\r\n          <select id=\"tk-locations-filter-country\" class=\"tk-locations__filter-select\" [(ngModel)]=\"filters.country\">\r\n            <option value=\"\">All countries</option>\r\n            <option *ngFor=\"let country of countries\" [value]=\"country\">{{ country }}</option>\r\n          </select>\r\n          <mat-icon class=\"tk-locations__filter-select-icon\">expand_more</mat-icon>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"tk-locations__filter-field\">\r\n        <label class=\"tk-locations__filter-label\" for=\"tk-locations-filter-pending\">Pending action items</label>\r\n        <div class=\"tk-locations__filter-select-wrap\">\r\n          <select id=\"tk-locations-filter-pending\" class=\"tk-locations__filter-select\" [(ngModel)]=\"filters.pendingActions\">\r\n            <option value=\"\">All</option>\r\n            <option value=\"true\">Yes</option>\r\n            <option value=\"false\">No</option>\r\n          </select>\r\n          <mat-icon class=\"tk-locations__filter-select-icon\">expand_more</mat-icon>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"tk-locations__filter-panel-footer\">\r\n      <button type=\"button\" class=\"tk-locations__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n      <button type=\"button\" class=\"tk-locations__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n    </div>\r\n  </aside>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-locations{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding-top:0}.tk-locations__view-toggle{display:flex;align-items:center;gap:.25rem;margin-bottom:1rem;width:-moz-fit-content;width:fit-content}.tk-locations__view-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:none;border:none;border-radius:6.25rem;font-family:inherit;font-size:1rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-locations__view-button:hover:not(:disabled){background:rgba(0,0,0,.0705882353)}.tk-locations__view-button--active{background:#C1C1C1;color:#000000f2}.tk-locations__view-button--active:hover{background:rgba(0,0,0,.3019607843)}.tk-locations__view-button:disabled{cursor:default;opacity:.5}.tk-locations__view-button:disabled:hover{background:none}.tk-locations__view-icon{height:1.125rem;width:1.125rem;opacity:.6}.tk-locations__view-button--active .tk-locations__view-icon{opacity:1}.tk-locations__banner{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem 1rem;background:#fdf1d6;border:1px solid #f0d9a6;border-radius:.5rem;color:#7a5b0a}.tk-locations__banner-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#b5860b;flex-shrink:0}.tk-locations__banner-text{flex:1;font-size:.8125rem}.tk-locations__banner-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#7a5b0a;cursor:pointer}.tk-locations__banner-close:hover{color:#000000f2}.tk-locations__toolbar{display:flex;align-items:center;gap:.75rem;margin:.5rem .5rem 1rem}.tk-locations__filter-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-locations__filter-button:hover{background:rgba(0,0,0,.03)}.tk-locations__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-locations__count{font-size:.8125rem;color:#0009;white-space:nowrap}.tk-locations__download-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:auto;background:none;border:none;color:#0009;cursor:pointer}.tk-locations__download-button:hover{color:#000000f2}.tk-locations__manage-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-locations__manage-button:hover{background:#222}.tk-locations__manage-icon,.tk-locations__manage-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-locations__table{width:100%;border-collapse:collapse;font-family:Inter,sans-serif}.tk-locations__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-locations__table th:hover{background-color:#dedede}.tk-locations__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-locations__table tbody tr:hover td{background:#ededed}.tk-locations__sort-icon{font-size:1rem;height:1rem;width:1rem;vertical-align:middle;margin-left:.25rem;color:#00000080}.tk-locations__name-cell{min-width:0}.tk-locations__name-link{color:#000000de;font-weight:500;text-decoration:none}.tk-locations__actions-col{width:3rem;text-align:center!important;position:relative}.tk-locations__row-action-spinner{display:inline-block;margin:0 auto}.tk-locations__icon-wrapper{display:inline-flex;align-items:center}.tk-locations__row-action-button{color:#0009}.tk-locations__row-action-button:hover{color:#000000f2}.tk-locations__empty{padding:1.5rem;text-align:center;color:#0009}.tk-locations__footer{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-locations__rows-per-page{display:flex;align-items:center;gap:.5rem}.tk-locations__rows-per-page-select{padding:.25rem .5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-locations__pagination{display:flex;align-items:center;gap:.25rem}.tk-locations__pagination-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-locations__pagination-button:hover:not(:disabled){color:#000000f2}.tk-locations__pagination-button:disabled{color:#00000040;cursor:default}.tk-locations__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-locations__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-locations__filter-panel--open{transform:translate(0)}.tk-locations__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-locations__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-locations__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-locations__filter-panel-close:hover{color:#000000f2}.tk-locations__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-locations__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-locations__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-locations__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-locations__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-locations__filter-select:focus{outline:none;border-color:#0006}.tk-locations__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-locations__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem 1.5rem}.tk-locations__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-locations__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-locations__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-locations__filter-done:hover{background-color:oklch(95.5% .005 260)}::ng-deep input.blue-input{border:solid .0625rem rgba(0,0,0,.5019607843)!important}::ng-deep input.blue-input:focus{color:#000000b3;background-color:#ededed;border:solid .0625rem rgba(0,0,0,.5019607843);font-weight:500;cursor:pointer;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important}::ng-deep input.blue-input:focus:focus-visible{outline:none}::ng-deep input.blue-input:hover{background-color:#00000012!important}\n"] }]
+            args: [{ selector: 'tk-locations', template: "<div class=\"tk-locations\">\n  <app-loader *ngIf=\"isLoading\"></app-loader>\n\n  <div class=\"tk-locations__view-toggle\">\n    <button type=\"button\" class=\"tk-locations__view-button tk-locations__view-button--active\">\n      <mat-icon class=\"tk-locations__view-icon\">menu</mat-icon>\n      List\n    </button>\n    <button type=\"button\" class=\"tk-locations__view-button\" disabled title=\"Map view coming soon\">\n      <mat-icon class=\"tk-locations__view-icon\">place</mat-icon>\n      Map\n    </button>\n  </div>\n\n  <div class=\"tk-locations__banner\" *ngIf=\"showPendingBanner\">\n    <mat-icon class=\"tk-locations__banner-icon\">warning</mat-icon>\n    <span class=\"tk-locations__banner-text\">\n      View location(s) with pending action items to resume your calling service in {{ pendingLocations.length }} or more locations.\n    </span>\n    <button type=\"button\" class=\"tk-locations__banner-close\" aria-label=\"Dismiss\" (click)=\"dismissBanner()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"tk-locations__toolbar\">\n    <div style=\"position: relative; width: fit-content; min-width: 200px\">\n      <input\n        [value]=\"searchTerm\"\n        class=\"blue-input\"\n        (input)=\"onSearchInputChange($event)\"\n        type=\"text\"\n        placeholder=\"Search by name, city, state, country\"\n        style=\"\n          width: 100%;\n          height: 34px;\n          border-radius: 0.5rem;\n          font-size: 16px;\n          padding: 6px 12px 6px 44px;\n          border: 1px solid #00000080;\n          background: #fff;\n          color: #222;\n          outline: none;\n          box-sizing: border-box;\n          min-width: 280px;\n        \"\n      />\n      <span\n        style=\"\n          position: absolute;\n          left: 12px;\n          top: 50%;\n          transform: translateY(-50%);\n          color: #757575;\n          font-size: 18px;\n          font-weight: normal;\n          pointer-events: none;\n        \"\n      >\n        <i\n          class=\"material-icons\"\n          style=\"font-size: 18px; font-weight: normal\"\n          >search</i\n        >\n      </span>\n    </div>\n\n    <button type=\"button\" class=\"tk-locations__filter-button\" (click)=\"toggleFilterPanel()\">\n      <img class=\"tk-locations__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\n      Filter\n    </button>\n\n    <span class=\"tk-locations__count\">{{ totalElements }} locations</span>\n\n    <button type=\"button\" class=\"tk-locations__download-button\" aria-label=\"Download locations\" title=\"Download locations\" (click)=\"exportLocations()\">\n      <mat-icon>file_download</mat-icon>\n    </button>\n\n    <button type=\"button\" class=\"tk-locations__manage-button\" [matMenuTriggerFor]=\"manageMenu\">\n      Manage locations\n      <mat-icon class=\"tk-locations__manage-chevron\">expand_more</mat-icon>\n    </button>\n    <mat-menu #manageMenu=\"matMenu\" xPosition=\"before\">\n      <button mat-menu-item type=\"button\" (click)=\"onAddLocation()\">Add location</button>\n      <button mat-menu-item type=\"button\" (click)=\"onImportLocations()\">Import locations</button>\n    </mat-menu>\n  </div>\n\n  <table class=\"tk-locations__table\">\n    <thead>\n      <tr>\n        <th (click)=\"toggleNameSort()\">\n          Location Name\n          <mat-icon class=\"tk-locations__sort-icon\">{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\n        </th>\n        <th>Address</th>\n        <th>Country/Region</th>\n        <th>Mapping</th>\n        <th>Provisioning Type</th>\n        <th class=\"tk-locations__actions-col\"></th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let row of pagedRows\" (click)=\"onOpenLocation(row)\">\n        <td class=\"tk-locations__name-cell\">\n          <a href=\"javascript:void(0)\" class=\"tk-locations__name-link\" (click)=\"$event.stopPropagation(); onOpenLocation(row)\">{{ row.site.name }}</a>\n        </td>\n        <td>{{ addressLine(row) || '\u2014' }}</td>\n        <td>{{ countryLabel(row) || '\u2014' }}</td>\n        <td>\n          <span class=\"tk-locations__mapping-badge\" [class.tk-locations__mapping-badge--mapped]=\"isMapped(row)\">\n            {{ isMapped(row) ? 'Mapped' : 'Not mapped' }}\n          </span>\n        </td>\n        <td>\n          <span class=\"tk-locations__icon-wrapper\" *ngIf=\"provisioningTypeIcon(row) as pt; else noProvisioningType\">\n            <img [src]=\"pt.src\" [matTooltip]=\"pt.tooltip\" matTooltipPosition=\"right\" width=\"20\" alt=\"\">\n          </span>\n          <ng-template #noProvisioningType>\u2014</ng-template>\n        </td>\n        <td class=\"tk-locations__actions-col\">\n          <mat-progress-spinner\n            *ngIf=\"row.migrationStatus === 'IN_PROGRESS'\"\n            class=\"tk-locations__row-action-spinner\"\n            [diameter]=\"20\"\n            strokeWidth=\"2\"\n            mode=\"indeterminate\"\n            matTooltip=\"Migrating site\u2026\">\n          </mat-progress-spinner>\n          <button\n            *ngIf=\"row.migrationStatus !== 'IN_PROGRESS'\"\n            mat-icon-button\n            class=\"tk-locations__row-action-button\"\n            [matMenuTriggerFor]=\"rowMenu\"\n            (click)=\"$event.stopPropagation()\"\n            aria-label=\"Open location actions\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n          <mat-menu #rowMenu=\"matMenu\" yPosition=\"below\">\n            <button *ngIf=\"row.location\" mat-menu-item type=\"button\" (click)=\"onOpenLocation(row)\">View details</button>\n            <button *ngIf=\"row.location\" mat-menu-item type=\"button\" (click)=\"onEditLocation(row)\">Edit location</button>\n            <button\n              *ngIf=\"canMigrateSite(row)\"\n              mat-menu-item\n              type=\"button\"\n              (click)=\"onMigrateSite(row)\">Migrate site</button>\n            <button *ngIf=\"row.location\" mat-menu-item type=\"button\" (click)=\"onRemoveLocation(row)\">Remove location</button>\n          </mat-menu>\n        </td>\n      </tr>\n      <tr *ngIf=\"!pagedRows.length\">\n        <td colspan=\"6\" class=\"tk-locations__empty\">No locations match your search.</td>\n      </tr>\n    </tbody>\n  </table>\n\n  <div class=\"tk-locations__footer\">\n    <div class=\"tk-locations__rows-per-page\">\n      <label for=\"tk-locations-page-size\">Rows per page:</label>\n      <select id=\"tk-locations-page-size\" class=\"tk-locations__rows-per-page-select\" [ngModel]=\"pageSize\" (change)=\"onPageSizeChange($event)\">\n        <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">{{ size }}</option>\n      </select>\n    </div>\n    <span class=\"tk-locations__footer-text\">{{ pageRangeLabel }}</span>\n    <div class=\"tk-locations__pagination\">\n      <button type=\"button\" class=\"tk-locations__pagination-button\" [disabled]=\"!hasPreviousPage\" (click)=\"goToPreviousPage()\" aria-label=\"Previous page\">\n        <mat-icon>chevron_left</mat-icon>\n      </button>\n      <button type=\"button\" class=\"tk-locations__pagination-button\" [disabled]=\"!hasNextPage\" (click)=\"goToNextPage()\" aria-label=\"Next page\">\n        <mat-icon>chevron_right</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <div\n    class=\"tk-locations__filter-backdrop\"\n    *ngIf=\"isFilterPanelOpen\"\n    (click)=\"closeFilterPanel()\">\n  </div>\n\n  <aside class=\"tk-locations__filter-panel\" [class.tk-locations__filter-panel--open]=\"isFilterPanelOpen\">\n    <div class=\"tk-locations__filter-panel-header\">\n      <h3 class=\"tk-locations__filter-panel-title\">Filter locations</h3>\n      <button\n        type=\"button\"\n        class=\"tk-locations__filter-panel-close\"\n        aria-label=\"Close filter panel\"\n        (click)=\"closeFilterPanel()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"tk-locations__filter-panel-body\">\n      <div class=\"tk-locations__filter-field\">\n        <label class=\"tk-locations__filter-label\" for=\"tk-locations-filter-mapped\">Mapping</label>\n        <div class=\"tk-locations__filter-select-wrap\">\n          <select id=\"tk-locations-filter-mapped\" class=\"tk-locations__filter-select\" [(ngModel)]=\"filters.mapped\" (change)=\"onFilterChange()\">\n            <option value=\"\">All</option>\n            <option value=\"mapped\">Mapped</option>\n            <option value=\"unmapped\">Not mapped</option>\n          </select>\n          <mat-icon class=\"tk-locations__filter-select-icon\">expand_more</mat-icon>\n        </div>\n      </div>\n\n      <div class=\"tk-locations__filter-field\">\n        <label class=\"tk-locations__filter-label\" for=\"tk-locations-filter-country\">Country/Region</label>\n        <div class=\"tk-locations__filter-select-wrap\">\n          <select id=\"tk-locations-filter-country\" class=\"tk-locations__filter-select\" [(ngModel)]=\"filters.country\" (change)=\"onFilterChange()\">\n            <option value=\"\">All countries</option>\n            <option *ngFor=\"let country of countries\" [value]=\"country\">{{ country }}</option>\n          </select>\n          <mat-icon class=\"tk-locations__filter-select-icon\">expand_more</mat-icon>\n        </div>\n      </div>\n\n      <div class=\"tk-locations__filter-field\">\n        <label class=\"tk-locations__filter-label\" for=\"tk-locations-filter-pending\">Pending action items</label>\n        <div class=\"tk-locations__filter-select-wrap\">\n          <select id=\"tk-locations-filter-pending\" class=\"tk-locations__filter-select\" [(ngModel)]=\"filters.pendingActions\" (change)=\"onFilterChange()\">\n            <option value=\"\">All</option>\n            <option value=\"true\">Yes</option>\n            <option value=\"false\">No</option>\n          </select>\n          <mat-icon class=\"tk-locations__filter-select-icon\">expand_more</mat-icon>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"tk-locations__filter-panel-footer\">\n      <button type=\"button\" class=\"tk-locations__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\n      <button type=\"button\" class=\"tk-locations__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\n    </div>\n  </aside>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-locations{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding-top:0}.tk-locations__view-toggle{display:flex;align-items:center;gap:.25rem;margin-bottom:1rem;width:-moz-fit-content;width:fit-content}.tk-locations__view-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:none;border:none;border-radius:6.25rem;font-family:inherit;font-size:1rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-locations__view-button:hover:not(:disabled){background:rgba(0,0,0,.0705882353)}.tk-locations__view-button--active{background:#C1C1C1;color:#000000f2}.tk-locations__view-button--active:hover{background:rgba(0,0,0,.3019607843)}.tk-locations__view-button:disabled{cursor:default;opacity:.5}.tk-locations__view-button:disabled:hover{background:none}.tk-locations__view-icon{height:1.125rem;width:1.125rem;opacity:.6}.tk-locations__view-button--active .tk-locations__view-icon{opacity:1}.tk-locations__banner{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem 1rem;background:#fdf1d6;border:1px solid #f0d9a6;border-radius:.5rem;color:#7a5b0a}.tk-locations__banner-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#b5860b;flex-shrink:0}.tk-locations__banner-text{flex:1;font-size:.8125rem}.tk-locations__banner-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#7a5b0a;cursor:pointer}.tk-locations__banner-close:hover{color:#000000f2}.tk-locations__toolbar{display:flex;align-items:center;gap:.75rem;margin:.5rem .5rem 1rem}.tk-locations__filter-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-locations__filter-button:hover{background:rgba(0,0,0,.03)}.tk-locations__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-locations__count{font-size:.8125rem;color:#0009;white-space:nowrap}.tk-locations__download-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:auto;background:none;border:none;color:#0009;cursor:pointer}.tk-locations__download-button:hover{color:#000000f2}.tk-locations__manage-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-locations__manage-button:hover{background:#222}.tk-locations__manage-icon,.tk-locations__manage-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-locations__table{width:100%;border-collapse:collapse;font-family:Inter,sans-serif}.tk-locations__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-locations__table th:hover{background-color:#dedede}.tk-locations__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-locations__table tbody tr:hover td{background:#ededed}.tk-locations__sort-icon{font-size:1rem;height:1rem;width:1rem;vertical-align:middle;margin-left:.25rem;color:#00000080}.tk-locations__name-cell{min-width:0}.tk-locations__name-link{color:#000000de;font-weight:500;text-decoration:none}.tk-locations__actions-col{width:3rem;text-align:center!important;position:relative}.tk-locations__row-action-spinner{display:inline-block;margin:0 auto}.tk-locations__icon-wrapper{display:inline-flex;align-items:center}.tk-locations__mapping-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:6.25rem;font-size:.75rem;font-weight:500;color:#0009;background:rgba(0,0,0,.06)}.tk-locations__mapping-badge--mapped{color:#1a7f37;background:rgba(26,127,55,.1)}.tk-locations__row-action-button{color:#0009}.tk-locations__row-action-button:hover{color:#000000f2}.tk-locations__empty{padding:1.5rem;text-align:center;color:#0009}.tk-locations__footer{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-locations__rows-per-page{display:flex;align-items:center;gap:.5rem}.tk-locations__rows-per-page-select{padding:.25rem .5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-locations__pagination{display:flex;align-items:center;gap:.25rem}.tk-locations__pagination-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-locations__pagination-button:hover:not(:disabled){color:#000000f2}.tk-locations__pagination-button:disabled{color:#00000040;cursor:default}.tk-locations__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-locations__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-locations__filter-panel--open{transform:translate(0)}.tk-locations__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-locations__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-locations__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-locations__filter-panel-close:hover{color:#000000f2}.tk-locations__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-locations__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-locations__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-locations__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-locations__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-locations__filter-select:focus{outline:none;border-color:#0006}.tk-locations__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-locations__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem 1.5rem}.tk-locations__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-locations__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-locations__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-locations__filter-done:hover{background-color:oklch(95.5% .005 260)}::ng-deep input.blue-input{border:solid .0625rem rgba(0,0,0,.5019607843)!important}::ng-deep input.blue-input:focus{color:#000000b3;background-color:#ededed;border:solid .0625rem rgba(0,0,0,.5019607843);font-weight:500;cursor:pointer;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important}::ng-deep input.blue-input:focus:focus-visible{outline:none}::ng-deep input.blue-input:hover{background-color:#00000012!important}\n"] }]
         }], ctorParameters: function () { return [{ type: APIService }, { type: LocationsService }, { type: i1.MatDialog }]; }, propDecorators: { exHost: [{
                 type: Input
             }], token: [{