@tuki-io/tuki-widgets 0.0.219-dev.56 → 0.0.219-dev.58
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/README.md +24 -24
- package/esm2020/contact-center/cc-import/cc-import.module.mjs +1 -1
- package/esm2020/contact-center/cc-import/cc-import.service.mjs +1 -1
- package/esm2020/contact-center/cc-import/components/import-contact-center-panel/import-contact-center-panel.component.mjs +3 -3
- package/esm2020/contact-center/cc-import/components/import-contact-center-wizard/import-contact-center-wizard.component.mjs +3 -3
- package/esm2020/contact-center/cc-import/components/import-contact-center-wizard/import-contact-center-wizard.types.mjs +1 -1
- package/esm2020/contact-center/cc-import/constants/cc-import.constants.mjs +1 -1
- package/esm2020/contact-center/cc-import/mock/cc-import.mock.mjs +1 -1
- package/esm2020/contact-center/cc-import/types/cc-import.mjs +1 -1
- package/esm2020/contact-center/cc-import/types/uccx.mjs +1 -1
- package/esm2020/contact-center/cc-readiness/cc-readiness.module.mjs +1 -1
- package/esm2020/contact-center/cc-readiness/cc-readiness.service.mjs +1 -1
- package/esm2020/contact-center/cc-readiness/widgets/licences-requirement/licences-requirement.component.mjs +3 -3
- package/esm2020/contact-center/public-api.mjs +1 -1
- package/esm2020/contact-center/shared/api.endpoints.mjs +1 -1
- package/esm2020/contact-center/shared/components/card/card.component.mjs +3 -3
- package/esm2020/contact-center/shared/dcp-api.service.mjs +1 -1
- package/esm2020/contact-center/shared/shared.module.mjs +1 -1
- package/esm2020/di2mt/widgets/site-upgrade/progress-bar/progress-bar.component.mjs +3 -3
- package/esm2020/di2mt/widgets/site-upgrade/site-upgrade-data-table/site-upgrade-data-table.component.mjs +2 -2
- package/esm2020/di2mt/widgets/upgrade-overview/cards/pending-activation-users/pending-activation-users.component.mjs +17 -17
- package/esm2020/lib/widgets.component.mjs +9 -9
- package/esm2020/lib/widgets.module.mjs +1 -1
- package/esm2020/lib/widgets.service.mjs +1 -1
- package/esm2020/locations/public-api.mjs +1 -1
- package/esm2020/locations/src/app.constants.mjs +1 -1
- package/esm2020/locations/src/location-confirm-dialog/location-confirm-dialog.component.mjs +3 -3
- package/esm2020/locations/src/locations.component.mjs +3 -3
- package/esm2020/locations/src/locations.module.mjs +1 -1
- package/esm2020/locations/src/material.module.mjs +1 -1
- package/esm2020/locations/src/services/api.service.mjs +1 -1
- package/esm2020/locations/src/services/locations.service.mjs +1 -1
- package/esm2020/locations/src/types/location.mjs +1 -1
- package/esm2020/locations/src/utils/app-loader/app-loader.mjs +3 -3
- package/esm2020/meetings/public-api.mjs +1 -1
- package/esm2020/meetings/src/app.constants.mjs +1 -1
- package/esm2020/meetings/src/components/live-meetings/live-meeting/live-meeting.component.mjs +3 -3
- package/esm2020/meetings/src/components/live-meetings/live-meetings.component.mjs +3 -3
- package/esm2020/meetings/src/components/meeting-spaces/meeting-space/meeting-space.component.mjs +3 -3
- package/esm2020/meetings/src/components/meeting-spaces/meeting-spaces.component.mjs +3 -3
- package/esm2020/meetings/src/material.module.mjs +1 -1
- package/esm2020/meetings/src/meetings.component.mjs +3 -3
- package/esm2020/meetings/src/meetings.module.mjs +1 -1
- package/esm2020/meetings/src/services/api.service.mjs +1 -1
- package/esm2020/meetings/src/services/live-meetings.service.mjs +1 -1
- package/esm2020/meetings/src/services/meeting-spaces.service.mjs +1 -1
- package/esm2020/meetings/src/types/live-meeting.mjs +1 -1
- package/esm2020/meetings/src/types/meeting-space.mjs +1 -1
- package/esm2020/meetings/src/utils/app-loader/app-loader.mjs +3 -3
- package/esm2020/public-api.mjs +1 -1
- package/esm2020/user-creation/src/app.constants.mjs +1 -1
- package/esm2020/user-creation/src/classes/notification.mjs +1 -1
- package/esm2020/user-creation/src/classes/site.mjs +1 -1
- package/esm2020/user-creation/src/environments/environment.mjs +1 -1
- package/esm2020/user-creation/src/interfaces/user-creation-wizard.interfaces.mjs +1 -1
- package/esm2020/user-creation/src/shared/components/notification/notification.component.mjs +3 -3
- package/esm2020/user-creation/src/shared/pipes/truncate.pipe.mjs +1 -1
- package/esm2020/user-creation/src/shared/services/notification.service.mjs +1 -1
- package/esm2020/user-creation/src/shared/services/user-creation-api.service.mjs +1 -1
- package/esm2020/user-creation/src/shared/services/utils.mjs +1 -1
- package/esm2020/user-creation/src/utils/app-loader/app-loader.mjs +3 -3
- package/esm2020/user-creation/src/utils/build-savable-end-user.mjs +1 -1
- package/esm2020/user-creation/src/utils/device-default-prefix.mjs +1 -1
- package/esm2020/user-creation/src/utils/device-name-dynamic-tokens.mjs +1 -1
- package/esm2020/user-creation/src/utils/device-name-validation.mjs +1 -1
- package/esm2020/user-creation/src/utils/model.mjs +1 -1
- package/esm2020/user-creation/src/utils/parse-device-name-rule.mjs +1 -1
- package/esm2020/user-creation/src/widgets/user-creation-wizard/user-creation-wizard.component.mjs +3 -3
- package/esm2020/user-device-manage/public-api.mjs +1 -1
- package/esm2020/user-device-manage/src/app.constants.mjs +1 -1
- package/esm2020/user-device-manage/src/associate-lines/associate-lines.component.mjs +3 -3
- package/esm2020/user-device-manage/src/classes/device.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/deviceProfile.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/line-association-interface.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/line-association.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/line-call-info-display.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/line-directory.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/line.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/notification.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/recording-options.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/simplified-user.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/site-defaults.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/translation-pattern.mjs +1 -1
- package/esm2020/user-device-manage/src/classes/types.mjs +1 -1
- package/esm2020/user-device-manage/src/common-functions.mjs +1 -1
- package/esm2020/user-device-manage/src/confirm-dialog/info-dialog.component.mjs +3 -3
- package/esm2020/user-device-manage/src/device-associated-line/associated-line-row/associated-line-row.component.mjs +3 -3
- package/esm2020/user-device-manage/src/device-associated-line/device-associated-line-details-box/device-associated-line-details-box.component.mjs +3 -3
- package/esm2020/user-device-manage/src/device-associated-line/device-associated-line-extension/device-associated-line-extension.component.mjs +3 -3
- package/esm2020/user-device-manage/src/device-associated-line/device-associated-line.component.mjs +1 -1
- package/esm2020/user-device-manage/src/device-info/device-info.component.mjs +3 -3
- package/esm2020/user-device-manage/src/device-manage-widget.component.mjs +3 -3
- package/esm2020/user-device-manage/src/device-settings/device-settings.component.mjs +3 -3
- package/esm2020/user-device-manage/src/environments/environment.mjs +1 -1
- package/esm2020/user-device-manage/src/interseptors/auth.interceptor.mjs +1 -1
- package/esm2020/user-device-manage/src/lazy-loading-select/lazy-loading-select.component.mjs +3 -3
- package/esm2020/user-device-manage/src/line-key-config/line-key-config.component.mjs +3 -3
- package/esm2020/user-device-manage/src/material.module.mjs +1 -1
- package/esm2020/user-device-manage/src/notifications/notification.component.mjs +3 -3
- package/esm2020/user-device-manage/src/pipes/mac-address.pipe.mjs +1 -1
- package/esm2020/user-device-manage/src/services/api.service.mjs +1 -1
- package/esm2020/user-device-manage/src/services/device.service.mjs +1 -1
- package/esm2020/user-device-manage/src/services/dns.service.mjs +1 -1
- package/esm2020/user-device-manage/src/services/line.service.mjs +1 -1
- package/esm2020/user-device-manage/src/services/notification.service.mjs +1 -1
- package/esm2020/user-device-manage/src/services/removeKynFromIBM.service.mjs +1 -1
- package/esm2020/user-device-manage/src/services/site-settings.service.mjs +1 -1
- package/esm2020/user-device-manage/src/services/sorting-utils.service.mjs +1 -1
- package/esm2020/user-device-manage/src/services/user.service.mjs +1 -1
- package/esm2020/user-device-manage/src/services/utils.service.mjs +1 -1
- package/esm2020/user-device-manage/src/services/validation.service.mjs +1 -1
- package/esm2020/user-device-manage/src/utils/app-loader/app-loader.mjs +3 -3
- package/esm2020/user-manage/public-api.mjs +1 -1
- package/esm2020/user-manage/src/app.constants.mjs +2 -1
- package/esm2020/user-manage/src/classes/device.mjs +1 -1
- package/esm2020/user-manage/src/classes/line-association-interface.mjs +1 -1
- package/esm2020/user-manage/src/classes/line-association.mjs +1 -1
- package/esm2020/user-manage/src/classes/line-call-info-display.mjs +1 -1
- package/esm2020/user-manage/src/classes/line-directory.mjs +1 -1
- package/esm2020/user-manage/src/classes/line.mjs +1 -1
- package/esm2020/user-manage/src/classes/notification.mjs +1 -1
- package/esm2020/user-manage/src/classes/pagination.mjs +1 -1
- package/esm2020/user-manage/src/classes/recording-options.mjs +1 -1
- package/esm2020/user-manage/src/classes/simplified-user.mjs +15 -2
- package/esm2020/user-manage/src/classes/table-data.mjs +1 -1
- package/esm2020/user-manage/src/classes/translation-pattern.mjs +1 -1
- package/esm2020/user-manage/src/classes/user-list.mjs +1 -1
- package/esm2020/user-manage/src/common-functions.mjs +1 -1
- package/esm2020/user-manage/src/device-list/device-list.component.mjs +3 -3
- package/esm2020/user-manage/src/device-list/device-row/device-row.component.mjs +3 -3
- package/esm2020/user-manage/src/environments/environment.mjs +1 -1
- package/esm2020/user-manage/src/interseptors/auth.interceptor.mjs +1 -1
- package/esm2020/user-manage/src/lazy-loading-select/lazy-loading-select.component.mjs +9 -5
- package/esm2020/user-manage/src/material.module.mjs +14 -7
- package/esm2020/user-manage/src/notifications/notification.component.mjs +3 -3
- package/esm2020/user-manage/src/removeKynFromIBM.service.mjs +1 -1
- package/esm2020/user-manage/src/services/api.service.mjs +1 -1
- package/esm2020/user-manage/src/services/dcp-api.service.mjs +1 -1
- package/esm2020/user-manage/src/services/dns.service.mjs +1 -1
- package/esm2020/user-manage/src/services/line.service.mjs +1 -1
- package/esm2020/user-manage/src/services/notification.service.mjs +1 -1
- package/esm2020/user-manage/src/services/removeKynFromIBM.service.mjs +1 -1
- package/esm2020/user-manage/src/services/site-settings.service.mjs +11 -4
- package/esm2020/user-manage/src/services/sorting-utils.service.mjs +1 -1
- package/esm2020/user-manage/src/services/user.service.mjs +30 -1
- package/esm2020/user-manage/src/services/utils.service.mjs +1 -1
- package/esm2020/user-manage/src/user-calling/user-calling-extension/user-calling-extension.component.mjs +3 -3
- package/esm2020/user-manage/src/user-info/user-info.component.mjs +3 -3
- package/esm2020/user-manage/src/user-manage-widget.component.mjs +42 -26
- package/esm2020/user-manage/src/user-manage.module.mjs +5 -2
- package/esm2020/user-manage/src/user-summary/user-summary.component.mjs +30 -0
- package/esm2020/user-manage/src/utils/app-loader/app-loader.mjs +3 -3
- package/esm2020/user-manage/src/utils/pagination/pagination.component.mjs +3 -3
- package/esm2020/users-list/public-api.mjs +1 -1
- package/esm2020/users-list/src/app.constants.mjs +1 -1
- package/esm2020/users-list/src/classes/app-location.mjs +1 -1
- package/esm2020/users-list/src/classes/device.mjs +1 -1
- package/esm2020/users-list/src/classes/line.mjs +1 -1
- package/esm2020/users-list/src/classes/move-user.mjs +1 -1
- package/esm2020/users-list/src/classes/notification.mjs +1 -1
- package/esm2020/users-list/src/classes/simlified-user.mjs +1 -1
- package/esm2020/users-list/src/classes/table-data.mjs +1 -1
- package/esm2020/users-list/src/classes/user-list.mjs +1 -1
- package/esm2020/users-list/src/move-user-wizard/move-user-stepper/device-move-user/device-move-user-wizard.component.mjs +3 -3
- package/esm2020/users-list/src/move-user-wizard/move-user-stepper/device-move-user-tab/devices-move-user-wizard-tab.component.mjs +3 -3
- package/esm2020/users-list/src/move-user-wizard/move-user-wizard.component.mjs +3 -3
- package/esm2020/users-list/src/services/api-webex.service.mjs +1 -1
- package/esm2020/users-list/src/services/api.service.mjs +1 -1
- package/esm2020/users-list/src/services/dns.service.mjs +1 -1
- package/esm2020/users-list/src/services/events-communication.service.mjs +1 -1
- package/esm2020/users-list/src/services/notification.service.mjs +1 -1
- package/esm2020/users-list/src/services/removeKynFromIBM.service.mjs +1 -1
- package/esm2020/users-list/src/services/site-settings.service.mjs +1 -1
- package/esm2020/users-list/src/services/user.service.mjs +1 -1
- package/esm2020/users-list/src/user-list-confirm-dialog/user-list-confirm-dialog.component.mjs +3 -3
- package/esm2020/users-list/src/utils/app-loader/app-loader.mjs +3 -3
- package/esm2020/users-list/src/utils/common-functions.mjs +1 -1
- package/esm2020/users-list/src/utils/notifications/notification.component.mjs +3 -3
- package/esm2020/users-list/src/utils/utils.service.mjs +1 -1
- package/esm2020/workspaces/public-api.mjs +1 -1
- package/esm2020/workspaces/src/app.constants.mjs +1 -1
- package/esm2020/workspaces/src/components/workspace-confirm-dialog/workspace-confirm-dialog.component.mjs +3 -3
- package/esm2020/workspaces/src/components/workspace-detail/workspace-detail.component.mjs +3 -3
- package/esm2020/workspaces/src/components/workspace-device-detail/workspace-device-detail.component.mjs +3 -3
- package/esm2020/workspaces/src/components/workspaces-filters/workspaces-filters.component.mjs +3 -3
- package/esm2020/workspaces/src/components/workspaces-table/workspaces-table.component.mjs +3 -3
- package/esm2020/workspaces/src/material.module.mjs +1 -1
- package/esm2020/workspaces/src/services/api-webex.service.mjs +1 -1
- package/esm2020/workspaces/src/services/api.service.mjs +1 -1
- package/esm2020/workspaces/src/services/workspace-detail.service.mjs +1 -1
- package/esm2020/workspaces/src/services/workspaces-migration.service.mjs +1 -1
- package/esm2020/workspaces/src/services/workspaces.service.mjs +25 -8
- package/esm2020/workspaces/src/types/workspace.mjs +1 -1
- package/esm2020/workspaces/src/utils/app-loader/app-loader.mjs +3 -3
- package/esm2020/workspaces/src/utils/device-icon.mjs +1 -1
- package/esm2020/workspaces/src/utils/workspace-name.mjs +1 -1
- package/esm2020/workspaces/src/workspaces.component.mjs +9 -9
- package/esm2020/workspaces/src/workspaces.module.mjs +1 -1
- package/fesm2015/tuki-io-tuki-widgets-contact-center.mjs +8 -8
- package/fesm2015/tuki-io-tuki-widgets-contact-center.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs +20 -20
- package/fesm2015/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-locations.mjs +6 -6
- package/fesm2015/tuki-io-tuki-widgets-locations.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-meetings.mjs +12 -12
- package/fesm2015/tuki-io-tuki-widgets-meetings.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs +6 -6
- package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-user-device-manage.mjs +24 -24
- package/fesm2015/tuki-io-tuki-widgets-user-device-manage.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs +165 -61
- package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-users-list.mjs +12 -12
- package/fesm2015/tuki-io-tuki-widgets-users-list.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets-workspaces.mjs +45 -27
- package/fesm2015/tuki-io-tuki-widgets-workspaces.mjs.map +1 -1
- package/fesm2015/tuki-io-tuki-widgets.mjs +8 -8
- package/fesm2015/tuki-io-tuki-widgets.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-contact-center.mjs +8 -8
- package/fesm2020/tuki-io-tuki-widgets-contact-center.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs +20 -20
- package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-locations.mjs +6 -6
- package/fesm2020/tuki-io-tuki-widgets-locations.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-meetings.mjs +12 -12
- package/fesm2020/tuki-io-tuki-widgets-meetings.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs +6 -6
- package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-device-manage.mjs +24 -24
- package/fesm2020/tuki-io-tuki-widgets-user-device-manage.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs +155 -55
- package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-users-list.mjs +12 -12
- package/fesm2020/tuki-io-tuki-widgets-users-list.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets-workspaces.mjs +44 -27
- package/fesm2020/tuki-io-tuki-widgets-workspaces.mjs.map +1 -1
- package/fesm2020/tuki-io-tuki-widgets.mjs +8 -8
- package/fesm2020/tuki-io-tuki-widgets.mjs.map +1 -1
- package/package.json +1 -1
- package/user-manage/src/app.constants.d.ts +1 -0
- package/user-manage/src/classes/simplified-user.d.ts +6 -0
- package/user-manage/src/material.module.d.ts +2 -1
- package/user-manage/src/services/user.service.d.ts +11 -0
- package/user-manage/src/user-manage-widget.component.d.ts +4 -0
- package/user-manage/src/user-manage.module.d.ts +9 -8
- package/user-manage/src/user-summary/user-summary.component.d.ts +10 -0
|
@@ -114,10 +114,10 @@ class WorkspaceConfirmDialogComponent {
|
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
WorkspaceConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
117
|
-
WorkspaceConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspaceConfirmDialogComponent, selector: "tk-workspace-confirm-dialog", ngImport: i0, template: "<div id=\"tk-workspace-confirm-dialog\" class=\"tk-workspace-confirm-dialog\" aria-labelledby=\"tk-workspace-confirm-dialog-label\" role=\"dialog\">\n <h3 *ngIf=\"title\" class=\"tk-workspace-confirm-dialog__title\">{{ title }}</h3>\n <div mat-dialog-content *ngIf=\"message\" class=\"tk-workspace-confirm-dialog__content\">\n <div class=\"tk-workspace-confirm-dialog__message\" [innerHTML]=\"message\"></div>\n </div>\n <div mat-dialog-actions class=\"tk-workspace-confirm-dialog__actions\">\n <button type=\"button\" class=\"tk-workspace-confirm-dialog__button tk-workspace-confirm-dialog__button--cancel\" (click)=\"onClose(false)\">\n Cancel\n </button>\n <button type=\"button\" class=\"tk-workspace-confirm-dialog__button tk-workspace-confirm-dialog__button--confirm\" (click)=\"onClose(true)\">\n {{ confirmButtonText }}\n </button>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-workspace-confirm-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative;padding:0 0 30px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-confirm-dialog__title{text-align:center;font-weight:600;font-size:16px;margin:0 0 24px}.tk-workspace-confirm-dialog__content{color:#000000b3;font-size:14px;margin:0 auto 15px;padding:0}.tk-workspace-confirm-dialog__message{font-weight:500}.tk-workspace-confirm-dialog__message p{padding:15px 0 0;margin:0}.tk-workspace-confirm-dialog__actions{gap:16px;display:flex;justify-content:flex-end;margin:0}.tk-workspace-confirm-dialog__button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;cursor:pointer}.tk-workspace-confirm-dialog__button--cancel{border:1px solid rgba(0,0,0,.5);color:#000;background:white}.tk-workspace-confirm-dialog__button--confirm{background:black;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
117
|
+
WorkspaceConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspaceConfirmDialogComponent, selector: "tk-workspace-confirm-dialog", ngImport: i0, template: "<div id=\"tk-workspace-confirm-dialog\" class=\"tk-workspace-confirm-dialog\" aria-labelledby=\"tk-workspace-confirm-dialog-label\" role=\"dialog\">\r\n <h3 *ngIf=\"title\" class=\"tk-workspace-confirm-dialog__title\">{{ title }}</h3>\r\n <div mat-dialog-content *ngIf=\"message\" class=\"tk-workspace-confirm-dialog__content\">\r\n <div class=\"tk-workspace-confirm-dialog__message\" [innerHTML]=\"message\"></div>\r\n </div>\r\n <div mat-dialog-actions class=\"tk-workspace-confirm-dialog__actions\">\r\n <button type=\"button\" class=\"tk-workspace-confirm-dialog__button tk-workspace-confirm-dialog__button--cancel\" (click)=\"onClose(false)\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"tk-workspace-confirm-dialog__button tk-workspace-confirm-dialog__button--confirm\" (click)=\"onClose(true)\">\r\n {{ confirmButtonText }}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-workspace-confirm-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative;padding:0 0 30px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-confirm-dialog__title{text-align:center;font-weight:600;font-size:16px;margin:0 0 24px}.tk-workspace-confirm-dialog__content{color:#000000b3;font-size:14px;margin:0 auto 15px;padding:0}.tk-workspace-confirm-dialog__message{font-weight:500}.tk-workspace-confirm-dialog__message p{padding:15px 0 0;margin:0}.tk-workspace-confirm-dialog__actions{gap:16px;display:flex;justify-content:flex-end;margin:0}.tk-workspace-confirm-dialog__button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;cursor:pointer}.tk-workspace-confirm-dialog__button--cancel{border:1px solid rgba(0,0,0,.5);color:#000;background:white}.tk-workspace-confirm-dialog__button--confirm{background:black;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
118
118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceConfirmDialogComponent, decorators: [{
|
|
119
119
|
type: Component,
|
|
120
|
-
args: [{ selector: 'tk-workspace-confirm-dialog', encapsulation: ViewEncapsulation.None, template: "<div id=\"tk-workspace-confirm-dialog\" class=\"tk-workspace-confirm-dialog\" aria-labelledby=\"tk-workspace-confirm-dialog-label\" role=\"dialog\">\n <h3 *ngIf=\"title\" class=\"tk-workspace-confirm-dialog__title\">{{ title }}</h3>\n <div mat-dialog-content *ngIf=\"message\" class=\"tk-workspace-confirm-dialog__content\">\n <div class=\"tk-workspace-confirm-dialog__message\" [innerHTML]=\"message\"></div>\n </div>\n <div mat-dialog-actions class=\"tk-workspace-confirm-dialog__actions\">\n <button type=\"button\" class=\"tk-workspace-confirm-dialog__button tk-workspace-confirm-dialog__button--cancel\" (click)=\"onClose(false)\">\n Cancel\n </button>\n <button type=\"button\" class=\"tk-workspace-confirm-dialog__button tk-workspace-confirm-dialog__button--confirm\" (click)=\"onClose(true)\">\n {{ confirmButtonText }}\n </button>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-workspace-confirm-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative;padding:0 0 30px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-confirm-dialog__title{text-align:center;font-weight:600;font-size:16px;margin:0 0 24px}.tk-workspace-confirm-dialog__content{color:#000000b3;font-size:14px;margin:0 auto 15px;padding:0}.tk-workspace-confirm-dialog__message{font-weight:500}.tk-workspace-confirm-dialog__message p{padding:15px 0 0;margin:0}.tk-workspace-confirm-dialog__actions{gap:16px;display:flex;justify-content:flex-end;margin:0}.tk-workspace-confirm-dialog__button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;cursor:pointer}.tk-workspace-confirm-dialog__button--cancel{border:1px solid rgba(0,0,0,.5);color:#000;background:white}.tk-workspace-confirm-dialog__button--confirm{background:black;color:#fff}\n"] }]
|
|
120
|
+
args: [{ selector: 'tk-workspace-confirm-dialog', encapsulation: ViewEncapsulation.None, template: "<div id=\"tk-workspace-confirm-dialog\" class=\"tk-workspace-confirm-dialog\" aria-labelledby=\"tk-workspace-confirm-dialog-label\" role=\"dialog\">\r\n <h3 *ngIf=\"title\" class=\"tk-workspace-confirm-dialog__title\">{{ title }}</h3>\r\n <div mat-dialog-content *ngIf=\"message\" class=\"tk-workspace-confirm-dialog__content\">\r\n <div class=\"tk-workspace-confirm-dialog__message\" [innerHTML]=\"message\"></div>\r\n </div>\r\n <div mat-dialog-actions class=\"tk-workspace-confirm-dialog__actions\">\r\n <button type=\"button\" class=\"tk-workspace-confirm-dialog__button tk-workspace-confirm-dialog__button--cancel\" (click)=\"onClose(false)\">\r\n Cancel\r\n </button>\r\n <button type=\"button\" class=\"tk-workspace-confirm-dialog__button tk-workspace-confirm-dialog__button--confirm\" (click)=\"onClose(true)\">\r\n {{ confirmButtonText }}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-workspace-confirm-dialog{min-height:150px;width:400px;box-sizing:border-box;position:relative;padding:0 0 30px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-confirm-dialog__title{text-align:center;font-weight:600;font-size:16px;margin:0 0 24px}.tk-workspace-confirm-dialog__content{color:#000000b3;font-size:14px;margin:0 auto 15px;padding:0}.tk-workspace-confirm-dialog__message{font-weight:500}.tk-workspace-confirm-dialog__message p{padding:15px 0 0;margin:0}.tk-workspace-confirm-dialog__actions{gap:16px;display:flex;justify-content:flex-end;margin:0}.tk-workspace-confirm-dialog__button{height:32px;padding:10px 12px;text-align:center;border-radius:50px;box-shadow:none;line-height:11px;border:none;font-size:14px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;cursor:pointer}.tk-workspace-confirm-dialog__button--cancel{border:1px solid rgba(0,0,0,.5);color:#000;background:white}.tk-workspace-confirm-dialog__button--confirm{background:black;color:#fff}\n"] }]
|
|
121
121
|
}], ctorParameters: function () {
|
|
122
122
|
return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
123
123
|
type: Inject,
|
|
@@ -243,6 +243,30 @@ function toStatus(provisioningStatus) {
|
|
|
243
243
|
}
|
|
244
244
|
return provisioningStatus.toLowerCase() === 'active' ? 'active' : 'inactive';
|
|
245
245
|
}
|
|
246
|
+
function toWorkspaceDevices(item, index) {
|
|
247
|
+
var _a;
|
|
248
|
+
if ((_a = item.workspaceDevices) === null || _a === void 0 ? void 0 : _a.length) {
|
|
249
|
+
return item.workspaceDevices.map(workspaceDevice => ({
|
|
250
|
+
id: workspaceDevice.deviceId,
|
|
251
|
+
kind: 'device',
|
|
252
|
+
label: workspaceDevice.model || workspaceDevice.mac,
|
|
253
|
+
model: workspaceDevice.model,
|
|
254
|
+
mac: workspaceDevice.mac,
|
|
255
|
+
}));
|
|
256
|
+
}
|
|
257
|
+
const device = item.device;
|
|
258
|
+
if (!device) {
|
|
259
|
+
return [];
|
|
260
|
+
}
|
|
261
|
+
const model = device.deviceType || device.userDeviceType || undefined;
|
|
262
|
+
return [{
|
|
263
|
+
id: device.pkid || device.webexUUID || device.name || `device-${index}`,
|
|
264
|
+
kind: 'device',
|
|
265
|
+
label: model || device.name || 'Unnamed device',
|
|
266
|
+
model,
|
|
267
|
+
mac: /^SEP/i.test(device.name || '') ? device.name.slice(3) : undefined,
|
|
268
|
+
}];
|
|
269
|
+
}
|
|
246
270
|
function toWorkspace(item, index, isCucm) {
|
|
247
271
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
248
272
|
const device = item.device;
|
|
@@ -254,13 +278,7 @@ function toWorkspace(item, index, isCucm) {
|
|
|
254
278
|
capacity: null,
|
|
255
279
|
location: ((_f = item.site) === null || _f === void 0 ? void 0 : _f.name) || device.siteName || device.location || '',
|
|
256
280
|
siteId: (_h = (_g = item.site) === null || _g === void 0 ? void 0 : _g.id) !== null && _h !== void 0 ? _h : null,
|
|
257
|
-
devices: (item
|
|
258
|
-
id: workspaceDevice.deviceId,
|
|
259
|
-
kind: 'device',
|
|
260
|
-
label: workspaceDevice.model || workspaceDevice.mac,
|
|
261
|
-
model: workspaceDevice.model,
|
|
262
|
-
mac: workspaceDevice.mac,
|
|
263
|
-
})),
|
|
281
|
+
devices: toWorkspaceDevices(item, index),
|
|
264
282
|
scheduling: 'Not set',
|
|
265
283
|
callingLicense: firstDirectoryNumber,
|
|
266
284
|
provisioningType: 'On-premises',
|
|
@@ -406,10 +424,10 @@ class WorkspacesFiltersComponent {
|
|
|
406
424
|
}
|
|
407
425
|
}
|
|
408
426
|
WorkspacesFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspacesFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
409
|
-
WorkspacesFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspacesFiltersComponent, selector: "tk-workspaces-filters", inputs: { resultCount: "resultCount", typeOptions: "typeOptions", locationOptions: "locationOptions" }, outputs: { searchChange: "searchChange", typeChange: "typeChange", locationChange: "locationChange", addWorkspace: "addWorkspace" }, ngImport: i0, template: "<div class=\"tk-workspaces-filters\">\n <div class=\"tk-workspaces-filters__search\">\n <input\n class=\"tk-workspaces-filters__search-input blue-input\"\n type=\"text\"\n placeholder=\"Search\"\n [value]=\"searchTerm\"\n (input)=\"onSearchInputChange($event)\"\n />\n <mat-icon class=\"tk-workspaces-filters__search-icon\">search</mat-icon>\n </div>\n\n <div class=\"tk-workspaces-filters__filters\">\n <span class=\"tk-workspaces-filters__filters-label\">Filters:</span>\n\n <div class=\"tk-workspaces-filters__select-wrap\">\n <select\n class=\"tk-workspaces-filters__select\"\n [ngModel]=\"selectedType\"\n (ngModelChange)=\"onTypeChange($event)\">\n <option value=\"\">General</option>\n <option *ngFor=\"let type of typeOptions\" [value]=\"type\">{{ type }}</option>\n </select>\n <mat-icon class=\"tk-workspaces-filters__select-icon\">expand_more</mat-icon>\n </div>\n\n <div class=\"tk-workspaces-filters__select-wrap\">\n <select\n class=\"tk-workspaces-filters__select\"\n [ngModel]=\"selectedLocation\"\n (ngModelChange)=\"onLocationChange($event)\">\n <option value=\"\">Location</option>\n <option *ngFor=\"let location of locationOptions\" [value]=\"location\">{{ location }}</option>\n </select>\n <mat-icon class=\"tk-workspaces-filters__select-icon\">expand_more</mat-icon>\n </div>\n </div>\n\n <span class=\"tk-workspaces-filters__count\">{{ resultCount }} workspace{{ resultCount === 1 ? '' : 's' }} in total</span>\n\n <button type=\"button\" class=\"tk-workspaces-filters__add-button\" [matMenuTriggerFor]=\"addMenu\">\n Add workspace\n <mat-icon class=\"tk-workspaces-filters__add-icon\">expand_more</mat-icon>\n </button>\n\n <mat-menu #addMenu=\"matMenu\">\n <button type=\"button\" mat-menu-item (click)=\"onAddWorkspace()\">Add workspace</button>\n <button type=\"button\" mat-menu-item disabled>Import workspaces</button>\n </mat-menu>\n</div>\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-filters{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;font-size:.875rem;font-weight:400;color:#000000f2}.tk-workspaces-filters__search{position:relative;min-width:14rem}.tk-workspaces-filters__search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-workspaces-filters__search-input{width:100%;height:34px;padding:6px 12px 6px 44px;border-radius:.5rem;outline:none;box-sizing:border-box;font-family:inherit;font-size:1rem;color:#000000f2;background:#fff}.tk-workspaces-filters__search-input::placeholder{color:#0006}.tk-workspaces-filters__filters{display:flex;align-items:center;gap:.5rem}.tk-workspaces-filters__filters-label{font-size:.875rem;color:#000000f2;white-space:nowrap}.tk-workspaces-filters__select-wrap{position:relative;display:flex;align-items:center}.tk-workspaces-filters__select{appearance:none;height:34px;padding:6px 32px 6px 12px;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:1rem;color:#222;cursor:pointer;box-sizing:border-box}.tk-workspaces-filters__select:focus{outline:none;border-color:#0006}.tk-workspaces-filters__select-icon{position:absolute;right:.375rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-workspaces-filters__count{margin-left:auto;font-size:.875rem;color:#0009;white-space:nowrap;font-weight:400;flex:1}.tk-workspaces-filters__add-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer;white-space:nowrap}.tk-workspaces-filters__add-button:hover{background:#222}.tk-workspaces-filters__add-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
|
|
427
|
+
WorkspacesFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspacesFiltersComponent, selector: "tk-workspaces-filters", inputs: { resultCount: "resultCount", typeOptions: "typeOptions", locationOptions: "locationOptions" }, outputs: { searchChange: "searchChange", typeChange: "typeChange", locationChange: "locationChange", addWorkspace: "addWorkspace" }, ngImport: i0, template: "<div class=\"tk-workspaces-filters\">\r\n <div class=\"tk-workspaces-filters__search\">\r\n <input\r\n class=\"tk-workspaces-filters__search-input blue-input\"\r\n type=\"text\"\r\n placeholder=\"Search\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchInputChange($event)\"\r\n />\r\n <mat-icon class=\"tk-workspaces-filters__search-icon\">search</mat-icon>\r\n </div>\r\n\r\n <div class=\"tk-workspaces-filters__filters\">\r\n <span class=\"tk-workspaces-filters__filters-label\">Filters:</span>\r\n\r\n <div class=\"tk-workspaces-filters__select-wrap\">\r\n <select\r\n class=\"tk-workspaces-filters__select\"\r\n [ngModel]=\"selectedType\"\r\n (ngModelChange)=\"onTypeChange($event)\">\r\n <option value=\"\">General</option>\r\n <option *ngFor=\"let type of typeOptions\" [value]=\"type\">{{ type }}</option>\r\n </select>\r\n <mat-icon class=\"tk-workspaces-filters__select-icon\">expand_more</mat-icon>\r\n </div>\r\n\r\n <div class=\"tk-workspaces-filters__select-wrap\">\r\n <select\r\n class=\"tk-workspaces-filters__select\"\r\n [ngModel]=\"selectedLocation\"\r\n (ngModelChange)=\"onLocationChange($event)\">\r\n <option value=\"\">Location</option>\r\n <option *ngFor=\"let location of locationOptions\" [value]=\"location\">{{ location }}</option>\r\n </select>\r\n <mat-icon class=\"tk-workspaces-filters__select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <span class=\"tk-workspaces-filters__count\">{{ resultCount }} workspace{{ resultCount === 1 ? '' : 's' }} in total</span>\r\n\r\n <button type=\"button\" class=\"tk-workspaces-filters__add-button\" [matMenuTriggerFor]=\"addMenu\">\r\n Add workspace\r\n <mat-icon class=\"tk-workspaces-filters__add-icon\">expand_more</mat-icon>\r\n </button>\r\n\r\n <mat-menu #addMenu=\"matMenu\">\r\n <button type=\"button\" mat-menu-item (click)=\"onAddWorkspace()\">Add workspace</button>\r\n <button type=\"button\" mat-menu-item disabled>Import workspaces</button>\r\n </mat-menu>\r\n</div>\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-filters{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;font-size:.875rem;font-weight:400;color:#000000f2}.tk-workspaces-filters__search{position:relative;min-width:14rem}.tk-workspaces-filters__search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-workspaces-filters__search-input{width:100%;height:34px;padding:6px 12px 6px 44px;border-radius:.5rem;outline:none;box-sizing:border-box;font-family:inherit;font-size:1rem;color:#000000f2;background:#fff}.tk-workspaces-filters__search-input::placeholder{color:#0006}.tk-workspaces-filters__filters{display:flex;align-items:center;gap:.5rem}.tk-workspaces-filters__filters-label{font-size:.875rem;color:#000000f2;white-space:nowrap}.tk-workspaces-filters__select-wrap{position:relative;display:flex;align-items:center}.tk-workspaces-filters__select{appearance:none;height:34px;padding:6px 32px 6px 12px;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:1rem;color:#222;cursor:pointer;box-sizing:border-box}.tk-workspaces-filters__select:focus{outline:none;border-color:#0006}.tk-workspaces-filters__select-icon{position:absolute;right:.375rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-workspaces-filters__count{margin-left:auto;font-size:.875rem;color:#0009;white-space:nowrap;font-weight:400;flex:1}.tk-workspaces-filters__add-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer;white-space:nowrap}.tk-workspaces-filters__add-button:hover{background:#222}.tk-workspaces-filters__add-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
|
|
410
428
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspacesFiltersComponent, decorators: [{
|
|
411
429
|
type: Component,
|
|
412
|
-
args: [{ selector: 'tk-workspaces-filters', template: "<div class=\"tk-workspaces-filters\">\n <div class=\"tk-workspaces-filters__search\">\n <input\n class=\"tk-workspaces-filters__search-input blue-input\"\n type=\"text\"\n placeholder=\"Search\"\n [value]=\"searchTerm\"\n (input)=\"onSearchInputChange($event)\"\n />\n <mat-icon class=\"tk-workspaces-filters__search-icon\">search</mat-icon>\n </div>\n\n <div class=\"tk-workspaces-filters__filters\">\n <span class=\"tk-workspaces-filters__filters-label\">Filters:</span>\n\n <div class=\"tk-workspaces-filters__select-wrap\">\n <select\n class=\"tk-workspaces-filters__select\"\n [ngModel]=\"selectedType\"\n (ngModelChange)=\"onTypeChange($event)\">\n <option value=\"\">General</option>\n <option *ngFor=\"let type of typeOptions\" [value]=\"type\">{{ type }}</option>\n </select>\n <mat-icon class=\"tk-workspaces-filters__select-icon\">expand_more</mat-icon>\n </div>\n\n <div class=\"tk-workspaces-filters__select-wrap\">\n <select\n class=\"tk-workspaces-filters__select\"\n [ngModel]=\"selectedLocation\"\n (ngModelChange)=\"onLocationChange($event)\">\n <option value=\"\">Location</option>\n <option *ngFor=\"let location of locationOptions\" [value]=\"location\">{{ location }}</option>\n </select>\n <mat-icon class=\"tk-workspaces-filters__select-icon\">expand_more</mat-icon>\n </div>\n </div>\n\n <span class=\"tk-workspaces-filters__count\">{{ resultCount }} workspace{{ resultCount === 1 ? '' : 's' }} in total</span>\n\n <button type=\"button\" class=\"tk-workspaces-filters__add-button\" [matMenuTriggerFor]=\"addMenu\">\n Add workspace\n <mat-icon class=\"tk-workspaces-filters__add-icon\">expand_more</mat-icon>\n </button>\n\n <mat-menu #addMenu=\"matMenu\">\n <button type=\"button\" mat-menu-item (click)=\"onAddWorkspace()\">Add workspace</button>\n <button type=\"button\" mat-menu-item disabled>Import workspaces</button>\n </mat-menu>\n</div>\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-filters{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;font-size:.875rem;font-weight:400;color:#000000f2}.tk-workspaces-filters__search{position:relative;min-width:14rem}.tk-workspaces-filters__search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-workspaces-filters__search-input{width:100%;height:34px;padding:6px 12px 6px 44px;border-radius:.5rem;outline:none;box-sizing:border-box;font-family:inherit;font-size:1rem;color:#000000f2;background:#fff}.tk-workspaces-filters__search-input::placeholder{color:#0006}.tk-workspaces-filters__filters{display:flex;align-items:center;gap:.5rem}.tk-workspaces-filters__filters-label{font-size:.875rem;color:#000000f2;white-space:nowrap}.tk-workspaces-filters__select-wrap{position:relative;display:flex;align-items:center}.tk-workspaces-filters__select{appearance:none;height:34px;padding:6px 32px 6px 12px;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:1rem;color:#222;cursor:pointer;box-sizing:border-box}.tk-workspaces-filters__select:focus{outline:none;border-color:#0006}.tk-workspaces-filters__select-icon{position:absolute;right:.375rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-workspaces-filters__count{margin-left:auto;font-size:.875rem;color:#0009;white-space:nowrap;font-weight:400;flex:1}.tk-workspaces-filters__add-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer;white-space:nowrap}.tk-workspaces-filters__add-button:hover{background:#222}.tk-workspaces-filters__add-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}\n"] }]
|
|
430
|
+
args: [{ selector: 'tk-workspaces-filters', template: "<div class=\"tk-workspaces-filters\">\r\n <div class=\"tk-workspaces-filters__search\">\r\n <input\r\n class=\"tk-workspaces-filters__search-input blue-input\"\r\n type=\"text\"\r\n placeholder=\"Search\"\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchInputChange($event)\"\r\n />\r\n <mat-icon class=\"tk-workspaces-filters__search-icon\">search</mat-icon>\r\n </div>\r\n\r\n <div class=\"tk-workspaces-filters__filters\">\r\n <span class=\"tk-workspaces-filters__filters-label\">Filters:</span>\r\n\r\n <div class=\"tk-workspaces-filters__select-wrap\">\r\n <select\r\n class=\"tk-workspaces-filters__select\"\r\n [ngModel]=\"selectedType\"\r\n (ngModelChange)=\"onTypeChange($event)\">\r\n <option value=\"\">General</option>\r\n <option *ngFor=\"let type of typeOptions\" [value]=\"type\">{{ type }}</option>\r\n </select>\r\n <mat-icon class=\"tk-workspaces-filters__select-icon\">expand_more</mat-icon>\r\n </div>\r\n\r\n <div class=\"tk-workspaces-filters__select-wrap\">\r\n <select\r\n class=\"tk-workspaces-filters__select\"\r\n [ngModel]=\"selectedLocation\"\r\n (ngModelChange)=\"onLocationChange($event)\">\r\n <option value=\"\">Location</option>\r\n <option *ngFor=\"let location of locationOptions\" [value]=\"location\">{{ location }}</option>\r\n </select>\r\n <mat-icon class=\"tk-workspaces-filters__select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <span class=\"tk-workspaces-filters__count\">{{ resultCount }} workspace{{ resultCount === 1 ? '' : 's' }} in total</span>\r\n\r\n <button type=\"button\" class=\"tk-workspaces-filters__add-button\" [matMenuTriggerFor]=\"addMenu\">\r\n Add workspace\r\n <mat-icon class=\"tk-workspaces-filters__add-icon\">expand_more</mat-icon>\r\n </button>\r\n\r\n <mat-menu #addMenu=\"matMenu\">\r\n <button type=\"button\" mat-menu-item (click)=\"onAddWorkspace()\">Add workspace</button>\r\n <button type=\"button\" mat-menu-item disabled>Import workspaces</button>\r\n </mat-menu>\r\n</div>\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-filters{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;font-size:.875rem;font-weight:400;color:#000000f2}.tk-workspaces-filters__search{position:relative;min-width:14rem}.tk-workspaces-filters__search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-workspaces-filters__search-input{width:100%;height:34px;padding:6px 12px 6px 44px;border-radius:.5rem;outline:none;box-sizing:border-box;font-family:inherit;font-size:1rem;color:#000000f2;background:#fff}.tk-workspaces-filters__search-input::placeholder{color:#0006}.tk-workspaces-filters__filters{display:flex;align-items:center;gap:.5rem}.tk-workspaces-filters__filters-label{font-size:.875rem;color:#000000f2;white-space:nowrap}.tk-workspaces-filters__select-wrap{position:relative;display:flex;align-items:center}.tk-workspaces-filters__select{appearance:none;height:34px;padding:6px 32px 6px 12px;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:1rem;color:#222;cursor:pointer;box-sizing:border-box}.tk-workspaces-filters__select:focus{outline:none;border-color:#0006}.tk-workspaces-filters__select-icon{position:absolute;right:.375rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-workspaces-filters__count{margin-left:auto;font-size:.875rem;color:#0009;white-space:nowrap;font-weight:400;flex:1}.tk-workspaces-filters__add-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer;white-space:nowrap}.tk-workspaces-filters__add-button:hover{background:#222}.tk-workspaces-filters__add-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}\n"] }]
|
|
413
431
|
}], propDecorators: { resultCount: [{
|
|
414
432
|
type: Input
|
|
415
433
|
}], typeOptions: [{
|
|
@@ -529,10 +547,10 @@ class WorkspacesTableComponent {
|
|
|
529
547
|
}
|
|
530
548
|
}
|
|
531
549
|
WorkspacesTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspacesTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
532
|
-
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>\n\n<div class=\"tk-workspaces-table__wrapper\">\n <table class=\"tk-workspaces-table__table\">\n <thead>\n <tr>\n <th class=\"tk-workspaces-table__checkbox-cell\">\n <input type=\"checkbox\" [checked]=\"allSelected\" [indeterminate]=\"someSelected\" (change)=\"toggleAll()\" />\n </th>\n <th>Name</th>\n <th>Devices</th>\n <th>Scheduling</th>\n <th>Calling</th>\n <th>Provisioning Type</th>\n <th>Status</th>\n <th class=\"tk-workspaces-table__settings-cell\">\n <mat-icon class=\"tk-workspaces-table__settings-icon\">settings</mat-icon>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"let workspace of workspaces\"\n [class.tk-workspaces-table__row--selected]=\"isSelected(workspace.id)\"\n [class.tk-workspaces-table__row--disabled]=\"!canOpenWorkspace(workspace)\">\n <td class=\"tk-workspaces-table__checkbox-cell\">\n <input type=\"checkbox\" [checked]=\"isSelected(workspace.id)\" (change)=\"toggleRow(workspace.id)\" />\n </td>\n <td class=\"tk-workspaces-table__name-cell\" (click)=\"onOpenWorkspace(workspace)\">\n <div class=\"tk-workspaces-table__name-wrapper\">\n <span class=\"tk-workspaces-table__name-icon\">\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n </span>\n <div class=\"tk-workspaces-table__name-info\">\n <a href=\"javascript:void(0)\" class=\"tk-workspaces-table__name-link\">{{ getDisplayName(workspace) }}</a>\n <div class=\"tk-workspaces-table__name-meta\">\n <span class=\"tk-workspaces-table__name-type\">{{ workspace.typeLabel }}</span>\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\n <span class=\"tk-workspaces-table__name-capacity\">{{ workspace.capacity ?? 'No capacity' }}</span>\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\n <!-- <mat-icon class=\"tk-workspaces-table__meta-icon\">location_on</mat-icon> -->\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\n <a\n *ngIf=\"workspace.location; else noLocation\"\n href=\"javascript:void(0)\"\n class=\"tk-workspaces-table__location-link\">{{ workspace.location }}</a>\n <ng-template #noLocation>\n <span class=\"tk-workspaces-table__location-empty\">No location</span>\n </ng-template>\n </div>\n </div>\n </div>\n </td>\n <td>\n <div class=\"tk-workspaces-table__devices\">\n <ng-container *ngIf=\"workspace.devices.length; else noDevices\">\n <span *ngFor=\"let device of workspace.devices\" class=\"tk-workspaces-table__device-card\">\n <img\n class=\"tk-workspaces-table__device-icon\"\n [src]=\"getDeviceIcon(device.model)\"\n [alt]=\"device.label\" />\n <div class=\"tk-workspaces-table__device-tooltip\" (click)=\"$event.stopPropagation()\">\n <div class=\"tk-workspaces-table__device-tooltip-title\">{{ device.label }}</div>\n <div class=\"tk-workspaces-table__device-tooltip-status\">\n <span\n class=\"tk-workspaces-table__device-tooltip-status-dot\"\n [class.tk-workspaces-table__device-tooltip-status-dot--active]=\"workspace.status === 'active'\"></span>\n {{ workspace.statusLabel }}\n </div>\n <div class=\"tk-workspaces-table__device-tooltip-divider\"></div>\n <div class=\"tk-workspaces-table__device-tooltip-mac\">\n <span class=\"tk-workspaces-table__device-tooltip-mac-label\">MAC address</span>\n <span class=\"tk-workspaces-table__device-tooltip-mac-value\">{{ device.mac }}</span>\n <button\n *ngIf=\"device.mac\"\n type=\"button\"\n class=\"tk-workspaces-table__device-tooltip-copy\"\n (click)=\"onCopyMac(device.mac)\">\n <img class=\"tk-workspaces-table__device-tooltip-copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\n </button>\n </div>\n </div>\n </span>\n </ng-container>\n <!-- <ng-container *ngFor=\"let device of workspace.devices\">\n <span *ngIf=\"device && device.model else noDevice\" class=\"tk-workspaces-table__device-card\" [title]=\"device.label\">\n <img\n class=\"tk-workspaces-table__device-icon\"\n [src]=\"getDeviceIcon(device.model)\"\n [alt]=\"device.label\" />\n </span>\n </ng-container> -->\n <ng-template #noDevices>\n <button\n type=\"button\"\n class=\"tk-workspaces-table__device-add\"\n (click)=\"onAddDevice(workspace, $event)\">\n <span class=\"tk-workspaces-table__device-add-label\">\n <img\n class=\"tk-workspaces-table__device-add-icon\"\n src=\"assets/icons/multipled-devices-regular.svg\"\n alt=\"\" />\n Add device\n </span>\n </button>\n </ng-template>\n </div>\n </td>\n <td>{{ workspace.scheduling }}</td>\n <td class=\"tk-workspaces-table__calling-cell\">\n <span class=\"tk-workspaces-table__calling-content\">\n <img class=\"tk-workspaces-table__calling-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\n <span class=\"tk-workspaces-table__calling-text\" title=\"Cisco Webex Calling Professional Workspace\">Cisco Webex Calling Professional Workspace</span>\n </span>\n </td>\n <td>\n <div *ngIf=\"workspace.isHybrid\" class=\"tk-workspaces-table__provisioning-icons\">\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\n ><img\n src=\"assets/icons/webex.svg\"\n [matTooltip]=\"'Webex Calling'\"\n matTooltipPosition=\"right\"\n width=\"20\"\n alt=\"\"\n /></span>\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\n ><img\n src=\"assets/icons/di_cloud_24.svg\"\n [matTooltip]=\"'Webex Calling DI'\"\n matTooltipPosition=\"right\"\n width=\"20\"\n alt=\"\"\n /></span>\n </div>\n <ng-container *ngIf=\"!workspace.isHybrid\">\n <span *ngIf=\"workspace.device.cucmId != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\n ><img\n src=\"assets/icons/di_cloud_24.svg\"\n [matTooltip]=\"'Webex Calling DI'\"\n matTooltipPosition=\"right\"\n width=\"20\"\n alt=\"\"\n /></span>\n <span *ngIf=\"workspace.device.webexUUID != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\n ><img\n src=\"assets/icons/webex.svg\"\n [matTooltip]=\"'Webex Calling'\"\n matTooltipPosition=\"right\"\n width=\"20\"\n alt=\"\"\n /></span>\n </ng-container>\n </td>\n <td>\n <span class=\"tk-workspaces-table__status\">\n <span\n class=\"tk-workspaces-table__status-dot\"\n [class.tk-workspaces-table__status-dot--hybrid]=\"workspace.isHybrid\"\n [class.tk-workspaces-table__status-dot--active]=\"!workspace.isHybrid\"></span>\n {{ workspace.isHybrid ? 'Hybrid' : 'Active' }}\n </span>\n </td>\n <td class=\"tk-workspaces-table__actions-cell\">\n <mat-progress-spinner\n *ngIf=\"isPending(workspace.id)\"\n class=\"tk-workspaces-table__actions-spinner\"\n [diameter]=\"20\"\n strokeWidth=\"2\"\n mode=\"indeterminate\">\n </mat-progress-spinner>\n <button\n *ngIf=\"!isPending(workspace.id)\"\n type=\"button\"\n class=\"tk-workspaces-table__actions-button\"\n [matMenuTriggerFor]=\"rowMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #rowMenu=\"matMenu\">\n <button\n type=\"button\"\n mat-menu-item\n [disabled]=\"isMoveToMTDisabled(workspace)\"\n (click)=\"licenseWithHybrid.emit(workspace)\">\n License with Cloud Intelligence\n </button>\n <button\n type=\"button\"\n mat-menu-item\n [disabled]=\"isMoveToMTDisabled(workspace)\"\n (click)=\"migrateToMT.emit(workspace)\">\n Migrate Workspace To Webex Calling\n </button>\n <button\n type=\"button\"\n mat-menu-item\n [disabled]=\"isEnableWebexCallingDisabled(workspace)\"\n (click)=\"enableWebexCalling.emit(workspace)\">\n Enable Webex Calling\n </button>\n <button\n type=\"button\"\n mat-menu-item\n [disabled]=\"isMigrateToUCMDisabled(workspace)\"\n (click)=\"migrateToUCM.emit(workspace)\">\n Migrate User to UCM\n </button>\n </mat-menu>\n </td>\n </tr>\n <tr *ngIf=\"!workspaces.length\">\n <td [attr.colspan]=\"8\" class=\"tk-workspaces-table__empty\">No workspaces to display.</td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<mat-paginator\n class=\"tk-workspaces-table__paginator\"\n [length]=\"total\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPage($event)\">\n</mat-paginator>\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%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%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%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%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%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%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%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%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%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%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%3Cdefs%3E%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%3Cstop stop-color%3D%22white%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%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%3Cstop stop-color%3D%22white%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%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%3Cstop stop-color%3D%22white%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%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%3Cstop stop-color%3D%22white%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%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%3Cstop stop-color%3D%22white%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\");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"] }] });
|
|
550
|
+
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"] }] });
|
|
533
551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspacesTableComponent, decorators: [{
|
|
534
552
|
type: Component,
|
|
535
|
-
args: [{ selector: 'tk-workspaces-table', template: "<div class=\"tk-workspaces-table__bulk-bar\">Select one or more workspaces for bulk actions</div>\n\n<div class=\"tk-workspaces-table__wrapper\">\n <table class=\"tk-workspaces-table__table\">\n <thead>\n <tr>\n <th class=\"tk-workspaces-table__checkbox-cell\">\n <input type=\"checkbox\" [checked]=\"allSelected\" [indeterminate]=\"someSelected\" (change)=\"toggleAll()\" />\n </th>\n <th>Name</th>\n <th>Devices</th>\n <th>Scheduling</th>\n <th>Calling</th>\n <th>Provisioning Type</th>\n <th>Status</th>\n <th class=\"tk-workspaces-table__settings-cell\">\n <mat-icon class=\"tk-workspaces-table__settings-icon\">settings</mat-icon>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"let workspace of workspaces\"\n [class.tk-workspaces-table__row--selected]=\"isSelected(workspace.id)\"\n [class.tk-workspaces-table__row--disabled]=\"!canOpenWorkspace(workspace)\">\n <td class=\"tk-workspaces-table__checkbox-cell\">\n <input type=\"checkbox\" [checked]=\"isSelected(workspace.id)\" (change)=\"toggleRow(workspace.id)\" />\n </td>\n <td class=\"tk-workspaces-table__name-cell\" (click)=\"onOpenWorkspace(workspace)\">\n <div class=\"tk-workspaces-table__name-wrapper\">\n <span class=\"tk-workspaces-table__name-icon\">\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n </span>\n <div class=\"tk-workspaces-table__name-info\">\n <a href=\"javascript:void(0)\" class=\"tk-workspaces-table__name-link\">{{ getDisplayName(workspace) }}</a>\n <div class=\"tk-workspaces-table__name-meta\">\n <span class=\"tk-workspaces-table__name-type\">{{ workspace.typeLabel }}</span>\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\n <span class=\"tk-workspaces-table__name-capacity\">{{ workspace.capacity ?? 'No capacity' }}</span>\n <span class=\"tk-workspaces-table__meta-sep\">·</span>\n <!-- <mat-icon class=\"tk-workspaces-table__meta-icon\">location_on</mat-icon> -->\n <img class=\"tk-workspaces-table__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\n <a\n *ngIf=\"workspace.location; else noLocation\"\n href=\"javascript:void(0)\"\n class=\"tk-workspaces-table__location-link\">{{ workspace.location }}</a>\n <ng-template #noLocation>\n <span class=\"tk-workspaces-table__location-empty\">No location</span>\n </ng-template>\n </div>\n </div>\n </div>\n </td>\n <td>\n <div class=\"tk-workspaces-table__devices\">\n <ng-container *ngIf=\"workspace.devices.length; else noDevices\">\n <span *ngFor=\"let device of workspace.devices\" class=\"tk-workspaces-table__device-card\">\n <img\n class=\"tk-workspaces-table__device-icon\"\n [src]=\"getDeviceIcon(device.model)\"\n [alt]=\"device.label\" />\n <div class=\"tk-workspaces-table__device-tooltip\" (click)=\"$event.stopPropagation()\">\n <div class=\"tk-workspaces-table__device-tooltip-title\">{{ device.label }}</div>\n <div class=\"tk-workspaces-table__device-tooltip-status\">\n <span\n class=\"tk-workspaces-table__device-tooltip-status-dot\"\n [class.tk-workspaces-table__device-tooltip-status-dot--active]=\"workspace.status === 'active'\"></span>\n {{ workspace.statusLabel }}\n </div>\n <div class=\"tk-workspaces-table__device-tooltip-divider\"></div>\n <div class=\"tk-workspaces-table__device-tooltip-mac\">\n <span class=\"tk-workspaces-table__device-tooltip-mac-label\">MAC address</span>\n <span class=\"tk-workspaces-table__device-tooltip-mac-value\">{{ device.mac }}</span>\n <button\n *ngIf=\"device.mac\"\n type=\"button\"\n class=\"tk-workspaces-table__device-tooltip-copy\"\n (click)=\"onCopyMac(device.mac)\">\n <img class=\"tk-workspaces-table__device-tooltip-copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\n </button>\n </div>\n </div>\n </span>\n </ng-container>\n <!-- <ng-container *ngFor=\"let device of workspace.devices\">\n <span *ngIf=\"device && device.model else noDevice\" class=\"tk-workspaces-table__device-card\" [title]=\"device.label\">\n <img\n class=\"tk-workspaces-table__device-icon\"\n [src]=\"getDeviceIcon(device.model)\"\n [alt]=\"device.label\" />\n </span>\n </ng-container> -->\n <ng-template #noDevices>\n <button\n type=\"button\"\n class=\"tk-workspaces-table__device-add\"\n (click)=\"onAddDevice(workspace, $event)\">\n <span class=\"tk-workspaces-table__device-add-label\">\n <img\n class=\"tk-workspaces-table__device-add-icon\"\n src=\"assets/icons/multipled-devices-regular.svg\"\n alt=\"\" />\n Add device\n </span>\n </button>\n </ng-template>\n </div>\n </td>\n <td>{{ workspace.scheduling }}</td>\n <td class=\"tk-workspaces-table__calling-cell\">\n <span class=\"tk-workspaces-table__calling-content\">\n <img class=\"tk-workspaces-table__calling-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\n <span class=\"tk-workspaces-table__calling-text\" title=\"Cisco Webex Calling Professional Workspace\">Cisco Webex Calling Professional Workspace</span>\n </span>\n </td>\n <td>\n <div *ngIf=\"workspace.isHybrid\" class=\"tk-workspaces-table__provisioning-icons\">\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\n ><img\n src=\"assets/icons/webex.svg\"\n [matTooltip]=\"'Webex Calling'\"\n matTooltipPosition=\"right\"\n width=\"20\"\n alt=\"\"\n /></span>\n <span class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\n ><img\n src=\"assets/icons/di_cloud_24.svg\"\n [matTooltip]=\"'Webex Calling DI'\"\n matTooltipPosition=\"right\"\n width=\"20\"\n alt=\"\"\n /></span>\n </div>\n <ng-container *ngIf=\"!workspace.isHybrid\">\n <span *ngIf=\"workspace.device.cucmId != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'di'); $event.stopPropagation()\"\n ><img\n src=\"assets/icons/di_cloud_24.svg\"\n [matTooltip]=\"'Webex Calling DI'\"\n matTooltipPosition=\"right\"\n width=\"20\"\n alt=\"\"\n /></span>\n <span *ngIf=\"workspace.device.webexUUID != null\" class=\"icon-wrapper\" (click)=\"onOpenWorkspace(workspace, 'webex'); $event.stopPropagation()\"\n ><img\n src=\"assets/icons/webex.svg\"\n [matTooltip]=\"'Webex Calling'\"\n matTooltipPosition=\"right\"\n width=\"20\"\n alt=\"\"\n /></span>\n </ng-container>\n </td>\n <td>\n <span class=\"tk-workspaces-table__status\">\n <span\n class=\"tk-workspaces-table__status-dot\"\n [class.tk-workspaces-table__status-dot--hybrid]=\"workspace.isHybrid\"\n [class.tk-workspaces-table__status-dot--active]=\"!workspace.isHybrid\"></span>\n {{ workspace.isHybrid ? 'Hybrid' : 'Active' }}\n </span>\n </td>\n <td class=\"tk-workspaces-table__actions-cell\">\n <mat-progress-spinner\n *ngIf=\"isPending(workspace.id)\"\n class=\"tk-workspaces-table__actions-spinner\"\n [diameter]=\"20\"\n strokeWidth=\"2\"\n mode=\"indeterminate\">\n </mat-progress-spinner>\n <button\n *ngIf=\"!isPending(workspace.id)\"\n type=\"button\"\n class=\"tk-workspaces-table__actions-button\"\n [matMenuTriggerFor]=\"rowMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #rowMenu=\"matMenu\">\n <button\n type=\"button\"\n mat-menu-item\n [disabled]=\"isMoveToMTDisabled(workspace)\"\n (click)=\"licenseWithHybrid.emit(workspace)\">\n License with Cloud Intelligence\n </button>\n <button\n type=\"button\"\n mat-menu-item\n [disabled]=\"isMoveToMTDisabled(workspace)\"\n (click)=\"migrateToMT.emit(workspace)\">\n Migrate Workspace To Webex Calling\n </button>\n <button\n type=\"button\"\n mat-menu-item\n [disabled]=\"isEnableWebexCallingDisabled(workspace)\"\n (click)=\"enableWebexCalling.emit(workspace)\">\n Enable Webex Calling\n </button>\n <button\n type=\"button\"\n mat-menu-item\n [disabled]=\"isMigrateToUCMDisabled(workspace)\"\n (click)=\"migrateToUCM.emit(workspace)\">\n Migrate User to UCM\n </button>\n </mat-menu>\n </td>\n </tr>\n <tr *ngIf=\"!workspaces.length\">\n <td [attr.colspan]=\"8\" class=\"tk-workspaces-table__empty\">No workspaces to display.</td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<mat-paginator\n class=\"tk-workspaces-table__paginator\"\n [length]=\"total\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPage($event)\">\n</mat-paginator>\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%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%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%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%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%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%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%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%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%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%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%3Cdefs%3E%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%3Cstop stop-color%3D%22white%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%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%3Cstop stop-color%3D%22white%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%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%3Cstop stop-color%3D%22white%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%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%3Cstop stop-color%3D%22white%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%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%3Cstop stop-color%3D%22white%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22white%22 stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\");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"] }]
|
|
553
|
+
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"] }]
|
|
536
554
|
}], propDecorators: { workspaces: [{
|
|
537
555
|
type: Input
|
|
538
556
|
}], total: [{
|
|
@@ -736,10 +754,10 @@ class AppLoaderComponent {
|
|
|
736
754
|
}
|
|
737
755
|
}
|
|
738
756
|
AppLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
739
|
-
AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\n <mat-progress-spinner\n class=\"page-spinner\"\n mode=\"indeterminate\"\n [diameter]=\"70\"\n strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"], dependencies: [{ kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
757
|
+
AppLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AppLoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"], dependencies: [{ kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
740
758
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppLoaderComponent, decorators: [{
|
|
741
759
|
type: Component,
|
|
742
|
-
args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\n <mat-progress-spinner\n class=\"page-spinner\"\n mode=\"indeterminate\"\n [diameter]=\"70\"\n strokeWidth=\"3\"></mat-progress-spinner>\n</div>\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"] }]
|
|
760
|
+
args: [{ selector: 'app-loader', encapsulation: ViewEncapsulation.None, template: "<div class=\"overlay\">\r\n <mat-progress-spinner\r\n class=\"page-spinner\"\r\n mode=\"indeterminate\"\r\n [diameter]=\"70\"\r\n strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff3;z-index:200}.mat-progress-spinner circle,.mat-spinner circle{stroke:#000!important}\n"] }]
|
|
743
761
|
}], ctorParameters: function () { return []; } });
|
|
744
762
|
|
|
745
763
|
class WorkspaceDeviceDetailComponent {
|
|
@@ -786,10 +804,10 @@ class WorkspaceDeviceDetailComponent {
|
|
|
786
804
|
}
|
|
787
805
|
}
|
|
788
806
|
WorkspaceDeviceDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceDeviceDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
789
|
-
WorkspaceDeviceDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspaceDeviceDetailComponent, selector: "tk-workspace-device-detail", inputs: { workspace: "workspace", device: "device", details: "details", isLoading: "isLoading" }, outputs: { back: "back" }, ngImport: i0, template: "<button type=\"button\" class=\"tk-workspace-device-detail__breadcrumb\" (click)=\"onBack()\">\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-left-bold.svg\" alt=\"Back\" />\n Devices\n</button>\n\n<app-loader *ngIf=\"isLoading\"></app-loader>\n\n<ng-container *ngIf=\"!isLoading\">\n <div class=\"tk-workspace-device-detail__header\">\n <img class=\"tk-workspace-device-detail__icon\" [src]=\"deviceIcon\" [alt]=\"deviceLabel\" />\n <div class=\"tk-workspace-device-detail__title-block\">\n <h1 class=\"tk-workspace-device-detail__name\">{{ deviceLabel }}</h1>\n <div class=\"tk-workspace-device-detail__meta\">\n <span class=\"tk-workspace-device-detail__meta-pill\">\n <span class=\"tk-workspace-device-detail__status-dot\" [class.tk-workspace-device-detail__status-dot--active]=\"isRegistered\"></span>\n {{ details?.registrationStatus || 'Not Registered' }}\n </span>\n <span class=\"tk-workspace-device-detail__meta-sep\"></span>\n <span>Phones</span>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-device-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\n Actions\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\n </mat-menu>\n <a href=\"javascript:void(0)\" class=\"tk-workspace-device-detail__workspace-link\">{{ workspace?.displayName }}</a>\n </div>\n\n <div class=\"tk-workspace-device-detail__grid\">\n <div class=\"tk-workspace-device-detail__col\">\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Details</h2>\n <div class=\"tk-workspace-device-detail__row\">\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.lineCount ?? 'N/A' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Lines</span>\n </div>\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.mac || 'N/A' }}</span>\n <span class=\"tk-workspace-device-detail__label\">MAC address</span>\n </div>\n </div>\n <hr class=\"tk-workspace-device-detail__divider\" />\n <div class=\"tk-workspace-device-detail__row\">\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.hostIpAddress || 'N/A' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Host IP address</span>\n </div>\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.remoteIpAddress || 'N/A' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Remote IP address</span>\n </div>\n </div>\n <hr class=\"tk-workspace-device-detail__divider\" />\n <div class=\"tk-workspace-device-detail__row\">\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.managedBy || 'Cisco' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Managed By</span>\n </div>\n </div>\n </section>\n\n <section class=\"tk-workspace-device-detail__card\">\n <div class=\"tk-workspace-device-detail__card-header\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Software</h2>\n <div class=\"tk-workspace-device-detail__settings-icon-wrapper\">\n <img class=\"tk-workspace-device-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-device-detail__row\">\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.softwareChannel || 'Unknown' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Software Channel</span>\n </div>\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.softwareVersion || 'N/A' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Software version</span>\n </div>\n </div>\n </section>\n\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Tags</h2>\n <div class=\"tk-workspace-device-detail__tags\">\n <div *ngFor=\"let tag of tags; let i = index\" class=\"tk-workspace-device-detail__tag\">\n <span>{{ tag }}</span>\n <mat-icon class=\"tk-workspace-device-detail__tag-remove\" (click)=\"removeTag(i)\">close</mat-icon>\n </div>\n <button type=\"button\" class=\"tk-workspace-device-detail__tag tk-workspace-device-detail__tag--add\" (click)=\"showTagInput()\">\n <mat-icon class=\"tk-workspace-device-detail__tag-add-icon\">add</mat-icon>\n Add tag\n </button>\n <input\n *ngIf=\"isAddingTag\"\n class=\"tk-workspace-device-detail__tag-input\"\n type=\"text\"\n placeholder=\"Enter tag...\"\n [(ngModel)]=\"newTag\"\n (blur)=\"onTagInputBlur()\" />\n </div>\n </section>\n </div>\n\n <div class=\"tk-workspace-device-detail__col\">\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Issues & Information</h2>\n <div class=\"tk-workspace-device-detail__no-issues\">\n <mat-icon class=\"tk-workspace-device-detail__no-issues-icon\">check_circle</mat-icon>\n No reported issues at this time\n </div>\n </section>\n\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Hoteling</h2>\n <p class=\"tk-workspace-device-detail__hint\">Allow this device to be used as a Hoteling Host by visiting guests.</p>\n <div class=\"tk-workspace-device-detail__hoteling-toggle-row\">\n <label class=\"tk-workspace-device-detail__toggle\">\n <input type=\"checkbox\" [(ngModel)]=\"hotelingEnabled\" />\n <span class=\"tk-workspace-device-detail__toggle-slider\"></span>\n </label>\n <img\n class=\"tk-workspace-device-detail__meta-icon\"\n src=\"assets/icons/info-circle-regular.svg\"\n alt=\"\"\n matTooltip=\"Enabling this device for Hoteling means that a guest can log into this host and use this phone as if it were their own.\" />\n </div>\n <p class=\"tk-workspace-device-detail__hint\">Limit the time a guest can use this phone to</p>\n <select class=\"tk-workspace-device-detail__select\" [(ngModel)]=\"guestHoursLimit\">\n <option *ngFor=\"let hour of hotelingTimeHours\" [value]=\"hour\">{{ hour }}</option>\n </select>\n </section>\n\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Device Management</h2>\n <p class=\"tk-workspace-device-detail__hint\">The users and workspaces that appear on this device are displayed below in the order of appearance.</p>\n <p class=\"tk-workspace-device-detail__hint\">\n To add and remove users and workspaces, select <b>Configure Lines</b>.<br />\n To customize the programmable Line Keys, select <b>Configure Layout</b>.<br />\n To set up the display settings and dialing options, select <b>Device Settings</b>.\n </p>\n <div class=\"tk-workspace-device-detail__table-wrapper\">\n <table class=\"tk-workspace-device-detail__table\">\n <thead>\n <tr>\n <th>Index #</th>\n <th>Name</th>\n <th>Number/Extension</th>\n <th>Registered</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let line of details?.lines; let i = index\">\n <td>{{ i + 1 }}</td>\n <td>{{ line.name || 'NA' }}</td>\n <td>{{ line.number }}</td>\n <td>\n <span *ngIf=\"line.registered; else notRegistered\" class=\"tk-workspace-device-detail__registered\">Registered</span>\n <ng-template #notRegistered>\n <mat-icon class=\"tk-workspace-device-detail__warning-icon\" matTooltip=\"Unregistered\">warning</mat-icon>\n </ng-template>\n </td>\n </tr>\n <tr *ngIf=\"!details?.lines?.length\">\n <td colspan=\"4\" class=\"tk-workspace-device-detail__table-empty\">No lines configured.</td>\n </tr>\n </tbody>\n </table>\n </div>\n <div class=\"tk-workspace-device-detail__configure-lines\">\n <div class=\"tk-workspace-device-detail__configure-line\">\n <span>Configure Lines</span>\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\n </div>\n <hr class=\"tk-workspace-device-detail__divider\" />\n <div class=\"tk-workspace-device-detail__configure-line\">\n <span>Configure Layout</span>\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\n </div>\n <hr class=\"tk-workspace-device-detail__divider\" />\n <div class=\"tk-workspace-device-detail__configure-line\">\n <span>Device Settings</span>\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\n </div>\n </div>\n </section>\n\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Support</h2>\n <div class=\"tk-workspace-device-detail__configure-lines\">\n <div class=\"tk-workspace-device-detail__configure-line\">\n <span>Meetings & Calls</span>\n <span class=\"tk-workspace-device-detail__configure-manage\">Go to troubleshooting</span>\n </div>\n <hr class=\"tk-workspace-device-detail__divider\" />\n <div class=\"tk-workspace-device-detail__configure-line\">\n <span>Device Logs</span>\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\n </div>\n </div>\n </section>\n </div>\n </div>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding:1.5rem}.tk-workspace-device-detail__breadcrumb{display:inline-flex;align-items:center;gap:.5rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-device-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-device-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem;position:relative}.tk-workspace-device-detail__icon{width:3rem;height:3rem;flex-shrink:0}.tk-workspace-device-detail__title-block{flex:1;min-width:0}.tk-workspace-device-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-device-detail__meta{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#0009}.tk-workspace-device-detail__meta-sep{display:inline-flex;align-items:center}.tk-workspace-device-detail__meta-sep:before{content:\"\";inline-size:.25rem;block-size:.25rem;border-radius:50%;background-color:#00000073}.tk-workspace-device-detail__meta-pill{display:inline-flex;align-items:center;gap:.35rem}.tk-workspace-device-detail__meta-icon{height:1rem;width:1rem}.tk-workspace-device-detail__status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#707070}.tk-workspace-device-detail__status-dot--active{background:#1d805f}.tk-workspace-device-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-device-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-device-detail__workspace-link{position:absolute;top:0;right:0;color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500;align-self:center;margin-top:3rem}.tk-workspace-device-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-device-detail__grid{grid-template-columns:1fr}}.tk-workspace-device-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-device-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1rem 1.5rem;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-device-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.tk-workspace-device-detail__card-title{margin:0 0 1rem;font-size:1rem;font-weight:500}.tk-workspace-device-detail__card-header .tk-workspace-device-detail__card-title{margin-bottom:0}.tk-workspace-device-detail__settings-icon-wrapper{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.5019607843);cursor:pointer}.tk-workspace-device-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.2);margin:.75rem 0}.tk-workspace-device-detail__row{display:flex;gap:1.5rem}.tk-workspace-device-detail__row-half{flex:1;display:flex;flex-direction:column;gap:.25rem}.tk-workspace-device-detail__value{font-size:.875rem;font-weight:500;color:#000000f2}.tk-workspace-device-detail__label{font-size:.75rem;color:#0009}.tk-workspace-device-detail__hint{font-size:.8125rem;color:#0009;margin:0 0 .75rem}.tk-workspace-device-detail__tags{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.tk-workspace-device-detail__tag{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border:1px solid rgba(0,0,0,.12);border-radius:6.25rem;font-size:.8125rem;background:#f5f5f5}.tk-workspace-device-detail__tag mat-icon{font-size:1rem;height:1rem;width:1rem;cursor:pointer}.tk-workspace-device-detail__tag--add{background:none;border-style:dashed;cursor:pointer;font-family:inherit;color:#000000f2}.tk-workspace-device-detail__tag-input{border:1px solid rgba(0,0,0,.12);border-radius:.25rem;padding:.25rem .5rem;font-size:.8125rem;font-family:inherit}.tk-workspace-device-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-device-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-device-detail__hoteling-toggle-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.tk-workspace-device-detail__toggle{position:relative;display:inline-block;width:2.25rem;height:1.25rem}.tk-workspace-device-detail__toggle input{opacity:0;width:0;height:0}.tk-workspace-device-detail__toggle input:checked+.tk-workspace-device-detail__toggle-slider{background-color:#0353a8}.tk-workspace-device-detail__toggle input:checked+.tk-workspace-device-detail__toggle-slider:before{transform:translate(1rem)}.tk-workspace-device-detail__toggle-slider{position:absolute;inset:0;background-color:#b3b3b3;border-radius:1.25rem;cursor:pointer;transition:background-color .15s ease}.tk-workspace-device-detail__toggle-slider:before{content:\"\";position:absolute;height:1rem;width:1rem;left:.125rem;top:.125rem;background-color:#fff;border-radius:50%;transition:transform .15s ease}.tk-workspace-device-detail__select{font-family:inherit;font-size:.875rem;padding:.375rem .5rem;border-radius:.25rem;border:1px solid rgba(0,0,0,.12);max-width:8rem}.tk-workspace-device-detail__table-wrapper{overflow-x:auto;margin-bottom:.75rem}.tk-workspace-device-detail__table{width:100%;border-collapse:collapse;font-size:.8125rem}.tk-workspace-device-detail__table th{text-align:left;font-weight:400;color:#0009;padding:.5rem .75rem;background:#ededed;border-bottom:1px solid #e8e8e8}.tk-workspace-device-detail__table td{padding:.5rem .75rem;border-bottom:1px solid #e8e8e8;vertical-align:middle}.tk-workspace-device-detail__table-empty{color:#0009;text-align:center}.tk-workspace-device-detail__registered{color:#1d805f;font-weight:500}.tk-workspace-device-detail__warning-icon{color:#b54708;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-device-detail__configure-lines{opacity:.4;pointer-events:none}.tk-workspace-device-detail__configure-line{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;font-size:.875rem}.tk-workspace-device-detail__configure-manage{font-weight:500;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
|
|
807
|
+
WorkspaceDeviceDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspaceDeviceDetailComponent, selector: "tk-workspace-device-detail", inputs: { workspace: "workspace", device: "device", details: "details", isLoading: "isLoading" }, outputs: { back: "back" }, ngImport: i0, template: "<button type=\"button\" class=\"tk-workspace-device-detail__breadcrumb\" (click)=\"onBack()\">\r\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-left-bold.svg\" alt=\"Back\" />\r\n Devices\r\n</button>\r\n\r\n<app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <div class=\"tk-workspace-device-detail__header\">\r\n <img class=\"tk-workspace-device-detail__icon\" [src]=\"deviceIcon\" [alt]=\"deviceLabel\" />\r\n <div class=\"tk-workspace-device-detail__title-block\">\r\n <h1 class=\"tk-workspace-device-detail__name\">{{ deviceLabel }}</h1>\r\n <div class=\"tk-workspace-device-detail__meta\">\r\n <span class=\"tk-workspace-device-detail__meta-pill\">\r\n <span class=\"tk-workspace-device-detail__status-dot\" [class.tk-workspace-device-detail__status-dot--active]=\"isRegistered\"></span>\r\n {{ details?.registrationStatus || 'Not Registered' }}\r\n </span>\r\n <span class=\"tk-workspace-device-detail__meta-sep\"></span>\r\n <span>Phones</span>\r\n </div>\r\n </div>\r\n <button type=\"button\" class=\"tk-workspace-device-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\r\n Actions\r\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\r\n </button>\r\n <mat-menu #actionsMenu=\"matMenu\">\r\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\r\n </mat-menu>\r\n <a href=\"javascript:void(0)\" class=\"tk-workspace-device-detail__workspace-link\">{{ workspace.displayName }}</a>\r\n </div>\r\n\r\n <div class=\"tk-workspace-device-detail__grid\">\r\n <div class=\"tk-workspace-device-detail__col\">\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Details</h2>\r\n <div class=\"tk-workspace-device-detail__row\">\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.lineCount ?? 'N/A' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Lines</span>\r\n </div>\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.mac || 'N/A' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">MAC address</span>\r\n </div>\r\n </div>\r\n <hr class=\"tk-workspace-device-detail__divider\" />\r\n <div class=\"tk-workspace-device-detail__row\">\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.hostIpAddress || 'N/A' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Host IP address</span>\r\n </div>\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.remoteIpAddress || 'N/A' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Remote IP address</span>\r\n </div>\r\n </div>\r\n <hr class=\"tk-workspace-device-detail__divider\" />\r\n <div class=\"tk-workspace-device-detail__row\">\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.managedBy || 'Cisco' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Managed By</span>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <div class=\"tk-workspace-device-detail__card-header\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Software</h2>\r\n <div class=\"tk-workspace-device-detail__settings-icon-wrapper\">\r\n <img class=\"tk-workspace-device-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"tk-workspace-device-detail__row\">\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.softwareChannel || 'Unknown' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Software Channel</span>\r\n </div>\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.softwareVersion || 'N/A' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Software version</span>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Tags</h2>\r\n <div class=\"tk-workspace-device-detail__tags\">\r\n <div *ngFor=\"let tag of tags; let i = index\" class=\"tk-workspace-device-detail__tag\">\r\n <span>{{ tag }}</span>\r\n <mat-icon class=\"tk-workspace-device-detail__tag-remove\" (click)=\"removeTag(i)\">close</mat-icon>\r\n </div>\r\n <button type=\"button\" class=\"tk-workspace-device-detail__tag tk-workspace-device-detail__tag--add\" (click)=\"showTagInput()\">\r\n <mat-icon class=\"tk-workspace-device-detail__tag-add-icon\">add</mat-icon>\r\n Add tag\r\n </button>\r\n <input\r\n *ngIf=\"isAddingTag\"\r\n class=\"tk-workspace-device-detail__tag-input\"\r\n type=\"text\"\r\n placeholder=\"Enter tag...\"\r\n [(ngModel)]=\"newTag\"\r\n (blur)=\"onTagInputBlur()\" />\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"tk-workspace-device-detail__col\">\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Issues & Information</h2>\r\n <div class=\"tk-workspace-device-detail__no-issues\">\r\n <mat-icon class=\"tk-workspace-device-detail__no-issues-icon\">check_circle</mat-icon>\r\n No reported issues at this time\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Hoteling</h2>\r\n <p class=\"tk-workspace-device-detail__hint\">Allow this device to be used as a Hoteling Host by visiting guests.</p>\r\n <div class=\"tk-workspace-device-detail__hoteling-toggle-row\">\r\n <label class=\"tk-workspace-device-detail__toggle\">\r\n <input type=\"checkbox\" [(ngModel)]=\"hotelingEnabled\" />\r\n <span class=\"tk-workspace-device-detail__toggle-slider\"></span>\r\n </label>\r\n <img\r\n class=\"tk-workspace-device-detail__meta-icon\"\r\n src=\"assets/icons/info-circle-regular.svg\"\r\n alt=\"\"\r\n matTooltip=\"Enabling this device for Hoteling means that a guest can log into this host and use this phone as if it were their own.\" />\r\n </div>\r\n <p class=\"tk-workspace-device-detail__hint\">Limit the time a guest can use this phone to</p>\r\n <select class=\"tk-workspace-device-detail__select\" [(ngModel)]=\"guestHoursLimit\">\r\n <option *ngFor=\"let hour of hotelingTimeHours\" [value]=\"hour\">{{ hour }}</option>\r\n </select>\r\n </section>\r\n\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Device Management</h2>\r\n <p class=\"tk-workspace-device-detail__hint\">The users and workspaces that appear on this device are displayed below in the order of appearance.</p>\r\n <p class=\"tk-workspace-device-detail__hint\">\r\n To add and remove users and workspaces, select <b>Configure Lines</b>.<br />\r\n To customize the programmable Line Keys, select <b>Configure Layout</b>.<br />\r\n To set up the display settings and dialing options, select <b>Device Settings</b>.\r\n </p>\r\n <div class=\"tk-workspace-device-detail__table-wrapper\">\r\n <table class=\"tk-workspace-device-detail__table\">\r\n <thead>\r\n <tr>\r\n <th>Index #</th>\r\n <th>Name</th>\r\n <th>Number/Extension</th>\r\n <th>Registered</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let line of details?.lines; let i = index\">\r\n <td>{{ i + 1 }}</td>\r\n <td>{{ line.name || 'NA' }}</td>\r\n <td>{{ line.number }}</td>\r\n <td>\r\n <span *ngIf=\"line.registered; else notRegistered\" class=\"tk-workspace-device-detail__registered\">Registered</span>\r\n <ng-template #notRegistered>\r\n <mat-icon class=\"tk-workspace-device-detail__warning-icon\" matTooltip=\"Unregistered\">warning</mat-icon>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!details?.lines?.length\">\r\n <td colspan=\"4\" class=\"tk-workspace-device-detail__table-empty\">No lines configured.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"tk-workspace-device-detail__configure-lines\">\r\n <div class=\"tk-workspace-device-detail__configure-line\">\r\n <span>Configure Lines</span>\r\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\r\n </div>\r\n <hr class=\"tk-workspace-device-detail__divider\" />\r\n <div class=\"tk-workspace-device-detail__configure-line\">\r\n <span>Configure Layout</span>\r\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\r\n </div>\r\n <hr class=\"tk-workspace-device-detail__divider\" />\r\n <div class=\"tk-workspace-device-detail__configure-line\">\r\n <span>Device Settings</span>\r\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Support</h2>\r\n <div class=\"tk-workspace-device-detail__configure-lines\">\r\n <div class=\"tk-workspace-device-detail__configure-line\">\r\n <span>Meetings & Calls</span>\r\n <span class=\"tk-workspace-device-detail__configure-manage\">Go to troubleshooting</span>\r\n </div>\r\n <hr class=\"tk-workspace-device-detail__divider\" />\r\n <div class=\"tk-workspace-device-detail__configure-line\">\r\n <span>Device Logs</span>\r\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n</ng-container>\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;padding:1.5rem}.tk-workspace-device-detail__breadcrumb{display:inline-flex;align-items:center;gap:.5rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-device-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-device-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem;position:relative}.tk-workspace-device-detail__icon{width:3rem;height:3rem;flex-shrink:0}.tk-workspace-device-detail__title-block{flex:1;min-width:0}.tk-workspace-device-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-device-detail__meta{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#0009}.tk-workspace-device-detail__meta-sep{display:inline-flex;align-items:center}.tk-workspace-device-detail__meta-sep:before{content:\"\";inline-size:.25rem;block-size:.25rem;border-radius:50%;background-color:#00000073}.tk-workspace-device-detail__meta-pill{display:inline-flex;align-items:center;gap:.35rem}.tk-workspace-device-detail__meta-icon{height:1rem;width:1rem}.tk-workspace-device-detail__status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#707070}.tk-workspace-device-detail__status-dot--active{background:#1d805f}.tk-workspace-device-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-device-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-device-detail__workspace-link{position:absolute;top:0;right:0;color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500;align-self:center;margin-top:3rem}.tk-workspace-device-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-device-detail__grid{grid-template-columns:1fr}}.tk-workspace-device-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-device-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1rem 1.5rem;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-device-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.tk-workspace-device-detail__card-title{margin:0 0 1rem;font-size:1rem;font-weight:500}.tk-workspace-device-detail__card-header .tk-workspace-device-detail__card-title{margin-bottom:0}.tk-workspace-device-detail__settings-icon-wrapper{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.5019607843);cursor:pointer}.tk-workspace-device-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.2);margin:.75rem 0}.tk-workspace-device-detail__row{display:flex;gap:1.5rem}.tk-workspace-device-detail__row-half{flex:1;display:flex;flex-direction:column;gap:.25rem}.tk-workspace-device-detail__value{font-size:.875rem;font-weight:500;color:#000000f2}.tk-workspace-device-detail__label{font-size:.75rem;color:#0009}.tk-workspace-device-detail__hint{font-size:.8125rem;color:#0009;margin:0 0 .75rem}.tk-workspace-device-detail__tags{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.tk-workspace-device-detail__tag{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border:1px solid rgba(0,0,0,.12);border-radius:6.25rem;font-size:.8125rem;background:#f5f5f5}.tk-workspace-device-detail__tag mat-icon{font-size:1rem;height:1rem;width:1rem;cursor:pointer}.tk-workspace-device-detail__tag--add{background:none;border-style:dashed;cursor:pointer;font-family:inherit;color:#000000f2}.tk-workspace-device-detail__tag-input{border:1px solid rgba(0,0,0,.12);border-radius:.25rem;padding:.25rem .5rem;font-size:.8125rem;font-family:inherit}.tk-workspace-device-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-device-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-device-detail__hoteling-toggle-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.tk-workspace-device-detail__toggle{position:relative;display:inline-block;width:2.25rem;height:1.25rem}.tk-workspace-device-detail__toggle input{opacity:0;width:0;height:0}.tk-workspace-device-detail__toggle input:checked+.tk-workspace-device-detail__toggle-slider{background-color:#0353a8}.tk-workspace-device-detail__toggle input:checked+.tk-workspace-device-detail__toggle-slider:before{transform:translate(1rem)}.tk-workspace-device-detail__toggle-slider{position:absolute;inset:0;background-color:#b3b3b3;border-radius:1.25rem;cursor:pointer;transition:background-color .15s ease}.tk-workspace-device-detail__toggle-slider:before{content:\"\";position:absolute;height:1rem;width:1rem;left:.125rem;top:.125rem;background-color:#fff;border-radius:50%;transition:transform .15s ease}.tk-workspace-device-detail__select{font-family:inherit;font-size:.875rem;padding:.375rem .5rem;border-radius:.25rem;border:1px solid rgba(0,0,0,.12);max-width:8rem}.tk-workspace-device-detail__table-wrapper{overflow-x:auto;margin-bottom:.75rem}.tk-workspace-device-detail__table{width:100%;border-collapse:collapse;font-size:.8125rem}.tk-workspace-device-detail__table th{text-align:left;font-weight:400;color:#0009;padding:.5rem .75rem;background:#ededed;border-bottom:1px solid #e8e8e8}.tk-workspace-device-detail__table td{padding:.5rem .75rem;border-bottom:1px solid #e8e8e8;vertical-align:middle}.tk-workspace-device-detail__table-empty{color:#0009;text-align:center}.tk-workspace-device-detail__registered{color:#1d805f;font-weight:500}.tk-workspace-device-detail__warning-icon{color:#b54708;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-device-detail__configure-lines{opacity:.4;pointer-events:none}.tk-workspace-device-detail__configure-line{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;font-size:.875rem}.tk-workspace-device-detail__configure-manage{font-weight:500;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
|
|
790
808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceDeviceDetailComponent, decorators: [{
|
|
791
809
|
type: Component,
|
|
792
|
-
args: [{ selector: 'tk-workspace-device-detail', template: "<button type=\"button\" class=\"tk-workspace-device-detail__breadcrumb\" (click)=\"onBack()\">\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-left-bold.svg\" alt=\"Back\" />\n Devices\n</button>\n\n<app-loader *ngIf=\"isLoading\"></app-loader>\n\n<ng-container *ngIf=\"!isLoading\">\n <div class=\"tk-workspace-device-detail__header\">\n <img class=\"tk-workspace-device-detail__icon\" [src]=\"deviceIcon\" [alt]=\"deviceLabel\" />\n <div class=\"tk-workspace-device-detail__title-block\">\n <h1 class=\"tk-workspace-device-detail__name\">{{ deviceLabel }}</h1>\n <div class=\"tk-workspace-device-detail__meta\">\n <span class=\"tk-workspace-device-detail__meta-pill\">\n <span class=\"tk-workspace-device-detail__status-dot\" [class.tk-workspace-device-detail__status-dot--active]=\"isRegistered\"></span>\n {{ details?.registrationStatus || 'Not Registered' }}\n </span>\n <span class=\"tk-workspace-device-detail__meta-sep\"></span>\n <span>Phones</span>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-device-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\n Actions\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\n </mat-menu>\n <a href=\"javascript:void(0)\" class=\"tk-workspace-device-detail__workspace-link\">{{ workspace?.displayName }}</a>\n </div>\n\n <div class=\"tk-workspace-device-detail__grid\">\n <div class=\"tk-workspace-device-detail__col\">\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Details</h2>\n <div class=\"tk-workspace-device-detail__row\">\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.lineCount ?? 'N/A' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Lines</span>\n </div>\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.mac || 'N/A' }}</span>\n <span class=\"tk-workspace-device-detail__label\">MAC address</span>\n </div>\n </div>\n <hr class=\"tk-workspace-device-detail__divider\" />\n <div class=\"tk-workspace-device-detail__row\">\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.hostIpAddress || 'N/A' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Host IP address</span>\n </div>\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.remoteIpAddress || 'N/A' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Remote IP address</span>\n </div>\n </div>\n <hr class=\"tk-workspace-device-detail__divider\" />\n <div class=\"tk-workspace-device-detail__row\">\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.managedBy || 'Cisco' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Managed By</span>\n </div>\n </div>\n </section>\n\n <section class=\"tk-workspace-device-detail__card\">\n <div class=\"tk-workspace-device-detail__card-header\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Software</h2>\n <div class=\"tk-workspace-device-detail__settings-icon-wrapper\">\n <img class=\"tk-workspace-device-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-device-detail__row\">\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.softwareChannel || 'Unknown' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Software Channel</span>\n </div>\n <div class=\"tk-workspace-device-detail__row-half\">\n <span class=\"tk-workspace-device-detail__value\">{{ details?.softwareVersion || 'N/A' }}</span>\n <span class=\"tk-workspace-device-detail__label\">Software version</span>\n </div>\n </div>\n </section>\n\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Tags</h2>\n <div class=\"tk-workspace-device-detail__tags\">\n <div *ngFor=\"let tag of tags; let i = index\" class=\"tk-workspace-device-detail__tag\">\n <span>{{ tag }}</span>\n <mat-icon class=\"tk-workspace-device-detail__tag-remove\" (click)=\"removeTag(i)\">close</mat-icon>\n </div>\n <button type=\"button\" class=\"tk-workspace-device-detail__tag tk-workspace-device-detail__tag--add\" (click)=\"showTagInput()\">\n <mat-icon class=\"tk-workspace-device-detail__tag-add-icon\">add</mat-icon>\n Add tag\n </button>\n <input\n *ngIf=\"isAddingTag\"\n class=\"tk-workspace-device-detail__tag-input\"\n type=\"text\"\n placeholder=\"Enter tag...\"\n [(ngModel)]=\"newTag\"\n (blur)=\"onTagInputBlur()\" />\n </div>\n </section>\n </div>\n\n <div class=\"tk-workspace-device-detail__col\">\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Issues & Information</h2>\n <div class=\"tk-workspace-device-detail__no-issues\">\n <mat-icon class=\"tk-workspace-device-detail__no-issues-icon\">check_circle</mat-icon>\n No reported issues at this time\n </div>\n </section>\n\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Hoteling</h2>\n <p class=\"tk-workspace-device-detail__hint\">Allow this device to be used as a Hoteling Host by visiting guests.</p>\n <div class=\"tk-workspace-device-detail__hoteling-toggle-row\">\n <label class=\"tk-workspace-device-detail__toggle\">\n <input type=\"checkbox\" [(ngModel)]=\"hotelingEnabled\" />\n <span class=\"tk-workspace-device-detail__toggle-slider\"></span>\n </label>\n <img\n class=\"tk-workspace-device-detail__meta-icon\"\n src=\"assets/icons/info-circle-regular.svg\"\n alt=\"\"\n matTooltip=\"Enabling this device for Hoteling means that a guest can log into this host and use this phone as if it were their own.\" />\n </div>\n <p class=\"tk-workspace-device-detail__hint\">Limit the time a guest can use this phone to</p>\n <select class=\"tk-workspace-device-detail__select\" [(ngModel)]=\"guestHoursLimit\">\n <option *ngFor=\"let hour of hotelingTimeHours\" [value]=\"hour\">{{ hour }}</option>\n </select>\n </section>\n\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Device Management</h2>\n <p class=\"tk-workspace-device-detail__hint\">The users and workspaces that appear on this device are displayed below in the order of appearance.</p>\n <p class=\"tk-workspace-device-detail__hint\">\n To add and remove users and workspaces, select <b>Configure Lines</b>.<br />\n To customize the programmable Line Keys, select <b>Configure Layout</b>.<br />\n To set up the display settings and dialing options, select <b>Device Settings</b>.\n </p>\n <div class=\"tk-workspace-device-detail__table-wrapper\">\n <table class=\"tk-workspace-device-detail__table\">\n <thead>\n <tr>\n <th>Index #</th>\n <th>Name</th>\n <th>Number/Extension</th>\n <th>Registered</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let line of details?.lines; let i = index\">\n <td>{{ i + 1 }}</td>\n <td>{{ line.name || 'NA' }}</td>\n <td>{{ line.number }}</td>\n <td>\n <span *ngIf=\"line.registered; else notRegistered\" class=\"tk-workspace-device-detail__registered\">Registered</span>\n <ng-template #notRegistered>\n <mat-icon class=\"tk-workspace-device-detail__warning-icon\" matTooltip=\"Unregistered\">warning</mat-icon>\n </ng-template>\n </td>\n </tr>\n <tr *ngIf=\"!details?.lines?.length\">\n <td colspan=\"4\" class=\"tk-workspace-device-detail__table-empty\">No lines configured.</td>\n </tr>\n </tbody>\n </table>\n </div>\n <div class=\"tk-workspace-device-detail__configure-lines\">\n <div class=\"tk-workspace-device-detail__configure-line\">\n <span>Configure Lines</span>\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\n </div>\n <hr class=\"tk-workspace-device-detail__divider\" />\n <div class=\"tk-workspace-device-detail__configure-line\">\n <span>Configure Layout</span>\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\n </div>\n <hr class=\"tk-workspace-device-detail__divider\" />\n <div class=\"tk-workspace-device-detail__configure-line\">\n <span>Device Settings</span>\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\n </div>\n </div>\n </section>\n\n <section class=\"tk-workspace-device-detail__card\">\n <h2 class=\"tk-workspace-device-detail__card-title\">Support</h2>\n <div class=\"tk-workspace-device-detail__configure-lines\">\n <div class=\"tk-workspace-device-detail__configure-line\">\n <span>Meetings & Calls</span>\n <span class=\"tk-workspace-device-detail__configure-manage\">Go to troubleshooting</span>\n </div>\n <hr class=\"tk-workspace-device-detail__divider\" />\n <div class=\"tk-workspace-device-detail__configure-line\">\n <span>Device Logs</span>\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\n </div>\n </div>\n </section>\n </div>\n </div>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding:1.5rem}.tk-workspace-device-detail__breadcrumb{display:inline-flex;align-items:center;gap:.5rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-device-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-device-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem;position:relative}.tk-workspace-device-detail__icon{width:3rem;height:3rem;flex-shrink:0}.tk-workspace-device-detail__title-block{flex:1;min-width:0}.tk-workspace-device-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-device-detail__meta{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#0009}.tk-workspace-device-detail__meta-sep{display:inline-flex;align-items:center}.tk-workspace-device-detail__meta-sep:before{content:\"\";inline-size:.25rem;block-size:.25rem;border-radius:50%;background-color:#00000073}.tk-workspace-device-detail__meta-pill{display:inline-flex;align-items:center;gap:.35rem}.tk-workspace-device-detail__meta-icon{height:1rem;width:1rem}.tk-workspace-device-detail__status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#707070}.tk-workspace-device-detail__status-dot--active{background:#1d805f}.tk-workspace-device-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-device-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-device-detail__workspace-link{position:absolute;top:0;right:0;color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500;align-self:center;margin-top:3rem}.tk-workspace-device-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-device-detail__grid{grid-template-columns:1fr}}.tk-workspace-device-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-device-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1rem 1.5rem;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-device-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.tk-workspace-device-detail__card-title{margin:0 0 1rem;font-size:1rem;font-weight:500}.tk-workspace-device-detail__card-header .tk-workspace-device-detail__card-title{margin-bottom:0}.tk-workspace-device-detail__settings-icon-wrapper{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.5019607843);cursor:pointer}.tk-workspace-device-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.2);margin:.75rem 0}.tk-workspace-device-detail__row{display:flex;gap:1.5rem}.tk-workspace-device-detail__row-half{flex:1;display:flex;flex-direction:column;gap:.25rem}.tk-workspace-device-detail__value{font-size:.875rem;font-weight:500;color:#000000f2}.tk-workspace-device-detail__label{font-size:.75rem;color:#0009}.tk-workspace-device-detail__hint{font-size:.8125rem;color:#0009;margin:0 0 .75rem}.tk-workspace-device-detail__tags{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.tk-workspace-device-detail__tag{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border:1px solid rgba(0,0,0,.12);border-radius:6.25rem;font-size:.8125rem;background:#f5f5f5}.tk-workspace-device-detail__tag mat-icon{font-size:1rem;height:1rem;width:1rem;cursor:pointer}.tk-workspace-device-detail__tag--add{background:none;border-style:dashed;cursor:pointer;font-family:inherit;color:#000000f2}.tk-workspace-device-detail__tag-input{border:1px solid rgba(0,0,0,.12);border-radius:.25rem;padding:.25rem .5rem;font-size:.8125rem;font-family:inherit}.tk-workspace-device-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-device-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-device-detail__hoteling-toggle-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.tk-workspace-device-detail__toggle{position:relative;display:inline-block;width:2.25rem;height:1.25rem}.tk-workspace-device-detail__toggle input{opacity:0;width:0;height:0}.tk-workspace-device-detail__toggle input:checked+.tk-workspace-device-detail__toggle-slider{background-color:#0353a8}.tk-workspace-device-detail__toggle input:checked+.tk-workspace-device-detail__toggle-slider:before{transform:translate(1rem)}.tk-workspace-device-detail__toggle-slider{position:absolute;inset:0;background-color:#b3b3b3;border-radius:1.25rem;cursor:pointer;transition:background-color .15s ease}.tk-workspace-device-detail__toggle-slider:before{content:\"\";position:absolute;height:1rem;width:1rem;left:.125rem;top:.125rem;background-color:#fff;border-radius:50%;transition:transform .15s ease}.tk-workspace-device-detail__select{font-family:inherit;font-size:.875rem;padding:.375rem .5rem;border-radius:.25rem;border:1px solid rgba(0,0,0,.12);max-width:8rem}.tk-workspace-device-detail__table-wrapper{overflow-x:auto;margin-bottom:.75rem}.tk-workspace-device-detail__table{width:100%;border-collapse:collapse;font-size:.8125rem}.tk-workspace-device-detail__table th{text-align:left;font-weight:400;color:#0009;padding:.5rem .75rem;background:#ededed;border-bottom:1px solid #e8e8e8}.tk-workspace-device-detail__table td{padding:.5rem .75rem;border-bottom:1px solid #e8e8e8;vertical-align:middle}.tk-workspace-device-detail__table-empty{color:#0009;text-align:center}.tk-workspace-device-detail__registered{color:#1d805f;font-weight:500}.tk-workspace-device-detail__warning-icon{color:#b54708;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-device-detail__configure-lines{opacity:.4;pointer-events:none}.tk-workspace-device-detail__configure-line{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;font-size:.875rem}.tk-workspace-device-detail__configure-manage{font-weight:500;cursor:pointer}\n"] }]
|
|
810
|
+
args: [{ selector: 'tk-workspace-device-detail', template: "<button type=\"button\" class=\"tk-workspace-device-detail__breadcrumb\" (click)=\"onBack()\">\r\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-left-bold.svg\" alt=\"Back\" />\r\n Devices\r\n</button>\r\n\r\n<app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <div class=\"tk-workspace-device-detail__header\">\r\n <img class=\"tk-workspace-device-detail__icon\" [src]=\"deviceIcon\" [alt]=\"deviceLabel\" />\r\n <div class=\"tk-workspace-device-detail__title-block\">\r\n <h1 class=\"tk-workspace-device-detail__name\">{{ deviceLabel }}</h1>\r\n <div class=\"tk-workspace-device-detail__meta\">\r\n <span class=\"tk-workspace-device-detail__meta-pill\">\r\n <span class=\"tk-workspace-device-detail__status-dot\" [class.tk-workspace-device-detail__status-dot--active]=\"isRegistered\"></span>\r\n {{ details?.registrationStatus || 'Not Registered' }}\r\n </span>\r\n <span class=\"tk-workspace-device-detail__meta-sep\"></span>\r\n <span>Phones</span>\r\n </div>\r\n </div>\r\n <button type=\"button\" class=\"tk-workspace-device-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\r\n Actions\r\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\r\n </button>\r\n <mat-menu #actionsMenu=\"matMenu\">\r\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\r\n </mat-menu>\r\n <a href=\"javascript:void(0)\" class=\"tk-workspace-device-detail__workspace-link\">{{ workspace.displayName }}</a>\r\n </div>\r\n\r\n <div class=\"tk-workspace-device-detail__grid\">\r\n <div class=\"tk-workspace-device-detail__col\">\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Details</h2>\r\n <div class=\"tk-workspace-device-detail__row\">\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.lineCount ?? 'N/A' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Lines</span>\r\n </div>\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.mac || 'N/A' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">MAC address</span>\r\n </div>\r\n </div>\r\n <hr class=\"tk-workspace-device-detail__divider\" />\r\n <div class=\"tk-workspace-device-detail__row\">\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.hostIpAddress || 'N/A' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Host IP address</span>\r\n </div>\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.remoteIpAddress || 'N/A' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Remote IP address</span>\r\n </div>\r\n </div>\r\n <hr class=\"tk-workspace-device-detail__divider\" />\r\n <div class=\"tk-workspace-device-detail__row\">\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.managedBy || 'Cisco' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Managed By</span>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <div class=\"tk-workspace-device-detail__card-header\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Software</h2>\r\n <div class=\"tk-workspace-device-detail__settings-icon-wrapper\">\r\n <img class=\"tk-workspace-device-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"tk-workspace-device-detail__row\">\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.softwareChannel || 'Unknown' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Software Channel</span>\r\n </div>\r\n <div class=\"tk-workspace-device-detail__row-half\">\r\n <span class=\"tk-workspace-device-detail__value\">{{ details?.softwareVersion || 'N/A' }}</span>\r\n <span class=\"tk-workspace-device-detail__label\">Software version</span>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Tags</h2>\r\n <div class=\"tk-workspace-device-detail__tags\">\r\n <div *ngFor=\"let tag of tags; let i = index\" class=\"tk-workspace-device-detail__tag\">\r\n <span>{{ tag }}</span>\r\n <mat-icon class=\"tk-workspace-device-detail__tag-remove\" (click)=\"removeTag(i)\">close</mat-icon>\r\n </div>\r\n <button type=\"button\" class=\"tk-workspace-device-detail__tag tk-workspace-device-detail__tag--add\" (click)=\"showTagInput()\">\r\n <mat-icon class=\"tk-workspace-device-detail__tag-add-icon\">add</mat-icon>\r\n Add tag\r\n </button>\r\n <input\r\n *ngIf=\"isAddingTag\"\r\n class=\"tk-workspace-device-detail__tag-input\"\r\n type=\"text\"\r\n placeholder=\"Enter tag...\"\r\n [(ngModel)]=\"newTag\"\r\n (blur)=\"onTagInputBlur()\" />\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div class=\"tk-workspace-device-detail__col\">\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Issues & Information</h2>\r\n <div class=\"tk-workspace-device-detail__no-issues\">\r\n <mat-icon class=\"tk-workspace-device-detail__no-issues-icon\">check_circle</mat-icon>\r\n No reported issues at this time\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Hoteling</h2>\r\n <p class=\"tk-workspace-device-detail__hint\">Allow this device to be used as a Hoteling Host by visiting guests.</p>\r\n <div class=\"tk-workspace-device-detail__hoteling-toggle-row\">\r\n <label class=\"tk-workspace-device-detail__toggle\">\r\n <input type=\"checkbox\" [(ngModel)]=\"hotelingEnabled\" />\r\n <span class=\"tk-workspace-device-detail__toggle-slider\"></span>\r\n </label>\r\n <img\r\n class=\"tk-workspace-device-detail__meta-icon\"\r\n src=\"assets/icons/info-circle-regular.svg\"\r\n alt=\"\"\r\n matTooltip=\"Enabling this device for Hoteling means that a guest can log into this host and use this phone as if it were their own.\" />\r\n </div>\r\n <p class=\"tk-workspace-device-detail__hint\">Limit the time a guest can use this phone to</p>\r\n <select class=\"tk-workspace-device-detail__select\" [(ngModel)]=\"guestHoursLimit\">\r\n <option *ngFor=\"let hour of hotelingTimeHours\" [value]=\"hour\">{{ hour }}</option>\r\n </select>\r\n </section>\r\n\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Device Management</h2>\r\n <p class=\"tk-workspace-device-detail__hint\">The users and workspaces that appear on this device are displayed below in the order of appearance.</p>\r\n <p class=\"tk-workspace-device-detail__hint\">\r\n To add and remove users and workspaces, select <b>Configure Lines</b>.<br />\r\n To customize the programmable Line Keys, select <b>Configure Layout</b>.<br />\r\n To set up the display settings and dialing options, select <b>Device Settings</b>.\r\n </p>\r\n <div class=\"tk-workspace-device-detail__table-wrapper\">\r\n <table class=\"tk-workspace-device-detail__table\">\r\n <thead>\r\n <tr>\r\n <th>Index #</th>\r\n <th>Name</th>\r\n <th>Number/Extension</th>\r\n <th>Registered</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let line of details?.lines; let i = index\">\r\n <td>{{ i + 1 }}</td>\r\n <td>{{ line.name || 'NA' }}</td>\r\n <td>{{ line.number }}</td>\r\n <td>\r\n <span *ngIf=\"line.registered; else notRegistered\" class=\"tk-workspace-device-detail__registered\">Registered</span>\r\n <ng-template #notRegistered>\r\n <mat-icon class=\"tk-workspace-device-detail__warning-icon\" matTooltip=\"Unregistered\">warning</mat-icon>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!details?.lines?.length\">\r\n <td colspan=\"4\" class=\"tk-workspace-device-detail__table-empty\">No lines configured.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"tk-workspace-device-detail__configure-lines\">\r\n <div class=\"tk-workspace-device-detail__configure-line\">\r\n <span>Configure Lines</span>\r\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\r\n </div>\r\n <hr class=\"tk-workspace-device-detail__divider\" />\r\n <div class=\"tk-workspace-device-detail__configure-line\">\r\n <span>Configure Layout</span>\r\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\r\n </div>\r\n <hr class=\"tk-workspace-device-detail__divider\" />\r\n <div class=\"tk-workspace-device-detail__configure-line\">\r\n <span>Device Settings</span>\r\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-device-detail__card\">\r\n <h2 class=\"tk-workspace-device-detail__card-title\">Support</h2>\r\n <div class=\"tk-workspace-device-detail__configure-lines\">\r\n <div class=\"tk-workspace-device-detail__configure-line\">\r\n <span>Meetings & Calls</span>\r\n <span class=\"tk-workspace-device-detail__configure-manage\">Go to troubleshooting</span>\r\n </div>\r\n <hr class=\"tk-workspace-device-detail__divider\" />\r\n <div class=\"tk-workspace-device-detail__configure-line\">\r\n <span>Device Logs</span>\r\n <span class=\"tk-workspace-device-detail__configure-manage\">Manage</span>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n</ng-container>\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;padding:1.5rem}.tk-workspace-device-detail__breadcrumb{display:inline-flex;align-items:center;gap:.5rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-device-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-device-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem;position:relative}.tk-workspace-device-detail__icon{width:3rem;height:3rem;flex-shrink:0}.tk-workspace-device-detail__title-block{flex:1;min-width:0}.tk-workspace-device-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-device-detail__meta{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#0009}.tk-workspace-device-detail__meta-sep{display:inline-flex;align-items:center}.tk-workspace-device-detail__meta-sep:before{content:\"\";inline-size:.25rem;block-size:.25rem;border-radius:50%;background-color:#00000073}.tk-workspace-device-detail__meta-pill{display:inline-flex;align-items:center;gap:.35rem}.tk-workspace-device-detail__meta-icon{height:1rem;width:1rem}.tk-workspace-device-detail__status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#707070}.tk-workspace-device-detail__status-dot--active{background:#1d805f}.tk-workspace-device-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-device-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-device-detail__workspace-link{position:absolute;top:0;right:0;color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500;align-self:center;margin-top:3rem}.tk-workspace-device-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-device-detail__grid{grid-template-columns:1fr}}.tk-workspace-device-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-device-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1rem 1.5rem;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-device-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.tk-workspace-device-detail__card-title{margin:0 0 1rem;font-size:1rem;font-weight:500}.tk-workspace-device-detail__card-header .tk-workspace-device-detail__card-title{margin-bottom:0}.tk-workspace-device-detail__settings-icon-wrapper{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.5019607843);cursor:pointer}.tk-workspace-device-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.2);margin:.75rem 0}.tk-workspace-device-detail__row{display:flex;gap:1.5rem}.tk-workspace-device-detail__row-half{flex:1;display:flex;flex-direction:column;gap:.25rem}.tk-workspace-device-detail__value{font-size:.875rem;font-weight:500;color:#000000f2}.tk-workspace-device-detail__label{font-size:.75rem;color:#0009}.tk-workspace-device-detail__hint{font-size:.8125rem;color:#0009;margin:0 0 .75rem}.tk-workspace-device-detail__tags{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.tk-workspace-device-detail__tag{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border:1px solid rgba(0,0,0,.12);border-radius:6.25rem;font-size:.8125rem;background:#f5f5f5}.tk-workspace-device-detail__tag mat-icon{font-size:1rem;height:1rem;width:1rem;cursor:pointer}.tk-workspace-device-detail__tag--add{background:none;border-style:dashed;cursor:pointer;font-family:inherit;color:#000000f2}.tk-workspace-device-detail__tag-input{border:1px solid rgba(0,0,0,.12);border-radius:.25rem;padding:.25rem .5rem;font-size:.8125rem;font-family:inherit}.tk-workspace-device-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-device-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-device-detail__hoteling-toggle-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.tk-workspace-device-detail__toggle{position:relative;display:inline-block;width:2.25rem;height:1.25rem}.tk-workspace-device-detail__toggle input{opacity:0;width:0;height:0}.tk-workspace-device-detail__toggle input:checked+.tk-workspace-device-detail__toggle-slider{background-color:#0353a8}.tk-workspace-device-detail__toggle input:checked+.tk-workspace-device-detail__toggle-slider:before{transform:translate(1rem)}.tk-workspace-device-detail__toggle-slider{position:absolute;inset:0;background-color:#b3b3b3;border-radius:1.25rem;cursor:pointer;transition:background-color .15s ease}.tk-workspace-device-detail__toggle-slider:before{content:\"\";position:absolute;height:1rem;width:1rem;left:.125rem;top:.125rem;background-color:#fff;border-radius:50%;transition:transform .15s ease}.tk-workspace-device-detail__select{font-family:inherit;font-size:.875rem;padding:.375rem .5rem;border-radius:.25rem;border:1px solid rgba(0,0,0,.12);max-width:8rem}.tk-workspace-device-detail__table-wrapper{overflow-x:auto;margin-bottom:.75rem}.tk-workspace-device-detail__table{width:100%;border-collapse:collapse;font-size:.8125rem}.tk-workspace-device-detail__table th{text-align:left;font-weight:400;color:#0009;padding:.5rem .75rem;background:#ededed;border-bottom:1px solid #e8e8e8}.tk-workspace-device-detail__table td{padding:.5rem .75rem;border-bottom:1px solid #e8e8e8;vertical-align:middle}.tk-workspace-device-detail__table-empty{color:#0009;text-align:center}.tk-workspace-device-detail__registered{color:#1d805f;font-weight:500}.tk-workspace-device-detail__warning-icon{color:#b54708;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-device-detail__configure-lines{opacity:.4;pointer-events:none}.tk-workspace-device-detail__configure-line{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;font-size:.875rem}.tk-workspace-device-detail__configure-manage{font-weight:500;cursor:pointer}\n"] }]
|
|
793
811
|
}], propDecorators: { workspace: [{
|
|
794
812
|
type: Input
|
|
795
813
|
}], device: [{
|
|
@@ -877,10 +895,10 @@ class WorkspaceDetailComponent {
|
|
|
877
895
|
}
|
|
878
896
|
}
|
|
879
897
|
WorkspaceDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceDetailComponent, deps: [{ token: WorkspaceDetailService }, { token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component });
|
|
880
|
-
WorkspaceDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspaceDetailComponent, selector: "tk-workspace-detail", inputs: { workspace: "workspace", connectionType: "connectionType", customerId: "customerId" }, outputs: { back: "back" }, ngImport: i0, template: "<ng-container *ngIf=\"view === 'overview'; else deviceDetailView\">\n<button type=\"button\" class=\"tk-workspace-detail__breadcrumb\" (click)=\"onBack()\">\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-left-bold.svg\" alt=\"Back\" />\n Workspaces\n</button>\n\n<div class=\"tk-workspace-detail__header\">\n <span class=\"tk-workspace-detail__icon\">\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n </span>\n <div class=\"tk-workspace-detail__title-block\">\n <h1 class=\"tk-workspace-detail__name\">{{ workspace.displayName }}</h1>\n <div class=\"tk-workspace-detail__meta\">\n <span class=\"tk-workspace-detail__meta-pill\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Live status unavailable\n </span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-type\">Type: {{ workspace.typeLabel === 'No type' ? 'Not set' : workspace.typeLabel }}</span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-pill\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\n Capacity: {{ workspace.capacity ?? 'Not set' }}\n </span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-pill tk-workspace-detail__meta-pill--muted\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n Size not set\n </span>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\n Actions\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\n </mat-menu>\n</div>\n\n<nav class=\"tk-workspace-detail__tabs\">\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'overview'\"\n (click)=\"selectTab('overview')\">\n Overview\n </button>\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'calling'\"\n (click)=\"selectTab('calling')\">\n Calling\n </button>\n</nav>\n\n<app-loader *ngIf=\"isLoading\"></app-loader>\n\n<ng-container *ngIf=\"details\">\n <div class=\"tk-workspace-detail__grid\" *ngIf=\"activeTab === 'overview'\">\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">Issues & Information</h2>\n <div class=\"tk-workspace-detail__no-issues\" *ngIf=\"!details.issues.length\">\n <mat-icon class=\"tk-workspace-detail__no-issues-icon\">check_circle</mat-icon>\n There are currently no issues detected in your workspace.\n </div>\n <div class=\"tk-workspace-detail__issue\" *ngFor=\"let issue of details.issues\">\n <div class=\"tk-workspace-detail__issue-row\">\n <div class=\"tk-workspace-detail__issue-info\">\n <div class=\"tk-workspace-detail__issue-message-row\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n <div class=\"tk-workspace-detail__issue-message\">{{ issue.message }}</div>\n </div>\n <div class=\"tk-workspace-detail__issue-timestamp\">{{ issue.timestamp }}</div>\n </div>\n <div class=\"tk-workspace-detail__issue-actions\">\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">{{ issue.actionLabel }}</button>\n <button\n type=\"button\"\n class=\"tk-workspace-detail__issue-toggle\"\n [class.tk-workspace-detail__issue-toggle--open]=\"expandedIssueId === issue.id\"\n [attr.aria-expanded]=\"expandedIssueId === issue.id\"\n (click)=\"'void 0'\">\n <img style=\"width: .75rem; height: .75rem;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\n </button>\n </div>\n </div>\n <div class=\"tk-workspace-detail__issue-details\" *ngIf=\"expandedIssueId === issue.id\">\n <p>{{ issue.description }}</p>\n <p>\n Suggested action:<br />\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__issue-link\">{{ issue.suggestedAction }}</a>\n </p>\n </div>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Devices</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__devices\" *ngIf=\"workspace.devices.length; else noDevices\">\n <div class=\"tk-workspace-detail__device\" *ngFor=\"let device of workspace.devices\">\n <img class=\"tk-workspace-detail__device-icon\" [src]=\"resolveIcon(device.model)\" [alt]=\"device.label\" />\n <div class=\"tk-workspace-detail__device-info\">\n <div style=\"display: flex; gap: 0.5rem; align-items: center;\">\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__device-link\" (click)=\"onOpenDevice(device)\">{{ device.label }}</a>\n <span class=\"tk-workspace-detail__device-primary\">Primary</span>\n </div>\n <div class=\"tk-workspace-detail__device-status\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Status unavailable\n <img class=\"tk-workspace-detail__info-icon\" style=\"width: 12px; height: 12px;\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n </div>\n </div>\n </div>\n <ng-template #noDevices>\n <div class=\"tk-workspace-detail__no-devices\">\n <img class=\"tk-workspace-detail__no-devices-icon\" src=\"assets/icons/desk-phone-bold.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Add device</h3>\n <p class=\"tk-workspace-detail__card-text\">Add an IP Phone to collaborate in this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add device</button>\n </div>\n </ng-template>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Calling</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__calling-license\">\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/handset-regular.svg\" alt=\"\" />\n {{ details.calling.license }}\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\n <span class=\"tk-workspace-detail__row-label\">Cisco Webex SIP Address</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.sipAddress }}</span>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.schedulingConfigured\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Scheduling</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Choose scheduling</h3>\n <p class=\"tk-workspace-detail__card-text\">Choose a calendar service or setup hot-desking for this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Choose scheduling</button>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Meetings</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Device hosted meetings unavailable</h3>\n <p class=\"tk-workspace-detail__card-text\">Service not supported by Cisco IP phones</p>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">\n Planned Maintenance\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </h2>\n <div class=\"tk-workspace-detail__row\">\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/tools-regular.svg\" alt=\"\">\n <span>{{ details.plannedMaintenanceEnabled ? 'On' : 'Off' }}</span>\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--with-action\">\n <div class=\"tk-workspace-detail__row\" style=\"flex-direction: column; gap: 1rem;\">\n <div style=\"display: flex; gap: 1rem; align-items: center;\">\n <img class=\"tk-workspace-detail__meta-icon\" style=\"width: 20px; height: 20px;\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\n <div>Schedule</div>\n </div>\n <div class=\"tk-workspace-detail__row-hint\">No schedule set</div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Edit schedule</button>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.notes\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Add Notes</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/notes-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Add notes</h3>\n <p class=\"tk-workspace-detail__card-text\">Write a note about this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add notes</button>\n </section>\n </div>\n\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\" style=\"margin-bottom: 1.25rem;\">\n <h2 class=\"tk-workspace-detail__card-title\">Location</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__location\">\n <!-- <mat-icon>location_on</mat-icon> -->\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\n <div style=\"display: flex; flex-direction: column; gap: .25rem;\">\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__location-link\">{{ details.location.country }}</a>\n <div class=\"tk-workspace-detail__location-address\">{{ details.location.address }}</div>\n </div>\n </div>\n </section>\n </div>\n </div>\n\n <div class=\"tk-workspace-detail__col\" *ngIf=\"activeTab === 'calling'\">\n <section class=\"tk-workspace-detail__card tk-workspace-detail__numbers-card\">\n <h2 class=\"tk-workspace-detail__numbers-title\">Numbers</h2>\n\n <div class=\"tk-workspace-detail__numbers-content\">\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Directory number\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <table class=\"tk-workspace-detail__numbers-table\">\n <thead>\n <tr>\n <th>Type</th>\n <th>Phone Number</th>\n <th>Extension</th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><span class=\"tk-workspace-detail__badge\">Primary</span></td>\n <td>\n {{ details.calling.directoryNumber }}\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\n </td>\n <td>\n {{ details.calling.extension || 'Not set' }}\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\n </td>\n <td class=\"tk-workspace-detail__numbers-chevron-cell\">\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <hr class=\"tk-workspace-detail__divider\" />\n\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Caller ID\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <div class=\"tk-workspace-detail__numbers-row-value\">\n <span>{{ callerIdLabel }}</span>\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </div>\n </div>\n\n <hr class=\"tk-workspace-detail__divider\" />\n\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Emergency Calling\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <div class=\"tk-workspace-detail__numbers-row-value\">\n <span>Not set</span>\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </div>\n </div>\n </div>\n </section>\n </div>\n</ng-container>\n</ng-container>\n\n<ng-template #deviceDetailView>\n <tk-workspace-device-detail\n [workspace]=\"workspace\"\n [device]=\"selectedDevice\"\n [details]=\"details?.device ?? null\"\n [isLoading]=\"isLoading\"\n (back)=\"onDeviceBack()\">\n </tk-workspace-device-detail>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding:1.5rem}.tk-workspace-detail__breadcrumb{display:inline-flex;align-items:center;gap:.5rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-detail__breadcrumb mat-icon{font-size:1.25rem;height:1.25rem;width:1.25rem}.tk-workspace-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.tk-workspace-detail__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:50%;background:#2b2b2b}.tk-workspace-detail__icon img{height:1.375rem;width:1.375rem;filter:brightness(0) invert(1)}.tk-workspace-detail__title-block{flex:1;min-width:0}.tk-workspace-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-detail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;font-size:.875rem;color:#0009}.tk-workspace-detail__meta-type{color:#000000f2}.tk-workspace-detail__meta-sep{display:inline-flex;align-items:center}.tk-workspace-detail__meta-sep:before{content:\"\";flex-shrink:0;inline-size:.25rem;block-size:.25rem;border-radius:50%;background-color:var(--mch-OutlinePrimary-normal, rgba(0, 0, 0, .45))}.tk-workspace-detail__meta-icon{height:1rem;width:1rem}.tk-workspace-detail__meta-muted{color:#0006}.tk-workspace-detail__meta-pill{display:inline-flex;font-size:.875rem;align-items:center;gap:.35rem;border:1px solid rgba(0,0,0,.2);padding:.25rem .5rem;cursor:pointer;min-inline-size:1.5rem;block-size:100%;max-block-size:1.5rem;color:#000000f2;border-radius:.5rem}.tk-workspace-detail__meta-pill--muted{color:#0006}.tk-workspace-detail__meta-pill-icon{font-size:.875rem;height:.875rem;width:.875rem;opacity:.4}.tk-workspace-detail__status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#707070}.tk-workspace-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-detail__actions-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__tabs{display:flex;align-items:center;gap:1.5rem;border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:1.25rem}.tk-workspace-detail__tab{padding:.75rem 0;background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:.9375rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-workspace-detail__tab:hover{color:#000000f2}.tk-workspace-detail__tab--active{color:#000000f2;border-bottom-color:#000}.tk-workspace-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-detail__grid{grid-template-columns:1fr}}.tk-workspace-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1rem 1.5rem;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-detail__card--centered{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1rem 1.5rem}.tk-workspace-detail__card-icon{color:#0009;margin-bottom:.5rem}.tk-workspace-detail__card-heading{margin:0;font-size:.9375rem;font-weight:500}.tk-workspace-detail__card-text{margin:0 0 .5rem;font-size:.875rem;color:#000000b3;max-width:20rem}.tk-workspace-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;width:100%}.tk-workspace-detail__card-title{display:flex;align-items:center;gap:.375rem;margin:0;padding:0;font-size:1rem;font-weight:500;margin-bottom:1rem}.tk-workspace-detail__card-title__settings_icon_wrapper{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.5019607843);color:#000000f2;cursor:pointer}.tk-workspace-detail__card-header .tk-workspace-detail__card-title{margin-bottom:0}.tk-workspace-detail__settings-icon,.tk-workspace-detail__info-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-workspace-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.2);margin:.75rem 0}.tk-workspace-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__issue+.tk-workspace-detail__issue{margin-top:.75rem}.tk-workspace-detail__issue-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;border-radius:.5rem;border:.0625rem solid rgba(0,0,0,.2);cursor:pointer;height:46px;box-sizing:content-box}.tk-workspace-detail__issue-row:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-actions{display:flex;align-items:center;gap:1rem;flex-shrink:0}.tk-workspace-detail__issue-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:50%;color:#0009;cursor:pointer;flex-shrink:0;background:transparent}.tk-workspace-detail__issue-toggle:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-toggle:active{background:rgba(0,0,0,.2)}.tk-workspace-detail__issue-toggle mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;transition:transform .15s ease}.tk-workspace-detail__issue-toggle--open mat-icon{transform:rotate(180deg)}.tk-workspace-detail__issue-details{padding:.75rem 1rem .25rem 2.75rem;font-size:.8125rem;color:#0009}.tk-workspace-detail__issue-details p{margin:0 0 .5rem}.tk-workspace-detail__issue-link{color:#0353a8;text-decoration:underline}.tk-workspace-detail__issue-info{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;height:100%;justify-content:space-around}.tk-workspace-detail__issue-icon{color:#0353a8;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__issue-message-row{display:flex;align-items:center;gap:.5rem}.tk-workspace-detail__issue-message-row .tk-workspace-detail__issue-message{font-size:.875rem;font-weight:500}.tk-workspace-detail__issue-timestamp{font-size:.75rem;color:#000000b3}.tk-workspace-detail__pill-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;color:#000000f2;text-overflow:ellipsis;overflow:hidden!important;cursor:pointer;white-space:nowrap}.tk-workspace-detail__pill-button:hover{background:#ededed}.tk-workspace-detail__pill-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__devices{display:flex;flex-wrap:wrap;gap:.75rem;display:grid;grid-template-rows:auto 1fr;grid-template-columns:repeat(auto-fit,minmax(16.75rem,1fr));gap:.5rem}.tk-workspace-detail__device{align-items:center;gap:1.5rem;padding:.75rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;min-width:12rem;align-items:start;display:flex;flex-direction:column;grid-row:span 2;grid-column:1;min-block-size:8rem}.tk-workspace-detail__device-icon{width:3rem;height:3rem;flex-shrink:0}.tk-workspace-detail__device-info{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.tk-workspace-detail__device-info .tk-workspace-detail__device-primary{font-size:.75rem;min-inline-size:1.25rem;block-size:100%;max-block-size:1.25rem;border-color:#5ebff7;background-color:#08599c;color:#fffffff2;display:inline-flex;flex:0 0 auto;gap:.25rem;align-items:center;justify-content:center;overflow:hidden;padding:.25rem .5rem;border:.0625rem solid #5ebff7;border-radius:.25rem;line-height:1;text-overflow:ellipsis;box-sizing:border-box}.tk-workspace-detail__device-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__device-status{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:#000000f2}.tk-workspace-detail__no-devices{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:2rem 1.25rem}.tk-workspace-detail__no-devices-icon{width:2rem;height:2rem;margin-bottom:.5rem}.tk-workspace-detail__calling-license{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__calling-license mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__row{display:flex;align-items:center;gap:1rem;font-size:.875rem}.tk-workspace-detail__row mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__row--with-action,.tk-workspace-detail__row--kv{justify-content:space-between}.tk-workspace-detail__row--kv:first-of-type{border-top:none}.tk-workspace-detail__row-label{color:#000000f2}.tk-workspace-detail__row-value{font-weight:500;text-align:right}.tk-workspace-detail__row-hint{font-size:14px;color:#000000b3}.tk-workspace-detail__row-chevron{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__numbers-card{display:flex;gap:1rem}.tk-workspace-detail__numbers-title{width:8.75rem;flex-shrink:0;margin:0;font-size:.9375rem;font-weight:600}.tk-workspace-detail__numbers-content{flex:1;min-width:0;display:flex;flex-direction:column}.tk-workspace-detail__numbers-row{display:flex;align-items:flex-start;gap:1rem;padding:.75rem 0}.tk-workspace-detail__numbers-row-label{width:9.375rem;flex-shrink:0;display:flex;align-items:center;gap:.375rem;font-size:.875rem}.tk-workspace-detail__numbers-row-value{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.875rem;color:#0009}.tk-workspace-detail__numbers-table{flex:1;min-width:0;border-collapse:collapse;font-size:.875rem}.tk-workspace-detail__numbers-table th{padding:0 .75rem .5rem 0;text-align:left;font-weight:400;font-size:.8125rem;color:#0009}.tk-workspace-detail__numbers-table td{padding:0 .75rem 0 0;vertical-align:middle;white-space:nowrap}.tk-workspace-detail__numbers-chevron-cell{width:1.5rem;text-align:right;white-space:nowrap}.tk-workspace-detail__copy-icon{font-size:1rem;height:1rem;width:1rem;margin-left:.25rem;color:#0006;vertical-align:middle;cursor:pointer}.tk-workspace-detail__badge{display:inline-flex;align-items:center;padding:.125rem .625rem;border-radius:6.25rem;background:#e8f4fc;border:1px solid #b8d9ed;color:#1170a8;font-size:.75rem;font-weight:500}.tk-workspace-detail__location{display:flex;align-items:flex-start;gap:1rem}.tk-workspace-detail__location mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__location-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__location-address{font-size:.875rem;color:#000000f2}\n"], dependencies: [{ kind: "directive", type: 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: 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: WorkspaceDeviceDetailComponent, selector: "tk-workspace-device-detail", inputs: ["workspace", "device", "details", "isLoading"], outputs: ["back"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
|
|
898
|
+
WorkspaceDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WorkspaceDetailComponent, selector: "tk-workspace-detail", inputs: { workspace: "workspace", connectionType: "connectionType", customerId: "customerId" }, outputs: { back: "back" }, ngImport: i0, template: "<ng-container *ngIf=\"view === 'overview'; else deviceDetailView\">\r\n<button type=\"button\" class=\"tk-workspace-detail__breadcrumb\" (click)=\"onBack()\">\r\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-left-bold.svg\" alt=\"Back\" />\r\n Workspaces\r\n</button>\r\n\r\n<div class=\"tk-workspace-detail__header\">\r\n <span class=\"tk-workspace-detail__icon\">\r\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"tk-workspace-detail__title-block\">\r\n <h1 class=\"tk-workspace-detail__name\">{{ workspace.displayName }}</h1>\r\n <div class=\"tk-workspace-detail__meta\">\r\n <span class=\"tk-workspace-detail__meta-pill\">\r\n <span class=\"tk-workspace-detail__status-dot\"></span>\r\n Live status unavailable\r\n </span>\r\n <span class=\"tk-workspace-detail__meta-sep\"></span>\r\n <span class=\"tk-workspace-detail__meta-type\">Type: {{ workspace.typeLabel === 'No type' ? 'Not set' : workspace.typeLabel }}</span>\r\n <span class=\"tk-workspace-detail__meta-sep\"></span>\r\n <span class=\"tk-workspace-detail__meta-pill\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\r\n Capacity: {{ workspace.capacity ?? 'Not set' }}\r\n </span>\r\n <span class=\"tk-workspace-detail__meta-sep\"></span>\r\n <span class=\"tk-workspace-detail__meta-pill tk-workspace-detail__meta-pill--muted\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\r\n Size not set\r\n </span>\r\n </div>\r\n </div>\r\n <button type=\"button\" class=\"tk-workspace-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\r\n Actions\r\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\r\n </button>\r\n <mat-menu #actionsMenu=\"matMenu\">\r\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\r\n </mat-menu>\r\n</div>\r\n\r\n<nav class=\"tk-workspace-detail__tabs\">\r\n <button\r\n type=\"button\"\r\n class=\"tk-workspace-detail__tab\"\r\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'overview'\"\r\n (click)=\"selectTab('overview')\">\r\n Overview\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tk-workspace-detail__tab\"\r\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'calling'\"\r\n (click)=\"selectTab('calling')\">\r\n Calling\r\n </button>\r\n</nav>\r\n\r\n<app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n<ng-container *ngIf=\"details\">\r\n <div class=\"tk-workspace-detail__grid\" *ngIf=\"activeTab === 'overview'\">\r\n <div class=\"tk-workspace-detail__col\">\r\n <section class=\"tk-workspace-detail__card\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Issues & Information</h2>\r\n <div class=\"tk-workspace-detail__no-issues\" *ngIf=\"!details.issues.length\">\r\n <mat-icon class=\"tk-workspace-detail__no-issues-icon\">check_circle</mat-icon>\r\n There are currently no issues detected in your workspace.\r\n </div>\r\n <div class=\"tk-workspace-detail__issue\" *ngFor=\"let issue of details.issues\">\r\n <div class=\"tk-workspace-detail__issue-row\">\r\n <div class=\"tk-workspace-detail__issue-info\">\r\n <div class=\"tk-workspace-detail__issue-message-row\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n <div class=\"tk-workspace-detail__issue-message\">{{ issue.message }}</div>\r\n </div>\r\n <div class=\"tk-workspace-detail__issue-timestamp\">{{ issue.timestamp }}</div>\r\n </div>\r\n <div class=\"tk-workspace-detail__issue-actions\">\r\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">{{ issue.actionLabel }}</button>\r\n <button\r\n type=\"button\"\r\n class=\"tk-workspace-detail__issue-toggle\"\r\n [class.tk-workspace-detail__issue-toggle--open]=\"expandedIssueId === issue.id\"\r\n [attr.aria-expanded]=\"expandedIssueId === issue.id\"\r\n (click)=\"'void 0'\">\r\n <img style=\"width: .75rem; height: .75rem;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"tk-workspace-detail__issue-details\" *ngIf=\"expandedIssueId === issue.id\">\r\n <p>{{ issue.description }}</p>\r\n <p>\r\n Suggested action:<br />\r\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__issue-link\">{{ issue.suggestedAction }}</a>\r\n </p>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card\">\r\n <div class=\"tk-workspace-detail__card-header\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Devices</h2>\r\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"tk-workspace-detail__devices\" *ngIf=\"workspace.devices.length; else noDevices\">\r\n <div class=\"tk-workspace-detail__device\" *ngFor=\"let device of workspace.devices\">\r\n <img class=\"tk-workspace-detail__device-icon\" [src]=\"resolveIcon(device.model)\" [alt]=\"device.label\" />\r\n <div class=\"tk-workspace-detail__device-info\">\r\n <div style=\"display: flex; gap: 0.5rem; align-items: center;\">\r\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__device-link\" (click)=\"onOpenDevice(device)\">{{ device.label }}</a>\r\n <span class=\"tk-workspace-detail__device-primary\">Primary</span>\r\n </div>\r\n <div class=\"tk-workspace-detail__device-status\">\r\n <span class=\"tk-workspace-detail__status-dot\"></span>\r\n Status unavailable\r\n <img class=\"tk-workspace-detail__info-icon\" style=\"width: 12px; height: 12px;\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #noDevices>\r\n <div class=\"tk-workspace-detail__no-devices\">\r\n <img class=\"tk-workspace-detail__no-devices-icon\" src=\"assets/icons/desk-phone-bold.svg\" alt=\"\" />\r\n <h3 class=\"tk-workspace-detail__card-heading\">Add device</h3>\r\n <p class=\"tk-workspace-detail__card-text\">Add an IP Phone to collaborate in this workspace.</p>\r\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add device</button>\r\n </div>\r\n </ng-template>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card\">\r\n <div class=\"tk-workspace-detail__card-header\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Calling</h2>\r\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"tk-workspace-detail__calling-license\">\r\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/handset-regular.svg\" alt=\"\" />\r\n {{ details.calling.license }}\r\n </div>\r\n <hr class=\"tk-workspace-detail__divider\" />\r\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\r\n <span class=\"tk-workspace-detail__row-label\">Cisco Webex SIP Address</span>\r\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.sipAddress }}</span>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.schedulingConfigured\">\r\n <div class=\"tk-workspace-detail__card-header\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Scheduling</h2>\r\n </div>\r\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\r\n <h3 class=\"tk-workspace-detail__card-heading\">Choose scheduling</h3>\r\n <p class=\"tk-workspace-detail__card-text\">Choose a calendar service or setup hot-desking for this workspace.</p>\r\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Choose scheduling</button>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\">\r\n <div class=\"tk-workspace-detail__card-header\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Meetings</h2>\r\n </div>\r\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n <h3 class=\"tk-workspace-detail__card-heading\">Device hosted meetings unavailable</h3>\r\n <p class=\"tk-workspace-detail__card-text\">Service not supported by Cisco IP phones</p>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card\">\r\n <h2 class=\"tk-workspace-detail__card-title\">\r\n Planned Maintenance\r\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n </h2>\r\n <div class=\"tk-workspace-detail__row\">\r\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/tools-regular.svg\" alt=\"\">\r\n <span>{{ details.plannedMaintenanceEnabled ? 'On' : 'Off' }}</span>\r\n </div>\r\n <hr class=\"tk-workspace-detail__divider\" />\r\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--with-action\">\r\n <div class=\"tk-workspace-detail__row\" style=\"flex-direction: column; gap: 1rem;\">\r\n <div style=\"display: flex; gap: 1rem; align-items: center;\">\r\n <img class=\"tk-workspace-detail__meta-icon\" style=\"width: 20px; height: 20px;\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\r\n <div>Schedule</div>\r\n </div>\r\n <div class=\"tk-workspace-detail__row-hint\">No schedule set</div>\r\n </div>\r\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Edit schedule</button>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.notes\">\r\n <div class=\"tk-workspace-detail__card-header\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Add Notes</h2>\r\n </div>\r\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/notes-regular.svg\" alt=\"\" />\r\n <h3 class=\"tk-workspace-detail__card-heading\">Add notes</h3>\r\n <p class=\"tk-workspace-detail__card-text\">Write a note about this workspace.</p>\r\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add notes</button>\r\n </section>\r\n </div>\r\n\r\n <div class=\"tk-workspace-detail__col\">\r\n <section class=\"tk-workspace-detail__card\">\r\n <div class=\"tk-workspace-detail__card-header\" style=\"margin-bottom: 1.25rem;\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Location</h2>\r\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"tk-workspace-detail__location\">\r\n <!-- <mat-icon>location_on</mat-icon> -->\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\r\n <div style=\"display: flex; flex-direction: column; gap: .25rem;\">\r\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__location-link\">{{ details.location.country }}</a>\r\n <div class=\"tk-workspace-detail__location-address\">{{ details.location.address }}</div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-workspace-detail__col\" *ngIf=\"activeTab === 'calling'\">\r\n <section class=\"tk-workspace-detail__card tk-workspace-detail__numbers-card\">\r\n <h2 class=\"tk-workspace-detail__numbers-title\">Numbers</h2>\r\n\r\n <div class=\"tk-workspace-detail__numbers-content\">\r\n <div class=\"tk-workspace-detail__numbers-row\">\r\n <div class=\"tk-workspace-detail__numbers-row-label\">\r\n Directory number\r\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n </div>\r\n <table class=\"tk-workspace-detail__numbers-table\">\r\n <thead>\r\n <tr>\r\n <th>Type</th>\r\n <th>Phone Number</th>\r\n <th>Extension</th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td><span class=\"tk-workspace-detail__badge\">Primary</span></td>\r\n <td>\r\n {{ details.calling.directoryNumber }}\r\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\r\n </td>\r\n <td>\r\n {{ details.calling.extension || 'Not set' }}\r\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\r\n </td>\r\n <td class=\"tk-workspace-detail__numbers-chevron-cell\">\r\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <hr class=\"tk-workspace-detail__divider\" />\r\n\r\n <div class=\"tk-workspace-detail__numbers-row\">\r\n <div class=\"tk-workspace-detail__numbers-row-label\">\r\n Caller ID\r\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"tk-workspace-detail__numbers-row-value\">\r\n <span>{{ callerIdLabel }}</span>\r\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\r\n </div>\r\n </div>\r\n\r\n <hr class=\"tk-workspace-detail__divider\" />\r\n\r\n <div class=\"tk-workspace-detail__numbers-row\">\r\n <div class=\"tk-workspace-detail__numbers-row-label\">\r\n Emergency Calling\r\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"tk-workspace-detail__numbers-row-value\">\r\n <span>Not set</span>\r\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</ng-container>\r\n</ng-container>\r\n\r\n<ng-template #deviceDetailView>\r\n <tk-workspace-device-detail\r\n [workspace]=\"workspace\"\r\n [device]=\"selectedDevice\"\r\n [details]=\"details?.device ?? null\"\r\n [isLoading]=\"isLoading\"\r\n (back)=\"onDeviceBack()\">\r\n </tk-workspace-device-detail>\r\n</ng-template>\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;padding:1.5rem}.tk-workspace-detail__breadcrumb{display:inline-flex;align-items:center;gap:.5rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-detail__breadcrumb mat-icon{font-size:1.25rem;height:1.25rem;width:1.25rem}.tk-workspace-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.tk-workspace-detail__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:50%;background:#2b2b2b}.tk-workspace-detail__icon img{height:1.375rem;width:1.375rem;filter:brightness(0) invert(1)}.tk-workspace-detail__title-block{flex:1;min-width:0}.tk-workspace-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-detail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;font-size:.875rem;color:#0009}.tk-workspace-detail__meta-type{color:#000000f2}.tk-workspace-detail__meta-sep{display:inline-flex;align-items:center}.tk-workspace-detail__meta-sep:before{content:\"\";flex-shrink:0;inline-size:.25rem;block-size:.25rem;border-radius:50%;background-color:var(--mch-OutlinePrimary-normal, rgba(0, 0, 0, .45))}.tk-workspace-detail__meta-icon{height:1rem;width:1rem}.tk-workspace-detail__meta-muted{color:#0006}.tk-workspace-detail__meta-pill{display:inline-flex;font-size:.875rem;align-items:center;gap:.35rem;border:1px solid rgba(0,0,0,.2);padding:.25rem .5rem;cursor:pointer;min-inline-size:1.5rem;block-size:100%;max-block-size:1.5rem;color:#000000f2;border-radius:.5rem}.tk-workspace-detail__meta-pill--muted{color:#0006}.tk-workspace-detail__meta-pill-icon{font-size:.875rem;height:.875rem;width:.875rem;opacity:.4}.tk-workspace-detail__status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#707070}.tk-workspace-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-detail__actions-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__tabs{display:flex;align-items:center;gap:1.5rem;border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:1.25rem}.tk-workspace-detail__tab{padding:.75rem 0;background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:.9375rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-workspace-detail__tab:hover{color:#000000f2}.tk-workspace-detail__tab--active{color:#000000f2;border-bottom-color:#000}.tk-workspace-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-detail__grid{grid-template-columns:1fr}}.tk-workspace-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1rem 1.5rem;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-detail__card--centered{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1rem 1.5rem}.tk-workspace-detail__card-icon{color:#0009;margin-bottom:.5rem}.tk-workspace-detail__card-heading{margin:0;font-size:.9375rem;font-weight:500}.tk-workspace-detail__card-text{margin:0 0 .5rem;font-size:.875rem;color:#000000b3;max-width:20rem}.tk-workspace-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;width:100%}.tk-workspace-detail__card-title{display:flex;align-items:center;gap:.375rem;margin:0;padding:0;font-size:1rem;font-weight:500;margin-bottom:1rem}.tk-workspace-detail__card-title__settings_icon_wrapper{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.5019607843);color:#000000f2;cursor:pointer}.tk-workspace-detail__card-header .tk-workspace-detail__card-title{margin-bottom:0}.tk-workspace-detail__settings-icon,.tk-workspace-detail__info-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-workspace-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.2);margin:.75rem 0}.tk-workspace-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__issue+.tk-workspace-detail__issue{margin-top:.75rem}.tk-workspace-detail__issue-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;border-radius:.5rem;border:.0625rem solid rgba(0,0,0,.2);cursor:pointer;height:46px;box-sizing:content-box}.tk-workspace-detail__issue-row:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-actions{display:flex;align-items:center;gap:1rem;flex-shrink:0}.tk-workspace-detail__issue-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:50%;color:#0009;cursor:pointer;flex-shrink:0;background:transparent}.tk-workspace-detail__issue-toggle:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-toggle:active{background:rgba(0,0,0,.2)}.tk-workspace-detail__issue-toggle mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;transition:transform .15s ease}.tk-workspace-detail__issue-toggle--open mat-icon{transform:rotate(180deg)}.tk-workspace-detail__issue-details{padding:.75rem 1rem .25rem 2.75rem;font-size:.8125rem;color:#0009}.tk-workspace-detail__issue-details p{margin:0 0 .5rem}.tk-workspace-detail__issue-link{color:#0353a8;text-decoration:underline}.tk-workspace-detail__issue-info{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;height:100%;justify-content:space-around}.tk-workspace-detail__issue-icon{color:#0353a8;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__issue-message-row{display:flex;align-items:center;gap:.5rem}.tk-workspace-detail__issue-message-row .tk-workspace-detail__issue-message{font-size:.875rem;font-weight:500}.tk-workspace-detail__issue-timestamp{font-size:.75rem;color:#000000b3}.tk-workspace-detail__pill-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;color:#000000f2;text-overflow:ellipsis;overflow:hidden!important;cursor:pointer;white-space:nowrap}.tk-workspace-detail__pill-button:hover{background:#ededed}.tk-workspace-detail__pill-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__devices{display:flex;flex-wrap:wrap;gap:.75rem;display:grid;grid-template-rows:auto 1fr;grid-template-columns:repeat(auto-fit,minmax(16.75rem,1fr));gap:.5rem}.tk-workspace-detail__device{align-items:center;gap:1.5rem;padding:.75rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;min-width:12rem;align-items:start;display:flex;flex-direction:column;grid-row:span 2;grid-column:1;min-block-size:8rem}.tk-workspace-detail__device-icon{width:3rem;height:3rem;flex-shrink:0}.tk-workspace-detail__device-info{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.tk-workspace-detail__device-info .tk-workspace-detail__device-primary{font-size:.75rem;min-inline-size:1.25rem;block-size:100%;max-block-size:1.25rem;border-color:#5ebff7;background-color:#08599c;color:#fffffff2;display:inline-flex;flex:0 0 auto;gap:.25rem;align-items:center;justify-content:center;overflow:hidden;padding:.25rem .5rem;border:.0625rem solid #5ebff7;border-radius:.25rem;line-height:1;text-overflow:ellipsis;box-sizing:border-box}.tk-workspace-detail__device-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__device-status{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:#000000f2}.tk-workspace-detail__no-devices{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:2rem 1.25rem}.tk-workspace-detail__no-devices-icon{width:2rem;height:2rem;margin-bottom:.5rem}.tk-workspace-detail__calling-license{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__calling-license mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__row{display:flex;align-items:center;gap:1rem;font-size:.875rem}.tk-workspace-detail__row mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__row--with-action,.tk-workspace-detail__row--kv{justify-content:space-between}.tk-workspace-detail__row--kv:first-of-type{border-top:none}.tk-workspace-detail__row-label{color:#000000f2}.tk-workspace-detail__row-value{font-weight:500;text-align:right}.tk-workspace-detail__row-hint{font-size:14px;color:#000000b3}.tk-workspace-detail__row-chevron{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__numbers-card{display:flex;gap:1rem}.tk-workspace-detail__numbers-title{width:8.75rem;flex-shrink:0;margin:0;font-size:.9375rem;font-weight:600}.tk-workspace-detail__numbers-content{flex:1;min-width:0;display:flex;flex-direction:column}.tk-workspace-detail__numbers-row{display:flex;align-items:flex-start;gap:1rem;padding:.75rem 0}.tk-workspace-detail__numbers-row-label{width:9.375rem;flex-shrink:0;display:flex;align-items:center;gap:.375rem;font-size:.875rem}.tk-workspace-detail__numbers-row-value{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.875rem;color:#0009}.tk-workspace-detail__numbers-table{flex:1;min-width:0;border-collapse:collapse;font-size:.875rem}.tk-workspace-detail__numbers-table th{padding:0 .75rem .5rem 0;text-align:left;font-weight:400;font-size:.8125rem;color:#0009}.tk-workspace-detail__numbers-table td{padding:0 .75rem 0 0;vertical-align:middle;white-space:nowrap}.tk-workspace-detail__numbers-chevron-cell{width:1.5rem;text-align:right;white-space:nowrap}.tk-workspace-detail__copy-icon{font-size:1rem;height:1rem;width:1rem;margin-left:.25rem;color:#0006;vertical-align:middle;cursor:pointer}.tk-workspace-detail__badge{display:inline-flex;align-items:center;padding:.125rem .625rem;border-radius:6.25rem;background:#e8f4fc;border:1px solid #b8d9ed;color:#1170a8;font-size:.75rem;font-weight:500}.tk-workspace-detail__location{display:flex;align-items:flex-start;gap:1rem}.tk-workspace-detail__location mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__location-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__location-address{font-size:.875rem;color:#000000f2}\n"], dependencies: [{ kind: "directive", type: 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: 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: WorkspaceDeviceDetailComponent, selector: "tk-workspace-device-detail", inputs: ["workspace", "device", "details", "isLoading"], outputs: ["back"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
|
|
881
899
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceDetailComponent, decorators: [{
|
|
882
900
|
type: Component,
|
|
883
|
-
args: [{ selector: 'tk-workspace-detail', template: "<ng-container *ngIf=\"view === 'overview'; else deviceDetailView\">\n<button type=\"button\" class=\"tk-workspace-detail__breadcrumb\" (click)=\"onBack()\">\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-left-bold.svg\" alt=\"Back\" />\n Workspaces\n</button>\n\n<div class=\"tk-workspace-detail__header\">\n <span class=\"tk-workspace-detail__icon\">\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n </span>\n <div class=\"tk-workspace-detail__title-block\">\n <h1 class=\"tk-workspace-detail__name\">{{ workspace.displayName }}</h1>\n <div class=\"tk-workspace-detail__meta\">\n <span class=\"tk-workspace-detail__meta-pill\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Live status unavailable\n </span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-type\">Type: {{ workspace.typeLabel === 'No type' ? 'Not set' : workspace.typeLabel }}</span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-pill\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\n Capacity: {{ workspace.capacity ?? 'Not set' }}\n </span>\n <span class=\"tk-workspace-detail__meta-sep\"></span>\n <span class=\"tk-workspace-detail__meta-pill tk-workspace-detail__meta-pill--muted\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\n Size not set\n </span>\n </div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\n Actions\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\n </button>\n <mat-menu #actionsMenu=\"matMenu\">\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\n </mat-menu>\n</div>\n\n<nav class=\"tk-workspace-detail__tabs\">\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'overview'\"\n (click)=\"selectTab('overview')\">\n Overview\n </button>\n <button\n type=\"button\"\n class=\"tk-workspace-detail__tab\"\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'calling'\"\n (click)=\"selectTab('calling')\">\n Calling\n </button>\n</nav>\n\n<app-loader *ngIf=\"isLoading\"></app-loader>\n\n<ng-container *ngIf=\"details\">\n <div class=\"tk-workspace-detail__grid\" *ngIf=\"activeTab === 'overview'\">\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">Issues & Information</h2>\n <div class=\"tk-workspace-detail__no-issues\" *ngIf=\"!details.issues.length\">\n <mat-icon class=\"tk-workspace-detail__no-issues-icon\">check_circle</mat-icon>\n There are currently no issues detected in your workspace.\n </div>\n <div class=\"tk-workspace-detail__issue\" *ngFor=\"let issue of details.issues\">\n <div class=\"tk-workspace-detail__issue-row\">\n <div class=\"tk-workspace-detail__issue-info\">\n <div class=\"tk-workspace-detail__issue-message-row\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n <div class=\"tk-workspace-detail__issue-message\">{{ issue.message }}</div>\n </div>\n <div class=\"tk-workspace-detail__issue-timestamp\">{{ issue.timestamp }}</div>\n </div>\n <div class=\"tk-workspace-detail__issue-actions\">\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">{{ issue.actionLabel }}</button>\n <button\n type=\"button\"\n class=\"tk-workspace-detail__issue-toggle\"\n [class.tk-workspace-detail__issue-toggle--open]=\"expandedIssueId === issue.id\"\n [attr.aria-expanded]=\"expandedIssueId === issue.id\"\n (click)=\"'void 0'\">\n <img style=\"width: .75rem; height: .75rem;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\n </button>\n </div>\n </div>\n <div class=\"tk-workspace-detail__issue-details\" *ngIf=\"expandedIssueId === issue.id\">\n <p>{{ issue.description }}</p>\n <p>\n Suggested action:<br />\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__issue-link\">{{ issue.suggestedAction }}</a>\n </p>\n </div>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Devices</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__devices\" *ngIf=\"workspace.devices.length; else noDevices\">\n <div class=\"tk-workspace-detail__device\" *ngFor=\"let device of workspace.devices\">\n <img class=\"tk-workspace-detail__device-icon\" [src]=\"resolveIcon(device.model)\" [alt]=\"device.label\" />\n <div class=\"tk-workspace-detail__device-info\">\n <div style=\"display: flex; gap: 0.5rem; align-items: center;\">\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__device-link\" (click)=\"onOpenDevice(device)\">{{ device.label }}</a>\n <span class=\"tk-workspace-detail__device-primary\">Primary</span>\n </div>\n <div class=\"tk-workspace-detail__device-status\">\n <span class=\"tk-workspace-detail__status-dot\"></span>\n Status unavailable\n <img class=\"tk-workspace-detail__info-icon\" style=\"width: 12px; height: 12px;\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n </div>\n </div>\n </div>\n <ng-template #noDevices>\n <div class=\"tk-workspace-detail__no-devices\">\n <img class=\"tk-workspace-detail__no-devices-icon\" src=\"assets/icons/desk-phone-bold.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Add device</h3>\n <p class=\"tk-workspace-detail__card-text\">Add an IP Phone to collaborate in this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add device</button>\n </div>\n </ng-template>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Calling</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__calling-license\">\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/handset-regular.svg\" alt=\"\" />\n {{ details.calling.license }}\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\n <span class=\"tk-workspace-detail__row-label\">Cisco Webex SIP Address</span>\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.sipAddress }}</span>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.schedulingConfigured\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Scheduling</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Choose scheduling</h3>\n <p class=\"tk-workspace-detail__card-text\">Choose a calendar service or setup hot-desking for this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Choose scheduling</button>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Meetings</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Device hosted meetings unavailable</h3>\n <p class=\"tk-workspace-detail__card-text\">Service not supported by Cisco IP phones</p>\n </section>\n\n <section class=\"tk-workspace-detail__card\">\n <h2 class=\"tk-workspace-detail__card-title\">\n Planned Maintenance\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </h2>\n <div class=\"tk-workspace-detail__row\">\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/tools-regular.svg\" alt=\"\">\n <span>{{ details.plannedMaintenanceEnabled ? 'On' : 'Off' }}</span>\n </div>\n <hr class=\"tk-workspace-detail__divider\" />\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--with-action\">\n <div class=\"tk-workspace-detail__row\" style=\"flex-direction: column; gap: 1rem;\">\n <div style=\"display: flex; gap: 1rem; align-items: center;\">\n <img class=\"tk-workspace-detail__meta-icon\" style=\"width: 20px; height: 20px;\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\n <div>Schedule</div>\n </div>\n <div class=\"tk-workspace-detail__row-hint\">No schedule set</div>\n </div>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Edit schedule</button>\n </div>\n </section>\n\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.notes\">\n <div class=\"tk-workspace-detail__card-header\">\n <h2 class=\"tk-workspace-detail__card-title\">Add Notes</h2>\n </div>\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/notes-regular.svg\" alt=\"\" />\n <h3 class=\"tk-workspace-detail__card-heading\">Add notes</h3>\n <p class=\"tk-workspace-detail__card-text\">Write a note about this workspace.</p>\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add notes</button>\n </section>\n </div>\n\n <div class=\"tk-workspace-detail__col\">\n <section class=\"tk-workspace-detail__card\">\n <div class=\"tk-workspace-detail__card-header\" style=\"margin-bottom: 1.25rem;\">\n <h2 class=\"tk-workspace-detail__card-title\">Location</h2>\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\n </div>\n </div>\n <div class=\"tk-workspace-detail__location\">\n <!-- <mat-icon>location_on</mat-icon> -->\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\n <div style=\"display: flex; flex-direction: column; gap: .25rem;\">\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__location-link\">{{ details.location.country }}</a>\n <div class=\"tk-workspace-detail__location-address\">{{ details.location.address }}</div>\n </div>\n </div>\n </section>\n </div>\n </div>\n\n <div class=\"tk-workspace-detail__col\" *ngIf=\"activeTab === 'calling'\">\n <section class=\"tk-workspace-detail__card tk-workspace-detail__numbers-card\">\n <h2 class=\"tk-workspace-detail__numbers-title\">Numbers</h2>\n\n <div class=\"tk-workspace-detail__numbers-content\">\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Directory number\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <table class=\"tk-workspace-detail__numbers-table\">\n <thead>\n <tr>\n <th>Type</th>\n <th>Phone Number</th>\n <th>Extension</th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><span class=\"tk-workspace-detail__badge\">Primary</span></td>\n <td>\n {{ details.calling.directoryNumber }}\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\n </td>\n <td>\n {{ details.calling.extension || 'Not set' }}\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\n </td>\n <td class=\"tk-workspace-detail__numbers-chevron-cell\">\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <hr class=\"tk-workspace-detail__divider\" />\n\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Caller ID\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <div class=\"tk-workspace-detail__numbers-row-value\">\n <span>{{ callerIdLabel }}</span>\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </div>\n </div>\n\n <hr class=\"tk-workspace-detail__divider\" />\n\n <div class=\"tk-workspace-detail__numbers-row\">\n <div class=\"tk-workspace-detail__numbers-row-label\">\n Emergency Calling\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\n </div>\n <div class=\"tk-workspace-detail__numbers-row-value\">\n <span>Not set</span>\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\n </div>\n </div>\n </div>\n </section>\n </div>\n</ng-container>\n</ng-container>\n\n<ng-template #deviceDetailView>\n <tk-workspace-device-detail\n [workspace]=\"workspace\"\n [device]=\"selectedDevice\"\n [details]=\"details?.device ?? null\"\n [isLoading]=\"isLoading\"\n (back)=\"onDeviceBack()\">\n </tk-workspace-device-detail>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2;padding:1.5rem}.tk-workspace-detail__breadcrumb{display:inline-flex;align-items:center;gap:.5rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-detail__breadcrumb mat-icon{font-size:1.25rem;height:1.25rem;width:1.25rem}.tk-workspace-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.tk-workspace-detail__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:50%;background:#2b2b2b}.tk-workspace-detail__icon img{height:1.375rem;width:1.375rem;filter:brightness(0) invert(1)}.tk-workspace-detail__title-block{flex:1;min-width:0}.tk-workspace-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-detail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;font-size:.875rem;color:#0009}.tk-workspace-detail__meta-type{color:#000000f2}.tk-workspace-detail__meta-sep{display:inline-flex;align-items:center}.tk-workspace-detail__meta-sep:before{content:\"\";flex-shrink:0;inline-size:.25rem;block-size:.25rem;border-radius:50%;background-color:var(--mch-OutlinePrimary-normal, rgba(0, 0, 0, .45))}.tk-workspace-detail__meta-icon{height:1rem;width:1rem}.tk-workspace-detail__meta-muted{color:#0006}.tk-workspace-detail__meta-pill{display:inline-flex;font-size:.875rem;align-items:center;gap:.35rem;border:1px solid rgba(0,0,0,.2);padding:.25rem .5rem;cursor:pointer;min-inline-size:1.5rem;block-size:100%;max-block-size:1.5rem;color:#000000f2;border-radius:.5rem}.tk-workspace-detail__meta-pill--muted{color:#0006}.tk-workspace-detail__meta-pill-icon{font-size:.875rem;height:.875rem;width:.875rem;opacity:.4}.tk-workspace-detail__status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#707070}.tk-workspace-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-detail__actions-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__tabs{display:flex;align-items:center;gap:1.5rem;border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:1.25rem}.tk-workspace-detail__tab{padding:.75rem 0;background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:.9375rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-workspace-detail__tab:hover{color:#000000f2}.tk-workspace-detail__tab--active{color:#000000f2;border-bottom-color:#000}.tk-workspace-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-detail__grid{grid-template-columns:1fr}}.tk-workspace-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1rem 1.5rem;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-detail__card--centered{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1rem 1.5rem}.tk-workspace-detail__card-icon{color:#0009;margin-bottom:.5rem}.tk-workspace-detail__card-heading{margin:0;font-size:.9375rem;font-weight:500}.tk-workspace-detail__card-text{margin:0 0 .5rem;font-size:.875rem;color:#000000b3;max-width:20rem}.tk-workspace-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;width:100%}.tk-workspace-detail__card-title{display:flex;align-items:center;gap:.375rem;margin:0;padding:0;font-size:1rem;font-weight:500;margin-bottom:1rem}.tk-workspace-detail__card-title__settings_icon_wrapper{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.5019607843);color:#000000f2;cursor:pointer}.tk-workspace-detail__card-header .tk-workspace-detail__card-title{margin-bottom:0}.tk-workspace-detail__settings-icon,.tk-workspace-detail__info-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-workspace-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.2);margin:.75rem 0}.tk-workspace-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__issue+.tk-workspace-detail__issue{margin-top:.75rem}.tk-workspace-detail__issue-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;border-radius:.5rem;border:.0625rem solid rgba(0,0,0,.2);cursor:pointer;height:46px;box-sizing:content-box}.tk-workspace-detail__issue-row:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-actions{display:flex;align-items:center;gap:1rem;flex-shrink:0}.tk-workspace-detail__issue-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:50%;color:#0009;cursor:pointer;flex-shrink:0;background:transparent}.tk-workspace-detail__issue-toggle:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-toggle:active{background:rgba(0,0,0,.2)}.tk-workspace-detail__issue-toggle mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;transition:transform .15s ease}.tk-workspace-detail__issue-toggle--open mat-icon{transform:rotate(180deg)}.tk-workspace-detail__issue-details{padding:.75rem 1rem .25rem 2.75rem;font-size:.8125rem;color:#0009}.tk-workspace-detail__issue-details p{margin:0 0 .5rem}.tk-workspace-detail__issue-link{color:#0353a8;text-decoration:underline}.tk-workspace-detail__issue-info{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;height:100%;justify-content:space-around}.tk-workspace-detail__issue-icon{color:#0353a8;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__issue-message-row{display:flex;align-items:center;gap:.5rem}.tk-workspace-detail__issue-message-row .tk-workspace-detail__issue-message{font-size:.875rem;font-weight:500}.tk-workspace-detail__issue-timestamp{font-size:.75rem;color:#000000b3}.tk-workspace-detail__pill-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;color:#000000f2;text-overflow:ellipsis;overflow:hidden!important;cursor:pointer;white-space:nowrap}.tk-workspace-detail__pill-button:hover{background:#ededed}.tk-workspace-detail__pill-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__devices{display:flex;flex-wrap:wrap;gap:.75rem;display:grid;grid-template-rows:auto 1fr;grid-template-columns:repeat(auto-fit,minmax(16.75rem,1fr));gap:.5rem}.tk-workspace-detail__device{align-items:center;gap:1.5rem;padding:.75rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;min-width:12rem;align-items:start;display:flex;flex-direction:column;grid-row:span 2;grid-column:1;min-block-size:8rem}.tk-workspace-detail__device-icon{width:3rem;height:3rem;flex-shrink:0}.tk-workspace-detail__device-info{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.tk-workspace-detail__device-info .tk-workspace-detail__device-primary{font-size:.75rem;min-inline-size:1.25rem;block-size:100%;max-block-size:1.25rem;border-color:#5ebff7;background-color:#08599c;color:#fffffff2;display:inline-flex;flex:0 0 auto;gap:.25rem;align-items:center;justify-content:center;overflow:hidden;padding:.25rem .5rem;border:.0625rem solid #5ebff7;border-radius:.25rem;line-height:1;text-overflow:ellipsis;box-sizing:border-box}.tk-workspace-detail__device-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__device-status{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:#000000f2}.tk-workspace-detail__no-devices{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:2rem 1.25rem}.tk-workspace-detail__no-devices-icon{width:2rem;height:2rem;margin-bottom:.5rem}.tk-workspace-detail__calling-license{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__calling-license mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__row{display:flex;align-items:center;gap:1rem;font-size:.875rem}.tk-workspace-detail__row mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__row--with-action,.tk-workspace-detail__row--kv{justify-content:space-between}.tk-workspace-detail__row--kv:first-of-type{border-top:none}.tk-workspace-detail__row-label{color:#000000f2}.tk-workspace-detail__row-value{font-weight:500;text-align:right}.tk-workspace-detail__row-hint{font-size:14px;color:#000000b3}.tk-workspace-detail__row-chevron{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__numbers-card{display:flex;gap:1rem}.tk-workspace-detail__numbers-title{width:8.75rem;flex-shrink:0;margin:0;font-size:.9375rem;font-weight:600}.tk-workspace-detail__numbers-content{flex:1;min-width:0;display:flex;flex-direction:column}.tk-workspace-detail__numbers-row{display:flex;align-items:flex-start;gap:1rem;padding:.75rem 0}.tk-workspace-detail__numbers-row-label{width:9.375rem;flex-shrink:0;display:flex;align-items:center;gap:.375rem;font-size:.875rem}.tk-workspace-detail__numbers-row-value{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.875rem;color:#0009}.tk-workspace-detail__numbers-table{flex:1;min-width:0;border-collapse:collapse;font-size:.875rem}.tk-workspace-detail__numbers-table th{padding:0 .75rem .5rem 0;text-align:left;font-weight:400;font-size:.8125rem;color:#0009}.tk-workspace-detail__numbers-table td{padding:0 .75rem 0 0;vertical-align:middle;white-space:nowrap}.tk-workspace-detail__numbers-chevron-cell{width:1.5rem;text-align:right;white-space:nowrap}.tk-workspace-detail__copy-icon{font-size:1rem;height:1rem;width:1rem;margin-left:.25rem;color:#0006;vertical-align:middle;cursor:pointer}.tk-workspace-detail__badge{display:inline-flex;align-items:center;padding:.125rem .625rem;border-radius:6.25rem;background:#e8f4fc;border:1px solid #b8d9ed;color:#1170a8;font-size:.75rem;font-weight:500}.tk-workspace-detail__location{display:flex;align-items:flex-start;gap:1rem}.tk-workspace-detail__location mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__location-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__location-address{font-size:.875rem;color:#000000f2}\n"] }]
|
|
901
|
+
args: [{ selector: 'tk-workspace-detail', template: "<ng-container *ngIf=\"view === 'overview'; else deviceDetailView\">\r\n<button type=\"button\" class=\"tk-workspace-detail__breadcrumb\" (click)=\"onBack()\">\r\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-left-bold.svg\" alt=\"Back\" />\r\n Workspaces\r\n</button>\r\n\r\n<div class=\"tk-workspace-detail__header\">\r\n <span class=\"tk-workspace-detail__icon\">\r\n <img src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\r\n </span>\r\n <div class=\"tk-workspace-detail__title-block\">\r\n <h1 class=\"tk-workspace-detail__name\">{{ workspace.displayName }}</h1>\r\n <div class=\"tk-workspace-detail__meta\">\r\n <span class=\"tk-workspace-detail__meta-pill\">\r\n <span class=\"tk-workspace-detail__status-dot\"></span>\r\n Live status unavailable\r\n </span>\r\n <span class=\"tk-workspace-detail__meta-sep\"></span>\r\n <span class=\"tk-workspace-detail__meta-type\">Type: {{ workspace.typeLabel === 'No type' ? 'Not set' : workspace.typeLabel }}</span>\r\n <span class=\"tk-workspace-detail__meta-sep\"></span>\r\n <span class=\"tk-workspace-detail__meta-pill\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/people-regular.svg\" alt=\"\" />\r\n Capacity: {{ workspace.capacity ?? 'Not set' }}\r\n </span>\r\n <span class=\"tk-workspace-detail__meta-sep\"></span>\r\n <span class=\"tk-workspace-detail__meta-pill tk-workspace-detail__meta-pill--muted\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/device-in-room-regular.svg\" alt=\"\" />\r\n Size not set\r\n </span>\r\n </div>\r\n </div>\r\n <button type=\"button\" class=\"tk-workspace-detail__actions-button\" [matMenuTriggerFor]=\"actionsMenu\">\r\n Actions\r\n <img style=\"width: 16px; height: 16px;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\r\n </button>\r\n <mat-menu #actionsMenu=\"matMenu\">\r\n <button type=\"button\" mat-menu-item disabled>More actions coming soon</button>\r\n </mat-menu>\r\n</div>\r\n\r\n<nav class=\"tk-workspace-detail__tabs\">\r\n <button\r\n type=\"button\"\r\n class=\"tk-workspace-detail__tab\"\r\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'overview'\"\r\n (click)=\"selectTab('overview')\">\r\n Overview\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tk-workspace-detail__tab\"\r\n [class.tk-workspace-detail__tab--active]=\"activeTab === 'calling'\"\r\n (click)=\"selectTab('calling')\">\r\n Calling\r\n </button>\r\n</nav>\r\n\r\n<app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n<ng-container *ngIf=\"details\">\r\n <div class=\"tk-workspace-detail__grid\" *ngIf=\"activeTab === 'overview'\">\r\n <div class=\"tk-workspace-detail__col\">\r\n <section class=\"tk-workspace-detail__card\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Issues & Information</h2>\r\n <div class=\"tk-workspace-detail__no-issues\" *ngIf=\"!details.issues.length\">\r\n <mat-icon class=\"tk-workspace-detail__no-issues-icon\">check_circle</mat-icon>\r\n There are currently no issues detected in your workspace.\r\n </div>\r\n <div class=\"tk-workspace-detail__issue\" *ngFor=\"let issue of details.issues\">\r\n <div class=\"tk-workspace-detail__issue-row\">\r\n <div class=\"tk-workspace-detail__issue-info\">\r\n <div class=\"tk-workspace-detail__issue-message-row\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n <div class=\"tk-workspace-detail__issue-message\">{{ issue.message }}</div>\r\n </div>\r\n <div class=\"tk-workspace-detail__issue-timestamp\">{{ issue.timestamp }}</div>\r\n </div>\r\n <div class=\"tk-workspace-detail__issue-actions\">\r\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">{{ issue.actionLabel }}</button>\r\n <button\r\n type=\"button\"\r\n class=\"tk-workspace-detail__issue-toggle\"\r\n [class.tk-workspace-detail__issue-toggle--open]=\"expandedIssueId === issue.id\"\r\n [attr.aria-expanded]=\"expandedIssueId === issue.id\"\r\n (click)=\"'void 0'\">\r\n <img style=\"width: .75rem; height: .75rem;\" src=\"assets/icons/arrow-down-regular.svg\" alt=\"Expand\" />\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"tk-workspace-detail__issue-details\" *ngIf=\"expandedIssueId === issue.id\">\r\n <p>{{ issue.description }}</p>\r\n <p>\r\n Suggested action:<br />\r\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__issue-link\">{{ issue.suggestedAction }}</a>\r\n </p>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card\">\r\n <div class=\"tk-workspace-detail__card-header\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Devices</h2>\r\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"tk-workspace-detail__devices\" *ngIf=\"workspace.devices.length; else noDevices\">\r\n <div class=\"tk-workspace-detail__device\" *ngFor=\"let device of workspace.devices\">\r\n <img class=\"tk-workspace-detail__device-icon\" [src]=\"resolveIcon(device.model)\" [alt]=\"device.label\" />\r\n <div class=\"tk-workspace-detail__device-info\">\r\n <div style=\"display: flex; gap: 0.5rem; align-items: center;\">\r\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__device-link\" (click)=\"onOpenDevice(device)\">{{ device.label }}</a>\r\n <span class=\"tk-workspace-detail__device-primary\">Primary</span>\r\n </div>\r\n <div class=\"tk-workspace-detail__device-status\">\r\n <span class=\"tk-workspace-detail__status-dot\"></span>\r\n Status unavailable\r\n <img class=\"tk-workspace-detail__info-icon\" style=\"width: 12px; height: 12px;\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #noDevices>\r\n <div class=\"tk-workspace-detail__no-devices\">\r\n <img class=\"tk-workspace-detail__no-devices-icon\" src=\"assets/icons/desk-phone-bold.svg\" alt=\"\" />\r\n <h3 class=\"tk-workspace-detail__card-heading\">Add device</h3>\r\n <p class=\"tk-workspace-detail__card-text\">Add an IP Phone to collaborate in this workspace.</p>\r\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add device</button>\r\n </div>\r\n </ng-template>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card\">\r\n <div class=\"tk-workspace-detail__card-header\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Calling</h2>\r\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"tk-workspace-detail__calling-license\">\r\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/handset-regular.svg\" alt=\"\" />\r\n {{ details.calling.license }}\r\n </div>\r\n <hr class=\"tk-workspace-detail__divider\" />\r\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--kv\">\r\n <span class=\"tk-workspace-detail__row-label\">Cisco Webex SIP Address</span>\r\n <span class=\"tk-workspace-detail__row-value\">{{ details.calling.sipAddress }}</span>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.schedulingConfigured\">\r\n <div class=\"tk-workspace-detail__card-header\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Scheduling</h2>\r\n </div>\r\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\r\n <h3 class=\"tk-workspace-detail__card-heading\">Choose scheduling</h3>\r\n <p class=\"tk-workspace-detail__card-text\">Choose a calendar service or setup hot-desking for this workspace.</p>\r\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Choose scheduling</button>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\">\r\n <div class=\"tk-workspace-detail__card-header\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Meetings</h2>\r\n </div>\r\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n <h3 class=\"tk-workspace-detail__card-heading\">Device hosted meetings unavailable</h3>\r\n <p class=\"tk-workspace-detail__card-text\">Service not supported by Cisco IP phones</p>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card\">\r\n <h2 class=\"tk-workspace-detail__card-title\">\r\n Planned Maintenance\r\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n </h2>\r\n <div class=\"tk-workspace-detail__row\">\r\n <img style=\"width: 20px; height: 20px;\" src=\"assets/icons/tools-regular.svg\" alt=\"\">\r\n <span>{{ details.plannedMaintenanceEnabled ? 'On' : 'Off' }}</span>\r\n </div>\r\n <hr class=\"tk-workspace-detail__divider\" />\r\n <div class=\"tk-workspace-detail__row tk-workspace-detail__row--with-action\">\r\n <div class=\"tk-workspace-detail__row\" style=\"flex-direction: column; gap: 1rem;\">\r\n <div style=\"display: flex; gap: 1rem; align-items: center;\">\r\n <img class=\"tk-workspace-detail__meta-icon\" style=\"width: 20px; height: 20px;\" src=\"assets/icons/calendar-month-regular.svg\" alt=\"\" />\r\n <div>Schedule</div>\r\n </div>\r\n <div class=\"tk-workspace-detail__row-hint\">No schedule set</div>\r\n </div>\r\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Edit schedule</button>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-workspace-detail__card tk-workspace-detail__card--centered\" *ngIf=\"!details.notes\">\r\n <div class=\"tk-workspace-detail__card-header\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Add Notes</h2>\r\n </div>\r\n <img class=\"tk-workspace-detail__card-icon\" src=\"assets/icons/notes-regular.svg\" alt=\"\" />\r\n <h3 class=\"tk-workspace-detail__card-heading\">Add notes</h3>\r\n <p class=\"tk-workspace-detail__card-text\">Write a note about this workspace.</p>\r\n <button type=\"button\" class=\"tk-workspace-detail__pill-button\">Add notes</button>\r\n </section>\r\n </div>\r\n\r\n <div class=\"tk-workspace-detail__col\">\r\n <section class=\"tk-workspace-detail__card\">\r\n <div class=\"tk-workspace-detail__card-header\" style=\"margin-bottom: 1.25rem;\">\r\n <h2 class=\"tk-workspace-detail__card-title\">Location</h2>\r\n <div class=\"tk-workspace-detail__card-title__settings_icon_wrapper\">\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/settings-regular.svg\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div class=\"tk-workspace-detail__location\">\r\n <!-- <mat-icon>location_on</mat-icon> -->\r\n <img class=\"tk-workspace-detail__meta-icon\" src=\"assets/icons/location-regular.svg\" alt=\"\" />\r\n <div style=\"display: flex; flex-direction: column; gap: .25rem;\">\r\n <a href=\"javascript:void(0)\" class=\"tk-workspace-detail__location-link\">{{ details.location.country }}</a>\r\n <div class=\"tk-workspace-detail__location-address\">{{ details.location.address }}</div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-workspace-detail__col\" *ngIf=\"activeTab === 'calling'\">\r\n <section class=\"tk-workspace-detail__card tk-workspace-detail__numbers-card\">\r\n <h2 class=\"tk-workspace-detail__numbers-title\">Numbers</h2>\r\n\r\n <div class=\"tk-workspace-detail__numbers-content\">\r\n <div class=\"tk-workspace-detail__numbers-row\">\r\n <div class=\"tk-workspace-detail__numbers-row-label\">\r\n Directory number\r\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n </div>\r\n <table class=\"tk-workspace-detail__numbers-table\">\r\n <thead>\r\n <tr>\r\n <th>Type</th>\r\n <th>Phone Number</th>\r\n <th>Extension</th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td><span class=\"tk-workspace-detail__badge\">Primary</span></td>\r\n <td>\r\n {{ details.calling.directoryNumber }}\r\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\r\n </td>\r\n <td>\r\n {{ details.calling.extension || 'Not set' }}\r\n <img class=\"tk-workspace-detail__copy-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"Copy\" />\r\n </td>\r\n <td class=\"tk-workspace-detail__numbers-chevron-cell\">\r\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <hr class=\"tk-workspace-detail__divider\" />\r\n\r\n <div class=\"tk-workspace-detail__numbers-row\">\r\n <div class=\"tk-workspace-detail__numbers-row-label\">\r\n Caller ID\r\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"tk-workspace-detail__numbers-row-value\">\r\n <span>{{ callerIdLabel }}</span>\r\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\r\n </div>\r\n </div>\r\n\r\n <hr class=\"tk-workspace-detail__divider\" />\r\n\r\n <div class=\"tk-workspace-detail__numbers-row\">\r\n <div class=\"tk-workspace-detail__numbers-row-label\">\r\n Emergency Calling\r\n <img class=\"tk-workspace-detail__info-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\" />\r\n </div>\r\n <div class=\"tk-workspace-detail__numbers-row-value\">\r\n <span>Not set</span>\r\n <img class=\"tk-workspace-detail__row-chevron\" src=\"assets/icons/arrow-right-regular.svg\" alt=\"Expand\" />\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</ng-container>\r\n</ng-container>\r\n\r\n<ng-template #deviceDetailView>\r\n <tk-workspace-device-detail\r\n [workspace]=\"workspace\"\r\n [device]=\"selectedDevice\"\r\n [details]=\"details?.device ?? null\"\r\n [isLoading]=\"isLoading\"\r\n (back)=\"onDeviceBack()\">\r\n </tk-workspace-device-detail>\r\n</ng-template>\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;padding:1.5rem}.tk-workspace-detail__breadcrumb{display:inline-flex;align-items:center;gap:.5rem;padding:0;margin-bottom:1rem;background:none;border:none;font-family:inherit;font-size:.875rem;font-weight:500;color:#0009;cursor:pointer}.tk-workspace-detail__breadcrumb:hover{color:#000000f2}.tk-workspace-detail__breadcrumb mat-icon{font-size:1.25rem;height:1.25rem;width:1.25rem}.tk-workspace-detail__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.tk-workspace-detail__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:50%;background:#2b2b2b}.tk-workspace-detail__icon img{height:1.375rem;width:1.375rem;filter:brightness(0) invert(1)}.tk-workspace-detail__title-block{flex:1;min-width:0}.tk-workspace-detail__name{margin:0 0 .375rem;font-size:1.25rem;font-weight:600}.tk-workspace-detail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;font-size:.875rem;color:#0009}.tk-workspace-detail__meta-type{color:#000000f2}.tk-workspace-detail__meta-sep{display:inline-flex;align-items:center}.tk-workspace-detail__meta-sep:before{content:\"\";flex-shrink:0;inline-size:.25rem;block-size:.25rem;border-radius:50%;background-color:var(--mch-OutlinePrimary-normal, rgba(0, 0, 0, .45))}.tk-workspace-detail__meta-icon{height:1rem;width:1rem}.tk-workspace-detail__meta-muted{color:#0006}.tk-workspace-detail__meta-pill{display:inline-flex;font-size:.875rem;align-items:center;gap:.35rem;border:1px solid rgba(0,0,0,.2);padding:.25rem .5rem;cursor:pointer;min-inline-size:1.5rem;block-size:100%;max-block-size:1.5rem;color:#000000f2;border-radius:.5rem}.tk-workspace-detail__meta-pill--muted{color:#0006}.tk-workspace-detail__meta-pill-icon{font-size:.875rem;height:.875rem;width:.875rem;opacity:.4}.tk-workspace-detail__status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#707070}.tk-workspace-detail__actions-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;flex-shrink:0}.tk-workspace-detail__actions-button:hover{background:#2b2b2b}.tk-workspace-detail__actions-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__tabs{display:flex;align-items:center;gap:1.5rem;border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:1.25rem}.tk-workspace-detail__tab{padding:.75rem 0;background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:.9375rem;font-weight:500;color:#000000b3;cursor:pointer}.tk-workspace-detail__tab:hover{color:#000000f2}.tk-workspace-detail__tab--active{color:#000000f2;border-bottom-color:#000}.tk-workspace-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 900px){.tk-workspace-detail__grid{grid-template-columns:1fr}}.tk-workspace-detail__col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.tk-workspace-detail__card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;padding:1rem 1.5rem;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-workspace-detail__card--centered{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1rem 1.5rem}.tk-workspace-detail__card-icon{color:#0009;margin-bottom:.5rem}.tk-workspace-detail__card-heading{margin:0;font-size:.9375rem;font-weight:500}.tk-workspace-detail__card-text{margin:0 0 .5rem;font-size:.875rem;color:#000000b3;max-width:20rem}.tk-workspace-detail__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;width:100%}.tk-workspace-detail__card-title{display:flex;align-items:center;gap:.375rem;margin:0;padding:0;font-size:1rem;font-weight:500;margin-bottom:1rem}.tk-workspace-detail__card-title__settings_icon_wrapper{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.5019607843);color:#000000f2;cursor:pointer}.tk-workspace-detail__card-header .tk-workspace-detail__card-title{margin-bottom:0}.tk-workspace-detail__settings-icon,.tk-workspace-detail__info-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-workspace-detail__divider{border:none;border-top:1px solid rgba(0,0,0,.2);margin:.75rem 0}.tk-workspace-detail__no-issues{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__no-issues-icon{color:#1d805f;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__issue+.tk-workspace-detail__issue{margin-top:.75rem}.tk-workspace-detail__issue-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;border-radius:.5rem;border:.0625rem solid rgba(0,0,0,.2);cursor:pointer;height:46px;box-sizing:content-box}.tk-workspace-detail__issue-row:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-actions{display:flex;align-items:center;gap:1rem;flex-shrink:0}.tk-workspace-detail__issue-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:50%;color:#0009;cursor:pointer;flex-shrink:0;background:transparent}.tk-workspace-detail__issue-toggle:hover{background:rgba(0,0,0,.0705882353)}.tk-workspace-detail__issue-toggle:active{background:rgba(0,0,0,.2)}.tk-workspace-detail__issue-toggle mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;transition:transform .15s ease}.tk-workspace-detail__issue-toggle--open mat-icon{transform:rotate(180deg)}.tk-workspace-detail__issue-details{padding:.75rem 1rem .25rem 2.75rem;font-size:.8125rem;color:#0009}.tk-workspace-detail__issue-details p{margin:0 0 .5rem}.tk-workspace-detail__issue-link{color:#0353a8;text-decoration:underline}.tk-workspace-detail__issue-info{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;height:100%;justify-content:space-around}.tk-workspace-detail__issue-icon{color:#0353a8;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__issue-message-row{display:flex;align-items:center;gap:.5rem}.tk-workspace-detail__issue-message-row .tk-workspace-detail__issue-message{font-size:.875rem;font-weight:500}.tk-workspace-detail__issue-timestamp{font-size:.75rem;color:#000000b3}.tk-workspace-detail__pill-button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;color:#000000f2;text-overflow:ellipsis;overflow:hidden!important;cursor:pointer;white-space:nowrap}.tk-workspace-detail__pill-button:hover{background:#ededed}.tk-workspace-detail__pill-button mat-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__devices{display:flex;flex-wrap:wrap;gap:.75rem;display:grid;grid-template-rows:auto 1fr;grid-template-columns:repeat(auto-fit,minmax(16.75rem,1fr));gap:.5rem}.tk-workspace-detail__device{align-items:center;gap:1.5rem;padding:.75rem;border:1px solid rgba(0,0,0,.2);border-radius:.5rem;min-width:12rem;align-items:start;display:flex;flex-direction:column;grid-row:span 2;grid-column:1;min-block-size:8rem}.tk-workspace-detail__device-icon{width:3rem;height:3rem;flex-shrink:0}.tk-workspace-detail__device-info{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.tk-workspace-detail__device-info .tk-workspace-detail__device-primary{font-size:.75rem;min-inline-size:1.25rem;block-size:100%;max-block-size:1.25rem;border-color:#5ebff7;background-color:#08599c;color:#fffffff2;display:inline-flex;flex:0 0 auto;gap:.25rem;align-items:center;justify-content:center;overflow:hidden;padding:.25rem .5rem;border:.0625rem solid #5ebff7;border-radius:.25rem;line-height:1;text-overflow:ellipsis;box-sizing:border-box}.tk-workspace-detail__device-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__device-status{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:#000000f2}.tk-workspace-detail__no-devices{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:2rem 1.25rem}.tk-workspace-detail__no-devices-icon{width:2rem;height:2rem;margin-bottom:.5rem}.tk-workspace-detail__calling-license{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.tk-workspace-detail__calling-license mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-workspace-detail__row{display:flex;align-items:center;gap:1rem;font-size:.875rem}.tk-workspace-detail__row mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__row--with-action,.tk-workspace-detail__row--kv{justify-content:space-between}.tk-workspace-detail__row--kv:first-of-type{border-top:none}.tk-workspace-detail__row-label{color:#000000f2}.tk-workspace-detail__row-value{font-weight:500;text-align:right}.tk-workspace-detail__row-hint{font-size:14px;color:#000000b3}.tk-workspace-detail__row-chevron{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;flex-shrink:0}.tk-workspace-detail__numbers-card{display:flex;gap:1rem}.tk-workspace-detail__numbers-title{width:8.75rem;flex-shrink:0;margin:0;font-size:.9375rem;font-weight:600}.tk-workspace-detail__numbers-content{flex:1;min-width:0;display:flex;flex-direction:column}.tk-workspace-detail__numbers-row{display:flex;align-items:flex-start;gap:1rem;padding:.75rem 0}.tk-workspace-detail__numbers-row-label{width:9.375rem;flex-shrink:0;display:flex;align-items:center;gap:.375rem;font-size:.875rem}.tk-workspace-detail__numbers-row-value{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.875rem;color:#0009}.tk-workspace-detail__numbers-table{flex:1;min-width:0;border-collapse:collapse;font-size:.875rem}.tk-workspace-detail__numbers-table th{padding:0 .75rem .5rem 0;text-align:left;font-weight:400;font-size:.8125rem;color:#0009}.tk-workspace-detail__numbers-table td{padding:0 .75rem 0 0;vertical-align:middle;white-space:nowrap}.tk-workspace-detail__numbers-chevron-cell{width:1.5rem;text-align:right;white-space:nowrap}.tk-workspace-detail__copy-icon{font-size:1rem;height:1rem;width:1rem;margin-left:.25rem;color:#0006;vertical-align:middle;cursor:pointer}.tk-workspace-detail__badge{display:inline-flex;align-items:center;padding:.125rem .625rem;border-radius:6.25rem;background:#e8f4fc;border:1px solid #b8d9ed;color:#1170a8;font-size:.75rem;font-weight:500}.tk-workspace-detail__location{display:flex;align-items:flex-start;gap:1rem}.tk-workspace-detail__location mat-icon{color:#0006;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-top:.125rem}.tk-workspace-detail__location-link{color:#0353a8;text-decoration:none;font-size:.875rem;font-weight:500}.tk-workspace-detail__location-address{font-size:.875rem;color:#000000f2}\n"] }]
|
|
884
902
|
}], ctorParameters: function () { return [{ type: WorkspaceDetailService }, { type: i1$1.Location }]; }, propDecorators: { workspace: [{
|
|
885
903
|
type: Input
|
|
886
904
|
}], connectionType: [{
|
|
@@ -990,10 +1008,10 @@ class WorkspacesComponent {
|
|
|
990
1008
|
onMoveToMT(workspace) {
|
|
991
1009
|
const dialogRef = this.dialog.open(WorkspaceConfirmDialogComponent, {
|
|
992
1010
|
data: {
|
|
993
|
-
title: `Upgrade workspace ${workspace.displayName} to
|
|
994
|
-
message: `<p>Upgrading this workspace will prepare it for migration to
|
|
995
|
-
<p>During this process, the workspace configuration will be copied to the
|
|
996
|
-
The workspace will remain active on the current system until the Activate step is completed.</p>
|
|
1011
|
+
title: `Upgrade workspace ${workspace.displayName} to Webex Calling?`,
|
|
1012
|
+
message: `<p>Upgrading this workspace will prepare it for migration to Webex Calling.</p>
|
|
1013
|
+
<p>During this process, the workspace configuration will be copied to the Webex Calling environment.
|
|
1014
|
+
The workspace will remain active on the current system until the Activate step is completed.</p>
|
|
997
1015
|
<p>Do you want to continue?</p>`,
|
|
998
1016
|
confirmButtonText: 'Yes, upgrade',
|
|
999
1017
|
},
|
|
@@ -1029,8 +1047,8 @@ class WorkspacesComponent {
|
|
|
1029
1047
|
const dialogRef = this.dialog.open(WorkspaceConfirmDialogComponent, {
|
|
1030
1048
|
data: {
|
|
1031
1049
|
title: `Activate workspace ${workspace.displayName} on Multi Tenant?`,
|
|
1032
|
-
message: `<p>Activating this workspace will perform the cutover to Multi Tenant and complete the migration process.</p>
|
|
1033
|
-
<p>After activation, the workspace will become active on Multi Tenant and the original workspace will become inactive.</p>
|
|
1050
|
+
message: `<p>Activating this workspace will perform the cutover to Multi Tenant and complete the migration process.</p>
|
|
1051
|
+
<p>After activation, the workspace will become active on Multi Tenant and the original workspace will become inactive.</p>
|
|
1034
1052
|
<p>Do you want to continue?</p>`,
|
|
1035
1053
|
confirmButtonText: 'Activate',
|
|
1036
1054
|
},
|
|
@@ -1167,10 +1185,10 @@ class WorkspacesComponent {
|
|
|
1167
1185
|
}
|
|
1168
1186
|
}
|
|
1169
1187
|
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 });
|
|
1170
|
-
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\">\n <ng-container *ngIf=\"view === 'list'; else detailView\">\n <header class=\"tk-workspaces__header\">\n <h1 class=\"tk-workspaces__title\">Workspaces</h1>\n </header>\n\n <nav class=\"tk-workspaces__tabs\">\n <button\n type=\"button\"\n *ngFor=\"let tab of tabs\"\n class=\"tk-workspaces__tab\"\n [class.tk-workspaces__tab--active]=\"activeTab === tab.id\"\n (click)=\"selectTab(tab.id)\">\n <img class=\"tk-workspaces__tab-icon\" [src]=\"tab.icon\" alt=\"\" />\n {{ tab.label }}\n </button>\n </nav>\n\n <ng-container *ngIf=\"activeTab === 'workspaces'; else placeholder\">\n <app-loader *ngIf=\"isLoading\"></app-loader>\n\n <tk-workspaces-filters\n [resultCount]=\"total\"\n [typeOptions]=\"typeOptions\"\n [locationOptions]=\"locationOptions\"\n (searchChange)=\"onSearchChange($event)\"\n (typeChange)=\"onTypeFilterChange($event)\"\n (locationChange)=\"onLocationFilterChange($event)\"\n (addWorkspace)=\"addWorkspace.emit()\">\n </tk-workspaces-filters>\n\n <tk-workspaces-table\n [workspaces]=\"filteredWorkspaces\"\n [total]=\"filteredTotal\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pendingWorkspaceIds]=\"pendingWorkspaceIds\"\n (openWorkspace)=\"onOpenWorkspace($event)\"\n (licenseWithHybrid)=\"onMoveToMT($event)\"\n (migrateToMT)=\"onMoveToMT($event)\"\n (enableWebexCalling)=\"onEnableWebexCalling($event)\"\n (migrateToUCM)=\"onMigrateToUCM($event)\"\n (addDevice)=\"addDevice.emit($event)\"\n (pageChange)=\"onPageChange($event)\">\n </tk-workspaces-table>\n </ng-container>\n\n <ng-template #placeholder>\n <div class=\"tk-workspaces__placeholder\">This section isn't available in this widget yet.</div>\n </ng-template>\n </ng-container>\n\n <ng-template #detailView>\n <tk-workspace-detail\n *ngIf=\"selectedWorkspace\"\n [workspace]=\"selectedWorkspace\"\n [connectionType]=\"selectedConnectionType\"\n [customerId]=\"customerId\"\n (back)=\"onBackToList()\">\n </tk-workspace-detail>\n </ng-template>\n</div>\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"], outputs: ["openWorkspace", "licenseWithHybrid", "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" }] });
|
|
1188
|
+
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 (openWorkspace)=\"onOpenWorkspace($event)\"\r\n (licenseWithHybrid)=\"onMoveToMT($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"], outputs: ["openWorkspace", "licenseWithHybrid", "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" }] });
|
|
1171
1189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspacesComponent, decorators: [{
|
|
1172
1190
|
type: Component,
|
|
1173
|
-
args: [{ selector: 'tk-workspaces', template: "<div class=\"tk-workspaces\">\n <ng-container *ngIf=\"view === 'list'; else detailView\">\n <header class=\"tk-workspaces__header\">\n <h1 class=\"tk-workspaces__title\">Workspaces</h1>\n </header>\n\n <nav class=\"tk-workspaces__tabs\">\n <button\n type=\"button\"\n *ngFor=\"let tab of tabs\"\n class=\"tk-workspaces__tab\"\n [class.tk-workspaces__tab--active]=\"activeTab === tab.id\"\n (click)=\"selectTab(tab.id)\">\n <img class=\"tk-workspaces__tab-icon\" [src]=\"tab.icon\" alt=\"\" />\n {{ tab.label }}\n </button>\n </nav>\n\n <ng-container *ngIf=\"activeTab === 'workspaces'; else placeholder\">\n <app-loader *ngIf=\"isLoading\"></app-loader>\n\n <tk-workspaces-filters\n [resultCount]=\"total\"\n [typeOptions]=\"typeOptions\"\n [locationOptions]=\"locationOptions\"\n (searchChange)=\"onSearchChange($event)\"\n (typeChange)=\"onTypeFilterChange($event)\"\n (locationChange)=\"onLocationFilterChange($event)\"\n (addWorkspace)=\"addWorkspace.emit()\">\n </tk-workspaces-filters>\n\n <tk-workspaces-table\n [workspaces]=\"filteredWorkspaces\"\n [total]=\"filteredTotal\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pendingWorkspaceIds]=\"pendingWorkspaceIds\"\n (openWorkspace)=\"onOpenWorkspace($event)\"\n (licenseWithHybrid)=\"onMoveToMT($event)\"\n (migrateToMT)=\"onMoveToMT($event)\"\n (enableWebexCalling)=\"onEnableWebexCalling($event)\"\n (migrateToUCM)=\"onMigrateToUCM($event)\"\n (addDevice)=\"addDevice.emit($event)\"\n (pageChange)=\"onPageChange($event)\">\n </tk-workspaces-table>\n </ng-container>\n\n <ng-template #placeholder>\n <div class=\"tk-workspaces__placeholder\">This section isn't available in this widget yet.</div>\n </ng-template>\n </ng-container>\n\n <ng-template #detailView>\n <tk-workspace-detail\n *ngIf=\"selectedWorkspace\"\n [workspace]=\"selectedWorkspace\"\n [connectionType]=\"selectedConnectionType\"\n [customerId]=\"customerId\"\n (back)=\"onBackToList()\">\n </tk-workspace-detail>\n </ng-template>\n</div>\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"] }]
|
|
1191
|
+
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 (openWorkspace)=\"onOpenWorkspace($event)\"\r\n (licenseWithHybrid)=\"onMoveToMT($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"] }]
|
|
1174
1192
|
}], ctorParameters: function () { return [{ type: APIService }, { type: ApiWebexService }, { type: WorkspacesService }, { type: WorkspacesMigrationService }, { type: i1.MatDialog }, { type: i1$1.Location }]; }, propDecorators: { host: [{
|
|
1175
1193
|
type: Input
|
|
1176
1194
|
}], token: [{
|