@tuki-io/tuki-widgets 0.0.219-dev.51 → 0.0.219-dev.53

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 (23) hide show
  1. package/esm2020/locations/src/app.constants.mjs +6 -2
  2. package/esm2020/locations/src/locations.component.mjs +19 -4
  3. package/esm2020/locations/src/services/locations.service.mjs +7 -3
  4. package/esm2020/locations/src/types/location.mjs +1 -1
  5. package/esm2020/workspaces/src/components/workspace-detail/workspace-detail.component.mjs +30 -8
  6. package/esm2020/workspaces/src/services/workspace-detail.service.mjs +7 -2
  7. package/esm2020/workspaces/src/services/workspaces.service.mjs +7 -4
  8. package/esm2020/workspaces/src/types/workspace.mjs +1 -1
  9. package/fesm2015/tuki-io-tuki-widgets-locations.mjs +29 -6
  10. package/fesm2015/tuki-io-tuki-widgets-locations.mjs.map +1 -1
  11. package/fesm2015/tuki-io-tuki-widgets-workspaces.mjs +54 -23
  12. package/fesm2015/tuki-io-tuki-widgets-workspaces.mjs.map +1 -1
  13. package/fesm2020/tuki-io-tuki-widgets-locations.mjs +29 -6
  14. package/fesm2020/tuki-io-tuki-widgets-locations.mjs.map +1 -1
  15. package/fesm2020/tuki-io-tuki-widgets-workspaces.mjs +51 -22
  16. package/fesm2020/tuki-io-tuki-widgets-workspaces.mjs.map +1 -1
  17. package/locations/src/app.constants.d.ts +1 -0
  18. package/locations/src/locations.component.d.ts +3 -0
  19. package/locations/src/services/locations.service.d.ts +6 -1
  20. package/locations/src/types/location.d.ts +1 -0
  21. package/package.json +1 -1
  22. package/workspaces/src/components/workspace-detail/workspace-detail.component.d.ts +4 -0
  23. package/workspaces/src/types/workspace.d.ts +4 -0
package/fesm2020/tuki-io-tuki-widgets-workspaces.mjs CHANGED
@@ -241,7 +241,7 @@ function toStatus(provisioningStatus) {
241
241
  }
242
242
  return provisioningStatus.toLowerCase() === 'active' ? 'active' : 'inactive';
243
243
  }
244
- function toWorkspace(item, index) {
244
+ function toWorkspace(item, index, isCucm) {
245
245
  const device = item.device;
246
246
  const firstDirectoryNumber = device.associatedDNs?.[0]?.directoryNumber ?? '';
247
247
  return {
@@ -264,6 +264,7 @@ function toWorkspace(item, index) {
264
264
  statusLabel: device.provisioningStatus || 'Status unavailable',
265
265
  device,
266
266
  isHybrid: false,
267
+ cucmDeviceName: isCucm ? (device.name || null) : null,
267
268
  };
268
269
  }
269
270
  function mergeDevices(a, b) {
@@ -284,6 +285,7 @@ function mergeWorkspacesByDeviceName(workspaces) {
284
285
  ...workspace,
285
286
  device: mergeDevices(existing.device, workspace.device),
286
287
  isHybrid: true,
288
+ cucmDeviceName: existing.cucmDeviceName ?? workspace.cucmDeviceName,
287
289
  } : workspace);
288
290
  }
289
291
  return Array.from(merged.values());
@@ -312,8 +314,9 @@ class WorkspacesService {
312
314
  return forkJoin([cucm$, webex$]).pipe(map(([cucmResponse, webexResponse]) => {
313
315
  const cucmParsed = parseResponse(cucmResponse);
314
316
  const webexParsed = parseResponse(webexResponse);
315
- const items = [...(cucmParsed?.pageData || []), ...(webexParsed?.pageData || [])];
316
- const workspaces = mergeWorkspacesByDeviceName(items.map(toWorkspace));
317
+ const cucmWorkspaces = (cucmParsed?.pageData || []).map((item, index) => toWorkspace(item, index, true));
318
+ const webexWorkspaces = (webexParsed?.pageData || []).map((item, index) => toWorkspace(item, index, false));
319
+ const workspaces = mergeWorkspacesByDeviceName([...cucmWorkspaces, ...webexWorkspaces]);
317
320
  return {
318
321
  workspaces,
319
322
  total: workspaces.length,
@@ -596,6 +599,7 @@ class WorkspaceDetailService {
596
599
  license: workspaceRes.licenseName || 'Not set',
597
600
  sipAddress: workspaceRes.sipAddress || 'Not assigned',
598
601
  directoryNumber: primaryNumber?.external || primaryNumber?.extension || 'Not assigned',
602
+ extension: primaryNumber?.extension || undefined,
599
603
  routePartition: '',
600
604
  callingSearchSpace: '',
601
605
  securityProfile: '',
@@ -610,7 +614,7 @@ class WorkspaceDetailService {
610
614
  }
611
615
  getCucmDetails(workspace) {
612
616
  const siteId = String(workspace.siteId);
613
- const params = { siteId, workspaceId: workspace.id };
617
+ const params = { siteId, workspaceId: workspace.cucmDeviceName ?? workspace.device.name };
614
618
  return forkJoin([
615
619
  this.apiService.fetch(this.buildUrl(API.DETAILS.CUCM.WORKSPACE, params)),
616
620
  this.apiService.fetch(this.buildUrl(API.DETAILS.CUCM.SITE, { siteId })),
@@ -651,12 +655,16 @@ class WorkspaceDetailService {
651
655
  message: 'Workspace type not set',
652
656
  timestamp,
653
657
  actionLabel: 'Assign type',
658
+ description: 'Adding a type specifies what the workspace is used for.',
659
+ suggestedAction: 'Set a type for this workspace.',
654
660
  } : null,
655
661
  capacity == null ? {
656
662
  id: 'capacity',
657
663
  message: 'Workspace capacity not set',
658
664
  timestamp,
659
665
  actionLabel: 'Set capacity',
666
+ description: 'Adding a capacity specifies how many people can use this workspace.',
667
+ suggestedAction: 'Set a capacity for this workspace.',
660
668
  } : null,
661
669
  ].filter((issue) => issue !== null);
662
670
  }
@@ -680,6 +688,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
680
688
  }]
681
689
  }], ctorParameters: function () { return [{ type: APIService }, { type: ApiWebexService }]; } });
682
690
 
691
+ class AppLoaderComponent {
692
+ constructor() {
693
+ }
694
+ }
695
+ AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
696
+ 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: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
697
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, decorators: [{
698
+ type: Component,
699
+ 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"] }]
700
+ }], ctorParameters: function () { return []; } });
701
+
683
702
  class WorkspaceDetailComponent {
684
703
  constructor(workspaceDetailService, location) {
685
704
  this.workspaceDetailService = workspaceDetailService;
@@ -688,16 +707,34 @@ class WorkspaceDetailComponent {
688
707
  this.back = new EventEmitter();
689
708
  this.activeTab = 'overview';
690
709
  this.details = null;
710
+ this.isLoading = false;
711
+ this.expandedIssueId = null;
691
712
  }
692
713
  ngOnInit() {
693
- this.workspaceDetailService.getByWorkspace(this.workspace, this.connectionType, this.customerId).subscribe(details => {
694
- this.details = details;
695
- if (details.capacity != null) {
696
- this.workspace = { ...this.workspace, capacity: details.capacity };
697
- }
714
+ this.isLoading = true;
715
+ this.workspaceDetailService.getByWorkspace(this.workspace, this.connectionType, this.customerId).subscribe({
716
+ next: details => {
717
+ this.details = details;
718
+ if (details.capacity != null) {
719
+ this.workspace = { ...this.workspace, capacity: details.capacity };
720
+ }
721
+ this.isLoading = false;
722
+ },
723
+ error: () => {
724
+ this.isLoading = false;
725
+ },
698
726
  });
699
727
  this.updateUrl();
700
728
  }
729
+ get callerIdLabel() {
730
+ const calling = this.details?.calling;
731
+ if (!calling?.externalCallerIdNumber) {
732
+ return 'Not set';
733
+ }
734
+ return calling.externalCallerIdName
735
+ ? `${calling.externalCallerIdName}: ${calling.externalCallerIdNumber}`
736
+ : `Location number: ${calling.externalCallerIdNumber}`;
737
+ }
701
738
  get deviceName() {
702
739
  if (this.connectionType === 'webex') {
703
740
  return this.workspace.device?.webexUUID || this.workspace.device?.name || this.workspace.id;
@@ -707,6 +744,9 @@ class WorkspaceDetailComponent {
707
744
  resolveIcon(model) {
708
745
  return getDeviceIcon(model);
709
746
  }
747
+ toggleIssue(issueId) {
748
+ this.expandedIssueId = this.expandedIssueId === issueId ? null : issueId;
749
+ }
710
750
  selectTab(tab) {
711
751
  this.activeTab = tab;
712
752
  this.updateUrl();
@@ -720,10 +760,10 @@ class WorkspaceDetailComponent {
720
760
  }
721
761
  }
722
762
  WorkspaceDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceDetailComponent, deps: [{ token: WorkspaceDetailService }, { token: i2.Location }], target: i0.ɵɵFactoryTarget.Component });
723
- WorkspaceDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspaceDetailComponent, selector: "tk-workspace-detail", inputs: { workspace: "workspace", connectionType: "connectionType", customerId: "customerId" }, outputs: { back: "back" }, ngImport: i0, template: "<button type=\"button\" class=\"tk-workspace-detail__breadcrumb\" (click)=\"onBack()\">\n <mat-icon>chevron_left</mat-icon>\n Workspaces\n</button>\n\n<div class=\"tk-workspace-detail__header\">\n <span class=\"tk-workspace-detail__icon\">\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n </span>\n <div class=\"tk-workspace-detail__title-block\">\n <h1 class=\"tk-workspace-detail__name\">{{ workspace.displayName }}</h1>\n <div class=\"tk-workspace-detail__meta\">\n <span class=\"tk-workspace-detail__status\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Live status unavailable\n </span>\n <span class=\"tk-workspace-detail__meta-sep\">&middot;</span>\n <span>Type: {{ workspace.typeLabel === 'No type' ? 'Not set' : workspace.typeLabel }}</span>\n <span class=\"tk-workspace-detail__meta-sep\">&middot;</span>\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\n <span>Capacity: {{ workspace.capacity ?? 'Not set' }}</span>\n <span class=\"tk-workspace-detail__meta-sep\">&middot;</span>\n <span class=\"tk-workspace-detail__meta-muted\">Size not set</span>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\n Actions\n <mat-icon>expand_more</mat-icon>\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\n </mat-menu>\n</div>\n\n<nav class=\"tk-workspace-detail__tabs\">\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'overview'\"\n (click)=\"selectTab('overview')\">\n Overview\n </button>\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'calling'\"\n (click)=\"selectTab('calling')\">\n Calling\n </button>\n</nav>\n\n<ng-container *ngIf=\"details\">\n <div class=\"tk-workspace-detail__grid\" *ngIf=\"activeTab === 'overview'\">\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">Issues &amp; Information</h2>\n <div class=\"tk-workspace-detail__no-issues\" *ngIf=\"!details.issues.length\">\n <mat-icon class=\"tk-workspace-detail__no-issues-icon\">check_circle</mat-icon>\n There are currently no issues detected in your workspace.\n </div>\n <div class=\"tk-workspace-detail__issue\" *ngFor=\"let issue of details.issues\">\n <div class=\"tk-workspace-detail__issue-info\">\n <mat-icon class=\"tk-workspace-detail__issue-icon\">info</mat-icon>\n <div>\n <div class=\"tk-workspace-detail__issue-message\">{{ issue.message }}</div>\n <div class=\"tk-workspace-detail__issue-timestamp\">{{ issue.timestamp }}</div>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">\n {{ issue.actionLabel }}\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Devices</h2>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add device</button>\n </div>\n <div class=\"tk-workspace-detail__devices\" *ngIf=\"workspace.devices.length; else noDevices\">\n <div class=\"tk-workspace-detail__device\" *ngFor=\"let device of workspace.devices\">\n <img class=\"tk-workspace-detail__device-icon\" [src]=\"resolveIcon(device.model)\" [alt]=\"device.label\" />\n <div class=\"tk-workspace-detail__device-info\">\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__device-link\">{{ device.label }}</a>\n <div class=\"tk-workspace-detail__device-status\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Status unavailable\n <mat-icon class=\"tk-workspace-detail__info-icon\">info_outline</mat-icon>\n </div>\n </div>\n </div>\n </div>\n <ng-template #noDevices>\n <div class=\"tk-workspace-detail__empty\">No devices assigned.</div>\n </ng-template>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Calling</h2>\n <mat-icon class=\"tk-workspace-detail__settings-icon\">settings</mat-icon>\n </div>\n <div class=\"tk-workspace-detail__calling-license\">\n <mat-icon>call</mat-icon>\n {{ details.calling.license }}\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\n <span class=\"tk-workspace-detail__row-label\">Cisco Webex SIP Address</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.sipAddress }}</span>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.schedulingConfigured\">\n <mat-icon class=\"tk-workspace-detail__card-icon\">event</mat-icon>\n <h3 class=\"tk-workspace-detail__card-heading\">Choose scheduling</h3>\n <p class=\"tk-workspace-detail__card-text\">Choose a calendar service or setup hot-desking for this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Choose scheduling</button>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\">\n <mat-icon class=\"tk-workspace-detail__card-icon\">info</mat-icon>\n <h3 class=\"tk-workspace-detail__card-heading\">Device hosted meetings unavailable</h3>\n <p class=\"tk-workspace-detail__card-text\">Service not supported by Cisco IP phones</p>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">\n Planned Maintenance\n <mat-icon class=\"tk-workspace-detail__info-icon\">info_outline</mat-icon>\n </h2>\n <div class=\"tk-workspace-detail__row\">\n <mat-icon>build</mat-icon>\n <span>{{ details.plannedMaintenanceEnabled ? 'On' : 'Off' }}</span>\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--with-action\">\n <div class=\"tk-workspace-detail__row\">\n <mat-icon>event</mat-icon>\n <div>\n <div>Schedule</div>\n <div class=\"tk-workspace-detail__row-hint\">No schedule set</div>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Edit schedule</button>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.notes\">\n <mat-icon class=\"tk-workspace-detail__card-icon\">description</mat-icon>\n <h3 class=\"tk-workspace-detail__card-heading\">Add notes</h3>\n <p class=\"tk-workspace-detail__card-text\">Write a note about this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add notes</button>\n </section>\n </div>\n\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Location</h2>\n <mat-icon class=\"tk-workspace-detail__settings-icon\">settings</mat-icon>\n </div>\n <div class=\"tk-workspace-detail__location\">\n <mat-icon>location_on</mat-icon>\n <div>\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__location-link\">{{ details.location.country }}</a>\n <div class=\"tk-workspace-detail__location-address\">{{ details.location.address }}</div>\n </div>\n </div>\n </section>\n </div>\n </div>\n\n <div class=\"tk-workspace-detail__grid\" *ngIf=\"activeTab === 'calling'\">\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">Calling</h2>\n <div class=\"tk-workspace-detail__calling-license\">\n <mat-icon>call</mat-icon>\n {{ details.calling.license }}\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\n <span class=\"tk-workspace-detail__row-label\">Cisco Webex SIP Address</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.sipAddress }}</span>\n </div>\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\n <span class=\"tk-workspace-detail__row-label\">Directory Number</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.directoryNumber }}</span>\n </div>\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\" *ngIf=\"details.calling.externalCallerIdNumber\">\n <span class=\"tk-workspace-detail__row-label\">External Caller ID</span>\n <span class=\"tk-workspace-detail__row-value\">\n {{ details.calling.externalCallerIdName }} ({{ details.calling.externalCallerIdNumber }})\n </span>\n </div>\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\" *ngIf=\"details.calling.routePartition\">\n <span class=\"tk-workspace-detail__row-label\">Route Partition</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.routePartition }}</span>\n </div>\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\" *ngIf=\"details.calling.callingSearchSpace\">\n <span class=\"tk-workspace-detail__row-label\">Calling Search Space</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.callingSearchSpace }}</span>\n </div>\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\" *ngIf=\"details.calling.securityProfile\">\n <span class=\"tk-workspace-detail__row-label\">Device Security Profile</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.securityProfile }}</span>\n </div>\n </section>\n </div>\n </div>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding:1.5rem}.tk-workspace-detail__breadcrumb{display:inline-flex;align-items:center;gap:.125rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-detail__breadcrumb mat-icon{font-size:1.25rem;height:1.25rem;width:1.25rem}.tk-workspace-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.tk-workspace-detail__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:50%;background:#2b2b2b}.tk-workspace-detail__icon img{height:1.375rem;width:1.375rem;filter:brightness(0) invert(1)}.tk-workspace-detail__title-block{flex:1;min-width:0}.tk-workspace-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-detail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;font-size:.875rem;color:#0009}.tk-workspace-detail__meta-sep{color:#0000004d}.tk-workspace-detail__meta-icon{height:.875rem;width:.875rem;opacity:.4}.tk-workspace-detail__meta-muted{color:#0006}.tk-workspace-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-detail__actions-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__tabs{display:flex;align-items:center;gap:1.5rem;border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:1.25rem}.tk-workspace-detail__tab{padding:.75rem 0;background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:.9375rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-workspace-detail__tab:hover{color:#000000f2}.tk-workspace-detail__tab--active{color:#000000f2;border-bottom-color:#000}.tk-workspace-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-detail__grid{grid-template-columns:1fr}}.tk-workspace-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1.25rem}.tk-workspace-detail__card--centered{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:2rem 1.25rem}.tk-workspace-detail__card-icon{color:#0009;margin-bottom:.5rem}.tk-workspace-detail__card-heading{margin:0;font-size:.9375rem;font-weight:600}.tk-workspace-detail__card-text{margin:0 0 .5rem;font-size:.8125rem;color:#0009;max-width:20rem}.tk-workspace-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.tk-workspace-detail__card-title{display:flex;align-items:center;gap:.375rem;margin:0 0 .75rem;font-size:.9375rem;font-weight:600}.tk-workspace-detail__card-header .tk-workspace-detail__card-title{margin-bottom:0}.tk-workspace-detail__settings-icon,.tk-workspace-detail__info-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-workspace-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.12);margin:.75rem 0}.tk-workspace-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__issue{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 0;border-top:1px solid rgba(0,0,0,.12)}.tk-workspace-detail__issue:first-of-type{border-top:none;padding-top:0}.tk-workspace-detail__issue-info{display:flex;align-items:flex-start;gap:.5rem}.tk-workspace-detail__issue-icon{color:#0353a8;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__issue-message{font-size:.875rem;font-weight:500}.tk-workspace-detail__issue-timestamp{font-size:.75rem;color:#0006}.tk-workspace-detail__pill-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.3);border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer;white-space:nowrap}.tk-workspace-detail__pill-button:hover{background:#ededed}.tk-workspace-detail__pill-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__devices{display:flex;flex-wrap:wrap;gap:.75rem}.tk-workspace-detail__device{display:flex;align-items:center;gap:.625rem;padding:.75rem;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;min-width:12rem}.tk-workspace-detail__device-icon{width:2.25rem;height:auto;flex-shrink:0}.tk-workspace-detail__device-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__device-status{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#0009}.tk-workspace-detail__empty{font-size:.875rem;color:#0009}.tk-workspace-detail__calling-license{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__calling-license mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__row{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__row mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__row--with-action{justify-content:space-between}.tk-workspace-detail__row--kv{justify-content:space-between;padding:.5rem 0;border-top:1px solid rgba(0,0,0,.12)}.tk-workspace-detail__row--kv:first-of-type{border-top:none}.tk-workspace-detail__row-label{color:#0009}.tk-workspace-detail__row-value{font-weight:500;text-align:right}.tk-workspace-detail__row-hint{font-size:.75rem;color:#0006}.tk-workspace-detail__location{display:flex;align-items:flex-start;gap:.5rem}.tk-workspace-detail__location mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__location-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__location-address{font-size:.8125rem;color:#0009}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
763
+ WorkspaceDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspaceDetailComponent, selector: "tk-workspace-detail", inputs: { workspace: "workspace", connectionType: "connectionType", customerId: "customerId" }, outputs: { back: "back" }, ngImport: i0, template: "<button type=\"button\" class=\"tk-workspace-detail__breadcrumb\" (click)=\"onBack()\">\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-left-bold.svg\" alt=\"Back\" />\n Workspaces\n</button>\n\n<div class=\"tk-workspace-detail__header\">\n <span class=\"tk-workspace-detail__icon\">\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n </span>\n <div class=\"tk-workspace-detail__title-block\">\n <h1 class=\"tk-workspace-detail__name\">{{ workspace.displayName }}</h1>\n <div class=\"tk-workspace-detail__meta\">\n <span class=\"tk-workspace-detail__meta-pill\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Live status unavailable\n </span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-type\">Type: {{ workspace.typeLabel === 'No type' ? 'Not set' : workspace.typeLabel }}</span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-pill\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\n Capacity: {{ workspace.capacity ?? 'Not set' }}\n </span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-pill tk-workspace-detail__meta-pill--muted\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n Size not set\n </span>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\n Actions\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\n </mat-menu>\n</div>\n\n<nav class=\"tk-workspace-detail__tabs\">\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'overview'\"\n (click)=\"selectTab('overview')\">\n Overview\n </button>\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'calling'\"\n (click)=\"selectTab('calling')\">\n Calling\n </button>\n</nav>\n\n<app-loader *ngIf=\"isLoading\"></app-loader>\n\n<ng-container *ngIf=\"details\">\n <div class=\"tk-workspace-detail__grid\" *ngIf=\"activeTab === 'overview'\">\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">Issues &amp; Information</h2>\n <div class=\"tk-workspace-detail__no-issues\" *ngIf=\"!details.issues.length\">\n <mat-icon class=\"tk-workspace-detail__no-issues-icon\">check_circle</mat-icon>\n There are currently no issues detected in your workspace.\n </div>\n <div class=\"tk-workspace-detail__issue\" *ngFor=\"let issue of details.issues\">\n <div class=\"tk-workspace-detail__issue-row\">\n <div class=\"tk-workspace-detail__issue-info\">\n <div class=\"tk-workspace-detail__issue-message-row\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n <div class=\"tk-workspace-detail__issue-message\">{{ issue.message }}</div>\n </div>\n <div class=\"tk-workspace-detail__issue-timestamp\">{{ issue.timestamp }}</div>\n </div>\n <div class=\"tk-workspace-detail__issue-actions\">\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">{{ issue.actionLabel }}</button>\n <button\n type=\"button\"\n class=\"tk-workspace-detail__issue-toggle\"\n [class.tk-workspace-detail__issue-toggle--open]=\"expandedIssueId === issue.id\"\n [attr.aria-expanded]=\"expandedIssueId === issue.id\"\n (click)=\"'void 0'\">\n <img style=\"width: .75rem; height: .75rem;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\n </button>\n </div>\n </div>\n <div class=\"tk-workspace-detail__issue-details\" *ngIf=\"expandedIssueId === issue.id\">\n <p>{{ issue.description }}</p>\n <p>\n Suggested action:<br />\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__issue-link\">{{ issue.suggestedAction }}</a>\n </p>\n </div>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Devices</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__devices\" *ngIf=\"workspace.devices.length; else noDevices\">\n <div class=\"tk-workspace-detail__device\" *ngFor=\"let device of workspace.devices\">\n <img class=\"tk-workspace-detail__device-icon\" [src]=\"resolveIcon(device.model)\" [alt]=\"device.label\" />\n <div class=\"tk-workspace-detail__device-info\">\n <div style=\"display: flex; gap: 0.5rem; align-items: center;\">\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__device-link\">{{ device.label }}</a>\n <span class=\"tk-workspace-detail__device-primary\">Primary</span>\n </div>\n <div class=\"tk-workspace-detail__device-status\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Status unavailable\n <img class=\"tk-workspace-detail__info-icon\" style=\"width: 12px; height: 12px;\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n </div>\n </div>\n </div>\n <ng-template #noDevices>\n <div class=\"tk-workspace-detail__no-devices\">\n <img class=\"tk-workspace-detail__no-devices-icon\" src=\"assets/icons/desk-phone-bold.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Add device</h3>\n <p class=\"tk-workspace-detail__card-text\">Add an IP Phone to collaborate in this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add device</button>\n </div>\n </ng-template>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Calling</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__calling-license\">\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/handset-regular.svg\" alt=\"\" />\n {{ details.calling.license }}\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\n <span class=\"tk-workspace-detail__row-label\">Cisco Webex SIP Address</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.sipAddress }}</span>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.schedulingConfigured\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Scheduling</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Choose scheduling</h3>\n <p class=\"tk-workspace-detail__card-text\">Choose a calendar service or setup hot-desking for this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Choose scheduling</button>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Meetings</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Device hosted meetings unavailable</h3>\n <p class=\"tk-workspace-detail__card-text\">Service not supported by Cisco IP phones</p>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">\n Planned Maintenance\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </h2>\n <div class=\"tk-workspace-detail__row\">\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/tools-regular.svg\" alt=\"\">\n <span>{{ details.plannedMaintenanceEnabled ? 'On' : 'Off' }}</span>\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--with-action\">\n <div class=\"tk-workspace-detail__row\" style=\"flex-direction: column; gap: 1rem;\">\n <div style=\"display: flex; gap: 1rem; align-items: center;\">\n <img class=\"tk-workspace-detail__meta-icon\" style=\"width: 20px; height: 20px;\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\n <div>Schedule</div>\n </div>\n <div class=\"tk-workspace-detail__row-hint\">No schedule set</div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Edit schedule</button>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.notes\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Add Notes</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/notes-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Add notes</h3>\n <p class=\"tk-workspace-detail__card-text\">Write a note about this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add notes</button>\n </section>\n </div>\n\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\" style=\"margin-bottom: 1.25rem;\">\n <h2 class=\"tk-workspace-detail__card-title\">Location</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__location\">\n <!-- <mat-icon>location_on</mat-icon> -->\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\n <div style=\"display: flex; flex-direction: column; gap: .25rem;\">\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__location-link\">{{ details.location.country }}</a>\n <div class=\"tk-workspace-detail__location-address\">{{ details.location.address }}</div>\n </div>\n </div>\n </section>\n </div>\n </div>\n\n <div class=\"tk-workspace-detail__col\" *ngIf=\"activeTab === 'calling'\">\n <section class=\"tk-workspace-detail__card tk-workspace-detail__numbers-card\">\n <h2 class=\"tk-workspace-detail__numbers-title\">Numbers</h2>\n\n <div class=\"tk-workspace-detail__numbers-content\">\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Directory number\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <table class=\"tk-workspace-detail__numbers-table\">\n <thead>\n <tr>\n <th>Type</th>\n <th>Phone Number</th>\n <th>Extension</th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><span class=\"tk-workspace-detail__badge\">Primary</span></td>\n <td>\n {{ details.calling.directoryNumber }}\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\n </td>\n <td>\n {{ details.calling.extension || 'Not set' }}\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\n </td>\n <td class=\"tk-workspace-detail__numbers-chevron-cell\">\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <hr class=\"tk-workspace-detail__divider\" />\n\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Caller ID\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <div class=\"tk-workspace-detail__numbers-row-value\">\n <span>{{ callerIdLabel }}</span>\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </div>\n </div>\n\n <hr class=\"tk-workspace-detail__divider\" />\n\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Emergency Calling\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <div class=\"tk-workspace-detail__numbers-row-value\">\n <span>Not set</span>\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </div>\n </div>\n </div>\n </section>\n </div>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding:1.5rem}.tk-workspace-detail__breadcrumb{display:inline-flex;align-items:center;gap:.5rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-detail__breadcrumb mat-icon{font-size:1.25rem;height:1.25rem;width:1.25rem}.tk-workspace-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.tk-workspace-detail__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:50%;background:#2b2b2b}.tk-workspace-detail__icon img{height:1.375rem;width:1.375rem;filter:brightness(0) invert(1)}.tk-workspace-detail__title-block{flex:1;min-width:0}.tk-workspace-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-detail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;font-size:.875rem;color:#0009}.tk-workspace-detail__meta-type{color:#000000f2}.tk-workspace-detail__meta-sep{display:inline-flex;align-items:center}.tk-workspace-detail__meta-sep:before{content:\"\";flex-shrink:0;inline-size:.25rem;block-size:.25rem;border-radius:50%;background-color:var(--mch-OutlinePrimary-normal, rgba(0, 0, 0, .45))}.tk-workspace-detail__meta-icon{height:1rem;width:1rem}.tk-workspace-detail__meta-muted{color:#0006}.tk-workspace-detail__meta-pill{display:inline-flex;font-size:.875rem;align-items:center;gap:.35rem;border:1px solid rgba(0,0,0,.2);padding:.25rem .5rem;cursor:pointer;min-inline-size:1.5rem;block-size:100%;max-block-size:1.5rem;color:#000000f2;border-radius:.5rem}.tk-workspace-detail__meta-pill--muted{color:#0006}.tk-workspace-detail__meta-pill-icon{font-size:.875rem;height:.875rem;width:.875rem;opacity:.4}.tk-workspace-detail__status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#707070}.tk-workspace-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-detail__actions-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__tabs{display:flex;align-items:center;gap:1.5rem;border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:1.25rem}.tk-workspace-detail__tab{padding:.75rem 0;background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:.9375rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-workspace-detail__tab:hover{color:#000000f2}.tk-workspace-detail__tab--active{color:#000000f2;border-bottom-color:#000}.tk-workspace-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-detail__grid{grid-template-columns:1fr}}.tk-workspace-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1rem 1.5rem;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-detail__card--centered{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1rem 1.5rem}.tk-workspace-detail__card-icon{color:#0009;margin-bottom:.5rem}.tk-workspace-detail__card-heading{margin:0;font-size:.9375rem;font-weight:500}.tk-workspace-detail__card-text{margin:0 0 .5rem;font-size:.875rem;color:#000000b3;max-width:20rem}.tk-workspace-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;width:100%}.tk-workspace-detail__card-title{display:flex;align-items:center;gap:.375rem;margin:0;padding:0;font-size:1rem;font-weight:500;margin-bottom:1rem}.tk-workspace-detail__card-title__settings_icon_wrapper{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.5019607843);color:#000000f2;cursor:pointer}.tk-workspace-detail__card-header .tk-workspace-detail__card-title{margin-bottom:0}.tk-workspace-detail__settings-icon,.tk-workspace-detail__info-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-workspace-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.2);margin:.75rem 0}.tk-workspace-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__issue+.tk-workspace-detail__issue{margin-top:.75rem}.tk-workspace-detail__issue-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;border-radius:.5rem;border:.0625rem solid rgba(0,0,0,.2);cursor:pointer;height:46px;box-sizing:content-box}.tk-workspace-detail__issue-row:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-actions{display:flex;align-items:center;gap:1rem;flex-shrink:0}.tk-workspace-detail__issue-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:50%;color:#0009;cursor:pointer;flex-shrink:0;background:transparent}.tk-workspace-detail__issue-toggle:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-toggle:active{background:rgba(0,0,0,.2)}.tk-workspace-detail__issue-toggle mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;transition:transform .15s ease}.tk-workspace-detail__issue-toggle--open mat-icon{transform:rotate(180deg)}.tk-workspace-detail__issue-details{padding:.75rem 1rem .25rem 2.75rem;font-size:.8125rem;color:#0009}.tk-workspace-detail__issue-details p{margin:0 0 .5rem}.tk-workspace-detail__issue-link{color:#0353a8;text-decoration:underline}.tk-workspace-detail__issue-info{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;height:100%;justify-content:space-around}.tk-workspace-detail__issue-icon{color:#0353a8;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__issue-message-row{display:flex;align-items:center;gap:.5rem}.tk-workspace-detail__issue-message-row .tk-workspace-detail__issue-message{font-size:.875rem;font-weight:500}.tk-workspace-detail__issue-timestamp{font-size:.75rem;color:#000000b3}.tk-workspace-detail__pill-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;color:#000000f2;text-overflow:ellipsis;overflow:hidden!important;cursor:pointer;white-space:nowrap}.tk-workspace-detail__pill-button:hover{background:#ededed}.tk-workspace-detail__pill-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__devices{display:flex;flex-wrap:wrap;gap:.75rem;display:grid;grid-template-rows:auto 1fr;grid-template-columns:repeat(auto-fit,minmax(16.75rem,1fr));gap:.5rem}.tk-workspace-detail__device{align-items:center;gap:1.5rem;padding:.75rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;min-width:12rem;align-items:start;display:flex;flex-direction:column;grid-row:span 2;grid-column:1;min-block-size:8rem}.tk-workspace-detail__device-icon{width:3rem;height:3rem;flex-shrink:0}.tk-workspace-detail__device-info{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.tk-workspace-detail__device-info .tk-workspace-detail__device-primary{font-size:.75rem;min-inline-size:1.25rem;block-size:100%;max-block-size:1.25rem;border-color:#5ebff7;background-color:#08599c;color:#fffffff2;display:inline-flex;flex:0 0 auto;gap:.25rem;align-items:center;justify-content:center;overflow:hidden;padding:.25rem .5rem;border:.0625rem solid #5ebff7;border-radius:.25rem;line-height:1;text-overflow:ellipsis;box-sizing:border-box}.tk-workspace-detail__device-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__device-status{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:#000000f2}.tk-workspace-detail__no-devices{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:2rem 1.25rem}.tk-workspace-detail__no-devices-icon{width:2rem;height:2rem;margin-bottom:.5rem}.tk-workspace-detail__calling-license{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__calling-license mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__row{display:flex;align-items:center;gap:1rem;font-size:.875rem}.tk-workspace-detail__row mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__row--with-action,.tk-workspace-detail__row--kv{justify-content:space-between}.tk-workspace-detail__row--kv:first-of-type{border-top:none}.tk-workspace-detail__row-label{color:#000000f2}.tk-workspace-detail__row-value{font-weight:500;text-align:right}.tk-workspace-detail__row-hint{font-size:14px;color:#000000b3}.tk-workspace-detail__row-chevron{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__numbers-card{display:flex;gap:1rem}.tk-workspace-detail__numbers-title{width:8.75rem;flex-shrink:0;margin:0;font-size:.9375rem;font-weight:600}.tk-workspace-detail__numbers-content{flex:1;min-width:0;display:flex;flex-direction:column}.tk-workspace-detail__numbers-row{display:flex;align-items:flex-start;gap:1rem;padding:.75rem 0}.tk-workspace-detail__numbers-row-label{width:9.375rem;flex-shrink:0;display:flex;align-items:center;gap:.375rem;font-size:.875rem}.tk-workspace-detail__numbers-row-value{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.875rem;color:#0009}.tk-workspace-detail__numbers-table{flex:1;min-width:0;border-collapse:collapse;font-size:.875rem}.tk-workspace-detail__numbers-table th{padding:0 .75rem .5rem 0;text-align:left;font-weight:400;font-size:.8125rem;color:#0009}.tk-workspace-detail__numbers-table td{padding:0 .75rem 0 0;vertical-align:middle;white-space:nowrap}.tk-workspace-detail__numbers-chevron-cell{width:1.5rem;text-align:right;white-space:nowrap}.tk-workspace-detail__copy-icon{font-size:1rem;height:1rem;width:1rem;margin-left:.25rem;color:#0006;vertical-align:middle;cursor:pointer}.tk-workspace-detail__badge{display:inline-flex;align-items:center;padding:.125rem .625rem;border-radius:6.25rem;background:#e8f4fc;border:1px solid #b8d9ed;color:#1170a8;font-size:.75rem;font-weight:500}.tk-workspace-detail__location{display:flex;align-items:flex-start;gap:1rem}.tk-workspace-detail__location mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__location-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__location-address{font-size:.875rem;color:#000000f2}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
724
764
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceDetailComponent, decorators: [{
725
765
  type: Component,
726
- args: [{ selector: 'tk-workspace-detail', template: "<button type=\"button\" class=\"tk-workspace-detail__breadcrumb\" (click)=\"onBack()\">\n <mat-icon>chevron_left</mat-icon>\n Workspaces\n</button>\n\n<div class=\"tk-workspace-detail__header\">\n <span class=\"tk-workspace-detail__icon\">\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n </span>\n <div class=\"tk-workspace-detail__title-block\">\n <h1 class=\"tk-workspace-detail__name\">{{ workspace.displayName }}</h1>\n <div class=\"tk-workspace-detail__meta\">\n <span class=\"tk-workspace-detail__status\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Live status unavailable\n </span>\n <span class=\"tk-workspace-detail__meta-sep\">&middot;</span>\n <span>Type: {{ workspace.typeLabel === 'No type' ? 'Not set' : workspace.typeLabel }}</span>\n <span class=\"tk-workspace-detail__meta-sep\">&middot;</span>\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\n <span>Capacity: {{ workspace.capacity ?? 'Not set' }}</span>\n <span class=\"tk-workspace-detail__meta-sep\">&middot;</span>\n <span class=\"tk-workspace-detail__meta-muted\">Size not set</span>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\n Actions\n <mat-icon>expand_more</mat-icon>\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\n </mat-menu>\n</div>\n\n<nav class=\"tk-workspace-detail__tabs\">\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'overview'\"\n (click)=\"selectTab('overview')\">\n Overview\n </button>\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'calling'\"\n (click)=\"selectTab('calling')\">\n Calling\n </button>\n</nav>\n\n<ng-container *ngIf=\"details\">\n <div class=\"tk-workspace-detail__grid\" *ngIf=\"activeTab === 'overview'\">\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">Issues &amp; Information</h2>\n <div class=\"tk-workspace-detail__no-issues\" *ngIf=\"!details.issues.length\">\n <mat-icon class=\"tk-workspace-detail__no-issues-icon\">check_circle</mat-icon>\n There are currently no issues detected in your workspace.\n </div>\n <div class=\"tk-workspace-detail__issue\" *ngFor=\"let issue of details.issues\">\n <div class=\"tk-workspace-detail__issue-info\">\n <mat-icon class=\"tk-workspace-detail__issue-icon\">info</mat-icon>\n <div>\n <div class=\"tk-workspace-detail__issue-message\">{{ issue.message }}</div>\n <div class=\"tk-workspace-detail__issue-timestamp\">{{ issue.timestamp }}</div>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">\n {{ issue.actionLabel }}\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Devices</h2>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add device</button>\n </div>\n <div class=\"tk-workspace-detail__devices\" *ngIf=\"workspace.devices.length; else noDevices\">\n <div class=\"tk-workspace-detail__device\" *ngFor=\"let device of workspace.devices\">\n <img class=\"tk-workspace-detail__device-icon\" [src]=\"resolveIcon(device.model)\" [alt]=\"device.label\" />\n <div class=\"tk-workspace-detail__device-info\">\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__device-link\">{{ device.label }}</a>\n <div class=\"tk-workspace-detail__device-status\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Status unavailable\n <mat-icon class=\"tk-workspace-detail__info-icon\">info_outline</mat-icon>\n </div>\n </div>\n </div>\n </div>\n <ng-template #noDevices>\n <div class=\"tk-workspace-detail__empty\">No devices assigned.</div>\n </ng-template>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Calling</h2>\n <mat-icon class=\"tk-workspace-detail__settings-icon\">settings</mat-icon>\n </div>\n <div class=\"tk-workspace-detail__calling-license\">\n <mat-icon>call</mat-icon>\n {{ details.calling.license }}\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\n <span class=\"tk-workspace-detail__row-label\">Cisco Webex SIP Address</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.sipAddress }}</span>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.schedulingConfigured\">\n <mat-icon class=\"tk-workspace-detail__card-icon\">event</mat-icon>\n <h3 class=\"tk-workspace-detail__card-heading\">Choose scheduling</h3>\n <p class=\"tk-workspace-detail__card-text\">Choose a calendar service or setup hot-desking for this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Choose scheduling</button>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\">\n <mat-icon class=\"tk-workspace-detail__card-icon\">info</mat-icon>\n <h3 class=\"tk-workspace-detail__card-heading\">Device hosted meetings unavailable</h3>\n <p class=\"tk-workspace-detail__card-text\">Service not supported by Cisco IP phones</p>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">\n Planned Maintenance\n <mat-icon class=\"tk-workspace-detail__info-icon\">info_outline</mat-icon>\n </h2>\n <div class=\"tk-workspace-detail__row\">\n <mat-icon>build</mat-icon>\n <span>{{ details.plannedMaintenanceEnabled ? 'On' : 'Off' }}</span>\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--with-action\">\n <div class=\"tk-workspace-detail__row\">\n <mat-icon>event</mat-icon>\n <div>\n <div>Schedule</div>\n <div class=\"tk-workspace-detail__row-hint\">No schedule set</div>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Edit schedule</button>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.notes\">\n <mat-icon class=\"tk-workspace-detail__card-icon\">description</mat-icon>\n <h3 class=\"tk-workspace-detail__card-heading\">Add notes</h3>\n <p class=\"tk-workspace-detail__card-text\">Write a note about this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add notes</button>\n </section>\n </div>\n\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Location</h2>\n <mat-icon class=\"tk-workspace-detail__settings-icon\">settings</mat-icon>\n </div>\n <div class=\"tk-workspace-detail__location\">\n <mat-icon>location_on</mat-icon>\n <div>\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__location-link\">{{ details.location.country }}</a>\n <div class=\"tk-workspace-detail__location-address\">{{ details.location.address }}</div>\n </div>\n </div>\n </section>\n </div>\n </div>\n\n <div class=\"tk-workspace-detail__grid\" *ngIf=\"activeTab === 'calling'\">\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">Calling</h2>\n <div class=\"tk-workspace-detail__calling-license\">\n <mat-icon>call</mat-icon>\n {{ details.calling.license }}\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\n <span class=\"tk-workspace-detail__row-label\">Cisco Webex SIP Address</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.sipAddress }}</span>\n </div>\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\n <span class=\"tk-workspace-detail__row-label\">Directory Number</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.directoryNumber }}</span>\n </div>\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\" *ngIf=\"details.calling.externalCallerIdNumber\">\n <span class=\"tk-workspace-detail__row-label\">External Caller ID</span>\n <span class=\"tk-workspace-detail__row-value\">\n {{ details.calling.externalCallerIdName }} ({{ details.calling.externalCallerIdNumber }})\n </span>\n </div>\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\" *ngIf=\"details.calling.routePartition\">\n <span class=\"tk-workspace-detail__row-label\">Route Partition</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.routePartition }}</span>\n </div>\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\" *ngIf=\"details.calling.callingSearchSpace\">\n <span class=\"tk-workspace-detail__row-label\">Calling Search Space</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.callingSearchSpace }}</span>\n </div>\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\" *ngIf=\"details.calling.securityProfile\">\n <span class=\"tk-workspace-detail__row-label\">Device Security Profile</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.securityProfile }}</span>\n </div>\n </section>\n </div>\n </div>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding:1.5rem}.tk-workspace-detail__breadcrumb{display:inline-flex;align-items:center;gap:.125rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-detail__breadcrumb mat-icon{font-size:1.25rem;height:1.25rem;width:1.25rem}.tk-workspace-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.tk-workspace-detail__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:50%;background:#2b2b2b}.tk-workspace-detail__icon img{height:1.375rem;width:1.375rem;filter:brightness(0) invert(1)}.tk-workspace-detail__title-block{flex:1;min-width:0}.tk-workspace-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-detail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;font-size:.875rem;color:#0009}.tk-workspace-detail__meta-sep{color:#0000004d}.tk-workspace-detail__meta-icon{height:.875rem;width:.875rem;opacity:.4}.tk-workspace-detail__meta-muted{color:#0006}.tk-workspace-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-detail__actions-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__tabs{display:flex;align-items:center;gap:1.5rem;border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:1.25rem}.tk-workspace-detail__tab{padding:.75rem 0;background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:.9375rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-workspace-detail__tab:hover{color:#000000f2}.tk-workspace-detail__tab--active{color:#000000f2;border-bottom-color:#000}.tk-workspace-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-detail__grid{grid-template-columns:1fr}}.tk-workspace-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1.25rem}.tk-workspace-detail__card--centered{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:2rem 1.25rem}.tk-workspace-detail__card-icon{color:#0009;margin-bottom:.5rem}.tk-workspace-detail__card-heading{margin:0;font-size:.9375rem;font-weight:600}.tk-workspace-detail__card-text{margin:0 0 .5rem;font-size:.8125rem;color:#0009;max-width:20rem}.tk-workspace-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.tk-workspace-detail__card-title{display:flex;align-items:center;gap:.375rem;margin:0 0 .75rem;font-size:.9375rem;font-weight:600}.tk-workspace-detail__card-header .tk-workspace-detail__card-title{margin-bottom:0}.tk-workspace-detail__settings-icon,.tk-workspace-detail__info-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-workspace-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.12);margin:.75rem 0}.tk-workspace-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__issue{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 0;border-top:1px solid rgba(0,0,0,.12)}.tk-workspace-detail__issue:first-of-type{border-top:none;padding-top:0}.tk-workspace-detail__issue-info{display:flex;align-items:flex-start;gap:.5rem}.tk-workspace-detail__issue-icon{color:#0353a8;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__issue-message{font-size:.875rem;font-weight:500}.tk-workspace-detail__issue-timestamp{font-size:.75rem;color:#0006}.tk-workspace-detail__pill-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.3);border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer;white-space:nowrap}.tk-workspace-detail__pill-button:hover{background:#ededed}.tk-workspace-detail__pill-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__devices{display:flex;flex-wrap:wrap;gap:.75rem}.tk-workspace-detail__device{display:flex;align-items:center;gap:.625rem;padding:.75rem;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;min-width:12rem}.tk-workspace-detail__device-icon{width:2.25rem;height:auto;flex-shrink:0}.tk-workspace-detail__device-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__device-status{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#0009}.tk-workspace-detail__empty{font-size:.875rem;color:#0009}.tk-workspace-detail__calling-license{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__calling-license mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__row{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__row mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__row--with-action{justify-content:space-between}.tk-workspace-detail__row--kv{justify-content:space-between;padding:.5rem 0;border-top:1px solid rgba(0,0,0,.12)}.tk-workspace-detail__row--kv:first-of-type{border-top:none}.tk-workspace-detail__row-label{color:#0009}.tk-workspace-detail__row-value{font-weight:500;text-align:right}.tk-workspace-detail__row-hint{font-size:.75rem;color:#0006}.tk-workspace-detail__location{display:flex;align-items:flex-start;gap:.5rem}.tk-workspace-detail__location mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__location-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__location-address{font-size:.8125rem;color:#0009}\n"] }]
766
+ args: [{ selector: 'tk-workspace-detail', template: "<button type=\"button\" class=\"tk-workspace-detail__breadcrumb\" (click)=\"onBack()\">\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-left-bold.svg\" alt=\"Back\" />\n Workspaces\n</button>\n\n<div class=\"tk-workspace-detail__header\">\n <span class=\"tk-workspace-detail__icon\">\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n </span>\n <div class=\"tk-workspace-detail__title-block\">\n <h1 class=\"tk-workspace-detail__name\">{{ workspace.displayName }}</h1>\n <div class=\"tk-workspace-detail__meta\">\n <span class=\"tk-workspace-detail__meta-pill\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Live status unavailable\n </span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-type\">Type: {{ workspace.typeLabel === 'No type' ? 'Not set' : workspace.typeLabel }}</span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-pill\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\n Capacity: {{ workspace.capacity ?? 'Not set' }}\n </span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-pill tk-workspace-detail__meta-pill--muted\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n Size not set\n </span>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\n Actions\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\n </mat-menu>\n</div>\n\n<nav class=\"tk-workspace-detail__tabs\">\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'overview'\"\n (click)=\"selectTab('overview')\">\n Overview\n </button>\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'calling'\"\n (click)=\"selectTab('calling')\">\n Calling\n </button>\n</nav>\n\n<app-loader *ngIf=\"isLoading\"></app-loader>\n\n<ng-container *ngIf=\"details\">\n <div class=\"tk-workspace-detail__grid\" *ngIf=\"activeTab === 'overview'\">\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">Issues &amp; Information</h2>\n <div class=\"tk-workspace-detail__no-issues\" *ngIf=\"!details.issues.length\">\n <mat-icon class=\"tk-workspace-detail__no-issues-icon\">check_circle</mat-icon>\n There are currently no issues detected in your workspace.\n </div>\n <div class=\"tk-workspace-detail__issue\" *ngFor=\"let issue of details.issues\">\n <div class=\"tk-workspace-detail__issue-row\">\n <div class=\"tk-workspace-detail__issue-info\">\n <div class=\"tk-workspace-detail__issue-message-row\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n <div class=\"tk-workspace-detail__issue-message\">{{ issue.message }}</div>\n </div>\n <div class=\"tk-workspace-detail__issue-timestamp\">{{ issue.timestamp }}</div>\n </div>\n <div class=\"tk-workspace-detail__issue-actions\">\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">{{ issue.actionLabel }}</button>\n <button\n type=\"button\"\n class=\"tk-workspace-detail__issue-toggle\"\n [class.tk-workspace-detail__issue-toggle--open]=\"expandedIssueId === issue.id\"\n [attr.aria-expanded]=\"expandedIssueId === issue.id\"\n (click)=\"'void 0'\">\n <img style=\"width: .75rem; height: .75rem;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\n </button>\n </div>\n </div>\n <div class=\"tk-workspace-detail__issue-details\" *ngIf=\"expandedIssueId === issue.id\">\n <p>{{ issue.description }}</p>\n <p>\n Suggested action:<br />\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__issue-link\">{{ issue.suggestedAction }}</a>\n </p>\n </div>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Devices</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__devices\" *ngIf=\"workspace.devices.length; else noDevices\">\n <div class=\"tk-workspace-detail__device\" *ngFor=\"let device of workspace.devices\">\n <img class=\"tk-workspace-detail__device-icon\" [src]=\"resolveIcon(device.model)\" [alt]=\"device.label\" />\n <div class=\"tk-workspace-detail__device-info\">\n <div style=\"display: flex; gap: 0.5rem; align-items: center;\">\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__device-link\">{{ device.label }}</a>\n <span class=\"tk-workspace-detail__device-primary\">Primary</span>\n </div>\n <div class=\"tk-workspace-detail__device-status\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Status unavailable\n <img class=\"tk-workspace-detail__info-icon\" style=\"width: 12px; height: 12px;\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n </div>\n </div>\n </div>\n <ng-template #noDevices>\n <div class=\"tk-workspace-detail__no-devices\">\n <img class=\"tk-workspace-detail__no-devices-icon\" src=\"assets/icons/desk-phone-bold.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Add device</h3>\n <p class=\"tk-workspace-detail__card-text\">Add an IP Phone to collaborate in this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add device</button>\n </div>\n </ng-template>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Calling</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__calling-license\">\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/handset-regular.svg\" alt=\"\" />\n {{ details.calling.license }}\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\n <span class=\"tk-workspace-detail__row-label\">Cisco Webex SIP Address</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.sipAddress }}</span>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.schedulingConfigured\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Scheduling</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Choose scheduling</h3>\n <p class=\"tk-workspace-detail__card-text\">Choose a calendar service or setup hot-desking for this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Choose scheduling</button>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Meetings</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Device hosted meetings unavailable</h3>\n <p class=\"tk-workspace-detail__card-text\">Service not supported by Cisco IP phones</p>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">\n Planned Maintenance\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </h2>\n <div class=\"tk-workspace-detail__row\">\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/tools-regular.svg\" alt=\"\">\n <span>{{ details.plannedMaintenanceEnabled ? 'On' : 'Off' }}</span>\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--with-action\">\n <div class=\"tk-workspace-detail__row\" style=\"flex-direction: column; gap: 1rem;\">\n <div style=\"display: flex; gap: 1rem; align-items: center;\">\n <img class=\"tk-workspace-detail__meta-icon\" style=\"width: 20px; height: 20px;\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\n <div>Schedule</div>\n </div>\n <div class=\"tk-workspace-detail__row-hint\">No schedule set</div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Edit schedule</button>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.notes\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Add Notes</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/notes-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Add notes</h3>\n <p class=\"tk-workspace-detail__card-text\">Write a note about this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add notes</button>\n </section>\n </div>\n\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\" style=\"margin-bottom: 1.25rem;\">\n <h2 class=\"tk-workspace-detail__card-title\">Location</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__location\">\n <!-- <mat-icon>location_on</mat-icon> -->\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\n <div style=\"display: flex; flex-direction: column; gap: .25rem;\">\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__location-link\">{{ details.location.country }}</a>\n <div class=\"tk-workspace-detail__location-address\">{{ details.location.address }}</div>\n </div>\n </div>\n </section>\n </div>\n </div>\n\n <div class=\"tk-workspace-detail__col\" *ngIf=\"activeTab === 'calling'\">\n <section class=\"tk-workspace-detail__card tk-workspace-detail__numbers-card\">\n <h2 class=\"tk-workspace-detail__numbers-title\">Numbers</h2>\n\n <div class=\"tk-workspace-detail__numbers-content\">\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Directory number\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <table class=\"tk-workspace-detail__numbers-table\">\n <thead>\n <tr>\n <th>Type</th>\n <th>Phone Number</th>\n <th>Extension</th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><span class=\"tk-workspace-detail__badge\">Primary</span></td>\n <td>\n {{ details.calling.directoryNumber }}\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\n </td>\n <td>\n {{ details.calling.extension || 'Not set' }}\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\n </td>\n <td class=\"tk-workspace-detail__numbers-chevron-cell\">\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <hr class=\"tk-workspace-detail__divider\" />\n\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Caller ID\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <div class=\"tk-workspace-detail__numbers-row-value\">\n <span>{{ callerIdLabel }}</span>\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </div>\n </div>\n\n <hr class=\"tk-workspace-detail__divider\" />\n\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Emergency Calling\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <div class=\"tk-workspace-detail__numbers-row-value\">\n <span>Not set</span>\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </div>\n </div>\n </div>\n </section>\n </div>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding:1.5rem}.tk-workspace-detail__breadcrumb{display:inline-flex;align-items:center;gap:.5rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-detail__breadcrumb mat-icon{font-size:1.25rem;height:1.25rem;width:1.25rem}.tk-workspace-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.tk-workspace-detail__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:50%;background:#2b2b2b}.tk-workspace-detail__icon img{height:1.375rem;width:1.375rem;filter:brightness(0) invert(1)}.tk-workspace-detail__title-block{flex:1;min-width:0}.tk-workspace-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-detail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;font-size:.875rem;color:#0009}.tk-workspace-detail__meta-type{color:#000000f2}.tk-workspace-detail__meta-sep{display:inline-flex;align-items:center}.tk-workspace-detail__meta-sep:before{content:\"\";flex-shrink:0;inline-size:.25rem;block-size:.25rem;border-radius:50%;background-color:var(--mch-OutlinePrimary-normal, rgba(0, 0, 0, .45))}.tk-workspace-detail__meta-icon{height:1rem;width:1rem}.tk-workspace-detail__meta-muted{color:#0006}.tk-workspace-detail__meta-pill{display:inline-flex;font-size:.875rem;align-items:center;gap:.35rem;border:1px solid rgba(0,0,0,.2);padding:.25rem .5rem;cursor:pointer;min-inline-size:1.5rem;block-size:100%;max-block-size:1.5rem;color:#000000f2;border-radius:.5rem}.tk-workspace-detail__meta-pill--muted{color:#0006}.tk-workspace-detail__meta-pill-icon{font-size:.875rem;height:.875rem;width:.875rem;opacity:.4}.tk-workspace-detail__status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#707070}.tk-workspace-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-detail__actions-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__tabs{display:flex;align-items:center;gap:1.5rem;border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:1.25rem}.tk-workspace-detail__tab{padding:.75rem 0;background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:.9375rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-workspace-detail__tab:hover{color:#000000f2}.tk-workspace-detail__tab--active{color:#000000f2;border-bottom-color:#000}.tk-workspace-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-detail__grid{grid-template-columns:1fr}}.tk-workspace-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1rem 1.5rem;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-detail__card--centered{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1rem 1.5rem}.tk-workspace-detail__card-icon{color:#0009;margin-bottom:.5rem}.tk-workspace-detail__card-heading{margin:0;font-size:.9375rem;font-weight:500}.tk-workspace-detail__card-text{margin:0 0 .5rem;font-size:.875rem;color:#000000b3;max-width:20rem}.tk-workspace-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;width:100%}.tk-workspace-detail__card-title{display:flex;align-items:center;gap:.375rem;margin:0;padding:0;font-size:1rem;font-weight:500;margin-bottom:1rem}.tk-workspace-detail__card-title__settings_icon_wrapper{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.5019607843);color:#000000f2;cursor:pointer}.tk-workspace-detail__card-header .tk-workspace-detail__card-title{margin-bottom:0}.tk-workspace-detail__settings-icon,.tk-workspace-detail__info-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-workspace-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.2);margin:.75rem 0}.tk-workspace-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__issue+.tk-workspace-detail__issue{margin-top:.75rem}.tk-workspace-detail__issue-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;border-radius:.5rem;border:.0625rem solid rgba(0,0,0,.2);cursor:pointer;height:46px;box-sizing:content-box}.tk-workspace-detail__issue-row:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-actions{display:flex;align-items:center;gap:1rem;flex-shrink:0}.tk-workspace-detail__issue-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:50%;color:#0009;cursor:pointer;flex-shrink:0;background:transparent}.tk-workspace-detail__issue-toggle:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-toggle:active{background:rgba(0,0,0,.2)}.tk-workspace-detail__issue-toggle mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;transition:transform .15s ease}.tk-workspace-detail__issue-toggle--open mat-icon{transform:rotate(180deg)}.tk-workspace-detail__issue-details{padding:.75rem 1rem .25rem 2.75rem;font-size:.8125rem;color:#0009}.tk-workspace-detail__issue-details p{margin:0 0 .5rem}.tk-workspace-detail__issue-link{color:#0353a8;text-decoration:underline}.tk-workspace-detail__issue-info{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;height:100%;justify-content:space-around}.tk-workspace-detail__issue-icon{color:#0353a8;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__issue-message-row{display:flex;align-items:center;gap:.5rem}.tk-workspace-detail__issue-message-row .tk-workspace-detail__issue-message{font-size:.875rem;font-weight:500}.tk-workspace-detail__issue-timestamp{font-size:.75rem;color:#000000b3}.tk-workspace-detail__pill-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;color:#000000f2;text-overflow:ellipsis;overflow:hidden!important;cursor:pointer;white-space:nowrap}.tk-workspace-detail__pill-button:hover{background:#ededed}.tk-workspace-detail__pill-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__devices{display:flex;flex-wrap:wrap;gap:.75rem;display:grid;grid-template-rows:auto 1fr;grid-template-columns:repeat(auto-fit,minmax(16.75rem,1fr));gap:.5rem}.tk-workspace-detail__device{align-items:center;gap:1.5rem;padding:.75rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;min-width:12rem;align-items:start;display:flex;flex-direction:column;grid-row:span 2;grid-column:1;min-block-size:8rem}.tk-workspace-detail__device-icon{width:3rem;height:3rem;flex-shrink:0}.tk-workspace-detail__device-info{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.tk-workspace-detail__device-info .tk-workspace-detail__device-primary{font-size:.75rem;min-inline-size:1.25rem;block-size:100%;max-block-size:1.25rem;border-color:#5ebff7;background-color:#08599c;color:#fffffff2;display:inline-flex;flex:0 0 auto;gap:.25rem;align-items:center;justify-content:center;overflow:hidden;padding:.25rem .5rem;border:.0625rem solid #5ebff7;border-radius:.25rem;line-height:1;text-overflow:ellipsis;box-sizing:border-box}.tk-workspace-detail__device-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__device-status{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:#000000f2}.tk-workspace-detail__no-devices{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:2rem 1.25rem}.tk-workspace-detail__no-devices-icon{width:2rem;height:2rem;margin-bottom:.5rem}.tk-workspace-detail__calling-license{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__calling-license mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__row{display:flex;align-items:center;gap:1rem;font-size:.875rem}.tk-workspace-detail__row mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__row--with-action,.tk-workspace-detail__row--kv{justify-content:space-between}.tk-workspace-detail__row--kv:first-of-type{border-top:none}.tk-workspace-detail__row-label{color:#000000f2}.tk-workspace-detail__row-value{font-weight:500;text-align:right}.tk-workspace-detail__row-hint{font-size:14px;color:#000000b3}.tk-workspace-detail__row-chevron{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__numbers-card{display:flex;gap:1rem}.tk-workspace-detail__numbers-title{width:8.75rem;flex-shrink:0;margin:0;font-size:.9375rem;font-weight:600}.tk-workspace-detail__numbers-content{flex:1;min-width:0;display:flex;flex-direction:column}.tk-workspace-detail__numbers-row{display:flex;align-items:flex-start;gap:1rem;padding:.75rem 0}.tk-workspace-detail__numbers-row-label{width:9.375rem;flex-shrink:0;display:flex;align-items:center;gap:.375rem;font-size:.875rem}.tk-workspace-detail__numbers-row-value{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.875rem;color:#0009}.tk-workspace-detail__numbers-table{flex:1;min-width:0;border-collapse:collapse;font-size:.875rem}.tk-workspace-detail__numbers-table th{padding:0 .75rem .5rem 0;text-align:left;font-weight:400;font-size:.8125rem;color:#0009}.tk-workspace-detail__numbers-table td{padding:0 .75rem 0 0;vertical-align:middle;white-space:nowrap}.tk-workspace-detail__numbers-chevron-cell{width:1.5rem;text-align:right;white-space:nowrap}.tk-workspace-detail__copy-icon{font-size:1rem;height:1rem;width:1rem;margin-left:.25rem;color:#0006;vertical-align:middle;cursor:pointer}.tk-workspace-detail__badge{display:inline-flex;align-items:center;padding:.125rem .625rem;border-radius:6.25rem;background:#e8f4fc;border:1px solid #b8d9ed;color:#1170a8;font-size:.75rem;font-weight:500}.tk-workspace-detail__location{display:flex;align-items:flex-start;gap:1rem}.tk-workspace-detail__location mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__location-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__location-address{font-size:.875rem;color:#000000f2}\n"] }]
727
767
  }], ctorParameters: function () { return [{ type: WorkspaceDetailService }, { type: i2.Location }]; }, propDecorators: { workspace: [{
728
768
  type: Input
729
769
  }], connectionType: [{
@@ -734,17 +774,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
734
774
  type: Output
735
775
  }] } });
736
776
 
737
- class AppLoaderComponent {
738
- constructor() {
739
- }
740
- }
741
- AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
742
- 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: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
743
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, decorators: [{
744
- type: Component,
745
- 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"] }]
746
- }], ctorParameters: function () { return []; } });
747
-
748
777
  class WorkspacesComponent {
749
778
  constructor(apiService, apiWebexService, workspacesService, migrationService, dialog, location) {
750
779
  this.apiService = apiService;