@tuki-io/tuki-widgets 0.0.219-dev.30 → 0.0.219-dev.32

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 (11) hide show
  1. package/esm2020/meetings/src/components/live-meetings/live-meetings.component.mjs +6 -3
  2. package/esm2020/meetings/src/components/meeting-spaces/meeting-space/meeting-space.component.mjs +3 -3
  3. package/esm2020/meetings/src/components/meeting-spaces/meeting-spaces.component.mjs +6 -3
  4. package/esm2020/meetings/src/meetings.component.mjs +2 -2
  5. package/fesm2015/tuki-io-tuki-widgets-meetings.mjs +14 -8
  6. package/fesm2015/tuki-io-tuki-widgets-meetings.mjs.map +1 -1
  7. package/fesm2020/tuki-io-tuki-widgets-meetings.mjs +14 -8
  8. package/fesm2020/tuki-io-tuki-widgets-meetings.mjs.map +1 -1
  9. package/meetings/src/components/live-meetings/live-meetings.component.d.ts +1 -0
  10. package/meetings/src/components/meeting-spaces/meeting-spaces.component.d.ts +1 -0
  11. package/package.json +1 -1
package/fesm2015/tuki-io-tuki-widgets-meetings.mjs CHANGED
@@ -361,6 +361,9 @@ class MeetingSpacesComponent {
361
361
  (!this.filters.owner || space.owner === this.filters.owner) &&
362
362
  (!this.filters.cluster || space.cluster === this.filters.cluster));
363
363
  }
364
+ onSearchInputChange(event) {
365
+ this.searchTerm = event.target.value;
366
+ }
364
367
  onCreateMeetingSpace() {
365
368
  this.createMeetingSpace.emit();
366
369
  }
@@ -378,10 +381,10 @@ class MeetingSpacesComponent {
378
381
  }
379
382
  }
380
383
  MeetingSpacesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpacesComponent, deps: [{ token: MeetingSpacesService }], target: i0.ɵɵFactoryTarget.Component });
381
- MeetingSpacesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingSpacesComponent, selector: "tk-meeting-spaces", outputs: { createMeetingSpace: "createMeetingSpace", editMeetingSpace: "editMeetingSpace" }, ngImport: i0, template: "<div class=\"tk-meeting-spaces__header\">\r\n <h2 class=\"tk-meeting-spaces__title\">Meeting Spaces</h2>\r\n <button type=\"button\" class=\"tk-meeting-spaces__create-button\" (click)=\"onCreateMeetingSpace()\">\r\n <mat-icon class=\"tk-meeting-spaces__create-icon\">add</mat-icon>\r\n Create meeting space\r\n </button>\r\n</div>\r\n\r\n<div class=\"tk-meeting-spaces__toolbar\">\r\n <div class=\"tk-meeting-spaces__search\">\r\n <mat-icon class=\"tk-meeting-spaces__search-icon\">search</mat-icon>\r\n <input\r\n type=\"text\"\r\n class=\"tk-meeting-spaces__search-input\"\r\n placeholder=\"Search by Name, URI or Meeting ID\"\r\n [(ngModel)]=\"searchTerm\">\r\n </div>\r\n\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-button\" (click)=\"toggleFilterPanel()\">\r\n <img class=\"tk-meeting-spaces__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n Filter\r\n </button>\r\n\r\n <span class=\"tk-meeting-spaces__count\">{{ filteredMeetingSpaces.length }} spaces</span>\r\n</div>\r\n\r\n<table class=\"tk-meeting-spaces__table\">\r\n <thead>\r\n <tr>\r\n <th>Meeting Name</th>\r\n <th>URI</th>\r\n <th>Meeting ID</th>\r\n <th>Participants</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let space of filteredMeetingSpaces\">\r\n <td class=\"tk-meeting-spaces__name-cell\">\r\n <a href=\"javascript:void(0)\" class=\"tk-meeting-spaces__name-link\" (click)=\"onEditMeetingSpace(space)\">{{ space.name }}</a>\r\n <span *ngIf=\"space.managed\" class=\"tk-meeting-spaces__badge\">Managed</span>\r\n </td>\r\n <td>{{ space.uri }}</td>\r\n <td>{{ space.meetingId }}</td>\r\n <td>{{ space.participants }}</td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n <td colspan=\"4\" class=\"tk-meeting-spaces__empty\">No meeting spaces match your search.</td>\r\n </tr>\r\n </tbody>\r\n</table>\r\n\r\n<div class=\"tk-meeting-spaces__footer\">\r\n <span class=\"tk-meeting-spaces__footer-text\">\r\n Showing {{ filteredMeetingSpaces.length ? 1 : 0 }}-{{ filteredMeetingSpaces.length }} of {{ meetingSpaces.length }}\r\n </span>\r\n <div class=\"tk-meeting-spaces__pagination\">\r\n <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Previous</button>\r\n <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Next</button>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"tk-meeting-spaces__filter-backdrop\"\r\n *ngIf=\"isFilterPanelOpen\"\r\n (click)=\"closeFilterPanel()\">\r\n</div>\r\n\r\n<aside class=\"tk-meeting-spaces__filter-panel\" [class.tk-meeting-spaces__filter-panel--open]=\"isFilterPanelOpen\">\r\n <div class=\"tk-meeting-spaces__filter-panel-header\">\r\n <h3 class=\"tk-meeting-spaces__filter-panel-title\">Filter meeting spaces</h3>\r\n <button\r\n type=\"button\"\r\n class=\"tk-meeting-spaces__filter-panel-close\"\r\n aria-label=\"Close filter panel\"\r\n (click)=\"closeFilterPanel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-panel-body\">\r\n <div class=\"tk-meeting-spaces__filter-field\">\r\n <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-owner\">Owner</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-owner\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.owner\">\r\n <option value=\"\">All owners</option>\r\n <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n </select>\r\n <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-field\">\r\n <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-cluster\">Cluster</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-cluster\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n <option value=\"\">All clusters</option>\r\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n </select>\r\n <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-panel-footer\">\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n </div>\r\n</aside>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-spaces__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-spaces__title{margin:0;font-size:1.125rem;font-weight:600}.tk-meeting-spaces__create-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-spaces__create-button:hover{background:#222}.tk-meeting-spaces__create-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-meeting-spaces__toolbar{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0 1rem}.tk-meeting-spaces__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-meeting-spaces__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meeting-spaces__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-spaces__search-input::placeholder{color:#0006}.tk-meeting-spaces__filter-button{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-meeting-spaces__filter-button:hover{background:rgba(0,0,0,.03)}.tk-meeting-spaces__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-meeting-spaces__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-meeting-spaces__table{width:100%;border-collapse:collapse;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-meeting-spaces__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-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-meeting-spaces__table tbody tr:hover td{background:#ededed}.tk-meeting-spaces__name-cell{display:flex;align-items:center;gap:.5rem}.tk-meeting-spaces__name-link{color:#1170cf;font-weight:500;text-decoration:none}.tk-meeting-spaces__name-link:hover{text-decoration:underline}.tk-meeting-spaces__badge{padding:.125rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:500;color:#0009;white-space:nowrap}.tk-meeting-spaces__empty{padding:1.5rem;text-align:center;color:#0009}.tk-meeting-spaces__footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-meeting-spaces__pagination{display:flex;gap:1rem}.tk-meeting-spaces__pagination-button{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;color:#0009;cursor:pointer}.tk-meeting-spaces__pagination-button:disabled{color:#0000004d;cursor:default}.tk-meeting-spaces__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-meeting-spaces__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-meeting-spaces__filter-panel--open{transform:translate(0)}.tk-meeting-spaces__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-meeting-spaces__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-meeting-spaces__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-spaces__filter-panel-close:hover{color:#000000f2}.tk-meeting-spaces__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-meeting-spaces__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-meeting-spaces__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-spaces__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-spaces__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-select:focus{outline:none;border-color:#0006}.tk-meeting-spaces__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-meeting-spaces__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem}.tk-meeting-spaces__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-meeting-spaces__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-meeting-spaces__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-meeting-spaces__filter-done:hover{background-color:oklch(95.5% .005 260)}\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.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.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"] }] });
384
+ MeetingSpacesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingSpacesComponent, selector: "tk-meeting-spaces", outputs: { createMeetingSpace: "createMeetingSpace", editMeetingSpace: "editMeetingSpace" }, ngImport: i0, template: "<div class=\"tk-meeting-spaces__header\">\r\n <h2 class=\"tk-meeting-spaces__title\">Meeting Spaces</h2>\r\n <button type=\"button\" class=\"tk-meeting-spaces__create-button\" (click)=\"onCreateMeetingSpace()\">\r\n <mat-icon class=\"tk-meeting-spaces__create-icon\">add</mat-icon>\r\n Create meeting space\r\n </button>\r\n</div>\r\n\r\n<div class=\"tk-meeting-spaces__toolbar\">\r\n <div style=\"position: relative; width: fit-content; min-width: 200px\">\r\n <input\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchInputChange($event)\"\r\n type=\"text\"\r\n placeholder=\"Search by display name, email\"\r\n style=\"\r\n width: 100%;\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 12px 6px 44px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n color: #222;\r\n outline: none;\r\n box-sizing: border-box;\r\n min-width: 280px;\r\n \"\r\n />\r\n <span\r\n style=\"\r\n position: absolute;\r\n left: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #757575;\r\n font-size: 18px;\r\n font-weight: normal;\r\n pointer-events: none;\r\n \"\r\n >\r\n <i\r\n class=\"material-icons\"\r\n style=\"font-size: 18px; font-weight: normal\"\r\n >search</i\r\n >\r\n </span>\r\n </div>\r\n\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-button\" (click)=\"toggleFilterPanel()\">\r\n <img class=\"tk-meeting-spaces__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n Filter\r\n </button>\r\n\r\n <span class=\"tk-meeting-spaces__count\">{{ filteredMeetingSpaces.length }} spaces</span>\r\n</div>\r\n\r\n<table class=\"tk-meeting-spaces__table\">\r\n <thead>\r\n <tr>\r\n <th>Meeting Name</th>\r\n <th>URI</th>\r\n <th>Meeting ID</th>\r\n <th>Participants</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let space of filteredMeetingSpaces\">\r\n <td class=\"tk-meeting-spaces__name-cell\">\r\n <a href=\"javascript:void(0)\" class=\"tk-meeting-spaces__name-link\" (click)=\"onEditMeetingSpace(space)\">{{ space.name }}</a>\r\n <span *ngIf=\"space.managed\" class=\"tk-meeting-spaces__badge\">Managed</span>\r\n </td>\r\n <td>{{ space.uri }}</td>\r\n <td>{{ space.meetingId }}</td>\r\n <td>{{ space.participants }}</td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n <td colspan=\"4\" class=\"tk-meeting-spaces__empty\">No meeting spaces match your search.</td>\r\n </tr>\r\n </tbody>\r\n</table>\r\n\r\n<div class=\"tk-meeting-spaces__footer\">\r\n <span class=\"tk-meeting-spaces__footer-text\">\r\n Showing {{ filteredMeetingSpaces.length ? 1 : 0 }}-{{ filteredMeetingSpaces.length }} of {{ meetingSpaces.length }}\r\n </span>\r\n <div class=\"tk-meeting-spaces__pagination\">\r\n <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Previous</button>\r\n <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Next</button>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"tk-meeting-spaces__filter-backdrop\"\r\n *ngIf=\"isFilterPanelOpen\"\r\n (click)=\"closeFilterPanel()\">\r\n</div>\r\n\r\n<aside class=\"tk-meeting-spaces__filter-panel\" [class.tk-meeting-spaces__filter-panel--open]=\"isFilterPanelOpen\">\r\n <div class=\"tk-meeting-spaces__filter-panel-header\">\r\n <h3 class=\"tk-meeting-spaces__filter-panel-title\">Filter meeting spaces</h3>\r\n <button\r\n type=\"button\"\r\n class=\"tk-meeting-spaces__filter-panel-close\"\r\n aria-label=\"Close filter panel\"\r\n (click)=\"closeFilterPanel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-panel-body\">\r\n <div class=\"tk-meeting-spaces__filter-field\">\r\n <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-owner\">Owner</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-owner\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.owner\">\r\n <option value=\"\">All owners</option>\r\n <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n </select>\r\n <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-field\">\r\n <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-cluster\">Cluster</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-cluster\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n <option value=\"\">All clusters</option>\r\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n </select>\r\n <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-panel-footer\">\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n </div>\r\n</aside>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-spaces__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-spaces__title{margin:0;font-size:1.125rem;font-weight:600}.tk-meeting-spaces__create-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-spaces__create-button:hover{background:#222}.tk-meeting-spaces__create-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-meeting-spaces__toolbar{display:flex;align-items:center;gap:.75rem;margin:.5rem 0 1rem}.tk-meeting-spaces__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-meeting-spaces__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meeting-spaces__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-spaces__search-input::placeholder{color:#0006}.tk-meeting-spaces__filter-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-button:hover{background:rgba(0,0,0,.03)}.tk-meeting-spaces__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-meeting-spaces__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-meeting-spaces__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-meeting-spaces__table th{height:29px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;cursor:pointer}.tk-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__table td{min-height:39px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px 0 0 var(--mch-OutlineSecondary-normal, rgba(0, 0, 0, .2));background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-meeting-spaces__table tbody tr:hover td{background:#ededed}.tk-meeting-spaces__table th:first-child,.tk-meeting-spaces__table td:first-child{width:14rem}.tk-meeting-spaces__table td:first-child{box-shadow:0 -.0625rem .25rem #0000001c;transition:background-color .2s,box-shadow .2s;border-block-end:.0625rem solid rgba(0,0,0,.2);clip-path:inset(0 -.25rem 0 -.25rem)}.tk-meeting-spaces__name-cell{display:flex;align-items:center;gap:.5rem;min-width:0}.tk-meeting-spaces__name-link{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#000000de;font-weight:500;text-decoration:none}.tk-meeting-spaces__badge{padding:.125rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:500;color:#0009;white-space:nowrap;flex-shrink:0}.tk-meeting-spaces__empty{padding:1.5rem;text-align:center;color:#0009}.tk-meeting-spaces__footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-meeting-spaces__pagination{display:flex;gap:1rem}.tk-meeting-spaces__pagination-button{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;color:#0009;cursor:pointer}.tk-meeting-spaces__pagination-button:disabled{color:#0000004d;cursor:default}.tk-meeting-spaces__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-meeting-spaces__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-meeting-spaces__filter-panel--open{transform:translate(0)}.tk-meeting-spaces__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-meeting-spaces__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-meeting-spaces__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-spaces__filter-panel-close:hover{color:#000000f2}.tk-meeting-spaces__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-meeting-spaces__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-meeting-spaces__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-spaces__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-spaces__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-select:focus{outline:none;border-color:#0006}.tk-meeting-spaces__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-meeting-spaces__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem}.tk-meeting-spaces__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-meeting-spaces__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-meeting-spaces__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-meeting-spaces__filter-done:hover{background-color:oklch(95.5% .005 260)}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.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"] }] });
382
385
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpacesComponent, decorators: [{
383
386
  type: Component,
384
- args: [{ selector: 'tk-meeting-spaces', template: "<div class=\"tk-meeting-spaces__header\">\r\n <h2 class=\"tk-meeting-spaces__title\">Meeting Spaces</h2>\r\n <button type=\"button\" class=\"tk-meeting-spaces__create-button\" (click)=\"onCreateMeetingSpace()\">\r\n <mat-icon class=\"tk-meeting-spaces__create-icon\">add</mat-icon>\r\n Create meeting space\r\n </button>\r\n</div>\r\n\r\n<div class=\"tk-meeting-spaces__toolbar\">\r\n <div class=\"tk-meeting-spaces__search\">\r\n <mat-icon class=\"tk-meeting-spaces__search-icon\">search</mat-icon>\r\n <input\r\n type=\"text\"\r\n class=\"tk-meeting-spaces__search-input\"\r\n placeholder=\"Search by Name, URI or Meeting ID\"\r\n [(ngModel)]=\"searchTerm\">\r\n </div>\r\n\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-button\" (click)=\"toggleFilterPanel()\">\r\n <img class=\"tk-meeting-spaces__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n Filter\r\n </button>\r\n\r\n <span class=\"tk-meeting-spaces__count\">{{ filteredMeetingSpaces.length }} spaces</span>\r\n</div>\r\n\r\n<table class=\"tk-meeting-spaces__table\">\r\n <thead>\r\n <tr>\r\n <th>Meeting Name</th>\r\n <th>URI</th>\r\n <th>Meeting ID</th>\r\n <th>Participants</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let space of filteredMeetingSpaces\">\r\n <td class=\"tk-meeting-spaces__name-cell\">\r\n <a href=\"javascript:void(0)\" class=\"tk-meeting-spaces__name-link\" (click)=\"onEditMeetingSpace(space)\">{{ space.name }}</a>\r\n <span *ngIf=\"space.managed\" class=\"tk-meeting-spaces__badge\">Managed</span>\r\n </td>\r\n <td>{{ space.uri }}</td>\r\n <td>{{ space.meetingId }}</td>\r\n <td>{{ space.participants }}</td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n <td colspan=\"4\" class=\"tk-meeting-spaces__empty\">No meeting spaces match your search.</td>\r\n </tr>\r\n </tbody>\r\n</table>\r\n\r\n<div class=\"tk-meeting-spaces__footer\">\r\n <span class=\"tk-meeting-spaces__footer-text\">\r\n Showing {{ filteredMeetingSpaces.length ? 1 : 0 }}-{{ filteredMeetingSpaces.length }} of {{ meetingSpaces.length }}\r\n </span>\r\n <div class=\"tk-meeting-spaces__pagination\">\r\n <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Previous</button>\r\n <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Next</button>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"tk-meeting-spaces__filter-backdrop\"\r\n *ngIf=\"isFilterPanelOpen\"\r\n (click)=\"closeFilterPanel()\">\r\n</div>\r\n\r\n<aside class=\"tk-meeting-spaces__filter-panel\" [class.tk-meeting-spaces__filter-panel--open]=\"isFilterPanelOpen\">\r\n <div class=\"tk-meeting-spaces__filter-panel-header\">\r\n <h3 class=\"tk-meeting-spaces__filter-panel-title\">Filter meeting spaces</h3>\r\n <button\r\n type=\"button\"\r\n class=\"tk-meeting-spaces__filter-panel-close\"\r\n aria-label=\"Close filter panel\"\r\n (click)=\"closeFilterPanel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-panel-body\">\r\n <div class=\"tk-meeting-spaces__filter-field\">\r\n <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-owner\">Owner</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-owner\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.owner\">\r\n <option value=\"\">All owners</option>\r\n <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n </select>\r\n <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-field\">\r\n <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-cluster\">Cluster</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-cluster\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n <option value=\"\">All clusters</option>\r\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n </select>\r\n <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-panel-footer\">\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n </div>\r\n</aside>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-spaces__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-spaces__title{margin:0;font-size:1.125rem;font-weight:600}.tk-meeting-spaces__create-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-spaces__create-button:hover{background:#222}.tk-meeting-spaces__create-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-meeting-spaces__toolbar{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0 1rem}.tk-meeting-spaces__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-meeting-spaces__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meeting-spaces__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-spaces__search-input::placeholder{color:#0006}.tk-meeting-spaces__filter-button{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-meeting-spaces__filter-button:hover{background:rgba(0,0,0,.03)}.tk-meeting-spaces__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-meeting-spaces__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-meeting-spaces__table{width:100%;border-collapse:collapse;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-meeting-spaces__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-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-meeting-spaces__table tbody tr:hover td{background:#ededed}.tk-meeting-spaces__name-cell{display:flex;align-items:center;gap:.5rem}.tk-meeting-spaces__name-link{color:#1170cf;font-weight:500;text-decoration:none}.tk-meeting-spaces__name-link:hover{text-decoration:underline}.tk-meeting-spaces__badge{padding:.125rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:500;color:#0009;white-space:nowrap}.tk-meeting-spaces__empty{padding:1.5rem;text-align:center;color:#0009}.tk-meeting-spaces__footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-meeting-spaces__pagination{display:flex;gap:1rem}.tk-meeting-spaces__pagination-button{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;color:#0009;cursor:pointer}.tk-meeting-spaces__pagination-button:disabled{color:#0000004d;cursor:default}.tk-meeting-spaces__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-meeting-spaces__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-meeting-spaces__filter-panel--open{transform:translate(0)}.tk-meeting-spaces__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-meeting-spaces__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-meeting-spaces__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-spaces__filter-panel-close:hover{color:#000000f2}.tk-meeting-spaces__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-meeting-spaces__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-meeting-spaces__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-spaces__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-spaces__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-select:focus{outline:none;border-color:#0006}.tk-meeting-spaces__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-meeting-spaces__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem}.tk-meeting-spaces__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-meeting-spaces__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-meeting-spaces__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-meeting-spaces__filter-done:hover{background-color:oklch(95.5% .005 260)}\n"] }]
387
+ args: [{ selector: 'tk-meeting-spaces', template: "<div class=\"tk-meeting-spaces__header\">\r\n <h2 class=\"tk-meeting-spaces__title\">Meeting Spaces</h2>\r\n <button type=\"button\" class=\"tk-meeting-spaces__create-button\" (click)=\"onCreateMeetingSpace()\">\r\n <mat-icon class=\"tk-meeting-spaces__create-icon\">add</mat-icon>\r\n Create meeting space\r\n </button>\r\n</div>\r\n\r\n<div class=\"tk-meeting-spaces__toolbar\">\r\n <div style=\"position: relative; width: fit-content; min-width: 200px\">\r\n <input\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchInputChange($event)\"\r\n type=\"text\"\r\n placeholder=\"Search by display name, email\"\r\n style=\"\r\n width: 100%;\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 12px 6px 44px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n color: #222;\r\n outline: none;\r\n box-sizing: border-box;\r\n min-width: 280px;\r\n \"\r\n />\r\n <span\r\n style=\"\r\n position: absolute;\r\n left: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #757575;\r\n font-size: 18px;\r\n font-weight: normal;\r\n pointer-events: none;\r\n \"\r\n >\r\n <i\r\n class=\"material-icons\"\r\n style=\"font-size: 18px; font-weight: normal\"\r\n >search</i\r\n >\r\n </span>\r\n </div>\r\n\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-button\" (click)=\"toggleFilterPanel()\">\r\n <img class=\"tk-meeting-spaces__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n Filter\r\n </button>\r\n\r\n <span class=\"tk-meeting-spaces__count\">{{ filteredMeetingSpaces.length }} spaces</span>\r\n</div>\r\n\r\n<table class=\"tk-meeting-spaces__table\">\r\n <thead>\r\n <tr>\r\n <th>Meeting Name</th>\r\n <th>URI</th>\r\n <th>Meeting ID</th>\r\n <th>Participants</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let space of filteredMeetingSpaces\">\r\n <td class=\"tk-meeting-spaces__name-cell\">\r\n <a href=\"javascript:void(0)\" class=\"tk-meeting-spaces__name-link\" (click)=\"onEditMeetingSpace(space)\">{{ space.name }}</a>\r\n <span *ngIf=\"space.managed\" class=\"tk-meeting-spaces__badge\">Managed</span>\r\n </td>\r\n <td>{{ space.uri }}</td>\r\n <td>{{ space.meetingId }}</td>\r\n <td>{{ space.participants }}</td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n <td colspan=\"4\" class=\"tk-meeting-spaces__empty\">No meeting spaces match your search.</td>\r\n </tr>\r\n </tbody>\r\n</table>\r\n\r\n<div class=\"tk-meeting-spaces__footer\">\r\n <span class=\"tk-meeting-spaces__footer-text\">\r\n Showing {{ filteredMeetingSpaces.length ? 1 : 0 }}-{{ filteredMeetingSpaces.length }} of {{ meetingSpaces.length }}\r\n </span>\r\n <div class=\"tk-meeting-spaces__pagination\">\r\n <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Previous</button>\r\n <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Next</button>\r\n </div>\r\n</div>\r\n\r\n<div\r\n class=\"tk-meeting-spaces__filter-backdrop\"\r\n *ngIf=\"isFilterPanelOpen\"\r\n (click)=\"closeFilterPanel()\">\r\n</div>\r\n\r\n<aside class=\"tk-meeting-spaces__filter-panel\" [class.tk-meeting-spaces__filter-panel--open]=\"isFilterPanelOpen\">\r\n <div class=\"tk-meeting-spaces__filter-panel-header\">\r\n <h3 class=\"tk-meeting-spaces__filter-panel-title\">Filter meeting spaces</h3>\r\n <button\r\n type=\"button\"\r\n class=\"tk-meeting-spaces__filter-panel-close\"\r\n aria-label=\"Close filter panel\"\r\n (click)=\"closeFilterPanel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-panel-body\">\r\n <div class=\"tk-meeting-spaces__filter-field\">\r\n <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-owner\">Owner</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-owner\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.owner\">\r\n <option value=\"\">All owners</option>\r\n <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n </select>\r\n <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-field\">\r\n <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-cluster\">Cluster</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-cluster\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n <option value=\"\">All clusters</option>\r\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n </select>\r\n <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-meeting-spaces__filter-panel-footer\">\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n <button type=\"button\" class=\"tk-meeting-spaces__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n </div>\r\n</aside>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-spaces__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-spaces__title{margin:0;font-size:1.125rem;font-weight:600}.tk-meeting-spaces__create-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-spaces__create-button:hover{background:#222}.tk-meeting-spaces__create-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-meeting-spaces__toolbar{display:flex;align-items:center;gap:.75rem;margin:.5rem 0 1rem}.tk-meeting-spaces__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-meeting-spaces__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meeting-spaces__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-spaces__search-input::placeholder{color:#0006}.tk-meeting-spaces__filter-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-button:hover{background:rgba(0,0,0,.03)}.tk-meeting-spaces__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-meeting-spaces__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-meeting-spaces__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-meeting-spaces__table th{height:29px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;cursor:pointer}.tk-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__table td{min-height:39px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px 0 0 var(--mch-OutlineSecondary-normal, rgba(0, 0, 0, .2));background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-meeting-spaces__table tbody tr:hover td{background:#ededed}.tk-meeting-spaces__table th:first-child,.tk-meeting-spaces__table td:first-child{width:14rem}.tk-meeting-spaces__table td:first-child{box-shadow:0 -.0625rem .25rem #0000001c;transition:background-color .2s,box-shadow .2s;border-block-end:.0625rem solid rgba(0,0,0,.2);clip-path:inset(0 -.25rem 0 -.25rem)}.tk-meeting-spaces__name-cell{display:flex;align-items:center;gap:.5rem;min-width:0}.tk-meeting-spaces__name-link{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#000000de;font-weight:500;text-decoration:none}.tk-meeting-spaces__badge{padding:.125rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:500;color:#0009;white-space:nowrap;flex-shrink:0}.tk-meeting-spaces__empty{padding:1.5rem;text-align:center;color:#0009}.tk-meeting-spaces__footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-meeting-spaces__pagination{display:flex;gap:1rem}.tk-meeting-spaces__pagination-button{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;color:#0009;cursor:pointer}.tk-meeting-spaces__pagination-button:disabled{color:#0000004d;cursor:default}.tk-meeting-spaces__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-meeting-spaces__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-meeting-spaces__filter-panel--open{transform:translate(0)}.tk-meeting-spaces__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-meeting-spaces__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-meeting-spaces__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-spaces__filter-panel-close:hover{color:#000000f2}.tk-meeting-spaces__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-meeting-spaces__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-meeting-spaces__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-spaces__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-spaces__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-select:focus{outline:none;border-color:#0006}.tk-meeting-spaces__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-meeting-spaces__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem}.tk-meeting-spaces__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-meeting-spaces__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-meeting-spaces__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-meeting-spaces__filter-done:hover{background-color:oklch(95.5% .005 260)}\n"] }]
385
388
  }], ctorParameters: function () { return [{ type: MeetingSpacesService }]; }, propDecorators: { createMeetingSpace: [{
386
389
  type: Output
387
390
  }], editMeetingSpace: [{
@@ -463,10 +466,10 @@ class MeetingSpaceComponent {
463
466
  }
464
467
  }
465
468
  MeetingSpaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpaceComponent, deps: [{ token: MeetingSpacesService }], target: i0.ɵɵFactoryTarget.Component });
466
- 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: "<form class=\"tk-meeting-space\" (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 <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">General information</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n </div>\n\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\" 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\" 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\" 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 <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 </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\" 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\" 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\" 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\" 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\" 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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.enabled\"\n (click)=\"details.enabled = !details.enabled\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.enabled ? 'Enabled' : 'Disabled' }}</span>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Join information</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n </div>\n\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\" [value]=\"details.meetingId\" disabled>\n </div>\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\" [value]=\"browserJoinLink\" disabled>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <div class=\"tk-meeting-space__section-header-text\">\n <h2 class=\"tk-meeting-space__section-title\">Access roles and security</h2>\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\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.accessRolesEnabled\"\n (click)=\"details.accessRolesEnabled = !details.accessRolesEnabled\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.accessRolesEnabled ? 'Enabled' : 'Disabled' }}</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"details.accessRolesEnabled\">\n <div class=\"tk-meeting-space__roles-toolbar\">\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\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n <div class=\"tk-meeting-space__role-header\">\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 <button\n type=\"button\"\n class=\"tk-meeting-space__role-remove\"\n *ngIf=\"!role.primary\"\n (click)=\"removeAccessRole(role)\"\n aria-label=\"Remove role\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Visibility</label>\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n <option value=\"members-only\">Members only</option>\n <option value=\"public\">Public</option>\n <option value=\"private\">Private</option>\n </select>\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\" [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 <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'activates-' + role.id\" [(ngModel)]=\"role.activatesMeetingOnJoin\">\n Activates the meeting on join\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n Participants wait in lobby\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n Allow unauthenticated join\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n Grant meeting host controls\n </label>\n </div>\n </div>\n </ng-container>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Meeting experience</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n </div>\n\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 {{ layout.label }}\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.participantLabels\"\n (click)=\"details.participantLabels = !details.participantLabels\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.participantLabels ? 'On' : 'Off' }}</span>\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\">\n <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowPresentation\"\n (click)=\"details.allowPresentation = !details.allowPresentation\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowPresentation ? 'On' : 'Off' }}</span>\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.disconnectOthersAllowed\"\n (click)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.disconnectOthersAllowed ? 'True' : 'False' }}</span>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video quality</label>\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 </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Presentation quality</label>\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 </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Recording and streaming</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n </div>\n\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowRecording\"\n (click)=\"details.allowRecording = !details.allowRecording\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowRecording ? 'True' : 'False' }}</span>\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowStreaming\"\n (click)=\"details.allowStreaming = !details.allowStreaming\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowStreaming ? 'True' : 'False' }}</span>\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\" 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\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\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;padding:1.5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.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:.9375rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:0;font-size:.8125rem;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,.tk-meeting-space__toggle-field{display:flex;flex-direction:column;gap:.375rem}.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 rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2}.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{appearance:none;cursor:pointer}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(0,0,0,.12)}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.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__roles-toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);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{padding:1.25rem;margin-bottom:1rem;background:rgba(0,0,0,.015);border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:999px;background:rgba(3,83,168,.1);color:#0353a8;font-size:.6875rem;font-weight:500}.tk-meeting-space__role-remove{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-space__role-remove:hover{color:#c73636}.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{padding:.625rem .5rem;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-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__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.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
469
+ 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: "<form class=\"tk-meeting-space\" (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 <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">General information</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n </div>\n\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\" 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\" 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\" 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 <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 </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\" 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\" 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\" 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\" 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\" 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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.enabled\"\n (click)=\"details.enabled = !details.enabled\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.enabled ? 'Enabled' : 'Disabled' }}</span>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Join information</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n </div>\n\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\" [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\" [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\" [value]=\"browserJoinLink\" disabled>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <div class=\"tk-meeting-space__section-header-text\">\n <h2 class=\"tk-meeting-space__section-title\">Access roles and security</h2>\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\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.accessRolesEnabled\"\n (click)=\"details.accessRolesEnabled = !details.accessRolesEnabled\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.accessRolesEnabled ? 'Enabled' : 'Disabled' }}</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"details.accessRolesEnabled\">\n <div class=\"tk-meeting-space__roles-toolbar\">\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\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n <div class=\"tk-meeting-space__role-header\">\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 <button\n type=\"button\"\n class=\"tk-meeting-space__role-remove\"\n *ngIf=\"!role.primary\"\n (click)=\"removeAccessRole(role)\"\n aria-label=\"Remove role\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Visibility</label>\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n <option value=\"members-only\">Members only</option>\n <option value=\"public\">Public</option>\n <option value=\"private\">Private</option>\n </select>\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\" [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 <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'activates-' + role.id\" [(ngModel)]=\"role.activatesMeetingOnJoin\">\n Activates the meeting on join\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n Participants wait in lobby\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n Allow unauthenticated join\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n Grant meeting host controls\n </label>\n </div>\n </div>\n </ng-container>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Meeting experience</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n </div>\n\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 {{ layout.label }}\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.participantLabels\"\n (click)=\"details.participantLabels = !details.participantLabels\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.participantLabels ? 'On' : 'Off' }}</span>\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\">\n <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowPresentation\"\n (click)=\"details.allowPresentation = !details.allowPresentation\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowPresentation ? 'On' : 'Off' }}</span>\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.disconnectOthersAllowed\"\n (click)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.disconnectOthersAllowed ? 'True' : 'False' }}</span>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video quality</label>\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 </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Presentation quality</label>\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 </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Recording and streaming</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n </div>\n\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowRecording\"\n (click)=\"details.allowRecording = !details.allowRecording\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowRecording ? 'True' : 'False' }}</span>\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowStreaming\"\n (click)=\"details.allowStreaming = !details.allowStreaming\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowStreaming ? 'True' : 'False' }}</span>\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\" 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\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\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;padding:1.5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.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:.9375rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:0;font-size:.8125rem;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,.tk-meeting-space__toggle-field{display:flex;flex-direction:column;gap:.375rem}.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 rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;box-sizing:border-box}.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{appearance:none;cursor:pointer}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(0,0,0,.12);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__roles-toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);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{padding:1.25rem;margin-bottom:1rem;background:rgba(0,0,0,.015);border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:999px;background:rgba(3,83,168,.1);color:#0353a8;font-size:.6875rem;font-weight:500}.tk-meeting-space__role-remove{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-space__role-remove:hover{color:#c73636}.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{padding:.625rem .5rem;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-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__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.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
467
470
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpaceComponent, decorators: [{
468
471
  type: Component,
469
- args: [{ selector: 'tk-meeting-space', template: "<form class=\"tk-meeting-space\" (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 <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">General information</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n </div>\n\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\" 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\" 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\" 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 <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 </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\" 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\" 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\" 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\" 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\" 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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.enabled\"\n (click)=\"details.enabled = !details.enabled\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.enabled ? 'Enabled' : 'Disabled' }}</span>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Join information</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n </div>\n\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\" [value]=\"details.meetingId\" disabled>\n </div>\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\" [value]=\"browserJoinLink\" disabled>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <div class=\"tk-meeting-space__section-header-text\">\n <h2 class=\"tk-meeting-space__section-title\">Access roles and security</h2>\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\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.accessRolesEnabled\"\n (click)=\"details.accessRolesEnabled = !details.accessRolesEnabled\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.accessRolesEnabled ? 'Enabled' : 'Disabled' }}</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"details.accessRolesEnabled\">\n <div class=\"tk-meeting-space__roles-toolbar\">\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\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n <div class=\"tk-meeting-space__role-header\">\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 <button\n type=\"button\"\n class=\"tk-meeting-space__role-remove\"\n *ngIf=\"!role.primary\"\n (click)=\"removeAccessRole(role)\"\n aria-label=\"Remove role\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Visibility</label>\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n <option value=\"members-only\">Members only</option>\n <option value=\"public\">Public</option>\n <option value=\"private\">Private</option>\n </select>\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\" [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 <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'activates-' + role.id\" [(ngModel)]=\"role.activatesMeetingOnJoin\">\n Activates the meeting on join\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n Participants wait in lobby\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n Allow unauthenticated join\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n Grant meeting host controls\n </label>\n </div>\n </div>\n </ng-container>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Meeting experience</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n </div>\n\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 {{ layout.label }}\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.participantLabels\"\n (click)=\"details.participantLabels = !details.participantLabels\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.participantLabels ? 'On' : 'Off' }}</span>\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\">\n <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowPresentation\"\n (click)=\"details.allowPresentation = !details.allowPresentation\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowPresentation ? 'On' : 'Off' }}</span>\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.disconnectOthersAllowed\"\n (click)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.disconnectOthersAllowed ? 'True' : 'False' }}</span>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video quality</label>\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 </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Presentation quality</label>\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 </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Recording and streaming</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n </div>\n\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowRecording\"\n (click)=\"details.allowRecording = !details.allowRecording\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowRecording ? 'True' : 'False' }}</span>\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowStreaming\"\n (click)=\"details.allowStreaming = !details.allowStreaming\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowStreaming ? 'True' : 'False' }}</span>\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\" 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\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\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;padding:1.5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.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:.9375rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:0;font-size:.8125rem;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,.tk-meeting-space__toggle-field{display:flex;flex-direction:column;gap:.375rem}.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 rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2}.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{appearance:none;cursor:pointer}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(0,0,0,.12)}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.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__roles-toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);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{padding:1.25rem;margin-bottom:1rem;background:rgba(0,0,0,.015);border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:999px;background:rgba(3,83,168,.1);color:#0353a8;font-size:.6875rem;font-weight:500}.tk-meeting-space__role-remove{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-space__role-remove:hover{color:#c73636}.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{padding:.625rem .5rem;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-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__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"] }]
472
+ args: [{ selector: 'tk-meeting-space', template: "<form class=\"tk-meeting-space\" (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 <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">General information</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n </div>\n\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\" 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\" 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\" 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 <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 </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\" 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\" 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\" 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\" 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\" 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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.enabled\"\n (click)=\"details.enabled = !details.enabled\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.enabled ? 'Enabled' : 'Disabled' }}</span>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Join information</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n </div>\n\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\" [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\" [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\" [value]=\"browserJoinLink\" disabled>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <div class=\"tk-meeting-space__section-header-text\">\n <h2 class=\"tk-meeting-space__section-title\">Access roles and security</h2>\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\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.accessRolesEnabled\"\n (click)=\"details.accessRolesEnabled = !details.accessRolesEnabled\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.accessRolesEnabled ? 'Enabled' : 'Disabled' }}</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"details.accessRolesEnabled\">\n <div class=\"tk-meeting-space__roles-toolbar\">\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\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n <div class=\"tk-meeting-space__role-header\">\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 <button\n type=\"button\"\n class=\"tk-meeting-space__role-remove\"\n *ngIf=\"!role.primary\"\n (click)=\"removeAccessRole(role)\"\n aria-label=\"Remove role\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Visibility</label>\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n <option value=\"members-only\">Members only</option>\n <option value=\"public\">Public</option>\n <option value=\"private\">Private</option>\n </select>\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\" [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 <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'activates-' + role.id\" [(ngModel)]=\"role.activatesMeetingOnJoin\">\n Activates the meeting on join\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n Participants wait in lobby\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n Allow unauthenticated join\n </label>\n <label class=\"tk-meeting-space__checkbox\">\n <input type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n Grant meeting host controls\n </label>\n </div>\n </div>\n </ng-container>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Meeting experience</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n </div>\n\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 {{ layout.label }}\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.participantLabels\"\n (click)=\"details.participantLabels = !details.participantLabels\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.participantLabels ? 'On' : 'Off' }}</span>\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\">\n <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowPresentation\"\n (click)=\"details.allowPresentation = !details.allowPresentation\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowPresentation ? 'On' : 'Off' }}</span>\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.disconnectOthersAllowed\"\n (click)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.disconnectOthersAllowed ? 'True' : 'False' }}</span>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video quality</label>\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 </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Presentation quality</label>\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 </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <div class=\"tk-meeting-space__section-header\">\n <h2 class=\"tk-meeting-space__section-title\">Recording and streaming</h2>\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n </div>\n\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowRecording\"\n (click)=\"details.allowRecording = !details.allowRecording\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowRecording ? 'True' : 'False' }}</span>\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 <button\n type=\"button\"\n class=\"tk-meeting-space__toggle\"\n [class.tk-meeting-space__toggle--on]=\"details.allowStreaming\"\n (click)=\"details.allowStreaming = !details.allowStreaming\">\n <span class=\"tk-meeting-space__toggle-thumb\"></span>\n </button>\n <span class=\"tk-meeting-space__toggle-label\">{{ details.allowStreaming ? 'True' : 'False' }}</span>\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\" 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\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\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;padding:1.5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.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:.9375rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:0;font-size:.8125rem;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,.tk-meeting-space__toggle-field{display:flex;flex-direction:column;gap:.375rem}.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 rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;box-sizing:border-box}.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{appearance:none;cursor:pointer}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(0,0,0,.12);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__roles-toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);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{padding:1.25rem;margin-bottom:1rem;background:rgba(0,0,0,.015);border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:999px;background:rgba(3,83,168,.1);color:#0353a8;font-size:.6875rem;font-weight:500}.tk-meeting-space__role-remove{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-space__role-remove:hover{color:#c73636}.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{padding:.625rem .5rem;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-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__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"] }]
470
473
  }], ctorParameters: function () { return [{ type: MeetingSpacesService }]; }, propDecorators: { mode: [{
471
474
  type: Input
472
475
  }], meetingSpaceId: [{
@@ -707,6 +710,9 @@ class LiveMeetingsComponent {
707
710
  get clusters() {
708
711
  return Array.from(new Set(this.meetings.map(meeting => meeting.cluster))).sort();
709
712
  }
713
+ onSearchInputChange(event) {
714
+ this.searchTerm = event.target.value;
715
+ }
710
716
  toggleFilterPanel() {
711
717
  this.isFilterPanelOpen = !this.isFilterPanelOpen;
712
718
  }
@@ -734,10 +740,10 @@ class LiveMeetingsComponent {
734
740
  }
735
741
  }
736
742
  LiveMeetingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LiveMeetingsComponent, deps: [{ token: LiveMeetingsService }], target: i0.ɵɵFactoryTarget.Component });
737
- LiveMeetingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LiveMeetingsComponent, selector: "tk-live-meetings", outputs: { openLiveMeeting: "openLiveMeeting" }, ngImport: i0, template: "<div class=\"tk-live-meetings\">\r\n <div class=\"tk-live-meetings__stats\">\r\n <div class=\"tk-live-meetings__stat-card\" *ngFor=\"let stat of statCards\">\r\n <span class=\"tk-live-meetings__stat-label\">\r\n <img *ngIf=\"stat.icon\" class=\"tk-live-meetings__stat-icon\" [src]=\"'assets/icons/' + stat.icon + '.svg'\" alt=\"\">\r\n {{ stat.label }}\r\n </span>\r\n <span class=\"tk-live-meetings__stat-value\">{{ stat.value }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__toolbar\">\r\n <div class=\"tk-live-meetings__search\">\r\n <mat-icon class=\"tk-live-meetings__search-icon\">search</mat-icon>\r\n <input\r\n type=\"text\"\r\n class=\"tk-live-meetings__search-input\"\r\n placeholder=\"Search by Name, URI or Meeting ID\"\r\n [(ngModel)]=\"searchTerm\">\r\n </div>\r\n\r\n <button type=\"button\" class=\"tk-live-meetings__filter-button\" (click)=\"toggleFilterPanel()\">\r\n <img class=\"tk-live-meetings__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n Filter\r\n </button>\r\n\r\n <span class=\"tk-live-meetings__count\">{{ filteredMeetings.length }} meetings</span>\r\n </div>\r\n\r\n <table class=\"tk-live-meetings__table\">\r\n <thead>\r\n <tr>\r\n <th>Meeting Title</th>\r\n <th>Owner</th>\r\n <th>Participants</th>\r\n <th>Lobby</th>\r\n <th>Lock</th>\r\n <th>Activity</th>\r\n <th>Start</th>\r\n <th>Duration</th>\r\n <th>Cluster</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let meeting of filteredMeetings\">\r\n <td class=\"tk-live-meetings__title-cell\">\r\n <a href=\"javascript:void(0)\" class=\"tk-live-meetings__title-link\" (click)=\"onOpenLiveMeeting(meeting)\">{{ meeting.title }}</a>\r\n <span class=\"tk-live-meetings__title-subtext\">{{ meeting.ownerEmail }}</span>\r\n </td>\r\n <td>{{ meeting.ownerName }}</td>\r\n <td>{{ meeting.participants }}</td>\r\n <td>{{ meeting.lobbyCount }}</td>\r\n <td>\r\n <span\r\n class=\"tk-live-meetings__lock-badge\"\r\n [class.tk-live-meetings__lock-badge--locked]=\"meeting.lockState === 'locked'\">\r\n <ng-container *ngIf=\"meeting.lockState === 'locked'; else unlockedLabel\">\r\n <span class=\"tk-live-meetings__lock-dot\"></span>\r\n <img class=\"tk-live-meetings__lock-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\r\n Locked\r\n </ng-container>\r\n <ng-template #unlockedLabel>Unlocked</ng-template>\r\n </span>\r\n </td>\r\n <td>\r\n <span class=\"tk-live-meetings__activity\">\r\n <ng-container *ngIf=\"meeting.activity.recording || meeting.activity.streaming || meeting.activity.presenting; else noActivity\">\r\n <img *ngIf=\"meeting.activity.recording\" class=\"tk-live-meetings__activity-icon tk-live-meetings__activity-icon--recording\" src=\"assets/icons/record-active-regular.svg\" alt=\"Recording\" title=\"Recording\">\r\n <img *ngIf=\"meeting.activity.streaming\" class=\"tk-live-meetings__activity-icon\" src=\"assets/icons/wifi-signal-good-regular.svg\" alt=\"Streaming\" title=\"Streaming\">\r\n <img *ngIf=\"meeting.activity.presenting\" class=\"tk-live-meetings__activity-icon\" src=\"assets/icons/display-regular.svg\" alt=\"Presenting\" title=\"Presenting\">\r\n </ng-container>\r\n <ng-template #noActivity>&mdash;</ng-template>\r\n </span>\r\n </td>\r\n <td>{{ meeting.startTime }}</td>\r\n <td>{{ meeting.duration }}</td>\r\n <td>{{ meeting.cluster }}</td>\r\n <td>\r\n <span class=\"tk-live-meetings__action-link\" (click)=\"onOpenLiveMeeting(meeting)\">Open controls</span>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetings.length\">\r\n <td colspan=\"11\" class=\"tk-live-meetings__empty\">No live meetings match your search.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div\r\n class=\"tk-live-meetings__filter-backdrop\"\r\n *ngIf=\"isFilterPanelOpen\"\r\n (click)=\"closeFilterPanel()\">\r\n </div>\r\n\r\n <aside class=\"tk-live-meetings__filter-panel\" [class.tk-live-meetings__filter-panel--open]=\"isFilterPanelOpen\">\r\n <div class=\"tk-live-meetings__filter-panel-header\">\r\n <h3 class=\"tk-live-meetings__filter-panel-title\">Filter live meetings</h3>\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meetings__filter-panel-close\"\r\n aria-label=\"Close filter panel\"\r\n (click)=\"closeFilterPanel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-panel-body\">\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-lock-state\">Lock state</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-lock-state\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.lockState\">\r\n <option value=\"\">All</option>\r\n <option value=\"locked\">Locked</option>\r\n <option value=\"unlocked\">Unlocked</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-cluster\">Cluster</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-cluster\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n <option value=\"\">All clusters</option>\r\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-start-time\">Start time (after)</label>\r\n <div class=\"tk-live-meetings__filter-input-wrap\">\r\n <input\r\n #startTimeInput\r\n id=\"tk-live-meetings-filter-start-time\"\r\n type=\"time\"\r\n class=\"tk-live-meetings__filter-input tk-live-meetings__filter-input--time\"\r\n [class.tk-live-meetings__filter-input--has-value]=\"filters.startTimeAfter\"\r\n [(ngModel)]=\"filters.startTimeAfter\">\r\n <mat-icon\r\n class=\"tk-live-meetings__filter-input-icon tk-live-meetings__filter-input-icon--clickable\"\r\n (click)=\"startTimeInput.showPicker()\">\r\n schedule\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-min-participants\">Minimum participants</label>\r\n <input\r\n id=\"tk-live-meetings-filter-min-participants\"\r\n type=\"number\"\r\n min=\"0\"\r\n class=\"tk-live-meetings__filter-input\"\r\n placeholder=\"0\"\r\n [(ngModel)]=\"filters.minParticipants\">\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-owner\">Owner</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-owner\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.owner\">\r\n <option value=\"\">All owners</option>\r\n <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-panel-footer\">\r\n <button type=\"button\" class=\"tk-live-meetings__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n <button type=\"button\" class=\"tk-live-meetings__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n </div>\r\n </aside>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-live-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-live-meetings__stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}.tk-live-meetings__stat-card{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-live-meetings__stat-label{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;color:#0009}.tk-live-meetings__stat-icon{width:.875rem;height:.875rem}.tk-live-meetings__stat-value{font-size:1.5rem;font-weight:600;color:#000000f2}.tk-live-meetings__toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.tk-live-meetings__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-live-meetings__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-live-meetings__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meetings__search-input::placeholder{color:#0006}.tk-live-meetings__filter-button{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-meetings__filter-button:hover{background:rgba(0,0,0,.03)}.tk-live-meetings__filter-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meetings__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-live-meetings__refresh{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-live-meetings__refresh-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-live-meetings__refresh-dot--off{background:rgba(0,0,0,.3)}.tk-live-meetings__refresh-toggle{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#1170cf;cursor:pointer}.tk-live-meetings__refresh-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#0009}.tk-live-meetings__refresh-button:hover{color:#000000f2}.tk-live-meetings__refresh-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meetings__table{width:100%;border-collapse:collapse;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-live-meetings__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-meetings__table th:hover{background-color:#dedede}.tk-live-meetings__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-meetings__table tbody tr:hover td{background:#ededed}.tk-live-meetings__title-cell{display:flex;flex-direction:column;justify-content:center;gap:.125rem}.tk-live-meetings__title-link{color:#1170cf;font-weight:500;text-decoration:none}.tk-live-meetings__title-link:hover{text-decoration:underline}.tk-live-meetings__title-subtext{font-size:.75rem;color:#0009}.tk-live-meetings__lock-badge{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:500;color:#0009}.tk-live-meetings__lock-badge--locked{padding:.125rem .625rem;border-radius:999px;background:#e8e8ea;color:#47484c}.tk-live-meetings__lock-dot{width:.375rem;height:.375rem;border-radius:50%;background:currentColor}.tk-live-meetings__lock-icon{height:.75rem;width:.75rem;opacity:.75}.tk-live-meetings__activity{display:inline-flex;align-items:center;gap:.5rem;color:#0009}.tk-live-meetings__activity-icon{width:1rem;height:1rem;opacity:.7}.tk-live-meetings__activity-icon--recording{opacity:1;filter:invert(24%) sepia(89%) saturate(3000%) hue-rotate(340deg) brightness(90%) contrast(90%)}.tk-live-meetings__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-meetings__quality-dot{width:.5rem;height:.5rem;border-radius:50%}.tk-live-meetings__quality-badge--good .tk-live-meetings__quality-dot{background:#1d805f}.tk-live-meetings__quality-badge--fair .tk-live-meetings__quality-dot{background:#b5860b}.tk-live-meetings__quality-badge--poor .tk-live-meetings__quality-dot{background:#c73636}.tk-live-meetings__action-link{font-weight:500;text-decoration:none}.tk-live-meetings__action-link:hover{cursor:pointer}.tk-live-meetings__empty{padding:1.5rem;text-align:center;color:#0009}.tk-live-meetings__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-live-meetings__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-live-meetings__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-live-meetings__filter-panel--open{transform:translate(0)}.tk-live-meetings__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-live-meetings__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-live-meetings__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-live-meetings__filter-panel-close:hover{color:#000000f2}.tk-live-meetings__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-live-meetings__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-live-meetings__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-live-meetings__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-live-meetings__filter-select,.tk-live-meetings__filter-input{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meetings__filter-select:focus,.tk-live-meetings__filter-input:focus{outline:none;border-color:#0006}.tk-live-meetings__filter-select::placeholder,.tk-live-meetings__filter-input::placeholder{color:#0006}.tk-live-meetings__filter-select{appearance:none;padding-right:2rem;cursor:pointer}.tk-live-meetings__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-live-meetings__filter-input-wrap{position:relative;display:flex;align-items:center}.tk-live-meetings__filter-input-wrap .tk-live-meetings__filter-input{padding-right:2rem}.tk-live-meetings__filter-input-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-live-meetings__filter-input-icon--clickable{pointer-events:auto;cursor:pointer}.tk-live-meetings__filter-input-icon--clickable:hover{color:#000000f2}.tk-live-meetings__filter-input--time::-webkit-calendar-picker-indicator{opacity:0}.tk-live-meetings__filter-input--time::-webkit-datetime-edit{color:#0006}.tk-live-meetings__filter-input--time.tk-live-meetings__filter-input--has-value::-webkit-datetime-edit{color:#000000f2}.tk-live-meetings__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem 1.5rem}.tk-live-meetings__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-live-meetings__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-live-meetings__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-live-meetings__filter-done:hover{background-color:oklch(95.5% .005 260)}\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.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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"] }] });
743
+ LiveMeetingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LiveMeetingsComponent, selector: "tk-live-meetings", outputs: { openLiveMeeting: "openLiveMeeting" }, ngImport: i0, template: "<div class=\"tk-live-meetings\">\r\n <div class=\"tk-live-meetings__stats\">\r\n <div class=\"tk-live-meetings__stat-card\" *ngFor=\"let stat of statCards\">\r\n <span class=\"tk-live-meetings__stat-label\">\r\n <img *ngIf=\"stat.icon\" class=\"tk-live-meetings__stat-icon\" [src]=\"'assets/icons/' + stat.icon + '.svg'\" alt=\"\">\r\n {{ stat.label }}\r\n </span>\r\n <span class=\"tk-live-meetings__stat-value\">{{ stat.value }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__toolbar\">\r\n <div style=\"position: relative; width: fit-content; min-width: 200px\">\r\n <input\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchInputChange($event)\"\r\n type=\"text\"\r\n placeholder=\"Search by display name, email\"\r\n style=\"\r\n width: 100%;\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 12px 6px 44px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n color: #222;\r\n outline: none;\r\n box-sizing: border-box;\r\n min-width: 280px;\r\n \"\r\n />\r\n <span\r\n style=\"\r\n position: absolute;\r\n left: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #757575;\r\n font-size: 18px;\r\n font-weight: normal;\r\n pointer-events: none;\r\n \"\r\n >\r\n <i\r\n class=\"material-icons\"\r\n style=\"font-size: 18px; font-weight: normal\"\r\n >search</i\r\n >\r\n </span>\r\n </div>\r\n\r\n <button type=\"button\" class=\"tk-live-meetings__filter-button\" (click)=\"toggleFilterPanel()\">\r\n <img class=\"tk-live-meetings__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n Filter\r\n </button>\r\n\r\n <span class=\"tk-live-meetings__count\">{{ filteredMeetings.length }} meetings</span>\r\n </div>\r\n\r\n <table class=\"tk-live-meetings__table\">\r\n <thead>\r\n <tr>\r\n <th>Meeting Title</th>\r\n <th>Owner</th>\r\n <th>Participants</th>\r\n <th>Lobby</th>\r\n <th>Lock</th>\r\n <th>Activity</th>\r\n <th>Start</th>\r\n <th>Duration</th>\r\n <th>Cluster</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let meeting of filteredMeetings\">\r\n <td class=\"tk-live-meetings__title-cell\">\r\n <a href=\"javascript:void(0)\" class=\"tk-live-meetings__title-link\" (click)=\"onOpenLiveMeeting(meeting)\">{{ meeting.title }}</a>\r\n <span class=\"tk-live-meetings__title-subtext\">{{ meeting.ownerEmail }}</span>\r\n </td>\r\n <td>{{ meeting.ownerName }}</td>\r\n <td>{{ meeting.participants }}</td>\r\n <td>{{ meeting.lobbyCount }}</td>\r\n <td>\r\n <span\r\n class=\"tk-live-meetings__lock-badge\"\r\n [class.tk-live-meetings__lock-badge--locked]=\"meeting.lockState === 'locked'\">\r\n <ng-container *ngIf=\"meeting.lockState === 'locked'; else unlockedLabel\">\r\n <span class=\"tk-live-meetings__lock-dot\"></span>\r\n <img class=\"tk-live-meetings__lock-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\r\n Locked\r\n </ng-container>\r\n <ng-template #unlockedLabel>Unlocked</ng-template>\r\n </span>\r\n </td>\r\n <td>\r\n <span class=\"tk-live-meetings__activity\">\r\n <ng-container *ngIf=\"meeting.activity.recording || meeting.activity.streaming || meeting.activity.presenting; else noActivity\">\r\n <img *ngIf=\"meeting.activity.recording\" class=\"tk-live-meetings__activity-icon tk-live-meetings__activity-icon--recording\" src=\"assets/icons/record-active-regular.svg\" alt=\"Recording\" title=\"Recording\">\r\n <img *ngIf=\"meeting.activity.streaming\" class=\"tk-live-meetings__activity-icon\" src=\"assets/icons/wifi-signal-good-regular.svg\" alt=\"Streaming\" title=\"Streaming\">\r\n <img *ngIf=\"meeting.activity.presenting\" class=\"tk-live-meetings__activity-icon\" src=\"assets/icons/display-regular.svg\" alt=\"Presenting\" title=\"Presenting\">\r\n </ng-container>\r\n <ng-template #noActivity>&mdash;</ng-template>\r\n </span>\r\n </td>\r\n <td>{{ meeting.startTime }}</td>\r\n <td>{{ meeting.duration }}</td>\r\n <td>{{ meeting.cluster }}</td>\r\n <td>\r\n <span class=\"tk-live-meetings__action-link\" (click)=\"onOpenLiveMeeting(meeting)\">Open controls</span>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetings.length\">\r\n <td colspan=\"11\" class=\"tk-live-meetings__empty\">No live meetings match your search.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div\r\n class=\"tk-live-meetings__filter-backdrop\"\r\n *ngIf=\"isFilterPanelOpen\"\r\n (click)=\"closeFilterPanel()\">\r\n </div>\r\n\r\n <aside class=\"tk-live-meetings__filter-panel\" [class.tk-live-meetings__filter-panel--open]=\"isFilterPanelOpen\">\r\n <div class=\"tk-live-meetings__filter-panel-header\">\r\n <h3 class=\"tk-live-meetings__filter-panel-title\">Filter live meetings</h3>\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meetings__filter-panel-close\"\r\n aria-label=\"Close filter panel\"\r\n (click)=\"closeFilterPanel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-panel-body\">\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-lock-state\">Lock state</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-lock-state\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.lockState\">\r\n <option value=\"\">All</option>\r\n <option value=\"locked\">Locked</option>\r\n <option value=\"unlocked\">Unlocked</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-cluster\">Cluster</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-cluster\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n <option value=\"\">All clusters</option>\r\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-start-time\">Start time (after)</label>\r\n <div class=\"tk-live-meetings__filter-input-wrap\">\r\n <input\r\n #startTimeInput\r\n id=\"tk-live-meetings-filter-start-time\"\r\n type=\"time\"\r\n class=\"tk-live-meetings__filter-input tk-live-meetings__filter-input--time\"\r\n [class.tk-live-meetings__filter-input--has-value]=\"filters.startTimeAfter\"\r\n [(ngModel)]=\"filters.startTimeAfter\">\r\n <mat-icon\r\n class=\"tk-live-meetings__filter-input-icon tk-live-meetings__filter-input-icon--clickable\"\r\n (click)=\"startTimeInput.showPicker()\">\r\n schedule\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-min-participants\">Minimum participants</label>\r\n <input\r\n id=\"tk-live-meetings-filter-min-participants\"\r\n type=\"number\"\r\n min=\"0\"\r\n class=\"tk-live-meetings__filter-input\"\r\n placeholder=\"0\"\r\n [(ngModel)]=\"filters.minParticipants\">\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-owner\">Owner</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-owner\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.owner\">\r\n <option value=\"\">All owners</option>\r\n <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-panel-footer\">\r\n <button type=\"button\" class=\"tk-live-meetings__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n <button type=\"button\" class=\"tk-live-meetings__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n </div>\r\n </aside>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-live-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-live-meetings__stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}.tk-live-meetings__stat-card{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-live-meetings__stat-label{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;color:#0009}.tk-live-meetings__stat-icon{width:.875rem;height:.875rem}.tk-live-meetings__stat-value{font-size:1.5rem;font-weight:600;color:#000000f2}.tk-live-meetings__toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.tk-live-meetings__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-live-meetings__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-live-meetings__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meetings__search-input::placeholder{color:#0006}.tk-live-meetings__filter-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-live-meetings__filter-button:hover{background:rgba(0,0,0,.03)}.tk-live-meetings__filter-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meetings__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-live-meetings__refresh{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-live-meetings__refresh-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-live-meetings__refresh-dot--off{background:rgba(0,0,0,.3)}.tk-live-meetings__refresh-toggle{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000de;cursor:pointer}.tk-live-meetings__refresh-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#0009}.tk-live-meetings__refresh-button:hover{color:#000000f2}.tk-live-meetings__refresh-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meetings__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-live-meetings__table th{height:29px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;cursor:pointer}.tk-live-meetings__table th:hover{background-color:#dedede}.tk-live-meetings__table td{min-height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px 0 0 var(--mch-OutlineSecondary-normal, rgba(0, 0, 0, .2));background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-live-meetings__table tbody tr:hover td{background:#ededed}.tk-live-meetings__table th:first-child,.tk-live-meetings__table td:first-child{width:14rem}.tk-live-meetings__table td:first-child{box-shadow:0 -.0625rem .25rem #0000001c;transition:background-color .2s,box-shadow .2s;border-block-end:.0625rem solid rgba(0,0,0,.2);clip-path:inset(0 -.25rem 0 -.25rem)}.tk-live-meetings__title-cell{display:flex;flex-direction:column;justify-content:center;gap:.125rem;min-width:0}.tk-live-meetings__title-link{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#000000de;font-weight:500;text-decoration:none}.tk-live-meetings__title-subtext{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;color:#0009}.tk-live-meetings__lock-badge{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:500;color:#0009}.tk-live-meetings__lock-badge--locked{padding:.125rem .625rem;border-radius:999px;background:#e8e8ea;color:#47484c}.tk-live-meetings__lock-dot{width:.375rem;height:.375rem;border-radius:50%;background:currentColor}.tk-live-meetings__lock-icon{height:.75rem;width:.75rem;opacity:.75}.tk-live-meetings__activity{display:inline-flex;align-items:center;gap:.5rem;color:#0009}.tk-live-meetings__activity-icon{width:1rem;height:1rem;opacity:.7}.tk-live-meetings__activity-icon--recording{opacity:1;filter:invert(24%) sepia(89%) saturate(3000%) hue-rotate(340deg) brightness(90%) contrast(90%)}.tk-live-meetings__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-meetings__quality-dot{width:.5rem;height:.5rem;border-radius:50%}.tk-live-meetings__quality-badge--good .tk-live-meetings__quality-dot{background:#1d805f}.tk-live-meetings__quality-badge--fair .tk-live-meetings__quality-dot{background:#b5860b}.tk-live-meetings__quality-badge--poor .tk-live-meetings__quality-dot{background:#c73636}.tk-live-meetings__action-link{font-weight:500;text-decoration:none}.tk-live-meetings__action-link:hover{cursor:pointer}.tk-live-meetings__empty{padding:1.5rem;text-align:center;color:#0009}.tk-live-meetings__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-live-meetings__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-live-meetings__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-live-meetings__filter-panel--open{transform:translate(0)}.tk-live-meetings__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-live-meetings__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-live-meetings__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-live-meetings__filter-panel-close:hover{color:#000000f2}.tk-live-meetings__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-live-meetings__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-live-meetings__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-live-meetings__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-live-meetings__filter-select,.tk-live-meetings__filter-input{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meetings__filter-select:focus,.tk-live-meetings__filter-input:focus{outline:none;border-color:#0006}.tk-live-meetings__filter-select::placeholder,.tk-live-meetings__filter-input::placeholder{color:#0006}.tk-live-meetings__filter-select{appearance:none;padding-right:2rem;cursor:pointer}.tk-live-meetings__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-live-meetings__filter-input-wrap{position:relative;display:flex;align-items:center}.tk-live-meetings__filter-input-wrap .tk-live-meetings__filter-input{padding-right:2rem}.tk-live-meetings__filter-input-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-live-meetings__filter-input-icon--clickable{pointer-events:auto;cursor:pointer}.tk-live-meetings__filter-input-icon--clickable:hover{color:#000000f2}.tk-live-meetings__filter-input--time::-webkit-calendar-picker-indicator{opacity:0}.tk-live-meetings__filter-input--time::-webkit-datetime-edit{color:#0006}.tk-live-meetings__filter-input--time.tk-live-meetings__filter-input--has-value::-webkit-datetime-edit{color:#000000f2}.tk-live-meetings__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem 1.5rem}.tk-live-meetings__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-live-meetings__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-live-meetings__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-live-meetings__filter-done:hover{background-color:oklch(95.5% .005 260)}\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.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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"] }] });
738
744
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LiveMeetingsComponent, decorators: [{
739
745
  type: Component,
740
- args: [{ selector: 'tk-live-meetings', template: "<div class=\"tk-live-meetings\">\r\n <div class=\"tk-live-meetings__stats\">\r\n <div class=\"tk-live-meetings__stat-card\" *ngFor=\"let stat of statCards\">\r\n <span class=\"tk-live-meetings__stat-label\">\r\n <img *ngIf=\"stat.icon\" class=\"tk-live-meetings__stat-icon\" [src]=\"'assets/icons/' + stat.icon + '.svg'\" alt=\"\">\r\n {{ stat.label }}\r\n </span>\r\n <span class=\"tk-live-meetings__stat-value\">{{ stat.value }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__toolbar\">\r\n <div class=\"tk-live-meetings__search\">\r\n <mat-icon class=\"tk-live-meetings__search-icon\">search</mat-icon>\r\n <input\r\n type=\"text\"\r\n class=\"tk-live-meetings__search-input\"\r\n placeholder=\"Search by Name, URI or Meeting ID\"\r\n [(ngModel)]=\"searchTerm\">\r\n </div>\r\n\r\n <button type=\"button\" class=\"tk-live-meetings__filter-button\" (click)=\"toggleFilterPanel()\">\r\n <img class=\"tk-live-meetings__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n Filter\r\n </button>\r\n\r\n <span class=\"tk-live-meetings__count\">{{ filteredMeetings.length }} meetings</span>\r\n </div>\r\n\r\n <table class=\"tk-live-meetings__table\">\r\n <thead>\r\n <tr>\r\n <th>Meeting Title</th>\r\n <th>Owner</th>\r\n <th>Participants</th>\r\n <th>Lobby</th>\r\n <th>Lock</th>\r\n <th>Activity</th>\r\n <th>Start</th>\r\n <th>Duration</th>\r\n <th>Cluster</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let meeting of filteredMeetings\">\r\n <td class=\"tk-live-meetings__title-cell\">\r\n <a href=\"javascript:void(0)\" class=\"tk-live-meetings__title-link\" (click)=\"onOpenLiveMeeting(meeting)\">{{ meeting.title }}</a>\r\n <span class=\"tk-live-meetings__title-subtext\">{{ meeting.ownerEmail }}</span>\r\n </td>\r\n <td>{{ meeting.ownerName }}</td>\r\n <td>{{ meeting.participants }}</td>\r\n <td>{{ meeting.lobbyCount }}</td>\r\n <td>\r\n <span\r\n class=\"tk-live-meetings__lock-badge\"\r\n [class.tk-live-meetings__lock-badge--locked]=\"meeting.lockState === 'locked'\">\r\n <ng-container *ngIf=\"meeting.lockState === 'locked'; else unlockedLabel\">\r\n <span class=\"tk-live-meetings__lock-dot\"></span>\r\n <img class=\"tk-live-meetings__lock-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\r\n Locked\r\n </ng-container>\r\n <ng-template #unlockedLabel>Unlocked</ng-template>\r\n </span>\r\n </td>\r\n <td>\r\n <span class=\"tk-live-meetings__activity\">\r\n <ng-container *ngIf=\"meeting.activity.recording || meeting.activity.streaming || meeting.activity.presenting; else noActivity\">\r\n <img *ngIf=\"meeting.activity.recording\" class=\"tk-live-meetings__activity-icon tk-live-meetings__activity-icon--recording\" src=\"assets/icons/record-active-regular.svg\" alt=\"Recording\" title=\"Recording\">\r\n <img *ngIf=\"meeting.activity.streaming\" class=\"tk-live-meetings__activity-icon\" src=\"assets/icons/wifi-signal-good-regular.svg\" alt=\"Streaming\" title=\"Streaming\">\r\n <img *ngIf=\"meeting.activity.presenting\" class=\"tk-live-meetings__activity-icon\" src=\"assets/icons/display-regular.svg\" alt=\"Presenting\" title=\"Presenting\">\r\n </ng-container>\r\n <ng-template #noActivity>&mdash;</ng-template>\r\n </span>\r\n </td>\r\n <td>{{ meeting.startTime }}</td>\r\n <td>{{ meeting.duration }}</td>\r\n <td>{{ meeting.cluster }}</td>\r\n <td>\r\n <span class=\"tk-live-meetings__action-link\" (click)=\"onOpenLiveMeeting(meeting)\">Open controls</span>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetings.length\">\r\n <td colspan=\"11\" class=\"tk-live-meetings__empty\">No live meetings match your search.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div\r\n class=\"tk-live-meetings__filter-backdrop\"\r\n *ngIf=\"isFilterPanelOpen\"\r\n (click)=\"closeFilterPanel()\">\r\n </div>\r\n\r\n <aside class=\"tk-live-meetings__filter-panel\" [class.tk-live-meetings__filter-panel--open]=\"isFilterPanelOpen\">\r\n <div class=\"tk-live-meetings__filter-panel-header\">\r\n <h3 class=\"tk-live-meetings__filter-panel-title\">Filter live meetings</h3>\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meetings__filter-panel-close\"\r\n aria-label=\"Close filter panel\"\r\n (click)=\"closeFilterPanel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-panel-body\">\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-lock-state\">Lock state</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-lock-state\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.lockState\">\r\n <option value=\"\">All</option>\r\n <option value=\"locked\">Locked</option>\r\n <option value=\"unlocked\">Unlocked</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-cluster\">Cluster</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-cluster\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n <option value=\"\">All clusters</option>\r\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-start-time\">Start time (after)</label>\r\n <div class=\"tk-live-meetings__filter-input-wrap\">\r\n <input\r\n #startTimeInput\r\n id=\"tk-live-meetings-filter-start-time\"\r\n type=\"time\"\r\n class=\"tk-live-meetings__filter-input tk-live-meetings__filter-input--time\"\r\n [class.tk-live-meetings__filter-input--has-value]=\"filters.startTimeAfter\"\r\n [(ngModel)]=\"filters.startTimeAfter\">\r\n <mat-icon\r\n class=\"tk-live-meetings__filter-input-icon tk-live-meetings__filter-input-icon--clickable\"\r\n (click)=\"startTimeInput.showPicker()\">\r\n schedule\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-min-participants\">Minimum participants</label>\r\n <input\r\n id=\"tk-live-meetings-filter-min-participants\"\r\n type=\"number\"\r\n min=\"0\"\r\n class=\"tk-live-meetings__filter-input\"\r\n placeholder=\"0\"\r\n [(ngModel)]=\"filters.minParticipants\">\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-owner\">Owner</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-owner\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.owner\">\r\n <option value=\"\">All owners</option>\r\n <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-panel-footer\">\r\n <button type=\"button\" class=\"tk-live-meetings__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n <button type=\"button\" class=\"tk-live-meetings__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n </div>\r\n </aside>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-live-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-live-meetings__stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}.tk-live-meetings__stat-card{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-live-meetings__stat-label{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;color:#0009}.tk-live-meetings__stat-icon{width:.875rem;height:.875rem}.tk-live-meetings__stat-value{font-size:1.5rem;font-weight:600;color:#000000f2}.tk-live-meetings__toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.tk-live-meetings__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-live-meetings__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-live-meetings__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meetings__search-input::placeholder{color:#0006}.tk-live-meetings__filter-button{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-meetings__filter-button:hover{background:rgba(0,0,0,.03)}.tk-live-meetings__filter-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meetings__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-live-meetings__refresh{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-live-meetings__refresh-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-live-meetings__refresh-dot--off{background:rgba(0,0,0,.3)}.tk-live-meetings__refresh-toggle{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#1170cf;cursor:pointer}.tk-live-meetings__refresh-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#0009}.tk-live-meetings__refresh-button:hover{color:#000000f2}.tk-live-meetings__refresh-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meetings__table{width:100%;border-collapse:collapse;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-live-meetings__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-meetings__table th:hover{background-color:#dedede}.tk-live-meetings__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-meetings__table tbody tr:hover td{background:#ededed}.tk-live-meetings__title-cell{display:flex;flex-direction:column;justify-content:center;gap:.125rem}.tk-live-meetings__title-link{color:#1170cf;font-weight:500;text-decoration:none}.tk-live-meetings__title-link:hover{text-decoration:underline}.tk-live-meetings__title-subtext{font-size:.75rem;color:#0009}.tk-live-meetings__lock-badge{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:500;color:#0009}.tk-live-meetings__lock-badge--locked{padding:.125rem .625rem;border-radius:999px;background:#e8e8ea;color:#47484c}.tk-live-meetings__lock-dot{width:.375rem;height:.375rem;border-radius:50%;background:currentColor}.tk-live-meetings__lock-icon{height:.75rem;width:.75rem;opacity:.75}.tk-live-meetings__activity{display:inline-flex;align-items:center;gap:.5rem;color:#0009}.tk-live-meetings__activity-icon{width:1rem;height:1rem;opacity:.7}.tk-live-meetings__activity-icon--recording{opacity:1;filter:invert(24%) sepia(89%) saturate(3000%) hue-rotate(340deg) brightness(90%) contrast(90%)}.tk-live-meetings__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-meetings__quality-dot{width:.5rem;height:.5rem;border-radius:50%}.tk-live-meetings__quality-badge--good .tk-live-meetings__quality-dot{background:#1d805f}.tk-live-meetings__quality-badge--fair .tk-live-meetings__quality-dot{background:#b5860b}.tk-live-meetings__quality-badge--poor .tk-live-meetings__quality-dot{background:#c73636}.tk-live-meetings__action-link{font-weight:500;text-decoration:none}.tk-live-meetings__action-link:hover{cursor:pointer}.tk-live-meetings__empty{padding:1.5rem;text-align:center;color:#0009}.tk-live-meetings__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-live-meetings__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-live-meetings__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-live-meetings__filter-panel--open{transform:translate(0)}.tk-live-meetings__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-live-meetings__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-live-meetings__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-live-meetings__filter-panel-close:hover{color:#000000f2}.tk-live-meetings__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-live-meetings__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-live-meetings__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-live-meetings__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-live-meetings__filter-select,.tk-live-meetings__filter-input{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meetings__filter-select:focus,.tk-live-meetings__filter-input:focus{outline:none;border-color:#0006}.tk-live-meetings__filter-select::placeholder,.tk-live-meetings__filter-input::placeholder{color:#0006}.tk-live-meetings__filter-select{appearance:none;padding-right:2rem;cursor:pointer}.tk-live-meetings__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-live-meetings__filter-input-wrap{position:relative;display:flex;align-items:center}.tk-live-meetings__filter-input-wrap .tk-live-meetings__filter-input{padding-right:2rem}.tk-live-meetings__filter-input-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-live-meetings__filter-input-icon--clickable{pointer-events:auto;cursor:pointer}.tk-live-meetings__filter-input-icon--clickable:hover{color:#000000f2}.tk-live-meetings__filter-input--time::-webkit-calendar-picker-indicator{opacity:0}.tk-live-meetings__filter-input--time::-webkit-datetime-edit{color:#0006}.tk-live-meetings__filter-input--time.tk-live-meetings__filter-input--has-value::-webkit-datetime-edit{color:#000000f2}.tk-live-meetings__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem 1.5rem}.tk-live-meetings__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-live-meetings__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-live-meetings__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-live-meetings__filter-done:hover{background-color:oklch(95.5% .005 260)}\n"] }]
746
+ args: [{ selector: 'tk-live-meetings', template: "<div class=\"tk-live-meetings\">\r\n <div class=\"tk-live-meetings__stats\">\r\n <div class=\"tk-live-meetings__stat-card\" *ngFor=\"let stat of statCards\">\r\n <span class=\"tk-live-meetings__stat-label\">\r\n <img *ngIf=\"stat.icon\" class=\"tk-live-meetings__stat-icon\" [src]=\"'assets/icons/' + stat.icon + '.svg'\" alt=\"\">\r\n {{ stat.label }}\r\n </span>\r\n <span class=\"tk-live-meetings__stat-value\">{{ stat.value }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__toolbar\">\r\n <div style=\"position: relative; width: fit-content; min-width: 200px\">\r\n <input\r\n [value]=\"searchTerm\"\r\n (input)=\"onSearchInputChange($event)\"\r\n type=\"text\"\r\n placeholder=\"Search by display name, email\"\r\n style=\"\r\n width: 100%;\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 12px 6px 44px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n color: #222;\r\n outline: none;\r\n box-sizing: border-box;\r\n min-width: 280px;\r\n \"\r\n />\r\n <span\r\n style=\"\r\n position: absolute;\r\n left: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #757575;\r\n font-size: 18px;\r\n font-weight: normal;\r\n pointer-events: none;\r\n \"\r\n >\r\n <i\r\n class=\"material-icons\"\r\n style=\"font-size: 18px; font-weight: normal\"\r\n >search</i\r\n >\r\n </span>\r\n </div>\r\n\r\n <button type=\"button\" class=\"tk-live-meetings__filter-button\" (click)=\"toggleFilterPanel()\">\r\n <img class=\"tk-live-meetings__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n Filter\r\n </button>\r\n\r\n <span class=\"tk-live-meetings__count\">{{ filteredMeetings.length }} meetings</span>\r\n </div>\r\n\r\n <table class=\"tk-live-meetings__table\">\r\n <thead>\r\n <tr>\r\n <th>Meeting Title</th>\r\n <th>Owner</th>\r\n <th>Participants</th>\r\n <th>Lobby</th>\r\n <th>Lock</th>\r\n <th>Activity</th>\r\n <th>Start</th>\r\n <th>Duration</th>\r\n <th>Cluster</th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let meeting of filteredMeetings\">\r\n <td class=\"tk-live-meetings__title-cell\">\r\n <a href=\"javascript:void(0)\" class=\"tk-live-meetings__title-link\" (click)=\"onOpenLiveMeeting(meeting)\">{{ meeting.title }}</a>\r\n <span class=\"tk-live-meetings__title-subtext\">{{ meeting.ownerEmail }}</span>\r\n </td>\r\n <td>{{ meeting.ownerName }}</td>\r\n <td>{{ meeting.participants }}</td>\r\n <td>{{ meeting.lobbyCount }}</td>\r\n <td>\r\n <span\r\n class=\"tk-live-meetings__lock-badge\"\r\n [class.tk-live-meetings__lock-badge--locked]=\"meeting.lockState === 'locked'\">\r\n <ng-container *ngIf=\"meeting.lockState === 'locked'; else unlockedLabel\">\r\n <span class=\"tk-live-meetings__lock-dot\"></span>\r\n <img class=\"tk-live-meetings__lock-icon\" src=\"assets/icons/secure-lock-regular.svg\" alt=\"\">\r\n Locked\r\n </ng-container>\r\n <ng-template #unlockedLabel>Unlocked</ng-template>\r\n </span>\r\n </td>\r\n <td>\r\n <span class=\"tk-live-meetings__activity\">\r\n <ng-container *ngIf=\"meeting.activity.recording || meeting.activity.streaming || meeting.activity.presenting; else noActivity\">\r\n <img *ngIf=\"meeting.activity.recording\" class=\"tk-live-meetings__activity-icon tk-live-meetings__activity-icon--recording\" src=\"assets/icons/record-active-regular.svg\" alt=\"Recording\" title=\"Recording\">\r\n <img *ngIf=\"meeting.activity.streaming\" class=\"tk-live-meetings__activity-icon\" src=\"assets/icons/wifi-signal-good-regular.svg\" alt=\"Streaming\" title=\"Streaming\">\r\n <img *ngIf=\"meeting.activity.presenting\" class=\"tk-live-meetings__activity-icon\" src=\"assets/icons/display-regular.svg\" alt=\"Presenting\" title=\"Presenting\">\r\n </ng-container>\r\n <ng-template #noActivity>&mdash;</ng-template>\r\n </span>\r\n </td>\r\n <td>{{ meeting.startTime }}</td>\r\n <td>{{ meeting.duration }}</td>\r\n <td>{{ meeting.cluster }}</td>\r\n <td>\r\n <span class=\"tk-live-meetings__action-link\" (click)=\"onOpenLiveMeeting(meeting)\">Open controls</span>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetings.length\">\r\n <td colspan=\"11\" class=\"tk-live-meetings__empty\">No live meetings match your search.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div\r\n class=\"tk-live-meetings__filter-backdrop\"\r\n *ngIf=\"isFilterPanelOpen\"\r\n (click)=\"closeFilterPanel()\">\r\n </div>\r\n\r\n <aside class=\"tk-live-meetings__filter-panel\" [class.tk-live-meetings__filter-panel--open]=\"isFilterPanelOpen\">\r\n <div class=\"tk-live-meetings__filter-panel-header\">\r\n <h3 class=\"tk-live-meetings__filter-panel-title\">Filter live meetings</h3>\r\n <button\r\n type=\"button\"\r\n class=\"tk-live-meetings__filter-panel-close\"\r\n aria-label=\"Close filter panel\"\r\n (click)=\"closeFilterPanel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-panel-body\">\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-lock-state\">Lock state</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-lock-state\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.lockState\">\r\n <option value=\"\">All</option>\r\n <option value=\"locked\">Locked</option>\r\n <option value=\"unlocked\">Unlocked</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-cluster\">Cluster</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-cluster\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n <option value=\"\">All clusters</option>\r\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-start-time\">Start time (after)</label>\r\n <div class=\"tk-live-meetings__filter-input-wrap\">\r\n <input\r\n #startTimeInput\r\n id=\"tk-live-meetings-filter-start-time\"\r\n type=\"time\"\r\n class=\"tk-live-meetings__filter-input tk-live-meetings__filter-input--time\"\r\n [class.tk-live-meetings__filter-input--has-value]=\"filters.startTimeAfter\"\r\n [(ngModel)]=\"filters.startTimeAfter\">\r\n <mat-icon\r\n class=\"tk-live-meetings__filter-input-icon tk-live-meetings__filter-input-icon--clickable\"\r\n (click)=\"startTimeInput.showPicker()\">\r\n schedule\r\n </mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-min-participants\">Minimum participants</label>\r\n <input\r\n id=\"tk-live-meetings-filter-min-participants\"\r\n type=\"number\"\r\n min=\"0\"\r\n class=\"tk-live-meetings__filter-input\"\r\n placeholder=\"0\"\r\n [(ngModel)]=\"filters.minParticipants\">\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-field\">\r\n <label class=\"tk-live-meetings__filter-label\" for=\"tk-live-meetings-filter-owner\">Owner</label>\r\n <div class=\"tk-live-meetings__filter-select-wrap\">\r\n <select id=\"tk-live-meetings-filter-owner\" class=\"tk-live-meetings__filter-select\" [(ngModel)]=\"filters.owner\">\r\n <option value=\"\">All owners</option>\r\n <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n </select>\r\n <mat-icon class=\"tk-live-meetings__filter-select-icon\">expand_more</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tk-live-meetings__filter-panel-footer\">\r\n <button type=\"button\" class=\"tk-live-meetings__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n <button type=\"button\" class=\"tk-live-meetings__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n </div>\r\n </aside>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-live-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-live-meetings__stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}.tk-live-meetings__stat-card{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-live-meetings__stat-label{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;color:#0009}.tk-live-meetings__stat-icon{width:.875rem;height:.875rem}.tk-live-meetings__stat-value{font-size:1.5rem;font-weight:600;color:#000000f2}.tk-live-meetings__toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.tk-live-meetings__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-live-meetings__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-live-meetings__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meetings__search-input::placeholder{color:#0006}.tk-live-meetings__filter-button{display:inline-flex;align-items:center;gap:.375rem;height:34px;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:.5rem;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-live-meetings__filter-button:hover{background:rgba(0,0,0,.03)}.tk-live-meetings__filter-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meetings__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-live-meetings__refresh{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-live-meetings__refresh-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-live-meetings__refresh-dot--off{background:rgba(0,0,0,.3)}.tk-live-meetings__refresh-toggle{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000de;cursor:pointer}.tk-live-meetings__refresh-button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#0009}.tk-live-meetings__refresh-button:hover{color:#000000f2}.tk-live-meetings__refresh-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-live-meetings__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-live-meetings__table th{height:29px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;cursor:pointer}.tk-live-meetings__table th:hover{background-color:#dedede}.tk-live-meetings__table td{min-height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px 0 0 var(--mch-OutlineSecondary-normal, rgba(0, 0, 0, .2));background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-live-meetings__table tbody tr:hover td{background:#ededed}.tk-live-meetings__table th:first-child,.tk-live-meetings__table td:first-child{width:14rem}.tk-live-meetings__table td:first-child{box-shadow:0 -.0625rem .25rem #0000001c;transition:background-color .2s,box-shadow .2s;border-block-end:.0625rem solid rgba(0,0,0,.2);clip-path:inset(0 -.25rem 0 -.25rem)}.tk-live-meetings__title-cell{display:flex;flex-direction:column;justify-content:center;gap:.125rem;min-width:0}.tk-live-meetings__title-link{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#000000de;font-weight:500;text-decoration:none}.tk-live-meetings__title-subtext{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;color:#0009}.tk-live-meetings__lock-badge{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:500;color:#0009}.tk-live-meetings__lock-badge--locked{padding:.125rem .625rem;border-radius:999px;background:#e8e8ea;color:#47484c}.tk-live-meetings__lock-dot{width:.375rem;height:.375rem;border-radius:50%;background:currentColor}.tk-live-meetings__lock-icon{height:.75rem;width:.75rem;opacity:.75}.tk-live-meetings__activity{display:inline-flex;align-items:center;gap:.5rem;color:#0009}.tk-live-meetings__activity-icon{width:1rem;height:1rem;opacity:.7}.tk-live-meetings__activity-icon--recording{opacity:1;filter:invert(24%) sepia(89%) saturate(3000%) hue-rotate(340deg) brightness(90%) contrast(90%)}.tk-live-meetings__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-meetings__quality-dot{width:.5rem;height:.5rem;border-radius:50%}.tk-live-meetings__quality-badge--good .tk-live-meetings__quality-dot{background:#1d805f}.tk-live-meetings__quality-badge--fair .tk-live-meetings__quality-dot{background:#b5860b}.tk-live-meetings__quality-badge--poor .tk-live-meetings__quality-dot{background:#c73636}.tk-live-meetings__action-link{font-weight:500;text-decoration:none}.tk-live-meetings__action-link:hover{cursor:pointer}.tk-live-meetings__empty{padding:1.5rem;text-align:center;color:#0009}.tk-live-meetings__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-live-meetings__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-live-meetings__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-live-meetings__filter-panel--open{transform:translate(0)}.tk-live-meetings__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-live-meetings__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-live-meetings__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-live-meetings__filter-panel-close:hover{color:#000000f2}.tk-live-meetings__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-live-meetings__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-live-meetings__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-live-meetings__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-live-meetings__filter-select,.tk-live-meetings__filter-input{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-live-meetings__filter-select:focus,.tk-live-meetings__filter-input:focus{outline:none;border-color:#0006}.tk-live-meetings__filter-select::placeholder,.tk-live-meetings__filter-input::placeholder{color:#0006}.tk-live-meetings__filter-select{appearance:none;padding-right:2rem;cursor:pointer}.tk-live-meetings__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-live-meetings__filter-input-wrap{position:relative;display:flex;align-items:center}.tk-live-meetings__filter-input-wrap .tk-live-meetings__filter-input{padding-right:2rem}.tk-live-meetings__filter-input-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-live-meetings__filter-input-icon--clickable{pointer-events:auto;cursor:pointer}.tk-live-meetings__filter-input-icon--clickable:hover{color:#000000f2}.tk-live-meetings__filter-input--time::-webkit-calendar-picker-indicator{opacity:0}.tk-live-meetings__filter-input--time::-webkit-datetime-edit{color:#0006}.tk-live-meetings__filter-input--time.tk-live-meetings__filter-input--has-value::-webkit-datetime-edit{color:#000000f2}.tk-live-meetings__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem 1.5rem}.tk-live-meetings__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-live-meetings__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-live-meetings__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-live-meetings__filter-done:hover{background-color:oklch(95.5% .005 260)}\n"] }]
741
747
  }], ctorParameters: function () { return [{ type: LiveMeetingsService }]; }, propDecorators: { openLiveMeeting: [{
742
748
  type: Output
743
749
  }] } });
@@ -886,10 +892,10 @@ class MeetingsComponent {
886
892
  }
887
893
  }
888
894
  MeetingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingsComponent, deps: [{ token: APIService }], target: i0.ɵɵFactoryTarget.Component });
889
- MeetingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingsComponent, selector: "tk-meetings", inputs: { host: "host", token: "token", environmentStatusLabel: "environmentStatusLabel", environmentStatusState: "environmentStatusState", liveCount: "liveCount" }, ngImport: i0, template: "<div class=\"tk-meetings\">\r\n <ng-container *ngIf=\"view === 'list'\">\r\n <header class=\"tk-meetings__header\">\r\n <div class=\"tk-meetings__heading\">\r\n <h1 class=\"tk-meetings__title\">Meetings</h1>\r\n <!-- <p class=\"tk-meetings__subtitle\">Configure meeting spaces and monitor everything happening live across your environment.</p> -->\r\n </div>\r\n </header>\r\n\r\n <mat-tab-group disableRipple class=\"tk-meetings__tabs\">\r\n <mat-tab label=\"Meetings\">\r\n <div class=\"tk-meetings__tab-content\">\r\n <tk-meeting-spaces\r\n (createMeetingSpace)=\"onCreateMeetingSpace()\"\r\n (editMeetingSpace)=\"onEditMeetingSpace($event)\">\r\n </tk-meeting-spaces>\r\n </div>\r\n </mat-tab>\r\n\r\n <mat-tab>\r\n <ng-template mat-tab-label>\r\n <span>Live</span>\r\n <span class=\"tk-meetings__tab-count\">{{ liveCount }}</span>\r\n </ng-template>\r\n <div class=\"tk-meetings__tab-content\">\r\n <tk-live-meetings (openLiveMeeting)=\"onOpenLiveMeeting($event)\"></tk-live-meetings>\r\n </div>\r\n </mat-tab>\r\n </mat-tab-group>\r\n </ng-container>\r\n\r\n <tk-meeting-space\r\n *ngIf=\"view === 'meeting-space'\"\r\n [mode]=\"meetingSpaceMode\"\r\n [meetingSpaceId]=\"selectedMeetingSpaceId\"\r\n (back)=\"onMeetingSpaceBack()\"\r\n (saved)=\"onMeetingSpaceSaved($event)\">\r\n </tk-meeting-space>\r\n\r\n <tk-live-meeting\r\n *ngIf=\"view === 'live-meeting'\"\r\n [meetingId]=\"selectedLiveMeetingId\"\r\n (back)=\"onLiveMeetingBack()\">\r\n </tk-live-meeting>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meetings__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1.25rem}.tk-meetings__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meetings__title{margin:0;font-size:1.5rem;font-weight:600;color:#000000f2}.tk-meetings__subtitle{margin:0;font-size:.875rem;color:#0009}.tk-meetings__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meetings__status--warning .tk-meetings__status-dot{background:#b5860b}.tk-meetings__status--critical .tk-meetings__status-dot{background:#c73636}.tk-meetings__status-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meetings__tabs ::ng-deep .mat-tab-header{border-bottom:1px solid rgba(0,0,0,.12)}.tk-meetings__tabs ::ng-deep .mat-tab-label{height:auto;min-width:auto;padding:0 0 .75rem;margin-right:1.5rem;opacity:1;font-size:.875rem;font-weight:500;color:#0009}.tk-meetings__tabs ::ng-deep .mat-tab-label.mat-tab-label-active{color:#000000f2}.tk-meetings__tabs ::ng-deep .mat-tab-labels{gap:0}.tk-meetings__tabs ::ng-deep .mat-ink-bar{background-color:#000;height:2px}.tk-meetings__tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;margin-left:.375rem;padding:0 .375rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.75rem;font-weight:500;color:#000000f2}.tk-meetings__tab-content{padding:1.5rem 0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i3$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: MeetingSpacesComponent, selector: "tk-meeting-spaces", outputs: ["createMeetingSpace", "editMeetingSpace"] }, { kind: "component", type: MeetingSpaceComponent, selector: "tk-meeting-space", inputs: ["mode", "meetingSpaceId"], outputs: ["back", "saved"] }, { kind: "component", type: LiveMeetingsComponent, selector: "tk-live-meetings", outputs: ["openLiveMeeting"] }, { kind: "component", type: LiveMeetingComponent, selector: "tk-live-meeting", inputs: ["meetingId"], outputs: ["back"] }] });
895
+ MeetingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingsComponent, selector: "tk-meetings", inputs: { host: "host", token: "token", environmentStatusLabel: "environmentStatusLabel", environmentStatusState: "environmentStatusState", liveCount: "liveCount" }, ngImport: i0, template: "<div class=\"tk-meetings\">\r\n <ng-container *ngIf=\"view === 'list'\">\r\n <header class=\"tk-meetings__header\">\r\n <div class=\"tk-meetings__heading\">\r\n <h1 class=\"tk-meetings__title\">Meetings</h1>\r\n <!-- <p class=\"tk-meetings__subtitle\">Configure meeting spaces and monitor everything happening live across your environment.</p> -->\r\n </div>\r\n </header>\r\n\r\n <mat-tab-group disableRipple class=\"tk-meetings__tabs\">\r\n <mat-tab label=\"Meetings\">\r\n <div class=\"tk-meetings__tab-content\">\r\n <tk-meeting-spaces\r\n (createMeetingSpace)=\"onCreateMeetingSpace()\"\r\n (editMeetingSpace)=\"onEditMeetingSpace($event)\">\r\n </tk-meeting-spaces>\r\n </div>\r\n </mat-tab>\r\n\r\n <mat-tab>\r\n <ng-template mat-tab-label>\r\n <span>Live</span>\r\n <span class=\"tk-meetings__tab-count\">{{ liveCount }}</span>\r\n </ng-template>\r\n <div class=\"tk-meetings__tab-content\">\r\n <tk-live-meetings (openLiveMeeting)=\"onOpenLiveMeeting($event)\"></tk-live-meetings>\r\n </div>\r\n </mat-tab>\r\n </mat-tab-group>\r\n </ng-container>\r\n\r\n <tk-meeting-space\r\n *ngIf=\"view === 'meeting-space'\"\r\n [mode]=\"meetingSpaceMode\"\r\n [meetingSpaceId]=\"selectedMeetingSpaceId\"\r\n (back)=\"onMeetingSpaceBack()\"\r\n (saved)=\"onMeetingSpaceSaved($event)\">\r\n </tk-meeting-space>\r\n\r\n <tk-live-meeting\r\n *ngIf=\"view === 'live-meeting'\"\r\n [meetingId]=\"selectedLiveMeetingId\"\r\n (back)=\"onLiveMeetingBack()\">\r\n </tk-live-meeting>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meetings__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1.25rem}.tk-meetings__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meetings__title{margin:0;font-size:1.5rem;font-weight:600;color:#000000f2}.tk-meetings__subtitle{margin:0;font-size:.875rem;color:#0009}.tk-meetings__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meetings__status--warning .tk-meetings__status-dot{background:#b5860b}.tk-meetings__status--critical .tk-meetings__status-dot{background:#c73636}.tk-meetings__status-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meetings__tabs ::ng-deep .mat-tab-header{border-bottom:1px solid rgba(0,0,0,.12)}.tk-meetings__tabs ::ng-deep .mat-tab-label{height:auto;min-width:auto;padding:0 0 .75rem;margin-right:1.5rem;opacity:1;font-size:.875rem;font-weight:500;color:#0009}.tk-meetings__tabs ::ng-deep .mat-tab-label.mat-tab-label-active{color:#000000f2}.tk-meetings__tabs ::ng-deep .mat-tab-labels{gap:0}.tk-meetings__tabs ::ng-deep .mat-ink-bar{background-color:#000;height:2px}.tk-meetings__tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;margin-left:.375rem;padding:0 .375rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.75rem;font-weight:500;color:#000000f2}.tk-meetings__tab-content{padding:.5rem 0 1.5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i3$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: MeetingSpacesComponent, selector: "tk-meeting-spaces", outputs: ["createMeetingSpace", "editMeetingSpace"] }, { kind: "component", type: MeetingSpaceComponent, selector: "tk-meeting-space", inputs: ["mode", "meetingSpaceId"], outputs: ["back", "saved"] }, { kind: "component", type: LiveMeetingsComponent, selector: "tk-live-meetings", outputs: ["openLiveMeeting"] }, { kind: "component", type: LiveMeetingComponent, selector: "tk-live-meeting", inputs: ["meetingId"], outputs: ["back"] }] });
890
896
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingsComponent, decorators: [{
891
897
  type: Component,
892
- args: [{ selector: 'tk-meetings', template: "<div class=\"tk-meetings\">\r\n <ng-container *ngIf=\"view === 'list'\">\r\n <header class=\"tk-meetings__header\">\r\n <div class=\"tk-meetings__heading\">\r\n <h1 class=\"tk-meetings__title\">Meetings</h1>\r\n <!-- <p class=\"tk-meetings__subtitle\">Configure meeting spaces and monitor everything happening live across your environment.</p> -->\r\n </div>\r\n </header>\r\n\r\n <mat-tab-group disableRipple class=\"tk-meetings__tabs\">\r\n <mat-tab label=\"Meetings\">\r\n <div class=\"tk-meetings__tab-content\">\r\n <tk-meeting-spaces\r\n (createMeetingSpace)=\"onCreateMeetingSpace()\"\r\n (editMeetingSpace)=\"onEditMeetingSpace($event)\">\r\n </tk-meeting-spaces>\r\n </div>\r\n </mat-tab>\r\n\r\n <mat-tab>\r\n <ng-template mat-tab-label>\r\n <span>Live</span>\r\n <span class=\"tk-meetings__tab-count\">{{ liveCount }}</span>\r\n </ng-template>\r\n <div class=\"tk-meetings__tab-content\">\r\n <tk-live-meetings (openLiveMeeting)=\"onOpenLiveMeeting($event)\"></tk-live-meetings>\r\n </div>\r\n </mat-tab>\r\n </mat-tab-group>\r\n </ng-container>\r\n\r\n <tk-meeting-space\r\n *ngIf=\"view === 'meeting-space'\"\r\n [mode]=\"meetingSpaceMode\"\r\n [meetingSpaceId]=\"selectedMeetingSpaceId\"\r\n (back)=\"onMeetingSpaceBack()\"\r\n (saved)=\"onMeetingSpaceSaved($event)\">\r\n </tk-meeting-space>\r\n\r\n <tk-live-meeting\r\n *ngIf=\"view === 'live-meeting'\"\r\n [meetingId]=\"selectedLiveMeetingId\"\r\n (back)=\"onLiveMeetingBack()\">\r\n </tk-live-meeting>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meetings__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1.25rem}.tk-meetings__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meetings__title{margin:0;font-size:1.5rem;font-weight:600;color:#000000f2}.tk-meetings__subtitle{margin:0;font-size:.875rem;color:#0009}.tk-meetings__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meetings__status--warning .tk-meetings__status-dot{background:#b5860b}.tk-meetings__status--critical .tk-meetings__status-dot{background:#c73636}.tk-meetings__status-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meetings__tabs ::ng-deep .mat-tab-header{border-bottom:1px solid rgba(0,0,0,.12)}.tk-meetings__tabs ::ng-deep .mat-tab-label{height:auto;min-width:auto;padding:0 0 .75rem;margin-right:1.5rem;opacity:1;font-size:.875rem;font-weight:500;color:#0009}.tk-meetings__tabs ::ng-deep .mat-tab-label.mat-tab-label-active{color:#000000f2}.tk-meetings__tabs ::ng-deep .mat-tab-labels{gap:0}.tk-meetings__tabs ::ng-deep .mat-ink-bar{background-color:#000;height:2px}.tk-meetings__tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;margin-left:.375rem;padding:0 .375rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.75rem;font-weight:500;color:#000000f2}.tk-meetings__tab-content{padding:1.5rem 0}\n"] }]
898
+ args: [{ selector: 'tk-meetings', template: "<div class=\"tk-meetings\">\r\n <ng-container *ngIf=\"view === 'list'\">\r\n <header class=\"tk-meetings__header\">\r\n <div class=\"tk-meetings__heading\">\r\n <h1 class=\"tk-meetings__title\">Meetings</h1>\r\n <!-- <p class=\"tk-meetings__subtitle\">Configure meeting spaces and monitor everything happening live across your environment.</p> -->\r\n </div>\r\n </header>\r\n\r\n <mat-tab-group disableRipple class=\"tk-meetings__tabs\">\r\n <mat-tab label=\"Meetings\">\r\n <div class=\"tk-meetings__tab-content\">\r\n <tk-meeting-spaces\r\n (createMeetingSpace)=\"onCreateMeetingSpace()\"\r\n (editMeetingSpace)=\"onEditMeetingSpace($event)\">\r\n </tk-meeting-spaces>\r\n </div>\r\n </mat-tab>\r\n\r\n <mat-tab>\r\n <ng-template mat-tab-label>\r\n <span>Live</span>\r\n <span class=\"tk-meetings__tab-count\">{{ liveCount }}</span>\r\n </ng-template>\r\n <div class=\"tk-meetings__tab-content\">\r\n <tk-live-meetings (openLiveMeeting)=\"onOpenLiveMeeting($event)\"></tk-live-meetings>\r\n </div>\r\n </mat-tab>\r\n </mat-tab-group>\r\n </ng-container>\r\n\r\n <tk-meeting-space\r\n *ngIf=\"view === 'meeting-space'\"\r\n [mode]=\"meetingSpaceMode\"\r\n [meetingSpaceId]=\"selectedMeetingSpaceId\"\r\n (back)=\"onMeetingSpaceBack()\"\r\n (saved)=\"onMeetingSpaceSaved($event)\">\r\n </tk-meeting-space>\r\n\r\n <tk-live-meeting\r\n *ngIf=\"view === 'live-meeting'\"\r\n [meetingId]=\"selectedLiveMeetingId\"\r\n (back)=\"onLiveMeetingBack()\">\r\n </tk-live-meeting>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meetings__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1.25rem}.tk-meetings__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meetings__title{margin:0;font-size:1.5rem;font-weight:600;color:#000000f2}.tk-meetings__subtitle{margin:0;font-size:.875rem;color:#0009}.tk-meetings__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meetings__status--warning .tk-meetings__status-dot{background:#b5860b}.tk-meetings__status--critical .tk-meetings__status-dot{background:#c73636}.tk-meetings__status-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meetings__tabs ::ng-deep .mat-tab-header{border-bottom:1px solid rgba(0,0,0,.12)}.tk-meetings__tabs ::ng-deep .mat-tab-label{height:auto;min-width:auto;padding:0 0 .75rem;margin-right:1.5rem;opacity:1;font-size:.875rem;font-weight:500;color:#0009}.tk-meetings__tabs ::ng-deep .mat-tab-label.mat-tab-label-active{color:#000000f2}.tk-meetings__tabs ::ng-deep .mat-tab-labels{gap:0}.tk-meetings__tabs ::ng-deep .mat-ink-bar{background-color:#000;height:2px}.tk-meetings__tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;margin-left:.375rem;padding:0 .375rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.75rem;font-weight:500;color:#000000f2}.tk-meetings__tab-content{padding:.5rem 0 1.5rem}\n"] }]
893
899
  }], ctorParameters: function () { return [{ type: APIService }]; }, propDecorators: { host: [{
894
900
  type: Input
895
901
  }], token: [{