@tuki-io/tuki-widgets 0.0.219-dev.43 → 0.0.219-dev.44

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 (19) hide show
  1. package/esm2020/locations/src/app.constants.mjs +6 -2
  2. package/esm2020/locations/src/location-confirm-dialog/location-confirm-dialog.component.mjs +23 -0
  3. package/esm2020/locations/src/locations.component.mjs +90 -13
  4. package/esm2020/locations/src/locations.module.mjs +4 -1
  5. package/esm2020/locations/src/material.module.mjs +8 -1
  6. package/esm2020/locations/src/services/locations.service.mjs +11 -1
  7. package/esm2020/locations/src/types/location.mjs +1 -1
  8. package/fesm2015/tuki-io-tuki-widgets-locations.mjs +137 -18
  9. package/fesm2015/tuki-io-tuki-widgets-locations.mjs.map +1 -1
  10. package/fesm2020/tuki-io-tuki-widgets-locations.mjs +135 -18
  11. package/fesm2020/tuki-io-tuki-widgets-locations.mjs.map +1 -1
  12. package/locations/src/app.constants.d.ts +4 -0
  13. package/locations/src/location-confirm-dialog/location-confirm-dialog.component.d.ts +15 -0
  14. package/locations/src/locations.component.d.ts +12 -3
  15. package/locations/src/locations.module.d.ts +7 -6
  16. package/locations/src/material.module.d.ts +6 -5
  17. package/locations/src/services/locations.service.d.ts +8 -0
  18. package/locations/src/types/location.d.ts +2 -0
  19. package/package.json +1 -1
package/fesm2020/tuki-io-tuki-widgets-locations.mjs CHANGED
@@ -1,20 +1,22 @@
1
- import * as i3 from '@angular/common';
1
+ import * as i4 from '@angular/common';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { NgModule, Injectable, Component, ViewEncapsulation, EventEmitter, Input, Output } from '@angular/core';
5
- import * as i1 from '@angular/common/http';
4
+ import { NgModule, Component, ViewEncapsulation, Inject, Injectable, EventEmitter, Input, Output } from '@angular/core';
5
+ import * as i1$1 from '@angular/common/http';
6
6
  import { HttpHeaders, HttpClientModule } from '@angular/common/http';
7
- import * as i4 from '@angular/forms';
7
+ import * as i5 from '@angular/forms';
8
8
  import { FormsModule } from '@angular/forms';
9
- import * as i5 from '@angular/material/button';
9
+ import * as i6 from '@angular/material/button';
10
10
  import { MatButtonModule } from '@angular/material/button';
11
- import * as i6 from '@angular/material/icon';
11
+ import * as i1 from '@angular/material/dialog';
12
+ import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
13
+ import * as i7 from '@angular/material/icon';
12
14
  import { MatIconModule } from '@angular/material/icon';
13
- import * as i7 from '@angular/material/menu';
15
+ import * as i8 from '@angular/material/menu';
14
16
  import { MatMenuModule } from '@angular/material/menu';
15
- import * as i1$1 from '@angular/material/progress-spinner';
17
+ import * as i1$2 from '@angular/material/progress-spinner';
16
18
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
17
- import * as i8 from '@angular/material/tooltip';
19
+ import * as i10 from '@angular/material/tooltip';
18
20
  import { MatTooltipModule } from '@angular/material/tooltip';
19
21
  import { map } from 'rxjs/operators';
20
22
 
@@ -22,19 +24,23 @@ class MaterialModule {
22
24
  }
23
25
  MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
24
26
  MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatButtonModule,
27
+ MatDialogModule,
25
28
  MatIconModule,
26
29
  MatMenuModule,
27
30
  MatProgressSpinnerModule,
28
31
  MatTooltipModule], exports: [MatButtonModule,
32
+ MatDialogModule,
29
33
  MatIconModule,
30
34
  MatMenuModule,
31
35
  MatProgressSpinnerModule,
32
36
  MatTooltipModule] });
33
37
  MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatButtonModule,
38
+ MatDialogModule,
34
39
  MatIconModule,
35
40
  MatMenuModule,
36
41
  MatProgressSpinnerModule,
37
42
  MatTooltipModule, MatButtonModule,
43
+ MatDialogModule,
38
44
  MatIconModule,
39
45
  MatMenuModule,
40
46
  MatProgressSpinnerModule,
@@ -44,6 +50,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
44
50
  args: [{
45
51
  imports: [
46
52
  MatButtonModule,
53
+ MatDialogModule,
47
54
  MatIconModule,
48
55
  MatMenuModule,
49
56
  MatProgressSpinnerModule,
@@ -51,6 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
51
58
  ],
52
59
  exports: [
53
60
  MatButtonModule,
61
+ MatDialogModule,
54
62
  MatIconModule,
55
63
  MatMenuModule,
56
64
  MatProgressSpinnerModule,
@@ -59,6 +67,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
59
67
  }]
60
68
  }] });
61
69
 
70
+ class LocationConfirmDialogComponent {
71
+ constructor(dialogRef, data) {
72
+ this.dialogRef = dialogRef;
73
+ this.data = data;
74
+ }
75
+ onClose(result) {
76
+ this.dialogRef.close(result);
77
+ }
78
+ }
79
+ 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 });
80
+ 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{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 });
81
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationConfirmDialogComponent, decorators: [{
82
+ type: Component,
83
+ 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{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"] }]
84
+ }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
85
+ type: Inject,
86
+ args: [MAT_DIALOG_DATA]
87
+ }] }]; } });
88
+
62
89
  class APIService {
63
90
  constructor(httpClient) {
64
91
  this.httpClient = httpClient;
@@ -113,19 +140,23 @@ class APIService {
113
140
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
114
141
  }
115
142
  }
116
- APIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
143
+ APIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
117
144
  APIService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, providedIn: 'root' });
118
145
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, decorators: [{
119
146
  type: Injectable,
120
147
  args: [{
121
148
  providedIn: 'root'
122
149
  }]
123
- }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
150
+ }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
124
151
 
125
152
  const API = {
126
153
  LOCATIONS: {
127
154
  GET_ALL: "/api/webex/locations/customers/:customerId",
128
- }
155
+ },
156
+ SITE_MIGRATION: {
157
+ MIGRATE_SITE: "/api/migration/webex/sites/:siteId/migrate",
158
+ BATCH_STATUS: "/api/migration/webex/customer/:customerId/batchesstatus",
159
+ },
129
160
  };
130
161
 
131
162
  function toLocationAddress(raw) {
@@ -164,6 +195,16 @@ class LocationsService {
164
195
  };
165
196
  }));
166
197
  }
198
+ // Same endpoint family as di2mt's SiteUpgradeService.migrateSite — locations don't
199
+ // go through a batch-selection step, so no batchId is sent.
200
+ migrateSite(siteId) {
201
+ const url = API.SITE_MIGRATION.MIGRATE_SITE.replace(':siteId', siteId);
202
+ return this.apiService.post(url, {}, { batchId: '' });
203
+ }
204
+ getMigrationBatchStatuses(customerId, batchIds) {
205
+ const url = API.SITE_MIGRATION.BATCH_STATUS.replace(':customerId', String(customerId));
206
+ return this.apiService.post(url, batchIds);
207
+ }
167
208
  }
168
209
  LocationsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationsService, deps: [{ token: APIService }], target: i0.ɵɵFactoryTarget.Injectable });
169
210
  LocationsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationsService, providedIn: 'root' });
@@ -179,17 +220,19 @@ class AppLoaderComponent {
179
220
  }
180
221
  }
181
222
  AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
182
- 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$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
223
+ 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 });
183
224
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, decorators: [{
184
225
  type: Component,
185
226
  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"] }]
186
227
  }], ctorParameters: function () { return []; } });
187
228
 
229
+ const MIGRATION_POLL_INTERVAL_MS = 10000;
188
230
  const PAGE_SIZE_OPTIONS = [10, 25, 50];
189
231
  class LocationsComponent {
190
- constructor(apiService, locationsService) {
232
+ constructor(apiService, locationsService, dialog) {
191
233
  this.apiService = apiService;
192
234
  this.locationsService = locationsService;
235
+ this.dialog = dialog;
193
236
  this.openLocation = new EventEmitter();
194
237
  this.editLocation = new EventEmitter();
195
238
  this.removeLocation = new EventEmitter();
@@ -212,6 +255,7 @@ class LocationsComponent {
212
255
  this.countryDisplayNames = typeof Intl !== 'undefined' && 'DisplayNames' in Intl
213
256
  ? new Intl.DisplayNames(['en'], { type: 'region' })
214
257
  : null;
258
+ this.migrationIntervals = new Map();
215
259
  // Same icon set as users-list's "Provisioning Type" column (assets/icons/webex.svg,
216
260
  // local_24.svg, di_cloud_24.svg).
217
261
  this.provisioningTypeIcons = {
@@ -225,6 +269,10 @@ class LocationsComponent {
225
269
  this.apiService.apiUrl = this.exHost + '/webex';
226
270
  this.loadPage();
227
271
  }
272
+ ngOnDestroy() {
273
+ this.migrationIntervals.forEach(interval => clearInterval(interval));
274
+ this.migrationIntervals.clear();
275
+ }
228
276
  loadPage() {
229
277
  this.isLoading = true;
230
278
  this.locationsService.fetchLocations(this.customerId, this.pageIndex, this.pageSize).subscribe({
@@ -340,6 +388,73 @@ class LocationsComponent {
340
388
  onRemoveLocation(location) {
341
389
  this.removeLocation.emit(location.id);
342
390
  }
391
+ canMigrateSite(location) {
392
+ return location.provisioningType !== 'WEBEX' && location.migrationStatus !== 'IN_PROGRESS';
393
+ }
394
+ onMigrateSite(location) {
395
+ const dialogRef = this.dialog.open(LocationConfirmDialogComponent, {
396
+ data: {
397
+ title: `Migrate ${location.name} to Webex Calling?`,
398
+ message: `<p>Migrating this site will move its calling configuration to Webex Calling.</p>
399
+ <p>Users and devices at this location will be updated to the new environment. This may take several minutes.</p>
400
+ <p>Do you want to continue?</p>`,
401
+ confirmButtonText: 'Yes, migrate',
402
+ },
403
+ });
404
+ dialogRef.afterClosed().subscribe(confirmed => {
405
+ if (confirmed) {
406
+ this.migrateSite(location);
407
+ }
408
+ });
409
+ }
410
+ migrateSite(location) {
411
+ location.migrationStatus = 'IN_PROGRESS';
412
+ this.locationsService.migrateSite(location.id).subscribe({
413
+ next: (batchId) => {
414
+ if (batchId) {
415
+ this.pollMigrationStatus(location, batchId);
416
+ }
417
+ else {
418
+ location.migrationStatus = 'COMPLETED';
419
+ location.provisioningType = 'WEBEX';
420
+ }
421
+ },
422
+ error: () => {
423
+ location.migrationStatus = 'FAILED';
424
+ },
425
+ });
426
+ }
427
+ pollMigrationStatus(location, batchId) {
428
+ this.clearMigrationInterval(location.id);
429
+ const poll = () => {
430
+ this.locationsService.getMigrationBatchStatuses(this.customerId, [batchId]).subscribe({
431
+ next: (statuses) => {
432
+ const status = statuses.find(item => item.id === batchId);
433
+ if (!status || status.status === 'In Progress') {
434
+ return;
435
+ }
436
+ this.clearMigrationInterval(location.id);
437
+ location.migrationStatus = status.status === 'Completed' ? 'COMPLETED' : 'FAILED';
438
+ if (location.migrationStatus === 'COMPLETED') {
439
+ location.provisioningType = 'WEBEX';
440
+ }
441
+ },
442
+ error: () => {
443
+ this.clearMigrationInterval(location.id);
444
+ location.migrationStatus = 'FAILED';
445
+ },
446
+ });
447
+ };
448
+ poll();
449
+ this.migrationIntervals.set(location.id, setInterval(poll, MIGRATION_POLL_INTERVAL_MS));
450
+ }
451
+ clearMigrationInterval(locationId) {
452
+ const interval = this.migrationIntervals.get(locationId);
453
+ if (interval) {
454
+ clearInterval(interval);
455
+ this.migrationIntervals.delete(locationId);
456
+ }
457
+ }
343
458
  onAddLocation() {
344
459
  this.addLocation.emit();
345
460
  }
@@ -366,12 +481,12 @@ class LocationsComponent {
366
481
  URL.revokeObjectURL(url);
367
482
  }
368
483
  }
369
- LocationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationsComponent, deps: [{ token: APIService }, { token: LocationsService }], target: i0.ɵɵFactoryTarget.Component });
370
- 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\">{{ filteredLocations.length }} 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>Provisioning Type</th>\n <th class=\"tk-locations__actions-col\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let location of filteredLocations\" (click)=\"onOpenLocation(location)\">\n <td class=\"tk-locations__name-cell\">\n <a href=\"javascript:void(0)\" class=\"tk-locations__name-link\" (click)=\"$event.stopPropagation(); onOpenLocation(location)\">{{ location.name }}</a>\n </td>\n <td>{{ addressLine(location) || '\u2014' }}</td>\n <td>{{ countryLabel(location) || '\u2014' }}</td>\n <td>\n <span class=\"tk-locations__icon-wrapper\" *ngIf=\"provisioningTypeIcon(location) 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 <button\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 mat-menu-item type=\"button\" (click)=\"onOpenLocation(location)\">View details</button>\n <button mat-menu-item type=\"button\" (click)=\"onEditLocation(location)\">Edit location</button>\n <button mat-menu-item type=\"button\" (click)=\"onRemoveLocation(location)\">Remove location</button>\n </mat-menu>\n </td>\n </tr>\n <tr *ngIf=\"!filteredLocations.length\">\n <td colspan=\"5\" 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-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\">\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\">\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}.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
484
+ 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 });
485
+ 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\">{{ filteredLocations.length }} 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>Provisioning Type</th>\n <th class=\"tk-locations__actions-col\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let location of filteredLocations\" (click)=\"onOpenLocation(location)\">\n <td class=\"tk-locations__name-cell\">\n <a href=\"javascript:void(0)\" class=\"tk-locations__name-link\" (click)=\"$event.stopPropagation(); onOpenLocation(location)\">{{ location.name }}</a>\n </td>\n <td>{{ addressLine(location) || '\u2014' }}</td>\n <td>{{ countryLabel(location) || '\u2014' }}</td>\n <td>\n <span class=\"tk-locations__icon-wrapper\" *ngIf=\"provisioningTypeIcon(location) 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=\"location.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=\"location.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 mat-menu-item type=\"button\" (click)=\"onOpenLocation(location)\">View details</button>\n <button mat-menu-item type=\"button\" (click)=\"onEditLocation(location)\">Edit location</button>\n <button\n *ngIf=\"canMigrateSite(location)\"\n mat-menu-item\n type=\"button\"\n (click)=\"onMigrateSite(location)\">Migrate site</button>\n <button mat-menu-item type=\"button\" (click)=\"onRemoveLocation(location)\">Remove location</button>\n </mat-menu>\n </td>\n </tr>\n <tr *ngIf=\"!filteredLocations.length\">\n <td colspan=\"5\" 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-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\">\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\">\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__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" }] });
371
486
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationsComponent, decorators: [{
372
487
  type: Component,
373
- 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\">{{ filteredLocations.length }} 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>Provisioning Type</th>\n <th class=\"tk-locations__actions-col\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let location of filteredLocations\" (click)=\"onOpenLocation(location)\">\n <td class=\"tk-locations__name-cell\">\n <a href=\"javascript:void(0)\" class=\"tk-locations__name-link\" (click)=\"$event.stopPropagation(); onOpenLocation(location)\">{{ location.name }}</a>\n </td>\n <td>{{ addressLine(location) || '\u2014' }}</td>\n <td>{{ countryLabel(location) || '\u2014' }}</td>\n <td>\n <span class=\"tk-locations__icon-wrapper\" *ngIf=\"provisioningTypeIcon(location) 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 <button\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 mat-menu-item type=\"button\" (click)=\"onOpenLocation(location)\">View details</button>\n <button mat-menu-item type=\"button\" (click)=\"onEditLocation(location)\">Edit location</button>\n <button mat-menu-item type=\"button\" (click)=\"onRemoveLocation(location)\">Remove location</button>\n </mat-menu>\n </td>\n </tr>\n <tr *ngIf=\"!filteredLocations.length\">\n <td colspan=\"5\" 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-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\">\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\">\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}.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"] }]
374
- }], ctorParameters: function () { return [{ type: APIService }, { type: LocationsService }]; }, propDecorators: { exHost: [{
488
+ 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\">{{ filteredLocations.length }} 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>Provisioning Type</th>\n <th class=\"tk-locations__actions-col\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let location of filteredLocations\" (click)=\"onOpenLocation(location)\">\n <td class=\"tk-locations__name-cell\">\n <a href=\"javascript:void(0)\" class=\"tk-locations__name-link\" (click)=\"$event.stopPropagation(); onOpenLocation(location)\">{{ location.name }}</a>\n </td>\n <td>{{ addressLine(location) || '\u2014' }}</td>\n <td>{{ countryLabel(location) || '\u2014' }}</td>\n <td>\n <span class=\"tk-locations__icon-wrapper\" *ngIf=\"provisioningTypeIcon(location) 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=\"location.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=\"location.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 mat-menu-item type=\"button\" (click)=\"onOpenLocation(location)\">View details</button>\n <button mat-menu-item type=\"button\" (click)=\"onEditLocation(location)\">Edit location</button>\n <button\n *ngIf=\"canMigrateSite(location)\"\n mat-menu-item\n type=\"button\"\n (click)=\"onMigrateSite(location)\">Migrate site</button>\n <button mat-menu-item type=\"button\" (click)=\"onRemoveLocation(location)\">Remove location</button>\n </mat-menu>\n </td>\n </tr>\n <tr *ngIf=\"!filteredLocations.length\">\n <td colspan=\"5\" 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-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\">\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\">\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__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"] }]
489
+ }], ctorParameters: function () { return [{ type: APIService }, { type: LocationsService }, { type: i1.MatDialog }]; }, propDecorators: { exHost: [{
375
490
  type: Input
376
491
  }], token: [{
377
492
  type: Input
@@ -393,6 +508,7 @@ class LocationsModule {
393
508
  }
394
509
  LocationsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
395
510
  LocationsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: LocationsModule, declarations: [LocationsComponent,
511
+ LocationConfirmDialogComponent,
396
512
  AppLoaderComponent], imports: [CommonModule,
397
513
  HttpClientModule,
398
514
  FormsModule,
@@ -406,6 +522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
406
522
  args: [{
407
523
  declarations: [
408
524
  LocationsComponent,
525
+ LocationConfirmDialogComponent,
409
526
  AppLoaderComponent,
410
527
  ],
411
528
  imports: [