@tuki-io/tuki-widgets 0.0.219-dev.33 → 0.0.219-dev.34

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 (10) hide show
  1. package/esm2020/meetings/src/components/meeting-spaces/meeting-space/meeting-space.component.mjs +6 -4
  2. package/esm2020/meetings/src/components/meeting-spaces/meeting-spaces.component.mjs +3 -3
  3. package/esm2020/meetings/src/material.module.mjs +19 -5
  4. package/esm2020/meetings/src/meetings.component.mjs +2 -2
  5. package/fesm2015/tuki-io-tuki-widgets-meetings.mjs +26 -10
  6. package/fesm2015/tuki-io-tuki-widgets-meetings.mjs.map +1 -1
  7. package/fesm2020/tuki-io-tuki-widgets-meetings.mjs +26 -10
  8. package/fesm2020/tuki-io-tuki-widgets-meetings.mjs.map +1 -1
  9. package/meetings/src/material.module.d.ts +3 -1
  10. package/package.json +1 -1
package/fesm2015/tuki-io-tuki-widgets-meetings.mjs CHANGED
@@ -16,6 +16,10 @@ import { MatFormFieldModule } from '@angular/material/form-field';
16
16
  import { MatInputModule } from '@angular/material/input';
17
17
  import * as i3$1 from '@angular/material/tabs';
18
18
  import { MatTabsModule } from '@angular/material/tabs';
19
+ import * as i5 from '@angular/material/slide-toggle';
20
+ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
21
+ import * as i6 from '@angular/material/checkbox';
22
+ import { MatCheckboxModule } from '@angular/material/checkbox';
19
23
  import { map } from 'rxjs/operators';
20
24
  import { of } from 'rxjs';
21
25
 
@@ -28,26 +32,34 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
28
32
  MatProgressSpinnerModule,
29
33
  MatFormFieldModule,
30
34
  MatInputModule,
31
- MatTabsModule], exports: [MatButtonModule,
35
+ MatTabsModule,
36
+ MatSlideToggleModule,
37
+ MatCheckboxModule], exports: [MatButtonModule,
32
38
  MatIconModule,
33
39
  MatTableModule,
34
40
  MatProgressSpinnerModule,
35
41
  MatFormFieldModule,
36
42
  MatInputModule,
37
- MatTabsModule] });
43
+ MatTabsModule,
44
+ MatSlideToggleModule,
45
+ MatCheckboxModule] });
38
46
  MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatButtonModule,
39
47
  MatIconModule,
40
48
  MatTableModule,
41
49
  MatProgressSpinnerModule,
42
50
  MatFormFieldModule,
43
51
  MatInputModule,
44
- MatTabsModule, MatButtonModule,
52
+ MatTabsModule,
53
+ MatSlideToggleModule,
54
+ MatCheckboxModule, MatButtonModule,
45
55
  MatIconModule,
46
56
  MatTableModule,
47
57
  MatProgressSpinnerModule,
48
58
  MatFormFieldModule,
49
59
  MatInputModule,
50
- MatTabsModule] });
60
+ MatTabsModule,
61
+ MatSlideToggleModule,
62
+ MatCheckboxModule] });
51
63
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, decorators: [{
52
64
  type: NgModule,
53
65
  args: [{
@@ -59,6 +71,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
59
71
  MatFormFieldModule,
60
72
  MatInputModule,
61
73
  MatTabsModule,
74
+ MatSlideToggleModule,
75
+ MatCheckboxModule,
62
76
  ],
63
77
  exports: [
64
78
  MatButtonModule,
@@ -68,6 +82,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
68
82
  MatFormFieldModule,
69
83
  MatInputModule,
70
84
  MatTabsModule,
85
+ MatSlideToggleModule,
86
+ MatCheckboxModule,
71
87
  ]
72
88
  }]
73
89
  }] });
@@ -288,10 +304,10 @@ class MeetingSpacesComponent {
288
304
  }
289
305
  }
290
306
  MeetingSpacesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpacesComponent, deps: [{ token: MeetingSpacesService }], target: i0.ɵɵFactoryTarget.Component });
291
- 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: "<app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n<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 </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.autoGenerated\" class=\"tk-meeting-spaces__badge\">Auto-generated</span>\r\n </td>\r\n <td>{{ space.uri || '\u2014' }}</td>\r\n <td>{{ space.callId }}</td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n <td colspan=\"3\" 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-auto-generated\">Auto-generated</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-auto-generated\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.autoGenerated\">\r\n <option value=\"\">All</option>\r\n <option value=\"true\">Yes</option>\r\n <option value=\"false\">No</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:48px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:12px;font-weight:500;color:#636363;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;cursor:pointer;box-sizing:border-box}.tk-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__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;box-sizing:border-box}.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"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
307
+ 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: "<app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n<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 class=\"blue-input\"\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 </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.autoGenerated\" class=\"tk-meeting-spaces__badge\">Auto-generated</span>\r\n </td>\r\n <td>{{ space.uri || '\u2014' }}</td>\r\n <td>{{ space.callId }}</td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n <td colspan=\"3\" 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-auto-generated\">Auto-generated</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-auto-generated\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.autoGenerated\">\r\n <option value=\"\">All</option>\r\n <option value=\"true\">Yes</option>\r\n <option value=\"false\">No</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 .5rem 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:48px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:12px;font-weight:500;color:#636363;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;cursor:pointer;box-sizing:border-box}.tk-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__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;box-sizing:border-box}.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"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
292
308
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpacesComponent, decorators: [{
293
309
  type: Component,
294
- args: [{ selector: 'tk-meeting-spaces', template: "<app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n<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 </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.autoGenerated\" class=\"tk-meeting-spaces__badge\">Auto-generated</span>\r\n </td>\r\n <td>{{ space.uri || '\u2014' }}</td>\r\n <td>{{ space.callId }}</td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n <td colspan=\"3\" 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-auto-generated\">Auto-generated</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-auto-generated\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.autoGenerated\">\r\n <option value=\"\">All</option>\r\n <option value=\"true\">Yes</option>\r\n <option value=\"false\">No</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:48px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:12px;font-weight:500;color:#636363;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;cursor:pointer;box-sizing:border-box}.tk-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__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;box-sizing:border-box}.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"] }]
310
+ args: [{ selector: 'tk-meeting-spaces', template: "<app-loader *ngIf=\"isLoading\"></app-loader>\r\n\r\n<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 class=\"blue-input\"\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 </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.autoGenerated\" class=\"tk-meeting-spaces__badge\">Auto-generated</span>\r\n </td>\r\n <td>{{ space.uri || '\u2014' }}</td>\r\n <td>{{ space.callId }}</td>\r\n </tr>\r\n <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n <td colspan=\"3\" 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-auto-generated\">Auto-generated</label>\r\n <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n <select id=\"tk-meeting-spaces-filter-auto-generated\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.autoGenerated\">\r\n <option value=\"\">All</option>\r\n <option value=\"true\">Yes</option>\r\n <option value=\"false\">No</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 .5rem 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:48px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:12px;font-weight:500;color:#636363;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;cursor:pointer;box-sizing:border-box}.tk-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__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;box-sizing:border-box}.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"] }]
295
311
  }], ctorParameters: function () { return [{ type: MeetingSpacesService }]; }, propDecorators: { createMeetingSpace: [{
296
312
  type: Output
297
313
  }], editMeetingSpace: [{
@@ -384,10 +400,10 @@ class MeetingSpaceComponent {
384
400
  }
385
401
  }
386
402
  MeetingSpaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpaceComponent, deps: [{ token: MeetingSpacesService }], target: i0.ɵɵFactoryTarget.Component });
387
- MeetingSpaceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingSpaceComponent, selector: "tk-meeting-space", inputs: { mode: "mode", meetingSpaceId: "meetingSpaceId" }, outputs: { back: "back", saved: "saved" }, ngImport: i0, template: "<app-loader *ngIf=\"isLoading || isSaving\"></app-loader>\n\n<form class=\"tk-meeting-space\" *ngIf=\"!isLoading\" (ngSubmit)=\"onSubmit()\">\n <div class=\"tk-meeting-space__breadcrumb\">\n <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\n <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\n <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\n </div>\n\n <div class=\"tk-meeting-space__header\">\n <div class=\"tk-meeting-space__icon\">\n <mat-icon>videocam</mat-icon>\n </div>\n <div class=\"tk-meeting-space__heading\">\n <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\n <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\n <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\n <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\n {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\n </p>\n </div>\n </div>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">General information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Space name *</label>\n <input class=\"tk-meeting-space__input\" 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 </div>\n </section>\n\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Join information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting ID</label>\n <input class=\"tk-meeting-space__input\" [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]=\"details.browser_join_link\" disabled>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header tk-meeting-space__section-header--row\">\n <div class=\"tk-meeting-space__section-header-text\">\n <h3 class=\"tk-meeting-space__section-title\">Access roles and security</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\n </div>\n <div class=\"tk-meeting-space__section-header-actions\">\n <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\n <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\n Add role\n </button>\n </div>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n <div class=\"tk-meeting-space__role-header\">\n <div class=\"tk-meeting-space__role-header-info\">\n <span class=\"tk-meeting-space__role-icon\">\n <img src=\"assets/icons/people-regular.svg\" alt=\"\">\n </span>\n <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\n <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\n </div>\n <button\n type=\"button\"\n class=\"tk-meeting-space__role-remove\"\n (click)=\"removeAccessRole(role)\"\n aria-label=\"Remove role\">\n <img src=\"assets/icons/delete-regular.svg\" alt=\"\">\n </button>\n </div>\n\n <div class=\"tk-meeting-space__role-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Visibility</label>\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n <option value=\"public-directory\">Public directory</option>\n <option value=\"members-guests\">Members + guests</option>\n <option value=\"members-only\">Members only</option>\n <option value=\"owner-only\">Owner only</option>\n </select>\n </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 </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Meeting experience</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <p class=\"tk-meeting-space__label\">Default video layout</p>\n <div class=\"tk-meeting-space__layouts\">\n <button\n type=\"button\"\n *ngFor=\"let layout of videoLayouts\"\n class=\"tk-meeting-space__layout\"\n [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\n (click)=\"details.defaultVideoLayout = layout.value\">\n <span\n class=\"tk-meeting-space__layout-preview\"\n [ngClass]=\"'tk-meeting-space__layout-preview--' + layout.value\">\n <i *ngFor=\"let tile of layoutTiles(layout.tiles)\"></i>\n <span class=\"tk-meeting-space__layout-more\" *ngIf=\"layout.tiles === 0\">More...</span>\n </span>\n <span class=\"tk-meeting-space__layout-label\">{{ layout.label }}</span>\n </button>\n </div>\n\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Participant labels</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <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 </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Recording and streaming</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow recording</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <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 </div>\n </section>\n\n <div class=\"tk-meeting-space__footer\">\n <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\n <div class=\"tk-meeting-space__footer-actions\">\n <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\n <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\n </div>\n </div>\n</form>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:8px}.tk-meeting-space__section-header{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.25rem;padding:1rem 1.25rem .75rem;border-bottom:1px solid oklch(92% .003 260)}.tk-meeting-space__section-content{padding:1.25rem}.tk-meeting-space__section-header--row{flex-direction:row;align-items:center}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.875rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:.125rem 0 0;font-size:.78125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__toggle-field{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.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 oklch(92% .003 260);justify-content:space-between}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__status-row-actions{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{margin-bottom:1rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:8px;overflow:hidden}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem 1rem;background:oklch(96.5% .003 260/.4);border-bottom:1px solid oklch(92% .003 260)}.tk-meeting-space__role-header-info{display:flex;align-items:center;gap:.5rem;min-width:0}.tk-meeting-space__role-content{padding:1.25rem}.tk-meeting-space__role-icon{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:6px;background:transparent;flex-shrink:0}.tk-meeting-space__role-icon img{width:1rem;height:1rem;opacity:.6}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:340282000000000000000000000000000000000px;background-color:oklch(96% .03 235);border:solid 1px oklch(87% .06 235);color:oklch(38% .12 235);font-size:.6875rem;font-weight:500;font-size:11px;padding-inline:.5rem}.tk-meeting-space__role-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer}.tk-meeting-space__role-remove img{width:1.125rem;height:1.125rem;opacity:.7}.tk-meeting-space__role-remove:hover img{opacity:1}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{display:flex;flex-direction:column;justify-content:center;padding:.5rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;text-align:center;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__layout--selected .tk-meeting-space__layout-preview i{background-color:oklch(85% .02 240)}.tk-meeting-space__layout-preview{display:grid;gap:.125rem;aspect-ratio:16/9;padding:.25rem;margin-bottom:.5rem;background:rgba(0,0,0,.05);border-radius:4px}.tk-meeting-space__layout-preview i{display:block;background:#c3cede;border-radius:2px}.tk-meeting-space__layout-preview--all-equal{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.tk-meeting-space__layout-preview--speaker-only{grid-template-columns:1fr;grid-template-rows:1fr}.tk-meeting-space__layout-preview--telepresence{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.tk-meeting-space__layout-preview--stacked{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}.tk-meeting-space__layout-preview--one-plus-five,.tk-meeting-space__layout-preview--one-plus-seven,.tk-meeting-space__layout-preview--one-plus-nine{grid-template-rows:2fr 1fr}.tk-meeting-space__layout-preview--one-plus-five i:first-child,.tk-meeting-space__layout-preview--one-plus-seven i:first-child,.tk-meeting-space__layout-preview--one-plus-nine i:first-child{grid-column:1/-1}.tk-meeting-space__layout-preview--one-plus-five{grid-template-columns:repeat(5,1fr)}.tk-meeting-space__layout-preview--one-plus-seven{grid-template-columns:repeat(7,1fr)}.tk-meeting-space__layout-preview--one-plus-nine{grid-template-columns:repeat(9,1fr)}.tk-meeting-space__layout-preview--more{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.04)}.tk-meeting-space__layout-more{font-size:.75rem;font-weight:500;color:#b45309}.tk-meeting-space__layout-label{display:block}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.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"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
403
+ MeetingSpaceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingSpaceComponent, selector: "tk-meeting-space", inputs: { mode: "mode", meetingSpaceId: "meetingSpaceId" }, outputs: { back: "back", saved: "saved" }, ngImport: i0, template: "<app-loader *ngIf=\"isLoading || isSaving\"></app-loader>\n\n<form class=\"tk-meeting-space\" *ngIf=\"!isLoading\" (ngSubmit)=\"onSubmit()\">\n <div class=\"tk-meeting-space__breadcrumb\">\n <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\n <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\n <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\n </div>\n\n <div class=\"tk-meeting-space__header\">\n <div class=\"tk-meeting-space__icon\">\n <mat-icon>videocam</mat-icon>\n </div>\n <div class=\"tk-meeting-space__heading\">\n <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\n <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\n <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\n <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\n {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\n </p>\n </div>\n </div>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">General information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Space name *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"name\" placeholder=\"e.g. Executive Boardroom\" [(ngModel)]=\"details.name\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Owner *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"owner\" placeholder=\"owner@tuki.io\" [(ngModel)]=\"details.owner\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Description</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"description\" placeholder=\"Weekly executive strategy sync\" [(ngModel)]=\"details.description\">\n <span class=\"tk-meeting-space__hint\">Shown in invitations and the space directory.</span>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Cluster</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"cluster\" [(ngModel)]=\"details.cluster\">\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Space tag</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"tag\" placeholder=\"e.g. Leadership\" [(ngModel)]=\"details.tag\">\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting ID *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingId\" placeholder=\"e.g. 4427100\" [(ngModel)]=\"details.meetingId\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting URI *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingUri\" placeholder=\"space@tuki.io\" [(ngModel)]=\"details.meetingUri\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Secondary URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"secondaryUri\" placeholder=\"space.alt@tuki.io\" [(ngModel)]=\"details.secondaryUri\">\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting password</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"password\" placeholder=\"Optional\" [(ngModel)]=\"details.password\">\n </div>\n </div>\n\n <div class=\"tk-meeting-space__status-row\">\n <div>\n <p class=\"tk-meeting-space__status-row-label\">Space status</p>\n <p class=\"tk-meeting-space__hint\">Disabled spaces cannot activate meetings but keep their configuration.</p>\n </div>\n <div class=\"tk-meeting-space__status-row-actions\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.enabled\"\n (change)=\"details.enabled = !details.enabled\">\n {{ details.enabled ? 'Enabled' : 'Disabled' }}\n </mat-slide-toggle>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Join information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting ID</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingId\" disabled>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video address / SIP URI</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingUri\" disabled>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Browser join link</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.browser_join_link\" disabled>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header tk-meeting-space__section-header--row\">\n <div class=\"tk-meeting-space__section-header-text\">\n <h3 class=\"tk-meeting-space__section-title\">Access roles and security</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\n </div>\n <div class=\"tk-meeting-space__section-header-actions\">\n <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\n <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\n Add role\n </button>\n </div>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n <div class=\"tk-meeting-space__role-header\">\n <div class=\"tk-meeting-space__role-header-info\">\n <span class=\"tk-meeting-space__role-icon\">\n <img src=\"assets/icons/people-regular.svg\" alt=\"\">\n </span>\n <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\n <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\n </div>\n <button\n type=\"button\"\n class=\"tk-meeting-space__role-remove\"\n (click)=\"removeAccessRole(role)\"\n aria-label=\"Remove role\">\n <img src=\"assets/icons/delete-regular.svg\" alt=\"\">\n </button>\n </div>\n\n <div class=\"tk-meeting-space__role-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Visibility</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n <option value=\"public-directory\">Public directory</option>\n <option value=\"members-guests\">Members + guests</option>\n <option value=\"members-only\">Members only</option>\n <option value=\"owner-only\">Owner only</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Passcode</label>\n <input class=\"tk-meeting-space__input blue-input\" [name]=\"'passcode-' + role.id\" placeholder=\"\" [(ngModel)]=\"role.passcode\">\n <span class=\"tk-meeting-space__hint\">Numeric, minimum 4 digits (server policy).</span>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__checkboxes\">\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" [name]=\"'activates-' + role.id\" \n [(ngModel)]=\"role.activatesMeetingOnJoin\">\n Activates the meeting on join\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n Participants wait in lobby\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n Allow unauthenticated join\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n Grant meeting host controls\n </mat-checkbox>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Meeting experience</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <p class=\"tk-meeting-space__label\">Default video layout</p>\n <div class=\"tk-meeting-space__layouts\">\n <button\n type=\"button\"\n *ngFor=\"let layout of videoLayouts\"\n class=\"tk-meeting-space__layout\"\n [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\n (click)=\"details.defaultVideoLayout = layout.value\">\n <span\n class=\"tk-meeting-space__layout-preview\"\n [ngClass]=\"'tk-meeting-space__layout-preview--' + layout.value\">\n <i *ngFor=\"let tile of layoutTiles(layout.tiles)\"></i>\n <span class=\"tk-meeting-space__layout-more\" *ngIf=\"layout.tiles === 0\">More...</span>\n </span>\n <span class=\"tk-meeting-space__layout-label\">{{ layout.label }}</span>\n </button>\n </div>\n\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Participant labels</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.participantLabels\"\n (change)=\"details.participantLabels = !details.participantLabels\">\n {{ details.participantLabels ? 'On' : 'Off' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow presentation</label>\n <div class=\"tk-meeting-space__toggle-row\"> <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowPresentation\"\n (change)=\"details.allowPresentation = !details.allowPresentation\">\n {{ details.allowPresentation ? 'On' : 'Off' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Disconnect others allowed</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.disconnectOthersAllowed\"\n (change)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n {{ details.disconnectOthersAllowed ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video quality</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"videoQuality\" [(ngModel)]=\"details.videoQuality\">\n <option *ngFor=\"let quality of videoQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Presentation quality</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"presentationQuality\" [(ngModel)]=\"details.presentationQuality\">\n <option *ngFor=\"let quality of presentationQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Recording and streaming</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow recording</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowRecording\"\n (change)=\"details.allowRecording = !details.allowRecording\">\n {{ details.allowRecording ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow streaming</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowStreaming\"\n (change)=\"details.allowStreaming = !details.allowStreaming\">\n {{ details.allowStreaming ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">SIP recorder URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipRecorderUri\" placeholder=\"sip:recorder@tuki.io\" [(ngModel)]=\"details.sipRecorderUri\">\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">SIP streamer URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\n </div>\n </div>\n </div>\n </section>\n\n <div class=\"tk-meeting-space__footer\">\n <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\n <div class=\"tk-meeting-space__footer-actions\">\n <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\n <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\n </div>\n </div>\n</form>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;background:#fff;border:.0625rem solid rgba(0,0,0,.2);border-radius:8px}.tk-meeting-space__section-header{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.25rem;padding:1rem 1.25rem .75rem;border-bottom:.0625rem solid rgba(0,0,0,.2)}.tk-meeting-space__section-content{padding:1.25rem}.tk-meeting-space__section-header--row{flex-direction:row;align-items:center}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.875rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:.125rem 0 0;font-size:.78125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__toggle-field{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.875rem;font-weight:400;color:#000000f2;box-sizing:border-box;border:solid .0625rem rgba(0,0,0,.5019607843)!important}.tk-meeting-space__input::placeholder,.tk-meeting-space__select::placeholder{color:#0006}.tk-meeting-space__input:focus,.tk-meeting-space__select:focus{outline:none;border-color:#0006}.tk-meeting-space__input:disabled,.tk-meeting-space__select:disabled{background:rgba(0,0,0,.02);color:#0009}.tk-meeting-space__select:active{background-color:#0003;transition:background-color .1s cubic-bezier(.25,.1,.25,1),border-color .1s cubic-bezier(.25,.1,.25,1),color .1s cubic-bezier(.25,.1,.25,1)}.tk-meeting-space__select option{background-color:#fff;color:#000000f2}.tk-meeting-space__select{appearance:none;padding-right:2rem;cursor:pointer}.tk-meeting-space__select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-space__select-wrap:focus-within .tk-meeting-space__select-icon{transform:rotate(180deg)}.tk-meeting-space__select-icon{position:absolute;right:.75rem;width:1.125rem;height:.75rem;pointer-events:none;transition:transform .15s ease}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid oklch(92% .003 260);justify-content:space-between}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__status-row-actions{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{margin-bottom:1rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:8px;overflow:hidden}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem 1rem;background:oklch(96.5% .003 260/.4);border-bottom:1px solid oklch(92% .003 260)}.tk-meeting-space__role-header-info{display:flex;align-items:center;gap:.5rem;min-width:0}.tk-meeting-space__role-content{padding:1.25rem}.tk-meeting-space__role-icon{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:6px;background:transparent;flex-shrink:0}.tk-meeting-space__role-icon img{width:1rem;height:1rem;opacity:.6}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:340282000000000000000000000000000000000px;background-color:oklch(96% .03 235);border:solid 1px oklch(87% .06 235);color:oklch(38% .12 235);font-size:.6875rem;font-weight:500;font-size:11px;padding-inline:.5rem}.tk-meeting-space__role-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer}.tk-meeting-space__role-remove img{width:1.125rem;height:1.125rem;opacity:.7}.tk-meeting-space__role-remove:hover img{opacity:1}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{display:flex;flex-direction:column;justify-content:center;padding:.5rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;text-align:center;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__layout--selected .tk-meeting-space__layout-preview i{background-color:oklch(85% .02 240)}.tk-meeting-space__layout-preview{display:grid;gap:.125rem;aspect-ratio:16/9;padding:.25rem;margin-bottom:.5rem;background:rgba(0,0,0,.05);border-radius:4px}.tk-meeting-space__layout-preview i{display:block;background:#c3cede;border-radius:2px}.tk-meeting-space__layout-preview--all-equal{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.tk-meeting-space__layout-preview--speaker-only{grid-template-columns:1fr;grid-template-rows:1fr}.tk-meeting-space__layout-preview--telepresence{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.tk-meeting-space__layout-preview--stacked{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}.tk-meeting-space__layout-preview--one-plus-five,.tk-meeting-space__layout-preview--one-plus-seven,.tk-meeting-space__layout-preview--one-plus-nine{grid-template-rows:2fr 1fr}.tk-meeting-space__layout-preview--one-plus-five i:first-child,.tk-meeting-space__layout-preview--one-plus-seven i:first-child,.tk-meeting-space__layout-preview--one-plus-nine i:first-child{grid-column:1/-1}.tk-meeting-space__layout-preview--one-plus-five{grid-template-columns:repeat(5,1fr)}.tk-meeting-space__layout-preview--one-plus-seven{grid-template-columns:repeat(7,1fr)}.tk-meeting-space__layout-preview--one-plus-nine{grid-template-columns:repeat(9,1fr)}.tk-meeting-space__layout-preview--more{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.04)}.tk-meeting-space__layout-more{font-size:.75rem;font-weight:500;color:#b45309}.tk-meeting-space__layout-label{display:block}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }] });
388
404
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpaceComponent, decorators: [{
389
405
  type: Component,
390
- args: [{ selector: 'tk-meeting-space', template: "<app-loader *ngIf=\"isLoading || isSaving\"></app-loader>\n\n<form class=\"tk-meeting-space\" *ngIf=\"!isLoading\" (ngSubmit)=\"onSubmit()\">\n <div class=\"tk-meeting-space__breadcrumb\">\n <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\n <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\n <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\n </div>\n\n <div class=\"tk-meeting-space__header\">\n <div class=\"tk-meeting-space__icon\">\n <mat-icon>videocam</mat-icon>\n </div>\n <div class=\"tk-meeting-space__heading\">\n <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\n <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\n <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\n <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\n {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\n </p>\n </div>\n </div>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">General information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Space name *</label>\n <input class=\"tk-meeting-space__input\" 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 </div>\n </section>\n\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Join information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting ID</label>\n <input class=\"tk-meeting-space__input\" [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]=\"details.browser_join_link\" disabled>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header tk-meeting-space__section-header--row\">\n <div class=\"tk-meeting-space__section-header-text\">\n <h3 class=\"tk-meeting-space__section-title\">Access roles and security</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\n </div>\n <div class=\"tk-meeting-space__section-header-actions\">\n <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\n <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\n Add role\n </button>\n </div>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n <div class=\"tk-meeting-space__role-header\">\n <div class=\"tk-meeting-space__role-header-info\">\n <span class=\"tk-meeting-space__role-icon\">\n <img src=\"assets/icons/people-regular.svg\" alt=\"\">\n </span>\n <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\n <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\n </div>\n <button\n type=\"button\"\n class=\"tk-meeting-space__role-remove\"\n (click)=\"removeAccessRole(role)\"\n aria-label=\"Remove role\">\n <img src=\"assets/icons/delete-regular.svg\" alt=\"\">\n </button>\n </div>\n\n <div class=\"tk-meeting-space__role-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Visibility</label>\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n <option value=\"public-directory\">Public directory</option>\n <option value=\"members-guests\">Members + guests</option>\n <option value=\"members-only\">Members only</option>\n <option value=\"owner-only\">Owner only</option>\n </select>\n </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 </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Meeting experience</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <p class=\"tk-meeting-space__label\">Default video layout</p>\n <div class=\"tk-meeting-space__layouts\">\n <button\n type=\"button\"\n *ngFor=\"let layout of videoLayouts\"\n class=\"tk-meeting-space__layout\"\n [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\n (click)=\"details.defaultVideoLayout = layout.value\">\n <span\n class=\"tk-meeting-space__layout-preview\"\n [ngClass]=\"'tk-meeting-space__layout-preview--' + layout.value\">\n <i *ngFor=\"let tile of layoutTiles(layout.tiles)\"></i>\n <span class=\"tk-meeting-space__layout-more\" *ngIf=\"layout.tiles === 0\">More...</span>\n </span>\n <span class=\"tk-meeting-space__layout-label\">{{ layout.label }}</span>\n </button>\n </div>\n\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Participant labels</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <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 </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Recording and streaming</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow recording</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <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 </div>\n </section>\n\n <div class=\"tk-meeting-space__footer\">\n <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\n <div class=\"tk-meeting-space__footer-actions\">\n <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\n <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\n </div>\n </div>\n</form>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:8px}.tk-meeting-space__section-header{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.25rem;padding:1rem 1.25rem .75rem;border-bottom:1px solid oklch(92% .003 260)}.tk-meeting-space__section-content{padding:1.25rem}.tk-meeting-space__section-header--row{flex-direction:row;align-items:center}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.875rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:.125rem 0 0;font-size:.78125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__toggle-field{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.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 oklch(92% .003 260);justify-content:space-between}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__status-row-actions{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{margin-bottom:1rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:8px;overflow:hidden}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem 1rem;background:oklch(96.5% .003 260/.4);border-bottom:1px solid oklch(92% .003 260)}.tk-meeting-space__role-header-info{display:flex;align-items:center;gap:.5rem;min-width:0}.tk-meeting-space__role-content{padding:1.25rem}.tk-meeting-space__role-icon{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:6px;background:transparent;flex-shrink:0}.tk-meeting-space__role-icon img{width:1rem;height:1rem;opacity:.6}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:340282000000000000000000000000000000000px;background-color:oklch(96% .03 235);border:solid 1px oklch(87% .06 235);color:oklch(38% .12 235);font-size:.6875rem;font-weight:500;font-size:11px;padding-inline:.5rem}.tk-meeting-space__role-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer}.tk-meeting-space__role-remove img{width:1.125rem;height:1.125rem;opacity:.7}.tk-meeting-space__role-remove:hover img{opacity:1}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{display:flex;flex-direction:column;justify-content:center;padding:.5rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;text-align:center;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__layout--selected .tk-meeting-space__layout-preview i{background-color:oklch(85% .02 240)}.tk-meeting-space__layout-preview{display:grid;gap:.125rem;aspect-ratio:16/9;padding:.25rem;margin-bottom:.5rem;background:rgba(0,0,0,.05);border-radius:4px}.tk-meeting-space__layout-preview i{display:block;background:#c3cede;border-radius:2px}.tk-meeting-space__layout-preview--all-equal{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.tk-meeting-space__layout-preview--speaker-only{grid-template-columns:1fr;grid-template-rows:1fr}.tk-meeting-space__layout-preview--telepresence{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.tk-meeting-space__layout-preview--stacked{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}.tk-meeting-space__layout-preview--one-plus-five,.tk-meeting-space__layout-preview--one-plus-seven,.tk-meeting-space__layout-preview--one-plus-nine{grid-template-rows:2fr 1fr}.tk-meeting-space__layout-preview--one-plus-five i:first-child,.tk-meeting-space__layout-preview--one-plus-seven i:first-child,.tk-meeting-space__layout-preview--one-plus-nine i:first-child{grid-column:1/-1}.tk-meeting-space__layout-preview--one-plus-five{grid-template-columns:repeat(5,1fr)}.tk-meeting-space__layout-preview--one-plus-seven{grid-template-columns:repeat(7,1fr)}.tk-meeting-space__layout-preview--one-plus-nine{grid-template-columns:repeat(9,1fr)}.tk-meeting-space__layout-preview--more{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.04)}.tk-meeting-space__layout-more{font-size:.75rem;font-weight:500;color:#b45309}.tk-meeting-space__layout-label{display:block}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"] }]
406
+ args: [{ selector: 'tk-meeting-space', template: "<app-loader *ngIf=\"isLoading || isSaving\"></app-loader>\n\n<form class=\"tk-meeting-space\" *ngIf=\"!isLoading\" (ngSubmit)=\"onSubmit()\">\n <div class=\"tk-meeting-space__breadcrumb\">\n <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\n <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\n <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\n </div>\n\n <div class=\"tk-meeting-space__header\">\n <div class=\"tk-meeting-space__icon\">\n <mat-icon>videocam</mat-icon>\n </div>\n <div class=\"tk-meeting-space__heading\">\n <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\n <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\n <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\n <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\n {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\n </p>\n </div>\n </div>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">General information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Space name *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"name\" placeholder=\"e.g. Executive Boardroom\" [(ngModel)]=\"details.name\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Owner *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"owner\" placeholder=\"owner@tuki.io\" [(ngModel)]=\"details.owner\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Description</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"description\" placeholder=\"Weekly executive strategy sync\" [(ngModel)]=\"details.description\">\n <span class=\"tk-meeting-space__hint\">Shown in invitations and the space directory.</span>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Cluster</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"cluster\" [(ngModel)]=\"details.cluster\">\n <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Space tag</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"tag\" placeholder=\"e.g. Leadership\" [(ngModel)]=\"details.tag\">\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting ID *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingId\" placeholder=\"e.g. 4427100\" [(ngModel)]=\"details.meetingId\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting URI *</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"meetingUri\" placeholder=\"space@tuki.io\" [(ngModel)]=\"details.meetingUri\" required>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Secondary URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"secondaryUri\" placeholder=\"space.alt@tuki.io\" [(ngModel)]=\"details.secondaryUri\">\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting password</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"password\" placeholder=\"Optional\" [(ngModel)]=\"details.password\">\n </div>\n </div>\n\n <div class=\"tk-meeting-space__status-row\">\n <div>\n <p class=\"tk-meeting-space__status-row-label\">Space status</p>\n <p class=\"tk-meeting-space__hint\">Disabled spaces cannot activate meetings but keep their configuration.</p>\n </div>\n <div class=\"tk-meeting-space__status-row-actions\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.enabled\"\n (change)=\"details.enabled = !details.enabled\">\n {{ details.enabled ? 'Enabled' : 'Disabled' }}\n </mat-slide-toggle>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Join information</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Meeting ID</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingId\" disabled>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video address / SIP URI</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.meetingUri\" disabled>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Browser join link</label>\n <input class=\"tk-meeting-space__input blue-input\" [value]=\"details.browser_join_link\" disabled>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header tk-meeting-space__section-header--row\">\n <div class=\"tk-meeting-space__section-header-text\">\n <h3 class=\"tk-meeting-space__section-title\">Access roles and security</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\n </div>\n <div class=\"tk-meeting-space__section-header-actions\">\n <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\n <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\n Add role\n </button>\n </div>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n <div class=\"tk-meeting-space__role-header\">\n <div class=\"tk-meeting-space__role-header-info\">\n <span class=\"tk-meeting-space__role-icon\">\n <img src=\"assets/icons/people-regular.svg\" alt=\"\">\n </span>\n <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\n <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\n </div>\n <button\n type=\"button\"\n class=\"tk-meeting-space__role-remove\"\n (click)=\"removeAccessRole(role)\"\n aria-label=\"Remove role\">\n <img src=\"assets/icons/delete-regular.svg\" alt=\"\">\n </button>\n </div>\n\n <div class=\"tk-meeting-space__role-content\">\n <div class=\"tk-meeting-space__grid\">\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Visibility</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n <option value=\"public-directory\">Public directory</option>\n <option value=\"members-guests\">Members + guests</option>\n <option value=\"members-only\">Members only</option>\n <option value=\"owner-only\">Owner only</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Passcode</label>\n <input class=\"tk-meeting-space__input blue-input\" [name]=\"'passcode-' + role.id\" placeholder=\"\" [(ngModel)]=\"role.passcode\">\n <span class=\"tk-meeting-space__hint\">Numeric, minimum 4 digits (server policy).</span>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__checkboxes\">\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" [name]=\"'activates-' + role.id\" \n [(ngModel)]=\"role.activatesMeetingOnJoin\">\n Activates the meeting on join\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n Participants wait in lobby\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n Allow unauthenticated join\n </mat-checkbox>\n\n <mat-checkbox class=\"example-margin\" [color]=\"'primary'\" \n type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n Grant meeting host controls\n </mat-checkbox>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Meeting experience</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <p class=\"tk-meeting-space__label\">Default video layout</p>\n <div class=\"tk-meeting-space__layouts\">\n <button\n type=\"button\"\n *ngFor=\"let layout of videoLayouts\"\n class=\"tk-meeting-space__layout\"\n [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\n (click)=\"details.defaultVideoLayout = layout.value\">\n <span\n class=\"tk-meeting-space__layout-preview\"\n [ngClass]=\"'tk-meeting-space__layout-preview--' + layout.value\">\n <i *ngFor=\"let tile of layoutTiles(layout.tiles)\"></i>\n <span class=\"tk-meeting-space__layout-more\" *ngIf=\"layout.tiles === 0\">More...</span>\n </span>\n <span class=\"tk-meeting-space__layout-label\">{{ layout.label }}</span>\n </button>\n </div>\n\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Participant labels</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.participantLabels\"\n (change)=\"details.participantLabels = !details.participantLabels\">\n {{ details.participantLabels ? 'On' : 'Off' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow presentation</label>\n <div class=\"tk-meeting-space__toggle-row\"> <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowPresentation\"\n (change)=\"details.allowPresentation = !details.allowPresentation\">\n {{ details.allowPresentation ? 'On' : 'Off' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Disconnect others allowed</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.disconnectOthersAllowed\"\n (change)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n {{ details.disconnectOthersAllowed ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Video quality</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"videoQuality\" [(ngModel)]=\"details.videoQuality\">\n <option *ngFor=\"let quality of videoQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">Presentation quality</label>\n <div class=\"tk-meeting-space__select-wrap\">\n <select class=\"tk-meeting-space__select\" name=\"presentationQuality\" [(ngModel)]=\"details.presentationQuality\">\n <option *ngFor=\"let quality of presentationQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n </select>\n <img class=\"tk-meeting-space__select-icon\" src=\"assets/icons/arrow-down-bold.svg\" alt=\"\">\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"tk-meeting-space__section\">\n <header class=\"tk-meeting-space__section-header\">\n <h3 class=\"tk-meeting-space__section-title\">Recording and streaming</h3>\n <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n </header>\n\n <div class=\"tk-meeting-space__section-content\">\n <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow recording</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowRecording\"\n (change)=\"details.allowRecording = !details.allowRecording\">\n {{ details.allowRecording ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__toggle-field\">\n <label class=\"tk-meeting-space__label\">Allow streaming</label>\n <div class=\"tk-meeting-space__toggle-row\">\n <mat-slide-toggle \n class=\"custom-toggle\"\n [checked]=\"details.allowStreaming\"\n (change)=\"details.allowStreaming = !details.allowStreaming\">\n {{ details.allowStreaming ? 'True' : 'False' }}\n </mat-slide-toggle>\n </div>\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">SIP recorder URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipRecorderUri\" placeholder=\"sip:recorder@tuki.io\" [(ngModel)]=\"details.sipRecorderUri\">\n </div>\n\n <div class=\"tk-meeting-space__field\">\n <label class=\"tk-meeting-space__label\">SIP streamer URI</label>\n <input class=\"tk-meeting-space__input blue-input\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\n </div>\n </div>\n </div>\n </section>\n\n <div class=\"tk-meeting-space__footer\">\n <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\n <div class=\"tk-meeting-space__footer-actions\">\n <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\n <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\n </div>\n </div>\n</form>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;background:#fff;border:.0625rem solid rgba(0,0,0,.2);border-radius:8px}.tk-meeting-space__section-header{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.25rem;padding:1rem 1.25rem .75rem;border-bottom:.0625rem solid rgba(0,0,0,.2)}.tk-meeting-space__section-content{padding:1.25rem}.tk-meeting-space__section-header--row{flex-direction:row;align-items:center}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.875rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:.125rem 0 0;font-size:.78125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__toggle-field{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.875rem;font-weight:400;color:#000000f2;box-sizing:border-box;border:solid .0625rem rgba(0,0,0,.5019607843)!important}.tk-meeting-space__input::placeholder,.tk-meeting-space__select::placeholder{color:#0006}.tk-meeting-space__input:focus,.tk-meeting-space__select:focus{outline:none;border-color:#0006}.tk-meeting-space__input:disabled,.tk-meeting-space__select:disabled{background:rgba(0,0,0,.02);color:#0009}.tk-meeting-space__select:active{background-color:#0003;transition:background-color .1s cubic-bezier(.25,.1,.25,1),border-color .1s cubic-bezier(.25,.1,.25,1),color .1s cubic-bezier(.25,.1,.25,1)}.tk-meeting-space__select option{background-color:#fff;color:#000000f2}.tk-meeting-space__select{appearance:none;padding-right:2rem;cursor:pointer}.tk-meeting-space__select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-space__select-wrap:focus-within .tk-meeting-space__select-icon{transform:rotate(180deg)}.tk-meeting-space__select-icon{position:absolute;right:.75rem;width:1.125rem;height:.75rem;pointer-events:none;transition:transform .15s ease}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid oklch(92% .003 260);justify-content:space-between}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__status-row-actions{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{margin-bottom:1rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:8px;overflow:hidden}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem 1rem;background:oklch(96.5% .003 260/.4);border-bottom:1px solid oklch(92% .003 260)}.tk-meeting-space__role-header-info{display:flex;align-items:center;gap:.5rem;min-width:0}.tk-meeting-space__role-content{padding:1.25rem}.tk-meeting-space__role-icon{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:6px;background:transparent;flex-shrink:0}.tk-meeting-space__role-icon img{width:1rem;height:1rem;opacity:.6}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:340282000000000000000000000000000000000px;background-color:oklch(96% .03 235);border:solid 1px oklch(87% .06 235);color:oklch(38% .12 235);font-size:.6875rem;font-weight:500;font-size:11px;padding-inline:.5rem}.tk-meeting-space__role-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer}.tk-meeting-space__role-remove img{width:1.125rem;height:1.125rem;opacity:.7}.tk-meeting-space__role-remove:hover img{opacity:1}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{display:flex;flex-direction:column;justify-content:center;padding:.5rem;background:#fff;border:1px solid oklch(92% .003 260);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;text-align:center;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__layout--selected .tk-meeting-space__layout-preview i{background-color:oklch(85% .02 240)}.tk-meeting-space__layout-preview{display:grid;gap:.125rem;aspect-ratio:16/9;padding:.25rem;margin-bottom:.5rem;background:rgba(0,0,0,.05);border-radius:4px}.tk-meeting-space__layout-preview i{display:block;background:#c3cede;border-radius:2px}.tk-meeting-space__layout-preview--all-equal{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.tk-meeting-space__layout-preview--speaker-only{grid-template-columns:1fr;grid-template-rows:1fr}.tk-meeting-space__layout-preview--telepresence{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.tk-meeting-space__layout-preview--stacked{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}.tk-meeting-space__layout-preview--one-plus-five,.tk-meeting-space__layout-preview--one-plus-seven,.tk-meeting-space__layout-preview--one-plus-nine{grid-template-rows:2fr 1fr}.tk-meeting-space__layout-preview--one-plus-five i:first-child,.tk-meeting-space__layout-preview--one-plus-seven i:first-child,.tk-meeting-space__layout-preview--one-plus-nine i:first-child{grid-column:1/-1}.tk-meeting-space__layout-preview--one-plus-five{grid-template-columns:repeat(5,1fr)}.tk-meeting-space__layout-preview--one-plus-seven{grid-template-columns:repeat(7,1fr)}.tk-meeting-space__layout-preview--one-plus-nine{grid-template-columns:repeat(9,1fr)}.tk-meeting-space__layout-preview--more{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.04)}.tk-meeting-space__layout-more{font-size:.75rem;font-weight:500;color:#b45309}.tk-meeting-space__layout-label{display:block}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"] }]
391
407
  }], ctorParameters: function () { return [{ type: MeetingSpacesService }]; }, propDecorators: { mode: [{
392
408
  type: Input
393
409
  }], meetingSpaceId: [{
@@ -810,10 +826,10 @@ class MeetingsComponent {
810
826
  }
811
827
  }
812
828
  MeetingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingsComponent, deps: [{ token: APIService }], target: i0.ɵɵFactoryTarget.Component });
813
- 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}mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset: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"] }] });
829
+ 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: ["@charset \"UTF-8\";@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}mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-label{font-size:13px}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}::ng-deep input.blue-input{border:solid .0625rem rgba(0,0,0,.5019607843)!important}::ng-deep input.blue-input:focus{display:flex;align-items:center;color:#000000b3;background-color:#ededed;border:solid .0625rem rgba(0,0,0,.5019607843);font-weight:500;cursor:pointer;flex-wrap:wrap;gap:.5rem;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important}::ng-deep input.blue-input:focus:focus-visible{outline:none}::ng-deep input.blue-input:hover{background-color:#00000012!important}::ng-deep .mat-checkbox .mat-checkbox-inner-container .mat-checkbox-frame{border-width:.0625rem;border:solid .0625rem rgba(0,0,0,.5019607843);border-radius:.125rem;font-size:.625rem;transition:background-color .1s cubic-bezier(.25,.1,.25,1),border .1s cubic-bezier(.25,.1,.25,1),box-shadow .1s cubic-bezier(.25,.1,.25,1)}::ng-deep .mat-checkbox-checked.mat-primary .mat-checkbox-background{background-color:#1170cf}::ng-deep .mat-checkbox-checked.mat-primary .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75);transform-origin:left center;margin-left:2px}::ng-deep .mat-checkbox .mat-checkbox-label{font-size:.875rem;color:#000000f2;font-weight:400}\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"] }] });
814
830
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingsComponent, decorators: [{
815
831
  type: Component,
816
- 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}mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}\n"] }]
832
+ 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: ["@charset \"UTF-8\";@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}mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-label{font-size:13px}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}::ng-deep input.blue-input{border:solid .0625rem rgba(0,0,0,.5019607843)!important}::ng-deep input.blue-input:focus{display:flex;align-items:center;color:#000000b3;background-color:#ededed;border:solid .0625rem rgba(0,0,0,.5019607843);font-weight:500;cursor:pointer;flex-wrap:wrap;gap:.5rem;box-shadow:0 0 0 .12rem #fff,0 0 0 .25rem #1170cf,0 0 0 .3rem #1170cf59;background-color:#fff!important}::ng-deep input.blue-input:focus:focus-visible{outline:none}::ng-deep input.blue-input:hover{background-color:#00000012!important}::ng-deep .mat-checkbox .mat-checkbox-inner-container .mat-checkbox-frame{border-width:.0625rem;border:solid .0625rem rgba(0,0,0,.5019607843);border-radius:.125rem;font-size:.625rem;transition:background-color .1s cubic-bezier(.25,.1,.25,1),border .1s cubic-bezier(.25,.1,.25,1),box-shadow .1s cubic-bezier(.25,.1,.25,1)}::ng-deep .mat-checkbox-checked.mat-primary .mat-checkbox-background{background-color:#1170cf}::ng-deep .mat-checkbox-checked.mat-primary .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75);transform-origin:left center;margin-left:2px}::ng-deep .mat-checkbox .mat-checkbox-label{font-size:.875rem;color:#000000f2;font-weight:400}\n"] }]
817
833
  }], ctorParameters: function () { return [{ type: APIService }]; }, propDecorators: { host: [{
818
834
  type: Input
819
835
  }], token: [{