ud-components 0.5.20 → 0.5.22

package/fesm2022/ud-components.mjs

@@ -2585,7 +2585,7 @@ class ModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ModalComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1$4.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ModalComponent, isStandalone: true, selector: "ud-modal", inputs: { title: "title", eyebrow: "eyebrow", lede: "lede", bodyText: "bodyText", showClose: "showClose", showFooter: "showFooter", confirmLabel: "confirmLabel", cancelLabel: "cancelLabel", confirmDisabled: "confirmDisabled" }, outputs: { confirm: "confirm", cancel: "cancel" }, ngImport: i0, template: "<div class=\"ud-modal-shell\">\n  <header class=\"ud-modal-header\">\n    @if (eyebrow) {\n      <p class=\"ud-modal-eyebrow\">{{ eyebrow | translate | capitalize }}</p>\n    }\n    @if (title) {\n      <h3 class=\"ud-modal-title\">{{ title | translate | capitalize }}</h3>\n    }\n    @if (lede) {\n      <p class=\"ud-modal-lede\">{{ lede | translate | capitalize }}</p>\n    }\n  </header>\n\n  <div class=\"ud-modal-content\" mat-dialog-content>\n    @if (pictureUrls && currentPictureIndex != undefined) {\n      <div class=\"image-container\">\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\">keyboard_arrow_left</mat-icon>\n        <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\">keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"image-footer\">\n        {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }} {{ pictureUrls.length }}\n      </div>\n    } @else if (form) {\n      <form [formGroup]=\"form\">\n        <div class=\"modal-form-fields\">\n          @for (formType of data.forms; track formType) {\n            @switch (formType.type) {\n              @case (modalInputType.INPUT) {\n                <ud-text-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [type]=\"formType.inputType ?? 'text'\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.PHONE) {\n                <ud-phone-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.TEXT_AREA) {\n                <ud-textarea\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [minRows]=\"formType.minRows ?? 3\"\n                  [maxRows]=\"formType.maxRows ?? 6\" />\n              }\n              @case (modalInputType.OPTIONS) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"false\" />\n              }\n              @case (modalInputType.MULTI_SELECT) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"true\" />\n              }\n              @case (modalInputType.AUTOCOMPLETE) {\n                <ud-autocomplete\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.DATERANGE) {\n                <ud-date-range-input\n                  [startControlName]=\"'start' + formType.property\"\n                  [endControlName]=\"'end' + formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\" />\n              }\n              @case (modalInputType.DATETIME) {\n                <ud-date-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [min]=\"formType.min\"\n                  [max]=\"formType.max\" />\n              }\n              @case (modalInputType.TIME) {\n                <ud-time-picker\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [intervalMinutes]=\"formType.intervalMinutes ?? 30\"\n                  [minHour]=\"formType.minHour\"\n                  [maxHour]=\"formType.maxHour\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.CHIPS) {\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\n                    {{ formType.title | translate | singular | capitalize }}\n                  </mat-label>\n                  <mat-chip-grid #chipGrid [formControlName]=\"formType.property\">\n                    @for (option of formType.availableOptions; track option) {\n                      <mat-chip-row (removed)=\"formType.removeOption(option)\">\n                        {{ option }}\n                        <button matChipRemove>\n                          <mat-icon>cancel</mat-icon>\n                        </button>\n                      </mat-chip-row>\n                    }\n                  </mat-chip-grid>\n                  <input\n                    placeholder=\"New option...\"\n                    [matChipInputFor]=\"chipGrid\"\n                    (matChipInputTokenEnd)=\"formType.addOption($event)\" />\n                </mat-form-field>\n              }\n            }\n          }\n        </div>\n        @if (data.formErrors && form.errors) {\n          <div class=\"ud-modal-form-errors\">\n            @for (key of objectKeys(form.errors); track key) {\n              @if (data.formErrors[key]) {\n                <p class=\"ud-modal-form-error\">\n                  <mat-icon class=\"ud-modal-form-error__icon\">error_outline</mat-icon>\n                  {{ data.formErrors[key] }}\n                </p>\n              }\n            }\n          </div>\n        }\n      </form>\n    } @else if (bodyText) {\n      <p class=\"ud-modal-body-text\">{{ bodyText }}</p>\n    } @else {\n      <ng-content></ng-content>\n    }\n  </div>\n\n  @if (showFooter) {\n    <footer class=\"ud-modal-footer\">\n      @if (data.delete) {\n        <ud-button variant=\"stroked\" color=\"danger\" class=\"ud-modal-footer__delete\" (click)=\"onDelete()\">\n          {{ data.deleteLabel ?? 'Delete' }}\n        </ud-button>\n      }\n      @if (showClose) {\n        <ud-button variant=\"stroked\" color=\"secondary\" (click)=\"close()\">\n          {{ (cancelLabel ?? 'actions.close') | translate | capitalize }}\n        </ud-button>\n      }\n      <ud-button\n        [disabled]=\"!!(form && form.invalid) || confirmDisabled\"\n        (click)=\"onAction()\">\n        {{ (confirmLabel ?? (form ? 'actions.save' : 'actions.ok')) | translate | capitalize }}\n      </ud-button>\n    </footer>\n  }\n</div>\n", styles: [".ud-modal-shell{display:flex;flex-direction:column;overflow:hidden;min-width:360px;width:100%}.ud-modal-header{position:relative;padding:28px 28px 18px;overflow:hidden}.ud-modal-header:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(27,37,53,.1),transparent 60%),radial-gradient(circle at 85% 10%,rgba(58,74,102,.07),transparent 55%);pointer-events:none}.ud-modal-eyebrow{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1b2535}.ud-modal-title{margin:0;font-size:22px;line-height:1.2;font-weight:600;color:#2a3548;letter-spacing:-.01em}.ud-modal-lede{margin:8px 0 0;color:#6b7585;font-size:13.5px;line-height:1.5;max-width:40ch}.ud-modal-content{padding:4px 28px 12px;max-height:60vh;overflow-y:auto}.ud-modal-content.mat-mdc-dialog-content{padding:4px 28px 12px;margin:0;max-height:60vh}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px}ud-text-input,ud-textarea,ud-multi-select,ud-autocomplete,ud-date-input,ud-date-range-input,ud-time-picker,ud-phone-input,mat-form-field{display:block;width:100%}.ud-modal-body-text{margin:4px 0;font-size:14px;color:#4a5568;line-height:1.55}.image-container{display:flex;justify-content:space-between;align-items:center}.image-container .arrow-picture-icon{display:flex;justify-content:center;align-items:center;padding:1rem;font-size:2rem;cursor:pointer;background:#1b2535;color:#fff;border-radius:8px;transition:background .15s ease}.image-container .arrow-picture-icon:hover{background:#253347}.image-container img{width:100%;max-width:460px;border-radius:8px}.image-footer{display:flex;justify-content:center;align-items:center;padding:8px 0 0;font-size:13px;color:#6b7585}.ud-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 28px 24px;border-top:1px solid #e2e5ea;background:#fbfbfd}.ud-modal-footer__delete{margin-right:auto}.ud-modal-form-errors{margin-top:12px}.ud-modal-form-error{display:flex;align-items:center;gap:7px;margin:6px 0 0;padding:8px 11px;border-radius:8px;background:#e5393514;border:1px solid rgba(229,57,53,.22);color:#c62828;font-size:12.5px;font-weight:500;line-height:1.35}.ud-modal-form-error__icon{font-size:16px;width:16px;height:16px;flex-shrink:0}\n"], dependencies: [{ kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: SingularPipe, name: "singular" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: TextInputComponent, selector: "ud-text-input", inputs: ["controlName", "label", "placeholder", "type", "icon", "iconFontSet", "loading", "step", "min", "max", "disabled", "hint", "size", "clearable"] }, { kind: "component", type: TextareaComponent, selector: "ud-textarea", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "minRows", "maxRows", "disabled", "hint"] }, { kind: "component", type: MultiSelectComponent, selector: "ud-multi-select", inputs: ["controlName", "label", "icon", "iconFontSet", "options", "multiple", "maxChipsVisible", "moreText", "loading", "disabled", "hint"] }, { kind: "component", type: AutocompleteComponent, selector: "ud-autocomplete", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "options", "loading", "disabled", "hint", "size"], outputs: ["searchChange"] }, { kind: "component", type: DateInputComponent, selector: "ud-date-input", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "min", "max", "disabled", "hint"] }, { kind: "component", type: DateRangeInputComponent, selector: "ud-date-range-input", inputs: ["startControlName", "endControlName", "label", "icon", "iconFontSet", "startPlaceholder", "endPlaceholder", "min", "max", "disabled", "hint"] }, { kind: "component", type: TimePickerComponent, selector: "ud-time-picker", inputs: ["controlName", "label", "placeholder", "intervalMinutes", "options", "disabled", "hint", "minHour", "maxHour"] }, { kind: "component", type: PhoneInputComponent, selector: "ud-phone-input", inputs: ["controlName", "label", "placeholder", "disabled", "hint", "size"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ModalComponent, isStandalone: true, selector: "ud-modal", inputs: { title: "title", eyebrow: "eyebrow", lede: "lede", bodyText: "bodyText", showClose: "showClose", showFooter: "showFooter", confirmLabel: "confirmLabel", cancelLabel: "cancelLabel", confirmDisabled: "confirmDisabled" }, outputs: { confirm: "confirm", cancel: "cancel" }, ngImport: i0, template: "<div class=\"ud-modal-shell\">\n  <header class=\"ud-modal-header\">\n    @if (eyebrow) {\n      <p class=\"ud-modal-eyebrow\">{{ eyebrow | translate | capitalize }}</p>\n    }\n    @if (title) {\n      <h3 class=\"ud-modal-title\">{{ title | translate | capitalize }}</h3>\n    }\n    @if (lede) {\n      <p class=\"ud-modal-lede\">{{ lede | translate | capitalize }}</p>\n    }\n  </header>\n\n  <div class=\"ud-modal-content\" mat-dialog-content>\n    @if (pictureUrls && currentPictureIndex != undefined) {\n      <div class=\"image-container\">\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\">keyboard_arrow_left</mat-icon>\n        <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\">keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"image-footer\">\n        {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }} {{ pictureUrls.length }}\n      </div>\n    } @else if (form) {\n      <form [formGroup]=\"form\">\n        <div class=\"modal-form-fields\">\n          @for (formType of data.forms; track formType) {\n            @switch (formType.type) {\n              @case (modalInputType.INPUT) {\n                <ud-text-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [type]=\"formType.inputType ?? 'text'\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.PHONE) {\n                <ud-phone-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.TEXT_AREA) {\n                <ud-textarea\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [minRows]=\"formType.minRows ?? 3\"\n                  [maxRows]=\"formType.maxRows ?? 6\" />\n              }\n              @case (modalInputType.OPTIONS) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"false\" />\n              }\n              @case (modalInputType.MULTI_SELECT) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"true\" />\n              }\n              @case (modalInputType.AUTOCOMPLETE) {\n                <ud-autocomplete\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.DATERANGE) {\n                <ud-date-range-input\n                  [startControlName]=\"'start' + formType.property\"\n                  [endControlName]=\"'end' + formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\" />\n              }\n              @case (modalInputType.DATETIME) {\n                <ud-date-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [min]=\"formType.min\"\n                  [max]=\"formType.max\" />\n              }\n              @case (modalInputType.TIME) {\n                <ud-time-picker\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [intervalMinutes]=\"formType.intervalMinutes ?? 30\"\n                  [minHour]=\"formType.minHour\"\n                  [maxHour]=\"formType.maxHour\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.CHIPS) {\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\n                    {{ formType.title | translate | singular | capitalize }}\n                  </mat-label>\n                  <mat-chip-grid #chipGrid [formControlName]=\"formType.property\">\n                    @for (option of formType.availableOptions; track option) {\n                      <mat-chip-row (removed)=\"formType.removeOption(option)\">\n                        {{ option }}\n                        <button matChipRemove>\n                          <mat-icon>cancel</mat-icon>\n                        </button>\n                      </mat-chip-row>\n                    }\n                  </mat-chip-grid>\n                  <input\n                    placeholder=\"New option...\"\n                    [matChipInputFor]=\"chipGrid\"\n                    (matChipInputTokenEnd)=\"formType.addOption($event)\" />\n                </mat-form-field>\n              }\n            }\n          }\n        </div>\n        @if (data.formErrors && form.errors) {\n          <div class=\"ud-modal-form-errors\">\n            @for (key of objectKeys(form.errors); track key) {\n              @if (data.formErrors[key]) {\n                <p class=\"ud-modal-form-error\">\n                  <mat-icon class=\"ud-modal-form-error__icon\">error_outline</mat-icon>\n                  {{ data.formErrors[key] }}\n                </p>\n              }\n            }\n          </div>\n        }\n      </form>\n    } @else if (bodyText) {\n      <p class=\"ud-modal-body-text\">{{ bodyText }}</p>\n    } @else {\n      <ng-content></ng-content>\n    }\n  </div>\n\n  @if (showFooter) {\n    <footer class=\"ud-modal-footer\">\n      @if (data.delete) {\n        <ud-button variant=\"stroked\" color=\"danger\" class=\"ud-modal-footer__delete\" (click)=\"onDelete()\">\n          {{ data.deleteLabel ?? 'Delete' }}\n        </ud-button>\n      }\n      @if (showClose) {\n        <ud-button variant=\"stroked\" color=\"secondary\" (click)=\"close()\">\n          {{ (cancelLabel ?? 'actions.close') | translate | capitalize }}\n        </ud-button>\n      }\n      <ud-button\n        [disabled]=\"!!(form && form.invalid) || confirmDisabled\"\n        (click)=\"onAction()\">\n        {{ (confirmLabel ?? (form ? 'actions.save' : 'actions.ok')) | translate | capitalize }}\n      </ud-button>\n    </footer>\n  }\n</div>\n", styles: [".ud-modal-shell{display:flex;flex-direction:column;overflow:hidden;min-width:360px;width:100%}.ud-modal-header{position:relative;padding:28px 28px 18px;overflow:hidden}.ud-modal-header:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(27,37,53,.1),transparent 60%),radial-gradient(circle at 85% 10%,rgba(58,74,102,.07),transparent 55%);pointer-events:none}.ud-modal-eyebrow{margin:0 0 6px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1b2535}.ud-modal-title{margin:0;font-family:DM Sans,system-ui,sans-serif;font-size:22px;line-height:1.2;font-weight:600;color:#2a3548;letter-spacing:-.01em}.ud-modal-lede{margin:8px 0 0;font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:13.5px;line-height:1.5;max-width:40ch}.ud-modal-content{padding:4px 28px 12px;max-height:60vh;overflow-y:auto}.ud-modal-content.mat-mdc-dialog-content{padding:4px 28px 12px;margin:0;max-height:60vh}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px}ud-text-input,ud-textarea,ud-multi-select,ud-autocomplete,ud-date-input,ud-date-range-input,ud-time-picker,ud-phone-input,mat-form-field{display:block;width:100%}.ud-modal-body-text{margin:4px 0;font-size:14px;color:#4a5568;line-height:1.55}.image-container{display:flex;justify-content:space-between;align-items:center}.image-container .arrow-picture-icon{display:flex;justify-content:center;align-items:center;padding:1rem;font-size:2rem;cursor:pointer;background:#1b2535;color:#fff;border-radius:8px;transition:background .15s ease}.image-container .arrow-picture-icon:hover{background:#253347}.image-container img{width:100%;max-width:460px;border-radius:8px}.image-footer{display:flex;justify-content:center;align-items:center;padding:8px 0 0;font-size:13px;color:#6b7585}.ud-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 28px 24px;border-top:1px solid #e2e5ea;background:#fbfbfd}.ud-modal-footer__delete{margin-right:auto}.ud-modal-form-errors{margin-top:12px}.ud-modal-form-error{display:flex;align-items:center;gap:7px;margin:6px 0 0;padding:8px 11px;border-radius:8px;background:#e5393514;border:1px solid rgba(229,57,53,.22);color:#c62828;font-size:12.5px;font-weight:500;line-height:1.35}.ud-modal-form-error__icon{font-size:16px;width:16px;height:16px;flex-shrink:0}\n"], dependencies: [{ kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: SingularPipe, name: "singular" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: TextInputComponent, selector: "ud-text-input", inputs: ["controlName", "label", "placeholder", "type", "icon", "iconFontSet", "loading", "step", "min", "max", "disabled", "hint", "size", "clearable"] }, { kind: "component", type: TextareaComponent, selector: "ud-textarea", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "minRows", "maxRows", "disabled", "hint"] }, { kind: "component", type: MultiSelectComponent, selector: "ud-multi-select", inputs: ["controlName", "label", "icon", "iconFontSet", "options", "multiple", "maxChipsVisible", "moreText", "loading", "disabled", "hint"] }, { kind: "component", type: AutocompleteComponent, selector: "ud-autocomplete", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "options", "loading", "disabled", "hint", "size"], outputs: ["searchChange"] }, { kind: "component", type: DateInputComponent, selector: "ud-date-input", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "min", "max", "disabled", "hint"] }, { kind: "component", type: DateRangeInputComponent, selector: "ud-date-range-input", inputs: ["startControlName", "endControlName", "label", "icon", "iconFontSet", "startPlaceholder", "endPlaceholder", "min", "max", "disabled", "hint"] }, { kind: "component", type: TimePickerComponent, selector: "ud-time-picker", inputs: ["controlName", "label", "placeholder", "intervalMinutes", "options", "disabled", "hint", "minHour", "maxHour"] }, { kind: "component", type: PhoneInputComponent, selector: "ud-phone-input", inputs: ["controlName", "label", "placeholder", "disabled", "hint", "size"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -2611,7 +2611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         TimePickerComponent,
                         PhoneInputComponent,
                         UdButtonComponent,
-                    ], template: "<div class=\"ud-modal-shell\">\n  <header class=\"ud-modal-header\">\n    @if (eyebrow) {\n      <p class=\"ud-modal-eyebrow\">{{ eyebrow | translate | capitalize }}</p>\n    }\n    @if (title) {\n      <h3 class=\"ud-modal-title\">{{ title | translate | capitalize }}</h3>\n    }\n    @if (lede) {\n      <p class=\"ud-modal-lede\">{{ lede | translate | capitalize }}</p>\n    }\n  </header>\n\n  <div class=\"ud-modal-content\" mat-dialog-content>\n    @if (pictureUrls && currentPictureIndex != undefined) {\n      <div class=\"image-container\">\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\">keyboard_arrow_left</mat-icon>\n        <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\">keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"image-footer\">\n        {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }} {{ pictureUrls.length }}\n      </div>\n    } @else if (form) {\n      <form [formGroup]=\"form\">\n        <div class=\"modal-form-fields\">\n          @for (formType of data.forms; track formType) {\n            @switch (formType.type) {\n              @case (modalInputType.INPUT) {\n                <ud-text-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [type]=\"formType.inputType ?? 'text'\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.PHONE) {\n                <ud-phone-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.TEXT_AREA) {\n                <ud-textarea\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [minRows]=\"formType.minRows ?? 3\"\n                  [maxRows]=\"formType.maxRows ?? 6\" />\n              }\n              @case (modalInputType.OPTIONS) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"false\" />\n              }\n              @case (modalInputType.MULTI_SELECT) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"true\" />\n              }\n              @case (modalInputType.AUTOCOMPLETE) {\n                <ud-autocomplete\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.DATERANGE) {\n                <ud-date-range-input\n                  [startControlName]=\"'start' + formType.property\"\n                  [endControlName]=\"'end' + formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\" />\n              }\n              @case (modalInputType.DATETIME) {\n                <ud-date-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [min]=\"formType.min\"\n                  [max]=\"formType.max\" />\n              }\n              @case (modalInputType.TIME) {\n                <ud-time-picker\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [intervalMinutes]=\"formType.intervalMinutes ?? 30\"\n                  [minHour]=\"formType.minHour\"\n                  [maxHour]=\"formType.maxHour\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.CHIPS) {\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\n                    {{ formType.title | translate | singular | capitalize }}\n                  </mat-label>\n                  <mat-chip-grid #chipGrid [formControlName]=\"formType.property\">\n                    @for (option of formType.availableOptions; track option) {\n                      <mat-chip-row (removed)=\"formType.removeOption(option)\">\n                        {{ option }}\n                        <button matChipRemove>\n                          <mat-icon>cancel</mat-icon>\n                        </button>\n                      </mat-chip-row>\n                    }\n                  </mat-chip-grid>\n                  <input\n                    placeholder=\"New option...\"\n                    [matChipInputFor]=\"chipGrid\"\n                    (matChipInputTokenEnd)=\"formType.addOption($event)\" />\n                </mat-form-field>\n              }\n            }\n          }\n        </div>\n        @if (data.formErrors && form.errors) {\n          <div class=\"ud-modal-form-errors\">\n            @for (key of objectKeys(form.errors); track key) {\n              @if (data.formErrors[key]) {\n                <p class=\"ud-modal-form-error\">\n                  <mat-icon class=\"ud-modal-form-error__icon\">error_outline</mat-icon>\n                  {{ data.formErrors[key] }}\n                </p>\n              }\n            }\n          </div>\n        }\n      </form>\n    } @else if (bodyText) {\n      <p class=\"ud-modal-body-text\">{{ bodyText }}</p>\n    } @else {\n      <ng-content></ng-content>\n    }\n  </div>\n\n  @if (showFooter) {\n    <footer class=\"ud-modal-footer\">\n      @if (data.delete) {\n        <ud-button variant=\"stroked\" color=\"danger\" class=\"ud-modal-footer__delete\" (click)=\"onDelete()\">\n          {{ data.deleteLabel ?? 'Delete' }}\n        </ud-button>\n      }\n      @if (showClose) {\n        <ud-button variant=\"stroked\" color=\"secondary\" (click)=\"close()\">\n          {{ (cancelLabel ?? 'actions.close') | translate | capitalize }}\n        </ud-button>\n      }\n      <ud-button\n        [disabled]=\"!!(form && form.invalid) || confirmDisabled\"\n        (click)=\"onAction()\">\n        {{ (confirmLabel ?? (form ? 'actions.save' : 'actions.ok')) | translate | capitalize }}\n      </ud-button>\n    </footer>\n  }\n</div>\n", styles: [".ud-modal-shell{display:flex;flex-direction:column;overflow:hidden;min-width:360px;width:100%}.ud-modal-header{position:relative;padding:28px 28px 18px;overflow:hidden}.ud-modal-header:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(27,37,53,.1),transparent 60%),radial-gradient(circle at 85% 10%,rgba(58,74,102,.07),transparent 55%);pointer-events:none}.ud-modal-eyebrow{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1b2535}.ud-modal-title{margin:0;font-size:22px;line-height:1.2;font-weight:600;color:#2a3548;letter-spacing:-.01em}.ud-modal-lede{margin:8px 0 0;color:#6b7585;font-size:13.5px;line-height:1.5;max-width:40ch}.ud-modal-content{padding:4px 28px 12px;max-height:60vh;overflow-y:auto}.ud-modal-content.mat-mdc-dialog-content{padding:4px 28px 12px;margin:0;max-height:60vh}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px}ud-text-input,ud-textarea,ud-multi-select,ud-autocomplete,ud-date-input,ud-date-range-input,ud-time-picker,ud-phone-input,mat-form-field{display:block;width:100%}.ud-modal-body-text{margin:4px 0;font-size:14px;color:#4a5568;line-height:1.55}.image-container{display:flex;justify-content:space-between;align-items:center}.image-container .arrow-picture-icon{display:flex;justify-content:center;align-items:center;padding:1rem;font-size:2rem;cursor:pointer;background:#1b2535;color:#fff;border-radius:8px;transition:background .15s ease}.image-container .arrow-picture-icon:hover{background:#253347}.image-container img{width:100%;max-width:460px;border-radius:8px}.image-footer{display:flex;justify-content:center;align-items:center;padding:8px 0 0;font-size:13px;color:#6b7585}.ud-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 28px 24px;border-top:1px solid #e2e5ea;background:#fbfbfd}.ud-modal-footer__delete{margin-right:auto}.ud-modal-form-errors{margin-top:12px}.ud-modal-form-error{display:flex;align-items:center;gap:7px;margin:6px 0 0;padding:8px 11px;border-radius:8px;background:#e5393514;border:1px solid rgba(229,57,53,.22);color:#c62828;font-size:12.5px;font-weight:500;line-height:1.35}.ud-modal-form-error__icon{font-size:16px;width:16px;height:16px;flex-shrink:0}\n"] }]
+                    ], template: "<div class=\"ud-modal-shell\">\n  <header class=\"ud-modal-header\">\n    @if (eyebrow) {\n      <p class=\"ud-modal-eyebrow\">{{ eyebrow | translate | capitalize }}</p>\n    }\n    @if (title) {\n      <h3 class=\"ud-modal-title\">{{ title | translate | capitalize }}</h3>\n    }\n    @if (lede) {\n      <p class=\"ud-modal-lede\">{{ lede | translate | capitalize }}</p>\n    }\n  </header>\n\n  <div class=\"ud-modal-content\" mat-dialog-content>\n    @if (pictureUrls && currentPictureIndex != undefined) {\n      <div class=\"image-container\">\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\">keyboard_arrow_left</mat-icon>\n        <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n        <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\">keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"image-footer\">\n        {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }} {{ pictureUrls.length }}\n      </div>\n    } @else if (form) {\n      <form [formGroup]=\"form\">\n        <div class=\"modal-form-fields\">\n          @for (formType of data.forms; track formType) {\n            @switch (formType.type) {\n              @case (modalInputType.INPUT) {\n                <ud-text-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [type]=\"formType.inputType ?? 'text'\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.PHONE) {\n                <ud-phone-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\" />\n              }\n              @case (modalInputType.TEXT_AREA) {\n                <ud-textarea\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [minRows]=\"formType.minRows ?? 3\"\n                  [maxRows]=\"formType.maxRows ?? 6\" />\n              }\n              @case (modalInputType.OPTIONS) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"false\" />\n              }\n              @case (modalInputType.MULTI_SELECT) {\n                <ud-multi-select\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [options]=\"formType.availableOptions\"\n                  [multiple]=\"true\" />\n              }\n              @case (modalInputType.AUTOCOMPLETE) {\n                <ud-autocomplete\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [placeholder]=\"formType.placeholder ?? ''\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.DATERANGE) {\n                <ud-date-range-input\n                  [startControlName]=\"'start' + formType.property\"\n                  [endControlName]=\"'end' + formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\" />\n              }\n              @case (modalInputType.DATETIME) {\n                <ud-date-input\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [min]=\"formType.min\"\n                  [max]=\"formType.max\" />\n              }\n              @case (modalInputType.TIME) {\n                <ud-time-picker\n                  [controlName]=\"formType.property\"\n                  [label]=\"formType.title | translate | singular | capitalize\"\n                  [intervalMinutes]=\"formType.intervalMinutes ?? 30\"\n                  [minHour]=\"formType.minHour\"\n                  [maxHour]=\"formType.maxHour\"\n                  [options]=\"formType.availableOptions\" />\n              }\n              @case (modalInputType.CHIPS) {\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\n                    {{ formType.title | translate | singular | capitalize }}\n                  </mat-label>\n                  <mat-chip-grid #chipGrid [formControlName]=\"formType.property\">\n                    @for (option of formType.availableOptions; track option) {\n                      <mat-chip-row (removed)=\"formType.removeOption(option)\">\n                        {{ option }}\n                        <button matChipRemove>\n                          <mat-icon>cancel</mat-icon>\n                        </button>\n                      </mat-chip-row>\n                    }\n                  </mat-chip-grid>\n                  <input\n                    placeholder=\"New option...\"\n                    [matChipInputFor]=\"chipGrid\"\n                    (matChipInputTokenEnd)=\"formType.addOption($event)\" />\n                </mat-form-field>\n              }\n            }\n          }\n        </div>\n        @if (data.formErrors && form.errors) {\n          <div class=\"ud-modal-form-errors\">\n            @for (key of objectKeys(form.errors); track key) {\n              @if (data.formErrors[key]) {\n                <p class=\"ud-modal-form-error\">\n                  <mat-icon class=\"ud-modal-form-error__icon\">error_outline</mat-icon>\n                  {{ data.formErrors[key] }}\n                </p>\n              }\n            }\n          </div>\n        }\n      </form>\n    } @else if (bodyText) {\n      <p class=\"ud-modal-body-text\">{{ bodyText }}</p>\n    } @else {\n      <ng-content></ng-content>\n    }\n  </div>\n\n  @if (showFooter) {\n    <footer class=\"ud-modal-footer\">\n      @if (data.delete) {\n        <ud-button variant=\"stroked\" color=\"danger\" class=\"ud-modal-footer__delete\" (click)=\"onDelete()\">\n          {{ data.deleteLabel ?? 'Delete' }}\n        </ud-button>\n      }\n      @if (showClose) {\n        <ud-button variant=\"stroked\" color=\"secondary\" (click)=\"close()\">\n          {{ (cancelLabel ?? 'actions.close') | translate | capitalize }}\n        </ud-button>\n      }\n      <ud-button\n        [disabled]=\"!!(form && form.invalid) || confirmDisabled\"\n        (click)=\"onAction()\">\n        {{ (confirmLabel ?? (form ? 'actions.save' : 'actions.ok')) | translate | capitalize }}\n      </ud-button>\n    </footer>\n  }\n</div>\n", styles: [".ud-modal-shell{display:flex;flex-direction:column;overflow:hidden;min-width:360px;width:100%}.ud-modal-header{position:relative;padding:28px 28px 18px;overflow:hidden}.ud-modal-header:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(27,37,53,.1),transparent 60%),radial-gradient(circle at 85% 10%,rgba(58,74,102,.07),transparent 55%);pointer-events:none}.ud-modal-eyebrow{margin:0 0 6px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1b2535}.ud-modal-title{margin:0;font-family:DM Sans,system-ui,sans-serif;font-size:22px;line-height:1.2;font-weight:600;color:#2a3548;letter-spacing:-.01em}.ud-modal-lede{margin:8px 0 0;font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:13.5px;line-height:1.5;max-width:40ch}.ud-modal-content{padding:4px 28px 12px;max-height:60vh;overflow-y:auto}.ud-modal-content.mat-mdc-dialog-content{padding:4px 28px 12px;margin:0;max-height:60vh}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px}ud-text-input,ud-textarea,ud-multi-select,ud-autocomplete,ud-date-input,ud-date-range-input,ud-time-picker,ud-phone-input,mat-form-field{display:block;width:100%}.ud-modal-body-text{margin:4px 0;font-size:14px;color:#4a5568;line-height:1.55}.image-container{display:flex;justify-content:space-between;align-items:center}.image-container .arrow-picture-icon{display:flex;justify-content:center;align-items:center;padding:1rem;font-size:2rem;cursor:pointer;background:#1b2535;color:#fff;border-radius:8px;transition:background .15s ease}.image-container .arrow-picture-icon:hover{background:#253347}.image-container img{width:100%;max-width:460px;border-radius:8px}.image-footer{display:flex;justify-content:center;align-items:center;padding:8px 0 0;font-size:13px;color:#6b7585}.ud-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 28px 24px;border-top:1px solid #e2e5ea;background:#fbfbfd}.ud-modal-footer__delete{margin-right:auto}.ud-modal-form-errors{margin-top:12px}.ud-modal-form-error{display:flex;align-items:center;gap:7px;margin:6px 0 0;padding:8px 11px;border-radius:8px;background:#e5393514;border:1px solid rgba(229,57,53,.22);color:#c62828;font-size:12.5px;font-weight:500;line-height:1.35}.ud-modal-form-error__icon{font-size:16px;width:16px;height:16px;flex-shrink:0}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3276,10 +3276,27 @@ class CalendarComponent {
      * free-text input.
      */
     bookableUsers = input([]);
+    /**
+     * Optional cutoff: any cell whose start is strictly before this Date is
+     * visually disabled (grey, no hover, no cursor) and click-blocked. The
+     * "Add slot" toolbar button pre-fills the modal with this timestamp
+     * (rounded up to the next `slotDuration` increment) instead of `new Date()`.
+     * The modal's save handler also refuses to emit if a hand-edited time
+     * lands before the cutoff. Applies to both admin and student modes.
+     */
+    minSlotStart = input(null);
+    /**
+     * Optional initial calendar position. Overrides the internal `navDate`
+     * which otherwise defaults to "today / now". Useful for reschedule flows
+     * or deep links that should land on a specific day.
+     */
+    defaultDate = input(null);
     slotAdded = output();
     slotUpdated = output();
     slotRemoved = output();
     slotBooked = output();
+    /** Fired when a user attempts to interact with a cell before `minSlotStart`. */
+    slotBlocked = output();
     activeView = signal('week');
     navDate = signal(new Date());
     viewOptions = [
@@ -3310,6 +3327,12 @@ class CalendarComponent {
         effect(() => {
             this.activeView.set(this.defaultView());
         }, { allowSignalWrites: true });
+        // Apply the consumer's preferred starting day, if provided.
+        effect(() => {
+            const d = this.defaultDate();
+            if (d)
+                this.navDate.set(new Date(d));
+        }, { allowSignalWrites: true });
     }
     ngOnDestroy() {
         this.disposeHoverCard();
@@ -3591,12 +3614,52 @@ class CalendarComponent {
     onCellClick(day, hour, minute) {
         if (this.mode() !== 'admin')
             return;
+        if (this.isCellDisabled(day, hour, minute)) {
+            const start = this.combineDayTime(day, hour, minute);
+            this.slotBlocked.emit({
+                start,
+                end: new Date(start.getTime() + this.slotDuration() * 60000),
+                reason: 'before-min',
+            });
+            return;
+        }
         this.openAddModal(day, hour, minute);
     }
+    /**
+     * True when the cell at (day, hour, minute) starts before `minSlotStart`.
+     * Templates bind a CSS class on this to grey out past cells; the click
+     * handler also bails so consumers don't see invalid `slotAdded` events.
+     */
+    isCellDisabled(day, hour, minute) {
+        const min = this.minSlotStart();
+        if (!min)
+            return false;
+        return this.combineDayTime(day, hour, minute).getTime() < min.getTime();
+    }
+    /** True when `day` is fully before `minSlotStart` (used by month view). */
+    isDayDisabled(day) {
+        const min = this.minSlotStart();
+        if (!min)
+            return false;
+        const endOfDay = new Date(day);
+        endOfDay.setHours(23, 59, 59, 999);
+        return endOfDay.getTime() < min.getTime();
+    }
+    combineDayTime(day, hour, minute) {
+        const d = new Date(day);
+        d.setHours(hour, minute, 0, 0);
+        return d;
+    }
     onSlotMouseDown(e, slot) {
         e.stopPropagation();
         this.disposeHoverCard();
         if (this.mode() === 'student' && !slot.booked) {
+            // Refuse student bookings on slots that start before the cutoff.
+            const min = this.minSlotStart();
+            if (min && slot.start.getTime() < min.getTime()) {
+                this.slotBlocked.emit({ start: slot.start, end: slot.end, reason: 'before-min' });
+                return;
+            }
             this.slotBooked.emit({ ...slot, booked: true });
             return;
         }
@@ -3630,7 +3693,15 @@ class CalendarComponent {
                 const newStart = new Date(target.day);
                 newStart.setHours(target.hour, target.minute, 0, 0);
                 const newEnd = new Date(newStart.getTime() + this.dragSlotDurationMin * 60000);
-                this.slotUpdated.emit({ ...this.draggingSlot, start: newStart, end: newEnd });
+                // Refuse a drop that would land before the cutoff; surface as
+                // slotBlocked so the consumer can show feedback if they want.
+                const min = this.minSlotStart();
+                if (min && newStart.getTime() < min.getTime()) {
+                    this.slotBlocked.emit({ start: newStart, end: newEnd, reason: 'before-min' });
+                }
+                else {
+                    this.slotUpdated.emit({ ...this.draggingSlot, start: newStart, end: newEnd });
+                }
             }
         }
         else {
@@ -3682,14 +3753,35 @@ class CalendarComponent {
     }
     // ── Modal open ─────────────────────────────────────────────────────────────
     openAddModal(day, hour, minute) {
-        const base = day ? new Date(day) : new Date();
-        const h = hour ?? base.getHours();
-        const m = minute ?? 0;
-        const startDate = new Date(base);
-        startDate.setHours(h, m, 0, 0);
-        const totalEnd = m + this.slotDuration();
-        const endDate = new Date(base);
-        endDate.setHours(h + Math.floor(totalEnd / 60), totalEnd % 60, 0, 0);
+        // Fall back to minSlotStart (rounded up to the next slotDuration boundary)
+        // when no specific cell was clicked — keeps the toolbar "Add slot" button
+        // from prefilling with a time that fails server-side validation.
+        let startDate;
+        if (day && hour !== undefined && minute !== undefined) {
+            startDate = this.combineDayTime(day, hour, minute);
+        }
+        else if (day) {
+            startDate = new Date(day);
+            startDate.setHours(hour ?? startDate.getHours(), minute ?? 0, 0, 0);
+        }
+        else {
+            // No specific cell clicked — anchor on the day the user is currently
+            // viewing (so the modal's date matches the visible week/day) and then
+            // bump forward if it sits before the cutoff.
+            const anchor = new Date(this.navDate());
+            const min = this.minSlotStart();
+            if (min && anchor.getTime() < min.getTime()) {
+                startDate = this.roundUpToSlot(min);
+            }
+            else {
+                // Keep the navigated day, but pick a sensible default time-of-day
+                // (start of the visible hour range) instead of "now".
+                anchor.setHours(this.minHour(), 0, 0, 0);
+                startDate = this.roundUpToSlot(anchor);
+            }
+        }
+        const endDate = new Date(startDate.getTime() + this.slotDuration() * 60000);
+        const base = new Date(startDate);
         const form = this.buildForm({
             date: new Date(base),
             startTime: startDate,
@@ -3703,7 +3795,18 @@ class CalendarComponent {
                 formGroup: form,
                 forms: this.slotForms(),
                 formErrors: this.slotFormErrors,
-                save: (v) => this.slotAdded.emit(this.buildSlot(crypto.randomUUID(), v)),
+                save: (v) => {
+                    const slot = this.buildSlot(crypto.randomUUID(), v);
+                    // Last-line defence: refuse if a hand-edited time slipped below
+                    // the cutoff. The cross-field validator already surfaces a friendly
+                    // error in the modal — this just guarantees we never emit a bad slot.
+                    const min = this.minSlotStart();
+                    if (min && slot.start.getTime() < min.getTime()) {
+                        this.slotBlocked.emit({ start: slot.start, end: slot.end, reason: 'before-min' });
+                        return;
+                    }
+                    this.slotAdded.emit(slot);
+                },
             },
         });
         form.get('startTime')?.valueChanges
@@ -3714,6 +3817,17 @@ class CalendarComponent {
             form.get('endTime')?.setValue(this.shiftTime(time, this.slotDuration()));
         });
     }
+    /** Round a Date up to the next `slotDuration` increment (minute-aligned). */
+    roundUpToSlot(d) {
+        const out = new Date(d);
+        out.setSeconds(0, 0);
+        const step = this.slotDuration();
+        const remainder = out.getMinutes() % step;
+        if (remainder > 0 || out.getTime() <= d.getTime()) {
+            out.setMinutes(out.getMinutes() + (step - remainder));
+        }
+        return out;
+    }
     openEditModal(slot) {
         const form = this.buildForm({
             title: slot.title ?? '',
@@ -3735,6 +3849,11 @@ class CalendarComponent {
                 formErrors: this.slotFormErrors,
                 save: (v) => {
                     const updated = this.buildSlot(slot.id, v);
+                    const min = this.minSlotStart();
+                    if (min && updated.start.getTime() < min.getTime()) {
+                        this.slotBlocked.emit({ start: updated.start, end: updated.end, reason: 'before-min' });
+                        return;
+                    }
                     if (updated.booked && !slot.booked) {
                         this.slotBooked.emit(updated);
                     }
@@ -3758,14 +3877,20 @@ class CalendarComponent {
     // Error messages shown by the modal for group-level (cross-field) errors.
     get slotFormErrors() {
         const range = `${this.formatHour(this.minHour(), 0)}–${this.formatHour(this.maxHour(), 0)}`;
+        const min = this.minSlotStart();
         return {
             endBeforeStart: 'End time must be after the start time.',
             outOfHours: `Times must be within working hours (${range}).`,
+            beforeMinStart: min
+                ? `Slot must start at or after ${this.formatTime(min)} on ${min.toLocaleDateString()}.`
+                : 'Slot must start in the future.',
         };
     }
     // Cross-field validator: the end time must be strictly after the start time,
     // and both must fall inside the calendar's [minHour, maxHour] working window.
+    // When `minSlotStart` is set, the start of the slot must also be at/after it.
     slotTimeValidator = (group) => {
+        const date = group.get('date')?.value;
         const start = group.get('startTime')?.value;
         const end = group.get('endTime')?.value;
         if (!start || !end)
@@ -3776,7 +3901,15 @@ class CalendarComponent {
         const hi = this.maxHour() * 60;
         if (startMin < lo || startMin > hi || endMin < lo || endMin > hi)
             return { outOfHours: true };
-        return endMin > startMin ? null : { endBeforeStart: true };
+        if (endMin <= startMin)
+            return { endBeforeStart: true };
+        const min = this.minSlotStart();
+        if (min && date) {
+            const slotStart = this.combineDateTime(date, start);
+            if (slotStart.getTime() < min.getTime())
+                return { beforeMinStart: true };
+        }
+        return null;
     };
     buildForm(defaults) {
         return new FormGroup({
@@ -3799,9 +3932,16 @@ class CalendarComponent {
                 availableOptions: users,
             }
             : { type: ModalInputType.INPUT, title: 'Booked By', property: 'bookedBy', placeholder: 'Student name or ID' };
+        // Pass the cutoff (date-only) into the date picker so users can't pick a
+        // past day from the calendar. We strip the time so the *whole* cutoff day
+        // is still selectable — time-of-day enforcement happens in startTime/endTime.
+        const minDate = this.minSlotStart();
+        const dateMin = minDate
+            ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())
+            : undefined;
         return [
             { type: ModalInputType.INPUT, title: 'Title', property: 'title', placeholder: 'e.g. Office hours' },
-            { type: ModalInputType.DATETIME, title: 'Date', property: 'date' },
+            { type: ModalInputType.DATETIME, title: 'Date', property: 'date', min: dateMin },
             { type: ModalInputType.TIME, title: 'Start Time', property: 'startTime', intervalMinutes: this.slotDuration(), minHour: this.minHour(), maxHour: this.maxHour() },
             { type: ModalInputType.TIME, title: 'End Time', property: 'endTime', intervalMinutes: this.slotDuration(), minHour: this.minHour(), maxHour: this.maxHour() },
             bookedByField,
@@ -3877,11 +4017,11 @@ class CalendarComponent {
         return `rgba(${r},${g},${b},${alpha})`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CalendarComponent, isStandalone: true, selector: "ud-calendar", inputs: { slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, slotDuration: { classPropertyName: "slotDuration", publicName: "slotDuration", isSignal: true, isRequired: false, transformFunction: null }, minHour: { classPropertyName: "minHour", publicName: "minHour", isSignal: true, isRequired: false, transformFunction: null }, maxHour: { classPropertyName: "maxHour", publicName: "maxHour", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, bookableUsers: { classPropertyName: "bookableUsers", publicName: "bookableUsers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotAdded: "slotAdded", slotUpdated: "slotUpdated", slotRemoved: "slotRemoved", slotBooked: "slotBooked" }, host: { listeners: { "document:mousemove": "onDocMouseMove($event)", "document:mouseup": "onDocMouseUp($event)" } }, viewQueries: [{ propertyName: "hoverCardTpl", first: true, predicate: ["hoverCard"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ud-cal\" #calendarHost>\n\n  <!-- Header -->\n  <div class=\"ud-cal__header\">\n    <div class=\"ud-cal__nav\">\n      <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_left\" (click)=\"navigate(-1)\" />\n      <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_right\" (click)=\"navigate(1)\" />\n      <ud-button variant=\"stroked\" color=\"secondary\" size=\"sm\" (click)=\"goToday()\">Today</ud-button>\n    </div>\n\n    <span class=\"ud-cal__period\">{{ headerLabel() }}</span>\n\n    <div class=\"ud-cal__header-right\">\n      <div class=\"ud-cal__view-switcher\">\n        @for (v of viewOptions; track v.id) {\n          <button\n            class=\"ud-cal__view-btn\"\n            [class.ud-cal__view-btn--active]=\"activeView() === v.id\"\n            (click)=\"switchView(v.id)\"\n            type=\"button\">\n            {{ v.label }}\n          </button>\n        }\n      </div>\n      @if (mode() === 'admin') {\n        <ud-button variant=\"flat\" color=\"primary\" size=\"sm\" icon=\"add\" (click)=\"openAddModal()\">\n          Add slot\n        </ud-button>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 WEEK VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'week') {\n    <div class=\"ud-cal__week-scroll\" [style.max-height]=\"maxHeight()\">\n      <div class=\"ud-cal__week-header\">\n        <div class=\"ud-cal__time-gutter\"></div>\n        @for (day of weekDays(); track day.toISOString()) {\n          <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(day)\">\n            <span class=\"ud-cal__day-name\">{{ dayLabel(day) }}</span>\n            <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(day)\">{{ dayNum(day) }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"ud-cal__week-grid\">\n        <div class=\"ud-cal__time-col\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div class=\"ud-cal__time-cell\">\n              @if (ts.label) {\n                <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        @for (day of weekDays(); track day.toISOString()) {\n          <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(day)\">\n            @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n              <div\n                class=\"ud-cal__grid-cell\"\n                [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n                (click)=\"onCellClick(day, ts.hour, ts.minute)\">\n              </div>\n            }\n            @for (slot of slotsForDay(day); track slot.id) {\n              <div\n                class=\"ud-cal__slot\"\n                [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n                [class.ud-cal__slot--booked]=\"slot.booked\"\n                [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n                [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n                [style.top.px]=\"slotTop(slot)\"\n                [style.height.px]=\"slotHeight(slot)\"\n                [style.left.%]=\"slotLeft(slot)\"\n                [style.width.%]=\"slotWidth(slot)\"\n                [style.background]=\"slotBg(slot)\"\n                [style.color]=\"slotTextColor(slot)\"\n                [style.border-color]=\"slotBorderColor(slot)\"\n                (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n                (mouseleave)=\"closeHoverCard()\"\n                (mousedown)=\"onSlotMouseDown($event, slot)\">\n                <div class=\"ud-cal__slot-inner\">\n                  @if (slot.booked) {\n                    <mat-icon class=\"ud-cal__slot-lock\">person</mat-icon>\n                  }\n                  @if (slot.title) {\n                    <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n                  } @else if (slotDensity(slot) === 'compact') {\n                    <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                  }\n                </div>\n                @if (slotDensity(slot) !== 'compact') {\n                  <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                }\n                @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n                  <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n                }\n              </div>\n            }\n            @if (draggingSlot && dragMoved && dragTarget && isSameDay(dragTarget.day, day)) {\n              <div\n                class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n                [style.top.px]=\"previewTop(dragTarget)\"\n                [style.height.px]=\"previewHeight()\"\n                [style.background]=\"slotBg(draggingSlot)\"\n                [style.color]=\"slotTextColor(draggingSlot)\"\n                [style.border-color]=\"slotBorderColor(draggingSlot)\">\n                @if (draggingSlot.title) {\n                  <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 MONTH VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'month') {\n    <div class=\"ud-cal__month\">\n      <div class=\"ud-cal__month-header\">\n        @for (name of ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; track name) {\n          <div class=\"ud-cal__month-day-name\">{{ name }}</div>\n        }\n      </div>\n      <div class=\"ud-cal__month-grid\">\n        @for (week of monthWeeks(); track $index) {\n          @for (day of week; track day.toISOString()) {\n            <div\n              class=\"ud-cal__month-cell\"\n              [class.ud-cal__month-cell--today]=\"isToday(day)\"\n              [class.ud-cal__month-cell--other]=\"!isCurrentMonth(day)\"\n              (click)=\"clickDay(day)\">\n              <span class=\"ud-cal__month-num\" [class.ud-cal__month-num--today]=\"isToday(day)\">\n                {{ dayNum(day) }}\n              </span>\n              <div class=\"ud-cal__month-dots\">\n                @for (slot of slotsForDay(day).slice(0, 3); track slot.id) {\n                  <span\n                    class=\"ud-cal__month-dot\"\n                    [style.background]=\"slotBorderColor(slot)\"\n                    [title]=\"slot.title ?? formatSlotTime(slot)\">\n                  </span>\n                }\n                @if (slotsForDay(day).length > 3) {\n                  <span class=\"ud-cal__month-more\">+{{ slotsForDay(day).length - 3 }}</span>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 DAY VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'day') {\n    <div class=\"ud-cal__week-scroll\" [style.max-height]=\"maxHeight()\">\n      <div class=\"ud-cal__week-header\">\n        <div class=\"ud-cal__time-gutter\"></div>\n        <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(navDate())\">\n          <span class=\"ud-cal__day-name\">{{ dayLabel(navDate()) }}</span>\n          <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(navDate())\">{{ dayNum(navDate()) }}</span>\n        </div>\n      </div>\n      <div class=\"ud-cal__week-grid\">\n        <div class=\"ud-cal__time-col\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div class=\"ud-cal__time-cell\">\n              @if (ts.label) {\n                <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(navDate())\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div\n              class=\"ud-cal__grid-cell\"\n              [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n              (click)=\"onCellClick(navDate(), ts.hour, ts.minute)\">\n            </div>\n          }\n          @for (slot of slotsForDay(navDate()); track slot.id) {\n            <div\n              class=\"ud-cal__slot\"\n              [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n              [class.ud-cal__slot--booked]=\"slot.booked\"\n              [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n              [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n              [style.top.px]=\"slotTop(slot)\"\n              [style.height.px]=\"slotHeight(slot)\"\n              [style.left.%]=\"slotLeft(slot)\"\n              [style.width.%]=\"slotWidth(slot)\"\n              [style.background]=\"slotBg(slot)\"\n              [style.color]=\"slotTextColor(slot)\"\n              [style.border-color]=\"slotBorderColor(slot)\"\n              (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n              (mouseleave)=\"closeHoverCard()\"\n              (mousedown)=\"onSlotMouseDown($event, slot)\">\n              <div class=\"ud-cal__slot-inner\">\n                @if (slot.booked) {\n                  <mat-icon class=\"ud-cal__slot-lock\">person</mat-icon>\n                }\n                @if (slot.title) {\n                  <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n                } @else if (slotDensity(slot) === 'compact') {\n                  <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                }\n              </div>\n              @if (slotDensity(slot) !== 'compact') {\n                <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n              }\n              @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n                <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n              }\n            </div>\n          }\n          @if (draggingSlot && dragMoved && dragTarget) {\n            <div\n              class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n              [style.top.px]=\"previewTop(dragTarget)\"\n              [style.height.px]=\"previewHeight()\"\n              [style.background]=\"slotBg(draggingSlot)\"\n              [style.color]=\"slotTextColor(draggingSlot)\"\n              [style.border-color]=\"slotBorderColor(draggingSlot)\">\n              @if (draggingSlot.title) {\n                <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n</div>\n\n<!-- \u2500\u2500 Rich hover card (rendered in a CDK overlay) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #hoverCard>\n  @if (hoverSlot(); as s) {\n    <div\n      class=\"ud-cal__hovercard\"\n      [class.ud-cal__hovercard--booked]=\"s.booked\"\n      [style.--hc-accent]=\"slotBorderColor(s)\"\n      (mouseenter)=\"cancelHoverClose()\"\n      (mouseleave)=\"closeHoverCard()\">\n      <span class=\"ud-cal__hovercard-bar\"></span>\n      <div class=\"ud-cal__hovercard-body\">\n        <div class=\"ud-cal__hovercard-head\">\n          <span class=\"ud-cal__hovercard-title\">{{ s.title || 'Untitled slot' }}</span>\n          <span class=\"ud-cal__hovercard-pill\" [class.ud-cal__hovercard-pill--booked]=\"s.booked\">\n            <span class=\"ud-cal__hovercard-pill-dot\"></span>\n            {{ s.booked ? 'Booked' : 'Available' }}\n          </span>\n        </div>\n\n        <div class=\"ud-cal__hovercard-row\">\n          <mat-icon class=\"ud-cal__hovercard-ico\">schedule</mat-icon>\n          <span class=\"ud-cal__hovercard-time\">{{ formatSlotTime(s) }}</span>\n          <span class=\"ud-cal__hovercard-dur\">{{ slotDurationLabel(s) }}</span>\n        </div>\n\n        @if (s.booked && s.bookedBy) {\n          <div class=\"ud-cal__hovercard-row ud-cal__hovercard-person\">\n            <span class=\"ud-cal__hovercard-avatar\" [style.background]=\"slotBorderColor(s)\">\n              {{ slotInitials(s.bookedBy) }}\n            </span>\n            <span class=\"ud-cal__hovercard-person-name\">{{ s.bookedBy }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n", styles: [":host{display:block;width:100%;font-family:DM Sans,system-ui,sans-serif}.ud-cal{position:relative;background:#fff;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:12px;box-shadow:0 2px 8px #1b25350f;overflow:hidden}.ud-cal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--eu-border-light, #e8eaef);gap:12px;flex-wrap:wrap}.ud-cal__nav{display:flex;align-items:center;gap:4px}.ud-cal__period{flex:1;text-align:center;font-size:14px;font-weight:600;color:var(--eu-text, #2a3548);white-space:nowrap}.ud-cal__header-right{display:flex;align-items:center;gap:10px}.ud-cal__view-switcher{display:flex;align-items:center;background:var(--eu-bg, #f4f5f7);border-radius:8px;padding:3px;gap:2px}.ud-cal__view-btn{padding:4px 12px;border:none;border-radius:6px;background:transparent;font-family:DM Sans,system-ui,sans-serif;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585);cursor:pointer;transition:background .15s,color .15s}.ud-cal__view-btn--active{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__view-btn:not(.ud-cal__view-btn--active):hover{background:#1b253514;color:var(--eu-text, #2a3548)}.ud-cal__week-scroll{overflow-y:auto;max-height:580px}.ud-cal__week-header{position:sticky;top:0;z-index:10;display:flex;background:#fafbfc;border-bottom:1px solid var(--eu-border-light, #e8eaef);flex-shrink:0}.ud-cal__time-gutter{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;gap:2px;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header:last-child{border-right:none}.ud-cal__day-header--today{background:#1b25350a}.ud-cal__day-name{font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em}.ud-cal__day-num{font-size:15px;font-weight:600;color:var(--eu-text, #2a3548)}.ud-cal__day-num--today{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--eu-navy, #1b2535);color:#fff;border-radius:50%;font-size:13px}.ud-cal__week-grid{display:flex}.ud-cal__time-col{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__time-cell{height:56px;position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:0 6px}.ud-cal__time-label{font-size:10px;color:var(--eu-muted, #9099a8);font-weight:500;white-space:nowrap;margin-top:-6px}.ud-cal__day-col{flex:1;position:relative;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-col:last-child{border-right:none}.ud-cal__day-col--today{background:#1b253506}.ud-cal__grid-cell{height:56px;border-bottom:1px solid var(--eu-border-light, #e8eaef);transition:background .1s;cursor:pointer}.ud-cal__grid-cell--half{border-bottom-style:dashed;border-bottom-color:#d8dde673}.ud-cal__grid-cell:hover{background:#1b253508}.ud-cal__slot{position:absolute;margin-left:2px;box-sizing:border-box;border-left:3px solid;border-radius:6px;padding:3px 6px;display:flex;flex-direction:column;gap:1px;overflow:hidden;z-index:1;transition:filter .15s,transform .1s}.ud-cal__slot--clickable{cursor:grab}.ud-cal__slot--clickable:hover{filter:brightness(.93);transform:translate(1px)}.ud-cal__slot--cozy{padding:2px 6px;gap:0}.ud-cal__slot--compact{padding:1px 6px;gap:0;flex-direction:row;align-items:center;justify-content:flex-start}.ud-cal__slot-inner{display:flex;align-items:center;gap:3px;overflow:hidden;min-width:0}.ud-cal__slot-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;min-width:0}.ud-cal__slot-time{font-size:10px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.ud-cal__slot--dragging{opacity:.3;pointer-events:none}.ud-cal__slot--drag-preview{left:3px;right:3px;margin-left:0;pointer-events:none;opacity:.75;border-left-style:dashed;border-top:1px dashed currentColor;z-index:2}.ud-cal__slot--booked{border-left-width:4px;box-shadow:inset 0 0 0 1px #1b253514}.ud-cal__slot--booked .ud-cal__slot-title{font-weight:600}.ud-cal__slot:not(.ud-cal__slot--booked){border-left-style:dashed}.ud-cal__slot-lock{font-size:11px!important;width:11px!important;height:11px!important;line-height:11px!important;flex-shrink:0;opacity:.75}.ud-cal__slot-booked-by{font-size:9px;font-weight:500;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;margin-top:1px}.ud-cal__month{display:flex;flex-direction:column}.ud-cal__month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--eu-border-light, #e8eaef);background:#fafbfc}.ud-cal__month-day-name{text-align:center;padding:8px 4px;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__month-day-name:last-child{border-right:none}.ud-cal__month-grid{display:grid;grid-template-columns:repeat(7,1fr)}.ud-cal__month-cell{min-height:80px;padding:6px;border-right:1px solid var(--eu-border-light, #e8eaef);border-bottom:1px solid var(--eu-border-light, #e8eaef);cursor:pointer;transition:background .12s}.ud-cal__month-cell:nth-child(7n){border-right:none}.ud-cal__month-cell:hover{background:#1b253508}.ud-cal__month-cell--today{background:#1b25350a}.ud-cal__month-cell--other{opacity:.4}.ud-cal__month-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:12px;font-weight:600;color:var(--eu-text, #2a3548);border-radius:50%}.ud-cal__month-num--today{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__month-dots{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-top:4px}.ud-cal__month-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ud-cal__month-more{font-size:9px;font-weight:600;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard{--hc-accent: var(--eu-navy, #1b2535);position:relative;display:flex;min-width:208px;max-width:288px;background:#fff;border:1px solid var(--eu-border-light, #e8eaef);border-radius:12px;overflow:hidden;font-family:DM Sans,system-ui,sans-serif;box-shadow:0 1px 2px #1b25350d,0 14px 30px -10px #1b25353d;transform-origin:top left;animation:ud-cal-hovercard-in .17s cubic-bezier(.16,1,.3,1) both}.ud-cal__hovercard:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--hc-accent) 6%,transparent),transparent 55%)}@keyframes ud-cal-hovercard-in{0%{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.ud-cal__hovercard-bar{width:4px;flex-shrink:0;background:var(--hc-accent)}.ud-cal__hovercard-body{position:relative;z-index:1;flex:1;min-width:0;padding:12px 14px 13px;display:flex;flex-direction:column;gap:9px}.ud-cal__hovercard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.ud-cal__hovercard-title{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--eu-text, #2a3548);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ud-cal__hovercard-pill{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:3px 9px 3px 7px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#1b253512;color:#1b253599}.ud-cal__hovercard-pill--booked{background:#1b25351f;color:var(--eu-navy)}.ud-cal__hovercard-pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}.ud-cal__hovercard-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard-ico{font-size:16px!important;width:16px!important;height:16px!important;line-height:16px!important;color:var(--hc-accent);opacity:.9}.ud-cal__hovercard-time{color:var(--eu-text, #2a3548);font-weight:600;font-variant-numeric:tabular-nums}.ud-cal__hovercard-dur{margin-left:auto;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);background:var(--eu-bg, #f4f5f7);border:1px solid var(--eu-border-light, #e8eaef);padding:1px 8px;border-radius:6px;white-space:nowrap}.ud-cal__hovercard-person{padding-top:8px;border-top:1px dashed var(--eu-border-light, #e8eaef)}.ud-cal__hovercard-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--hc-accent);color:#fff;font-size:9px;font-weight:700;letter-spacing:.03em;flex-shrink:0}.ud-cal__hovercard-person-name{color:var(--eu-text, #2a3548);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CalendarComponent, isStandalone: true, selector: "ud-calendar", inputs: { slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, slotDuration: { classPropertyName: "slotDuration", publicName: "slotDuration", isSignal: true, isRequired: false, transformFunction: null }, minHour: { classPropertyName: "minHour", publicName: "minHour", isSignal: true, isRequired: false, transformFunction: null }, maxHour: { classPropertyName: "maxHour", publicName: "maxHour", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, bookableUsers: { classPropertyName: "bookableUsers", publicName: "bookableUsers", isSignal: true, isRequired: false, transformFunction: null }, minSlotStart: { classPropertyName: "minSlotStart", publicName: "minSlotStart", isSignal: true, isRequired: false, transformFunction: null }, defaultDate: { classPropertyName: "defaultDate", publicName: "defaultDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotAdded: "slotAdded", slotUpdated: "slotUpdated", slotRemoved: "slotRemoved", slotBooked: "slotBooked", slotBlocked: "slotBlocked" }, host: { listeners: { "document:mousemove": "onDocMouseMove($event)", "document:mouseup": "onDocMouseUp($event)" } }, viewQueries: [{ propertyName: "hoverCardTpl", first: true, predicate: ["hoverCard"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ud-cal\" #calendarHost>\n\n  <!-- Header -->\n  <div class=\"ud-cal__header\">\n    <div class=\"ud-cal__nav\">\n      <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_left\" (click)=\"navigate(-1)\" />\n      <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_right\" (click)=\"navigate(1)\" />\n      <ud-button variant=\"stroked\" color=\"secondary\" size=\"sm\" (click)=\"goToday()\">Today</ud-button>\n    </div>\n\n    <span class=\"ud-cal__period\">{{ headerLabel() }}</span>\n\n    <div class=\"ud-cal__header-right\">\n      <div class=\"ud-cal__view-switcher\">\n        @for (v of viewOptions; track v.id) {\n          <button\n            class=\"ud-cal__view-btn\"\n            [class.ud-cal__view-btn--active]=\"activeView() === v.id\"\n            (click)=\"switchView(v.id)\"\n            type=\"button\">\n            {{ v.label }}\n          </button>\n        }\n      </div>\n      @if (mode() === 'admin') {\n        <ud-button variant=\"flat\" color=\"primary\" size=\"sm\" icon=\"add\" (click)=\"openAddModal()\">\n          Add slot\n        </ud-button>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 WEEK VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'week') {\n    <div class=\"ud-cal__week-scroll\" [style.max-height]=\"maxHeight()\">\n      <div class=\"ud-cal__week-header\">\n        <div class=\"ud-cal__time-gutter\"></div>\n        @for (day of weekDays(); track day.toISOString()) {\n          <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(day)\">\n            <span class=\"ud-cal__day-name\">{{ dayLabel(day) }}</span>\n            <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(day)\">{{ dayNum(day) }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"ud-cal__week-grid\">\n        <div class=\"ud-cal__time-col\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div class=\"ud-cal__time-cell\">\n              @if (ts.label) {\n                <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        @for (day of weekDays(); track day.toISOString()) {\n          <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(day)\">\n            @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n              <div\n                class=\"ud-cal__grid-cell\"\n                [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n                [class.ud-cal__grid-cell--disabled]=\"isCellDisabled(day, ts.hour, ts.minute)\"\n                (click)=\"onCellClick(day, ts.hour, ts.minute)\">\n              </div>\n            }\n            @for (slot of slotsForDay(day); track slot.id) {\n              <div\n                class=\"ud-cal__slot\"\n                [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n                [class.ud-cal__slot--booked]=\"slot.booked\"\n                [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n                [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n                [style.top.px]=\"slotTop(slot)\"\n                [style.height.px]=\"slotHeight(slot)\"\n                [style.left.%]=\"slotLeft(slot)\"\n                [style.width.%]=\"slotWidth(slot)\"\n                [style.background]=\"slotBg(slot)\"\n                [style.color]=\"slotTextColor(slot)\"\n                [style.border-color]=\"slotBorderColor(slot)\"\n                (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n                (mouseleave)=\"closeHoverCard()\"\n                (mousedown)=\"onSlotMouseDown($event, slot)\">\n                <div class=\"ud-cal__slot-inner\">\n                  @if (slot.booked) {\n                    <mat-icon class=\"ud-cal__slot-lock\">person</mat-icon>\n                  }\n                  @if (slot.title) {\n                    <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n                  } @else if (slotDensity(slot) === 'compact') {\n                    <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                  }\n                </div>\n                @if (slotDensity(slot) !== 'compact') {\n                  <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                }\n                @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n                  <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n                }\n              </div>\n            }\n            @if (draggingSlot && dragMoved && dragTarget && isSameDay(dragTarget.day, day)) {\n              <div\n                class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n                [style.top.px]=\"previewTop(dragTarget)\"\n                [style.height.px]=\"previewHeight()\"\n                [style.background]=\"slotBg(draggingSlot)\"\n                [style.color]=\"slotTextColor(draggingSlot)\"\n                [style.border-color]=\"slotBorderColor(draggingSlot)\">\n                @if (draggingSlot.title) {\n                  <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 MONTH VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'month') {\n    <div class=\"ud-cal__month\">\n      <div class=\"ud-cal__month-header\">\n        @for (name of ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; track name) {\n          <div class=\"ud-cal__month-day-name\">{{ name }}</div>\n        }\n      </div>\n      <div class=\"ud-cal__month-grid\">\n        @for (week of monthWeeks(); track $index) {\n          @for (day of week; track day.toISOString()) {\n            <div\n              class=\"ud-cal__month-cell\"\n              [class.ud-cal__month-cell--today]=\"isToday(day)\"\n              [class.ud-cal__month-cell--other]=\"!isCurrentMonth(day)\"\n              [class.ud-cal__month-cell--disabled]=\"isDayDisabled(day)\"\n              (click)=\"clickDay(day)\">\n              <span class=\"ud-cal__month-num\" [class.ud-cal__month-num--today]=\"isToday(day)\">\n                {{ dayNum(day) }}\n              </span>\n              <div class=\"ud-cal__month-dots\">\n                @for (slot of slotsForDay(day).slice(0, 3); track slot.id) {\n                  <span\n                    class=\"ud-cal__month-dot\"\n                    [style.background]=\"slotBorderColor(slot)\"\n                    [title]=\"slot.title ?? formatSlotTime(slot)\">\n                  </span>\n                }\n                @if (slotsForDay(day).length > 3) {\n                  <span class=\"ud-cal__month-more\">+{{ slotsForDay(day).length - 3 }}</span>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 DAY VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'day') {\n    <div class=\"ud-cal__week-scroll\" [style.max-height]=\"maxHeight()\">\n      <div class=\"ud-cal__week-header\">\n        <div class=\"ud-cal__time-gutter\"></div>\n        <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(navDate())\">\n          <span class=\"ud-cal__day-name\">{{ dayLabel(navDate()) }}</span>\n          <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(navDate())\">{{ dayNum(navDate()) }}</span>\n        </div>\n      </div>\n      <div class=\"ud-cal__week-grid\">\n        <div class=\"ud-cal__time-col\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div class=\"ud-cal__time-cell\">\n              @if (ts.label) {\n                <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(navDate())\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div\n              class=\"ud-cal__grid-cell\"\n              [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n              [class.ud-cal__grid-cell--disabled]=\"isCellDisabled(navDate(), ts.hour, ts.minute)\"\n              (click)=\"onCellClick(navDate(), ts.hour, ts.minute)\">\n            </div>\n          }\n          @for (slot of slotsForDay(navDate()); track slot.id) {\n            <div\n              class=\"ud-cal__slot\"\n              [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n              [class.ud-cal__slot--booked]=\"slot.booked\"\n              [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n              [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n              [style.top.px]=\"slotTop(slot)\"\n              [style.height.px]=\"slotHeight(slot)\"\n              [style.left.%]=\"slotLeft(slot)\"\n              [style.width.%]=\"slotWidth(slot)\"\n              [style.background]=\"slotBg(slot)\"\n              [style.color]=\"slotTextColor(slot)\"\n              [style.border-color]=\"slotBorderColor(slot)\"\n              (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n              (mouseleave)=\"closeHoverCard()\"\n              (mousedown)=\"onSlotMouseDown($event, slot)\">\n              <div class=\"ud-cal__slot-inner\">\n                @if (slot.booked) {\n                  <mat-icon class=\"ud-cal__slot-lock\">person</mat-icon>\n                }\n                @if (slot.title) {\n                  <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n                } @else if (slotDensity(slot) === 'compact') {\n                  <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                }\n              </div>\n              @if (slotDensity(slot) !== 'compact') {\n                <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n              }\n              @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n                <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n              }\n            </div>\n          }\n          @if (draggingSlot && dragMoved && dragTarget) {\n            <div\n              class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n              [style.top.px]=\"previewTop(dragTarget)\"\n              [style.height.px]=\"previewHeight()\"\n              [style.background]=\"slotBg(draggingSlot)\"\n              [style.color]=\"slotTextColor(draggingSlot)\"\n              [style.border-color]=\"slotBorderColor(draggingSlot)\">\n              @if (draggingSlot.title) {\n                <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n</div>\n\n<!-- \u2500\u2500 Rich hover card (rendered in a CDK overlay) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #hoverCard>\n  @if (hoverSlot(); as s) {\n    <div\n      class=\"ud-cal__hovercard\"\n      [class.ud-cal__hovercard--booked]=\"s.booked\"\n      [style.--hc-accent]=\"slotBorderColor(s)\"\n      (mouseenter)=\"cancelHoverClose()\"\n      (mouseleave)=\"closeHoverCard()\">\n      <span class=\"ud-cal__hovercard-bar\"></span>\n      <div class=\"ud-cal__hovercard-body\">\n        <div class=\"ud-cal__hovercard-head\">\n          <span class=\"ud-cal__hovercard-title\">{{ s.title || 'Untitled slot' }}</span>\n          <span class=\"ud-cal__hovercard-pill\" [class.ud-cal__hovercard-pill--booked]=\"s.booked\">\n            <span class=\"ud-cal__hovercard-pill-dot\"></span>\n            {{ s.booked ? 'Booked' : 'Available' }}\n          </span>\n        </div>\n\n        <div class=\"ud-cal__hovercard-row\">\n          <mat-icon class=\"ud-cal__hovercard-ico\">schedule</mat-icon>\n          <span class=\"ud-cal__hovercard-time\">{{ formatSlotTime(s) }}</span>\n          <span class=\"ud-cal__hovercard-dur\">{{ slotDurationLabel(s) }}</span>\n        </div>\n\n        @if (s.booked && s.bookedBy) {\n          <div class=\"ud-cal__hovercard-row ud-cal__hovercard-person\">\n            <span class=\"ud-cal__hovercard-avatar\" [style.background]=\"slotBorderColor(s)\">\n              {{ slotInitials(s.bookedBy) }}\n            </span>\n            <span class=\"ud-cal__hovercard-person-name\">{{ s.bookedBy }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n", styles: [":host{display:block;width:100%;font-family:DM Sans,system-ui,sans-serif}.ud-cal{position:relative;background:#fff;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:12px;box-shadow:0 2px 8px #1b25350f;overflow:hidden}.ud-cal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--eu-border-light, #e8eaef);gap:12px;flex-wrap:wrap}.ud-cal__nav{display:flex;align-items:center;gap:4px}.ud-cal__period{flex:1;text-align:center;font-size:14px;font-weight:600;color:var(--eu-text, #2a3548);white-space:nowrap}.ud-cal__header-right{display:flex;align-items:center;gap:10px}.ud-cal__view-switcher{display:flex;align-items:center;background:var(--eu-bg, #f4f5f7);border-radius:8px;padding:3px;gap:2px}.ud-cal__view-btn{padding:4px 12px;border:none;border-radius:6px;background:transparent;font-family:DM Sans,system-ui,sans-serif;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585);cursor:pointer;transition:background .15s,color .15s}.ud-cal__view-btn--active{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__view-btn:not(.ud-cal__view-btn--active):hover{background:#1b253514;color:var(--eu-text, #2a3548)}.ud-cal__week-scroll{overflow-y:auto;max-height:580px}.ud-cal__week-header{position:sticky;top:0;z-index:10;display:flex;background:#fafbfc;border-bottom:1px solid var(--eu-border-light, #e8eaef);flex-shrink:0}.ud-cal__time-gutter{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;gap:2px;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header:last-child{border-right:none}.ud-cal__day-header--today{background:#1b25350a}.ud-cal__day-name{font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em}.ud-cal__day-num{font-size:15px;font-weight:600;color:var(--eu-text, #2a3548)}.ud-cal__day-num--today{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--eu-navy, #1b2535);color:#fff;border-radius:50%;font-size:13px}.ud-cal__week-grid{display:flex}.ud-cal__time-col{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__time-cell{height:56px;position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:0 6px}.ud-cal__time-label{font-size:10px;color:var(--eu-muted, #9099a8);font-weight:500;white-space:nowrap;margin-top:-6px}.ud-cal__day-col{flex:1;position:relative;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-col:last-child{border-right:none}.ud-cal__day-col--today{background:#1b253506}.ud-cal__grid-cell{height:56px;border-bottom:1px solid var(--eu-border-light, #e8eaef);transition:background .1s;cursor:pointer}.ud-cal__grid-cell--half{border-bottom-style:dashed;border-bottom-color:#d8dde673}.ud-cal__grid-cell:hover{background:#1b253508}.ud-cal__grid-cell--disabled{cursor:not-allowed;background:repeating-linear-gradient(135deg,#1b253508,#1b253508 6px,#1b25350f 6px 12px)}.ud-cal__grid-cell--disabled:hover{background:repeating-linear-gradient(135deg,#1b253508,#1b253508 6px,#1b25350f 6px 12px)}.ud-cal__slot{position:absolute;margin-left:2px;box-sizing:border-box;border-left:3px solid;border-radius:6px;padding:3px 6px;display:flex;flex-direction:column;gap:1px;overflow:hidden;z-index:1;transition:filter .15s,transform .1s}.ud-cal__slot--clickable{cursor:grab}.ud-cal__slot--clickable:hover{filter:brightness(.93);transform:translate(1px)}.ud-cal__slot--cozy{padding:2px 6px;gap:0}.ud-cal__slot--compact{padding:1px 6px;gap:0;flex-direction:row;align-items:center;justify-content:flex-start}.ud-cal__slot-inner{display:flex;align-items:center;gap:3px;overflow:hidden;min-width:0}.ud-cal__slot-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;min-width:0}.ud-cal__slot-time{font-size:10px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.ud-cal__slot--dragging{opacity:.3;pointer-events:none}.ud-cal__slot--drag-preview{left:3px;right:3px;margin-left:0;pointer-events:none;opacity:.75;border-left-style:dashed;border-top:1px dashed currentColor;z-index:2}.ud-cal__slot--booked{border-left-width:4px;box-shadow:inset 0 0 0 1px #1b253514}.ud-cal__slot--booked .ud-cal__slot-title{font-weight:600}.ud-cal__slot:not(.ud-cal__slot--booked){border-left-style:dashed}.ud-cal__slot-lock{font-size:11px!important;width:11px!important;height:11px!important;line-height:11px!important;flex-shrink:0;opacity:.75}.ud-cal__slot-booked-by{font-size:9px;font-weight:500;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;margin-top:1px}.ud-cal__month{display:flex;flex-direction:column}.ud-cal__month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--eu-border-light, #e8eaef);background:#fafbfc}.ud-cal__month-day-name{text-align:center;padding:8px 4px;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__month-day-name:last-child{border-right:none}.ud-cal__month-grid{display:grid;grid-template-columns:repeat(7,1fr)}.ud-cal__month-cell{min-height:80px;padding:6px;border-right:1px solid var(--eu-border-light, #e8eaef);border-bottom:1px solid var(--eu-border-light, #e8eaef);cursor:pointer;transition:background .12s}.ud-cal__month-cell:nth-child(7n){border-right:none}.ud-cal__month-cell:hover{background:#1b253508}.ud-cal__month-cell--today{background:#1b25350a}.ud-cal__month-cell--other{opacity:.4}.ud-cal__month-cell--disabled{cursor:not-allowed;color:#1b253559;background:repeating-linear-gradient(135deg,#1b253505,#1b253505 6px,#1b25350d 6px 12px)}.ud-cal__month-cell--disabled:hover{background:repeating-linear-gradient(135deg,#1b253505,#1b253505 6px,#1b25350d 6px 12px)}.ud-cal__month-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:12px;font-weight:600;color:var(--eu-text, #2a3548);border-radius:50%}.ud-cal__month-num--today{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__month-dots{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-top:4px}.ud-cal__month-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ud-cal__month-more{font-size:9px;font-weight:600;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard{--hc-accent: var(--eu-navy, #1b2535);position:relative;display:flex;min-width:208px;max-width:288px;background:#fff;border:1px solid var(--eu-border-light, #e8eaef);border-radius:12px;overflow:hidden;font-family:DM Sans,system-ui,sans-serif;box-shadow:0 1px 2px #1b25350d,0 14px 30px -10px #1b25353d;transform-origin:top left;animation:ud-cal-hovercard-in .17s cubic-bezier(.16,1,.3,1) both}.ud-cal__hovercard:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--hc-accent) 6%,transparent),transparent 55%)}@keyframes ud-cal-hovercard-in{0%{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.ud-cal__hovercard-bar{width:4px;flex-shrink:0;background:var(--hc-accent)}.ud-cal__hovercard-body{position:relative;z-index:1;flex:1;min-width:0;padding:12px 14px 13px;display:flex;flex-direction:column;gap:9px}.ud-cal__hovercard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.ud-cal__hovercard-title{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--eu-text, #2a3548);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ud-cal__hovercard-pill{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:3px 9px 3px 7px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#1b253512;color:#1b253599}.ud-cal__hovercard-pill--booked{background:#1b25351f;color:var(--eu-navy)}.ud-cal__hovercard-pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}.ud-cal__hovercard-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard-ico{font-size:16px!important;width:16px!important;height:16px!important;line-height:16px!important;color:var(--hc-accent);opacity:.9}.ud-cal__hovercard-time{color:var(--eu-text, #2a3548);font-weight:600;font-variant-numeric:tabular-nums}.ud-cal__hovercard-dur{margin-left:auto;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);background:var(--eu-bg, #f4f5f7);border:1px solid var(--eu-border-light, #e8eaef);padding:1px 8px;border-radius:6px;white-space:nowrap}.ud-cal__hovercard-person{padding-top:8px;border-top:1px dashed var(--eu-border-light, #e8eaef)}.ud-cal__hovercard-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--hc-accent);color:#fff;font-size:9px;font-weight:700;letter-spacing:.03em;flex-shrink:0}.ud-cal__hovercard-person-name{color:var(--eu-text, #2a3548);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ud-calendar', standalone: true, imports: [MatIcon, UdButtonComponent], template: "<div class=\"ud-cal\" #calendarHost>\n\n  <!-- Header -->\n  <div class=\"ud-cal__header\">\n    <div class=\"ud-cal__nav\">\n      <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_left\" (click)=\"navigate(-1)\" />\n      <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_right\" (click)=\"navigate(1)\" />\n      <ud-button variant=\"stroked\" color=\"secondary\" size=\"sm\" (click)=\"goToday()\">Today</ud-button>\n    </div>\n\n    <span class=\"ud-cal__period\">{{ headerLabel() }}</span>\n\n    <div class=\"ud-cal__header-right\">\n      <div class=\"ud-cal__view-switcher\">\n        @for (v of viewOptions; track v.id) {\n          <button\n            class=\"ud-cal__view-btn\"\n            [class.ud-cal__view-btn--active]=\"activeView() === v.id\"\n            (click)=\"switchView(v.id)\"\n            type=\"button\">\n            {{ v.label }}\n          </button>\n        }\n      </div>\n      @if (mode() === 'admin') {\n        <ud-button variant=\"flat\" color=\"primary\" size=\"sm\" icon=\"add\" (click)=\"openAddModal()\">\n          Add slot\n        </ud-button>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 WEEK VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'week') {\n    <div class=\"ud-cal__week-scroll\" [style.max-height]=\"maxHeight()\">\n      <div class=\"ud-cal__week-header\">\n        <div class=\"ud-cal__time-gutter\"></div>\n        @for (day of weekDays(); track day.toISOString()) {\n          <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(day)\">\n            <span class=\"ud-cal__day-name\">{{ dayLabel(day) }}</span>\n            <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(day)\">{{ dayNum(day) }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"ud-cal__week-grid\">\n        <div class=\"ud-cal__time-col\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div class=\"ud-cal__time-cell\">\n              @if (ts.label) {\n                <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        @for (day of weekDays(); track day.toISOString()) {\n          <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(day)\">\n            @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n              <div\n                class=\"ud-cal__grid-cell\"\n                [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n                (click)=\"onCellClick(day, ts.hour, ts.minute)\">\n              </div>\n            }\n            @for (slot of slotsForDay(day); track slot.id) {\n              <div\n                class=\"ud-cal__slot\"\n                [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n                [class.ud-cal__slot--booked]=\"slot.booked\"\n                [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n                [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n                [style.top.px]=\"slotTop(slot)\"\n                [style.height.px]=\"slotHeight(slot)\"\n                [style.left.%]=\"slotLeft(slot)\"\n                [style.width.%]=\"slotWidth(slot)\"\n                [style.background]=\"slotBg(slot)\"\n                [style.color]=\"slotTextColor(slot)\"\n                [style.border-color]=\"slotBorderColor(slot)\"\n                (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n                (mouseleave)=\"closeHoverCard()\"\n                (mousedown)=\"onSlotMouseDown($event, slot)\">\n                <div class=\"ud-cal__slot-inner\">\n                  @if (slot.booked) {\n                    <mat-icon class=\"ud-cal__slot-lock\">person</mat-icon>\n                  }\n                  @if (slot.title) {\n                    <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n                  } @else if (slotDensity(slot) === 'compact') {\n                    <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                  }\n                </div>\n                @if (slotDensity(slot) !== 'compact') {\n                  <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                }\n                @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n                  <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n                }\n              </div>\n            }\n            @if (draggingSlot && dragMoved && dragTarget && isSameDay(dragTarget.day, day)) {\n              <div\n                class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n                [style.top.px]=\"previewTop(dragTarget)\"\n                [style.height.px]=\"previewHeight()\"\n                [style.background]=\"slotBg(draggingSlot)\"\n                [style.color]=\"slotTextColor(draggingSlot)\"\n                [style.border-color]=\"slotBorderColor(draggingSlot)\">\n                @if (draggingSlot.title) {\n                  <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 MONTH VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'month') {\n    <div class=\"ud-cal__month\">\n      <div class=\"ud-cal__month-header\">\n        @for (name of ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; track name) {\n          <div class=\"ud-cal__month-day-name\">{{ name }}</div>\n        }\n      </div>\n      <div class=\"ud-cal__month-grid\">\n        @for (week of monthWeeks(); track $index) {\n          @for (day of week; track day.toISOString()) {\n            <div\n              class=\"ud-cal__month-cell\"\n              [class.ud-cal__month-cell--today]=\"isToday(day)\"\n              [class.ud-cal__month-cell--other]=\"!isCurrentMonth(day)\"\n              (click)=\"clickDay(day)\">\n              <span class=\"ud-cal__month-num\" [class.ud-cal__month-num--today]=\"isToday(day)\">\n                {{ dayNum(day) }}\n              </span>\n              <div class=\"ud-cal__month-dots\">\n                @for (slot of slotsForDay(day).slice(0, 3); track slot.id) {\n                  <span\n                    class=\"ud-cal__month-dot\"\n                    [style.background]=\"slotBorderColor(slot)\"\n                    [title]=\"slot.title ?? formatSlotTime(slot)\">\n                  </span>\n                }\n                @if (slotsForDay(day).length > 3) {\n                  <span class=\"ud-cal__month-more\">+{{ slotsForDay(day).length - 3 }}</span>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 DAY VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'day') {\n    <div class=\"ud-cal__week-scroll\" [style.max-height]=\"maxHeight()\">\n      <div class=\"ud-cal__week-header\">\n        <div class=\"ud-cal__time-gutter\"></div>\n        <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(navDate())\">\n          <span class=\"ud-cal__day-name\">{{ dayLabel(navDate()) }}</span>\n          <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(navDate())\">{{ dayNum(navDate()) }}</span>\n        </div>\n      </div>\n      <div class=\"ud-cal__week-grid\">\n        <div class=\"ud-cal__time-col\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div class=\"ud-cal__time-cell\">\n              @if (ts.label) {\n                <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(navDate())\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div\n              class=\"ud-cal__grid-cell\"\n              [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n              (click)=\"onCellClick(navDate(), ts.hour, ts.minute)\">\n            </div>\n          }\n          @for (slot of slotsForDay(navDate()); track slot.id) {\n            <div\n              class=\"ud-cal__slot\"\n              [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n              [class.ud-cal__slot--booked]=\"slot.booked\"\n              [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n              [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n              [style.top.px]=\"slotTop(slot)\"\n              [style.height.px]=\"slotHeight(slot)\"\n              [style.left.%]=\"slotLeft(slot)\"\n              [style.width.%]=\"slotWidth(slot)\"\n              [style.background]=\"slotBg(slot)\"\n              [style.color]=\"slotTextColor(slot)\"\n              [style.border-color]=\"slotBorderColor(slot)\"\n              (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n              (mouseleave)=\"closeHoverCard()\"\n              (mousedown)=\"onSlotMouseDown($event, slot)\">\n              <div class=\"ud-cal__slot-inner\">\n                @if (slot.booked) {\n                  <mat-icon class=\"ud-cal__slot-lock\">person</mat-icon>\n                }\n                @if (slot.title) {\n                  <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n                } @else if (slotDensity(slot) === 'compact') {\n                  <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                }\n              </div>\n              @if (slotDensity(slot) !== 'compact') {\n                <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n              }\n              @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n                <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n              }\n            </div>\n          }\n          @if (draggingSlot && dragMoved && dragTarget) {\n            <div\n              class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n              [style.top.px]=\"previewTop(dragTarget)\"\n              [style.height.px]=\"previewHeight()\"\n              [style.background]=\"slotBg(draggingSlot)\"\n              [style.color]=\"slotTextColor(draggingSlot)\"\n              [style.border-color]=\"slotBorderColor(draggingSlot)\">\n              @if (draggingSlot.title) {\n                <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n</div>\n\n<!-- \u2500\u2500 Rich hover card (rendered in a CDK overlay) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #hoverCard>\n  @if (hoverSlot(); as s) {\n    <div\n      class=\"ud-cal__hovercard\"\n      [class.ud-cal__hovercard--booked]=\"s.booked\"\n      [style.--hc-accent]=\"slotBorderColor(s)\"\n      (mouseenter)=\"cancelHoverClose()\"\n      (mouseleave)=\"closeHoverCard()\">\n      <span class=\"ud-cal__hovercard-bar\"></span>\n      <div class=\"ud-cal__hovercard-body\">\n        <div class=\"ud-cal__hovercard-head\">\n          <span class=\"ud-cal__hovercard-title\">{{ s.title || 'Untitled slot' }}</span>\n          <span class=\"ud-cal__hovercard-pill\" [class.ud-cal__hovercard-pill--booked]=\"s.booked\">\n            <span class=\"ud-cal__hovercard-pill-dot\"></span>\n            {{ s.booked ? 'Booked' : 'Available' }}\n          </span>\n        </div>\n\n        <div class=\"ud-cal__hovercard-row\">\n          <mat-icon class=\"ud-cal__hovercard-ico\">schedule</mat-icon>\n          <span class=\"ud-cal__hovercard-time\">{{ formatSlotTime(s) }}</span>\n          <span class=\"ud-cal__hovercard-dur\">{{ slotDurationLabel(s) }}</span>\n        </div>\n\n        @if (s.booked && s.bookedBy) {\n          <div class=\"ud-cal__hovercard-row ud-cal__hovercard-person\">\n            <span class=\"ud-cal__hovercard-avatar\" [style.background]=\"slotBorderColor(s)\">\n              {{ slotInitials(s.bookedBy) }}\n            </span>\n            <span class=\"ud-cal__hovercard-person-name\">{{ s.bookedBy }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n", styles: [":host{display:block;width:100%;font-family:DM Sans,system-ui,sans-serif}.ud-cal{position:relative;background:#fff;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:12px;box-shadow:0 2px 8px #1b25350f;overflow:hidden}.ud-cal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--eu-border-light, #e8eaef);gap:12px;flex-wrap:wrap}.ud-cal__nav{display:flex;align-items:center;gap:4px}.ud-cal__period{flex:1;text-align:center;font-size:14px;font-weight:600;color:var(--eu-text, #2a3548);white-space:nowrap}.ud-cal__header-right{display:flex;align-items:center;gap:10px}.ud-cal__view-switcher{display:flex;align-items:center;background:var(--eu-bg, #f4f5f7);border-radius:8px;padding:3px;gap:2px}.ud-cal__view-btn{padding:4px 12px;border:none;border-radius:6px;background:transparent;font-family:DM Sans,system-ui,sans-serif;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585);cursor:pointer;transition:background .15s,color .15s}.ud-cal__view-btn--active{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__view-btn:not(.ud-cal__view-btn--active):hover{background:#1b253514;color:var(--eu-text, #2a3548)}.ud-cal__week-scroll{overflow-y:auto;max-height:580px}.ud-cal__week-header{position:sticky;top:0;z-index:10;display:flex;background:#fafbfc;border-bottom:1px solid var(--eu-border-light, #e8eaef);flex-shrink:0}.ud-cal__time-gutter{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;gap:2px;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header:last-child{border-right:none}.ud-cal__day-header--today{background:#1b25350a}.ud-cal__day-name{font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em}.ud-cal__day-num{font-size:15px;font-weight:600;color:var(--eu-text, #2a3548)}.ud-cal__day-num--today{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--eu-navy, #1b2535);color:#fff;border-radius:50%;font-size:13px}.ud-cal__week-grid{display:flex}.ud-cal__time-col{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__time-cell{height:56px;position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:0 6px}.ud-cal__time-label{font-size:10px;color:var(--eu-muted, #9099a8);font-weight:500;white-space:nowrap;margin-top:-6px}.ud-cal__day-col{flex:1;position:relative;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-col:last-child{border-right:none}.ud-cal__day-col--today{background:#1b253506}.ud-cal__grid-cell{height:56px;border-bottom:1px solid var(--eu-border-light, #e8eaef);transition:background .1s;cursor:pointer}.ud-cal__grid-cell--half{border-bottom-style:dashed;border-bottom-color:#d8dde673}.ud-cal__grid-cell:hover{background:#1b253508}.ud-cal__slot{position:absolute;margin-left:2px;box-sizing:border-box;border-left:3px solid;border-radius:6px;padding:3px 6px;display:flex;flex-direction:column;gap:1px;overflow:hidden;z-index:1;transition:filter .15s,transform .1s}.ud-cal__slot--clickable{cursor:grab}.ud-cal__slot--clickable:hover{filter:brightness(.93);transform:translate(1px)}.ud-cal__slot--cozy{padding:2px 6px;gap:0}.ud-cal__slot--compact{padding:1px 6px;gap:0;flex-direction:row;align-items:center;justify-content:flex-start}.ud-cal__slot-inner{display:flex;align-items:center;gap:3px;overflow:hidden;min-width:0}.ud-cal__slot-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;min-width:0}.ud-cal__slot-time{font-size:10px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.ud-cal__slot--dragging{opacity:.3;pointer-events:none}.ud-cal__slot--drag-preview{left:3px;right:3px;margin-left:0;pointer-events:none;opacity:.75;border-left-style:dashed;border-top:1px dashed currentColor;z-index:2}.ud-cal__slot--booked{border-left-width:4px;box-shadow:inset 0 0 0 1px #1b253514}.ud-cal__slot--booked .ud-cal__slot-title{font-weight:600}.ud-cal__slot:not(.ud-cal__slot--booked){border-left-style:dashed}.ud-cal__slot-lock{font-size:11px!important;width:11px!important;height:11px!important;line-height:11px!important;flex-shrink:0;opacity:.75}.ud-cal__slot-booked-by{font-size:9px;font-weight:500;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;margin-top:1px}.ud-cal__month{display:flex;flex-direction:column}.ud-cal__month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--eu-border-light, #e8eaef);background:#fafbfc}.ud-cal__month-day-name{text-align:center;padding:8px 4px;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__month-day-name:last-child{border-right:none}.ud-cal__month-grid{display:grid;grid-template-columns:repeat(7,1fr)}.ud-cal__month-cell{min-height:80px;padding:6px;border-right:1px solid var(--eu-border-light, #e8eaef);border-bottom:1px solid var(--eu-border-light, #e8eaef);cursor:pointer;transition:background .12s}.ud-cal__month-cell:nth-child(7n){border-right:none}.ud-cal__month-cell:hover{background:#1b253508}.ud-cal__month-cell--today{background:#1b25350a}.ud-cal__month-cell--other{opacity:.4}.ud-cal__month-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:12px;font-weight:600;color:var(--eu-text, #2a3548);border-radius:50%}.ud-cal__month-num--today{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__month-dots{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-top:4px}.ud-cal__month-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ud-cal__month-more{font-size:9px;font-weight:600;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard{--hc-accent: var(--eu-navy, #1b2535);position:relative;display:flex;min-width:208px;max-width:288px;background:#fff;border:1px solid var(--eu-border-light, #e8eaef);border-radius:12px;overflow:hidden;font-family:DM Sans,system-ui,sans-serif;box-shadow:0 1px 2px #1b25350d,0 14px 30px -10px #1b25353d;transform-origin:top left;animation:ud-cal-hovercard-in .17s cubic-bezier(.16,1,.3,1) both}.ud-cal__hovercard:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--hc-accent) 6%,transparent),transparent 55%)}@keyframes ud-cal-hovercard-in{0%{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.ud-cal__hovercard-bar{width:4px;flex-shrink:0;background:var(--hc-accent)}.ud-cal__hovercard-body{position:relative;z-index:1;flex:1;min-width:0;padding:12px 14px 13px;display:flex;flex-direction:column;gap:9px}.ud-cal__hovercard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.ud-cal__hovercard-title{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--eu-text, #2a3548);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ud-cal__hovercard-pill{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:3px 9px 3px 7px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#1b253512;color:#1b253599}.ud-cal__hovercard-pill--booked{background:#1b25351f;color:var(--eu-navy)}.ud-cal__hovercard-pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}.ud-cal__hovercard-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard-ico{font-size:16px!important;width:16px!important;height:16px!important;line-height:16px!important;color:var(--hc-accent);opacity:.9}.ud-cal__hovercard-time{color:var(--eu-text, #2a3548);font-weight:600;font-variant-numeric:tabular-nums}.ud-cal__hovercard-dur{margin-left:auto;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);background:var(--eu-bg, #f4f5f7);border:1px solid var(--eu-border-light, #e8eaef);padding:1px 8px;border-radius:6px;white-space:nowrap}.ud-cal__hovercard-person{padding-top:8px;border-top:1px dashed var(--eu-border-light, #e8eaef)}.ud-cal__hovercard-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--hc-accent);color:#fff;font-size:9px;font-weight:700;letter-spacing:.03em;flex-shrink:0}.ud-cal__hovercard-person-name{color:var(--eu-text, #2a3548);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'ud-calendar', standalone: true, imports: [MatIcon, UdButtonComponent], template: "<div class=\"ud-cal\" #calendarHost>\n\n  <!-- Header -->\n  <div class=\"ud-cal__header\">\n    <div class=\"ud-cal__nav\">\n      <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_left\" (click)=\"navigate(-1)\" />\n      <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_right\" (click)=\"navigate(1)\" />\n      <ud-button variant=\"stroked\" color=\"secondary\" size=\"sm\" (click)=\"goToday()\">Today</ud-button>\n    </div>\n\n    <span class=\"ud-cal__period\">{{ headerLabel() }}</span>\n\n    <div class=\"ud-cal__header-right\">\n      <div class=\"ud-cal__view-switcher\">\n        @for (v of viewOptions; track v.id) {\n          <button\n            class=\"ud-cal__view-btn\"\n            [class.ud-cal__view-btn--active]=\"activeView() === v.id\"\n            (click)=\"switchView(v.id)\"\n            type=\"button\">\n            {{ v.label }}\n          </button>\n        }\n      </div>\n      @if (mode() === 'admin') {\n        <ud-button variant=\"flat\" color=\"primary\" size=\"sm\" icon=\"add\" (click)=\"openAddModal()\">\n          Add slot\n        </ud-button>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 WEEK VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'week') {\n    <div class=\"ud-cal__week-scroll\" [style.max-height]=\"maxHeight()\">\n      <div class=\"ud-cal__week-header\">\n        <div class=\"ud-cal__time-gutter\"></div>\n        @for (day of weekDays(); track day.toISOString()) {\n          <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(day)\">\n            <span class=\"ud-cal__day-name\">{{ dayLabel(day) }}</span>\n            <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(day)\">{{ dayNum(day) }}</span>\n          </div>\n        }\n      </div>\n      <div class=\"ud-cal__week-grid\">\n        <div class=\"ud-cal__time-col\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div class=\"ud-cal__time-cell\">\n              @if (ts.label) {\n                <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        @for (day of weekDays(); track day.toISOString()) {\n          <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(day)\">\n            @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n              <div\n                class=\"ud-cal__grid-cell\"\n                [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n                [class.ud-cal__grid-cell--disabled]=\"isCellDisabled(day, ts.hour, ts.minute)\"\n                (click)=\"onCellClick(day, ts.hour, ts.minute)\">\n              </div>\n            }\n            @for (slot of slotsForDay(day); track slot.id) {\n              <div\n                class=\"ud-cal__slot\"\n                [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n                [class.ud-cal__slot--booked]=\"slot.booked\"\n                [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n                [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n                [style.top.px]=\"slotTop(slot)\"\n                [style.height.px]=\"slotHeight(slot)\"\n                [style.left.%]=\"slotLeft(slot)\"\n                [style.width.%]=\"slotWidth(slot)\"\n                [style.background]=\"slotBg(slot)\"\n                [style.color]=\"slotTextColor(slot)\"\n                [style.border-color]=\"slotBorderColor(slot)\"\n                (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n                (mouseleave)=\"closeHoverCard()\"\n                (mousedown)=\"onSlotMouseDown($event, slot)\">\n                <div class=\"ud-cal__slot-inner\">\n                  @if (slot.booked) {\n                    <mat-icon class=\"ud-cal__slot-lock\">person</mat-icon>\n                  }\n                  @if (slot.title) {\n                    <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n                  } @else if (slotDensity(slot) === 'compact') {\n                    <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                  }\n                </div>\n                @if (slotDensity(slot) !== 'compact') {\n                  <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                }\n                @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n                  <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n                }\n              </div>\n            }\n            @if (draggingSlot && dragMoved && dragTarget && isSameDay(dragTarget.day, day)) {\n              <div\n                class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n                [style.top.px]=\"previewTop(dragTarget)\"\n                [style.height.px]=\"previewHeight()\"\n                [style.background]=\"slotBg(draggingSlot)\"\n                [style.color]=\"slotTextColor(draggingSlot)\"\n                [style.border-color]=\"slotBorderColor(draggingSlot)\">\n                @if (draggingSlot.title) {\n                  <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 MONTH VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'month') {\n    <div class=\"ud-cal__month\">\n      <div class=\"ud-cal__month-header\">\n        @for (name of ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; track name) {\n          <div class=\"ud-cal__month-day-name\">{{ name }}</div>\n        }\n      </div>\n      <div class=\"ud-cal__month-grid\">\n        @for (week of monthWeeks(); track $index) {\n          @for (day of week; track day.toISOString()) {\n            <div\n              class=\"ud-cal__month-cell\"\n              [class.ud-cal__month-cell--today]=\"isToday(day)\"\n              [class.ud-cal__month-cell--other]=\"!isCurrentMonth(day)\"\n              [class.ud-cal__month-cell--disabled]=\"isDayDisabled(day)\"\n              (click)=\"clickDay(day)\">\n              <span class=\"ud-cal__month-num\" [class.ud-cal__month-num--today]=\"isToday(day)\">\n                {{ dayNum(day) }}\n              </span>\n              <div class=\"ud-cal__month-dots\">\n                @for (slot of slotsForDay(day).slice(0, 3); track slot.id) {\n                  <span\n                    class=\"ud-cal__month-dot\"\n                    [style.background]=\"slotBorderColor(slot)\"\n                    [title]=\"slot.title ?? formatSlotTime(slot)\">\n                  </span>\n                }\n                @if (slotsForDay(day).length > 3) {\n                  <span class=\"ud-cal__month-more\">+{{ slotsForDay(day).length - 3 }}</span>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- \u2500\u2500 DAY VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (activeView() === 'day') {\n    <div class=\"ud-cal__week-scroll\" [style.max-height]=\"maxHeight()\">\n      <div class=\"ud-cal__week-header\">\n        <div class=\"ud-cal__time-gutter\"></div>\n        <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(navDate())\">\n          <span class=\"ud-cal__day-name\">{{ dayLabel(navDate()) }}</span>\n          <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(navDate())\">{{ dayNum(navDate()) }}</span>\n        </div>\n      </div>\n      <div class=\"ud-cal__week-grid\">\n        <div class=\"ud-cal__time-col\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div class=\"ud-cal__time-cell\">\n              @if (ts.label) {\n                <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(navDate())\">\n          @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n            <div\n              class=\"ud-cal__grid-cell\"\n              [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n              [class.ud-cal__grid-cell--disabled]=\"isCellDisabled(navDate(), ts.hour, ts.minute)\"\n              (click)=\"onCellClick(navDate(), ts.hour, ts.minute)\">\n            </div>\n          }\n          @for (slot of slotsForDay(navDate()); track slot.id) {\n            <div\n              class=\"ud-cal__slot\"\n              [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n              [class.ud-cal__slot--booked]=\"slot.booked\"\n              [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n              [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n              [style.top.px]=\"slotTop(slot)\"\n              [style.height.px]=\"slotHeight(slot)\"\n              [style.left.%]=\"slotLeft(slot)\"\n              [style.width.%]=\"slotWidth(slot)\"\n              [style.background]=\"slotBg(slot)\"\n              [style.color]=\"slotTextColor(slot)\"\n              [style.border-color]=\"slotBorderColor(slot)\"\n              (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n              (mouseleave)=\"closeHoverCard()\"\n              (mousedown)=\"onSlotMouseDown($event, slot)\">\n              <div class=\"ud-cal__slot-inner\">\n                @if (slot.booked) {\n                  <mat-icon class=\"ud-cal__slot-lock\">person</mat-icon>\n                }\n                @if (slot.title) {\n                  <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n                } @else if (slotDensity(slot) === 'compact') {\n                  <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                }\n              </div>\n              @if (slotDensity(slot) !== 'compact') {\n                <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n              }\n              @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n                <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n              }\n            </div>\n          }\n          @if (draggingSlot && dragMoved && dragTarget) {\n            <div\n              class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n              [style.top.px]=\"previewTop(dragTarget)\"\n              [style.height.px]=\"previewHeight()\"\n              [style.background]=\"slotBg(draggingSlot)\"\n              [style.color]=\"slotTextColor(draggingSlot)\"\n              [style.border-color]=\"slotBorderColor(draggingSlot)\">\n              @if (draggingSlot.title) {\n                <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n</div>\n\n<!-- \u2500\u2500 Rich hover card (rendered in a CDK overlay) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #hoverCard>\n  @if (hoverSlot(); as s) {\n    <div\n      class=\"ud-cal__hovercard\"\n      [class.ud-cal__hovercard--booked]=\"s.booked\"\n      [style.--hc-accent]=\"slotBorderColor(s)\"\n      (mouseenter)=\"cancelHoverClose()\"\n      (mouseleave)=\"closeHoverCard()\">\n      <span class=\"ud-cal__hovercard-bar\"></span>\n      <div class=\"ud-cal__hovercard-body\">\n        <div class=\"ud-cal__hovercard-head\">\n          <span class=\"ud-cal__hovercard-title\">{{ s.title || 'Untitled slot' }}</span>\n          <span class=\"ud-cal__hovercard-pill\" [class.ud-cal__hovercard-pill--booked]=\"s.booked\">\n            <span class=\"ud-cal__hovercard-pill-dot\"></span>\n            {{ s.booked ? 'Booked' : 'Available' }}\n          </span>\n        </div>\n\n        <div class=\"ud-cal__hovercard-row\">\n          <mat-icon class=\"ud-cal__hovercard-ico\">schedule</mat-icon>\n          <span class=\"ud-cal__hovercard-time\">{{ formatSlotTime(s) }}</span>\n          <span class=\"ud-cal__hovercard-dur\">{{ slotDurationLabel(s) }}</span>\n        </div>\n\n        @if (s.booked && s.bookedBy) {\n          <div class=\"ud-cal__hovercard-row ud-cal__hovercard-person\">\n            <span class=\"ud-cal__hovercard-avatar\" [style.background]=\"slotBorderColor(s)\">\n              {{ slotInitials(s.bookedBy) }}\n            </span>\n            <span class=\"ud-cal__hovercard-person-name\">{{ s.bookedBy }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n", styles: [":host{display:block;width:100%;font-family:DM Sans,system-ui,sans-serif}.ud-cal{position:relative;background:#fff;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:12px;box-shadow:0 2px 8px #1b25350f;overflow:hidden}.ud-cal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--eu-border-light, #e8eaef);gap:12px;flex-wrap:wrap}.ud-cal__nav{display:flex;align-items:center;gap:4px}.ud-cal__period{flex:1;text-align:center;font-size:14px;font-weight:600;color:var(--eu-text, #2a3548);white-space:nowrap}.ud-cal__header-right{display:flex;align-items:center;gap:10px}.ud-cal__view-switcher{display:flex;align-items:center;background:var(--eu-bg, #f4f5f7);border-radius:8px;padding:3px;gap:2px}.ud-cal__view-btn{padding:4px 12px;border:none;border-radius:6px;background:transparent;font-family:DM Sans,system-ui,sans-serif;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585);cursor:pointer;transition:background .15s,color .15s}.ud-cal__view-btn--active{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__view-btn:not(.ud-cal__view-btn--active):hover{background:#1b253514;color:var(--eu-text, #2a3548)}.ud-cal__week-scroll{overflow-y:auto;max-height:580px}.ud-cal__week-header{position:sticky;top:0;z-index:10;display:flex;background:#fafbfc;border-bottom:1px solid var(--eu-border-light, #e8eaef);flex-shrink:0}.ud-cal__time-gutter{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;gap:2px;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header:last-child{border-right:none}.ud-cal__day-header--today{background:#1b25350a}.ud-cal__day-name{font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em}.ud-cal__day-num{font-size:15px;font-weight:600;color:var(--eu-text, #2a3548)}.ud-cal__day-num--today{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--eu-navy, #1b2535);color:#fff;border-radius:50%;font-size:13px}.ud-cal__week-grid{display:flex}.ud-cal__time-col{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__time-cell{height:56px;position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:0 6px}.ud-cal__time-label{font-size:10px;color:var(--eu-muted, #9099a8);font-weight:500;white-space:nowrap;margin-top:-6px}.ud-cal__day-col{flex:1;position:relative;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-col:last-child{border-right:none}.ud-cal__day-col--today{background:#1b253506}.ud-cal__grid-cell{height:56px;border-bottom:1px solid var(--eu-border-light, #e8eaef);transition:background .1s;cursor:pointer}.ud-cal__grid-cell--half{border-bottom-style:dashed;border-bottom-color:#d8dde673}.ud-cal__grid-cell:hover{background:#1b253508}.ud-cal__grid-cell--disabled{cursor:not-allowed;background:repeating-linear-gradient(135deg,#1b253508,#1b253508 6px,#1b25350f 6px 12px)}.ud-cal__grid-cell--disabled:hover{background:repeating-linear-gradient(135deg,#1b253508,#1b253508 6px,#1b25350f 6px 12px)}.ud-cal__slot{position:absolute;margin-left:2px;box-sizing:border-box;border-left:3px solid;border-radius:6px;padding:3px 6px;display:flex;flex-direction:column;gap:1px;overflow:hidden;z-index:1;transition:filter .15s,transform .1s}.ud-cal__slot--clickable{cursor:grab}.ud-cal__slot--clickable:hover{filter:brightness(.93);transform:translate(1px)}.ud-cal__slot--cozy{padding:2px 6px;gap:0}.ud-cal__slot--compact{padding:1px 6px;gap:0;flex-direction:row;align-items:center;justify-content:flex-start}.ud-cal__slot-inner{display:flex;align-items:center;gap:3px;overflow:hidden;min-width:0}.ud-cal__slot-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;min-width:0}.ud-cal__slot-time{font-size:10px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.ud-cal__slot--dragging{opacity:.3;pointer-events:none}.ud-cal__slot--drag-preview{left:3px;right:3px;margin-left:0;pointer-events:none;opacity:.75;border-left-style:dashed;border-top:1px dashed currentColor;z-index:2}.ud-cal__slot--booked{border-left-width:4px;box-shadow:inset 0 0 0 1px #1b253514}.ud-cal__slot--booked .ud-cal__slot-title{font-weight:600}.ud-cal__slot:not(.ud-cal__slot--booked){border-left-style:dashed}.ud-cal__slot-lock{font-size:11px!important;width:11px!important;height:11px!important;line-height:11px!important;flex-shrink:0;opacity:.75}.ud-cal__slot-booked-by{font-size:9px;font-weight:500;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;margin-top:1px}.ud-cal__month{display:flex;flex-direction:column}.ud-cal__month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--eu-border-light, #e8eaef);background:#fafbfc}.ud-cal__month-day-name{text-align:center;padding:8px 4px;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__month-day-name:last-child{border-right:none}.ud-cal__month-grid{display:grid;grid-template-columns:repeat(7,1fr)}.ud-cal__month-cell{min-height:80px;padding:6px;border-right:1px solid var(--eu-border-light, #e8eaef);border-bottom:1px solid var(--eu-border-light, #e8eaef);cursor:pointer;transition:background .12s}.ud-cal__month-cell:nth-child(7n){border-right:none}.ud-cal__month-cell:hover{background:#1b253508}.ud-cal__month-cell--today{background:#1b25350a}.ud-cal__month-cell--other{opacity:.4}.ud-cal__month-cell--disabled{cursor:not-allowed;color:#1b253559;background:repeating-linear-gradient(135deg,#1b253505,#1b253505 6px,#1b25350d 6px 12px)}.ud-cal__month-cell--disabled:hover{background:repeating-linear-gradient(135deg,#1b253505,#1b253505 6px,#1b25350d 6px 12px)}.ud-cal__month-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:12px;font-weight:600;color:var(--eu-text, #2a3548);border-radius:50%}.ud-cal__month-num--today{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__month-dots{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-top:4px}.ud-cal__month-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ud-cal__month-more{font-size:9px;font-weight:600;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard{--hc-accent: var(--eu-navy, #1b2535);position:relative;display:flex;min-width:208px;max-width:288px;background:#fff;border:1px solid var(--eu-border-light, #e8eaef);border-radius:12px;overflow:hidden;font-family:DM Sans,system-ui,sans-serif;box-shadow:0 1px 2px #1b25350d,0 14px 30px -10px #1b25353d;transform-origin:top left;animation:ud-cal-hovercard-in .17s cubic-bezier(.16,1,.3,1) both}.ud-cal__hovercard:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--hc-accent) 6%,transparent),transparent 55%)}@keyframes ud-cal-hovercard-in{0%{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.ud-cal__hovercard-bar{width:4px;flex-shrink:0;background:var(--hc-accent)}.ud-cal__hovercard-body{position:relative;z-index:1;flex:1;min-width:0;padding:12px 14px 13px;display:flex;flex-direction:column;gap:9px}.ud-cal__hovercard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.ud-cal__hovercard-title{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--eu-text, #2a3548);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ud-cal__hovercard-pill{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:3px 9px 3px 7px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#1b253512;color:#1b253599}.ud-cal__hovercard-pill--booked{background:#1b25351f;color:var(--eu-navy)}.ud-cal__hovercard-pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}.ud-cal__hovercard-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard-ico{font-size:16px!important;width:16px!important;height:16px!important;line-height:16px!important;color:var(--hc-accent);opacity:.9}.ud-cal__hovercard-time{color:var(--eu-text, #2a3548);font-weight:600;font-variant-numeric:tabular-nums}.ud-cal__hovercard-dur{margin-left:auto;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);background:var(--eu-bg, #f4f5f7);border:1px solid var(--eu-border-light, #e8eaef);padding:1px 8px;border-radius:6px;white-space:nowrap}.ud-cal__hovercard-person{padding-top:8px;border-top:1px dashed var(--eu-border-light, #e8eaef)}.ud-cal__hovercard-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--hc-accent);color:#fff;font-size:9px;font-weight:700;letter-spacing:.03em;flex-shrink:0}.ud-cal__hovercard-person-name{color:var(--eu-text, #2a3548);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onDocMouseMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
@@ -3978,18 +4118,25 @@ class UdPreviewContainerComponent {
     title = '';
     icon;
     padding = '24px';
+    /** Whether the panel starts collapsed. */
+    collapsed = false;
+    toggle() {
+        this.collapsed = !this.collapsed;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdPreviewContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: UdPreviewContainerComponent, isStandalone: true, selector: "ud-preview-container", inputs: { title: "title", icon: "icon", padding: "padding" }, ngImport: i0, template: "<div class=\"preview-container\">\n  <div class=\"section-title\">\n    @if (icon) {\n      <span class=\"material-icons\">{{ icon }}</span>\n    }\n    {{ title }}\n  </div>\n  <div class=\"section-content\" [style.padding]=\"padding\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block}.preview-container{background:#fff;border:1px solid #e1e4e8;border-radius:8px;margin-bottom:24px;overflow:hidden}.preview-container .section-title{padding:14px 20px;background:#f6f8fa;border-bottom:1px solid #e1e4e8;font-size:13px;font-weight:600;color:#374151;display:flex;align-items:center;gap:8px}.preview-container .section-title .material-icons{font-size:16px;color:#6c7086}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: UdPreviewContainerComponent, isStandalone: true, selector: "ud-preview-container", inputs: { title: "title", icon: "icon", padding: "padding", collapsed: "collapsed" }, ngImport: i0, template: "<div class=\"preview-container\" [class.preview-container--collapsed]=\"collapsed\">\n  <button class=\"section-title\" type=\"button\" (click)=\"toggle()\" [attr.aria-expanded]=\"!collapsed\">\n    @if (icon) {\n      <span class=\"material-icons\">{{ icon }}</span>\n    }\n    <span class=\"section-title__text\">{{ title }}</span>\n    <span class=\"material-icons section-title__chevron\">expand_more</span>\n  </button>\n  @if (!collapsed) {\n    <div class=\"section-content\" [style.padding]=\"padding\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.preview-container{background:#fff;border:1px solid #e1e4e8;border-radius:8px;margin-bottom:24px;overflow:hidden}.preview-container .section-title{width:100%;padding:14px 20px;background:#f6f8fa;border:none;border-bottom:1px solid #e1e4e8;font-family:inherit;font-size:13px;font-weight:600;color:#374151;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;transition:background .15s}.preview-container .section-title:hover{background:#eef1f5}.preview-container .section-title .material-icons{font-size:16px;color:#6c7086}.preview-container .section-title .section-title__text{flex:1}.preview-container .section-title .section-title__chevron{transition:transform .2s ease}.preview-container--collapsed .section-title{border-bottom:none}.preview-container--collapsed .section-title__chevron{transform:rotate(-90deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdPreviewContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ud-preview-container', standalone: true, imports: [CommonModule], template: "<div class=\"preview-container\">\n  <div class=\"section-title\">\n    @if (icon) {\n      <span class=\"material-icons\">{{ icon }}</span>\n    }\n    {{ title }}\n  </div>\n  <div class=\"section-content\" [style.padding]=\"padding\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block}.preview-container{background:#fff;border:1px solid #e1e4e8;border-radius:8px;margin-bottom:24px;overflow:hidden}.preview-container .section-title{padding:14px 20px;background:#f6f8fa;border-bottom:1px solid #e1e4e8;font-size:13px;font-weight:600;color:#374151;display:flex;align-items:center;gap:8px}.preview-container .section-title .material-icons{font-size:16px;color:#6c7086}\n"] }]
+            args: [{ selector: 'ud-preview-container', standalone: true, imports: [CommonModule], template: "<div class=\"preview-container\" [class.preview-container--collapsed]=\"collapsed\">\n  <button class=\"section-title\" type=\"button\" (click)=\"toggle()\" [attr.aria-expanded]=\"!collapsed\">\n    @if (icon) {\n      <span class=\"material-icons\">{{ icon }}</span>\n    }\n    <span class=\"section-title__text\">{{ title }}</span>\n    <span class=\"material-icons section-title__chevron\">expand_more</span>\n  </button>\n  @if (!collapsed) {\n    <div class=\"section-content\" [style.padding]=\"padding\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.preview-container{background:#fff;border:1px solid #e1e4e8;border-radius:8px;margin-bottom:24px;overflow:hidden}.preview-container .section-title{width:100%;padding:14px 20px;background:#f6f8fa;border:none;border-bottom:1px solid #e1e4e8;font-family:inherit;font-size:13px;font-weight:600;color:#374151;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;transition:background .15s}.preview-container .section-title:hover{background:#eef1f5}.preview-container .section-title .material-icons{font-size:16px;color:#6c7086}.preview-container .section-title .section-title__text{flex:1}.preview-container .section-title .section-title__chevron{transition:transform .2s ease}.preview-container--collapsed .section-title{border-bottom:none}.preview-container--collapsed .section-title__chevron{transform:rotate(-90deg)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], icon: [{
                 type: Input
             }], padding: [{
                 type: Input
+            }], collapsed: [{
+                type: Input
             }] } });
 
 class ToggleOptionComponent {