@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-meetings.mjs CHANGED
@@ -412,10 +412,10 @@ class MeetingSpaceComponent {
412
412
  }
413
413
  }
414
414
  MeetingSpaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpaceComponent, deps: [{ token: MeetingSpacesService }], target: i0.ɵɵFactoryTarget.Component });
415
- MeetingSpaceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingSpaceComponent, selector: "tk-meeting-space", inputs: { mode: "mode", meetingSpaceId: "meetingSpaceId" }, outputs: { back: "back", saved: "saved" }, ngImport: i0, template: "<app-loader *ngIf=\"isLoading || isSaving\"></app-loader>\n\n<form class=\"tk-meeting-space\" *ngIf=\"!isLoading\" (ngSubmit)=\"onSubmit()\">\n <div class=\"tk-meeting-space__breadcrumb\">\n <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\n <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\n <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\n </div>\n\n <div class=\"tk-meeting-space__header\">\n <div class=\"tk-meeting-space__icon\">\n <mat-icon>videocam</mat-icon>\n </div>\n <div class=\"tk-meeting-space__heading\">\n <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\n <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\n <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\n <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\n {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\n </p>\n </div>\n </div>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">General information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Space name *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"name\" placeholder=\"e.g. Executive Boardroom\" [(ngModel)]=\"details.name\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Owner *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"owner\" placeholder=\"owner@tuki.io\" [(ngModel)]=\"details.owner\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Description</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"description\" placeholder=\"Weekly executive strategy sync\" [(ngModel)]=\"details.description\">\n <span class=\"tk-meeting-space__hint\">Shown in invitations and the space directory.</span>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Cluster</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"cluster\" [(ngModel)]=\"details.cluster\">\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Space tag</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"tag\" placeholder=\"e.g. Leadership\" [(ngModel)]=\"details.tag\">\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting ID *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingId\" placeholder=\"e.g. 4427100\" [(ngModel)]=\"details.meetingId\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting URI *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingUri\" placeholder=\"space@tuki.io\" [(ngModel)]=\"details.meetingUri\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Secondary URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"secondaryUri\" placeholder=\"space.alt@tuki.io\" [(ngModel)]=\"details.secondaryUri\">\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting password</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"password\" placeholder=\"Optional\" [(ngModel)]=\"details.password\">\n </div>\n </div>\n\n <div class=\"tk-meeting-space__status-row\">\n <div>\n <p class=\"tk-meeting-space__status-row-label\">Space status</p>\n <p class=\"tk-meeting-space__hint\">Disabled spaces cannot activate meetings but keep their configuration.</p>\n </div>\n <div class=\"tk-meeting-space__status-row-actions\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.enabled\"\n (change)=\"details.enabled = !details.enabled\">\n {{ details.enabled ? 'Enabled' : 'Disabled' }}\n </mat-slide-toggle>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Join information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting ID</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingId\" disabled>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video address / SIP URI</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingUri\" disabled>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Browser join link</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.browser_join_link\" disabled>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header tk-meeting-space__section-header--row\">\n <div class=\"tk-meeting-space__section-header-text\">\n <h3 class=\"tk-meeting-space__section-title\">Access roles and security</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\n </div>\n <div class=\"tk-meeting-space__section-header-actions\">\n <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\n <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\n Add role\n </button>\n </div>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n <div class=\"tk-meeting-space__role-header\">\n <div class=\"tk-meeting-space__role-header-info\">\n <span class=\"tk-meeting-space__role-icon\">\n <img src=\"assets/icons/people-regular.svg\" alt=\"\">\n </span>\n <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\n <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\n </div>\n <button\n type=\"button\"\n class=\"tk-meeting-space__role-remove\"\n (click)=\"removeAccessRole(role)\"\n aria-label=\"Remove role\">\n <img src=\"assets/icons/delete-regular.svg\" alt=\"\">\n </button>\n </div>\n\n <div class=\"tk-meeting-space__role-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Visibility</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n <option value=\"public-directory\">Public directory</option>\n <option value=\"members-guests\">Members + guests</option>\n <option value=\"members-only\">Members only</option>\n <option value=\"owner-only\">Owner only</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Passcode</label>\n <input class=\"tk-meeting-space__input blue-input\" [name]=\"'passcode-' + role.id\" placeholder=\"\" [(ngModel)]=\"role.passcode\">\n <span class=\"tk-meeting-space__hint\">Numeric, minimum 4 digits (server policy).</span>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__checkboxes\">\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" [name]=\"'activates-' + role.id\" \n [(ngModel)]=\"role.activatesMeetingOnJoin\">\n Activates the meeting on join\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n Participants wait in lobby\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n Allow unauthenticated join\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n Grant meeting host controls\n </mat-checkbox>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Meeting experience</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <p class=\"tk-meeting-space__label\">Default video layout</p>\n <div class=\"tk-meeting-space__layouts\">\n <button\n type=\"button\"\n *ngFor=\"let layout of videoLayouts\"\n class=\"tk-meeting-space__layout\"\n [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\n (click)=\"details.defaultVideoLayout = layout.value\">\n <span\n class=\"tk-meeting-space__layout-preview\"\n [ngClass]=\"'tk-meeting-space__layout-preview--' + layout.value\">\n <i *ngFor=\"let tile of layoutTiles(layout.tiles)\"></i>\n <span class=\"tk-meeting-space__layout-more\" *ngIf=\"layout.tiles === 0\">More...</span>\n </span>\n <span class=\"tk-meeting-space__layout-label\">{{ layout.label }}</span>\n </button>\n </div>\n\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Participant labels</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.participantLabels\"\n (change)=\"details.participantLabels = !details.participantLabels\">\n {{ details.participantLabels ? 'On' : 'Off' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow presentation</label>\n <div class=\"tk-meeting-space__toggle-row\"> <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowPresentation\"\n (change)=\"details.allowPresentation = !details.allowPresentation\">\n {{ details.allowPresentation ? 'On' : 'Off' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Disconnect others allowed</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.disconnectOthersAllowed\"\n (change)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n {{ details.disconnectOthersAllowed ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video quality</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"videoQuality\" [(ngModel)]=\"details.videoQuality\">\n <option *ngFor=\"let quality of videoQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Presentation quality</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"presentationQuality\" [(ngModel)]=\"details.presentationQuality\">\n <option *ngFor=\"let quality of presentationQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Recording and streaming</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow recording</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowRecording\"\n (change)=\"details.allowRecording = !details.allowRecording\">\n {{ details.allowRecording ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow streaming</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowStreaming\"\n (change)=\"details.allowStreaming = !details.allowStreaming\">\n {{ details.allowStreaming ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">SIP recorder URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipRecorderUri\" placeholder=\"sip:recorder@tuki.io\" [(ngModel)]=\"details.sipRecorderUri\">\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">SIP streamer URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\n </div>\n </div>\n </div>\n </section>\n\n <div class=\"tk-meeting-space__footer\">\n <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\n <div class=\"tk-meeting-space__footer-actions\">\n <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\n <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\n </div>\n </div>\n</form>\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-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;background:#fff;border:.0625rem solid rgba(0,0,0,.2);border-radius:8px}.tk-meeting-space__section-header{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.25rem;padding:1rem 1.25rem .75rem;border-bottom:.0625rem solid rgba(0,0,0,.2)}.tk-meeting-space__section-content{padding:1.25rem}.tk-meeting-space__section-header--row{flex-direction:row;align-items:center}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.875rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:.125rem 0 0;font-size:.78125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__toggle-field{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.875rem;font-weight:400;color:#000000f2;box-sizing:border-box;border:solid .0625rem rgba(0,0,0,.5019607843)!important}.tk-meeting-space__input::placeholder,.tk-meeting-space__select::placeholder{color:#0006}.tk-meeting-space__input:focus,.tk-meeting-space__select:focus{outline:none;border-color:#0006}.tk-meeting-space__input:disabled,.tk-meeting-space__select:disabled{background:rgba(0,0,0,.02);color:#0009}.tk-meeting-space__select:active{background-color:#0003;transition:background-color .1s cubic-bezier(.25,.1,.25,1),border-color .1s cubic-bezier(.25,.1,.25,1),color .1s cubic-bezier(.25,.1,.25,1)}.tk-meeting-space__select option{background-color:#fff;color:#000000f2}.tk-meeting-space__select{appearance:none;padding-right:2rem;cursor:pointer}.tk-meeting-space__select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-space__select-wrap:focus-within .tk-meeting-space__select-icon{transform:rotate(180deg)}.tk-meeting-space__select-icon{position:absolute;right:.75rem;width:1.125rem;height:.75rem;pointer-events:none;transition:transform .15s ease}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid oklch(92% .003 260);justify-content:space-between}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__status-row-actions{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{margin-bottom:1rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:8px;overflow:hidden}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem 1rem;background:oklch(96.5% .003 260/.4);border-bottom:1px solid oklch(92% .003 260)}.tk-meeting-space__role-header-info{display:flex;align-items:center;gap:.5rem;min-width:0}.tk-meeting-space__role-content{padding:1.25rem}.tk-meeting-space__role-icon{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:6px;background:transparent;flex-shrink:0}.tk-meeting-space__role-icon img{width:1rem;height:1rem;opacity:.6}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:340282000000000000000000000000000000000px;background-color:oklch(96% .03 235);border:solid 1px oklch(87% .06 235);color:oklch(38% .12 235);font-size:.6875rem;font-weight:500;font-size:11px;padding-inline:.5rem}.tk-meeting-space__role-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer}.tk-meeting-space__role-remove img{width:1.125rem;height:1.125rem;opacity:.7}.tk-meeting-space__role-remove:hover img{opacity:1}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{display:flex;flex-direction:column;justify-content:center;padding:.5rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;text-align:center;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__layout--selected .tk-meeting-space__layout-preview i{background-color:oklch(85% .02 240)}.tk-meeting-space__layout-preview{display:grid;gap:.125rem;aspect-ratio:16/9;padding:.25rem;margin-bottom:.5rem;background:rgba(0,0,0,.05);border-radius:4px}.tk-meeting-space__layout-preview i{display:block;background:#c3cede;border-radius:2px}.tk-meeting-space__layout-preview--all-equal{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.tk-meeting-space__layout-preview--speaker-only{grid-template-columns:1fr;grid-template-rows:1fr}.tk-meeting-space__layout-preview--telepresence{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.tk-meeting-space__layout-preview--stacked{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}.tk-meeting-space__layout-preview--one-plus-five,.tk-meeting-space__layout-preview--one-plus-seven,.tk-meeting-space__layout-preview--one-plus-nine{grid-template-rows:2fr 1fr}.tk-meeting-space__layout-preview--one-plus-five i:first-child,.tk-meeting-space__layout-preview--one-plus-seven i:first-child,.tk-meeting-space__layout-preview--one-plus-nine i:first-child{grid-column:1/-1}.tk-meeting-space__layout-preview--one-plus-five{grid-template-columns:repeat(5,1fr)}.tk-meeting-space__layout-preview--one-plus-seven{grid-template-columns:repeat(7,1fr)}.tk-meeting-space__layout-preview--one-plus-nine{grid-template-columns:repeat(9,1fr)}.tk-meeting-space__layout-preview--more{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.04)}.tk-meeting-space__layout-more{font-size:.75rem;font-weight:500;color:#b45309}.tk-meeting-space__layout-label{display:block}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
415
+ MeetingSpaceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingSpaceComponent, selector: "tk-meeting-space", inputs: { mode: "mode", meetingSpaceId: "meetingSpaceId" }, outputs: { back: "back", saved: "saved" }, ngImport: i0, template: "<app-loader *ngIf=\"isLoading || isSaving\"></app-loader>\r\n\r\n<form class=\"tk-meeting-space\" *ngIf=\"!isLoading\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"tk-meeting-space__breadcrumb\">\r\n <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\r\n <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\r\n <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__header\">\r\n <div class=\"tk-meeting-space__icon\">\r\n <mat-icon>videocam</mat-icon>\r\n </div>\r\n <div class=\"tk-meeting-space__heading\">\r\n <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\r\n <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\r\n <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\r\n <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\r\n {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <section class=\"tk-meeting-space__section\">\r\n <header class=\"tk-meeting-space__section-header\">\r\n <h3 class=\"tk-meeting-space__section-title\">General information</h3>\r\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\r\n </header>\r\n\r\n <div class=\"tk-meeting-space__section-content\">\r\n <div class=\"tk-meeting-space__grid\">\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Space name *</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"name\" placeholder=\"e.g. Executive Boardroom\" [(ngModel)]=\"details.name\" required>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Owner *</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"owner\" placeholder=\"owner@tuki.io\" [(ngModel)]=\"details.owner\" required>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Description</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"description\" placeholder=\"Weekly executive strategy sync\" [(ngModel)]=\"details.description\">\r\n <span class=\"tk-meeting-space__hint\">Shown in invitations and the space directory.</span>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Cluster</label>\r\n <div class=\"tk-meeting-space__select-wrap\">\r\n <select class=\"tk-meeting-space__select\" name=\"cluster\" [(ngModel)]=\"details.cluster\">\r\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n </select>\r\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Space tag</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"tag\" placeholder=\"e.g. Leadership\" [(ngModel)]=\"details.tag\">\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Meeting ID *</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingId\" placeholder=\"e.g. 4427100\" [(ngModel)]=\"details.meetingId\" required>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Meeting URI *</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingUri\" placeholder=\"space@tuki.io\" [(ngModel)]=\"details.meetingUri\" required>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Secondary URI</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"secondaryUri\" placeholder=\"space.alt@tuki.io\" [(ngModel)]=\"details.secondaryUri\">\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Meeting password</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"password\" placeholder=\"Optional\" [(ngModel)]=\"details.password\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__status-row\">\r\n <div>\r\n <p class=\"tk-meeting-space__status-row-label\">Space status</p>\r\n <p class=\"tk-meeting-space__hint\">Disabled spaces cannot activate meetings but keep their configuration.</p>\r\n </div>\r\n <div class=\"tk-meeting-space__status-row-actions\">\r\n <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.enabled\"\r\n (change)=\"details.enabled = !details.enabled\">\r\n {{ details.enabled ? 'Enabled' : 'Disabled' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\r\n <header class=\"tk-meeting-space__section-header\">\r\n <h3 class=\"tk-meeting-space__section-title\">Join information</h3>\r\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\r\n </header>\r\n\r\n <div class=\"tk-meeting-space__section-content\">\r\n <div class=\"tk-meeting-space__grid\">\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Meeting ID</label>\r\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingId\" disabled>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Video address / SIP URI</label>\r\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingUri\" disabled>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Browser join link</label>\r\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.browser_join_link\" disabled>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-meeting-space__section\">\r\n <header class=\"tk-meeting-space__section-header tk-meeting-space__section-header--row\">\r\n <div class=\"tk-meeting-space__section-header-text\">\r\n <h3 class=\"tk-meeting-space__section-title\">Access roles and security</h3>\r\n <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\r\n </div>\r\n <div class=\"tk-meeting-space__section-header-actions\">\r\n <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\r\n <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\r\n Add role\r\n </button>\r\n </div>\r\n </header>\r\n\r\n <div class=\"tk-meeting-space__section-content\">\r\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\r\n <div class=\"tk-meeting-space__role-header\">\r\n <div class=\"tk-meeting-space__role-header-info\">\r\n <span class=\"tk-meeting-space__role-icon\">\r\n <img src=\"assets/icons/people-regular.svg\" alt=\"\">\r\n </span>\r\n <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\r\n <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"tk-meeting-space__role-remove\"\r\n (click)=\"removeAccessRole(role)\"\r\n aria-label=\"Remove role\">\r\n <img src=\"assets/icons/delete-regular.svg\" alt=\"\">\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__role-content\">\r\n <div class=\"tk-meeting-space__grid\">\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Visibility</label>\r\n <div class=\"tk-meeting-space__select-wrap\">\r\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\r\n <option value=\"public-directory\">Public directory</option>\r\n <option value=\"members-guests\">Members + guests</option>\r\n <option value=\"members-only\">Members only</option>\r\n <option value=\"owner-only\">Owner only</option>\r\n </select>\r\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Passcode</label>\r\n <input class=\"tk-meeting-space__input blue-input\" [name]=\"'passcode-' + role.id\" placeholder=\"\" [(ngModel)]=\"role.passcode\">\r\n <span class=\"tk-meeting-space__hint\">Numeric, minimum 4 digits (server policy).</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__checkboxes\">\r\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" [name]=\"'activates-' + role.id\" \r\n [(ngModel)]=\"role.activatesMeetingOnJoin\">\r\n Activates the meeting on join\r\n </mat-checkbox>\r\n\r\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \r\n type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\r\n Participants wait in lobby\r\n </mat-checkbox>\r\n\r\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \r\n type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\r\n Allow unauthenticated join\r\n </mat-checkbox>\r\n\r\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \r\n type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\r\n Grant meeting host controls\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-meeting-space__section\">\r\n <header class=\"tk-meeting-space__section-header\">\r\n <h3 class=\"tk-meeting-space__section-title\">Meeting experience</h3>\r\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\r\n </header>\r\n\r\n <div class=\"tk-meeting-space__section-content\">\r\n <p class=\"tk-meeting-space__label\">Default video layout</p>\r\n <div class=\"tk-meeting-space__layouts\">\r\n <button\r\n type=\"button\"\r\n *ngFor=\"let layout of videoLayouts\"\r\n class=\"tk-meeting-space__layout\"\r\n [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\r\n (click)=\"details.defaultVideoLayout = layout.value\">\r\n <span\r\n class=\"tk-meeting-space__layout-preview\"\r\n [ngClass]=\"'tk-meeting-space__layout-preview--' + layout.value\">\r\n <i *ngFor=\"let tile of layoutTiles(layout.tiles)\"></i>\r\n <span class=\"tk-meeting-space__layout-more\" *ngIf=\"layout.tiles === 0\">More...</span>\r\n </span>\r\n <span class=\"tk-meeting-space__layout-label\">{{ layout.label }}</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\r\n <div class=\"tk-meeting-space__toggle-field\">\r\n <label class=\"tk-meeting-space__label\">Participant labels</label>\r\n <div class=\"tk-meeting-space__toggle-row\">\r\n <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.participantLabels\"\r\n (change)=\"details.participantLabels = !details.participantLabels\">\r\n {{ details.participantLabels ? 'On' : 'Off' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__toggle-field\">\r\n <label class=\"tk-meeting-space__label\">Allow presentation</label>\r\n <div class=\"tk-meeting-space__toggle-row\"> <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.allowPresentation\"\r\n (change)=\"details.allowPresentation = !details.allowPresentation\">\r\n {{ details.allowPresentation ? 'On' : 'Off' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__toggle-field\">\r\n <label class=\"tk-meeting-space__label\">Disconnect others allowed</label>\r\n <div class=\"tk-meeting-space__toggle-row\">\r\n <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.disconnectOthersAllowed\"\r\n (change)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\r\n {{ details.disconnectOthersAllowed ? 'True' : 'False' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Video quality</label>\r\n <div class=\"tk-meeting-space__select-wrap\">\r\n <select class=\"tk-meeting-space__select\" name=\"videoQuality\" [(ngModel)]=\"details.videoQuality\">\r\n <option *ngFor=\"let quality of videoQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\r\n </select>\r\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Presentation quality</label>\r\n <div class=\"tk-meeting-space__select-wrap\">\r\n <select class=\"tk-meeting-space__select\" name=\"presentationQuality\" [(ngModel)]=\"details.presentationQuality\">\r\n <option *ngFor=\"let quality of presentationQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\r\n </select>\r\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-meeting-space__section\">\r\n <header class=\"tk-meeting-space__section-header\">\r\n <h3 class=\"tk-meeting-space__section-title\">Recording and streaming</h3>\r\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\r\n </header>\r\n\r\n <div class=\"tk-meeting-space__section-content\">\r\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\r\n <div class=\"tk-meeting-space__toggle-field\">\r\n <label class=\"tk-meeting-space__label\">Allow recording</label>\r\n <div class=\"tk-meeting-space__toggle-row\">\r\n <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.allowRecording\"\r\n (change)=\"details.allowRecording = !details.allowRecording\">\r\n {{ details.allowRecording ? 'True' : 'False' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__toggle-field\">\r\n <label class=\"tk-meeting-space__label\">Allow streaming</label>\r\n <div class=\"tk-meeting-space__toggle-row\">\r\n <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.allowStreaming\"\r\n (change)=\"details.allowStreaming = !details.allowStreaming\">\r\n {{ details.allowStreaming ? 'True' : 'False' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">SIP recorder URI</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipRecorderUri\" placeholder=\"sip:recorder@tuki.io\" [(ngModel)]=\"details.sipRecorderUri\">\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">SIP streamer URI</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <div class=\"tk-meeting-space__footer\">\r\n <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\r\n <div class=\"tk-meeting-space__footer-actions\">\r\n <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\r\n </div>\r\n </div>\r\n</form>\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-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;background:#fff;border:.0625rem solid rgba(0,0,0,.2);border-radius:8px}.tk-meeting-space__section-header{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.25rem;padding:1rem 1.25rem .75rem;border-bottom:.0625rem solid rgba(0,0,0,.2)}.tk-meeting-space__section-content{padding:1.25rem}.tk-meeting-space__section-header--row{flex-direction:row;align-items:center}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.875rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:.125rem 0 0;font-size:.78125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__toggle-field{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.875rem;font-weight:400;color:#000000f2;box-sizing:border-box;border:solid .0625rem rgba(0,0,0,.5019607843)!important}.tk-meeting-space__input::placeholder,.tk-meeting-space__select::placeholder{color:#0006}.tk-meeting-space__input:focus,.tk-meeting-space__select:focus{outline:none;border-color:#0006}.tk-meeting-space__input:disabled,.tk-meeting-space__select:disabled{background:rgba(0,0,0,.02);color:#0009}.tk-meeting-space__select:active{background-color:#0003;transition:background-color .1s cubic-bezier(.25,.1,.25,1),border-color .1s cubic-bezier(.25,.1,.25,1),color .1s cubic-bezier(.25,.1,.25,1)}.tk-meeting-space__select option{background-color:#fff;color:#000000f2}.tk-meeting-space__select{appearance:none;padding-right:2rem;cursor:pointer}.tk-meeting-space__select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-space__select-wrap:focus-within .tk-meeting-space__select-icon{transform:rotate(180deg)}.tk-meeting-space__select-icon{position:absolute;right:.75rem;width:1.125rem;height:.75rem;pointer-events:none;transition:transform .15s ease}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid oklch(92% .003 260);justify-content:space-between}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__status-row-actions{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{margin-bottom:1rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:8px;overflow:hidden}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem 1rem;background:oklch(96.5% .003 260/.4);border-bottom:1px solid oklch(92% .003 260)}.tk-meeting-space__role-header-info{display:flex;align-items:center;gap:.5rem;min-width:0}.tk-meeting-space__role-content{padding:1.25rem}.tk-meeting-space__role-icon{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:6px;background:transparent;flex-shrink:0}.tk-meeting-space__role-icon img{width:1rem;height:1rem;opacity:.6}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:340282000000000000000000000000000000000px;background-color:oklch(96% .03 235);border:solid 1px oklch(87% .06 235);color:oklch(38% .12 235);font-size:.6875rem;font-weight:500;font-size:11px;padding-inline:.5rem}.tk-meeting-space__role-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer}.tk-meeting-space__role-remove img{width:1.125rem;height:1.125rem;opacity:.7}.tk-meeting-space__role-remove:hover img{opacity:1}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{display:flex;flex-direction:column;justify-content:center;padding:.5rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;text-align:center;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__layout--selected .tk-meeting-space__layout-preview i{background-color:oklch(85% .02 240)}.tk-meeting-space__layout-preview{display:grid;gap:.125rem;aspect-ratio:16/9;padding:.25rem;margin-bottom:.5rem;background:rgba(0,0,0,.05);border-radius:4px}.tk-meeting-space__layout-preview i{display:block;background:#c3cede;border-radius:2px}.tk-meeting-space__layout-preview--all-equal{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.tk-meeting-space__layout-preview--speaker-only{grid-template-columns:1fr;grid-template-rows:1fr}.tk-meeting-space__layout-preview--telepresence{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.tk-meeting-space__layout-preview--stacked{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}.tk-meeting-space__layout-preview--one-plus-five,.tk-meeting-space__layout-preview--one-plus-seven,.tk-meeting-space__layout-preview--one-plus-nine{grid-template-rows:2fr 1fr}.tk-meeting-space__layout-preview--one-plus-five i:first-child,.tk-meeting-space__layout-preview--one-plus-seven i:first-child,.tk-meeting-space__layout-preview--one-plus-nine i:first-child{grid-column:1/-1}.tk-meeting-space__layout-preview--one-plus-five{grid-template-columns:repeat(5,1fr)}.tk-meeting-space__layout-preview--one-plus-seven{grid-template-columns:repeat(7,1fr)}.tk-meeting-space__layout-preview--one-plus-nine{grid-template-columns:repeat(9,1fr)}.tk-meeting-space__layout-preview--more{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.04)}.tk-meeting-space__layout-more{font-size:.75rem;font-weight:500;color:#b45309}.tk-meeting-space__layout-label{display:block}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
416
416
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpaceComponent, decorators: [{
417
417
  type: Component,
418
- args: [{ selector: 'tk-meeting-space', template: "<app-loader *ngIf=\"isLoading || isSaving\"></app-loader>\n\n<form class=\"tk-meeting-space\" *ngIf=\"!isLoading\" (ngSubmit)=\"onSubmit()\">\n <div class=\"tk-meeting-space__breadcrumb\">\n <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\n <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\n <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\n </div>\n\n <div class=\"tk-meeting-space__header\">\n <div class=\"tk-meeting-space__icon\">\n <mat-icon>videocam</mat-icon>\n </div>\n <div class=\"tk-meeting-space__heading\">\n <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\n <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\n <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\n <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\n {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\n </p>\n </div>\n </div>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">General information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Space name *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"name\" placeholder=\"e.g. Executive Boardroom\" [(ngModel)]=\"details.name\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Owner *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"owner\" placeholder=\"owner@tuki.io\" [(ngModel)]=\"details.owner\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Description</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"description\" placeholder=\"Weekly executive strategy sync\" [(ngModel)]=\"details.description\">\n <span class=\"tk-meeting-space__hint\">Shown in invitations and the space directory.</span>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Cluster</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"cluster\" [(ngModel)]=\"details.cluster\">\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Space tag</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"tag\" placeholder=\"e.g. Leadership\" [(ngModel)]=\"details.tag\">\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting ID *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingId\" placeholder=\"e.g. 4427100\" [(ngModel)]=\"details.meetingId\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting URI *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingUri\" placeholder=\"space@tuki.io\" [(ngModel)]=\"details.meetingUri\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Secondary URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"secondaryUri\" placeholder=\"space.alt@tuki.io\" [(ngModel)]=\"details.secondaryUri\">\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting password</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"password\" placeholder=\"Optional\" [(ngModel)]=\"details.password\">\n </div>\n </div>\n\n <div class=\"tk-meeting-space__status-row\">\n <div>\n <p class=\"tk-meeting-space__status-row-label\">Space status</p>\n <p class=\"tk-meeting-space__hint\">Disabled spaces cannot activate meetings but keep their configuration.</p>\n </div>\n <div class=\"tk-meeting-space__status-row-actions\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.enabled\"\n (change)=\"details.enabled = !details.enabled\">\n {{ details.enabled ? 'Enabled' : 'Disabled' }}\n </mat-slide-toggle>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Join information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting ID</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingId\" disabled>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video address / SIP URI</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingUri\" disabled>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Browser join link</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.browser_join_link\" disabled>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header tk-meeting-space__section-header--row\">\n <div class=\"tk-meeting-space__section-header-text\">\n <h3 class=\"tk-meeting-space__section-title\">Access roles and security</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\n </div>\n <div class=\"tk-meeting-space__section-header-actions\">\n <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\n <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\n Add role\n </button>\n </div>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n <div class=\"tk-meeting-space__role-header\">\n <div class=\"tk-meeting-space__role-header-info\">\n <span class=\"tk-meeting-space__role-icon\">\n <img src=\"assets/icons/people-regular.svg\" alt=\"\">\n </span>\n <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\n <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\n </div>\n <button\n type=\"button\"\n class=\"tk-meeting-space__role-remove\"\n (click)=\"removeAccessRole(role)\"\n aria-label=\"Remove role\">\n <img src=\"assets/icons/delete-regular.svg\" alt=\"\">\n </button>\n </div>\n\n <div class=\"tk-meeting-space__role-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Visibility</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n <option value=\"public-directory\">Public directory</option>\n <option value=\"members-guests\">Members + guests</option>\n <option value=\"members-only\">Members only</option>\n <option value=\"owner-only\">Owner only</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Passcode</label>\n <input class=\"tk-meeting-space__input blue-input\" [name]=\"'passcode-' + role.id\" placeholder=\"\" [(ngModel)]=\"role.passcode\">\n <span class=\"tk-meeting-space__hint\">Numeric, minimum 4 digits (server policy).</span>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__checkboxes\">\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" [name]=\"'activates-' + role.id\" \n [(ngModel)]=\"role.activatesMeetingOnJoin\">\n Activates the meeting on join\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n Participants wait in lobby\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n Allow unauthenticated join\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n Grant meeting host controls\n </mat-checkbox>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Meeting experience</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <p class=\"tk-meeting-space__label\">Default video layout</p>\n <div class=\"tk-meeting-space__layouts\">\n <button\n type=\"button\"\n *ngFor=\"let layout of videoLayouts\"\n class=\"tk-meeting-space__layout\"\n [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\n (click)=\"details.defaultVideoLayout = layout.value\">\n <span\n class=\"tk-meeting-space__layout-preview\"\n [ngClass]=\"'tk-meeting-space__layout-preview--' + layout.value\">\n <i *ngFor=\"let tile of layoutTiles(layout.tiles)\"></i>\n <span class=\"tk-meeting-space__layout-more\" *ngIf=\"layout.tiles === 0\">More...</span>\n </span>\n <span class=\"tk-meeting-space__layout-label\">{{ layout.label }}</span>\n </button>\n </div>\n\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Participant labels</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.participantLabels\"\n (change)=\"details.participantLabels = !details.participantLabels\">\n {{ details.participantLabels ? 'On' : 'Off' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow presentation</label>\n <div class=\"tk-meeting-space__toggle-row\"> <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowPresentation\"\n (change)=\"details.allowPresentation = !details.allowPresentation\">\n {{ details.allowPresentation ? 'On' : 'Off' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Disconnect others allowed</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.disconnectOthersAllowed\"\n (change)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n {{ details.disconnectOthersAllowed ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video quality</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"videoQuality\" [(ngModel)]=\"details.videoQuality\">\n <option *ngFor=\"let quality of videoQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Presentation quality</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"presentationQuality\" [(ngModel)]=\"details.presentationQuality\">\n <option *ngFor=\"let quality of presentationQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Recording and streaming</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow recording</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowRecording\"\n (change)=\"details.allowRecording = !details.allowRecording\">\n {{ details.allowRecording ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow streaming</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowStreaming\"\n (change)=\"details.allowStreaming = !details.allowStreaming\">\n {{ details.allowStreaming ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">SIP recorder URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipRecorderUri\" placeholder=\"sip:recorder@tuki.io\" [(ngModel)]=\"details.sipRecorderUri\">\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">SIP streamer URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\n </div>\n </div>\n </div>\n </section>\n\n <div class=\"tk-meeting-space__footer\">\n <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\n <div class=\"tk-meeting-space__footer-actions\">\n <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\n <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\n </div>\n </div>\n</form>\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-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;background:#fff;border:.0625rem solid rgba(0,0,0,.2);border-radius:8px}.tk-meeting-space__section-header{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.25rem;padding:1rem 1.25rem .75rem;border-bottom:.0625rem solid rgba(0,0,0,.2)}.tk-meeting-space__section-content{padding:1.25rem}.tk-meeting-space__section-header--row{flex-direction:row;align-items:center}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.875rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:.125rem 0 0;font-size:.78125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__toggle-field{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.875rem;font-weight:400;color:#000000f2;box-sizing:border-box;border:solid .0625rem rgba(0,0,0,.5019607843)!important}.tk-meeting-space__input::placeholder,.tk-meeting-space__select::placeholder{color:#0006}.tk-meeting-space__input:focus,.tk-meeting-space__select:focus{outline:none;border-color:#0006}.tk-meeting-space__input:disabled,.tk-meeting-space__select:disabled{background:rgba(0,0,0,.02);color:#0009}.tk-meeting-space__select:active{background-color:#0003;transition:background-color .1s cubic-bezier(.25,.1,.25,1),border-color .1s cubic-bezier(.25,.1,.25,1),color .1s cubic-bezier(.25,.1,.25,1)}.tk-meeting-space__select option{background-color:#fff;color:#000000f2}.tk-meeting-space__select{appearance:none;padding-right:2rem;cursor:pointer}.tk-meeting-space__select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-space__select-wrap:focus-within .tk-meeting-space__select-icon{transform:rotate(180deg)}.tk-meeting-space__select-icon{position:absolute;right:.75rem;width:1.125rem;height:.75rem;pointer-events:none;transition:transform .15s ease}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid oklch(92% .003 260);justify-content:space-between}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__status-row-actions{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{margin-bottom:1rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:8px;overflow:hidden}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem 1rem;background:oklch(96.5% .003 260/.4);border-bottom:1px solid oklch(92% .003 260)}.tk-meeting-space__role-header-info{display:flex;align-items:center;gap:.5rem;min-width:0}.tk-meeting-space__role-content{padding:1.25rem}.tk-meeting-space__role-icon{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:6px;background:transparent;flex-shrink:0}.tk-meeting-space__role-icon img{width:1rem;height:1rem;opacity:.6}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:340282000000000000000000000000000000000px;background-color:oklch(96% .03 235);border:solid 1px oklch(87% .06 235);color:oklch(38% .12 235);font-size:.6875rem;font-weight:500;font-size:11px;padding-inline:.5rem}.tk-meeting-space__role-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer}.tk-meeting-space__role-remove img{width:1.125rem;height:1.125rem;opacity:.7}.tk-meeting-space__role-remove:hover img{opacity:1}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{display:flex;flex-direction:column;justify-content:center;padding:.5rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;text-align:center;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__layout--selected .tk-meeting-space__layout-preview i{background-color:oklch(85% .02 240)}.tk-meeting-space__layout-preview{display:grid;gap:.125rem;aspect-ratio:16/9;padding:.25rem;margin-bottom:.5rem;background:rgba(0,0,0,.05);border-radius:4px}.tk-meeting-space__layout-preview i{display:block;background:#c3cede;border-radius:2px}.tk-meeting-space__layout-preview--all-equal{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.tk-meeting-space__layout-preview--speaker-only{grid-template-columns:1fr;grid-template-rows:1fr}.tk-meeting-space__layout-preview--telepresence{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.tk-meeting-space__layout-preview--stacked{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}.tk-meeting-space__layout-preview--one-plus-five,.tk-meeting-space__layout-preview--one-plus-seven,.tk-meeting-space__layout-preview--one-plus-nine{grid-template-rows:2fr 1fr}.tk-meeting-space__layout-preview--one-plus-five i:first-child,.tk-meeting-space__layout-preview--one-plus-seven i:first-child,.tk-meeting-space__layout-preview--one-plus-nine i:first-child{grid-column:1/-1}.tk-meeting-space__layout-preview--one-plus-five{grid-template-columns:repeat(5,1fr)}.tk-meeting-space__layout-preview--one-plus-seven{grid-template-columns:repeat(7,1fr)}.tk-meeting-space__layout-preview--one-plus-nine{grid-template-columns:repeat(9,1fr)}.tk-meeting-space__layout-preview--more{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.04)}.tk-meeting-space__layout-more{font-size:.75rem;font-weight:500;color:#b45309}.tk-meeting-space__layout-label{display:block}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"] }]
418
+ args: [{ selector: 'tk-meeting-space', template: "<app-loader *ngIf=\"isLoading || isSaving\"></app-loader>\r\n\r\n<form class=\"tk-meeting-space\" *ngIf=\"!isLoading\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"tk-meeting-space__breadcrumb\">\r\n <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\r\n <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\r\n <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__header\">\r\n <div class=\"tk-meeting-space__icon\">\r\n <mat-icon>videocam</mat-icon>\r\n </div>\r\n <div class=\"tk-meeting-space__heading\">\r\n <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\r\n <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\r\n <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\r\n <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\r\n {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <section class=\"tk-meeting-space__section\">\r\n <header class=\"tk-meeting-space__section-header\">\r\n <h3 class=\"tk-meeting-space__section-title\">General information</h3>\r\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\r\n </header>\r\n\r\n <div class=\"tk-meeting-space__section-content\">\r\n <div class=\"tk-meeting-space__grid\">\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Space name *</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"name\" placeholder=\"e.g. Executive Boardroom\" [(ngModel)]=\"details.name\" required>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Owner *</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"owner\" placeholder=\"owner@tuki.io\" [(ngModel)]=\"details.owner\" required>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Description</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"description\" placeholder=\"Weekly executive strategy sync\" [(ngModel)]=\"details.description\">\r\n <span class=\"tk-meeting-space__hint\">Shown in invitations and the space directory.</span>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Cluster</label>\r\n <div class=\"tk-meeting-space__select-wrap\">\r\n <select class=\"tk-meeting-space__select\" name=\"cluster\" [(ngModel)]=\"details.cluster\">\r\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n </select>\r\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Space tag</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"tag\" placeholder=\"e.g. Leadership\" [(ngModel)]=\"details.tag\">\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Meeting ID *</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingId\" placeholder=\"e.g. 4427100\" [(ngModel)]=\"details.meetingId\" required>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Meeting URI *</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingUri\" placeholder=\"space@tuki.io\" [(ngModel)]=\"details.meetingUri\" required>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Secondary URI</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"secondaryUri\" placeholder=\"space.alt@tuki.io\" [(ngModel)]=\"details.secondaryUri\">\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Meeting password</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"password\" placeholder=\"Optional\" [(ngModel)]=\"details.password\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__status-row\">\r\n <div>\r\n <p class=\"tk-meeting-space__status-row-label\">Space status</p>\r\n <p class=\"tk-meeting-space__hint\">Disabled spaces cannot activate meetings but keep their configuration.</p>\r\n </div>\r\n <div class=\"tk-meeting-space__status-row-actions\">\r\n <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.enabled\"\r\n (change)=\"details.enabled = !details.enabled\">\r\n {{ details.enabled ? 'Enabled' : 'Disabled' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\r\n <header class=\"tk-meeting-space__section-header\">\r\n <h3 class=\"tk-meeting-space__section-title\">Join information</h3>\r\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\r\n </header>\r\n\r\n <div class=\"tk-meeting-space__section-content\">\r\n <div class=\"tk-meeting-space__grid\">\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Meeting ID</label>\r\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingId\" disabled>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Video address / SIP URI</label>\r\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingUri\" disabled>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Browser join link</label>\r\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.browser_join_link\" disabled>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-meeting-space__section\">\r\n <header class=\"tk-meeting-space__section-header tk-meeting-space__section-header--row\">\r\n <div class=\"tk-meeting-space__section-header-text\">\r\n <h3 class=\"tk-meeting-space__section-title\">Access roles and security</h3>\r\n <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\r\n </div>\r\n <div class=\"tk-meeting-space__section-header-actions\">\r\n <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\r\n <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\r\n Add role\r\n </button>\r\n </div>\r\n </header>\r\n\r\n <div class=\"tk-meeting-space__section-content\">\r\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\r\n <div class=\"tk-meeting-space__role-header\">\r\n <div class=\"tk-meeting-space__role-header-info\">\r\n <span class=\"tk-meeting-space__role-icon\">\r\n <img src=\"assets/icons/people-regular.svg\" alt=\"\">\r\n </span>\r\n <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\r\n <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"tk-meeting-space__role-remove\"\r\n (click)=\"removeAccessRole(role)\"\r\n aria-label=\"Remove role\">\r\n <img src=\"assets/icons/delete-regular.svg\" alt=\"\">\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__role-content\">\r\n <div class=\"tk-meeting-space__grid\">\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Visibility</label>\r\n <div class=\"tk-meeting-space__select-wrap\">\r\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\r\n <option value=\"public-directory\">Public directory</option>\r\n <option value=\"members-guests\">Members + guests</option>\r\n <option value=\"members-only\">Members only</option>\r\n <option value=\"owner-only\">Owner only</option>\r\n </select>\r\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Passcode</label>\r\n <input class=\"tk-meeting-space__input blue-input\" [name]=\"'passcode-' + role.id\" placeholder=\"\" [(ngModel)]=\"role.passcode\">\r\n <span class=\"tk-meeting-space__hint\">Numeric, minimum 4 digits (server policy).</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__checkboxes\">\r\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" [name]=\"'activates-' + role.id\" \r\n [(ngModel)]=\"role.activatesMeetingOnJoin\">\r\n Activates the meeting on join\r\n </mat-checkbox>\r\n\r\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \r\n type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\r\n Participants wait in lobby\r\n </mat-checkbox>\r\n\r\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \r\n type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\r\n Allow unauthenticated join\r\n </mat-checkbox>\r\n\r\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \r\n type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\r\n Grant meeting host controls\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-meeting-space__section\">\r\n <header class=\"tk-meeting-space__section-header\">\r\n <h3 class=\"tk-meeting-space__section-title\">Meeting experience</h3>\r\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\r\n </header>\r\n\r\n <div class=\"tk-meeting-space__section-content\">\r\n <p class=\"tk-meeting-space__label\">Default video layout</p>\r\n <div class=\"tk-meeting-space__layouts\">\r\n <button\r\n type=\"button\"\r\n *ngFor=\"let layout of videoLayouts\"\r\n class=\"tk-meeting-space__layout\"\r\n [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\r\n (click)=\"details.defaultVideoLayout = layout.value\">\r\n <span\r\n class=\"tk-meeting-space__layout-preview\"\r\n [ngClass]=\"'tk-meeting-space__layout-preview--' + layout.value\">\r\n <i *ngFor=\"let tile of layoutTiles(layout.tiles)\"></i>\r\n <span class=\"tk-meeting-space__layout-more\" *ngIf=\"layout.tiles === 0\">More...</span>\r\n </span>\r\n <span class=\"tk-meeting-space__layout-label\">{{ layout.label }}</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\r\n <div class=\"tk-meeting-space__toggle-field\">\r\n <label class=\"tk-meeting-space__label\">Participant labels</label>\r\n <div class=\"tk-meeting-space__toggle-row\">\r\n <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.participantLabels\"\r\n (change)=\"details.participantLabels = !details.participantLabels\">\r\n {{ details.participantLabels ? 'On' : 'Off' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__toggle-field\">\r\n <label class=\"tk-meeting-space__label\">Allow presentation</label>\r\n <div class=\"tk-meeting-space__toggle-row\"> <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.allowPresentation\"\r\n (change)=\"details.allowPresentation = !details.allowPresentation\">\r\n {{ details.allowPresentation ? 'On' : 'Off' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__toggle-field\">\r\n <label class=\"tk-meeting-space__label\">Disconnect others allowed</label>\r\n <div class=\"tk-meeting-space__toggle-row\">\r\n <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.disconnectOthersAllowed\"\r\n (change)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\r\n {{ details.disconnectOthersAllowed ? 'True' : 'False' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Video quality</label>\r\n <div class=\"tk-meeting-space__select-wrap\">\r\n <select class=\"tk-meeting-space__select\" name=\"videoQuality\" [(ngModel)]=\"details.videoQuality\">\r\n <option *ngFor=\"let quality of videoQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\r\n </select>\r\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">Presentation quality</label>\r\n <div class=\"tk-meeting-space__select-wrap\">\r\n <select class=\"tk-meeting-space__select\" name=\"presentationQuality\" [(ngModel)]=\"details.presentationQuality\">\r\n <option *ngFor=\"let quality of presentationQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\r\n </select>\r\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"tk-meeting-space__section\">\r\n <header class=\"tk-meeting-space__section-header\">\r\n <h3 class=\"tk-meeting-space__section-title\">Recording and streaming</h3>\r\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\r\n </header>\r\n\r\n <div class=\"tk-meeting-space__section-content\">\r\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\r\n <div class=\"tk-meeting-space__toggle-field\">\r\n <label class=\"tk-meeting-space__label\">Allow recording</label>\r\n <div class=\"tk-meeting-space__toggle-row\">\r\n <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.allowRecording\"\r\n (change)=\"details.allowRecording = !details.allowRecording\">\r\n {{ details.allowRecording ? 'True' : 'False' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__toggle-field\">\r\n <label class=\"tk-meeting-space__label\">Allow streaming</label>\r\n <div class=\"tk-meeting-space__toggle-row\">\r\n <mat-slide-toggle \r\n class=\"custom-toggle\"\r\n [checked]=\"details.allowStreaming\"\r\n (change)=\"details.allowStreaming = !details.allowStreaming\">\r\n {{ details.allowStreaming ? 'True' : 'False' }}\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">SIP recorder URI</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipRecorderUri\" placeholder=\"sip:recorder@tuki.io\" [(ngModel)]=\"details.sipRecorderUri\">\r\n </div>\r\n\r\n <div class=\"tk-meeting-space__field\">\r\n <label class=\"tk-meeting-space__label\">SIP streamer URI</label>\r\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <div class=\"tk-meeting-space__footer\">\r\n <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\r\n <div class=\"tk-meeting-space__footer-actions\">\r\n <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\r\n <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\r\n </div>\r\n </div>\r\n</form>\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-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;background:#fff;border:.0625rem solid rgba(0,0,0,.2);border-radius:8px}.tk-meeting-space__section-header{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.25rem;padding:1rem 1.25rem .75rem;border-bottom:.0625rem solid rgba(0,0,0,.2)}.tk-meeting-space__section-content{padding:1.25rem}.tk-meeting-space__section-header--row{flex-direction:row;align-items:center}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.875rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:.125rem 0 0;font-size:.78125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__toggle-field{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.875rem;font-weight:400;color:#000000f2;box-sizing:border-box;border:solid .0625rem rgba(0,0,0,.5019607843)!important}.tk-meeting-space__input::placeholder,.tk-meeting-space__select::placeholder{color:#0006}.tk-meeting-space__input:focus,.tk-meeting-space__select:focus{outline:none;border-color:#0006}.tk-meeting-space__input:disabled,.tk-meeting-space__select:disabled{background:rgba(0,0,0,.02);color:#0009}.tk-meeting-space__select:active{background-color:#0003;transition:background-color .1s cubic-bezier(.25,.1,.25,1),border-color .1s cubic-bezier(.25,.1,.25,1),color .1s cubic-bezier(.25,.1,.25,1)}.tk-meeting-space__select option{background-color:#fff;color:#000000f2}.tk-meeting-space__select{appearance:none;padding-right:2rem;cursor:pointer}.tk-meeting-space__select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-space__select-wrap:focus-within .tk-meeting-space__select-icon{transform:rotate(180deg)}.tk-meeting-space__select-icon{position:absolute;right:.75rem;width:1.125rem;height:.75rem;pointer-events:none;transition:transform .15s ease}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid oklch(92% .003 260);justify-content:space-between}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__status-row-actions{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{margin-bottom:1rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:8px;overflow:hidden}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem 1rem;background:oklch(96.5% .003 260/.4);border-bottom:1px solid oklch(92% .003 260)}.tk-meeting-space__role-header-info{display:flex;align-items:center;gap:.5rem;min-width:0}.tk-meeting-space__role-content{padding:1.25rem}.tk-meeting-space__role-icon{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:6px;background:transparent;flex-shrink:0}.tk-meeting-space__role-icon img{width:1rem;height:1rem;opacity:.6}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:340282000000000000000000000000000000000px;background-color:oklch(96% .03 235);border:solid 1px oklch(87% .06 235);color:oklch(38% .12 235);font-size:.6875rem;font-weight:500;font-size:11px;padding-inline:.5rem}.tk-meeting-space__role-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer}.tk-meeting-space__role-remove img{width:1.125rem;height:1.125rem;opacity:.7}.tk-meeting-space__role-remove:hover img{opacity:1}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{display:flex;flex-direction:column;justify-content:center;padding:.5rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;text-align:center;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__layout--selected .tk-meeting-space__layout-preview i{background-color:oklch(85% .02 240)}.tk-meeting-space__layout-preview{display:grid;gap:.125rem;aspect-ratio:16/9;padding:.25rem;margin-bottom:.5rem;background:rgba(0,0,0,.05);border-radius:4px}.tk-meeting-space__layout-preview i{display:block;background:#c3cede;border-radius:2px}.tk-meeting-space__layout-preview--all-equal{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.tk-meeting-space__layout-preview--speaker-only{grid-template-columns:1fr;grid-template-rows:1fr}.tk-meeting-space__layout-preview--telepresence{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.tk-meeting-space__layout-preview--stacked{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}.tk-meeting-space__layout-preview--one-plus-five,.tk-meeting-space__layout-preview--one-plus-seven,.tk-meeting-space__layout-preview--one-plus-nine{grid-template-rows:2fr 1fr}.tk-meeting-space__layout-preview--one-plus-five i:first-child,.tk-meeting-space__layout-preview--one-plus-seven i:first-child,.tk-meeting-space__layout-preview--one-plus-nine i:first-child{grid-column:1/-1}.tk-meeting-space__layout-preview--one-plus-five{grid-template-columns:repeat(5,1fr)}.tk-meeting-space__layout-preview--one-plus-seven{grid-template-columns:repeat(7,1fr)}.tk-meeting-space__layout-preview--one-plus-nine{grid-template-columns:repeat(9,1fr)}.tk-meeting-space__layout-preview--more{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.04)}.tk-meeting-space__layout-more{font-size:.75rem;font-weight:500;color:#b45309}.tk-meeting-space__layout-label{display:block}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"] }]
419
419
  }], ctorParameters: function () { return [{ type: MeetingSpacesService }]; }, propDecorators: { mode: [{
420
420
  type: Input
421
421
  }], meetingSpaceId: [{
@@ -784,10 +784,10 @@ class LiveMeetingComponent {
784
784
  }
785
785
  }
786
786
  LiveMeetingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LiveMeetingComponent, deps: [{ token: LiveMeetingsService }], target: i0.ɵɵFactoryTarget.Component });
787
- LiveMeetingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LiveMeetingComponent, selector: "tk-live-meeting", inputs: { meetingId: "meetingId" }, outputs: { back: "back" }, ngImport: i0, template: "<div class=\"tk-live-meeting\" *ngIf=\"details\" (click)=\"closeActionsMenu()\">\n <div class=\"tk-live-meeting__breadcrumb\">\n <a href=\"javascript:void(0)\" class=\"tk-live-meeting__breadcrumb-link\" (click)=\"onBack()\">Meetings</a>\n <span class=\"tk-live-meeting__breadcrumb-separator\">&rsaquo;</span>\n <a href=\"javascript:void(0)\" class=\"tk-live-meeting__breadcrumb-link\" (click)=\"onBack()\">Live</a>\n <span class=\"tk-live-meeting__breadcrumb-separator\">&rsaquo;</span>\n <span class=\"tk-live-meeting__breadcrumb-current\">{{ details.title }}</span>\n </div>\n\n <div class=\"tk-live-meeting__header\">\n <div class=\"tk-live-meeting__heading\">\n <h1 class=\"tk-live-meeting__title\">{{ details.title }}</h1>\n\n <span class=\"tk-live-meeting__badge tk-live-meeting__badge--live\">\n <span class=\"tk-live-meeting__badge-dot\"></span>\n Live &middot; {{ details.duration }}\n </span>\n\n <span\n class=\"tk-live-meeting__badge\"\n [class.tk-live-meeting__badge--locked]=\"details.lockState === 'locked'\">\n <img *ngIf=\"details.lockState === 'locked'\" class=\"tk-live-meeting__badge-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\n {{ details.lockState === 'locked' ? 'Locked' : 'Unlocked' }}\n </span>\n\n <span class=\"tk-live-meeting__badge tk-live-meeting__badge--recording\" *ngIf=\"details.isRecording\">\n <img class=\"tk-live-meeting__badge-icon\" src=\"assets/icons/record-active-regular.svg\" alt=\"\">\n Recording\n </span>\n\n <span\n class=\"tk-live-meeting__badge tk-live-meeting__badge--quality\"\n [class.tk-live-meeting__badge--quality-good]=\"details.quality === 'good'\"\n [class.tk-live-meeting__badge--quality-fair]=\"details.quality === 'fair'\"\n [class.tk-live-meeting__badge--quality-poor]=\"details.quality === 'poor'\">\n <span class=\"tk-live-meeting__badge-dot\"></span>\n {{ details.quality | titlecase }}\n </span>\n </div>\n\n <p class=\"tk-live-meeting__subline\">\n Owner: <strong>{{ details.ownerName }}</strong>\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\n ID: {{ details.meetingId }}\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\n {{ details.ownerEmail }}\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\n Started {{ details.startTime }}\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\n {{ details.connectedCount }} connected &middot; {{ details.lobbyCount }} in lobby\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\n Cluster {{ details.cluster }}\n </p>\n </div>\n\n <div class=\"tk-live-meeting__toolbar\">\n <div class=\"tk-live-meeting__toolbar-primary\">\n <button type=\"button\" class=\"tk-live-meeting__action\">\n <mat-icon>person_add</mat-icon>\n Add participant\n </button>\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"toggleLock()\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\n {{ details.lockState === 'locked' ? 'Unlock' : 'Lock' }}\n </button>\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"muteAll()\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/microphone-muted-regular.svg\" alt=\"\">\n Mute all\n </button>\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"unmuteAll()\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/microphone-regular.svg\" alt=\"\">\n Unmute all\n </button>\n <button type=\"button\" class=\"tk-live-meeting__action\">\n <mat-icon>grid_view</mat-icon>\n Set layout\n </button>\n <button\n type=\"button\"\n class=\"tk-live-meeting__action\"\n [class.tk-live-meeting__action--danger]=\"details.isRecording\"\n (click)=\"toggleRecording()\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/record-active-regular.svg\" alt=\"\">\n {{ details.isRecording ? 'Stop recording' : 'Start recording' }}\n </button>\n\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"toggleStreaming()\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/wifi-signal-good-regular.svg\" alt=\"\">\n {{ details.isStreaming ? 'Stop streaming' : 'Start streaming' }}\n </button>\n </div>\n\n <div class=\"tk-live-meeting__toolbar-secondary\">\n <button type=\"button\" class=\"tk-live-meeting__action tk-live-meeting__action--plain\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\">\n Event logs\n </button>\n <button type=\"button\" class=\"tk-live-meeting__action tk-live-meeting__action--plain\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"\">\n Copy join info\n </button>\n <button\n type=\"button\"\n class=\"tk-live-meeting__action tk-live-meeting__action--plain tk-live-meeting__action--icon-only\"\n aria-label=\"More actions\">\n <mat-icon>more_horiz</mat-icon>\n </button>\n </div>\n </div>\n\n <div class=\"tk-live-meeting__tabs-row\">\n <div class=\"tk-live-meeting__tabs\">\n <button\n type=\"button\"\n class=\"tk-live-meeting__tab\"\n [class.tk-live-meeting__tab--active]=\"activeTab === 'participants'\"\n (click)=\"setTab('participants')\">\n Participants\n <span class=\"tk-live-meeting__tab-count\">{{ details.participants.length }}</span>\n </button>\n <button\n type=\"button\"\n class=\"tk-live-meeting__tab\"\n [class.tk-live-meeting__tab--active]=\"activeTab === 'lobby'\"\n (click)=\"setTab('lobby')\">\n Lobby\n <span class=\"tk-live-meeting__tab-count\">{{ lobby.length }}</span>\n </button>\n </div>\n\n <div class=\"tk-live-meeting__search\" *ngIf=\"activeTab === 'participants'\">\n <mat-icon class=\"tk-live-meeting__search-icon\">search</mat-icon>\n <input\n type=\"text\"\n class=\"tk-live-meeting__search-input\"\n placeholder=\"Search participants\"\n [(ngModel)]=\"searchTerm\">\n </div>\n </div>\n\n <table class=\"tk-live-meeting__table\" *ngIf=\"activeTab === 'participants'\">\n <thead>\n <tr>\n <th class=\"tk-live-meeting__checkbox-cell\"><input type=\"checkbox\"></th>\n <th>Participant</th>\n <th>Status</th>\n <th>Audio</th>\n <th>Video</th>\n <th>Join</th>\n <th>Quality</th>\n <th>Endpoint</th>\n <th class=\"tk-live-meeting__actions-header\">Actions</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let participant of filteredParticipants\">\n <td class=\"tk-live-meeting__checkbox-cell\"><input type=\"checkbox\"></td>\n <td>\n <span class=\"tk-live-meeting__participant-cell\">\n <span class=\"tk-live-meeting__avatar\">{{ participant.initials }}</span>\n <span class=\"tk-live-meeting__participant-info\">\n <span class=\"tk-live-meeting__participant-name\">{{ participant.name }}</span>\n <span class=\"tk-live-meeting__participant-badge\" *ngIf=\"participant.subBadge\">{{ participant.subBadge }}</span>\n </span>\n </span>\n </td>\n <td>\n <span\n class=\"tk-live-meeting__status\"\n [class.tk-live-meeting__status--connected]=\"participant.status === 'connected'\">\n <span class=\"tk-live-meeting__status-dot\"></span>\n {{ participant.status === 'connected' ? 'Connected' : 'Disconnected' }}\n </span>\n </td>\n <td>\n <span\n *ngIf=\"participant.audioMuted\"\n class=\"tk-live-meeting__state-icon tk-live-meeting__state-icon--mic-muted\"\n aria-hidden=\"true\"></span>\n <img\n *ngIf=\"!participant.audioMuted\"\n class=\"tk-live-meeting__state-icon\"\n src=\"assets/icons/microphone-regular.svg\"\n alt=\"\">\n </td>\n <td>\n <img\n class=\"tk-live-meeting__state-icon\"\n [class.tk-live-meeting__state-icon--muted]=\"!participant.videoOn\"\n src=\"assets/icons/camera-regular.svg\"\n alt=\"\">\n </td>\n <td>{{ participant.joinTime }}</td>\n <td>\n <span\n class=\"tk-live-meeting__quality-badge\"\n *ngIf=\"participant.quality; else noQuality\"\n [class.tk-live-meeting__quality-badge--good]=\"participant.quality === 'good'\"\n [class.tk-live-meeting__quality-badge--fair]=\"participant.quality === 'fair'\"\n [class.tk-live-meeting__quality-badge--poor]=\"participant.quality === 'poor'\">\n <span class=\"tk-live-meeting__quality-dot\"></span>\n {{ participant.quality | titlecase }}\n </span>\n <ng-template #noQuality>&mdash;</ng-template>\n </td>\n <td>\n <span class=\"tk-live-meeting__endpoint-cell\">\n <mat-icon *ngIf=\"participant.endpointIcon\" class=\"tk-live-meeting__endpoint-icon\">{{ participant.endpointIcon === 'mail' ? 'mail' : 'call' }}</mat-icon>\n {{ participant.endpoint }}\n </span>\n </td>\n <td (click)=\"$event.stopPropagation()\">\n <span class=\"tk-live-meeting__actions-cell\">\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Toggle audio\" (click)=\"toggleParticipantAudio(participant)\">\n <img [src]=\"participant.audioMuted ? 'assets/icons/microphone-muted-regular.svg' : 'assets/icons/microphone-regular.svg'\" alt=\"\">\n </button>\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Toggle video\" (click)=\"toggleParticipantVideo(participant)\">\n <img src=\"assets/icons/camera-regular.svg\" alt=\"\">\n </button>\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Drop participant\" (click)=\"removeParticipant(participant)\">\n <mat-icon>close</mat-icon>\n </button>\n <span class=\"tk-live-meeting__menu-wrap\">\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"More actions\" (click)=\"toggleActionsMenu(participant)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <div class=\"tk-live-meeting__menu\" *ngIf=\"openActionsMenuId === participant.id\">\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Change individual layout</button>\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Move to another meeting</button>\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Allow content sharing</button>\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">View participant details</button>\n <button type=\"button\" class=\"tk-live-meeting__menu-item tk-live-meeting__menu-item--danger\" (click)=\"removeParticipant(participant)\">Drop</button>\n </div>\n </span>\n </span>\n </td>\n </tr>\n <tr *ngIf=\"!filteredParticipants.length\">\n <td colspan=\"9\" class=\"tk-live-meeting__empty\">No participants match your search.</td>\n </tr>\n </tbody>\n </table>\n\n <table class=\"tk-live-meeting__table\" *ngIf=\"activeTab === 'lobby'\">\n <thead>\n <tr>\n <th>Participant</th>\n <th>Endpoint</th>\n <th>Waiting since</th>\n <th class=\"tk-live-meeting__actions-header\">Actions</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let entry of lobby\">\n <td>{{ entry.name }}</td>\n <td>{{ entry.endpoint }}</td>\n <td>{{ entry.waitingSince }}</td>\n <td class=\"tk-live-meeting__lobby-actions\">\n <button type=\"button\" class=\"tk-live-meeting__admit\" (click)=\"admitFromLobby(entry)\">Admit</button>\n <button type=\"button\" class=\"tk-live-meeting__deny\" (click)=\"denyFromLobby(entry)\">Deny</button>\n </td>\n </tr>\n <tr *ngIf=\"!lobby.length\">\n <td colspan=\"4\" class=\"tk-live-meeting__empty\">No one is waiting in the lobby.</td>\n </tr>\n </tbody>\n </table>\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-live-meeting__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-live-meeting__breadcrumb-link{color:#0009;text-decoration:none}.tk-live-meeting__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-live-meeting__breadcrumb-current{color:#000000f2}.tk-live-meeting__header{margin-bottom:1.25rem}.tk-live-meeting__heading{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem;margin-bottom:.5rem}.tk-live-meeting__title{margin:0;font-size:1.375rem;font-weight:600}.tk-live-meeting__badge{display:inline-flex;align-items:center;gap:.375rem;padding:.1875rem .625rem;border-radius:999px;background:rgba(0,0,0,.04);font-size:.75rem;font-weight:500;color:#000000f2}.tk-live-meeting__badge--live{background:rgba(29,128,95,.1);color:#1d805f}.tk-live-meeting__badge--locked{background:#e8e8ea;color:#47484c}.tk-live-meeting__badge--recording{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__badge--quality-good{background:rgba(29,128,95,.1);color:#1d805f}.tk-live-meeting__badge--quality-fair{background:rgba(181,134,11,.1);color:#b5860b}.tk-live-meeting__badge--quality-poor{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__badge-dot{width:.4375rem;height:.4375rem;border-radius:50%;background:currentColor}.tk-live-meeting__badge-icon{height:.75rem;width:.75rem;opacity:.75}.tk-live-meeting__subline{margin:0;font-size:.8125rem;color:#0009}.tk-live-meeting__subline-sep{margin:0 .375rem}.tk-live-meeting__toolbar{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:.625rem;margin-bottom:1.25rem;padding-bottom:1.125rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-live-meeting__toolbar-primary,.tk-live-meeting__toolbar-secondary{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem}.tk-live-meeting__toolbar-secondary{margin-left:auto}.tk-live-meeting__action{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-live-meeting__action mat-icon,.tk-live-meeting__action .tk-live-meeting__action-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;opacity:.7}.tk-live-meeting__action:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__action--danger{border-color:#c7363659;color:#c73636}.tk-live-meeting__action--danger mat-icon,.tk-live-meeting__action--danger .tk-live-meeting__action-icon{opacity:1}.tk-live-meeting__action--icon-only{padding:.5rem}.tk-live-meeting__action--plain{background:none;border-color:transparent}.tk-live-meeting__action--plain:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__tabs-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.tk-live-meeting__tabs{display:inline-flex;align-items:center;gap:.375rem}.tk-live-meeting__tab{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:none;border:1px solid transparent;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#0009;cursor:pointer;color:#000000f2;border-radius:1.5rem}.tk-live-meeting__tab:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__tab--active{background-color:#0003;color:#000000f2;border-radius:1.5rem}.tk-live-meeting__tab-count{padding:.0625rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:600}.tk-live-meeting__search{display:flex;align-items:center;gap:.5rem;width:16rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-live-meeting__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-live-meeting__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meeting__search-input::placeholder{color:#0006}.tk-live-meeting__table{width:100%;border-collapse:collapse;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-live-meeting__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-live-meeting__table th:hover{background-color:#dedede}.tk-live-meeting__table td{min-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-live-meeting__table tbody tr:hover td{background:#ededed}.tk-live-meeting__checkbox-cell{width:2.25rem}.tk-live-meeting__actions-header{min-width:140px}.tk-live-meeting__participant-cell{display:flex;align-items:center;gap:.625rem}.tk-live-meeting__avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;background:rgba(3,83,168,.1);color:#1170cf;font-size:.6875rem;font-weight:600}.tk-live-meeting__participant-info{display:flex;flex-direction:column;gap:.125rem}.tk-live-meeting__participant-name{font-weight:500}.tk-live-meeting__participant-badge{align-self:flex-start;padding:.0625rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;color:#0009}.tk-live-meeting__status{display:inline-flex;align-items:center;gap:.375rem;color:#0009}.tk-live-meeting__status-dot{width:.4375rem;height:.4375rem;border-radius:50%;background:rgba(0,0,0,.3)}.tk-live-meeting__status--connected{color:#1d805f}.tk-live-meeting__status--connected .tk-live-meeting__status-dot{background:currentColor}.tk-live-meeting__state-icon{display:inline-block;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#000000f2;opacity:.85}.tk-live-meeting__state-icon--muted{color:#c73636;opacity:.35}.tk-live-meeting__state-icon--mic-muted{background-color:#c73636;mask-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M24.002 28.25h-1.979a5.114 5.114 0 0 1-5.205-4.565 5.7 5.7 0 0 0 2.597-1.087l-1.063-1.063A4.245 4.245 0 0 1 11.75 18v-3.067l-1.5-1.5V18a5.755 5.755 0 0 0 5.037 5.7 6.67 6.67 0 0 0 2.437 4.55H8.002a.75.75 0 1 0 0 1.5h16a.75.75 0 1 0 0-1.5M28.53 27.47l-7.255-7.256c.308-.698.47-1.451.475-2.214V8a5.75 5.75 0 0 0-11.5 0v1.19L4.53 3.47a.75.75 0 0 0-1.06 1.06l24 24a.75.75 0 0 0 1.06-1.06M11.75 10.69V8a4.25 4.25 0 0 1 8.5 0v10a4 4 0 0 1-.147 1.042z%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat;mask-position:center;mask-size:contain;opacity:1}.tk-live-meeting__quality-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.125rem .625rem;border-radius:999px;background:rgba(0,0,0,.04);font-size:.75rem;font-weight:500;color:#000000f2}.tk-live-meeting__quality-dot{width:.375rem;height:.375rem;border-radius:50%}.tk-live-meeting__quality-badge--good{background-color:oklch(95% .05 155);color:#1d805f;border:1px solid oklch(85% .08 155)}.tk-live-meeting__quality-badge--good .tk-live-meeting__quality-dot{background-color:oklch(55% .15 155)}.tk-live-meeting__quality-badge--fair{background-color:oklch(97% .06 85);border-color:oklch(88% .1 85);color:oklch(42% .12 75)}.tk-live-meeting__quality-badge--fair .tk-live-meeting__quality-dot{background-color:oklch(70% .16 75)}.tk-live-meeting__quality-badge--poor{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__quality-badge--poor .tk-live-meeting__quality-dot{background:currentColor}.tk-live-meeting__endpoint-cell{display:inline-flex;align-items:center;gap:.375rem}.tk-live-meeting__endpoint-icon{font-size:1rem;height:1rem;width:1rem;color:#0006}.tk-live-meeting__actions-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative}.tk-live-meeting__row-action{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:.25rem;color:#0009;cursor:pointer}.tk-live-meeting__row-action mat-icon,.tk-live-meeting__row-action img{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meeting__row-action:hover{color:#000000f2}.tk-live-meeting__menu-wrap{position:relative;display:inline-flex}.tk-live-meeting__menu{position:absolute;top:calc(100% + .25rem);right:0;z-index:10;display:flex;flex-direction:column;min-width:12.5rem;padding:.375rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px;box-shadow:0 8px 24px #0000001f;white-space:nowrap}.tk-live-meeting__menu-item{padding:.5rem .625rem;background:none;border:none;border-radius:6px;text-align:left;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-live-meeting__menu-item:hover{background:rgba(0,0,0,.04)}.tk-live-meeting__menu-item--danger{color:#c73636}.tk-live-meeting__lobby-actions{display:flex;align-items:center;gap:.5rem}.tk-live-meeting__admit{padding:.375rem .75rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;cursor:pointer}.tk-live-meeting__admit:hover{background:#222}.tk-live-meeting__deny{padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-live-meeting__deny:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__empty{padding:1.5rem;text-align:center;color:#0009}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
787
+ LiveMeetingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LiveMeetingComponent, selector: "tk-live-meeting", inputs: { meetingId: "meetingId" }, outputs: { back: "back" }, ngImport: i0, template: "<div class=\"tk-live-meeting\" *ngIf=\"details\" (click)=\"closeActionsMenu()\">\r\n <div class=\"tk-live-meeting__breadcrumb\">\r\n <a href=\"javascript:void(0)\" class=\"tk-live-meeting__breadcrumb-link\" (click)=\"onBack()\">Meetings</a>\r\n <span class=\"tk-live-meeting__breadcrumb-separator\">&rsaquo;</span>\r\n <a href=\"javascript:void(0)\" class=\"tk-live-meeting__breadcrumb-link\" (click)=\"onBack()\">Live</a>\r\n <span class=\"tk-live-meeting__breadcrumb-separator\">&rsaquo;</span>\r\n <span class=\"tk-live-meeting__breadcrumb-current\">{{ details.title }}</span>\r\n </div>\r\n\r\n <div class=\"tk-live-meeting__header\">\r\n <div class=\"tk-live-meeting__heading\">\r\n <h1 class=\"tk-live-meeting__title\">{{ details.title }}</h1>\r\n\r\n <span class=\"tk-live-meeting__badge tk-live-meeting__badge--live\">\r\n <span class=\"tk-live-meeting__badge-dot\"></span>\r\n Live &middot; {{ details.duration }}\r\n </span>\r\n\r\n <span\r\n class=\"tk-live-meeting__badge\"\r\n [class.tk-live-meeting__badge--locked]=\"details.lockState === 'locked'\">\r\n <img *ngIf=\"details.lockState === 'locked'\" class=\"tk-live-meeting__badge-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\r\n {{ details.lockState === 'locked' ? 'Locked' : 'Unlocked' }}\r\n </span>\r\n\r\n <span class=\"tk-live-meeting__badge tk-live-meeting__badge--recording\" *ngIf=\"details.isRecording\">\r\n <img class=\"tk-live-meeting__badge-icon\" src=\"assets/icons/record-active-regular.svg\" alt=\"\">\r\n Recording\r\n </span>\r\n\r\n <span\r\n class=\"tk-live-meeting__badge tk-live-meeting__badge--quality\"\r\n [class.tk-live-meeting__badge--quality-good]=\"details.quality === 'good'\"\r\n [class.tk-live-meeting__badge--quality-fair]=\"details.quality === 'fair'\"\r\n [class.tk-live-meeting__badge--quality-poor]=\"details.quality === 'poor'\">\r\n <span class=\"tk-live-meeting__badge-dot\"></span>\r\n {{ details.quality | titlecase }}\r\n </span>\r\n </div>\r\n\r\n <p class=\"tk-live-meeting__subline\">\r\n Owner: <strong>{{ details.ownerName }}</strong>\r\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\r\n ID: {{ details.meetingId }}\r\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\r\n {{ details.ownerEmail }}\r\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\r\n Started {{ details.startTime }}\r\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\r\n {{ details.connectedCount }} connected &middot; {{ details.lobbyCount }} in lobby\r\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\r\n Cluster {{ details.cluster }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"tk-live-meeting__toolbar\">\r\n <div class=\"tk-live-meeting__toolbar-primary\">\r\n <button type=\"button\" class=\"tk-live-meeting__action\">\r\n <mat-icon>person_add</mat-icon>\r\n Add participant\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"toggleLock()\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\r\n {{ details.lockState === 'locked' ? 'Unlock' : 'Lock' }}\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"muteAll()\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/microphone-muted-regular.svg\" alt=\"\">\r\n Mute all\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"unmuteAll()\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/microphone-regular.svg\" alt=\"\">\r\n Unmute all\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__action\">\r\n <mat-icon>grid_view</mat-icon>\r\n Set layout\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meeting__action\"\r\n [class.tk-live-meeting__action--danger]=\"details.isRecording\"\r\n (click)=\"toggleRecording()\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/record-active-regular.svg\" alt=\"\">\r\n {{ details.isRecording ? 'Stop recording' : 'Start recording' }}\r\n </button>\r\n\r\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"toggleStreaming()\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/wifi-signal-good-regular.svg\" alt=\"\">\r\n {{ details.isStreaming ? 'Stop streaming' : 'Start streaming' }}\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-live-meeting__toolbar-secondary\">\r\n <button type=\"button\" class=\"tk-live-meeting__action tk-live-meeting__action--plain\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\">\r\n Event logs\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__action tk-live-meeting__action--plain\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"\">\r\n Copy join info\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meeting__action tk-live-meeting__action--plain tk-live-meeting__action--icon-only\"\r\n aria-label=\"More actions\">\r\n <mat-icon>more_horiz</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meeting__tabs-row\">\r\n <div class=\"tk-live-meeting__tabs\">\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meeting__tab\"\r\n [class.tk-live-meeting__tab--active]=\"activeTab === 'participants'\"\r\n (click)=\"setTab('participants')\">\r\n Participants\r\n <span class=\"tk-live-meeting__tab-count\">{{ details.participants.length }}</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meeting__tab\"\r\n [class.tk-live-meeting__tab--active]=\"activeTab === 'lobby'\"\r\n (click)=\"setTab('lobby')\">\r\n Lobby\r\n <span class=\"tk-live-meeting__tab-count\">{{ lobby.length }}</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-live-meeting__search\" *ngIf=\"activeTab === 'participants'\">\r\n <mat-icon class=\"tk-live-meeting__search-icon\">search</mat-icon>\r\n <input\r\n type=\"text\"\r\n class=\"tk-live-meeting__search-input\"\r\n placeholder=\"Search participants\"\r\n [(ngModel)]=\"searchTerm\">\r\n </div>\r\n </div>\r\n\r\n <table class=\"tk-live-meeting__table\" *ngIf=\"activeTab === 'participants'\">\r\n <thead>\r\n <tr>\r\n <th class=\"tk-live-meeting__checkbox-cell\"><input type=\"checkbox\"></th>\r\n <th>Participant</th>\r\n <th>Status</th>\r\n <th>Audio</th>\r\n <th>Video</th>\r\n <th>Join</th>\r\n <th>Quality</th>\r\n <th>Endpoint</th>\r\n <th class=\"tk-live-meeting__actions-header\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let participant of filteredParticipants\">\r\n <td class=\"tk-live-meeting__checkbox-cell\"><input type=\"checkbox\"></td>\r\n <td>\r\n <span class=\"tk-live-meeting__participant-cell\">\r\n <span class=\"tk-live-meeting__avatar\">{{ participant.initials }}</span>\r\n <span class=\"tk-live-meeting__participant-info\">\r\n <span class=\"tk-live-meeting__participant-name\">{{ participant.name }}</span>\r\n <span class=\"tk-live-meeting__participant-badge\" *ngIf=\"participant.subBadge\">{{ participant.subBadge }}</span>\r\n </span>\r\n </span>\r\n </td>\r\n <td>\r\n <span\r\n class=\"tk-live-meeting__status\"\r\n [class.tk-live-meeting__status--connected]=\"participant.status === 'connected'\">\r\n <span class=\"tk-live-meeting__status-dot\"></span>\r\n {{ participant.status === 'connected' ? 'Connected' : 'Disconnected' }}\r\n </span>\r\n </td>\r\n <td>\r\n <span\r\n *ngIf=\"participant.audioMuted\"\r\n class=\"tk-live-meeting__state-icon tk-live-meeting__state-icon--mic-muted\"\r\n aria-hidden=\"true\"></span>\r\n <img\r\n *ngIf=\"!participant.audioMuted\"\r\n class=\"tk-live-meeting__state-icon\"\r\n src=\"assets/icons/microphone-regular.svg\"\r\n alt=\"\">\r\n </td>\r\n <td>\r\n <img\r\n class=\"tk-live-meeting__state-icon\"\r\n [class.tk-live-meeting__state-icon--muted]=\"!participant.videoOn\"\r\n src=\"assets/icons/camera-regular.svg\"\r\n alt=\"\">\r\n </td>\r\n <td>{{ participant.joinTime }}</td>\r\n <td>\r\n <span\r\n class=\"tk-live-meeting__quality-badge\"\r\n *ngIf=\"participant.quality; else noQuality\"\r\n [class.tk-live-meeting__quality-badge--good]=\"participant.quality === 'good'\"\r\n [class.tk-live-meeting__quality-badge--fair]=\"participant.quality === 'fair'\"\r\n [class.tk-live-meeting__quality-badge--poor]=\"participant.quality === 'poor'\">\r\n <span class=\"tk-live-meeting__quality-dot\"></span>\r\n {{ participant.quality | titlecase }}\r\n </span>\r\n <ng-template #noQuality>&mdash;</ng-template>\r\n </td>\r\n <td>\r\n <span class=\"tk-live-meeting__endpoint-cell\">\r\n <mat-icon *ngIf=\"participant.endpointIcon\" class=\"tk-live-meeting__endpoint-icon\">{{ participant.endpointIcon === 'mail' ? 'mail' : 'call' }}</mat-icon>\r\n {{ participant.endpoint }}\r\n </span>\r\n </td>\r\n <td (click)=\"$event.stopPropagation()\">\r\n <span class=\"tk-live-meeting__actions-cell\">\r\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Toggle audio\" (click)=\"toggleParticipantAudio(participant)\">\r\n <img [src]=\"participant.audioMuted ? 'assets/icons/microphone-muted-regular.svg' : 'assets/icons/microphone-regular.svg'\" alt=\"\">\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Toggle video\" (click)=\"toggleParticipantVideo(participant)\">\r\n <img src=\"assets/icons/camera-regular.svg\" alt=\"\">\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Drop participant\" (click)=\"removeParticipant(participant)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"tk-live-meeting__menu-wrap\">\r\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"More actions\" (click)=\"toggleActionsMenu(participant)\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <div class=\"tk-live-meeting__menu\" *ngIf=\"openActionsMenuId === participant.id\">\r\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Change individual layout</button>\r\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Move to another meeting</button>\r\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Allow content sharing</button>\r\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">View participant details</button>\r\n <button type=\"button\" class=\"tk-live-meeting__menu-item tk-live-meeting__menu-item--danger\" (click)=\"removeParticipant(participant)\">Drop</button>\r\n </div>\r\n </span>\r\n </span>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!filteredParticipants.length\">\r\n <td colspan=\"9\" class=\"tk-live-meeting__empty\">No participants match your search.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <table class=\"tk-live-meeting__table\" *ngIf=\"activeTab === 'lobby'\">\r\n <thead>\r\n <tr>\r\n <th>Participant</th>\r\n <th>Endpoint</th>\r\n <th>Waiting since</th>\r\n <th class=\"tk-live-meeting__actions-header\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let entry of lobby\">\r\n <td>{{ entry.name }}</td>\r\n <td>{{ entry.endpoint }}</td>\r\n <td>{{ entry.waitingSince }}</td>\r\n <td class=\"tk-live-meeting__lobby-actions\">\r\n <button type=\"button\" class=\"tk-live-meeting__admit\" (click)=\"admitFromLobby(entry)\">Admit</button>\r\n <button type=\"button\" class=\"tk-live-meeting__deny\" (click)=\"denyFromLobby(entry)\">Deny</button>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!lobby.length\">\r\n <td colspan=\"4\" class=\"tk-live-meeting__empty\">No one is waiting in the lobby.</td>\r\n </tr>\r\n </tbody>\r\n </table>\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-live-meeting__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-live-meeting__breadcrumb-link{color:#0009;text-decoration:none}.tk-live-meeting__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-live-meeting__breadcrumb-current{color:#000000f2}.tk-live-meeting__header{margin-bottom:1.25rem}.tk-live-meeting__heading{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem;margin-bottom:.5rem}.tk-live-meeting__title{margin:0;font-size:1.375rem;font-weight:600}.tk-live-meeting__badge{display:inline-flex;align-items:center;gap:.375rem;padding:.1875rem .625rem;border-radius:999px;background:rgba(0,0,0,.04);font-size:.75rem;font-weight:500;color:#000000f2}.tk-live-meeting__badge--live{background:rgba(29,128,95,.1);color:#1d805f}.tk-live-meeting__badge--locked{background:#e8e8ea;color:#47484c}.tk-live-meeting__badge--recording{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__badge--quality-good{background:rgba(29,128,95,.1);color:#1d805f}.tk-live-meeting__badge--quality-fair{background:rgba(181,134,11,.1);color:#b5860b}.tk-live-meeting__badge--quality-poor{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__badge-dot{width:.4375rem;height:.4375rem;border-radius:50%;background:currentColor}.tk-live-meeting__badge-icon{height:.75rem;width:.75rem;opacity:.75}.tk-live-meeting__subline{margin:0;font-size:.8125rem;color:#0009}.tk-live-meeting__subline-sep{margin:0 .375rem}.tk-live-meeting__toolbar{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:.625rem;margin-bottom:1.25rem;padding-bottom:1.125rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-live-meeting__toolbar-primary,.tk-live-meeting__toolbar-secondary{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem}.tk-live-meeting__toolbar-secondary{margin-left:auto}.tk-live-meeting__action{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-live-meeting__action mat-icon,.tk-live-meeting__action .tk-live-meeting__action-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;opacity:.7}.tk-live-meeting__action:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__action--danger{border-color:#c7363659;color:#c73636}.tk-live-meeting__action--danger mat-icon,.tk-live-meeting__action--danger .tk-live-meeting__action-icon{opacity:1}.tk-live-meeting__action--icon-only{padding:.5rem}.tk-live-meeting__action--plain{background:none;border-color:transparent}.tk-live-meeting__action--plain:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__tabs-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.tk-live-meeting__tabs{display:inline-flex;align-items:center;gap:.375rem}.tk-live-meeting__tab{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:none;border:1px solid transparent;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#0009;cursor:pointer;color:#000000f2;border-radius:1.5rem}.tk-live-meeting__tab:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__tab--active{background-color:#0003;color:#000000f2;border-radius:1.5rem}.tk-live-meeting__tab-count{padding:.0625rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:600}.tk-live-meeting__search{display:flex;align-items:center;gap:.5rem;width:16rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-live-meeting__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-live-meeting__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meeting__search-input::placeholder{color:#0006}.tk-live-meeting__table{width:100%;border-collapse:collapse;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-live-meeting__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-live-meeting__table th:hover{background-color:#dedede}.tk-live-meeting__table td{min-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-live-meeting__table tbody tr:hover td{background:#ededed}.tk-live-meeting__checkbox-cell{width:2.25rem}.tk-live-meeting__actions-header{min-width:140px}.tk-live-meeting__participant-cell{display:flex;align-items:center;gap:.625rem}.tk-live-meeting__avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;background:rgba(3,83,168,.1);color:#1170cf;font-size:.6875rem;font-weight:600}.tk-live-meeting__participant-info{display:flex;flex-direction:column;gap:.125rem}.tk-live-meeting__participant-name{font-weight:500}.tk-live-meeting__participant-badge{align-self:flex-start;padding:.0625rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;color:#0009}.tk-live-meeting__status{display:inline-flex;align-items:center;gap:.375rem;color:#0009}.tk-live-meeting__status-dot{width:.4375rem;height:.4375rem;border-radius:50%;background:rgba(0,0,0,.3)}.tk-live-meeting__status--connected{color:#1d805f}.tk-live-meeting__status--connected .tk-live-meeting__status-dot{background:currentColor}.tk-live-meeting__state-icon{display:inline-block;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#000000f2;opacity:.85}.tk-live-meeting__state-icon--muted{color:#c73636;opacity:.35}.tk-live-meeting__state-icon--mic-muted{background-color:#c73636;mask-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M24.002 28.25h-1.979a5.114 5.114 0 0 1-5.205-4.565 5.7 5.7 0 0 0 2.597-1.087l-1.063-1.063A4.245 4.245 0 0 1 11.75 18v-3.067l-1.5-1.5V18a5.755 5.755 0 0 0 5.037 5.7 6.67 6.67 0 0 0 2.437 4.55H8.002a.75.75 0 1 0 0 1.5h16a.75.75 0 1 0 0-1.5M28.53 27.47l-7.255-7.256c.308-.698.47-1.451.475-2.214V8a5.75 5.75 0 0 0-11.5 0v1.19L4.53 3.47a.75.75 0 0 0-1.06 1.06l24 24a.75.75 0 0 0 1.06-1.06M11.75 10.69V8a4.25 4.25 0 0 1 8.5 0v10a4 4 0 0 1-.147 1.042z%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat;mask-position:center;mask-size:contain;opacity:1}.tk-live-meeting__quality-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.125rem .625rem;border-radius:999px;background:rgba(0,0,0,.04);font-size:.75rem;font-weight:500;color:#000000f2}.tk-live-meeting__quality-dot{width:.375rem;height:.375rem;border-radius:50%}.tk-live-meeting__quality-badge--good{background-color:oklch(95% .05 155);color:#1d805f;border:1px solid oklch(85% .08 155)}.tk-live-meeting__quality-badge--good .tk-live-meeting__quality-dot{background-color:oklch(55% .15 155)}.tk-live-meeting__quality-badge--fair{background-color:oklch(97% .06 85);border-color:oklch(88% .1 85);color:oklch(42% .12 75)}.tk-live-meeting__quality-badge--fair .tk-live-meeting__quality-dot{background-color:oklch(70% .16 75)}.tk-live-meeting__quality-badge--poor{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__quality-badge--poor .tk-live-meeting__quality-dot{background:currentColor}.tk-live-meeting__endpoint-cell{display:inline-flex;align-items:center;gap:.375rem}.tk-live-meeting__endpoint-icon{font-size:1rem;height:1rem;width:1rem;color:#0006}.tk-live-meeting__actions-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative}.tk-live-meeting__row-action{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:.25rem;color:#0009;cursor:pointer}.tk-live-meeting__row-action mat-icon,.tk-live-meeting__row-action img{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meeting__row-action:hover{color:#000000f2}.tk-live-meeting__menu-wrap{position:relative;display:inline-flex}.tk-live-meeting__menu{position:absolute;top:calc(100% + .25rem);right:0;z-index:10;display:flex;flex-direction:column;min-width:12.5rem;padding:.375rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px;box-shadow:0 8px 24px #0000001f;white-space:nowrap}.tk-live-meeting__menu-item{padding:.5rem .625rem;background:none;border:none;border-radius:6px;text-align:left;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-live-meeting__menu-item:hover{background:rgba(0,0,0,.04)}.tk-live-meeting__menu-item--danger{color:#c73636}.tk-live-meeting__lobby-actions{display:flex;align-items:center;gap:.5rem}.tk-live-meeting__admit{padding:.375rem .75rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;cursor:pointer}.tk-live-meeting__admit:hover{background:#222}.tk-live-meeting__deny{padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-live-meeting__deny:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__empty{padding:1.5rem;text-align:center;color:#0009}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
788
788
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LiveMeetingComponent, decorators: [{
789
789
  type: Component,
790
- args: [{ selector: 'tk-live-meeting', template: "<div class=\"tk-live-meeting\" *ngIf=\"details\" (click)=\"closeActionsMenu()\">\n <div class=\"tk-live-meeting__breadcrumb\">\n <a href=\"javascript:void(0)\" class=\"tk-live-meeting__breadcrumb-link\" (click)=\"onBack()\">Meetings</a>\n <span class=\"tk-live-meeting__breadcrumb-separator\">&rsaquo;</span>\n <a href=\"javascript:void(0)\" class=\"tk-live-meeting__breadcrumb-link\" (click)=\"onBack()\">Live</a>\n <span class=\"tk-live-meeting__breadcrumb-separator\">&rsaquo;</span>\n <span class=\"tk-live-meeting__breadcrumb-current\">{{ details.title }}</span>\n </div>\n\n <div class=\"tk-live-meeting__header\">\n <div class=\"tk-live-meeting__heading\">\n <h1 class=\"tk-live-meeting__title\">{{ details.title }}</h1>\n\n <span class=\"tk-live-meeting__badge tk-live-meeting__badge--live\">\n <span class=\"tk-live-meeting__badge-dot\"></span>\n Live &middot; {{ details.duration }}\n </span>\n\n <span\n class=\"tk-live-meeting__badge\"\n [class.tk-live-meeting__badge--locked]=\"details.lockState === 'locked'\">\n <img *ngIf=\"details.lockState === 'locked'\" class=\"tk-live-meeting__badge-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\n {{ details.lockState === 'locked' ? 'Locked' : 'Unlocked' }}\n </span>\n\n <span class=\"tk-live-meeting__badge tk-live-meeting__badge--recording\" *ngIf=\"details.isRecording\">\n <img class=\"tk-live-meeting__badge-icon\" src=\"assets/icons/record-active-regular.svg\" alt=\"\">\n Recording\n </span>\n\n <span\n class=\"tk-live-meeting__badge tk-live-meeting__badge--quality\"\n [class.tk-live-meeting__badge--quality-good]=\"details.quality === 'good'\"\n [class.tk-live-meeting__badge--quality-fair]=\"details.quality === 'fair'\"\n [class.tk-live-meeting__badge--quality-poor]=\"details.quality === 'poor'\">\n <span class=\"tk-live-meeting__badge-dot\"></span>\n {{ details.quality | titlecase }}\n </span>\n </div>\n\n <p class=\"tk-live-meeting__subline\">\n Owner: <strong>{{ details.ownerName }}</strong>\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\n ID: {{ details.meetingId }}\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\n {{ details.ownerEmail }}\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\n Started {{ details.startTime }}\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\n {{ details.connectedCount }} connected &middot; {{ details.lobbyCount }} in lobby\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\n Cluster {{ details.cluster }}\n </p>\n </div>\n\n <div class=\"tk-live-meeting__toolbar\">\n <div class=\"tk-live-meeting__toolbar-primary\">\n <button type=\"button\" class=\"tk-live-meeting__action\">\n <mat-icon>person_add</mat-icon>\n Add participant\n </button>\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"toggleLock()\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\n {{ details.lockState === 'locked' ? 'Unlock' : 'Lock' }}\n </button>\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"muteAll()\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/microphone-muted-regular.svg\" alt=\"\">\n Mute all\n </button>\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"unmuteAll()\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/microphone-regular.svg\" alt=\"\">\n Unmute all\n </button>\n <button type=\"button\" class=\"tk-live-meeting__action\">\n <mat-icon>grid_view</mat-icon>\n Set layout\n </button>\n <button\n type=\"button\"\n class=\"tk-live-meeting__action\"\n [class.tk-live-meeting__action--danger]=\"details.isRecording\"\n (click)=\"toggleRecording()\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/record-active-regular.svg\" alt=\"\">\n {{ details.isRecording ? 'Stop recording' : 'Start recording' }}\n </button>\n\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"toggleStreaming()\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/wifi-signal-good-regular.svg\" alt=\"\">\n {{ details.isStreaming ? 'Stop streaming' : 'Start streaming' }}\n </button>\n </div>\n\n <div class=\"tk-live-meeting__toolbar-secondary\">\n <button type=\"button\" class=\"tk-live-meeting__action tk-live-meeting__action--plain\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\">\n Event logs\n </button>\n <button type=\"button\" class=\"tk-live-meeting__action tk-live-meeting__action--plain\">\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"\">\n Copy join info\n </button>\n <button\n type=\"button\"\n class=\"tk-live-meeting__action tk-live-meeting__action--plain tk-live-meeting__action--icon-only\"\n aria-label=\"More actions\">\n <mat-icon>more_horiz</mat-icon>\n </button>\n </div>\n </div>\n\n <div class=\"tk-live-meeting__tabs-row\">\n <div class=\"tk-live-meeting__tabs\">\n <button\n type=\"button\"\n class=\"tk-live-meeting__tab\"\n [class.tk-live-meeting__tab--active]=\"activeTab === 'participants'\"\n (click)=\"setTab('participants')\">\n Participants\n <span class=\"tk-live-meeting__tab-count\">{{ details.participants.length }}</span>\n </button>\n <button\n type=\"button\"\n class=\"tk-live-meeting__tab\"\n [class.tk-live-meeting__tab--active]=\"activeTab === 'lobby'\"\n (click)=\"setTab('lobby')\">\n Lobby\n <span class=\"tk-live-meeting__tab-count\">{{ lobby.length }}</span>\n </button>\n </div>\n\n <div class=\"tk-live-meeting__search\" *ngIf=\"activeTab === 'participants'\">\n <mat-icon class=\"tk-live-meeting__search-icon\">search</mat-icon>\n <input\n type=\"text\"\n class=\"tk-live-meeting__search-input\"\n placeholder=\"Search participants\"\n [(ngModel)]=\"searchTerm\">\n </div>\n </div>\n\n <table class=\"tk-live-meeting__table\" *ngIf=\"activeTab === 'participants'\">\n <thead>\n <tr>\n <th class=\"tk-live-meeting__checkbox-cell\"><input type=\"checkbox\"></th>\n <th>Participant</th>\n <th>Status</th>\n <th>Audio</th>\n <th>Video</th>\n <th>Join</th>\n <th>Quality</th>\n <th>Endpoint</th>\n <th class=\"tk-live-meeting__actions-header\">Actions</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let participant of filteredParticipants\">\n <td class=\"tk-live-meeting__checkbox-cell\"><input type=\"checkbox\"></td>\n <td>\n <span class=\"tk-live-meeting__participant-cell\">\n <span class=\"tk-live-meeting__avatar\">{{ participant.initials }}</span>\n <span class=\"tk-live-meeting__participant-info\">\n <span class=\"tk-live-meeting__participant-name\">{{ participant.name }}</span>\n <span class=\"tk-live-meeting__participant-badge\" *ngIf=\"participant.subBadge\">{{ participant.subBadge }}</span>\n </span>\n </span>\n </td>\n <td>\n <span\n class=\"tk-live-meeting__status\"\n [class.tk-live-meeting__status--connected]=\"participant.status === 'connected'\">\n <span class=\"tk-live-meeting__status-dot\"></span>\n {{ participant.status === 'connected' ? 'Connected' : 'Disconnected' }}\n </span>\n </td>\n <td>\n <span\n *ngIf=\"participant.audioMuted\"\n class=\"tk-live-meeting__state-icon tk-live-meeting__state-icon--mic-muted\"\n aria-hidden=\"true\"></span>\n <img\n *ngIf=\"!participant.audioMuted\"\n class=\"tk-live-meeting__state-icon\"\n src=\"assets/icons/microphone-regular.svg\"\n alt=\"\">\n </td>\n <td>\n <img\n class=\"tk-live-meeting__state-icon\"\n [class.tk-live-meeting__state-icon--muted]=\"!participant.videoOn\"\n src=\"assets/icons/camera-regular.svg\"\n alt=\"\">\n </td>\n <td>{{ participant.joinTime }}</td>\n <td>\n <span\n class=\"tk-live-meeting__quality-badge\"\n *ngIf=\"participant.quality; else noQuality\"\n [class.tk-live-meeting__quality-badge--good]=\"participant.quality === 'good'\"\n [class.tk-live-meeting__quality-badge--fair]=\"participant.quality === 'fair'\"\n [class.tk-live-meeting__quality-badge--poor]=\"participant.quality === 'poor'\">\n <span class=\"tk-live-meeting__quality-dot\"></span>\n {{ participant.quality | titlecase }}\n </span>\n <ng-template #noQuality>&mdash;</ng-template>\n </td>\n <td>\n <span class=\"tk-live-meeting__endpoint-cell\">\n <mat-icon *ngIf=\"participant.endpointIcon\" class=\"tk-live-meeting__endpoint-icon\">{{ participant.endpointIcon === 'mail' ? 'mail' : 'call' }}</mat-icon>\n {{ participant.endpoint }}\n </span>\n </td>\n <td (click)=\"$event.stopPropagation()\">\n <span class=\"tk-live-meeting__actions-cell\">\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Toggle audio\" (click)=\"toggleParticipantAudio(participant)\">\n <img [src]=\"participant.audioMuted ? 'assets/icons/microphone-muted-regular.svg' : 'assets/icons/microphone-regular.svg'\" alt=\"\">\n </button>\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Toggle video\" (click)=\"toggleParticipantVideo(participant)\">\n <img src=\"assets/icons/camera-regular.svg\" alt=\"\">\n </button>\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Drop participant\" (click)=\"removeParticipant(participant)\">\n <mat-icon>close</mat-icon>\n </button>\n <span class=\"tk-live-meeting__menu-wrap\">\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"More actions\" (click)=\"toggleActionsMenu(participant)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <div class=\"tk-live-meeting__menu\" *ngIf=\"openActionsMenuId === participant.id\">\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Change individual layout</button>\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Move to another meeting</button>\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Allow content sharing</button>\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">View participant details</button>\n <button type=\"button\" class=\"tk-live-meeting__menu-item tk-live-meeting__menu-item--danger\" (click)=\"removeParticipant(participant)\">Drop</button>\n </div>\n </span>\n </span>\n </td>\n </tr>\n <tr *ngIf=\"!filteredParticipants.length\">\n <td colspan=\"9\" class=\"tk-live-meeting__empty\">No participants match your search.</td>\n </tr>\n </tbody>\n </table>\n\n <table class=\"tk-live-meeting__table\" *ngIf=\"activeTab === 'lobby'\">\n <thead>\n <tr>\n <th>Participant</th>\n <th>Endpoint</th>\n <th>Waiting since</th>\n <th class=\"tk-live-meeting__actions-header\">Actions</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let entry of lobby\">\n <td>{{ entry.name }}</td>\n <td>{{ entry.endpoint }}</td>\n <td>{{ entry.waitingSince }}</td>\n <td class=\"tk-live-meeting__lobby-actions\">\n <button type=\"button\" class=\"tk-live-meeting__admit\" (click)=\"admitFromLobby(entry)\">Admit</button>\n <button type=\"button\" class=\"tk-live-meeting__deny\" (click)=\"denyFromLobby(entry)\">Deny</button>\n </td>\n </tr>\n <tr *ngIf=\"!lobby.length\">\n <td colspan=\"4\" class=\"tk-live-meeting__empty\">No one is waiting in the lobby.</td>\n </tr>\n </tbody>\n </table>\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-live-meeting__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-live-meeting__breadcrumb-link{color:#0009;text-decoration:none}.tk-live-meeting__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-live-meeting__breadcrumb-current{color:#000000f2}.tk-live-meeting__header{margin-bottom:1.25rem}.tk-live-meeting__heading{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem;margin-bottom:.5rem}.tk-live-meeting__title{margin:0;font-size:1.375rem;font-weight:600}.tk-live-meeting__badge{display:inline-flex;align-items:center;gap:.375rem;padding:.1875rem .625rem;border-radius:999px;background:rgba(0,0,0,.04);font-size:.75rem;font-weight:500;color:#000000f2}.tk-live-meeting__badge--live{background:rgba(29,128,95,.1);color:#1d805f}.tk-live-meeting__badge--locked{background:#e8e8ea;color:#47484c}.tk-live-meeting__badge--recording{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__badge--quality-good{background:rgba(29,128,95,.1);color:#1d805f}.tk-live-meeting__badge--quality-fair{background:rgba(181,134,11,.1);color:#b5860b}.tk-live-meeting__badge--quality-poor{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__badge-dot{width:.4375rem;height:.4375rem;border-radius:50%;background:currentColor}.tk-live-meeting__badge-icon{height:.75rem;width:.75rem;opacity:.75}.tk-live-meeting__subline{margin:0;font-size:.8125rem;color:#0009}.tk-live-meeting__subline-sep{margin:0 .375rem}.tk-live-meeting__toolbar{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:.625rem;margin-bottom:1.25rem;padding-bottom:1.125rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-live-meeting__toolbar-primary,.tk-live-meeting__toolbar-secondary{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem}.tk-live-meeting__toolbar-secondary{margin-left:auto}.tk-live-meeting__action{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-live-meeting__action mat-icon,.tk-live-meeting__action .tk-live-meeting__action-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;opacity:.7}.tk-live-meeting__action:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__action--danger{border-color:#c7363659;color:#c73636}.tk-live-meeting__action--danger mat-icon,.tk-live-meeting__action--danger .tk-live-meeting__action-icon{opacity:1}.tk-live-meeting__action--icon-only{padding:.5rem}.tk-live-meeting__action--plain{background:none;border-color:transparent}.tk-live-meeting__action--plain:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__tabs-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.tk-live-meeting__tabs{display:inline-flex;align-items:center;gap:.375rem}.tk-live-meeting__tab{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:none;border:1px solid transparent;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#0009;cursor:pointer;color:#000000f2;border-radius:1.5rem}.tk-live-meeting__tab:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__tab--active{background-color:#0003;color:#000000f2;border-radius:1.5rem}.tk-live-meeting__tab-count{padding:.0625rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:600}.tk-live-meeting__search{display:flex;align-items:center;gap:.5rem;width:16rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-live-meeting__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-live-meeting__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meeting__search-input::placeholder{color:#0006}.tk-live-meeting__table{width:100%;border-collapse:collapse;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-live-meeting__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-live-meeting__table th:hover{background-color:#dedede}.tk-live-meeting__table td{min-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-live-meeting__table tbody tr:hover td{background:#ededed}.tk-live-meeting__checkbox-cell{width:2.25rem}.tk-live-meeting__actions-header{min-width:140px}.tk-live-meeting__participant-cell{display:flex;align-items:center;gap:.625rem}.tk-live-meeting__avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;background:rgba(3,83,168,.1);color:#1170cf;font-size:.6875rem;font-weight:600}.tk-live-meeting__participant-info{display:flex;flex-direction:column;gap:.125rem}.tk-live-meeting__participant-name{font-weight:500}.tk-live-meeting__participant-badge{align-self:flex-start;padding:.0625rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;color:#0009}.tk-live-meeting__status{display:inline-flex;align-items:center;gap:.375rem;color:#0009}.tk-live-meeting__status-dot{width:.4375rem;height:.4375rem;border-radius:50%;background:rgba(0,0,0,.3)}.tk-live-meeting__status--connected{color:#1d805f}.tk-live-meeting__status--connected .tk-live-meeting__status-dot{background:currentColor}.tk-live-meeting__state-icon{display:inline-block;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#000000f2;opacity:.85}.tk-live-meeting__state-icon--muted{color:#c73636;opacity:.35}.tk-live-meeting__state-icon--mic-muted{background-color:#c73636;mask-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M24.002 28.25h-1.979a5.114 5.114 0 0 1-5.205-4.565 5.7 5.7 0 0 0 2.597-1.087l-1.063-1.063A4.245 4.245 0 0 1 11.75 18v-3.067l-1.5-1.5V18a5.755 5.755 0 0 0 5.037 5.7 6.67 6.67 0 0 0 2.437 4.55H8.002a.75.75 0 1 0 0 1.5h16a.75.75 0 1 0 0-1.5M28.53 27.47l-7.255-7.256c.308-.698.47-1.451.475-2.214V8a5.75 5.75 0 0 0-11.5 0v1.19L4.53 3.47a.75.75 0 0 0-1.06 1.06l24 24a.75.75 0 0 0 1.06-1.06M11.75 10.69V8a4.25 4.25 0 0 1 8.5 0v10a4 4 0 0 1-.147 1.042z%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat;mask-position:center;mask-size:contain;opacity:1}.tk-live-meeting__quality-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.125rem .625rem;border-radius:999px;background:rgba(0,0,0,.04);font-size:.75rem;font-weight:500;color:#000000f2}.tk-live-meeting__quality-dot{width:.375rem;height:.375rem;border-radius:50%}.tk-live-meeting__quality-badge--good{background-color:oklch(95% .05 155);color:#1d805f;border:1px solid oklch(85% .08 155)}.tk-live-meeting__quality-badge--good .tk-live-meeting__quality-dot{background-color:oklch(55% .15 155)}.tk-live-meeting__quality-badge--fair{background-color:oklch(97% .06 85);border-color:oklch(88% .1 85);color:oklch(42% .12 75)}.tk-live-meeting__quality-badge--fair .tk-live-meeting__quality-dot{background-color:oklch(70% .16 75)}.tk-live-meeting__quality-badge--poor{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__quality-badge--poor .tk-live-meeting__quality-dot{background:currentColor}.tk-live-meeting__endpoint-cell{display:inline-flex;align-items:center;gap:.375rem}.tk-live-meeting__endpoint-icon{font-size:1rem;height:1rem;width:1rem;color:#0006}.tk-live-meeting__actions-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative}.tk-live-meeting__row-action{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:.25rem;color:#0009;cursor:pointer}.tk-live-meeting__row-action mat-icon,.tk-live-meeting__row-action img{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meeting__row-action:hover{color:#000000f2}.tk-live-meeting__menu-wrap{position:relative;display:inline-flex}.tk-live-meeting__menu{position:absolute;top:calc(100% + .25rem);right:0;z-index:10;display:flex;flex-direction:column;min-width:12.5rem;padding:.375rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px;box-shadow:0 8px 24px #0000001f;white-space:nowrap}.tk-live-meeting__menu-item{padding:.5rem .625rem;background:none;border:none;border-radius:6px;text-align:left;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-live-meeting__menu-item:hover{background:rgba(0,0,0,.04)}.tk-live-meeting__menu-item--danger{color:#c73636}.tk-live-meeting__lobby-actions{display:flex;align-items:center;gap:.5rem}.tk-live-meeting__admit{padding:.375rem .75rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;cursor:pointer}.tk-live-meeting__admit:hover{background:#222}.tk-live-meeting__deny{padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-live-meeting__deny:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__empty{padding:1.5rem;text-align:center;color:#0009}\n"] }]
790
+ args: [{ selector: 'tk-live-meeting', template: "<div class=\"tk-live-meeting\" *ngIf=\"details\" (click)=\"closeActionsMenu()\">\r\n <div class=\"tk-live-meeting__breadcrumb\">\r\n <a href=\"javascript:void(0)\" class=\"tk-live-meeting__breadcrumb-link\" (click)=\"onBack()\">Meetings</a>\r\n <span class=\"tk-live-meeting__breadcrumb-separator\">&rsaquo;</span>\r\n <a href=\"javascript:void(0)\" class=\"tk-live-meeting__breadcrumb-link\" (click)=\"onBack()\">Live</a>\r\n <span class=\"tk-live-meeting__breadcrumb-separator\">&rsaquo;</span>\r\n <span class=\"tk-live-meeting__breadcrumb-current\">{{ details.title }}</span>\r\n </div>\r\n\r\n <div class=\"tk-live-meeting__header\">\r\n <div class=\"tk-live-meeting__heading\">\r\n <h1 class=\"tk-live-meeting__title\">{{ details.title }}</h1>\r\n\r\n <span class=\"tk-live-meeting__badge tk-live-meeting__badge--live\">\r\n <span class=\"tk-live-meeting__badge-dot\"></span>\r\n Live &middot; {{ details.duration }}\r\n </span>\r\n\r\n <span\r\n class=\"tk-live-meeting__badge\"\r\n [class.tk-live-meeting__badge--locked]=\"details.lockState === 'locked'\">\r\n <img *ngIf=\"details.lockState === 'locked'\" class=\"tk-live-meeting__badge-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\r\n {{ details.lockState === 'locked' ? 'Locked' : 'Unlocked' }}\r\n </span>\r\n\r\n <span class=\"tk-live-meeting__badge tk-live-meeting__badge--recording\" *ngIf=\"details.isRecording\">\r\n <img class=\"tk-live-meeting__badge-icon\" src=\"assets/icons/record-active-regular.svg\" alt=\"\">\r\n Recording\r\n </span>\r\n\r\n <span\r\n class=\"tk-live-meeting__badge tk-live-meeting__badge--quality\"\r\n [class.tk-live-meeting__badge--quality-good]=\"details.quality === 'good'\"\r\n [class.tk-live-meeting__badge--quality-fair]=\"details.quality === 'fair'\"\r\n [class.tk-live-meeting__badge--quality-poor]=\"details.quality === 'poor'\">\r\n <span class=\"tk-live-meeting__badge-dot\"></span>\r\n {{ details.quality | titlecase }}\r\n </span>\r\n </div>\r\n\r\n <p class=\"tk-live-meeting__subline\">\r\n Owner: <strong>{{ details.ownerName }}</strong>\r\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\r\n ID: {{ details.meetingId }}\r\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\r\n {{ details.ownerEmail }}\r\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\r\n Started {{ details.startTime }}\r\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\r\n {{ details.connectedCount }} connected &middot; {{ details.lobbyCount }} in lobby\r\n <span class=\"tk-live-meeting__subline-sep\">&middot;</span>\r\n Cluster {{ details.cluster }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"tk-live-meeting__toolbar\">\r\n <div class=\"tk-live-meeting__toolbar-primary\">\r\n <button type=\"button\" class=\"tk-live-meeting__action\">\r\n <mat-icon>person_add</mat-icon>\r\n Add participant\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"toggleLock()\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\r\n {{ details.lockState === 'locked' ? 'Unlock' : 'Lock' }}\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"muteAll()\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/microphone-muted-regular.svg\" alt=\"\">\r\n Mute all\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"unmuteAll()\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/microphone-regular.svg\" alt=\"\">\r\n Unmute all\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__action\">\r\n <mat-icon>grid_view</mat-icon>\r\n Set layout\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meeting__action\"\r\n [class.tk-live-meeting__action--danger]=\"details.isRecording\"\r\n (click)=\"toggleRecording()\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/record-active-regular.svg\" alt=\"\">\r\n {{ details.isRecording ? 'Stop recording' : 'Start recording' }}\r\n </button>\r\n\r\n <button type=\"button\" class=\"tk-live-meeting__action\" (click)=\"toggleStreaming()\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/wifi-signal-good-regular.svg\" alt=\"\">\r\n {{ details.isStreaming ? 'Stop streaming' : 'Start streaming' }}\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-live-meeting__toolbar-secondary\">\r\n <button type=\"button\" class=\"tk-live-meeting__action tk-live-meeting__action--plain\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/info-circle-regular.svg\" alt=\"\">\r\n Event logs\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__action tk-live-meeting__action--plain\">\r\n <img class=\"tk-live-meeting__action-icon\" src=\"assets/icons/copy-regular.svg\" alt=\"\">\r\n Copy join info\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meeting__action tk-live-meeting__action--plain tk-live-meeting__action--icon-only\"\r\n aria-label=\"More actions\">\r\n <mat-icon>more_horiz</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meeting__tabs-row\">\r\n <div class=\"tk-live-meeting__tabs\">\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meeting__tab\"\r\n [class.tk-live-meeting__tab--active]=\"activeTab === 'participants'\"\r\n (click)=\"setTab('participants')\">\r\n Participants\r\n <span class=\"tk-live-meeting__tab-count\">{{ details.participants.length }}</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meeting__tab\"\r\n [class.tk-live-meeting__tab--active]=\"activeTab === 'lobby'\"\r\n (click)=\"setTab('lobby')\">\r\n Lobby\r\n <span class=\"tk-live-meeting__tab-count\">{{ lobby.length }}</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-live-meeting__search\" *ngIf=\"activeTab === 'participants'\">\r\n <mat-icon class=\"tk-live-meeting__search-icon\">search</mat-icon>\r\n <input\r\n type=\"text\"\r\n class=\"tk-live-meeting__search-input\"\r\n placeholder=\"Search participants\"\r\n [(ngModel)]=\"searchTerm\">\r\n </div>\r\n </div>\r\n\r\n <table class=\"tk-live-meeting__table\" *ngIf=\"activeTab === 'participants'\">\r\n <thead>\r\n <tr>\r\n <th class=\"tk-live-meeting__checkbox-cell\"><input type=\"checkbox\"></th>\r\n <th>Participant</th>\r\n <th>Status</th>\r\n <th>Audio</th>\r\n <th>Video</th>\r\n <th>Join</th>\r\n <th>Quality</th>\r\n <th>Endpoint</th>\r\n <th class=\"tk-live-meeting__actions-header\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let participant of filteredParticipants\">\r\n <td class=\"tk-live-meeting__checkbox-cell\"><input type=\"checkbox\"></td>\r\n <td>\r\n <span class=\"tk-live-meeting__participant-cell\">\r\n <span class=\"tk-live-meeting__avatar\">{{ participant.initials }}</span>\r\n <span class=\"tk-live-meeting__participant-info\">\r\n <span class=\"tk-live-meeting__participant-name\">{{ participant.name }}</span>\r\n <span class=\"tk-live-meeting__participant-badge\" *ngIf=\"participant.subBadge\">{{ participant.subBadge }}</span>\r\n </span>\r\n </span>\r\n </td>\r\n <td>\r\n <span\r\n class=\"tk-live-meeting__status\"\r\n [class.tk-live-meeting__status--connected]=\"participant.status === 'connected'\">\r\n <span class=\"tk-live-meeting__status-dot\"></span>\r\n {{ participant.status === 'connected' ? 'Connected' : 'Disconnected' }}\r\n </span>\r\n </td>\r\n <td>\r\n <span\r\n *ngIf=\"participant.audioMuted\"\r\n class=\"tk-live-meeting__state-icon tk-live-meeting__state-icon--mic-muted\"\r\n aria-hidden=\"true\"></span>\r\n <img\r\n *ngIf=\"!participant.audioMuted\"\r\n class=\"tk-live-meeting__state-icon\"\r\n src=\"assets/icons/microphone-regular.svg\"\r\n alt=\"\">\r\n </td>\r\n <td>\r\n <img\r\n class=\"tk-live-meeting__state-icon\"\r\n [class.tk-live-meeting__state-icon--muted]=\"!participant.videoOn\"\r\n src=\"assets/icons/camera-regular.svg\"\r\n alt=\"\">\r\n </td>\r\n <td>{{ participant.joinTime }}</td>\r\n <td>\r\n <span\r\n class=\"tk-live-meeting__quality-badge\"\r\n *ngIf=\"participant.quality; else noQuality\"\r\n [class.tk-live-meeting__quality-badge--good]=\"participant.quality === 'good'\"\r\n [class.tk-live-meeting__quality-badge--fair]=\"participant.quality === 'fair'\"\r\n [class.tk-live-meeting__quality-badge--poor]=\"participant.quality === 'poor'\">\r\n <span class=\"tk-live-meeting__quality-dot\"></span>\r\n {{ participant.quality | titlecase }}\r\n </span>\r\n <ng-template #noQuality>&mdash;</ng-template>\r\n </td>\r\n <td>\r\n <span class=\"tk-live-meeting__endpoint-cell\">\r\n <mat-icon *ngIf=\"participant.endpointIcon\" class=\"tk-live-meeting__endpoint-icon\">{{ participant.endpointIcon === 'mail' ? 'mail' : 'call' }}</mat-icon>\r\n {{ participant.endpoint }}\r\n </span>\r\n </td>\r\n <td (click)=\"$event.stopPropagation()\">\r\n <span class=\"tk-live-meeting__actions-cell\">\r\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Toggle audio\" (click)=\"toggleParticipantAudio(participant)\">\r\n <img [src]=\"participant.audioMuted ? 'assets/icons/microphone-muted-regular.svg' : 'assets/icons/microphone-regular.svg'\" alt=\"\">\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Toggle video\" (click)=\"toggleParticipantVideo(participant)\">\r\n <img src=\"assets/icons/camera-regular.svg\" alt=\"\">\r\n </button>\r\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"Drop participant\" (click)=\"removeParticipant(participant)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"tk-live-meeting__menu-wrap\">\r\n <button type=\"button\" class=\"tk-live-meeting__row-action\" aria-label=\"More actions\" (click)=\"toggleActionsMenu(participant)\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <div class=\"tk-live-meeting__menu\" *ngIf=\"openActionsMenuId === participant.id\">\r\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Change individual layout</button>\r\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Move to another meeting</button>\r\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">Allow content sharing</button>\r\n <button type=\"button\" class=\"tk-live-meeting__menu-item\">View participant details</button>\r\n <button type=\"button\" class=\"tk-live-meeting__menu-item tk-live-meeting__menu-item--danger\" (click)=\"removeParticipant(participant)\">Drop</button>\r\n </div>\r\n </span>\r\n </span>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!filteredParticipants.length\">\r\n <td colspan=\"9\" class=\"tk-live-meeting__empty\">No participants match your search.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <table class=\"tk-live-meeting__table\" *ngIf=\"activeTab === 'lobby'\">\r\n <thead>\r\n <tr>\r\n <th>Participant</th>\r\n <th>Endpoint</th>\r\n <th>Waiting since</th>\r\n <th class=\"tk-live-meeting__actions-header\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let entry of lobby\">\r\n <td>{{ entry.name }}</td>\r\n <td>{{ entry.endpoint }}</td>\r\n <td>{{ entry.waitingSince }}</td>\r\n <td class=\"tk-live-meeting__lobby-actions\">\r\n <button type=\"button\" class=\"tk-live-meeting__admit\" (click)=\"admitFromLobby(entry)\">Admit</button>\r\n <button type=\"button\" class=\"tk-live-meeting__deny\" (click)=\"denyFromLobby(entry)\">Deny</button>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!lobby.length\">\r\n <td colspan=\"4\" class=\"tk-live-meeting__empty\">No one is waiting in the lobby.</td>\r\n </tr>\r\n </tbody>\r\n </table>\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-live-meeting__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-live-meeting__breadcrumb-link{color:#0009;text-decoration:none}.tk-live-meeting__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-live-meeting__breadcrumb-current{color:#000000f2}.tk-live-meeting__header{margin-bottom:1.25rem}.tk-live-meeting__heading{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem;margin-bottom:.5rem}.tk-live-meeting__title{margin:0;font-size:1.375rem;font-weight:600}.tk-live-meeting__badge{display:inline-flex;align-items:center;gap:.375rem;padding:.1875rem .625rem;border-radius:999px;background:rgba(0,0,0,.04);font-size:.75rem;font-weight:500;color:#000000f2}.tk-live-meeting__badge--live{background:rgba(29,128,95,.1);color:#1d805f}.tk-live-meeting__badge--locked{background:#e8e8ea;color:#47484c}.tk-live-meeting__badge--recording{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__badge--quality-good{background:rgba(29,128,95,.1);color:#1d805f}.tk-live-meeting__badge--quality-fair{background:rgba(181,134,11,.1);color:#b5860b}.tk-live-meeting__badge--quality-poor{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__badge-dot{width:.4375rem;height:.4375rem;border-radius:50%;background:currentColor}.tk-live-meeting__badge-icon{height:.75rem;width:.75rem;opacity:.75}.tk-live-meeting__subline{margin:0;font-size:.8125rem;color:#0009}.tk-live-meeting__subline-sep{margin:0 .375rem}.tk-live-meeting__toolbar{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:.625rem;margin-bottom:1.25rem;padding-bottom:1.125rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-live-meeting__toolbar-primary,.tk-live-meeting__toolbar-secondary{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem}.tk-live-meeting__toolbar-secondary{margin-left:auto}.tk-live-meeting__action{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-live-meeting__action mat-icon,.tk-live-meeting__action .tk-live-meeting__action-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;opacity:.7}.tk-live-meeting__action:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__action--danger{border-color:#c7363659;color:#c73636}.tk-live-meeting__action--danger mat-icon,.tk-live-meeting__action--danger .tk-live-meeting__action-icon{opacity:1}.tk-live-meeting__action--icon-only{padding:.5rem}.tk-live-meeting__action--plain{background:none;border-color:transparent}.tk-live-meeting__action--plain:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__tabs-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.tk-live-meeting__tabs{display:inline-flex;align-items:center;gap:.375rem}.tk-live-meeting__tab{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:none;border:1px solid transparent;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#0009;cursor:pointer;color:#000000f2;border-radius:1.5rem}.tk-live-meeting__tab:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__tab--active{background-color:#0003;color:#000000f2;border-radius:1.5rem}.tk-live-meeting__tab-count{padding:.0625rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:600}.tk-live-meeting__search{display:flex;align-items:center;gap:.5rem;width:16rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-live-meeting__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-live-meeting__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meeting__search-input::placeholder{color:#0006}.tk-live-meeting__table{width:100%;border-collapse:collapse;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-live-meeting__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-live-meeting__table th:hover{background-color:#dedede}.tk-live-meeting__table td{min-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-live-meeting__table tbody tr:hover td{background:#ededed}.tk-live-meeting__checkbox-cell{width:2.25rem}.tk-live-meeting__actions-header{min-width:140px}.tk-live-meeting__participant-cell{display:flex;align-items:center;gap:.625rem}.tk-live-meeting__avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;background:rgba(3,83,168,.1);color:#1170cf;font-size:.6875rem;font-weight:600}.tk-live-meeting__participant-info{display:flex;flex-direction:column;gap:.125rem}.tk-live-meeting__participant-name{font-weight:500}.tk-live-meeting__participant-badge{align-self:flex-start;padding:.0625rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;color:#0009}.tk-live-meeting__status{display:inline-flex;align-items:center;gap:.375rem;color:#0009}.tk-live-meeting__status-dot{width:.4375rem;height:.4375rem;border-radius:50%;background:rgba(0,0,0,.3)}.tk-live-meeting__status--connected{color:#1d805f}.tk-live-meeting__status--connected .tk-live-meeting__status-dot{background:currentColor}.tk-live-meeting__state-icon{display:inline-block;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#000000f2;opacity:.85}.tk-live-meeting__state-icon--muted{color:#c73636;opacity:.35}.tk-live-meeting__state-icon--mic-muted{background-color:#c73636;mask-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M24.002 28.25h-1.979a5.114 5.114 0 0 1-5.205-4.565 5.7 5.7 0 0 0 2.597-1.087l-1.063-1.063A4.245 4.245 0 0 1 11.75 18v-3.067l-1.5-1.5V18a5.755 5.755 0 0 0 5.037 5.7 6.67 6.67 0 0 0 2.437 4.55H8.002a.75.75 0 1 0 0 1.5h16a.75.75 0 1 0 0-1.5M28.53 27.47l-7.255-7.256c.308-.698.47-1.451.475-2.214V8a5.75 5.75 0 0 0-11.5 0v1.19L4.53 3.47a.75.75 0 0 0-1.06 1.06l24 24a.75.75 0 0 0 1.06-1.06M11.75 10.69V8a4.25 4.25 0 0 1 8.5 0v10a4 4 0 0 1-.147 1.042z%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat;mask-position:center;mask-size:contain;opacity:1}.tk-live-meeting__quality-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.125rem .625rem;border-radius:999px;background:rgba(0,0,0,.04);font-size:.75rem;font-weight:500;color:#000000f2}.tk-live-meeting__quality-dot{width:.375rem;height:.375rem;border-radius:50%}.tk-live-meeting__quality-badge--good{background-color:oklch(95% .05 155);color:#1d805f;border:1px solid oklch(85% .08 155)}.tk-live-meeting__quality-badge--good .tk-live-meeting__quality-dot{background-color:oklch(55% .15 155)}.tk-live-meeting__quality-badge--fair{background-color:oklch(97% .06 85);border-color:oklch(88% .1 85);color:oklch(42% .12 75)}.tk-live-meeting__quality-badge--fair .tk-live-meeting__quality-dot{background-color:oklch(70% .16 75)}.tk-live-meeting__quality-badge--poor{background:rgba(199,54,54,.1);color:#c73636}.tk-live-meeting__quality-badge--poor .tk-live-meeting__quality-dot{background:currentColor}.tk-live-meeting__endpoint-cell{display:inline-flex;align-items:center;gap:.375rem}.tk-live-meeting__endpoint-icon{font-size:1rem;height:1rem;width:1rem;color:#0006}.tk-live-meeting__actions-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative}.tk-live-meeting__row-action{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:.25rem;color:#0009;cursor:pointer}.tk-live-meeting__row-action mat-icon,.tk-live-meeting__row-action img{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meeting__row-action:hover{color:#000000f2}.tk-live-meeting__menu-wrap{position:relative;display:inline-flex}.tk-live-meeting__menu{position:absolute;top:calc(100% + .25rem);right:0;z-index:10;display:flex;flex-direction:column;min-width:12.5rem;padding:.375rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px;box-shadow:0 8px 24px #0000001f;white-space:nowrap}.tk-live-meeting__menu-item{padding:.5rem .625rem;background:none;border:none;border-radius:6px;text-align:left;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-live-meeting__menu-item:hover{background:rgba(0,0,0,.04)}.tk-live-meeting__menu-item--danger{color:#c73636}.tk-live-meeting__lobby-actions{display:flex;align-items:center;gap:.5rem}.tk-live-meeting__admit{padding:.375rem .75rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;cursor:pointer}.tk-live-meeting__admit:hover{background:#222}.tk-live-meeting__deny{padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-live-meeting__deny:hover{background:rgba(0,0,0,.03)}.tk-live-meeting__empty{padding:1.5rem;text-align:center;color:#0009}\n"] }]
791
791
  }], ctorParameters: function () { return [{ type: LiveMeetingsService }]; }, propDecorators: { meetingId: [{
792
792
  type: Input
793
793
  }], back: [{