npm - @tuki-io/tuki-widgets - Versions diffs - 0.0.219-dev.28 → 0.0.219-dev.29 - Mend

@tuki-io/tuki-widgets 0.0.219-dev.28 → 0.0.219-dev.29

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

package/esm2020/meetings/src/components/meeting-spaces/meeting-space/meeting-space.component.mjs CHANGED Viewed

@@ -80,10 +80,10 @@ export class MeetingSpaceComponent {
     }
 }
 MeetingSpaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpaceComponent, deps: [{ token: i1.MeetingSpacesService }], target: i0.ɵɵFactoryTarget.Component });
-MeetingSpaceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingSpaceComponent, selector: "tk-meeting-space", inputs: { mode: "mode", meetingSpaceId: "meetingSpaceId" }, outputs: { back: "back", saved: "saved" }, ngImport: i0, template: "<form class=\"tk-meeting-space\" (ngSubmit)=\"onSubmit()\">\n  <div class=\"tk-meeting-space__breadcrumb\">\n    <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\n    <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\n    <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\n  </div>\n\n  <div class=\"tk-meeting-space__header\">\n    <div class=\"tk-meeting-space__icon\">\n      <mat-icon>videocam</mat-icon>\n    </div>\n    <div class=\"tk-meeting-space__heading\">\n      <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\n      <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\n      <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\n        <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\n        {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\n      </p>\n    </div>\n  </div>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">General information</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid\">\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Space name *</label>\n        <input class=\"tk-meeting-space__input\" name=\"name\" placeholder=\"e.g. Executive Boardroom\" [(ngModel)]=\"details.name\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Owner *</label>\n        <input class=\"tk-meeting-space__input\" name=\"owner\" placeholder=\"owner@tuki.io\" [(ngModel)]=\"details.owner\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Description</label>\n        <input class=\"tk-meeting-space__input\" name=\"description\" placeholder=\"Weekly executive strategy sync\" [(ngModel)]=\"details.description\">\n        <span class=\"tk-meeting-space__hint\">Shown in invitations and the space directory.</span>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Cluster</label>\n        <select class=\"tk-meeting-space__select\" name=\"cluster\" [(ngModel)]=\"details.cluster\">\n          <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\n        </select>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Space tag</label>\n        <input class=\"tk-meeting-space__input\" name=\"tag\" placeholder=\"e.g. Leadership\" [(ngModel)]=\"details.tag\">\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting ID *</label>\n        <input class=\"tk-meeting-space__input\" name=\"meetingId\" placeholder=\"e.g. 4427100\" [(ngModel)]=\"details.meetingId\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting URI *</label>\n        <input class=\"tk-meeting-space__input\" name=\"meetingUri\" placeholder=\"space@tuki.io\" [(ngModel)]=\"details.meetingUri\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Secondary URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"secondaryUri\" placeholder=\"space.alt@tuki.io\" [(ngModel)]=\"details.secondaryUri\">\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting password</label>\n        <input class=\"tk-meeting-space__input\" name=\"password\" placeholder=\"Optional\" [(ngModel)]=\"details.password\">\n      </div>\n    </div>\n\n    <div class=\"tk-meeting-space__status-row\">\n      <div>\n        <p class=\"tk-meeting-space__status-row-label\">Space status</p>\n        <p class=\"tk-meeting-space__hint\">Disabled spaces cannot activate meetings but keep their configuration.</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"tk-meeting-space__toggle\"\n        [class.tk-meeting-space__toggle--on]=\"details.enabled\"\n        (click)=\"details.enabled = !details.enabled\">\n        <span class=\"tk-meeting-space__toggle-thumb\"></span>\n      </button>\n      <span class=\"tk-meeting-space__toggle-label\">{{ details.enabled ? 'Enabled' : 'Disabled' }}</span>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Join information</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid\">\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting ID</label>\n        <input class=\"tk-meeting-space__input\" [value]=\"details.meetingId\" disabled>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Browser join link</label>\n        <input class=\"tk-meeting-space__input\" [value]=\"browserJoinLink\" disabled>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <div class=\"tk-meeting-space__section-header-text\">\n        <h2 class=\"tk-meeting-space__section-title\">Access roles and security</h2>\n        <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\n      </div>\n      <div class=\"tk-meeting-space__section-header-actions\">\n        <button\n          type=\"button\"\n          class=\"tk-meeting-space__toggle\"\n          [class.tk-meeting-space__toggle--on]=\"details.accessRolesEnabled\"\n          (click)=\"details.accessRolesEnabled = !details.accessRolesEnabled\">\n          <span class=\"tk-meeting-space__toggle-thumb\"></span>\n        </button>\n        <span class=\"tk-meeting-space__toggle-label\">{{ details.accessRolesEnabled ? 'Enabled' : 'Disabled' }}</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"details.accessRolesEnabled\">\n      <div class=\"tk-meeting-space__roles-toolbar\">\n        <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\n          <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\n          Add role\n        </button>\n      </div>\n\n      <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n        <div class=\"tk-meeting-space__role-header\">\n          <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\n          <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__role-remove\"\n            *ngIf=\"!role.primary\"\n            (click)=\"removeAccessRole(role)\"\n            aria-label=\"Remove role\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"tk-meeting-space__grid\">\n          <div class=\"tk-meeting-space__field\">\n            <label class=\"tk-meeting-space__label\">Visibility</label>\n            <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n              <option value=\"members-only\">Members only</option>\n              <option value=\"public\">Public</option>\n              <option value=\"private\">Private</option>\n            </select>\n          </div>\n          <div class=\"tk-meeting-space__field\">\n            <label class=\"tk-meeting-space__label\">Passcode</label>\n            <input class=\"tk-meeting-space__input\" [name]=\"'passcode-' + role.id\" placeholder=\"\" [(ngModel)]=\"role.passcode\">\n            <span class=\"tk-meeting-space__hint\">Numeric, minimum 4 digits (server policy).</span>\n          </div>\n        </div>\n\n        <div class=\"tk-meeting-space__checkboxes\">\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'activates-' + role.id\" [(ngModel)]=\"role.activatesMeetingOnJoin\">\n            Activates the meeting on join\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n            Participants wait in lobby\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n            Allow unauthenticated join\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n            Grant meeting host controls\n          </label>\n        </div>\n      </div>\n    </ng-container>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Meeting experience</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n    </div>\n\n    <p class=\"tk-meeting-space__label\">Default video layout</p>\n    <div class=\"tk-meeting-space__layouts\">\n      <button\n        type=\"button\"\n        *ngFor=\"let layout of videoLayouts\"\n        class=\"tk-meeting-space__layout\"\n        [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\n        (click)=\"details.defaultVideoLayout = layout.value\">\n        {{ layout.label }}\n      </button>\n    </div>\n\n    <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Participant labels</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.participantLabels\"\n            (click)=\"details.participantLabels = !details.participantLabels\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.participantLabels ? 'On' : 'Off' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow presentation</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowPresentation\"\n            (click)=\"details.allowPresentation = !details.allowPresentation\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowPresentation ? 'On' : 'Off' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Disconnect others allowed</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.disconnectOthersAllowed\"\n            (click)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.disconnectOthersAllowed ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Video quality</label>\n        <select class=\"tk-meeting-space__select\" name=\"videoQuality\" [(ngModel)]=\"details.videoQuality\">\n          <option *ngFor=\"let quality of videoQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n        </select>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Presentation quality</label>\n        <select class=\"tk-meeting-space__select\" name=\"presentationQuality\" [(ngModel)]=\"details.presentationQuality\">\n          <option *ngFor=\"let quality of presentationQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n        </select>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Recording and streaming</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow recording</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowRecording\"\n            (click)=\"details.allowRecording = !details.allowRecording\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowRecording ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow streaming</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowStreaming\"\n            (click)=\"details.allowStreaming = !details.allowStreaming\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowStreaming ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">SIP recorder URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"sipRecorderUri\" placeholder=\"sip:recorder@tuki.io\" [(ngModel)]=\"details.sipRecorderUri\">\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">SIP streamer URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\n      </div>\n    </div>\n  </section>\n\n  <div class=\"tk-meeting-space__footer\">\n    <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\n    <div class=\"tk-meeting-space__footer-actions\">\n      <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\n    </div>\n  </div>\n</form>\n", styles: [":host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;padding:1.5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.9375rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field,.tk-meeting-space__toggle-field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-space__input::placeholder,.tk-meeting-space__select::placeholder{color:#0006}.tk-meeting-space__input:focus,.tk-meeting-space__select:focus{outline:none;border-color:#0006}.tk-meeting-space__input:disabled,.tk-meeting-space__select:disabled{background:rgba(0,0,0,.02);color:#0009}.tk-meeting-space__select{appearance:none;cursor:pointer}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(0,0,0,.12)}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__roles-toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{padding:1.25rem;margin-bottom:1rem;background:rgba(0,0,0,.015);border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:999px;background:rgba(3,83,168,.1);color:#0353a8;font-size:.6875rem;font-weight:500}.tk-meeting-space__role-remove{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-space__role-remove:hover{color:#c73636}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{padding:.625rem .5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+MeetingSpaceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingSpaceComponent, selector: "tk-meeting-space", inputs: { mode: "mode", meetingSpaceId: "meetingSpaceId" }, outputs: { back: "back", saved: "saved" }, ngImport: i0, template: "<form class=\"tk-meeting-space\" (ngSubmit)=\"onSubmit()\">\n  <div class=\"tk-meeting-space__breadcrumb\">\n    <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\n    <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\n    <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\n  </div>\n\n  <div class=\"tk-meeting-space__header\">\n    <div class=\"tk-meeting-space__icon\">\n      <mat-icon>videocam</mat-icon>\n    </div>\n    <div class=\"tk-meeting-space__heading\">\n      <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\n      <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\n      <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\n        <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\n        {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\n      </p>\n    </div>\n  </div>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">General information</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid\">\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Space name *</label>\n        <input class=\"tk-meeting-space__input\" name=\"name\" placeholder=\"e.g. Executive Boardroom\" [(ngModel)]=\"details.name\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Owner *</label>\n        <input class=\"tk-meeting-space__input\" name=\"owner\" placeholder=\"owner@tuki.io\" [(ngModel)]=\"details.owner\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Description</label>\n        <input class=\"tk-meeting-space__input\" name=\"description\" placeholder=\"Weekly executive strategy sync\" [(ngModel)]=\"details.description\">\n        <span class=\"tk-meeting-space__hint\">Shown in invitations and the space directory.</span>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Cluster</label>\n        <select class=\"tk-meeting-space__select\" name=\"cluster\" [(ngModel)]=\"details.cluster\">\n          <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\n        </select>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Space tag</label>\n        <input class=\"tk-meeting-space__input\" name=\"tag\" placeholder=\"e.g. Leadership\" [(ngModel)]=\"details.tag\">\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting ID *</label>\n        <input class=\"tk-meeting-space__input\" name=\"meetingId\" placeholder=\"e.g. 4427100\" [(ngModel)]=\"details.meetingId\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting URI *</label>\n        <input class=\"tk-meeting-space__input\" name=\"meetingUri\" placeholder=\"space@tuki.io\" [(ngModel)]=\"details.meetingUri\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Secondary URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"secondaryUri\" placeholder=\"space.alt@tuki.io\" [(ngModel)]=\"details.secondaryUri\">\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting password</label>\n        <input class=\"tk-meeting-space__input\" name=\"password\" placeholder=\"Optional\" [(ngModel)]=\"details.password\">\n      </div>\n    </div>\n\n    <div class=\"tk-meeting-space__status-row\">\n      <div>\n        <p class=\"tk-meeting-space__status-row-label\">Space status</p>\n        <p class=\"tk-meeting-space__hint\">Disabled spaces cannot activate meetings but keep their configuration.</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"tk-meeting-space__toggle\"\n        [class.tk-meeting-space__toggle--on]=\"details.enabled\"\n        (click)=\"details.enabled = !details.enabled\">\n        <span class=\"tk-meeting-space__toggle-thumb\"></span>\n      </button>\n      <span class=\"tk-meeting-space__toggle-label\">{{ details.enabled ? 'Enabled' : 'Disabled' }}</span>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Join information</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid\">\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting ID</label>\n        <input class=\"tk-meeting-space__input\" [value]=\"details.meetingId\" disabled>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Browser join link</label>\n        <input class=\"tk-meeting-space__input\" [value]=\"browserJoinLink\" disabled>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <div class=\"tk-meeting-space__section-header-text\">\n        <h2 class=\"tk-meeting-space__section-title\">Access roles and security</h2>\n        <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\n      </div>\n      <div class=\"tk-meeting-space__section-header-actions\">\n        <button\n          type=\"button\"\n          class=\"tk-meeting-space__toggle\"\n          [class.tk-meeting-space__toggle--on]=\"details.accessRolesEnabled\"\n          (click)=\"details.accessRolesEnabled = !details.accessRolesEnabled\">\n          <span class=\"tk-meeting-space__toggle-thumb\"></span>\n        </button>\n        <span class=\"tk-meeting-space__toggle-label\">{{ details.accessRolesEnabled ? 'Enabled' : 'Disabled' }}</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"details.accessRolesEnabled\">\n      <div class=\"tk-meeting-space__roles-toolbar\">\n        <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\n          <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\n          Add role\n        </button>\n      </div>\n\n      <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n        <div class=\"tk-meeting-space__role-header\">\n          <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\n          <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__role-remove\"\n            *ngIf=\"!role.primary\"\n            (click)=\"removeAccessRole(role)\"\n            aria-label=\"Remove role\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"tk-meeting-space__grid\">\n          <div class=\"tk-meeting-space__field\">\n            <label class=\"tk-meeting-space__label\">Visibility</label>\n            <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n              <option value=\"members-only\">Members only</option>\n              <option value=\"public\">Public</option>\n              <option value=\"private\">Private</option>\n            </select>\n          </div>\n          <div class=\"tk-meeting-space__field\">\n            <label class=\"tk-meeting-space__label\">Passcode</label>\n            <input class=\"tk-meeting-space__input\" [name]=\"'passcode-' + role.id\" placeholder=\"\" [(ngModel)]=\"role.passcode\">\n            <span class=\"tk-meeting-space__hint\">Numeric, minimum 4 digits (server policy).</span>\n          </div>\n        </div>\n\n        <div class=\"tk-meeting-space__checkboxes\">\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'activates-' + role.id\" [(ngModel)]=\"role.activatesMeetingOnJoin\">\n            Activates the meeting on join\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n            Participants wait in lobby\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n            Allow unauthenticated join\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n            Grant meeting host controls\n          </label>\n        </div>\n      </div>\n    </ng-container>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Meeting experience</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n    </div>\n\n    <p class=\"tk-meeting-space__label\">Default video layout</p>\n    <div class=\"tk-meeting-space__layouts\">\n      <button\n        type=\"button\"\n        *ngFor=\"let layout of videoLayouts\"\n        class=\"tk-meeting-space__layout\"\n        [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\n        (click)=\"details.defaultVideoLayout = layout.value\">\n        {{ layout.label }}\n      </button>\n    </div>\n\n    <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Participant labels</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.participantLabels\"\n            (click)=\"details.participantLabels = !details.participantLabels\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.participantLabels ? 'On' : 'Off' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow presentation</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowPresentation\"\n            (click)=\"details.allowPresentation = !details.allowPresentation\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowPresentation ? 'On' : 'Off' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Disconnect others allowed</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.disconnectOthersAllowed\"\n            (click)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.disconnectOthersAllowed ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Video quality</label>\n        <select class=\"tk-meeting-space__select\" name=\"videoQuality\" [(ngModel)]=\"details.videoQuality\">\n          <option *ngFor=\"let quality of videoQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n        </select>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Presentation quality</label>\n        <select class=\"tk-meeting-space__select\" name=\"presentationQuality\" [(ngModel)]=\"details.presentationQuality\">\n          <option *ngFor=\"let quality of presentationQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n        </select>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Recording and streaming</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow recording</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowRecording\"\n            (click)=\"details.allowRecording = !details.allowRecording\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowRecording ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow streaming</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowStreaming\"\n            (click)=\"details.allowStreaming = !details.allowStreaming\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowStreaming ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">SIP recorder URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"sipRecorderUri\" placeholder=\"sip:recorder@tuki.io\" [(ngModel)]=\"details.sipRecorderUri\">\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">SIP streamer URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\n      </div>\n    </div>\n  </section>\n\n  <div class=\"tk-meeting-space__footer\">\n    <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\n    <div class=\"tk-meeting-space__footer-actions\">\n      <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\n    </div>\n  </div>\n</form>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;padding:1.5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.9375rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field,.tk-meeting-space__toggle-field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-space__input::placeholder,.tk-meeting-space__select::placeholder{color:#0006}.tk-meeting-space__input:focus,.tk-meeting-space__select:focus{outline:none;border-color:#0006}.tk-meeting-space__input:disabled,.tk-meeting-space__select:disabled{background:rgba(0,0,0,.02);color:#0009}.tk-meeting-space__select{appearance:none;cursor:pointer}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(0,0,0,.12)}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__roles-toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{padding:1.25rem;margin-bottom:1rem;background:rgba(0,0,0,.015);border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:999px;background:rgba(3,83,168,.1);color:#0353a8;font-size:.6875rem;font-weight:500}.tk-meeting-space__role-remove{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-space__role-remove:hover{color:#c73636}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{padding:.625rem .5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpaceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-meeting-space', template: "<form class=\"tk-meeting-space\" (ngSubmit)=\"onSubmit()\">\n  <div class=\"tk-meeting-space__breadcrumb\">\n    <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\n    <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\n    <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\n  </div>\n\n  <div class=\"tk-meeting-space__header\">\n    <div class=\"tk-meeting-space__icon\">\n      <mat-icon>videocam</mat-icon>\n    </div>\n    <div class=\"tk-meeting-space__heading\">\n      <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\n      <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\n      <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\n        <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\n        {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\n      </p>\n    </div>\n  </div>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">General information</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid\">\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Space name *</label>\n        <input class=\"tk-meeting-space__input\" name=\"name\" placeholder=\"e.g. Executive Boardroom\" [(ngModel)]=\"details.name\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Owner *</label>\n        <input class=\"tk-meeting-space__input\" name=\"owner\" placeholder=\"owner@tuki.io\" [(ngModel)]=\"details.owner\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Description</label>\n        <input class=\"tk-meeting-space__input\" name=\"description\" placeholder=\"Weekly executive strategy sync\" [(ngModel)]=\"details.description\">\n        <span class=\"tk-meeting-space__hint\">Shown in invitations and the space directory.</span>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Cluster</label>\n        <select class=\"tk-meeting-space__select\" name=\"cluster\" [(ngModel)]=\"details.cluster\">\n          <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\n        </select>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Space tag</label>\n        <input class=\"tk-meeting-space__input\" name=\"tag\" placeholder=\"e.g. Leadership\" [(ngModel)]=\"details.tag\">\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting ID *</label>\n        <input class=\"tk-meeting-space__input\" name=\"meetingId\" placeholder=\"e.g. 4427100\" [(ngModel)]=\"details.meetingId\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting URI *</label>\n        <input class=\"tk-meeting-space__input\" name=\"meetingUri\" placeholder=\"space@tuki.io\" [(ngModel)]=\"details.meetingUri\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Secondary URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"secondaryUri\" placeholder=\"space.alt@tuki.io\" [(ngModel)]=\"details.secondaryUri\">\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting password</label>\n        <input class=\"tk-meeting-space__input\" name=\"password\" placeholder=\"Optional\" [(ngModel)]=\"details.password\">\n      </div>\n    </div>\n\n    <div class=\"tk-meeting-space__status-row\">\n      <div>\n        <p class=\"tk-meeting-space__status-row-label\">Space status</p>\n        <p class=\"tk-meeting-space__hint\">Disabled spaces cannot activate meetings but keep their configuration.</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"tk-meeting-space__toggle\"\n        [class.tk-meeting-space__toggle--on]=\"details.enabled\"\n        (click)=\"details.enabled = !details.enabled\">\n        <span class=\"tk-meeting-space__toggle-thumb\"></span>\n      </button>\n      <span class=\"tk-meeting-space__toggle-label\">{{ details.enabled ? 'Enabled' : 'Disabled' }}</span>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Join information</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid\">\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting ID</label>\n        <input class=\"tk-meeting-space__input\" [value]=\"details.meetingId\" disabled>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Browser join link</label>\n        <input class=\"tk-meeting-space__input\" [value]=\"browserJoinLink\" disabled>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <div class=\"tk-meeting-space__section-header-text\">\n        <h2 class=\"tk-meeting-space__section-title\">Access roles and security</h2>\n        <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\n      </div>\n      <div class=\"tk-meeting-space__section-header-actions\">\n        <button\n          type=\"button\"\n          class=\"tk-meeting-space__toggle\"\n          [class.tk-meeting-space__toggle--on]=\"details.accessRolesEnabled\"\n          (click)=\"details.accessRolesEnabled = !details.accessRolesEnabled\">\n          <span class=\"tk-meeting-space__toggle-thumb\"></span>\n        </button>\n        <span class=\"tk-meeting-space__toggle-label\">{{ details.accessRolesEnabled ? 'Enabled' : 'Disabled' }}</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"details.accessRolesEnabled\">\n      <div class=\"tk-meeting-space__roles-toolbar\">\n        <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\n          <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\n          Add role\n        </button>\n      </div>\n\n      <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n        <div class=\"tk-meeting-space__role-header\">\n          <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\n          <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__role-remove\"\n            *ngIf=\"!role.primary\"\n            (click)=\"removeAccessRole(role)\"\n            aria-label=\"Remove role\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"tk-meeting-space__grid\">\n          <div class=\"tk-meeting-space__field\">\n            <label class=\"tk-meeting-space__label\">Visibility</label>\n            <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n              <option value=\"members-only\">Members only</option>\n              <option value=\"public\">Public</option>\n              <option value=\"private\">Private</option>\n            </select>\n          </div>\n          <div class=\"tk-meeting-space__field\">\n            <label class=\"tk-meeting-space__label\">Passcode</label>\n            <input class=\"tk-meeting-space__input\" [name]=\"'passcode-' + role.id\" placeholder=\"\" [(ngModel)]=\"role.passcode\">\n            <span class=\"tk-meeting-space__hint\">Numeric, minimum 4 digits (server policy).</span>\n          </div>\n        </div>\n\n        <div class=\"tk-meeting-space__checkboxes\">\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'activates-' + role.id\" [(ngModel)]=\"role.activatesMeetingOnJoin\">\n            Activates the meeting on join\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n            Participants wait in lobby\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n            Allow unauthenticated join\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n            Grant meeting host controls\n          </label>\n        </div>\n      </div>\n    </ng-container>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Meeting experience</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n    </div>\n\n    <p class=\"tk-meeting-space__label\">Default video layout</p>\n    <div class=\"tk-meeting-space__layouts\">\n      <button\n        type=\"button\"\n        *ngFor=\"let layout of videoLayouts\"\n        class=\"tk-meeting-space__layout\"\n        [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\n        (click)=\"details.defaultVideoLayout = layout.value\">\n        {{ layout.label }}\n      </button>\n    </div>\n\n    <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Participant labels</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.participantLabels\"\n            (click)=\"details.participantLabels = !details.participantLabels\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.participantLabels ? 'On' : 'Off' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow presentation</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowPresentation\"\n            (click)=\"details.allowPresentation = !details.allowPresentation\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowPresentation ? 'On' : 'Off' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Disconnect others allowed</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.disconnectOthersAllowed\"\n            (click)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.disconnectOthersAllowed ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Video quality</label>\n        <select class=\"tk-meeting-space__select\" name=\"videoQuality\" [(ngModel)]=\"details.videoQuality\">\n          <option *ngFor=\"let quality of videoQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n        </select>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Presentation quality</label>\n        <select class=\"tk-meeting-space__select\" name=\"presentationQuality\" [(ngModel)]=\"details.presentationQuality\">\n          <option *ngFor=\"let quality of presentationQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n        </select>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Recording and streaming</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow recording</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowRecording\"\n            (click)=\"details.allowRecording = !details.allowRecording\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowRecording ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow streaming</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowStreaming\"\n            (click)=\"details.allowStreaming = !details.allowStreaming\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowStreaming ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">SIP recorder URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"sipRecorderUri\" placeholder=\"sip:recorder@tuki.io\" [(ngModel)]=\"details.sipRecorderUri\">\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">SIP streamer URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\n      </div>\n    </div>\n  </section>\n\n  <div class=\"tk-meeting-space__footer\">\n    <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\n    <div class=\"tk-meeting-space__footer-actions\">\n      <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\n    </div>\n  </div>\n</form>\n", styles: [":host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;padding:1.5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.9375rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field,.tk-meeting-space__toggle-field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-space__input::placeholder,.tk-meeting-space__select::placeholder{color:#0006}.tk-meeting-space__input:focus,.tk-meeting-space__select:focus{outline:none;border-color:#0006}.tk-meeting-space__input:disabled,.tk-meeting-space__select:disabled{background:rgba(0,0,0,.02);color:#0009}.tk-meeting-space__select{appearance:none;cursor:pointer}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(0,0,0,.12)}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__roles-toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{padding:1.25rem;margin-bottom:1rem;background:rgba(0,0,0,.015);border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:999px;background:rgba(3,83,168,.1);color:#0353a8;font-size:.6875rem;font-weight:500}.tk-meeting-space__role-remove{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-space__role-remove:hover{color:#c73636}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{padding:.625rem .5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"] }]
+            args: [{ selector: 'tk-meeting-space', template: "<form class=\"tk-meeting-space\" (ngSubmit)=\"onSubmit()\">\n  <div class=\"tk-meeting-space__breadcrumb\">\n    <a href=\"javascript:void(0)\" class=\"tk-meeting-space__breadcrumb-link\" (click)=\"onCancel()\">Meetings</a>\n    <span class=\"tk-meeting-space__breadcrumb-separator\">&rsaquo;</span>\n    <span class=\"tk-meeting-space__breadcrumb-current\">{{ isEdit ? details.name : 'New meeting space' }}</span>\n  </div>\n\n  <div class=\"tk-meeting-space__header\">\n    <div class=\"tk-meeting-space__icon\">\n      <mat-icon>videocam</mat-icon>\n    </div>\n    <div class=\"tk-meeting-space__heading\">\n      <h1 class=\"tk-meeting-space__title\">{{ isEdit ? details.name : 'New meeting space' }}</h1>\n      <p class=\"tk-meeting-space__subtitle\" *ngIf=\"!isEdit\">Configure a reusable meeting environment with join details and access roles.</p>\n      <p class=\"tk-meeting-space__status\" *ngIf=\"isEdit\">\n        <span class=\"tk-meeting-space__status-dot\" [class.tk-meeting-space__status-dot--disabled]=\"!details.enabled\"></span>\n        {{ details.enabled ? 'Enabled' : 'Disabled' }} &middot; {{ details.meetingUri }} &middot; {{ details.meetingId }}\n      </p>\n    </div>\n  </div>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">General information</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Basic details, ownership and where this space runs.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid\">\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Space name *</label>\n        <input class=\"tk-meeting-space__input\" name=\"name\" placeholder=\"e.g. Executive Boardroom\" [(ngModel)]=\"details.name\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Owner *</label>\n        <input class=\"tk-meeting-space__input\" name=\"owner\" placeholder=\"owner@tuki.io\" [(ngModel)]=\"details.owner\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Description</label>\n        <input class=\"tk-meeting-space__input\" name=\"description\" placeholder=\"Weekly executive strategy sync\" [(ngModel)]=\"details.description\">\n        <span class=\"tk-meeting-space__hint\">Shown in invitations and the space directory.</span>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Cluster</label>\n        <select class=\"tk-meeting-space__select\" name=\"cluster\" [(ngModel)]=\"details.cluster\">\n          <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\n        </select>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Space tag</label>\n        <input class=\"tk-meeting-space__input\" name=\"tag\" placeholder=\"e.g. Leadership\" [(ngModel)]=\"details.tag\">\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting ID *</label>\n        <input class=\"tk-meeting-space__input\" name=\"meetingId\" placeholder=\"e.g. 4427100\" [(ngModel)]=\"details.meetingId\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting URI *</label>\n        <input class=\"tk-meeting-space__input\" name=\"meetingUri\" placeholder=\"space@tuki.io\" [(ngModel)]=\"details.meetingUri\" required>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Secondary URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"secondaryUri\" placeholder=\"space.alt@tuki.io\" [(ngModel)]=\"details.secondaryUri\">\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting password</label>\n        <input class=\"tk-meeting-space__input\" name=\"password\" placeholder=\"Optional\" [(ngModel)]=\"details.password\">\n      </div>\n    </div>\n\n    <div class=\"tk-meeting-space__status-row\">\n      <div>\n        <p class=\"tk-meeting-space__status-row-label\">Space status</p>\n        <p class=\"tk-meeting-space__hint\">Disabled spaces cannot activate meetings but keep their configuration.</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"tk-meeting-space__toggle\"\n        [class.tk-meeting-space__toggle--on]=\"details.enabled\"\n        (click)=\"details.enabled = !details.enabled\">\n        <span class=\"tk-meeting-space__toggle-thumb\"></span>\n      </button>\n      <span class=\"tk-meeting-space__toggle-label\">{{ details.enabled ? 'Enabled' : 'Disabled' }}</span>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\" *ngIf=\"isEdit\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Join information</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Everything participants need to reach this space.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid\">\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Meeting ID</label>\n        <input class=\"tk-meeting-space__input\" [value]=\"details.meetingId\" disabled>\n      </div>\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Browser join link</label>\n        <input class=\"tk-meeting-space__input\" [value]=\"browserJoinLink\" disabled>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <div class=\"tk-meeting-space__section-header-text\">\n        <h2 class=\"tk-meeting-space__section-title\">Access roles and security</h2>\n        <p class=\"tk-meeting-space__section-subtitle\">Different ways participants can join, with their own passcode and permissions.</p>\n      </div>\n      <div class=\"tk-meeting-space__section-header-actions\">\n        <button\n          type=\"button\"\n          class=\"tk-meeting-space__toggle\"\n          [class.tk-meeting-space__toggle--on]=\"details.accessRolesEnabled\"\n          (click)=\"details.accessRolesEnabled = !details.accessRolesEnabled\">\n          <span class=\"tk-meeting-space__toggle-thumb\"></span>\n        </button>\n        <span class=\"tk-meeting-space__toggle-label\">{{ details.accessRolesEnabled ? 'Enabled' : 'Disabled' }}</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"details.accessRolesEnabled\">\n      <div class=\"tk-meeting-space__roles-toolbar\">\n        <button type=\"button\" class=\"tk-meeting-space__add-role\" (click)=\"addAccessRole()\">\n          <mat-icon class=\"tk-meeting-space__add-role-icon\">add</mat-icon>\n          Add role\n        </button>\n      </div>\n\n      <div class=\"tk-meeting-space__role\" *ngFor=\"let role of details.accessRoles; trackBy: trackByRoleId\">\n        <div class=\"tk-meeting-space__role-header\">\n          <span class=\"tk-meeting-space__role-name\">{{ role.name }}</span>\n          <span class=\"tk-meeting-space__role-primary-badge\" *ngIf=\"role.primary\">Primary</span>\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__role-remove\"\n            *ngIf=\"!role.primary\"\n            (click)=\"removeAccessRole(role)\"\n            aria-label=\"Remove role\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"tk-meeting-space__grid\">\n          <div class=\"tk-meeting-space__field\">\n            <label class=\"tk-meeting-space__label\">Visibility</label>\n            <select class=\"tk-meeting-space__select\" [name]=\"'visibility-' + role.id\" [(ngModel)]=\"role.visibility\">\n              <option value=\"members-only\">Members only</option>\n              <option value=\"public\">Public</option>\n              <option value=\"private\">Private</option>\n            </select>\n          </div>\n          <div class=\"tk-meeting-space__field\">\n            <label class=\"tk-meeting-space__label\">Passcode</label>\n            <input class=\"tk-meeting-space__input\" [name]=\"'passcode-' + role.id\" placeholder=\"\" [(ngModel)]=\"role.passcode\">\n            <span class=\"tk-meeting-space__hint\">Numeric, minimum 4 digits (server policy).</span>\n          </div>\n        </div>\n\n        <div class=\"tk-meeting-space__checkboxes\">\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'activates-' + role.id\" [(ngModel)]=\"role.activatesMeetingOnJoin\">\n            Activates the meeting on join\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'wait-lobby-' + role.id\" [(ngModel)]=\"role.participantsWaitInLobby\">\n            Participants wait in lobby\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'unauth-' + role.id\" [(ngModel)]=\"role.allowUnauthenticatedJoin\">\n            Allow unauthenticated join\n          </label>\n          <label class=\"tk-meeting-space__checkbox\">\n            <input type=\"checkbox\" [name]=\"'host-controls-' + role.id\" [(ngModel)]=\"role.grantMeetingHostControls\">\n            Grant meeting host controls\n          </label>\n        </div>\n      </div>\n    </ng-container>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Meeting experience</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Defaults applied when a meeting activates in this space.</p>\n    </div>\n\n    <p class=\"tk-meeting-space__label\">Default video layout</p>\n    <div class=\"tk-meeting-space__layouts\">\n      <button\n        type=\"button\"\n        *ngFor=\"let layout of videoLayouts\"\n        class=\"tk-meeting-space__layout\"\n        [class.tk-meeting-space__layout--selected]=\"details.defaultVideoLayout === layout.value\"\n        (click)=\"details.defaultVideoLayout = layout.value\">\n        {{ layout.label }}\n      </button>\n    </div>\n\n    <div class=\"tk-meeting-space__grid tk-meeting-space__grid--experience\">\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Participant labels</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.participantLabels\"\n            (click)=\"details.participantLabels = !details.participantLabels\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.participantLabels ? 'On' : 'Off' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow presentation</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowPresentation\"\n            (click)=\"details.allowPresentation = !details.allowPresentation\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowPresentation ? 'On' : 'Off' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Disconnect others allowed</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.disconnectOthersAllowed\"\n            (click)=\"details.disconnectOthersAllowed = !details.disconnectOthersAllowed\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.disconnectOthersAllowed ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Video quality</label>\n        <select class=\"tk-meeting-space__select\" name=\"videoQuality\" [(ngModel)]=\"details.videoQuality\">\n          <option *ngFor=\"let quality of videoQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n        </select>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">Presentation quality</label>\n        <select class=\"tk-meeting-space__select\" name=\"presentationQuality\" [(ngModel)]=\"details.presentationQuality\">\n          <option *ngFor=\"let quality of presentationQualities\" [value]=\"quality.value\">{{ quality.label }}</option>\n        </select>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"tk-meeting-space__section\">\n    <div class=\"tk-meeting-space__section-header\">\n      <h2 class=\"tk-meeting-space__section-title\">Recording and streaming</h2>\n      <p class=\"tk-meeting-space__section-subtitle\">Controls for capturing and broadcasting the meeting.</p>\n    </div>\n\n    <div class=\"tk-meeting-space__grid tk-meeting-space__grid--recording\">\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow recording</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowRecording\"\n            (click)=\"details.allowRecording = !details.allowRecording\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowRecording ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__toggle-field\">\n        <label class=\"tk-meeting-space__label\">Allow streaming</label>\n        <div class=\"tk-meeting-space__toggle-row\">\n          <button\n            type=\"button\"\n            class=\"tk-meeting-space__toggle\"\n            [class.tk-meeting-space__toggle--on]=\"details.allowStreaming\"\n            (click)=\"details.allowStreaming = !details.allowStreaming\">\n            <span class=\"tk-meeting-space__toggle-thumb\"></span>\n          </button>\n          <span class=\"tk-meeting-space__toggle-label\">{{ details.allowStreaming ? 'True' : 'False' }}</span>\n        </div>\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">SIP recorder URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"sipRecorderUri\" placeholder=\"sip:recorder@tuki.io\" [(ngModel)]=\"details.sipRecorderUri\">\n      </div>\n\n      <div class=\"tk-meeting-space__field\">\n        <label class=\"tk-meeting-space__label\">SIP streamer URI</label>\n        <input class=\"tk-meeting-space__input\" name=\"sipStreamerUri\" placeholder=\"sip:streamer@tuki.io\" [(ngModel)]=\"details.sipStreamerUri\">\n      </div>\n    </div>\n  </section>\n\n  <div class=\"tk-meeting-space__footer\">\n    <span class=\"tk-meeting-space__footer-hint\">Changes apply the next time the meeting activates.</span>\n    <div class=\"tk-meeting-space__footer-actions\">\n      <button type=\"button\" class=\"tk-meeting-space__cancel\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"submit\" class=\"tk-meeting-space__submit\">{{ isEdit ? 'Save' : 'Create' }}</button>\n    </div>\n  </div>\n</form>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-space__breadcrumb{display:flex;align-items:center;gap:.375rem;margin-bottom:1rem;font-size:.8125rem;color:#0009}.tk-meeting-space__breadcrumb-link{color:#0009;text-decoration:none}.tk-meeting-space__breadcrumb-link:hover{color:#000000f2;text-decoration:underline}.tk-meeting-space__breadcrumb-current{color:#000000f2}.tk-meeting-space__header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem}.tk-meeting-space__icon{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:8px;background:rgba(0,0,0,.04);color:#0009;flex-shrink:0}.tk-meeting-space__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__title{margin:0;font-size:1.25rem;font-weight:600}.tk-meeting-space__subtitle,.tk-meeting-space__status{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__status{display:inline-flex;align-items:center;gap:.375rem}.tk-meeting-space__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meeting-space__status-dot--disabled{background:rgba(0,0,0,.3)}.tk-meeting-space__section{margin-bottom:1.5rem;padding:1.5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.tk-meeting-space__section-header-text{display:flex;flex-direction:column;gap:.25rem}.tk-meeting-space__section-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.tk-meeting-space__section-title{margin:0;font-size:.9375rem;font-weight:600}.tk-meeting-space__section-subtitle{margin:0;font-size:.8125rem;color:#0009}.tk-meeting-space__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem}.tk-meeting-space__grid--experience,.tk-meeting-space__grid--recording{align-items:start}.tk-meeting-space__field,.tk-meeting-space__toggle-field{display:flex;flex-direction:column;gap:.375rem}.tk-meeting-space__label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-space__hint{font-size:.75rem;color:#0009}.tk-meeting-space__input,.tk-meeting-space__select{width:100%;padding:.625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-space__input::placeholder,.tk-meeting-space__select::placeholder{color:#0006}.tk-meeting-space__input:focus,.tk-meeting-space__select:focus{outline:none;border-color:#0006}.tk-meeting-space__input:disabled,.tk-meeting-space__select:disabled{background:rgba(0,0,0,.02);color:#0009}.tk-meeting-space__select{appearance:none;cursor:pointer}.tk-meeting-space__status-row{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(0,0,0,.12)}.tk-meeting-space__status-row-label{margin:0;font-size:.8125rem;font-weight:500}.tk-meeting-space__toggle{position:relative;width:2rem;height:1.125rem;padding:0;border:none;border-radius:999px;background:rgba(0,0,0,.2);cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.tk-meeting-space__toggle--on{background:#0353a8}.tk-meeting-space__toggle-thumb{position:absolute;top:.1875rem;left:.1875rem;width:.75rem;height:.75rem;border-radius:50%;background:#fff;transition:transform .15s ease}.tk-meeting-space__toggle--on .tk-meeting-space__toggle-thumb{transform:translate(.875rem)}.tk-meeting-space__toggle-row{display:flex;align-items:center;gap:.5rem}.tk-meeting-space__toggle-label{font-size:.8125rem;color:#0009}.tk-meeting-space__roles-toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.tk-meeting-space__add-role{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__add-role:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__add-role-icon{font-size:1rem;height:1rem;width:1rem}.tk-meeting-space__role{padding:1.25rem;margin-bottom:1rem;background:rgba(0,0,0,.015);border:1px solid rgba(0,0,0,.12);border-radius:8px}.tk-meeting-space__role:last-child{margin-bottom:0}.tk-meeting-space__role-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tk-meeting-space__role-name{font-size:.875rem;font-weight:600}.tk-meeting-space__role-primary-badge{padding:.125rem .5rem;border-radius:999px;background:rgba(3,83,168,.1);color:#0353a8;font-size:.6875rem;font-weight:500}.tk-meeting-space__role-remove{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-space__role-remove:hover{color:#c73636}.tk-meeting-space__checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin-top:1rem}.tk-meeting-space__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-space__checkbox input{margin:0}.tk-meeting-space__layouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1.5rem}.tk-meeting-space__layout{padding:.625rem .5rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.75rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__layout:hover{background:rgba(0,0,0,.03)}.tk-meeting-space__layout--selected{border-color:#0353a8;color:#0353a8;background:rgba(3,83,168,.06)}.tk-meeting-space__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.tk-meeting-space__footer-hint{font-size:.8125rem;color:#0009}.tk-meeting-space__footer-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.tk-meeting-space__cancel{background:none;border:none;padding:.5rem 0;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-space__submit{padding:.5rem 1.25rem;background:#000;color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-space__submit:hover{background:#222}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MeetingSpacesService }]; }, propDecorators: { mode: [{
                 type: Input
             }], meetingSpaceId: [{

package/esm2020/meetings/src/components/meeting-spaces/meeting-spaces.component.mjs CHANGED Viewed

@@ -54,10 +54,10 @@ export class MeetingSpacesComponent {
     }
 }
 MeetingSpacesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpacesComponent, deps: [{ token: i1.MeetingSpacesService }], target: i0.ɵɵFactoryTarget.Component });
-MeetingSpacesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingSpacesComponent, selector: "tk-meeting-spaces", outputs: { createMeetingSpace: "createMeetingSpace", editMeetingSpace: "editMeetingSpace" }, ngImport: i0, template: "<div class=\"tk-meeting-spaces__header\">\r\n  <h2 class=\"tk-meeting-spaces__title\">Meeting Spaces</h2>\r\n  <button type=\"button\" class=\"tk-meeting-spaces__create-button\" (click)=\"onCreateMeetingSpace()\">\r\n    <mat-icon class=\"tk-meeting-spaces__create-icon\">add</mat-icon>\r\n    Create meeting space\r\n  </button>\r\n</div>\r\n\r\n<div class=\"tk-meeting-spaces__toolbar\">\r\n  <div class=\"tk-meeting-spaces__search\">\r\n    <mat-icon class=\"tk-meeting-spaces__search-icon\">search</mat-icon>\r\n    <input\r\n      type=\"text\"\r\n      class=\"tk-meeting-spaces__search-input\"\r\n      placeholder=\"Search by Name, URI or Meeting ID\"\r\n      [(ngModel)]=\"searchTerm\">\r\n  </div>\r\n\r\n  <button type=\"button\" class=\"tk-meeting-spaces__filter-button\" (click)=\"toggleFilterPanel()\">\r\n    <img class=\"tk-meeting-spaces__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n    Filter\r\n  </button>\r\n\r\n  <span class=\"tk-meeting-spaces__count\">{{ filteredMeetingSpaces.length }} spaces</span>\r\n</div>\r\n\r\n<table class=\"tk-meeting-spaces__table\">\r\n  <thead>\r\n    <tr>\r\n      <th>Meeting Name</th>\r\n      <th>URI</th>\r\n      <th>Meeting ID</th>\r\n      <th>Participants</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let space of filteredMeetingSpaces\">\r\n      <td class=\"tk-meeting-spaces__name-cell\">\r\n        <a href=\"javascript:void(0)\" class=\"tk-meeting-spaces__name-link\" (click)=\"onEditMeetingSpace(space)\">{{ space.name }}</a>\r\n        <span *ngIf=\"space.managed\" class=\"tk-meeting-spaces__badge\">Managed</span>\r\n      </td>\r\n      <td>{{ space.uri }}</td>\r\n      <td>{{ space.meetingId }}</td>\r\n      <td>{{ space.participants }}</td>\r\n    </tr>\r\n    <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n      <td colspan=\"4\" class=\"tk-meeting-spaces__empty\">No meeting spaces match your search.</td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<div class=\"tk-meeting-spaces__footer\">\r\n  <span class=\"tk-meeting-spaces__footer-text\">\r\n    Showing {{ filteredMeetingSpaces.length ? 1 : 0 }}-{{ filteredMeetingSpaces.length }} of {{ meetingSpaces.length }}\r\n  </span>\r\n  <div class=\"tk-meeting-spaces__pagination\">\r\n    <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Previous</button>\r\n    <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Next</button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  class=\"tk-meeting-spaces__filter-backdrop\"\r\n  *ngIf=\"isFilterPanelOpen\"\r\n  (click)=\"closeFilterPanel()\">\r\n</div>\r\n\r\n<aside class=\"tk-meeting-spaces__filter-panel\" [class.tk-meeting-spaces__filter-panel--open]=\"isFilterPanelOpen\">\r\n  <div class=\"tk-meeting-spaces__filter-panel-header\">\r\n    <h3 class=\"tk-meeting-spaces__filter-panel-title\">Filter meeting spaces</h3>\r\n    <button\r\n      type=\"button\"\r\n      class=\"tk-meeting-spaces__filter-panel-close\"\r\n      aria-label=\"Close filter panel\"\r\n      (click)=\"closeFilterPanel()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"tk-meeting-spaces__filter-panel-body\">\r\n    <div class=\"tk-meeting-spaces__filter-field\">\r\n      <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-owner\">Owner</label>\r\n      <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n        <select id=\"tk-meeting-spaces-filter-owner\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.owner\">\r\n          <option value=\"\">All owners</option>\r\n          <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n        </select>\r\n        <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"tk-meeting-spaces__filter-field\">\r\n      <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-cluster\">Cluster</label>\r\n      <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n        <select id=\"tk-meeting-spaces-filter-cluster\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n          <option value=\"\">All clusters</option>\r\n          <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n        </select>\r\n        <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tk-meeting-spaces__filter-panel-footer\">\r\n    <button type=\"button\" class=\"tk-meeting-spaces__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n    <button type=\"button\" class=\"tk-meeting-spaces__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n  </div>\r\n</aside>\r\n", styles: [":host{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-spaces__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-spaces__title{margin:0;font-size:1.125rem;font-weight:600}.tk-meeting-spaces__create-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-spaces__create-button:hover{background:#222}.tk-meeting-spaces__create-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-meeting-spaces__toolbar{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0 1rem}.tk-meeting-spaces__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-meeting-spaces__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meeting-spaces__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-spaces__search-input::placeholder{color:#0006}.tk-meeting-spaces__filter-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-button:hover{background:rgba(0,0,0,.03)}.tk-meeting-spaces__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-meeting-spaces__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-meeting-spaces__table{width:100%;border-collapse:collapse;font-family:Inter,sans-serif}.tk-meeting-spaces__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-meeting-spaces__table tbody tr:hover td{background:#ededed}.tk-meeting-spaces__name-cell{display:flex;align-items:center;gap:.5rem}.tk-meeting-spaces__name-link{color:#0353a8;font-weight:500;text-decoration:none}.tk-meeting-spaces__name-link:hover{text-decoration:underline}.tk-meeting-spaces__badge{padding:.125rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:500;color:#0009;white-space:nowrap}.tk-meeting-spaces__empty{padding:1.5rem;text-align:center;color:#0009}.tk-meeting-spaces__footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-meeting-spaces__pagination{display:flex;gap:1rem}.tk-meeting-spaces__pagination-button{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;color:#0009;cursor:pointer}.tk-meeting-spaces__pagination-button:disabled{color:#0000004d;cursor:default}.tk-meeting-spaces__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-meeting-spaces__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-meeting-spaces__filter-panel--open{transform:translate(0)}.tk-meeting-spaces__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-meeting-spaces__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-meeting-spaces__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-spaces__filter-panel-close:hover{color:#000000f2}.tk-meeting-spaces__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-meeting-spaces__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-meeting-spaces__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-spaces__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-spaces__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-select:focus{outline:none;border-color:#0006}.tk-meeting-spaces__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-meeting-spaces__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem}.tk-meeting-spaces__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-meeting-spaces__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-meeting-spaces__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-meeting-spaces__filter-done:hover{background-color:oklch(95.5% .005 260)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+MeetingSpacesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingSpacesComponent, selector: "tk-meeting-spaces", outputs: { createMeetingSpace: "createMeetingSpace", editMeetingSpace: "editMeetingSpace" }, ngImport: i0, template: "<div class=\"tk-meeting-spaces__header\">\r\n  <h2 class=\"tk-meeting-spaces__title\">Meeting Spaces</h2>\r\n  <button type=\"button\" class=\"tk-meeting-spaces__create-button\" (click)=\"onCreateMeetingSpace()\">\r\n    <mat-icon class=\"tk-meeting-spaces__create-icon\">add</mat-icon>\r\n    Create meeting space\r\n  </button>\r\n</div>\r\n\r\n<div class=\"tk-meeting-spaces__toolbar\">\r\n  <div class=\"tk-meeting-spaces__search\">\r\n    <mat-icon class=\"tk-meeting-spaces__search-icon\">search</mat-icon>\r\n    <input\r\n      type=\"text\"\r\n      class=\"tk-meeting-spaces__search-input\"\r\n      placeholder=\"Search by Name, URI or Meeting ID\"\r\n      [(ngModel)]=\"searchTerm\">\r\n  </div>\r\n\r\n  <button type=\"button\" class=\"tk-meeting-spaces__filter-button\" (click)=\"toggleFilterPanel()\">\r\n    <img class=\"tk-meeting-spaces__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n    Filter\r\n  </button>\r\n\r\n  <span class=\"tk-meeting-spaces__count\">{{ filteredMeetingSpaces.length }} spaces</span>\r\n</div>\r\n\r\n<table class=\"tk-meeting-spaces__table\">\r\n  <thead>\r\n    <tr>\r\n      <th>Meeting Name</th>\r\n      <th>URI</th>\r\n      <th>Meeting ID</th>\r\n      <th>Participants</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let space of filteredMeetingSpaces\">\r\n      <td class=\"tk-meeting-spaces__name-cell\">\r\n        <a href=\"javascript:void(0)\" class=\"tk-meeting-spaces__name-link\" (click)=\"onEditMeetingSpace(space)\">{{ space.name }}</a>\r\n        <span *ngIf=\"space.managed\" class=\"tk-meeting-spaces__badge\">Managed</span>\r\n      </td>\r\n      <td>{{ space.uri }}</td>\r\n      <td>{{ space.meetingId }}</td>\r\n      <td>{{ space.participants }}</td>\r\n    </tr>\r\n    <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n      <td colspan=\"4\" class=\"tk-meeting-spaces__empty\">No meeting spaces match your search.</td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<div class=\"tk-meeting-spaces__footer\">\r\n  <span class=\"tk-meeting-spaces__footer-text\">\r\n    Showing {{ filteredMeetingSpaces.length ? 1 : 0 }}-{{ filteredMeetingSpaces.length }} of {{ meetingSpaces.length }}\r\n  </span>\r\n  <div class=\"tk-meeting-spaces__pagination\">\r\n    <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Previous</button>\r\n    <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Next</button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  class=\"tk-meeting-spaces__filter-backdrop\"\r\n  *ngIf=\"isFilterPanelOpen\"\r\n  (click)=\"closeFilterPanel()\">\r\n</div>\r\n\r\n<aside class=\"tk-meeting-spaces__filter-panel\" [class.tk-meeting-spaces__filter-panel--open]=\"isFilterPanelOpen\">\r\n  <div class=\"tk-meeting-spaces__filter-panel-header\">\r\n    <h3 class=\"tk-meeting-spaces__filter-panel-title\">Filter meeting spaces</h3>\r\n    <button\r\n      type=\"button\"\r\n      class=\"tk-meeting-spaces__filter-panel-close\"\r\n      aria-label=\"Close filter panel\"\r\n      (click)=\"closeFilterPanel()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"tk-meeting-spaces__filter-panel-body\">\r\n    <div class=\"tk-meeting-spaces__filter-field\">\r\n      <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-owner\">Owner</label>\r\n      <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n        <select id=\"tk-meeting-spaces-filter-owner\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.owner\">\r\n          <option value=\"\">All owners</option>\r\n          <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n        </select>\r\n        <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"tk-meeting-spaces__filter-field\">\r\n      <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-cluster\">Cluster</label>\r\n      <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n        <select id=\"tk-meeting-spaces-filter-cluster\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n          <option value=\"\">All clusters</option>\r\n          <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n        </select>\r\n        <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tk-meeting-spaces__filter-panel-footer\">\r\n    <button type=\"button\" class=\"tk-meeting-spaces__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n    <button type=\"button\" class=\"tk-meeting-spaces__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n  </div>\r\n</aside>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-spaces__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-spaces__title{margin:0;font-size:1.125rem;font-weight:600}.tk-meeting-spaces__create-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-spaces__create-button:hover{background:#222}.tk-meeting-spaces__create-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-meeting-spaces__toolbar{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0 1rem}.tk-meeting-spaces__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-meeting-spaces__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meeting-spaces__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-spaces__search-input::placeholder{color:#0006}.tk-meeting-spaces__filter-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-button:hover{background:rgba(0,0,0,.03)}.tk-meeting-spaces__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-meeting-spaces__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-meeting-spaces__table{width:100%;border-collapse:collapse;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-meeting-spaces__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-meeting-spaces__table tbody tr:hover td{background:#ededed}.tk-meeting-spaces__name-cell{display:flex;align-items:center;gap:.5rem}.tk-meeting-spaces__name-link{color:#0353a8;font-weight:500;text-decoration:none}.tk-meeting-spaces__name-link:hover{text-decoration:underline}.tk-meeting-spaces__badge{padding:.125rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:500;color:#0009;white-space:nowrap}.tk-meeting-spaces__empty{padding:1.5rem;text-align:center;color:#0009}.tk-meeting-spaces__footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-meeting-spaces__pagination{display:flex;gap:1rem}.tk-meeting-spaces__pagination-button{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;color:#0009;cursor:pointer}.tk-meeting-spaces__pagination-button:disabled{color:#0000004d;cursor:default}.tk-meeting-spaces__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-meeting-spaces__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-meeting-spaces__filter-panel--open{transform:translate(0)}.tk-meeting-spaces__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-meeting-spaces__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-meeting-spaces__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-spaces__filter-panel-close:hover{color:#000000f2}.tk-meeting-spaces__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-meeting-spaces__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-meeting-spaces__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-spaces__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-spaces__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-select:focus{outline:none;border-color:#0006}.tk-meeting-spaces__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-meeting-spaces__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem}.tk-meeting-spaces__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-meeting-spaces__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-meeting-spaces__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-meeting-spaces__filter-done:hover{background-color:oklch(95.5% .005 260)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingSpacesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-meeting-spaces', template: "<div class=\"tk-meeting-spaces__header\">\r\n  <h2 class=\"tk-meeting-spaces__title\">Meeting Spaces</h2>\r\n  <button type=\"button\" class=\"tk-meeting-spaces__create-button\" (click)=\"onCreateMeetingSpace()\">\r\n    <mat-icon class=\"tk-meeting-spaces__create-icon\">add</mat-icon>\r\n    Create meeting space\r\n  </button>\r\n</div>\r\n\r\n<div class=\"tk-meeting-spaces__toolbar\">\r\n  <div class=\"tk-meeting-spaces__search\">\r\n    <mat-icon class=\"tk-meeting-spaces__search-icon\">search</mat-icon>\r\n    <input\r\n      type=\"text\"\r\n      class=\"tk-meeting-spaces__search-input\"\r\n      placeholder=\"Search by Name, URI or Meeting ID\"\r\n      [(ngModel)]=\"searchTerm\">\r\n  </div>\r\n\r\n  <button type=\"button\" class=\"tk-meeting-spaces__filter-button\" (click)=\"toggleFilterPanel()\">\r\n    <img class=\"tk-meeting-spaces__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n    Filter\r\n  </button>\r\n\r\n  <span class=\"tk-meeting-spaces__count\">{{ filteredMeetingSpaces.length }} spaces</span>\r\n</div>\r\n\r\n<table class=\"tk-meeting-spaces__table\">\r\n  <thead>\r\n    <tr>\r\n      <th>Meeting Name</th>\r\n      <th>URI</th>\r\n      <th>Meeting ID</th>\r\n      <th>Participants</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let space of filteredMeetingSpaces\">\r\n      <td class=\"tk-meeting-spaces__name-cell\">\r\n        <a href=\"javascript:void(0)\" class=\"tk-meeting-spaces__name-link\" (click)=\"onEditMeetingSpace(space)\">{{ space.name }}</a>\r\n        <span *ngIf=\"space.managed\" class=\"tk-meeting-spaces__badge\">Managed</span>\r\n      </td>\r\n      <td>{{ space.uri }}</td>\r\n      <td>{{ space.meetingId }}</td>\r\n      <td>{{ space.participants }}</td>\r\n    </tr>\r\n    <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n      <td colspan=\"4\" class=\"tk-meeting-spaces__empty\">No meeting spaces match your search.</td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<div class=\"tk-meeting-spaces__footer\">\r\n  <span class=\"tk-meeting-spaces__footer-text\">\r\n    Showing {{ filteredMeetingSpaces.length ? 1 : 0 }}-{{ filteredMeetingSpaces.length }} of {{ meetingSpaces.length }}\r\n  </span>\r\n  <div class=\"tk-meeting-spaces__pagination\">\r\n    <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Previous</button>\r\n    <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Next</button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  class=\"tk-meeting-spaces__filter-backdrop\"\r\n  *ngIf=\"isFilterPanelOpen\"\r\n  (click)=\"closeFilterPanel()\">\r\n</div>\r\n\r\n<aside class=\"tk-meeting-spaces__filter-panel\" [class.tk-meeting-spaces__filter-panel--open]=\"isFilterPanelOpen\">\r\n  <div class=\"tk-meeting-spaces__filter-panel-header\">\r\n    <h3 class=\"tk-meeting-spaces__filter-panel-title\">Filter meeting spaces</h3>\r\n    <button\r\n      type=\"button\"\r\n      class=\"tk-meeting-spaces__filter-panel-close\"\r\n      aria-label=\"Close filter panel\"\r\n      (click)=\"closeFilterPanel()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"tk-meeting-spaces__filter-panel-body\">\r\n    <div class=\"tk-meeting-spaces__filter-field\">\r\n      <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-owner\">Owner</label>\r\n      <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n        <select id=\"tk-meeting-spaces-filter-owner\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.owner\">\r\n          <option value=\"\">All owners</option>\r\n          <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n        </select>\r\n        <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"tk-meeting-spaces__filter-field\">\r\n      <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-cluster\">Cluster</label>\r\n      <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n        <select id=\"tk-meeting-spaces-filter-cluster\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n          <option value=\"\">All clusters</option>\r\n          <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n        </select>\r\n        <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tk-meeting-spaces__filter-panel-footer\">\r\n    <button type=\"button\" class=\"tk-meeting-spaces__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n    <button type=\"button\" class=\"tk-meeting-spaces__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n  </div>\r\n</aside>\r\n", styles: [":host{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-spaces__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-spaces__title{margin:0;font-size:1.125rem;font-weight:600}.tk-meeting-spaces__create-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-spaces__create-button:hover{background:#222}.tk-meeting-spaces__create-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-meeting-spaces__toolbar{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0 1rem}.tk-meeting-spaces__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-meeting-spaces__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meeting-spaces__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-spaces__search-input::placeholder{color:#0006}.tk-meeting-spaces__filter-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-button:hover{background:rgba(0,0,0,.03)}.tk-meeting-spaces__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-meeting-spaces__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-meeting-spaces__table{width:100%;border-collapse:collapse;font-family:Inter,sans-serif}.tk-meeting-spaces__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-meeting-spaces__table tbody tr:hover td{background:#ededed}.tk-meeting-spaces__name-cell{display:flex;align-items:center;gap:.5rem}.tk-meeting-spaces__name-link{color:#0353a8;font-weight:500;text-decoration:none}.tk-meeting-spaces__name-link:hover{text-decoration:underline}.tk-meeting-spaces__badge{padding:.125rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:500;color:#0009;white-space:nowrap}.tk-meeting-spaces__empty{padding:1.5rem;text-align:center;color:#0009}.tk-meeting-spaces__footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-meeting-spaces__pagination{display:flex;gap:1rem}.tk-meeting-spaces__pagination-button{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;color:#0009;cursor:pointer}.tk-meeting-spaces__pagination-button:disabled{color:#0000004d;cursor:default}.tk-meeting-spaces__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-meeting-spaces__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-meeting-spaces__filter-panel--open{transform:translate(0)}.tk-meeting-spaces__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-meeting-spaces__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-meeting-spaces__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-spaces__filter-panel-close:hover{color:#000000f2}.tk-meeting-spaces__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-meeting-spaces__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-meeting-spaces__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-spaces__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-spaces__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-select:focus{outline:none;border-color:#0006}.tk-meeting-spaces__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-meeting-spaces__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem}.tk-meeting-spaces__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-meeting-spaces__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-meeting-spaces__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-meeting-spaces__filter-done:hover{background-color:oklch(95.5% .005 260)}\n"] }]
+            args: [{ selector: 'tk-meeting-spaces', template: "<div class=\"tk-meeting-spaces__header\">\r\n  <h2 class=\"tk-meeting-spaces__title\">Meeting Spaces</h2>\r\n  <button type=\"button\" class=\"tk-meeting-spaces__create-button\" (click)=\"onCreateMeetingSpace()\">\r\n    <mat-icon class=\"tk-meeting-spaces__create-icon\">add</mat-icon>\r\n    Create meeting space\r\n  </button>\r\n</div>\r\n\r\n<div class=\"tk-meeting-spaces__toolbar\">\r\n  <div class=\"tk-meeting-spaces__search\">\r\n    <mat-icon class=\"tk-meeting-spaces__search-icon\">search</mat-icon>\r\n    <input\r\n      type=\"text\"\r\n      class=\"tk-meeting-spaces__search-input\"\r\n      placeholder=\"Search by Name, URI or Meeting ID\"\r\n      [(ngModel)]=\"searchTerm\">\r\n  </div>\r\n\r\n  <button type=\"button\" class=\"tk-meeting-spaces__filter-button\" (click)=\"toggleFilterPanel()\">\r\n    <img class=\"tk-meeting-spaces__filter-icon\" src=\"assets/icons/filter-regular.svg\" alt=\"filter_list\" title=\"filter_list\">\r\n    Filter\r\n  </button>\r\n\r\n  <span class=\"tk-meeting-spaces__count\">{{ filteredMeetingSpaces.length }} spaces</span>\r\n</div>\r\n\r\n<table class=\"tk-meeting-spaces__table\">\r\n  <thead>\r\n    <tr>\r\n      <th>Meeting Name</th>\r\n      <th>URI</th>\r\n      <th>Meeting ID</th>\r\n      <th>Participants</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let space of filteredMeetingSpaces\">\r\n      <td class=\"tk-meeting-spaces__name-cell\">\r\n        <a href=\"javascript:void(0)\" class=\"tk-meeting-spaces__name-link\" (click)=\"onEditMeetingSpace(space)\">{{ space.name }}</a>\r\n        <span *ngIf=\"space.managed\" class=\"tk-meeting-spaces__badge\">Managed</span>\r\n      </td>\r\n      <td>{{ space.uri }}</td>\r\n      <td>{{ space.meetingId }}</td>\r\n      <td>{{ space.participants }}</td>\r\n    </tr>\r\n    <tr *ngIf=\"!filteredMeetingSpaces.length\">\r\n      <td colspan=\"4\" class=\"tk-meeting-spaces__empty\">No meeting spaces match your search.</td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<div class=\"tk-meeting-spaces__footer\">\r\n  <span class=\"tk-meeting-spaces__footer-text\">\r\n    Showing {{ filteredMeetingSpaces.length ? 1 : 0 }}-{{ filteredMeetingSpaces.length }} of {{ meetingSpaces.length }}\r\n  </span>\r\n  <div class=\"tk-meeting-spaces__pagination\">\r\n    <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Previous</button>\r\n    <button type=\"button\" class=\"tk-meeting-spaces__pagination-button\" disabled>Next</button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  class=\"tk-meeting-spaces__filter-backdrop\"\r\n  *ngIf=\"isFilterPanelOpen\"\r\n  (click)=\"closeFilterPanel()\">\r\n</div>\r\n\r\n<aside class=\"tk-meeting-spaces__filter-panel\" [class.tk-meeting-spaces__filter-panel--open]=\"isFilterPanelOpen\">\r\n  <div class=\"tk-meeting-spaces__filter-panel-header\">\r\n    <h3 class=\"tk-meeting-spaces__filter-panel-title\">Filter meeting spaces</h3>\r\n    <button\r\n      type=\"button\"\r\n      class=\"tk-meeting-spaces__filter-panel-close\"\r\n      aria-label=\"Close filter panel\"\r\n      (click)=\"closeFilterPanel()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"tk-meeting-spaces__filter-panel-body\">\r\n    <div class=\"tk-meeting-spaces__filter-field\">\r\n      <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-owner\">Owner</label>\r\n      <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n        <select id=\"tk-meeting-spaces-filter-owner\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.owner\">\r\n          <option value=\"\">All owners</option>\r\n          <option *ngFor=\"let owner of owners\" [value]=\"owner\">{{ owner }}</option>\r\n        </select>\r\n        <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"tk-meeting-spaces__filter-field\">\r\n      <label class=\"tk-meeting-spaces__filter-label\" for=\"tk-meeting-spaces-filter-cluster\">Cluster</label>\r\n      <div class=\"tk-meeting-spaces__filter-select-wrap\">\r\n        <select id=\"tk-meeting-spaces-filter-cluster\" class=\"tk-meeting-spaces__filter-select\" [(ngModel)]=\"filters.cluster\">\r\n          <option value=\"\">All clusters</option>\r\n          <option *ngFor=\"let cluster of clusters\" [value]=\"cluster\">{{ cluster }}</option>\r\n        </select>\r\n        <mat-icon class=\"tk-meeting-spaces__filter-select-icon\">expand_more</mat-icon>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tk-meeting-spaces__filter-panel-footer\">\r\n    <button type=\"button\" class=\"tk-meeting-spaces__filter-clear\" (click)=\"clearFilters()\">Clear all</button>\r\n    <button type=\"button\" class=\"tk-meeting-spaces__filter-done\" (click)=\"closeFilterPanel()\">Done</button>\r\n  </div>\r\n</aside>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meeting-spaces__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tk-meeting-spaces__title{margin:0;font-size:1.125rem;font-weight:600}.tk-meeting-spaces__create-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:#000;color:#fff;border:none;border-radius:6.25rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer}.tk-meeting-spaces__create-button:hover{background:#222}.tk-meeting-spaces__create-icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.tk-meeting-spaces__toolbar{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0 1rem}.tk-meeting-spaces__search{display:flex;align-items:center;gap:.5rem;flex:1;max-width:22rem;padding:.5rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px}.tk-meeting-spaces__search-icon{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meeting-spaces__search-input{flex:1;border:none;outline:none;font-family:inherit;font-size:.8125rem;color:#000000f2}.tk-meeting-spaces__search-input::placeholder{color:#0006}.tk-meeting-spaces__filter-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;font-weight:500;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-button:hover{background:rgba(0,0,0,.03)}.tk-meeting-spaces__filter-icon{font-size:1rem;height:1rem;width:1rem;opacity:.6}.tk-meeting-spaces__count{margin-left:auto;font-size:.8125rem;color:#0009;white-space:nowrap}.tk-meeting-spaces__table{width:100%;border-collapse:collapse;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.tk-meeting-spaces__table th{height:39px;padding:.5rem 1.5rem .5rem .75rem;background-color:#ededed;text-align:start;font-size:.75rem;font-weight:500;color:#000000b3;word-break:break-all;max-inline-size:100%;cursor:pointer}.tk-meeting-spaces__table th:hover{background-color:#dedede}.tk-meeting-spaces__table td{height:49px;padding:.5rem 1.5rem .5rem .75rem;box-shadow:inset 0 -1px #0003;background-color:#fff;text-align:start;font-size:.875rem;color:#000000f2;word-break:break-all;cursor:pointer;transition:background-color .2s,box-shadow .2s}.tk-meeting-spaces__table tbody tr:hover td{background:#ededed}.tk-meeting-spaces__name-cell{display:flex;align-items:center;gap:.5rem}.tk-meeting-spaces__name-link{color:#0353a8;font-weight:500;text-decoration:none}.tk-meeting-spaces__name-link:hover{text-decoration:underline}.tk-meeting-spaces__badge{padding:.125rem .5rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.6875rem;font-weight:500;color:#0009;white-space:nowrap}.tk-meeting-spaces__empty{padding:1.5rem;text-align:center;color:#0009}.tk-meeting-spaces__footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;font-size:.8125rem;color:#0009}.tk-meeting-spaces__pagination{display:flex;gap:1rem}.tk-meeting-spaces__pagination-button{background:none;border:none;padding:0;font-family:inherit;font-size:.8125rem;color:#0009;cursor:pointer}.tk-meeting-spaces__pagination-button:disabled{color:#0000004d;cursor:default}.tk-meeting-spaces__filter-backdrop{position:fixed;inset:0;z-index:1000;background-color:oklch(18% .01 260/20%)}.tk-meeting-spaces__filter-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;width:22rem;max-width:100vw;background:#fff;border-left:1px solid rgba(0,0,0,.12);box-shadow:-4px 0 16px #00000014;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;transform:translate(100%);transition:transform .1s ease;will-change:transform}.tk-meeting-spaces__filter-panel--open{transform:translate(0)}.tk-meeting-spaces__filter-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.12)}.tk-meeting-spaces__filter-panel-title{margin:0;font-size:1rem;font-weight:600;color:#000000f2}.tk-meeting-spaces__filter-panel-close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:#0009;cursor:pointer}.tk-meeting-spaces__filter-panel-close:hover{color:#000000f2}.tk-meeting-spaces__filter-panel-body{padding:1.5rem 1.5rem 0;overflow-y:auto}.tk-meeting-spaces__filter-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.tk-meeting-spaces__filter-label{font-size:.8125rem;font-weight:500;color:#000000f2}.tk-meeting-spaces__filter-select-wrap{position:relative;display:flex;align-items:center}.tk-meeting-spaces__filter-select{width:100%;appearance:none;padding:.625rem 2rem .625rem .75rem;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;font-family:inherit;font-size:.8125rem;color:#000000f2;cursor:pointer}.tk-meeting-spaces__filter-select:focus{outline:none;border-color:#0006}.tk-meeting-spaces__filter-select-icon{position:absolute;right:.5rem;font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006;pointer-events:none}.tk-meeting-spaces__filter-panel-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem}.tk-meeting-spaces__filter-clear{background:none;border:none;padding:0;font-family:inherit;font-size:.813rem;font-weight:500;color:#000000f2;cursor:pointer;padding-inline:.75rem;height:2rem;border-radius:6px}.tk-meeting-spaces__filter-clear:hover{background-color:oklch(95.5% .005 260)}.tk-meeting-spaces__filter-done{background-color:#fff;border-radius:6px;font-weight:500;font-family:inherit;font-size:.813rem;cursor:pointer;border:1px solid oklch(92% .003 260);padding-inline:.75rem;height:2rem}.tk-meeting-spaces__filter-done:hover{background-color:oklch(95.5% .005 260)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MeetingSpacesService }]; }, propDecorators: { createMeetingSpace: [{
                 type: Output
             }], editMeetingSpace: [{

package/esm2020/meetings/src/meetings.component.mjs CHANGED Viewed

@@ -47,10 +47,10 @@ export class MeetingsComponent {
     }
 }
 MeetingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingsComponent, deps: [{ token: i1.APIService }], target: i0.ɵɵFactoryTarget.Component });
-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: [".tk-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meetings__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1.25rem}.tk-meetings__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meetings__title{margin:0;font-size:1.5rem;font-weight:600;color:#000000f2}.tk-meetings__subtitle{margin:0;font-size:.875rem;color:#0009}.tk-meetings__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meetings__status--warning .tk-meetings__status-dot{background:#b5860b}.tk-meetings__status--critical .tk-meetings__status-dot{background:#c73636}.tk-meetings__status-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meetings__tabs ::ng-deep .mat-tab-header{border-bottom:1px solid rgba(0,0,0,.12)}.tk-meetings__tabs ::ng-deep .mat-tab-label{height:auto;min-width:auto;padding:0 0 .75rem;margin-right:1.5rem;opacity:1;font-size:.875rem;font-weight:500;color:#0009}.tk-meetings__tabs ::ng-deep .mat-tab-label.mat-tab-label-active{color:#000000f2}.tk-meetings__tabs ::ng-deep .mat-tab-labels{gap:0}.tk-meetings__tabs ::ng-deep .mat-ink-bar{background-color:#000;height:2px}.tk-meetings__tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;margin-left:.375rem;padding:0 .375rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.75rem;font-weight:500;color:#000000f2}.tk-meetings__tab-content{padding:1.5rem 0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4.MeetingSpacesComponent, selector: "tk-meeting-spaces", outputs: ["createMeetingSpace", "editMeetingSpace"] }, { kind: "component", type: i5.MeetingSpaceComponent, selector: "tk-meeting-space", inputs: ["mode", "meetingSpaceId"], outputs: ["back", "saved"] }, { kind: "component", type: i6.LiveMeetingsComponent, selector: "tk-live-meetings", outputs: ["openLiveMeeting"] }, { kind: "component", type: i7.LiveMeetingComponent, selector: "tk-live-meeting", inputs: ["meetingId"], outputs: ["back"] }] });
+MeetingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MeetingsComponent, selector: "tk-meetings", inputs: { host: "host", token: "token", environmentStatusLabel: "environmentStatusLabel", environmentStatusState: "environmentStatusState", liveCount: "liveCount" }, ngImport: i0, template: "<div class=\"tk-meetings\">\r\n  <ng-container *ngIf=\"view === 'list'\">\r\n    <header class=\"tk-meetings__header\">\r\n      <div class=\"tk-meetings__heading\">\r\n        <h1 class=\"tk-meetings__title\">Meetings</h1>\r\n        <!-- <p class=\"tk-meetings__subtitle\">Configure meeting spaces and monitor everything happening live across your environment.</p> -->\r\n      </div>\r\n    </header>\r\n\r\n    <mat-tab-group disableRipple class=\"tk-meetings__tabs\">\r\n      <mat-tab label=\"Meetings\">\r\n        <div class=\"tk-meetings__tab-content\">\r\n          <tk-meeting-spaces\r\n            (createMeetingSpace)=\"onCreateMeetingSpace()\"\r\n            (editMeetingSpace)=\"onEditMeetingSpace($event)\">\r\n          </tk-meeting-spaces>\r\n        </div>\r\n      </mat-tab>\r\n\r\n      <mat-tab>\r\n        <ng-template mat-tab-label>\r\n          <span>Live</span>\r\n          <span class=\"tk-meetings__tab-count\">{{ liveCount }}</span>\r\n        </ng-template>\r\n        <div class=\"tk-meetings__tab-content\">\r\n          <tk-live-meetings (openLiveMeeting)=\"onOpenLiveMeeting($event)\"></tk-live-meetings>\r\n        </div>\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n  </ng-container>\r\n\r\n  <tk-meeting-space\r\n    *ngIf=\"view === 'meeting-space'\"\r\n    [mode]=\"meetingSpaceMode\"\r\n    [meetingSpaceId]=\"selectedMeetingSpaceId\"\r\n    (back)=\"onMeetingSpaceBack()\"\r\n    (saved)=\"onMeetingSpaceSaved($event)\">\r\n  </tk-meeting-space>\r\n\r\n  <tk-live-meeting\r\n    *ngIf=\"view === 'live-meeting'\"\r\n    [meetingId]=\"selectedLiveMeetingId\"\r\n    (back)=\"onLiveMeetingBack()\">\r\n  </tk-live-meeting>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meetings__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1.25rem}.tk-meetings__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meetings__title{margin:0;font-size:1.5rem;font-weight:600;color:#000000f2}.tk-meetings__subtitle{margin:0;font-size:.875rem;color:#0009}.tk-meetings__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meetings__status--warning .tk-meetings__status-dot{background:#b5860b}.tk-meetings__status--critical .tk-meetings__status-dot{background:#c73636}.tk-meetings__status-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meetings__tabs ::ng-deep .mat-tab-header{border-bottom:1px solid rgba(0,0,0,.12)}.tk-meetings__tabs ::ng-deep .mat-tab-label{height:auto;min-width:auto;padding:0 0 .75rem;margin-right:1.5rem;opacity:1;font-size:.875rem;font-weight:500;color:#0009}.tk-meetings__tabs ::ng-deep .mat-tab-label.mat-tab-label-active{color:#000000f2}.tk-meetings__tabs ::ng-deep .mat-tab-labels{gap:0}.tk-meetings__tabs ::ng-deep .mat-ink-bar{background-color:#000;height:2px}.tk-meetings__tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;margin-left:.375rem;padding:0 .375rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.75rem;font-weight:500;color:#000000f2}.tk-meetings__tab-content{padding:1.5rem 0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4.MeetingSpacesComponent, selector: "tk-meeting-spaces", outputs: ["createMeetingSpace", "editMeetingSpace"] }, { kind: "component", type: i5.MeetingSpaceComponent, selector: "tk-meeting-space", inputs: ["mode", "meetingSpaceId"], outputs: ["back", "saved"] }, { kind: "component", type: i6.LiveMeetingsComponent, selector: "tk-live-meetings", outputs: ["openLiveMeeting"] }, { kind: "component", type: i7.LiveMeetingComponent, selector: "tk-live-meeting", inputs: ["meetingId"], outputs: ["back"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MeetingsComponent, decorators: [{
             type: Component,
-            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: [".tk-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meetings__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1.25rem}.tk-meetings__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meetings__title{margin:0;font-size:1.5rem;font-weight:600;color:#000000f2}.tk-meetings__subtitle{margin:0;font-size:.875rem;color:#0009}.tk-meetings__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meetings__status--warning .tk-meetings__status-dot{background:#b5860b}.tk-meetings__status--critical .tk-meetings__status-dot{background:#c73636}.tk-meetings__status-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meetings__tabs ::ng-deep .mat-tab-header{border-bottom:1px solid rgba(0,0,0,.12)}.tk-meetings__tabs ::ng-deep .mat-tab-label{height:auto;min-width:auto;padding:0 0 .75rem;margin-right:1.5rem;opacity:1;font-size:.875rem;font-weight:500;color:#0009}.tk-meetings__tabs ::ng-deep .mat-tab-label.mat-tab-label-active{color:#000000f2}.tk-meetings__tabs ::ng-deep .mat-tab-labels{gap:0}.tk-meetings__tabs ::ng-deep .mat-ink-bar{background-color:#000;height:2px}.tk-meetings__tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;margin-left:.375rem;padding:0 .375rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.75rem;font-weight:500;color:#000000f2}.tk-meetings__tab-content{padding:1.5rem 0}\n"] }]
+            args: [{ selector: 'tk-meetings', template: "<div class=\"tk-meetings\">\r\n  <ng-container *ngIf=\"view === 'list'\">\r\n    <header class=\"tk-meetings__header\">\r\n      <div class=\"tk-meetings__heading\">\r\n        <h1 class=\"tk-meetings__title\">Meetings</h1>\r\n        <!-- <p class=\"tk-meetings__subtitle\">Configure meeting spaces and monitor everything happening live across your environment.</p> -->\r\n      </div>\r\n    </header>\r\n\r\n    <mat-tab-group disableRipple class=\"tk-meetings__tabs\">\r\n      <mat-tab label=\"Meetings\">\r\n        <div class=\"tk-meetings__tab-content\">\r\n          <tk-meeting-spaces\r\n            (createMeetingSpace)=\"onCreateMeetingSpace()\"\r\n            (editMeetingSpace)=\"onEditMeetingSpace($event)\">\r\n          </tk-meeting-spaces>\r\n        </div>\r\n      </mat-tab>\r\n\r\n      <mat-tab>\r\n        <ng-template mat-tab-label>\r\n          <span>Live</span>\r\n          <span class=\"tk-meetings__tab-count\">{{ liveCount }}</span>\r\n        </ng-template>\r\n        <div class=\"tk-meetings__tab-content\">\r\n          <tk-live-meetings (openLiveMeeting)=\"onOpenLiveMeeting($event)\"></tk-live-meetings>\r\n        </div>\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n  </ng-container>\r\n\r\n  <tk-meeting-space\r\n    *ngIf=\"view === 'meeting-space'\"\r\n    [mode]=\"meetingSpaceMode\"\r\n    [meetingSpaceId]=\"selectedMeetingSpaceId\"\r\n    (back)=\"onMeetingSpaceBack()\"\r\n    (saved)=\"onMeetingSpaceSaved($event)\">\r\n  </tk-meeting-space>\r\n\r\n  <tk-live-meeting\r\n    *ngIf=\"view === 'live-meeting'\"\r\n    [meetingId]=\"selectedLiveMeetingId\"\r\n    (back)=\"onLiveMeetingBack()\">\r\n  </tk-live-meeting>\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.tk-meetings{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;color:#000000f2}.tk-meetings__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1.25rem}.tk-meetings__heading{display:flex;flex-direction:column;gap:.25rem}.tk-meetings__title{margin:0;font-size:1.5rem;font-weight:600;color:#000000f2}.tk-meetings__subtitle{margin:0;font-size:.875rem;color:#0009}.tk-meetings__status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#1d805f}.tk-meetings__status--warning .tk-meetings__status-dot{background:#b5860b}.tk-meetings__status--critical .tk-meetings__status-dot{background:#c73636}.tk-meetings__status-chevron{font-size:1.125rem;height:1.125rem;width:1.125rem;color:#0006}.tk-meetings__tabs ::ng-deep .mat-tab-header{border-bottom:1px solid rgba(0,0,0,.12)}.tk-meetings__tabs ::ng-deep .mat-tab-label{height:auto;min-width:auto;padding:0 0 .75rem;margin-right:1.5rem;opacity:1;font-size:.875rem;font-weight:500;color:#0009}.tk-meetings__tabs ::ng-deep .mat-tab-label.mat-tab-label-active{color:#000000f2}.tk-meetings__tabs ::ng-deep .mat-tab-labels{gap:0}.tk-meetings__tabs ::ng-deep .mat-ink-bar{background-color:#000;height:2px}.tk-meetings__tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;margin-left:.375rem;padding:0 .375rem;border-radius:999px;background:rgba(0,0,0,.06);font-size:.75rem;font-weight:500;color:#000000f2}.tk-meetings__tab-content{padding:1.5rem 0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.APIService }]; }, propDecorators: { host: [{
                 type: Input
             }], token: [{