@tuki-io/tuki-widgets 0.0.219-dev.60 → 0.0.219-dev.62
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.
- package/esm2020/workspaces/src/components/workspace-detail/workspace-detail.component.mjs +1 -1
- package/esm2020/workspaces/src/components/workspaces-table/workspaces-table.component.mjs +6 -6
- package/esm2020/workspaces/src/services/workspaces.service.mjs +3 -1
- package/esm2020/workspaces/src/workspaces.component.mjs +21 -5
- package/fesm2015/tuki-io-tuki-widgets-workspaces.mjs +27 -10
- package/fesm2015/tuki-io-tuki-widgets-workspaces.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-workspaces.mjs +27 -9
- package/fesm2020/tuki-io-tuki-widgets-workspaces.mjs.map +1 -1
- package/package.json +1 -1
- package/workspaces/src/components/workspace-detail/workspace-detail.component.d.ts +1 -1
- package/workspaces/src/components/workspaces-table/workspaces-table.component.d.ts +2 -2
- package/workspaces/src/workspaces.component.d.ts +2 -1
|
@@ -306,6 +306,7 @@ function mergeCucmAndWebexWorkspaces(cucmWorkspaces, webexItems, webexWorkspaces
|
|
|
306
306
|
}
|
|
307
307
|
});
|
|
308
308
|
webexWorkspaces.forEach((webexWorkspace, webexIndex) => {
|
|
309
|
+
var _a;
|
|
309
310
|
const matchedMac = (webexItems[webexIndex].workspaceDevices || [])
|
|
310
311
|
.map(workspaceDevice => toMacKey(workspaceDevice.mac))
|
|
311
312
|
.find(key => key && cucmIndexByMac.has(key));
|
|
@@ -316,7 +317,7 @@ function mergeCucmAndWebexWorkspaces(cucmWorkspaces, webexItems, webexWorkspaces
|
|
|
316
317
|
const cucmIndex = cucmIndexByMac.get(matchedMac);
|
|
317
318
|
cucmIndexByMac.delete(matchedMac);
|
|
318
319
|
const cucmWorkspace = result[cucmIndex];
|
|
319
|
-
result[cucmIndex] = Object.assign(Object.assign(Object.assign({}, cucmWorkspace), webexWorkspace), { displayName: cucmWorkspace.displayName, device: Object.assign(Object.assign({}, mergeDevices(cucmWorkspace.device, webexWorkspace.device)), { name: cucmWorkspace.device.name, newName: cucmWorkspace.device.newName }), isHybrid: true, cucmDeviceName: cucmWorkspace.cucmDeviceName });
|
|
320
|
+
result[cucmIndex] = Object.assign(Object.assign(Object.assign({}, cucmWorkspace), webexWorkspace), { displayName: cucmWorkspace.displayName, location: webexWorkspace.location || cucmWorkspace.location, siteId: (_a = webexWorkspace.siteId) !== null && _a !== void 0 ? _a : cucmWorkspace.siteId, device: Object.assign(Object.assign({}, mergeDevices(cucmWorkspace.device, webexWorkspace.device)), { name: cucmWorkspace.device.name, newName: cucmWorkspace.device.newName }), isHybrid: true, cucmDeviceName: cucmWorkspace.cucmDeviceName });
|
|
320
321
|
});
|
|
321
322
|
return result;
|
|
322
323
|
}
|
|
@@ -484,8 +485,8 @@ class WorkspacesTableComponent {
|
|
|
484
485
|
this.pageSize = 10;
|
|
485
486
|
this.pageSizeOptions = [10, 25, 50, 100];
|
|
486
487
|
this.pendingWorkspaceIds = new Set();
|
|
488
|
+
this.isLoading = false;
|
|
487
489
|
this.openWorkspace = new EventEmitter();
|
|
488
|
-
this.licenseWithHybrid = new EventEmitter();
|
|
489
490
|
this.migrateToMT = new EventEmitter();
|
|
490
491
|
this.enableWebexCalling = new EventEmitter();
|
|
491
492
|
this.migrateToUCM = new EventEmitter();
|
|
@@ -565,10 +566,10 @@ class WorkspacesTableComponent {
|
|
|
565
566
|
}
|
|
566
567
|
}
|
|
567
568
|
WorkspacesTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspacesTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
568
|
-
WorkspacesTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspacesTableComponent, selector: "tk-workspaces-table", inputs: { workspaces: "workspaces", total: "total", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", pendingWorkspaceIds: "pendingWorkspaceIds" }, outputs: { openWorkspace: "openWorkspace", licenseWithHybrid: "licenseWithHybrid", migrateToMT: "migrateToMT", enableWebexCalling: "enableWebexCalling", migrateToUCM: "migrateToUCM", addDevice: "addDevice", pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"tk-workspaces-table__bulk-bar\">Select one or more workspaces for bulk actions</div>\r\n\r\n<div class=\"tk-workspaces-table__wrapper\">\r\n <table class=\"tk-workspaces-table__table\">\r\n <thead>\r\n <tr>\r\n <th class=\"tk-workspaces-table__checkbox-cell\">\r\n <input type=\"checkbox\" [checked]=\"allSelected\" [indeterminate]=\"someSelected\" (change)=\"toggleAll()\" />\r\n </th>\r\n <th>Name</th>\r\n <th>Devices</th>\r\n <th>Scheduling</th>\r\n <th>Calling</th>\r\n <th>Provisioning Type</th>\r\n <th>Status</th>\r\n <th class=\"tk-workspaces-table__settings-cell\">\r\n <mat-icon class=\"tk-workspaces-table__settings-icon\">settings</mat-icon>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let workspace of workspaces\"\r\n [class.tk-workspaces-table__row--selected]=\"isSelected(workspace.id)\"\r\n [class.tk-workspaces-table__row--disabled]=\"!canOpenWorkspace(workspace)\">\r\n <td class=\"tk-workspaces-table__checkbox-cell\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(workspace.id)\" (change)=\"toggleRow(workspace.id)\" />\r\n </td>\r\n <td class=\"tk-workspaces-table__name-cell\" (click)=\"onOpenWorkspace(workspace)\">\r\n <div class=\"tk-workspaces-table__name-wrapper\">\r\n <span class=\"tk-workspaces-table__name-icon\">\r\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"tk-workspaces-table__name-info\">\r\n <a href=\"javascript:void(0)\" class=\"tk-workspaces-table__name-link\">{{ getDisplayName(workspace) }}</a>\r\n <div class=\"tk-workspaces-table__name-meta\">\r\n <span class=\"tk-workspaces-table__name-type\">{{ workspace.typeLabel }}</span>\r\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\r\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\r\n <span class=\"tk-workspaces-table__name-capacity\">{{ workspace.capacity ?? 'No capacity' }}</span>\r\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\r\n <!-- <mat-icon class=\"tk-workspaces-table__meta-icon\">location_on</mat-icon> -->\r\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\r\n <a\r\n *ngIf=\"workspace.location; else noLocation\"\r\n href=\"javascript:void(0)\"\r\n class=\"tk-workspaces-table__location-link\">{{ workspace.location }}</a>\r\n <ng-template #noLocation>\r\n <span class=\"tk-workspaces-table__location-empty\">No location</span>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"tk-workspaces-table__devices\">\r\n <ng-container *ngIf=\"workspace.devices.length; else noDevices\">\r\n <span *ngFor=\"let device of workspace.devices\" class=\"tk-workspaces-table__device-card\">\r\n <img\r\n class=\"tk-workspaces-table__device-icon\"\r\n [src]=\"getDeviceIcon(device.model)\"\r\n [alt]=\"device.label\" />\r\n <div class=\"tk-workspaces-table__device-tooltip\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"tk-workspaces-table__device-tooltip-title\">{{ device.label }}</div>\r\n <div class=\"tk-workspaces-table__device-tooltip-status\">\r\n <span\r\n class=\"tk-workspaces-table__device-tooltip-status-dot\"\r\n [class.tk-workspaces-table__device-tooltip-status-dot--active]=\"workspace.status === 'active'\"></span>\r\n {{ workspace.statusLabel }}\r\n </div>\r\n <div class=\"tk-workspaces-table__device-tooltip-divider\"></div>\r\n <div class=\"tk-workspaces-table__device-tooltip-mac\">\r\n <span class=\"tk-workspaces-table__device-tooltip-mac-label\">MAC address</span>\r\n <span class=\"tk-workspaces-table__device-tooltip-mac-value\">{{ device.mac }}</span>\r\n <button\r\n *ngIf=\"device.mac\"\r\n type=\"button\"\r\n class=\"tk-workspaces-table__device-tooltip-copy\"\r\n (click)=\"onCopyMac(device.mac)\">\r\n <img class=\"tk-workspaces-table__device-tooltip-copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\r\n </button>\r\n </div>\r\n </div>\r\n </span>\r\n </ng-container>\r\n <!-- <ng-container *ngFor=\"let device of workspace.devices\">\r\n <span *ngIf=\"device && device.model else noDevice\" class=\"tk-workspaces-table__device-card\" [title]=\"device.label\">\r\n <img\r\n class=\"tk-workspaces-table__device-icon\"\r\n [src]=\"getDeviceIcon(device.model)\"\r\n [alt]=\"device.label\" />\r\n </span>\r\n </ng-container> -->\r\n <ng-template #noDevices>\r\n <button\r\n type=\"button\"\r\n class=\"tk-workspaces-table__device-add\"\r\n (click)=\"onAddDevice(workspace, $event)\">\r\n <span class=\"tk-workspaces-table__device-add-label\">\r\n <img\r\n class=\"tk-workspaces-table__device-add-icon\"\r\n src=\"assets/icons/multipled-devices-regular.svg\"\r\n alt=\"\" />\r\n Add device\r\n </span>\r\n </button>\r\n </ng-template>\r\n </div>\r\n </td>\r\n <td>{{ workspace.scheduling }}</td>\r\n <td class=\"tk-workspaces-table__calling-cell\">\r\n <span class=\"tk-workspaces-table__calling-content\">\r\n <img class=\"tk-workspaces-table__calling-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\r\n <span class=\"tk-workspaces-table__calling-text\" title=\"Cisco Webex Calling Professional Workspace\">Cisco Webex Calling Professional Workspace</span>\r\n </span>\r\n </td>\r\n <td>\r\n <div *ngIf=\"workspace.isHybrid\" class=\"tk-workspaces-table__provisioning-icons\">\r\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </div>\r\n <ng-container *ngIf=\"!workspace.isHybrid\">\r\n <span *ngIf=\"workspace.device.cucmId != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n <span *ngIf=\"workspace.device.webexUUID != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </ng-container>\r\n </td>\r\n <td>\r\n <span class=\"tk-workspaces-table__status\">\r\n <span\r\n class=\"tk-workspaces-table__status-dot\"\r\n [class.tk-workspaces-table__status-dot--hybrid]=\"workspace.isHybrid\"\r\n [class.tk-workspaces-table__status-dot--active]=\"!workspace.isHybrid\"></span>\r\n {{ workspace.isHybrid ? 'Hybrid' : 'Active' }}\r\n </span>\r\n </td>\r\n <td class=\"tk-workspaces-table__actions-cell\">\r\n <mat-progress-spinner\r\n *ngIf=\"isPending(workspace.id)\"\r\n class=\"tk-workspaces-table__actions-spinner\"\r\n [diameter]=\"20\"\r\n strokeWidth=\"2\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n <button\r\n *ngIf=\"!isPending(workspace.id)\"\r\n type=\"button\"\r\n class=\"tk-workspaces-table__actions-button\"\r\n [matMenuTriggerFor]=\"rowMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #rowMenu=\"matMenu\">\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isMoveToMTDisabled(workspace)\"\r\n (click)=\"licenseWithHybrid.emit(workspace)\">\r\n License with Cloud Intelligence\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isMoveToMTDisabled(workspace)\"\r\n (click)=\"migrateToMT.emit(workspace)\">\r\n Migrate Workspace To Webex Calling\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isEnableWebexCallingDisabled(workspace)\"\r\n (click)=\"enableWebexCalling.emit(workspace)\">\r\n Enable Webex Calling\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isMigrateToUCMDisabled(workspace)\"\r\n (click)=\"migrateToUCM.emit(workspace)\">\r\n Migrate User to UCM\r\n </button>\r\n </mat-menu>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!workspaces.length\">\r\n <td [attr.colspan]=\"8\" class=\"tk-workspaces-table__empty\">No workspaces to display.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<mat-paginator\r\n class=\"tk-workspaces-table__paginator\"\r\n [length]=\"total\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n (page)=\"onPage($event)\">\r\n</mat-paginator>\r\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}.tk-workspaces-table__bulk-bar{margin-bottom:1rem;font-size:.875rem;color:#000000f2}.tk-workspaces-table__wrapper{overflow-x:auto}.tk-workspaces-table__paginator{border:1px solid rgba(0,0,0,.12);border-top:none;background:#fff;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspaces-table__table{width:100%;border-collapse:collapse;font-family:Inter,sans-serif}.tk-workspaces-table__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-workspaces-table__table th:hover{background-color:#dedede}.tk-workspaces-table__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-workspaces-table__table tbody tr:hover td{background:#ededed}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--selected td{background:#f0f6ff}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled td{cursor:default}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled:hover td{background:#ffffff}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled.tk-workspaces-table__row--selected:hover td{background:#f0f6ff}.tk-workspaces-table__checkbox-cell{width:2.5rem;cursor:default}.tk-workspaces-table__settings-cell{width:2.5rem;text-align:center}.tk-workspaces-table__settings-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#00000080}.tk-workspaces-table__name-cell{min-width:14rem}.tk-workspaces-table__name-wrapper{display:flex;align-items:center;gap:.625rem}.tk-workspaces-table__name-icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex-shrink:0;border-radius:50%;background:#2b2b2b;color:#fff}.tk-workspaces-table__name-icon img{height:1.125rem;width:1.125rem;filter:brightness(0) invert(1)}.tk-workspaces-table__name-info{display:flex;flex-direction:column;gap:.5rem;min-width:0}.tk-workspaces-table__name-link{color:#000000de;font-weight:500;text-decoration:none}.tk-workspaces-table__name-meta{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:#0009;white-space:nowrap}.tk-workspaces-table__name-meta .tk-workspaces-table__name-type,.tk-workspaces-table__name-meta .tk-workspaces-table__name-capacity{color:#0006}.tk-workspaces-table__meta-icon{font-size:.875rem;height:.875rem;width:.875rem;color:#0006}.tk-workspaces-table__meta-sep{color:#0000004d}.tk-workspaces-table__location-link{color:#0353a8;text-decoration:none}.tk-workspaces-table__location-empty{color:#0009}.tk-workspaces-table__devices{display:flex;align-items:flex-start;gap:.625rem;padding:.5rem 0}.tk-workspaces-table__device-card{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#fff;box-sizing:border-box;padding:12px;block-size:60px}.tk-workspaces-table__device-card:hover .tk-workspaces-table__device-tooltip{visibility:visible;opacity:1}.tk-workspaces-table__device-tooltip{position:absolute;bottom:calc(100% + .75rem);left:50%;transform:translate(-50%);z-index:20;visibility:hidden;opacity:0;transition:opacity .15s ease;border:1px solid #d6d6d6;min-width:16rem;padding:.75rem;border-radius:.215rem;background:#ededed;box-shadow:0 2px 12px #0000002e;font-size:.8125rem;white-space:normal;cursor:default}.tk-workspaces-table__device-tooltip:before,.tk-workspaces-table__device-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-style:solid;border-color:transparent}.tk-workspaces-table__device-tooltip:before{border-width:9px 8px 0;border-top-color:#d6d6d6}.tk-workspaces-table__device-tooltip:after{margin-top:-1px;border-width:8px 7px 0;border-top-color:#ededed}.tk-workspaces-table__device-tooltip-title{font-weight:600;color:#2e2e2e;font-size:1rem}.tk-workspaces-table__device-tooltip-status{display:flex;align-items:center;gap:.75rem;margin-top:.375rem;color:#1c1c1c;font-size:.875rem}.tk-workspaces-table__device-tooltip-status-dot{width:.438rem;height:.438rem;border-radius:50%;background:#707070;flex-shrink:0}.tk-workspaces-table__device-tooltip-status-dot--active{background:#1d805f}.tk-workspaces-table__device-tooltip-divider{margin:.825rem 0 1rem;border-top:1px solid #a8a8a8}.tk-workspaces-table__device-tooltip-mac{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.tk-workspaces-table__device-tooltip-mac-label{color:#0009}.tk-workspaces-table__device-tooltip-mac-value{font-weight:500;color:#000000f2}.tk-workspaces-table__device-tooltip-copy{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.tk-workspaces-table__device-tooltip-copy-icon{width:.875rem;height:.875rem;opacity:.6}.tk-workspaces-table__device-icon{inline-size:40px;display:inline-block;vertical-align:middle;max-inline-size:100%;block-size:auto}.tk-workspaces-table__device-avatar{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#757575;color:#fff;font-size:.6875rem;font-weight:600}.tk-workspaces-table__device-add{display:inline-flex;block-size:62px;align-items:center;justify-content:center;gap:.5rem;min-height:3.5rem;padding:.5rem 1.25rem;border:none;border-radius:.5rem;background-color:#fff;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%22186%22 height%3D%2274%22 viewBox%3D%220 0 186 74%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M1 8.51269C1 4.09442 4.58172 0.512695 9 0.512695H65C69.4183 0.512695 73 4.09442 73 8.5127V64.5127C73 68.931 69.4183 72.5127 65 72.5127H9C4.58172 72.5127 1 68.931 1 64.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M1 8.51269C1 4.09442 4.58172 0.512695 9 0.512695H65C69.4183 0.512695 73 4.09442 73 8.5127V64.5127C73 68.931 69.4183 72.5127 65 72.5127H9C4.58172 72.5127 1 68.931 1 64.5127V8.51269Z%22 stroke%3D%22url(%23paint0_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 8.51269C77 4.09442 80.5817 0.512695 85 0.512695H111C115.418 0.512695 119 4.09442 119 8.5127V26.5127C119 30.931 115.418 34.5127 111 34.5127H85C80.5817 34.5127 77 30.931 77 26.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 8.51269C77 4.09442 80.5817 0.512695 85 0.512695H111C115.418 0.512695 119 4.09442 119 8.5127V26.5127C119 30.931 115.418 34.5127 111 34.5127H85C80.5817 34.5127 77 30.931 77 26.5127V8.51269Z%22 stroke%3D%22url(%23paint1_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M123 8.51269C123 4.09442 126.582 0.512695 131 0.512695H177C181.418 0.512695 185 4.09442 185 8.5127V26.5127C185 30.931 181.418 34.5127 177 34.5127H131C126.582 34.5127 123 30.931 123 26.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M123 8.51269C123 4.09442 126.582 0.512695 131 0.512695H177C181.418 0.512695 185 4.09442 185 8.5127V26.5127C185 30.931 181.418 34.5127 177 34.5127H131C126.582 34.5127 123 30.931 123 26.5127V8.51269Z%22 stroke%3D%22url(%23paint2_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 46.5127C77 42.0944 80.5817 38.5127 85 38.5127H131C135.418 38.5127 139 42.0944 139 46.5127V64.5127C139 68.931 135.418 72.5127 131 72.5127H85C80.5817 72.5127 77 68.931 77 64.5127V46.5127Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 46.5127C77 42.0944 80.5817 38.5127 85 38.5127H131C135.418 38.5127 139 42.0944 139 46.5127V64.5127C139 68.931 135.418 72.5127 131 72.5127H85C80.5817 72.5127 77 68.931 77 64.5127V46.5127Z%22 stroke%3D%22url(%23paint3_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M143 46.5127C143 42.0944 146.582 38.5127 151 38.5127H177C181.418 38.5127 185 42.0944 185 46.5127V64.5127C185 68.931 181.418 72.5127 177 72.5127H151C146.582 72.5127 143 68.931 143 64.5127V46.5127Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M143 46.5127C143 42.0944 146.582 38.5127 151 38.5127H177C181.418 38.5127 185 42.0944 185 46.5127V64.5127C185 68.931 181.418 72.5127 177 72.5127H151C146.582 72.5127 143 68.931 143 64.5127V46.5127Z%22 stroke%3D%22url(%23paint4_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cdefs%3E%0D%3CradialGradient id%3D%22paint0_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint1_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint2_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint3_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint4_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3C%2Fdefs%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;background-position:center;background-size:contain;font-family:inherit;white-space:nowrap;cursor:pointer;box-sizing:border-box}.tk-workspaces-table__device-add-label{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:999px;color:#000000f2;font-size:.875rem;transition:background-color .15s}.tk-workspaces-table__device-add:hover .tk-workspaces-table__device-add-label{background-color:#ededed}.tk-workspaces-table__device-add-icon{height:1.125rem;width:1.125rem}.tk-workspaces-table__devices-empty{color:#0000004d}.tk-workspaces-table__calling-cell{max-width:14rem}.tk-workspaces-table__calling-content{display:flex;align-items:center;gap:.375rem}.tk-workspaces-table__calling-icon{flex:none;width:1rem;height:1rem;opacity:.4}.tk-workspaces-table__calling-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-workspaces-table__provisioning-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0009}.tk-workspaces-table__provisioning-icons{display:flex;align-items:center;gap:.5rem}.tk-workspaces-table__status{display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap}.tk-workspaces-table__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:rgba(0,0,0,.3);flex-shrink:0}.tk-workspaces-table__status-dot--active{background:#1d805f}.tk-workspaces-table__status-dot--inactive{background:#c73636}.tk-workspaces-table__status-dot--hybrid{background:#639fff}.tk-workspaces-table__actions-cell{width:2.5rem;text-align:center}.tk-workspaces-table__actions-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:.25rem;color:#00000080;cursor:pointer;border-radius:4px}.tk-workspaces-table__actions-button:hover{background:rgba(0,0,0,.06)}.tk-workspaces-table__actions-spinner{display:inline-flex;margin:0 auto}.tk-workspaces-table__empty{padding:1.5rem;text-align:center;color:#0009;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { 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: i5.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
569
|
+
WorkspacesTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspacesTableComponent, selector: "tk-workspaces-table", inputs: { workspaces: "workspaces", total: "total", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", pendingWorkspaceIds: "pendingWorkspaceIds", isLoading: "isLoading" }, outputs: { openWorkspace: "openWorkspace", migrateToMT: "migrateToMT", enableWebexCalling: "enableWebexCalling", migrateToUCM: "migrateToUCM", addDevice: "addDevice", pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"tk-workspaces-table__bulk-bar\">Select one or more workspaces for bulk actions</div>\r\n\r\n<div class=\"tk-workspaces-table__wrapper\">\r\n <table class=\"tk-workspaces-table__table\">\r\n <thead>\r\n <tr>\r\n <th class=\"tk-workspaces-table__checkbox-cell\">\r\n <input type=\"checkbox\" [checked]=\"allSelected\" [indeterminate]=\"someSelected\" (change)=\"toggleAll()\" />\r\n </th>\r\n <th>Name</th>\r\n <th>Devices</th>\r\n <th>Scheduling</th>\r\n <th>Calling</th>\r\n <th>Provisioning Type</th>\r\n <th>Status</th>\r\n <th class=\"tk-workspaces-table__settings-cell\">\r\n <mat-icon class=\"tk-workspaces-table__settings-icon\">settings</mat-icon>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let workspace of workspaces\"\r\n [class.tk-workspaces-table__row--selected]=\"isSelected(workspace.id)\"\r\n [class.tk-workspaces-table__row--disabled]=\"!canOpenWorkspace(workspace)\">\r\n <td class=\"tk-workspaces-table__checkbox-cell\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(workspace.id)\" (change)=\"toggleRow(workspace.id)\" />\r\n </td>\r\n <td class=\"tk-workspaces-table__name-cell\" (click)=\"onOpenWorkspace(workspace)\">\r\n <div class=\"tk-workspaces-table__name-wrapper\">\r\n <span class=\"tk-workspaces-table__name-icon\">\r\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"tk-workspaces-table__name-info\">\r\n <a href=\"javascript:void(0)\" class=\"tk-workspaces-table__name-link\">{{ getDisplayName(workspace) }}</a>\r\n <div class=\"tk-workspaces-table__name-meta\">\r\n <span class=\"tk-workspaces-table__name-type\">{{ workspace.typeLabel }}</span>\r\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\r\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\r\n <span class=\"tk-workspaces-table__name-capacity\">{{ workspace.capacity ?? 'No capacity' }}</span>\r\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\r\n <!-- <mat-icon class=\"tk-workspaces-table__meta-icon\">location_on</mat-icon> -->\r\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\r\n <a\r\n *ngIf=\"workspace.location; else noLocation\"\r\n href=\"javascript:void(0)\"\r\n class=\"tk-workspaces-table__location-link\">{{ workspace.location }}</a>\r\n <ng-template #noLocation>\r\n <span class=\"tk-workspaces-table__location-empty\">No location</span>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"tk-workspaces-table__devices\">\r\n <ng-container *ngIf=\"workspace.devices.length; else noDevices\">\r\n <span *ngFor=\"let device of workspace.devices\" class=\"tk-workspaces-table__device-card\">\r\n <img\r\n class=\"tk-workspaces-table__device-icon\"\r\n [src]=\"getDeviceIcon(device.model)\"\r\n [alt]=\"device.label\" />\r\n <div class=\"tk-workspaces-table__device-tooltip\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"tk-workspaces-table__device-tooltip-title\">{{ device.label }}</div>\r\n <div class=\"tk-workspaces-table__device-tooltip-status\">\r\n <span\r\n class=\"tk-workspaces-table__device-tooltip-status-dot\"\r\n [class.tk-workspaces-table__device-tooltip-status-dot--active]=\"workspace.status === 'active'\"></span>\r\n {{ workspace.statusLabel }}\r\n </div>\r\n <div class=\"tk-workspaces-table__device-tooltip-divider\"></div>\r\n <div class=\"tk-workspaces-table__device-tooltip-mac\">\r\n <span class=\"tk-workspaces-table__device-tooltip-mac-label\">MAC address</span>\r\n <span class=\"tk-workspaces-table__device-tooltip-mac-value\">{{ device.mac }}</span>\r\n <button\r\n *ngIf=\"device.mac\"\r\n type=\"button\"\r\n class=\"tk-workspaces-table__device-tooltip-copy\"\r\n (click)=\"onCopyMac(device.mac)\">\r\n <img class=\"tk-workspaces-table__device-tooltip-copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\r\n </button>\r\n </div>\r\n </div>\r\n </span>\r\n </ng-container>\r\n <!-- <ng-container *ngFor=\"let device of workspace.devices\">\r\n <span *ngIf=\"device && device.model else noDevice\" class=\"tk-workspaces-table__device-card\" [title]=\"device.label\">\r\n <img\r\n class=\"tk-workspaces-table__device-icon\"\r\n [src]=\"getDeviceIcon(device.model)\"\r\n [alt]=\"device.label\" />\r\n </span>\r\n </ng-container> -->\r\n <ng-template #noDevices>\r\n <button\r\n type=\"button\"\r\n class=\"tk-workspaces-table__device-add\"\r\n (click)=\"onAddDevice(workspace, $event)\">\r\n <span class=\"tk-workspaces-table__device-add-label\">\r\n <img\r\n class=\"tk-workspaces-table__device-add-icon\"\r\n src=\"assets/icons/multipled-devices-regular.svg\"\r\n alt=\"\" />\r\n Add device\r\n </span>\r\n </button>\r\n </ng-template>\r\n </div>\r\n </td>\r\n <td>{{ workspace.scheduling }}</td>\r\n <td class=\"tk-workspaces-table__calling-cell\">\r\n <span class=\"tk-workspaces-table__calling-content\">\r\n <img class=\"tk-workspaces-table__calling-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\r\n <span class=\"tk-workspaces-table__calling-text\" title=\"Cisco Webex Calling Professional Workspace\">Cisco Webex Calling Professional Workspace</span>\r\n </span>\r\n </td>\r\n <td>\r\n <div *ngIf=\"workspace.isHybrid\" class=\"tk-workspaces-table__provisioning-icons\">\r\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </div>\r\n <ng-container *ngIf=\"!workspace.isHybrid\">\r\n <span *ngIf=\"workspace.device.cucmId != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n <span *ngIf=\"workspace.device.webexUUID != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </ng-container>\r\n </td>\r\n <td>\r\n <span class=\"tk-workspaces-table__status\">\r\n <span\r\n class=\"tk-workspaces-table__status-dot\"\r\n [class.tk-workspaces-table__status-dot--hybrid]=\"workspace.isHybrid\"\r\n [class.tk-workspaces-table__status-dot--active]=\"!workspace.isHybrid\"></span>\r\n {{ workspace.isHybrid ? 'Hybrid' : 'Active' }}\r\n </span>\r\n </td>\r\n <td class=\"tk-workspaces-table__actions-cell\">\r\n <div class=\"spinner-wrapper\">\r\n <mat-progress-spinner\r\n *ngIf=\"isPending(workspace.id)\"\r\n class=\"tk-workspaces-table__actions-spinner\"\r\n [diameter]=\"20\"\r\n strokeWidth=\"2\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </div>\r\n <button\r\n *ngIf=\"!isPending(workspace.id)\"\r\n type=\"button\"\r\n class=\"tk-workspaces-table__actions-button\"\r\n [matMenuTriggerFor]=\"rowMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #rowMenu=\"matMenu\">\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isMoveToMTDisabled(workspace)\"\r\n (click)=\"migrateToMT.emit(workspace)\">\r\n Migrate Workspace To Webex Calling\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isEnableWebexCallingDisabled(workspace)\"\r\n (click)=\"enableWebexCalling.emit(workspace)\">\r\n Enable Webex Calling\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isMigrateToUCMDisabled(workspace)\"\r\n (click)=\"migrateToUCM.emit(workspace)\">\r\n Migrate User to UCM\r\n </button>\r\n </mat-menu>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!isLoading && !workspaces.length\">\r\n <td [attr.colspan]=\"8\" class=\"tk-workspaces-table__empty\">No workspaces to display.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<mat-paginator\r\n class=\"tk-workspaces-table__paginator\"\r\n [length]=\"total\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n (page)=\"onPage($event)\">\r\n</mat-paginator>\r\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}.tk-workspaces-table__bulk-bar{margin-bottom:1rem;font-size:.875rem;color:#000000f2}.tk-workspaces-table__wrapper{overflow-x:auto}.tk-workspaces-table__paginator{border:1px solid rgba(0,0,0,.12);border-top:none;background:#fff;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspaces-table__table{width:100%;border-collapse:collapse;font-family:Inter,sans-serif}.tk-workspaces-table__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-workspaces-table__table th:hover{background-color:#dedede}.tk-workspaces-table__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-workspaces-table__table tbody tr:hover td{background:#ededed}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--selected td{background:#f0f6ff}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled td{cursor:default}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled:hover td{background:#ffffff}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled.tk-workspaces-table__row--selected:hover td{background:#f0f6ff}.tk-workspaces-table__checkbox-cell{width:2.5rem;cursor:default}.tk-workspaces-table__settings-cell{width:2.5rem;text-align:center}.tk-workspaces-table__settings-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#00000080}.tk-workspaces-table__name-cell{min-width:14rem}.tk-workspaces-table__name-wrapper{display:flex;align-items:center;gap:.625rem}.tk-workspaces-table__name-icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex-shrink:0;border-radius:50%;background:#2b2b2b;color:#fff}.tk-workspaces-table__name-icon img{height:1.125rem;width:1.125rem;filter:brightness(0) invert(1)}.tk-workspaces-table__name-info{display:flex;flex-direction:column;gap:.5rem;min-width:0}.tk-workspaces-table__name-link{color:#000000de;font-weight:500;text-decoration:none}.tk-workspaces-table__name-meta{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:#0009;white-space:nowrap}.tk-workspaces-table__name-meta .tk-workspaces-table__name-type,.tk-workspaces-table__name-meta .tk-workspaces-table__name-capacity{color:#0006}.tk-workspaces-table__meta-icon{font-size:.875rem;height:.875rem;width:.875rem;color:#0006}.tk-workspaces-table__meta-sep{color:#0000004d}.tk-workspaces-table__location-link{color:#0353a8;text-decoration:none}.tk-workspaces-table__location-empty{color:#0009}.tk-workspaces-table__devices{display:flex;align-items:flex-start;gap:.625rem;padding:.5rem 0}.tk-workspaces-table__device-card{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#fff;box-sizing:border-box;padding:12px;block-size:60px}.tk-workspaces-table__device-card:hover .tk-workspaces-table__device-tooltip{visibility:visible;opacity:1}.tk-workspaces-table__device-tooltip{position:absolute;bottom:calc(100% + .75rem);left:50%;transform:translate(-50%);z-index:20;visibility:hidden;opacity:0;transition:opacity .15s ease;border:1px solid #d6d6d6;min-width:16rem;padding:.75rem;border-radius:.215rem;background:#ededed;box-shadow:0 2px 12px #0000002e;font-size:.8125rem;white-space:normal;cursor:default}.tk-workspaces-table__device-tooltip:before,.tk-workspaces-table__device-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-style:solid;border-color:transparent}.tk-workspaces-table__device-tooltip:before{border-width:9px 8px 0;border-top-color:#d6d6d6}.tk-workspaces-table__device-tooltip:after{margin-top:-1px;border-width:8px 7px 0;border-top-color:#ededed}.tk-workspaces-table__device-tooltip-title{font-weight:600;color:#2e2e2e;font-size:1rem}.tk-workspaces-table__device-tooltip-status{display:flex;align-items:center;gap:.75rem;margin-top:.375rem;color:#1c1c1c;font-size:.875rem}.tk-workspaces-table__device-tooltip-status-dot{width:.438rem;height:.438rem;border-radius:50%;background:#707070;flex-shrink:0}.tk-workspaces-table__device-tooltip-status-dot--active{background:#1d805f}.tk-workspaces-table__device-tooltip-divider{margin:.825rem 0 1rem;border-top:1px solid #a8a8a8}.tk-workspaces-table__device-tooltip-mac{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.tk-workspaces-table__device-tooltip-mac-label{color:#0009}.tk-workspaces-table__device-tooltip-mac-value{font-weight:500;color:#000000f2}.tk-workspaces-table__device-tooltip-copy{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.tk-workspaces-table__device-tooltip-copy-icon{width:.875rem;height:.875rem;opacity:.6}.tk-workspaces-table__device-icon{inline-size:40px;display:inline-block;vertical-align:middle;max-inline-size:100%;block-size:auto}.tk-workspaces-table__device-avatar{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#757575;color:#fff;font-size:.6875rem;font-weight:600}.tk-workspaces-table__device-add{display:inline-flex;block-size:62px;align-items:center;justify-content:center;gap:.5rem;min-height:3.5rem;padding:.5rem 1.25rem;border:none;border-radius:.5rem;background-color:#fff;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%22186%22 height%3D%2274%22 viewBox%3D%220 0 186 74%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M1 8.51269C1 4.09442 4.58172 0.512695 9 0.512695H65C69.4183 0.512695 73 4.09442 73 8.5127V64.5127C73 68.931 69.4183 72.5127 65 72.5127H9C4.58172 72.5127 1 68.931 1 64.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M1 8.51269C1 4.09442 4.58172 0.512695 9 0.512695H65C69.4183 0.512695 73 4.09442 73 8.5127V64.5127C73 68.931 69.4183 72.5127 65 72.5127H9C4.58172 72.5127 1 68.931 1 64.5127V8.51269Z%22 stroke%3D%22url(%23paint0_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 8.51269C77 4.09442 80.5817 0.512695 85 0.512695H111C115.418 0.512695 119 4.09442 119 8.5127V26.5127C119 30.931 115.418 34.5127 111 34.5127H85C80.5817 34.5127 77 30.931 77 26.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 8.51269C77 4.09442 80.5817 0.512695 85 0.512695H111C115.418 0.512695 119 4.09442 119 8.5127V26.5127C119 30.931 115.418 34.5127 111 34.5127H85C80.5817 34.5127 77 30.931 77 26.5127V8.51269Z%22 stroke%3D%22url(%23paint1_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M123 8.51269C123 4.09442 126.582 0.512695 131 0.512695H177C181.418 0.512695 185 4.09442 185 8.5127V26.5127C185 30.931 181.418 34.5127 177 34.5127H131C126.582 34.5127 123 30.931 123 26.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M123 8.51269C123 4.09442 126.582 0.512695 131 0.512695H177C181.418 0.512695 185 4.09442 185 8.5127V26.5127C185 30.931 181.418 34.5127 177 34.5127H131C126.582 34.5127 123 30.931 123 26.5127V8.51269Z%22 stroke%3D%22url(%23paint2_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 46.5127C77 42.0944 80.5817 38.5127 85 38.5127H131C135.418 38.5127 139 42.0944 139 46.5127V64.5127C139 68.931 135.418 72.5127 131 72.5127H85C80.5817 72.5127 77 68.931 77 64.5127V46.5127Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 46.5127C77 42.0944 80.5817 38.5127 85 38.5127H131C135.418 38.5127 139 42.0944 139 46.5127V64.5127C139 68.931 135.418 72.5127 131 72.5127H85C80.5817 72.5127 77 68.931 77 64.5127V46.5127Z%22 stroke%3D%22url(%23paint3_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M143 46.5127C143 42.0944 146.582 38.5127 151 38.5127H177C181.418 38.5127 185 42.0944 185 46.5127V64.5127C185 68.931 181.418 72.5127 177 72.5127H151C146.582 72.5127 143 68.931 143 64.5127V46.5127Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M143 46.5127C143 42.0944 146.582 38.5127 151 38.5127H177C181.418 38.5127 185 42.0944 185 46.5127V64.5127C185 68.931 181.418 72.5127 177 72.5127H151C146.582 72.5127 143 68.931 143 64.5127V46.5127Z%22 stroke%3D%22url(%23paint4_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cdefs%3E%0D%3CradialGradient id%3D%22paint0_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint1_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint2_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint3_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint4_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3C%2Fdefs%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;background-position:center;background-size:contain;font-family:inherit;white-space:nowrap;cursor:pointer;box-sizing:border-box}.tk-workspaces-table__device-add-label{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:999px;color:#000000f2;font-size:.875rem;transition:background-color .15s}.tk-workspaces-table__device-add:hover .tk-workspaces-table__device-add-label{background-color:#ededed}.tk-workspaces-table__device-add-icon{height:1.125rem;width:1.125rem}.tk-workspaces-table__devices-empty{color:#0000004d}.tk-workspaces-table__calling-cell{max-width:14rem}.tk-workspaces-table__calling-content{display:flex;align-items:center;gap:.375rem}.tk-workspaces-table__calling-icon{flex:none;width:1rem;height:1rem;opacity:.4}.tk-workspaces-table__calling-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-workspaces-table__provisioning-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0009}.tk-workspaces-table__provisioning-icons{display:flex;align-items:center;gap:.5rem}.tk-workspaces-table__status{display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap}.tk-workspaces-table__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:rgba(0,0,0,.3);flex-shrink:0}.tk-workspaces-table__status-dot--active{background:#1d805f}.tk-workspaces-table__status-dot--inactive{background:#c73636}.tk-workspaces-table__status-dot--hybrid{background:#639fff}.tk-workspaces-table__actions-cell{width:2.5rem;text-align:center}.tk-workspaces-table__actions-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:.25rem;color:#00000080;cursor:pointer;border-radius:4px}.tk-workspaces-table__actions-button:hover{background:rgba(0,0,0,.06)}.tk-workspaces-table__actions-spinner{display:inline-flex;margin:0 auto}.tk-workspaces-table__empty{padding:1.5rem;text-align:center;color:#0009;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { 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: i5.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
569
570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspacesTableComponent, decorators: [{
|
|
570
571
|
type: Component,
|
|
571
|
-
args: [{ selector: 'tk-workspaces-table', template: "<div class=\"tk-workspaces-table__bulk-bar\">Select one or more workspaces for bulk actions</div>\r\n\r\n<div class=\"tk-workspaces-table__wrapper\">\r\n <table class=\"tk-workspaces-table__table\">\r\n <thead>\r\n <tr>\r\n <th class=\"tk-workspaces-table__checkbox-cell\">\r\n <input type=\"checkbox\" [checked]=\"allSelected\" [indeterminate]=\"someSelected\" (change)=\"toggleAll()\" />\r\n </th>\r\n <th>Name</th>\r\n <th>Devices</th>\r\n <th>Scheduling</th>\r\n <th>Calling</th>\r\n <th>Provisioning Type</th>\r\n <th>Status</th>\r\n <th class=\"tk-workspaces-table__settings-cell\">\r\n <mat-icon class=\"tk-workspaces-table__settings-icon\">settings</mat-icon>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let workspace of workspaces\"\r\n [class.tk-workspaces-table__row--selected]=\"isSelected(workspace.id)\"\r\n [class.tk-workspaces-table__row--disabled]=\"!canOpenWorkspace(workspace)\">\r\n <td class=\"tk-workspaces-table__checkbox-cell\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(workspace.id)\" (change)=\"toggleRow(workspace.id)\" />\r\n </td>\r\n <td class=\"tk-workspaces-table__name-cell\" (click)=\"onOpenWorkspace(workspace)\">\r\n <div class=\"tk-workspaces-table__name-wrapper\">\r\n <span class=\"tk-workspaces-table__name-icon\">\r\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"tk-workspaces-table__name-info\">\r\n <a href=\"javascript:void(0)\" class=\"tk-workspaces-table__name-link\">{{ getDisplayName(workspace) }}</a>\r\n <div class=\"tk-workspaces-table__name-meta\">\r\n <span class=\"tk-workspaces-table__name-type\">{{ workspace.typeLabel }}</span>\r\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\r\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\r\n <span class=\"tk-workspaces-table__name-capacity\">{{ workspace.capacity ?? 'No capacity' }}</span>\r\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\r\n <!-- <mat-icon class=\"tk-workspaces-table__meta-icon\">location_on</mat-icon> -->\r\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\r\n <a\r\n *ngIf=\"workspace.location; else noLocation\"\r\n href=\"javascript:void(0)\"\r\n class=\"tk-workspaces-table__location-link\">{{ workspace.location }}</a>\r\n <ng-template #noLocation>\r\n <span class=\"tk-workspaces-table__location-empty\">No location</span>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"tk-workspaces-table__devices\">\r\n <ng-container *ngIf=\"workspace.devices.length; else noDevices\">\r\n <span *ngFor=\"let device of workspace.devices\" class=\"tk-workspaces-table__device-card\">\r\n <img\r\n class=\"tk-workspaces-table__device-icon\"\r\n [src]=\"getDeviceIcon(device.model)\"\r\n [alt]=\"device.label\" />\r\n <div class=\"tk-workspaces-table__device-tooltip\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"tk-workspaces-table__device-tooltip-title\">{{ device.label }}</div>\r\n <div class=\"tk-workspaces-table__device-tooltip-status\">\r\n <span\r\n class=\"tk-workspaces-table__device-tooltip-status-dot\"\r\n [class.tk-workspaces-table__device-tooltip-status-dot--active]=\"workspace.status === 'active'\"></span>\r\n {{ workspace.statusLabel }}\r\n </div>\r\n <div class=\"tk-workspaces-table__device-tooltip-divider\"></div>\r\n <div class=\"tk-workspaces-table__device-tooltip-mac\">\r\n <span class=\"tk-workspaces-table__device-tooltip-mac-label\">MAC address</span>\r\n <span class=\"tk-workspaces-table__device-tooltip-mac-value\">{{ device.mac }}</span>\r\n <button\r\n *ngIf=\"device.mac\"\r\n type=\"button\"\r\n class=\"tk-workspaces-table__device-tooltip-copy\"\r\n (click)=\"onCopyMac(device.mac)\">\r\n <img class=\"tk-workspaces-table__device-tooltip-copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\r\n </button>\r\n </div>\r\n </div>\r\n </span>\r\n </ng-container>\r\n <!-- <ng-container *ngFor=\"let device of workspace.devices\">\r\n <span *ngIf=\"device && device.model else noDevice\" class=\"tk-workspaces-table__device-card\" [title]=\"device.label\">\r\n <img\r\n class=\"tk-workspaces-table__device-icon\"\r\n [src]=\"getDeviceIcon(device.model)\"\r\n [alt]=\"device.label\" />\r\n </span>\r\n </ng-container> -->\r\n <ng-template #noDevices>\r\n <button\r\n type=\"button\"\r\n class=\"tk-workspaces-table__device-add\"\r\n (click)=\"onAddDevice(workspace, $event)\">\r\n <span class=\"tk-workspaces-table__device-add-label\">\r\n <img\r\n class=\"tk-workspaces-table__device-add-icon\"\r\n src=\"assets/icons/multipled-devices-regular.svg\"\r\n alt=\"\" />\r\n Add device\r\n </span>\r\n </button>\r\n </ng-template>\r\n </div>\r\n </td>\r\n <td>{{ workspace.scheduling }}</td>\r\n <td class=\"tk-workspaces-table__calling-cell\">\r\n <span class=\"tk-workspaces-table__calling-content\">\r\n <img class=\"tk-workspaces-table__calling-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\r\n <span class=\"tk-workspaces-table__calling-text\" title=\"Cisco Webex Calling Professional Workspace\">Cisco Webex Calling Professional Workspace</span>\r\n </span>\r\n </td>\r\n <td>\r\n <div *ngIf=\"workspace.isHybrid\" class=\"tk-workspaces-table__provisioning-icons\">\r\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </div>\r\n <ng-container *ngIf=\"!workspace.isHybrid\">\r\n <span *ngIf=\"workspace.device.cucmId != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n <span *ngIf=\"workspace.device.webexUUID != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </ng-container>\r\n </td>\r\n <td>\r\n <span class=\"tk-workspaces-table__status\">\r\n <span\r\n class=\"tk-workspaces-table__status-dot\"\r\n [class.tk-workspaces-table__status-dot--hybrid]=\"workspace.isHybrid\"\r\n [class.tk-workspaces-table__status-dot--active]=\"!workspace.isHybrid\"></span>\r\n {{ workspace.isHybrid ? 'Hybrid' : 'Active' }}\r\n </span>\r\n </td>\r\n <td class=\"tk-workspaces-table__actions-cell\">\r\n <mat-progress-spinner\r\n *ngIf=\"isPending(workspace.id)\"\r\n class=\"tk-workspaces-table__actions-spinner\"\r\n [diameter]=\"20\"\r\n strokeWidth=\"2\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n <button\r\n *ngIf=\"!isPending(workspace.id)\"\r\n type=\"button\"\r\n class=\"tk-workspaces-table__actions-button\"\r\n [matMenuTriggerFor]=\"rowMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #rowMenu=\"matMenu\">\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isMoveToMTDisabled(workspace)\"\r\n (click)=\"licenseWithHybrid.emit(workspace)\">\r\n License with Cloud Intelligence\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isMoveToMTDisabled(workspace)\"\r\n (click)=\"migrateToMT.emit(workspace)\">\r\n Migrate Workspace To Webex Calling\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isEnableWebexCallingDisabled(workspace)\"\r\n (click)=\"enableWebexCalling.emit(workspace)\">\r\n Enable Webex Calling\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isMigrateToUCMDisabled(workspace)\"\r\n (click)=\"migrateToUCM.emit(workspace)\">\r\n Migrate User to UCM\r\n </button>\r\n </mat-menu>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!workspaces.length\">\r\n <td [attr.colspan]=\"8\" class=\"tk-workspaces-table__empty\">No workspaces to display.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<mat-paginator\r\n class=\"tk-workspaces-table__paginator\"\r\n [length]=\"total\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n (page)=\"onPage($event)\">\r\n</mat-paginator>\r\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}.tk-workspaces-table__bulk-bar{margin-bottom:1rem;font-size:.875rem;color:#000000f2}.tk-workspaces-table__wrapper{overflow-x:auto}.tk-workspaces-table__paginator{border:1px solid rgba(0,0,0,.12);border-top:none;background:#fff;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspaces-table__table{width:100%;border-collapse:collapse;font-family:Inter,sans-serif}.tk-workspaces-table__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-workspaces-table__table th:hover{background-color:#dedede}.tk-workspaces-table__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-workspaces-table__table tbody tr:hover td{background:#ededed}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--selected td{background:#f0f6ff}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled td{cursor:default}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled:hover td{background:#ffffff}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled.tk-workspaces-table__row--selected:hover td{background:#f0f6ff}.tk-workspaces-table__checkbox-cell{width:2.5rem;cursor:default}.tk-workspaces-table__settings-cell{width:2.5rem;text-align:center}.tk-workspaces-table__settings-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#00000080}.tk-workspaces-table__name-cell{min-width:14rem}.tk-workspaces-table__name-wrapper{display:flex;align-items:center;gap:.625rem}.tk-workspaces-table__name-icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex-shrink:0;border-radius:50%;background:#2b2b2b;color:#fff}.tk-workspaces-table__name-icon img{height:1.125rem;width:1.125rem;filter:brightness(0) invert(1)}.tk-workspaces-table__name-info{display:flex;flex-direction:column;gap:.5rem;min-width:0}.tk-workspaces-table__name-link{color:#000000de;font-weight:500;text-decoration:none}.tk-workspaces-table__name-meta{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:#0009;white-space:nowrap}.tk-workspaces-table__name-meta .tk-workspaces-table__name-type,.tk-workspaces-table__name-meta .tk-workspaces-table__name-capacity{color:#0006}.tk-workspaces-table__meta-icon{font-size:.875rem;height:.875rem;width:.875rem;color:#0006}.tk-workspaces-table__meta-sep{color:#0000004d}.tk-workspaces-table__location-link{color:#0353a8;text-decoration:none}.tk-workspaces-table__location-empty{color:#0009}.tk-workspaces-table__devices{display:flex;align-items:flex-start;gap:.625rem;padding:.5rem 0}.tk-workspaces-table__device-card{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#fff;box-sizing:border-box;padding:12px;block-size:60px}.tk-workspaces-table__device-card:hover .tk-workspaces-table__device-tooltip{visibility:visible;opacity:1}.tk-workspaces-table__device-tooltip{position:absolute;bottom:calc(100% + .75rem);left:50%;transform:translate(-50%);z-index:20;visibility:hidden;opacity:0;transition:opacity .15s ease;border:1px solid #d6d6d6;min-width:16rem;padding:.75rem;border-radius:.215rem;background:#ededed;box-shadow:0 2px 12px #0000002e;font-size:.8125rem;white-space:normal;cursor:default}.tk-workspaces-table__device-tooltip:before,.tk-workspaces-table__device-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-style:solid;border-color:transparent}.tk-workspaces-table__device-tooltip:before{border-width:9px 8px 0;border-top-color:#d6d6d6}.tk-workspaces-table__device-tooltip:after{margin-top:-1px;border-width:8px 7px 0;border-top-color:#ededed}.tk-workspaces-table__device-tooltip-title{font-weight:600;color:#2e2e2e;font-size:1rem}.tk-workspaces-table__device-tooltip-status{display:flex;align-items:center;gap:.75rem;margin-top:.375rem;color:#1c1c1c;font-size:.875rem}.tk-workspaces-table__device-tooltip-status-dot{width:.438rem;height:.438rem;border-radius:50%;background:#707070;flex-shrink:0}.tk-workspaces-table__device-tooltip-status-dot--active{background:#1d805f}.tk-workspaces-table__device-tooltip-divider{margin:.825rem 0 1rem;border-top:1px solid #a8a8a8}.tk-workspaces-table__device-tooltip-mac{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.tk-workspaces-table__device-tooltip-mac-label{color:#0009}.tk-workspaces-table__device-tooltip-mac-value{font-weight:500;color:#000000f2}.tk-workspaces-table__device-tooltip-copy{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.tk-workspaces-table__device-tooltip-copy-icon{width:.875rem;height:.875rem;opacity:.6}.tk-workspaces-table__device-icon{inline-size:40px;display:inline-block;vertical-align:middle;max-inline-size:100%;block-size:auto}.tk-workspaces-table__device-avatar{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#757575;color:#fff;font-size:.6875rem;font-weight:600}.tk-workspaces-table__device-add{display:inline-flex;block-size:62px;align-items:center;justify-content:center;gap:.5rem;min-height:3.5rem;padding:.5rem 1.25rem;border:none;border-radius:.5rem;background-color:#fff;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%22186%22 height%3D%2274%22 viewBox%3D%220 0 186 74%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M1 8.51269C1 4.09442 4.58172 0.512695 9 0.512695H65C69.4183 0.512695 73 4.09442 73 8.5127V64.5127C73 68.931 69.4183 72.5127 65 72.5127H9C4.58172 72.5127 1 68.931 1 64.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M1 8.51269C1 4.09442 4.58172 0.512695 9 0.512695H65C69.4183 0.512695 73 4.09442 73 8.5127V64.5127C73 68.931 69.4183 72.5127 65 72.5127H9C4.58172 72.5127 1 68.931 1 64.5127V8.51269Z%22 stroke%3D%22url(%23paint0_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 8.51269C77 4.09442 80.5817 0.512695 85 0.512695H111C115.418 0.512695 119 4.09442 119 8.5127V26.5127C119 30.931 115.418 34.5127 111 34.5127H85C80.5817 34.5127 77 30.931 77 26.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 8.51269C77 4.09442 80.5817 0.512695 85 0.512695H111C115.418 0.512695 119 4.09442 119 8.5127V26.5127C119 30.931 115.418 34.5127 111 34.5127H85C80.5817 34.5127 77 30.931 77 26.5127V8.51269Z%22 stroke%3D%22url(%23paint1_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M123 8.51269C123 4.09442 126.582 0.512695 131 0.512695H177C181.418 0.512695 185 4.09442 185 8.5127V26.5127C185 30.931 181.418 34.5127 177 34.5127H131C126.582 34.5127 123 30.931 123 26.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M123 8.51269C123 4.09442 126.582 0.512695 131 0.512695H177C181.418 0.512695 185 4.09442 185 8.5127V26.5127C185 30.931 181.418 34.5127 177 34.5127H131C126.582 34.5127 123 30.931 123 26.5127V8.51269Z%22 stroke%3D%22url(%23paint2_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 46.5127C77 42.0944 80.5817 38.5127 85 38.5127H131C135.418 38.5127 139 42.0944 139 46.5127V64.5127C139 68.931 135.418 72.5127 131 72.5127H85C80.5817 72.5127 77 68.931 77 64.5127V46.5127Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 46.5127C77 42.0944 80.5817 38.5127 85 38.5127H131C135.418 38.5127 139 42.0944 139 46.5127V64.5127C139 68.931 135.418 72.5127 131 72.5127H85C80.5817 72.5127 77 68.931 77 64.5127V46.5127Z%22 stroke%3D%22url(%23paint3_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M143 46.5127C143 42.0944 146.582 38.5127 151 38.5127H177C181.418 38.5127 185 42.0944 185 46.5127V64.5127C185 68.931 181.418 72.5127 177 72.5127H151C146.582 72.5127 143 68.931 143 64.5127V46.5127Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M143 46.5127C143 42.0944 146.582 38.5127 151 38.5127H177C181.418 38.5127 185 42.0944 185 46.5127V64.5127C185 68.931 181.418 72.5127 177 72.5127H151C146.582 72.5127 143 68.931 143 64.5127V46.5127Z%22 stroke%3D%22url(%23paint4_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cdefs%3E%0D%3CradialGradient id%3D%22paint0_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint1_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint2_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint3_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint4_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3C%2Fdefs%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;background-position:center;background-size:contain;font-family:inherit;white-space:nowrap;cursor:pointer;box-sizing:border-box}.tk-workspaces-table__device-add-label{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:999px;color:#000000f2;font-size:.875rem;transition:background-color .15s}.tk-workspaces-table__device-add:hover .tk-workspaces-table__device-add-label{background-color:#ededed}.tk-workspaces-table__device-add-icon{height:1.125rem;width:1.125rem}.tk-workspaces-table__devices-empty{color:#0000004d}.tk-workspaces-table__calling-cell{max-width:14rem}.tk-workspaces-table__calling-content{display:flex;align-items:center;gap:.375rem}.tk-workspaces-table__calling-icon{flex:none;width:1rem;height:1rem;opacity:.4}.tk-workspaces-table__calling-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-workspaces-table__provisioning-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0009}.tk-workspaces-table__provisioning-icons{display:flex;align-items:center;gap:.5rem}.tk-workspaces-table__status{display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap}.tk-workspaces-table__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:rgba(0,0,0,.3);flex-shrink:0}.tk-workspaces-table__status-dot--active{background:#1d805f}.tk-workspaces-table__status-dot--inactive{background:#c73636}.tk-workspaces-table__status-dot--hybrid{background:#639fff}.tk-workspaces-table__actions-cell{width:2.5rem;text-align:center}.tk-workspaces-table__actions-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:.25rem;color:#00000080;cursor:pointer;border-radius:4px}.tk-workspaces-table__actions-button:hover{background:rgba(0,0,0,.06)}.tk-workspaces-table__actions-spinner{display:inline-flex;margin:0 auto}.tk-workspaces-table__empty{padding:1.5rem;text-align:center;color:#0009;cursor:default}\n"] }]
|
|
572
|
+
args: [{ selector: 'tk-workspaces-table', template: "<div class=\"tk-workspaces-table__bulk-bar\">Select one or more workspaces for bulk actions</div>\r\n\r\n<div class=\"tk-workspaces-table__wrapper\">\r\n <table class=\"tk-workspaces-table__table\">\r\n <thead>\r\n <tr>\r\n <th class=\"tk-workspaces-table__checkbox-cell\">\r\n <input type=\"checkbox\" [checked]=\"allSelected\" [indeterminate]=\"someSelected\" (change)=\"toggleAll()\" />\r\n </th>\r\n <th>Name</th>\r\n <th>Devices</th>\r\n <th>Scheduling</th>\r\n <th>Calling</th>\r\n <th>Provisioning Type</th>\r\n <th>Status</th>\r\n <th class=\"tk-workspaces-table__settings-cell\">\r\n <mat-icon class=\"tk-workspaces-table__settings-icon\">settings</mat-icon>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let workspace of workspaces\"\r\n [class.tk-workspaces-table__row--selected]=\"isSelected(workspace.id)\"\r\n [class.tk-workspaces-table__row--disabled]=\"!canOpenWorkspace(workspace)\">\r\n <td class=\"tk-workspaces-table__checkbox-cell\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(workspace.id)\" (change)=\"toggleRow(workspace.id)\" />\r\n </td>\r\n <td class=\"tk-workspaces-table__name-cell\" (click)=\"onOpenWorkspace(workspace)\">\r\n <div class=\"tk-workspaces-table__name-wrapper\">\r\n <span class=\"tk-workspaces-table__name-icon\">\r\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"tk-workspaces-table__name-info\">\r\n <a href=\"javascript:void(0)\" class=\"tk-workspaces-table__name-link\">{{ getDisplayName(workspace) }}</a>\r\n <div class=\"tk-workspaces-table__name-meta\">\r\n <span class=\"tk-workspaces-table__name-type\">{{ workspace.typeLabel }}</span>\r\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\r\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\r\n <span class=\"tk-workspaces-table__name-capacity\">{{ workspace.capacity ?? 'No capacity' }}</span>\r\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\r\n <!-- <mat-icon class=\"tk-workspaces-table__meta-icon\">location_on</mat-icon> -->\r\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\r\n <a\r\n *ngIf=\"workspace.location; else noLocation\"\r\n href=\"javascript:void(0)\"\r\n class=\"tk-workspaces-table__location-link\">{{ workspace.location }}</a>\r\n <ng-template #noLocation>\r\n <span class=\"tk-workspaces-table__location-empty\">No location</span>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"tk-workspaces-table__devices\">\r\n <ng-container *ngIf=\"workspace.devices.length; else noDevices\">\r\n <span *ngFor=\"let device of workspace.devices\" class=\"tk-workspaces-table__device-card\">\r\n <img\r\n class=\"tk-workspaces-table__device-icon\"\r\n [src]=\"getDeviceIcon(device.model)\"\r\n [alt]=\"device.label\" />\r\n <div class=\"tk-workspaces-table__device-tooltip\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"tk-workspaces-table__device-tooltip-title\">{{ device.label }}</div>\r\n <div class=\"tk-workspaces-table__device-tooltip-status\">\r\n <span\r\n class=\"tk-workspaces-table__device-tooltip-status-dot\"\r\n [class.tk-workspaces-table__device-tooltip-status-dot--active]=\"workspace.status === 'active'\"></span>\r\n {{ workspace.statusLabel }}\r\n </div>\r\n <div class=\"tk-workspaces-table__device-tooltip-divider\"></div>\r\n <div class=\"tk-workspaces-table__device-tooltip-mac\">\r\n <span class=\"tk-workspaces-table__device-tooltip-mac-label\">MAC address</span>\r\n <span class=\"tk-workspaces-table__device-tooltip-mac-value\">{{ device.mac }}</span>\r\n <button\r\n *ngIf=\"device.mac\"\r\n type=\"button\"\r\n class=\"tk-workspaces-table__device-tooltip-copy\"\r\n (click)=\"onCopyMac(device.mac)\">\r\n <img class=\"tk-workspaces-table__device-tooltip-copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\r\n </button>\r\n </div>\r\n </div>\r\n </span>\r\n </ng-container>\r\n <!-- <ng-container *ngFor=\"let device of workspace.devices\">\r\n <span *ngIf=\"device && device.model else noDevice\" class=\"tk-workspaces-table__device-card\" [title]=\"device.label\">\r\n <img\r\n class=\"tk-workspaces-table__device-icon\"\r\n [src]=\"getDeviceIcon(device.model)\"\r\n [alt]=\"device.label\" />\r\n </span>\r\n </ng-container> -->\r\n <ng-template #noDevices>\r\n <button\r\n type=\"button\"\r\n class=\"tk-workspaces-table__device-add\"\r\n (click)=\"onAddDevice(workspace, $event)\">\r\n <span class=\"tk-workspaces-table__device-add-label\">\r\n <img\r\n class=\"tk-workspaces-table__device-add-icon\"\r\n src=\"assets/icons/multipled-devices-regular.svg\"\r\n alt=\"\" />\r\n Add device\r\n </span>\r\n </button>\r\n </ng-template>\r\n </div>\r\n </td>\r\n <td>{{ workspace.scheduling }}</td>\r\n <td class=\"tk-workspaces-table__calling-cell\">\r\n <span class=\"tk-workspaces-table__calling-content\">\r\n <img class=\"tk-workspaces-table__calling-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\r\n <span class=\"tk-workspaces-table__calling-text\" title=\"Cisco Webex Calling Professional Workspace\">Cisco Webex Calling Professional Workspace</span>\r\n </span>\r\n </td>\r\n <td>\r\n <div *ngIf=\"workspace.isHybrid\" class=\"tk-workspaces-table__provisioning-icons\">\r\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </div>\r\n <ng-container *ngIf=\"!workspace.isHybrid\">\r\n <span *ngIf=\"workspace.device.cucmId != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n <span *ngIf=\"workspace.device.webexUUID != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </ng-container>\r\n </td>\r\n <td>\r\n <span class=\"tk-workspaces-table__status\">\r\n <span\r\n class=\"tk-workspaces-table__status-dot\"\r\n [class.tk-workspaces-table__status-dot--hybrid]=\"workspace.isHybrid\"\r\n [class.tk-workspaces-table__status-dot--active]=\"!workspace.isHybrid\"></span>\r\n {{ workspace.isHybrid ? 'Hybrid' : 'Active' }}\r\n </span>\r\n </td>\r\n <td class=\"tk-workspaces-table__actions-cell\">\r\n <div class=\"spinner-wrapper\">\r\n <mat-progress-spinner\r\n *ngIf=\"isPending(workspace.id)\"\r\n class=\"tk-workspaces-table__actions-spinner\"\r\n [diameter]=\"20\"\r\n strokeWidth=\"2\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </div>\r\n <button\r\n *ngIf=\"!isPending(workspace.id)\"\r\n type=\"button\"\r\n class=\"tk-workspaces-table__actions-button\"\r\n [matMenuTriggerFor]=\"rowMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #rowMenu=\"matMenu\">\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isMoveToMTDisabled(workspace)\"\r\n (click)=\"migrateToMT.emit(workspace)\">\r\n Migrate Workspace To Webex Calling\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isEnableWebexCallingDisabled(workspace)\"\r\n (click)=\"enableWebexCalling.emit(workspace)\">\r\n Enable Webex Calling\r\n </button>\r\n <button\r\n type=\"button\"\r\n mat-menu-item\r\n [disabled]=\"isMigrateToUCMDisabled(workspace)\"\r\n (click)=\"migrateToUCM.emit(workspace)\">\r\n Migrate User to UCM\r\n </button>\r\n </mat-menu>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!isLoading && !workspaces.length\">\r\n <td [attr.colspan]=\"8\" class=\"tk-workspaces-table__empty\">No workspaces to display.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<mat-paginator\r\n class=\"tk-workspaces-table__paginator\"\r\n [length]=\"total\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n (page)=\"onPage($event)\">\r\n</mat-paginator>\r\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}.tk-workspaces-table__bulk-bar{margin-bottom:1rem;font-size:.875rem;color:#000000f2}.tk-workspaces-table__wrapper{overflow-x:auto}.tk-workspaces-table__paginator{border:1px solid rgba(0,0,0,.12);border-top:none;background:#fff;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspaces-table__table{width:100%;border-collapse:collapse;font-family:Inter,sans-serif}.tk-workspaces-table__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-workspaces-table__table th:hover{background-color:#dedede}.tk-workspaces-table__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-workspaces-table__table tbody tr:hover td{background:#ededed}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--selected td{background:#f0f6ff}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled td{cursor:default}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled:hover td{background:#ffffff}.tk-workspaces-table__table tbody tr.tk-workspaces-table__row--disabled.tk-workspaces-table__row--selected:hover td{background:#f0f6ff}.tk-workspaces-table__checkbox-cell{width:2.5rem;cursor:default}.tk-workspaces-table__settings-cell{width:2.5rem;text-align:center}.tk-workspaces-table__settings-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#00000080}.tk-workspaces-table__name-cell{min-width:14rem}.tk-workspaces-table__name-wrapper{display:flex;align-items:center;gap:.625rem}.tk-workspaces-table__name-icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex-shrink:0;border-radius:50%;background:#2b2b2b;color:#fff}.tk-workspaces-table__name-icon img{height:1.125rem;width:1.125rem;filter:brightness(0) invert(1)}.tk-workspaces-table__name-info{display:flex;flex-direction:column;gap:.5rem;min-width:0}.tk-workspaces-table__name-link{color:#000000de;font-weight:500;text-decoration:none}.tk-workspaces-table__name-meta{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:#0009;white-space:nowrap}.tk-workspaces-table__name-meta .tk-workspaces-table__name-type,.tk-workspaces-table__name-meta .tk-workspaces-table__name-capacity{color:#0006}.tk-workspaces-table__meta-icon{font-size:.875rem;height:.875rem;width:.875rem;color:#0006}.tk-workspaces-table__meta-sep{color:#0000004d}.tk-workspaces-table__location-link{color:#0353a8;text-decoration:none}.tk-workspaces-table__location-empty{color:#0009}.tk-workspaces-table__devices{display:flex;align-items:flex-start;gap:.625rem;padding:.5rem 0}.tk-workspaces-table__device-card{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:.5rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;background:#fff;box-sizing:border-box;padding:12px;block-size:60px}.tk-workspaces-table__device-card:hover .tk-workspaces-table__device-tooltip{visibility:visible;opacity:1}.tk-workspaces-table__device-tooltip{position:absolute;bottom:calc(100% + .75rem);left:50%;transform:translate(-50%);z-index:20;visibility:hidden;opacity:0;transition:opacity .15s ease;border:1px solid #d6d6d6;min-width:16rem;padding:.75rem;border-radius:.215rem;background:#ededed;box-shadow:0 2px 12px #0000002e;font-size:.8125rem;white-space:normal;cursor:default}.tk-workspaces-table__device-tooltip:before,.tk-workspaces-table__device-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-style:solid;border-color:transparent}.tk-workspaces-table__device-tooltip:before{border-width:9px 8px 0;border-top-color:#d6d6d6}.tk-workspaces-table__device-tooltip:after{margin-top:-1px;border-width:8px 7px 0;border-top-color:#ededed}.tk-workspaces-table__device-tooltip-title{font-weight:600;color:#2e2e2e;font-size:1rem}.tk-workspaces-table__device-tooltip-status{display:flex;align-items:center;gap:.75rem;margin-top:.375rem;color:#1c1c1c;font-size:.875rem}.tk-workspaces-table__device-tooltip-status-dot{width:.438rem;height:.438rem;border-radius:50%;background:#707070;flex-shrink:0}.tk-workspaces-table__device-tooltip-status-dot--active{background:#1d805f}.tk-workspaces-table__device-tooltip-divider{margin:.825rem 0 1rem;border-top:1px solid #a8a8a8}.tk-workspaces-table__device-tooltip-mac{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.tk-workspaces-table__device-tooltip-mac-label{color:#0009}.tk-workspaces-table__device-tooltip-mac-value{font-weight:500;color:#000000f2}.tk-workspaces-table__device-tooltip-copy{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer}.tk-workspaces-table__device-tooltip-copy-icon{width:.875rem;height:.875rem;opacity:.6}.tk-workspaces-table__device-icon{inline-size:40px;display:inline-block;vertical-align:middle;max-inline-size:100%;block-size:auto}.tk-workspaces-table__device-avatar{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#757575;color:#fff;font-size:.6875rem;font-weight:600}.tk-workspaces-table__device-add{display:inline-flex;block-size:62px;align-items:center;justify-content:center;gap:.5rem;min-height:3.5rem;padding:.5rem 1.25rem;border:none;border-radius:.5rem;background-color:#fff;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%22186%22 height%3D%2274%22 viewBox%3D%220 0 186 74%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M1 8.51269C1 4.09442 4.58172 0.512695 9 0.512695H65C69.4183 0.512695 73 4.09442 73 8.5127V64.5127C73 68.931 69.4183 72.5127 65 72.5127H9C4.58172 72.5127 1 68.931 1 64.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M1 8.51269C1 4.09442 4.58172 0.512695 9 0.512695H65C69.4183 0.512695 73 4.09442 73 8.5127V64.5127C73 68.931 69.4183 72.5127 65 72.5127H9C4.58172 72.5127 1 68.931 1 64.5127V8.51269Z%22 stroke%3D%22url(%23paint0_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 8.51269C77 4.09442 80.5817 0.512695 85 0.512695H111C115.418 0.512695 119 4.09442 119 8.5127V26.5127C119 30.931 115.418 34.5127 111 34.5127H85C80.5817 34.5127 77 30.931 77 26.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 8.51269C77 4.09442 80.5817 0.512695 85 0.512695H111C115.418 0.512695 119 4.09442 119 8.5127V26.5127C119 30.931 115.418 34.5127 111 34.5127H85C80.5817 34.5127 77 30.931 77 26.5127V8.51269Z%22 stroke%3D%22url(%23paint1_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M123 8.51269C123 4.09442 126.582 0.512695 131 0.512695H177C181.418 0.512695 185 4.09442 185 8.5127V26.5127C185 30.931 181.418 34.5127 177 34.5127H131C126.582 34.5127 123 30.931 123 26.5127V8.51269Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M123 8.51269C123 4.09442 126.582 0.512695 131 0.512695H177C181.418 0.512695 185 4.09442 185 8.5127V26.5127C185 30.931 181.418 34.5127 177 34.5127H131C126.582 34.5127 123 30.931 123 26.5127V8.51269Z%22 stroke%3D%22url(%23paint2_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 46.5127C77 42.0944 80.5817 38.5127 85 38.5127H131C135.418 38.5127 139 42.0944 139 46.5127V64.5127C139 68.931 135.418 72.5127 131 72.5127H85C80.5817 72.5127 77 68.931 77 64.5127V46.5127Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M77 46.5127C77 42.0944 80.5817 38.5127 85 38.5127H131C135.418 38.5127 139 42.0944 139 46.5127V64.5127C139 68.931 135.418 72.5127 131 72.5127H85C80.5817 72.5127 77 68.931 77 64.5127V46.5127Z%22 stroke%3D%22url(%23paint3_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M143 46.5127C143 42.0944 146.582 38.5127 151 38.5127H177C181.418 38.5127 185 42.0944 185 46.5127V64.5127C185 68.931 181.418 72.5127 177 72.5127H151C146.582 72.5127 143 68.931 143 64.5127V46.5127Z%22 stroke%3D%22%23DEDEDE%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cpath d%3D%22M143 46.5127C143 42.0944 146.582 38.5127 151 38.5127H177C181.418 38.5127 185 42.0944 185 46.5127V64.5127C185 68.931 181.418 72.5127 177 72.5127H151C146.582 72.5127 143 68.931 143 64.5127V46.5127Z%22 stroke%3D%22url(%23paint4_radial_6222_238881)%22 stroke-dasharray%3D%224 4%22%2F%3E%0D%3Cdefs%3E%0D%3CradialGradient id%3D%22paint0_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint1_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint2_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint3_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3CradialGradient id%3D%22paint4_radial_6222_238881%22 cx%3D%220%22 cy%3D%220%22 r%3D%221%22 gradientUnits%3D%22userSpaceOnUse%22 gradientTransform%3D%22translate(93 36.5127) rotate(90) scale(36 92)%22%3E%0D%3Cstop stop-color%3D%22white%22%2F%3E%0D%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%0D%3C%2FradialGradient%3E%0D%3C%2Fdefs%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;background-position:center;background-size:contain;font-family:inherit;white-space:nowrap;cursor:pointer;box-sizing:border-box}.tk-workspaces-table__device-add-label{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:999px;color:#000000f2;font-size:.875rem;transition:background-color .15s}.tk-workspaces-table__device-add:hover .tk-workspaces-table__device-add-label{background-color:#ededed}.tk-workspaces-table__device-add-icon{height:1.125rem;width:1.125rem}.tk-workspaces-table__devices-empty{color:#0000004d}.tk-workspaces-table__calling-cell{max-width:14rem}.tk-workspaces-table__calling-content{display:flex;align-items:center;gap:.375rem}.tk-workspaces-table__calling-icon{flex:none;width:1rem;height:1rem;opacity:.4}.tk-workspaces-table__calling-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-workspaces-table__provisioning-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0009}.tk-workspaces-table__provisioning-icons{display:flex;align-items:center;gap:.5rem}.tk-workspaces-table__status{display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap}.tk-workspaces-table__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:rgba(0,0,0,.3);flex-shrink:0}.tk-workspaces-table__status-dot--active{background:#1d805f}.tk-workspaces-table__status-dot--inactive{background:#c73636}.tk-workspaces-table__status-dot--hybrid{background:#639fff}.tk-workspaces-table__actions-cell{width:2.5rem;text-align:center}.tk-workspaces-table__actions-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:.25rem;color:#00000080;cursor:pointer;border-radius:4px}.tk-workspaces-table__actions-button:hover{background:rgba(0,0,0,.06)}.tk-workspaces-table__actions-spinner{display:inline-flex;margin:0 auto}.tk-workspaces-table__empty{padding:1.5rem;text-align:center;color:#0009;cursor:default}\n"] }]
|
|
572
573
|
}], propDecorators: { workspaces: [{
|
|
573
574
|
type: Input
|
|
574
575
|
}], total: [{
|
|
@@ -581,10 +582,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
581
582
|
type: Input
|
|
582
583
|
}], pendingWorkspaceIds: [{
|
|
583
584
|
type: Input
|
|
585
|
+
}], isLoading: [{
|
|
586
|
+
type: Input
|
|
584
587
|
}], openWorkspace: [{
|
|
585
588
|
type: Output
|
|
586
|
-
}], licenseWithHybrid: [{
|
|
587
|
-
type: Output
|
|
588
589
|
}], migrateToMT: [{
|
|
589
590
|
type: Output
|
|
590
591
|
}], enableWebexCalling: [{
|
|
@@ -927,6 +928,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
927
928
|
type: Output
|
|
928
929
|
}] } });
|
|
929
930
|
|
|
931
|
+
const NO_LOCATION_OPTION = 'No location';
|
|
932
|
+
function hasNoLocation(location) {
|
|
933
|
+
const value = location === null || location === void 0 ? void 0 : location.trim().toLowerCase();
|
|
934
|
+
return !value || value === NO_LOCATION_OPTION.toLowerCase();
|
|
935
|
+
}
|
|
930
936
|
class WorkspacesComponent {
|
|
931
937
|
constructor(apiService, apiWebexService, workspacesService, migrationService, dialog, location) {
|
|
932
938
|
this.apiService = apiService;
|
|
@@ -973,13 +979,24 @@ class WorkspacesComponent {
|
|
|
973
979
|
return [...new Set(this.workspaces.map(workspace => workspace.typeLabel).filter(Boolean))];
|
|
974
980
|
}
|
|
975
981
|
get locationOptions() {
|
|
976
|
-
|
|
982
|
+
const locations = [...new Set(this.workspaces.map(workspace => workspace.location).filter(location => !hasNoLocation(location)))];
|
|
983
|
+
return this.workspaces.some(workspace => hasNoLocation(workspace.location))
|
|
984
|
+
? [NO_LOCATION_OPTION, ...locations]
|
|
985
|
+
: locations;
|
|
977
986
|
}
|
|
978
987
|
get filteredWorkspacesAll() {
|
|
979
988
|
const term = this.searchTerm.trim().toLowerCase();
|
|
980
989
|
return this.workspaces.filter(workspace => (!term || workspace.displayName.toLowerCase().includes(term) || workspace.location.toLowerCase().includes(term)) &&
|
|
981
990
|
(!this.typeFilter || workspace.typeLabel === this.typeFilter) &&
|
|
982
|
-
|
|
991
|
+
this.matchesLocationFilter(workspace));
|
|
992
|
+
}
|
|
993
|
+
matchesLocationFilter(workspace) {
|
|
994
|
+
if (!this.locationFilter) {
|
|
995
|
+
return true;
|
|
996
|
+
}
|
|
997
|
+
return this.locationFilter === NO_LOCATION_OPTION
|
|
998
|
+
? hasNoLocation(workspace.location)
|
|
999
|
+
: workspace.location === this.locationFilter;
|
|
983
1000
|
}
|
|
984
1001
|
get filteredWorkspaces() {
|
|
985
1002
|
const start = this.pageIndex * this.pageSize;
|
|
@@ -1203,10 +1220,10 @@ class WorkspacesComponent {
|
|
|
1203
1220
|
}
|
|
1204
1221
|
}
|
|
1205
1222
|
WorkspacesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspacesComponent, deps: [{ token: APIService }, { token: ApiWebexService }, { token: WorkspacesService }, { token: WorkspacesMigrationService }, { token: i1.MatDialog }, { token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component });
|
|
1206
|
-
WorkspacesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspacesComponent, selector: "tk-workspaces", inputs: { host: "host", token: "token", customerId: "customerId" }, outputs: { addWorkspace: "addWorkspace", openWorkspace: "openWorkspace", addDevice: "addDevice" }, ngImport: i0, template: "<div class=\"tk-workspaces\">\r\n <ng-container *ngIf=\"view === 'list'; else detailView\">\r\n <header class=\"tk-workspaces__header\">\r\n <h1 class=\"tk-workspaces__title\">Workspaces</h1>\r\n </header>\r\n\r\n <nav class=\"tk-workspaces__tabs\">\r\n <button\r\n type=\"button\"\r\n *ngFor=\"let tab of tabs\"\r\n class=\"tk-workspaces__tab\"\r\n [class.tk-workspaces__tab--active]=\"activeTab === tab.id\"\r\n (click)=\"selectTab(tab.id)\">\r\n <img class=\"tk-workspaces__tab-icon\" [src]=\"tab.icon\" alt=\"\" />\r\n {{ tab.label }}\r\n </button>\r\n </nav>\r\n\r\n <ng-container *ngIf=\"activeTab === 'workspaces'; else placeholder\">\r\n <app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n <tk-workspaces-filters\r\n [resultCount]=\"total\"\r\n [typeOptions]=\"typeOptions\"\r\n [locationOptions]=\"locationOptions\"\r\n (searchChange)=\"onSearchChange($event)\"\r\n (typeChange)=\"onTypeFilterChange($event)\"\r\n (locationChange)=\"onLocationFilterChange($event)\"\r\n (addWorkspace)=\"addWorkspace.emit()\">\r\n </tk-workspaces-filters>\r\n\r\n <tk-workspaces-table\r\n [workspaces]=\"filteredWorkspaces\"\r\n [total]=\"filteredTotal\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pendingWorkspaceIds]=\"pendingWorkspaceIds\"\r\n
|
|
1223
|
+
WorkspacesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspacesComponent, selector: "tk-workspaces", inputs: { host: "host", token: "token", customerId: "customerId" }, outputs: { addWorkspace: "addWorkspace", openWorkspace: "openWorkspace", addDevice: "addDevice" }, ngImport: i0, template: "<div class=\"tk-workspaces\">\r\n <ng-container *ngIf=\"view === 'list'; else detailView\">\r\n <header class=\"tk-workspaces__header\">\r\n <h1 class=\"tk-workspaces__title\">Workspaces</h1>\r\n </header>\r\n\r\n <nav class=\"tk-workspaces__tabs\">\r\n <button\r\n type=\"button\"\r\n *ngFor=\"let tab of tabs\"\r\n class=\"tk-workspaces__tab\"\r\n [class.tk-workspaces__tab--active]=\"activeTab === tab.id\"\r\n (click)=\"selectTab(tab.id)\">\r\n <img class=\"tk-workspaces__tab-icon\" [src]=\"tab.icon\" alt=\"\" />\r\n {{ tab.label }}\r\n </button>\r\n </nav>\r\n\r\n <ng-container *ngIf=\"activeTab === 'workspaces'; else placeholder\">\r\n <app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n <tk-workspaces-filters\r\n [resultCount]=\"total\"\r\n [typeOptions]=\"typeOptions\"\r\n [locationOptions]=\"locationOptions\"\r\n (searchChange)=\"onSearchChange($event)\"\r\n (typeChange)=\"onTypeFilterChange($event)\"\r\n (locationChange)=\"onLocationFilterChange($event)\"\r\n (addWorkspace)=\"addWorkspace.emit()\">\r\n </tk-workspaces-filters>\r\n\r\n <tk-workspaces-table\r\n [workspaces]=\"filteredWorkspaces\"\r\n [total]=\"filteredTotal\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pendingWorkspaceIds]=\"pendingWorkspaceIds\"\r\n [isLoading]=\"isLoading\"\r\n (openWorkspace)=\"onOpenWorkspace($event)\"\r\n (migrateToMT)=\"onMoveToMT($event)\"\r\n (enableWebexCalling)=\"onEnableWebexCalling($event)\"\r\n (migrateToUCM)=\"onMigrateToUCM($event)\"\r\n (addDevice)=\"addDevice.emit($event)\"\r\n (pageChange)=\"onPageChange($event)\">\r\n </tk-workspaces-table>\r\n </ng-container>\r\n\r\n <ng-template #placeholder>\r\n <div class=\"tk-workspaces__placeholder\">This section isn't available in this widget yet.</div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #detailView>\r\n <tk-workspace-detail\r\n *ngIf=\"selectedWorkspace\"\r\n [workspace]=\"selectedWorkspace\"\r\n [connectionType]=\"selectedConnectionType\"\r\n [customerId]=\"customerId\"\r\n (back)=\"onBackToList()\">\r\n </tk-workspace-detail>\r\n </ng-template>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-workspaces{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding:1.5rem}.tk-workspaces__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1rem}.tk-workspaces__title{margin:0;font-size:1.5rem;font-weight:600}.tk-workspaces__tabs{display:flex;align-items:center;gap:.25rem;margin-bottom:1rem}.tk-workspaces__tab{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:none;border:none;border-radius:6.25rem;font-family:inherit;font-size:1rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-workspaces__tab:hover{background:rgba(0,0,0,.0705882353)}.tk-workspaces__tab--active{background:#C1C1C1;color:#000000f2}.tk-workspaces__tab--active:hover{background:rgba(0,0,0,.3019607843)}.tk-workspaces__tab-icon{height:1.125rem;width:1.125rem;opacity:.6}.tk-workspaces__tab--active .tk-workspaces__tab-icon{opacity:1}.tk-workspaces__placeholder{padding:3rem 1rem;text-align:center;color:#0009}::ng-deep input.blue-input{border:solid .0625rem rgba(0,0,0,.5019607843)!important}::ng-deep input.blue-input:focus{display:flex;align-items:center;color:#000000b3;background-color:#ededed;border:solid .0625rem rgba(0,0,0,.5019607843);font-weight:500;cursor:pointer;flex-wrap:wrap;gap:.5rem;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important}::ng-deep input.blue-input:focus:focus-visible{outline:none}::ng-deep input.blue-input:hover{background-color:#00000012!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WorkspacesFiltersComponent, selector: "tk-workspaces-filters", inputs: ["resultCount", "typeOptions", "locationOptions"], outputs: ["searchChange", "typeChange", "locationChange", "addWorkspace"] }, { kind: "component", type: WorkspacesTableComponent, selector: "tk-workspaces-table", inputs: ["workspaces", "total", "pageIndex", "pageSize", "pageSizeOptions", "pendingWorkspaceIds", "isLoading"], outputs: ["openWorkspace", "migrateToMT", "enableWebexCalling", "migrateToUCM", "addDevice", "pageChange"] }, { kind: "component", type: WorkspaceDetailComponent, selector: "tk-workspace-detail", inputs: ["workspace", "connectionType", "customerId"], outputs: ["back"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
|
|
1207
1224
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspacesComponent, decorators: [{
|
|
1208
1225
|
type: Component,
|
|
1209
|
-
args: [{ selector: 'tk-workspaces', template: "<div class=\"tk-workspaces\">\r\n <ng-container *ngIf=\"view === 'list'; else detailView\">\r\n <header class=\"tk-workspaces__header\">\r\n <h1 class=\"tk-workspaces__title\">Workspaces</h1>\r\n </header>\r\n\r\n <nav class=\"tk-workspaces__tabs\">\r\n <button\r\n type=\"button\"\r\n *ngFor=\"let tab of tabs\"\r\n class=\"tk-workspaces__tab\"\r\n [class.tk-workspaces__tab--active]=\"activeTab === tab.id\"\r\n (click)=\"selectTab(tab.id)\">\r\n <img class=\"tk-workspaces__tab-icon\" [src]=\"tab.icon\" alt=\"\" />\r\n {{ tab.label }}\r\n </button>\r\n </nav>\r\n\r\n <ng-container *ngIf=\"activeTab === 'workspaces'; else placeholder\">\r\n <app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n <tk-workspaces-filters\r\n [resultCount]=\"total\"\r\n [typeOptions]=\"typeOptions\"\r\n [locationOptions]=\"locationOptions\"\r\n (searchChange)=\"onSearchChange($event)\"\r\n (typeChange)=\"onTypeFilterChange($event)\"\r\n (locationChange)=\"onLocationFilterChange($event)\"\r\n (addWorkspace)=\"addWorkspace.emit()\">\r\n </tk-workspaces-filters>\r\n\r\n <tk-workspaces-table\r\n [workspaces]=\"filteredWorkspaces\"\r\n [total]=\"filteredTotal\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pendingWorkspaceIds]=\"pendingWorkspaceIds\"\r\n
|
|
1226
|
+
args: [{ selector: 'tk-workspaces', template: "<div class=\"tk-workspaces\">\r\n <ng-container *ngIf=\"view === 'list'; else detailView\">\r\n <header class=\"tk-workspaces__header\">\r\n <h1 class=\"tk-workspaces__title\">Workspaces</h1>\r\n </header>\r\n\r\n <nav class=\"tk-workspaces__tabs\">\r\n <button\r\n type=\"button\"\r\n *ngFor=\"let tab of tabs\"\r\n class=\"tk-workspaces__tab\"\r\n [class.tk-workspaces__tab--active]=\"activeTab === tab.id\"\r\n (click)=\"selectTab(tab.id)\">\r\n <img class=\"tk-workspaces__tab-icon\" [src]=\"tab.icon\" alt=\"\" />\r\n {{ tab.label }}\r\n </button>\r\n </nav>\r\n\r\n <ng-container *ngIf=\"activeTab === 'workspaces'; else placeholder\">\r\n <app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n <tk-workspaces-filters\r\n [resultCount]=\"total\"\r\n [typeOptions]=\"typeOptions\"\r\n [locationOptions]=\"locationOptions\"\r\n (searchChange)=\"onSearchChange($event)\"\r\n (typeChange)=\"onTypeFilterChange($event)\"\r\n (locationChange)=\"onLocationFilterChange($event)\"\r\n (addWorkspace)=\"addWorkspace.emit()\">\r\n </tk-workspaces-filters>\r\n\r\n <tk-workspaces-table\r\n [workspaces]=\"filteredWorkspaces\"\r\n [total]=\"filteredTotal\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pendingWorkspaceIds]=\"pendingWorkspaceIds\"\r\n [isLoading]=\"isLoading\"\r\n (openWorkspace)=\"onOpenWorkspace($event)\"\r\n (migrateToMT)=\"onMoveToMT($event)\"\r\n (enableWebexCalling)=\"onEnableWebexCalling($event)\"\r\n (migrateToUCM)=\"onMigrateToUCM($event)\"\r\n (addDevice)=\"addDevice.emit($event)\"\r\n (pageChange)=\"onPageChange($event)\">\r\n </tk-workspaces-table>\r\n </ng-container>\r\n\r\n <ng-template #placeholder>\r\n <div class=\"tk-workspaces__placeholder\">This section isn't available in this widget yet.</div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #detailView>\r\n <tk-workspace-detail\r\n *ngIf=\"selectedWorkspace\"\r\n [workspace]=\"selectedWorkspace\"\r\n [connectionType]=\"selectedConnectionType\"\r\n [customerId]=\"customerId\"\r\n (back)=\"onBackToList()\">\r\n </tk-workspace-detail>\r\n </ng-template>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-workspaces{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding:1.5rem}.tk-workspaces__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1rem}.tk-workspaces__title{margin:0;font-size:1.5rem;font-weight:600}.tk-workspaces__tabs{display:flex;align-items:center;gap:.25rem;margin-bottom:1rem}.tk-workspaces__tab{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:none;border:none;border-radius:6.25rem;font-family:inherit;font-size:1rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-workspaces__tab:hover{background:rgba(0,0,0,.0705882353)}.tk-workspaces__tab--active{background:#C1C1C1;color:#000000f2}.tk-workspaces__tab--active:hover{background:rgba(0,0,0,.3019607843)}.tk-workspaces__tab-icon{height:1.125rem;width:1.125rem;opacity:.6}.tk-workspaces__tab--active .tk-workspaces__tab-icon{opacity:1}.tk-workspaces__placeholder{padding:3rem 1rem;text-align:center;color:#0009}::ng-deep input.blue-input{border:solid .0625rem rgba(0,0,0,.5019607843)!important}::ng-deep input.blue-input:focus{display:flex;align-items:center;color:#000000b3;background-color:#ededed;border:solid .0625rem rgba(0,0,0,.5019607843);font-weight:500;cursor:pointer;flex-wrap:wrap;gap:.5rem;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important}::ng-deep input.blue-input:focus:focus-visible{outline:none}::ng-deep input.blue-input:hover{background-color:#00000012!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}\n"] }]
|
|
1210
1227
|
}], ctorParameters: function () { return [{ type: APIService }, { type: ApiWebexService }, { type: WorkspacesService }, { type: WorkspacesMigrationService }, { type: i1.MatDialog }, { type: i1$1.Location }]; }, propDecorators: { host: [{
|
|
1211
1228
|
type: Input
|
|
1212
1229
|
}], token: [{
|