@tuki-io/tuki-widgets 0.0.219-dev.55 → 0.0.219-dev.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/esm2020/meetings/public-api.mjs +1 -1
  2. package/esm2020/meetings/src/components/live-meetings/live-meeting/live-meeting.component.mjs +3 -3
  3. package/esm2020/meetings/src/components/meeting-spaces/meeting-space/meeting-space.component.mjs +3 -3
  4. package/esm2020/meetings/src/material.module.mjs +1 -1
  5. package/esm2020/meetings/src/services/api.service.mjs +1 -1
  6. package/esm2020/user-device-manage/src/device-manage-widget.component.mjs +3 -3
  7. package/esm2020/user-manage/src/app.constants.mjs +2 -1
  8. package/esm2020/user-manage/src/classes/simplified-user.mjs +15 -2
  9. package/esm2020/user-manage/src/device-list/device-row/device-row.component.mjs +3 -3
  10. package/esm2020/user-manage/src/lazy-loading-select/lazy-loading-select.component.mjs +9 -5
  11. package/esm2020/user-manage/src/material.module.mjs +14 -7
  12. package/esm2020/user-manage/src/services/site-settings.service.mjs +11 -4
  13. package/esm2020/user-manage/src/services/user.service.mjs +30 -1
  14. package/esm2020/user-manage/src/user-manage-widget.component.mjs +42 -26
  15. package/esm2020/user-manage/src/user-manage.module.mjs +5 -2
  16. package/esm2020/user-manage/src/user-summary/user-summary.component.mjs +30 -0
  17. package/esm2020/workspaces/src/components/workspace-confirm-dialog/workspace-confirm-dialog.component.mjs +3 -3
  18. package/esm2020/workspaces/src/components/workspace-device-detail/workspace-device-detail.component.mjs +3 -3
  19. package/esm2020/workspaces/src/services/api-webex.service.mjs +1 -1
  20. package/esm2020/workspaces/src/utils/workspace-name.mjs +1 -1
  21. package/fesm2015/tuki-io-tuki-widgets-meetings.mjs +4 -4
  22. package/fesm2015/tuki-io-tuki-widgets-meetings.mjs.map +1 -1
  23. package/fesm2015/tuki-io-tuki-widgets-user-device-manage.mjs +2 -2
  24. package/fesm2015/tuki-io-tuki-widgets-user-device-manage.mjs.map +1 -1
  25. package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs +153 -49
  26. package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
  27. package/fesm2015/tuki-io-tuki-widgets-workspaces.mjs +4 -4
  28. package/fesm2015/tuki-io-tuki-widgets-workspaces.mjs.map +1 -1
  29. package/fesm2020/tuki-io-tuki-widgets-meetings.mjs +4 -4
  30. package/fesm2020/tuki-io-tuki-widgets-meetings.mjs.map +1 -1
  31. package/fesm2020/tuki-io-tuki-widgets-user-device-manage.mjs +2 -2
  32. package/fesm2020/tuki-io-tuki-widgets-user-device-manage.mjs.map +1 -1
  33. package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs +143 -43
  34. package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
  35. package/fesm2020/tuki-io-tuki-widgets-workspaces.mjs +4 -4
  36. package/fesm2020/tuki-io-tuki-widgets-workspaces.mjs.map +1 -1
  37. package/package.json +1 -1
  38. package/user-manage/src/app.constants.d.ts +1 -0
  39. package/user-manage/src/classes/simplified-user.d.ts +6 -0
  40. package/user-manage/src/material.module.d.ts +2 -1
  41. package/user-manage/src/services/user.service.d.ts +11 -0
  42. package/user-manage/src/user-manage-widget.component.d.ts +4 -0
  43. package/user-manage/src/user-manage.module.d.ts +9 -8
  44. package/user-manage/src/user-summary/user-summary.component.d.ts +10 -0
package/fesm2020/tuki-io-tuki-widgets-workspaces.mjs CHANGED
@@ -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 () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
122
122
  type: Inject,
123
123
  args: [MAT_DIALOG_DATA]
@@ -786,10 +786,10 @@ class WorkspaceDeviceDetailComponent {
786
786
  }
787
787
  }
788
788
  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 &amp; 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 &amp; 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" }] });
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()\">\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 &amp; 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 &amp; 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
790
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceDeviceDetailComponent, decorators: [{
791
791
  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 &amp; 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 &amp; 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"] }]
792
+ 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 &amp; 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 &amp; 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
793
  }], propDecorators: { workspace: [{
794
794
  type: Input
795
795
  }], device: [{