ud-components 0.5.19 → 0.5.21

package/fesm2022/ud-components.mjs

@@ -2287,22 +2287,39 @@ class TimePickerComponent {
     options;
     disabled = false;
     hint = '';
+    /** Earliest selectable hour (0–23). Restricts both the dropdown and typed input. */
+    minHour;
+    /** Latest selectable hour (0–24). Restricts both the dropdown and typed input. */
+    maxHour;
     focused = false;
     matOptions = [];
+    // Bounds passed to mat-timepicker. Held as stable references (recomputed only
+    // when minHour/maxHour change) so the template binding doesn't hand a fresh
+    // Date to the directive every change-detection cycle — which would loop.
+    minTime = null;
+    maxTime = null;
     controlContainer = inject(ControlContainer);
     get control() {
         return this.controlContainer.control.get(this.controlName);
     }
     ngOnInit() {
         this.matOptions = this.buildOptions();
+        this.updateBounds();
     }
     ngOnChanges(changes) {
         if (changes['disabled']) {
             this.disabled ? this.control.disable() : this.control.enable();
         }
-        if (changes['intervalMinutes'] || changes['options']) {
+        if (changes['intervalMinutes'] || changes['options'] || changes['minHour'] || changes['maxHour']) {
             this.matOptions = this.buildOptions();
         }
+        if (changes['minHour'] || changes['maxHour']) {
+            this.updateBounds();
+        }
+    }
+    updateBounds() {
+        this.minTime = this.minHour == null ? null : this.atHour(this.minHour);
+        this.maxTime = this.maxHour == null ? null : this.atHour(this.maxHour);
     }
     buildOptions() {
         if (this.options?.length) {
@@ -2312,25 +2329,34 @@ class TimePickerComponent {
             }));
         }
         const interval = this.intervalMinutes ?? 30;
+        const minH = this.minHour ?? 0;
+        const maxH = this.maxHour ?? 23;
         const result = [];
-        for (let h = 0; h < 24; h++) {
+        for (let h = minH; h <= maxH; h++) {
             for (let m = 0; m < 60; m += interval) {
-                const d = new Date();
-                d.setHours(h, m, 0, 0);
-                result.push({ value: new Date(d), label: this.formatTime(d) });
+                // The final hour is the exclusive top of the range — only allow :00 on it
+                // so e.g. an 8–20 window offers 20:00 but nothing past it.
+                if (h === maxH && m > 0)
+                    break;
+                result.push({ value: this.atHour(h, m), label: this.formatTime(this.atHour(h, m)) });
             }
         }
         return result;
     }
+    atHour(h, m = 0) {
+        const d = new Date();
+        d.setHours(h, m, 0, 0);
+        return d;
+    }
     formatTime(d) {
         return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TimePickerComponent, isStandalone: true, selector: "ud-time-picker", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", intervalMinutes: "intervalMinutes", options: "options", disabled: "disabled", hint: "hint" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"ud-input\"\n  [class.ud-input--focused]=\"focused\"\n  [class.ud-input--disabled]=\"control.disabled\"\n  [class.ud-input--error]=\"control.invalid && control.touched\">\n  @if (label) {\n    <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n  }\n  <div class=\"ud-input__wrapper\">\n    <mat-icon class=\"ud-input__icon\" fontSet=\"material-icons-outlined\">schedule</mat-icon>\n    <input\n      class=\"ud-input__field\"\n      [id]=\"'ud-input-' + controlName\"\n      [formControlName]=\"controlName\"\n      [matTimepicker]=\"picker\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"focused = true\"\n      (blur)=\"focused = false\" />\n    <mat-timepicker-toggle class=\"ud-timepicker-toggle\" [for]=\"picker\">\n      <mat-icon matTimepickerToggleIcon fontSet=\"material-icons-outlined\">expand_more</mat-icon>\n    </mat-timepicker-toggle>\n    <mat-timepicker #picker [options]=\"matOptions\" />\n  </div>\n  @if (hint) {\n    <span class=\"ud-input__hint\">{{ hint }}</span>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-timepicker-toggle{flex-shrink:0;margin-right:-4px}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:4px;color:#6b7585;transition:color .18s ease}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base:hover{color:#1b2535}::ng-deep .mat-timepicker-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;max-height:280px!important}::ng-deep .mat-timepicker-panel .mat-mdc-option{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important;min-height:44px!important;padding:0 1.25rem!important;transition:background .12s ease}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background:#f4f5f7!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected{background:#1b25350d!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#1b2535!important;font-weight:600!important}::ng-deep .mat-timepicker-panel .mat-mdc-option .mdc-list-item__primary-text{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2$5.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2$5.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i2$5.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TimePickerComponent, isStandalone: true, selector: "ud-time-picker", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", intervalMinutes: "intervalMinutes", options: "options", disabled: "disabled", hint: "hint", minHour: "minHour", maxHour: "maxHour" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"ud-input\"\n  [class.ud-input--focused]=\"focused\"\n  [class.ud-input--disabled]=\"control.disabled\"\n  [class.ud-input--error]=\"control.invalid && control.touched\">\n  @if (label) {\n    <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n  }\n  <div class=\"ud-input__wrapper\">\n    <mat-icon class=\"ud-input__icon\" fontSet=\"material-icons-outlined\">schedule</mat-icon>\n    <input\n      class=\"ud-input__field\"\n      [id]=\"'ud-input-' + controlName\"\n      [formControlName]=\"controlName\"\n      [matTimepicker]=\"picker\"\n      [matTimepickerMin]=\"minTime\"\n      [matTimepickerMax]=\"maxTime\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"focused = true\"\n      (blur)=\"focused = false\" />\n    <mat-timepicker-toggle class=\"ud-timepicker-toggle\" [for]=\"picker\">\n      <mat-icon matTimepickerToggleIcon fontSet=\"material-icons-outlined\">expand_more</mat-icon>\n    </mat-timepicker-toggle>\n    <mat-timepicker #picker [options]=\"matOptions\" />\n  </div>\n  @if (hint) {\n    <span class=\"ud-input__hint\">{{ hint }}</span>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-timepicker-toggle{flex-shrink:0;margin-right:-4px}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:4px;color:#6b7585;transition:color .18s ease}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base:hover{color:#1b2535}::ng-deep .mat-timepicker-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;max-height:280px!important}::ng-deep .mat-timepicker-panel .mat-mdc-option{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important;min-height:44px!important;padding:0 1.25rem!important;transition:background .12s ease}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background:#f4f5f7!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected{background:#1b25350d!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#1b2535!important;font-weight:600!important}::ng-deep .mat-timepicker-panel .mat-mdc-option .mdc-list-item__primary-text{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2$5.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2$5.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i2$5.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ud-time-picker', standalone: true, imports: [ReactiveFormsModule, MatIcon, MatTimepickerModule], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div\n  class=\"ud-input\"\n  [class.ud-input--focused]=\"focused\"\n  [class.ud-input--disabled]=\"control.disabled\"\n  [class.ud-input--error]=\"control.invalid && control.touched\">\n  @if (label) {\n    <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n  }\n  <div class=\"ud-input__wrapper\">\n    <mat-icon class=\"ud-input__icon\" fontSet=\"material-icons-outlined\">schedule</mat-icon>\n    <input\n      class=\"ud-input__field\"\n      [id]=\"'ud-input-' + controlName\"\n      [formControlName]=\"controlName\"\n      [matTimepicker]=\"picker\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"focused = true\"\n      (blur)=\"focused = false\" />\n    <mat-timepicker-toggle class=\"ud-timepicker-toggle\" [for]=\"picker\">\n      <mat-icon matTimepickerToggleIcon fontSet=\"material-icons-outlined\">expand_more</mat-icon>\n    </mat-timepicker-toggle>\n    <mat-timepicker #picker [options]=\"matOptions\" />\n  </div>\n  @if (hint) {\n    <span class=\"ud-input__hint\">{{ hint }}</span>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-timepicker-toggle{flex-shrink:0;margin-right:-4px}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:4px;color:#6b7585;transition:color .18s ease}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base:hover{color:#1b2535}::ng-deep .mat-timepicker-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;max-height:280px!important}::ng-deep .mat-timepicker-panel .mat-mdc-option{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important;min-height:44px!important;padding:0 1.25rem!important;transition:background .12s ease}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background:#f4f5f7!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected{background:#1b25350d!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#1b2535!important;font-weight:600!important}::ng-deep .mat-timepicker-panel .mat-mdc-option .mdc-list-item__primary-text{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important}\n"] }]
+            args: [{ selector: 'ud-time-picker', standalone: true, imports: [ReactiveFormsModule, MatIcon, MatTimepickerModule], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div\n  class=\"ud-input\"\n  [class.ud-input--focused]=\"focused\"\n  [class.ud-input--disabled]=\"control.disabled\"\n  [class.ud-input--error]=\"control.invalid && control.touched\">\n  @if (label) {\n    <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n  }\n  <div class=\"ud-input__wrapper\">\n    <mat-icon class=\"ud-input__icon\" fontSet=\"material-icons-outlined\">schedule</mat-icon>\n    <input\n      class=\"ud-input__field\"\n      [id]=\"'ud-input-' + controlName\"\n      [formControlName]=\"controlName\"\n      [matTimepicker]=\"picker\"\n      [matTimepickerMin]=\"minTime\"\n      [matTimepickerMax]=\"maxTime\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"focused = true\"\n      (blur)=\"focused = false\" />\n    <mat-timepicker-toggle class=\"ud-timepicker-toggle\" [for]=\"picker\">\n      <mat-icon matTimepickerToggleIcon fontSet=\"material-icons-outlined\">expand_more</mat-icon>\n    </mat-timepicker-toggle>\n    <mat-timepicker #picker [options]=\"matOptions\" />\n  </div>\n  @if (hint) {\n    <span class=\"ud-input__hint\">{{ hint }}</span>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-timepicker-toggle{flex-shrink:0;margin-right:-4px}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:4px;color:#6b7585;transition:color .18s ease}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base:hover{color:#1b2535}::ng-deep .mat-timepicker-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;max-height:280px!important}::ng-deep .mat-timepicker-panel .mat-mdc-option{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important;min-height:44px!important;padding:0 1.25rem!important;transition:background .12s ease}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background:#f4f5f7!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected{background:#1b25350d!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#1b2535!important;font-weight:600!important}::ng-deep .mat-timepicker-panel .mat-mdc-option .mdc-list-item__primary-text{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important}\n"] }]
         }], propDecorators: { controlName: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2346,6 +2372,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], hint: [{
                 type: Input
+            }], minHour: [{
+                type: Input
+            }], maxHour: [{
+                type: Input
             }] } });
 
 class PhoneInputComponent {
@@ -2489,6 +2519,7 @@ class ModalComponent {
     cancel = new EventEmitter();
     form;
     modalInputType = ModalInputType;
+    objectKeys = Object.keys;
     pictureUrls;
     currentPictureIndex;
     data = {};
@@ -2554,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                  [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      </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}\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"] }, { 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-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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -2580,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                  [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      </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}\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-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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3233,6 +3264,18 @@ class CalendarComponent {
     slotDuration = input(30);
     minHour = input(8);
     maxHour = input(20);
+    /**
+     * Max height of the scrollable week/day grid as any CSS length (e.g. '720px',
+     * '80vh', 'none'). Defaults to '580px'. Use 'none' to let the grid grow with
+     * its content / the host's height.
+     */
+    maxHeight = input('580px');
+    /**
+     * Optional list of users an admin can book a slot on behalf of. When provided,
+     * the "Booked By" field becomes a searchable autocomplete; otherwise it stays a
+     * free-text input.
+     */
+    bookableUsers = input([]);
     slotAdded = output();
     slotUpdated = output();
     slotRemoved = output();
@@ -3246,6 +3289,8 @@ class CalendarComponent {
     ];
     CELL_H = 56;
     TIME_COL_W = 52;
+    /** Drag snapping granularity, in minutes. */
+    SNAP_MIN = 15;
     dialog = inject(MatDialog);
     elRef = inject(ElementRef);
     overlay = inject(Overlay);
@@ -3505,25 +3550,27 @@ class CalendarComponent {
         return Math.max((durationMin / 30) * this.CELL_H - 2, 24);
     }
     slotBg(slot) {
+        // Booked slots are real appointments — the primary content for the admin —
+        // so they get a confident fill. Open availability windows recede.
         if (slot.color)
-            return this.hexToRgba(slot.color, 0.15);
+            return this.hexToRgba(slot.color, slot.booked ? 0.16 : 0.06);
         if (slot.booked)
-            return 'rgba(229,57,53,0.10)';
-        return 'rgba(27,37,53,0.10)';
+            return 'rgba(27,37,53,0.12)';
+        return 'rgba(27,37,53,0.035)';
     }
     slotTextColor(slot) {
         if (slot.color)
             return slot.color;
         if (slot.booked)
-            return '#c62828';
-        return 'var(--eu-navy)';
+            return 'var(--eu-navy)';
+        return 'rgba(27,37,53,0.6)';
     }
     slotBorderColor(slot) {
         if (slot.color)
             return slot.color;
         if (slot.booked)
-            return '#e53935';
-        return 'var(--eu-navy)';
+            return 'var(--eu-navy)';
+        return 'rgba(27,37,53,0.22)';
     }
     formatSlotTime(slot) {
         return `${this.formatTime(slot.start)} – ${this.formatTime(slot.end)}`;
@@ -3616,11 +3663,14 @@ class CalendarComponent {
         const mouseYInGrid = (e.clientY - scrollRect.top) + scrollEl.scrollTop - headerH;
         if (mouseYInGrid < 0)
             return null;
-        const slotIndex = Math.floor(mouseYInGrid / this.CELL_H);
-        const ts = this.timeSlots();
-        if (slotIndex >= ts.length)
-            return null;
-        const { hour, minute } = ts[slotIndex];
+        // Snap to SNAP_MIN (15-min) increments even though the grid cells are 30 min,
+        // then clamp inside the [minHour, maxHour] window.
+        const gridMinutes = (mouseYInGrid / this.CELL_H) * 30;
+        const totalGridMin = (this.maxHour() - this.minHour()) * 60;
+        let snapped = Math.round(gridMinutes / this.SNAP_MIN) * this.SNAP_MIN;
+        snapped = Math.max(0, Math.min(snapped, totalGridMin - this.SNAP_MIN));
+        const hour = this.minHour() + Math.floor(snapped / 60);
+        const minute = snapped % 60;
         const gridRect = gridEl.getBoundingClientRect();
         const days = this.activeView() === 'day' ? [this.navDate()] : this.weekDays();
         const totalDayW = gridRect.width - this.TIME_COL_W;
@@ -3642,8 +3692,8 @@ class CalendarComponent {
         endDate.setHours(h + Math.floor(totalEnd / 60), totalEnd % 60, 0, 0);
         const form = this.buildForm({
             date: new Date(base),
-            startTime: this.formatTime(startDate),
-            endTime: this.formatTime(endDate),
+            startTime: startDate,
+            endTime: endDate,
         });
         const ref = this.dialog.open(ModalComponent, {
             width: '480px',
@@ -3652,24 +3702,27 @@ class CalendarComponent {
                 title: 'Add time slot',
                 formGroup: form,
                 forms: this.slotForms(),
+                formErrors: this.slotFormErrors,
                 save: (v) => this.slotAdded.emit(this.buildSlot(crypto.randomUUID(), v)),
             },
         });
         form.get('startTime')?.valueChanges
             .pipe(takeUntil(ref.afterClosed()))
-            .subscribe(timeStr => {
-            if (!timeStr)
+            .subscribe(time => {
+            if (!time)
                 return;
-            form.get('endTime')?.setValue(this.shiftTimeStr(timeStr, this.slotDuration()));
+            form.get('endTime')?.setValue(this.shiftTime(time, this.slotDuration()));
         });
     }
     openEditModal(slot) {
         const form = this.buildForm({
             title: slot.title ?? '',
             date: new Date(slot.start),
-            startTime: this.formatTime(slot.start),
-            endTime: this.formatTime(slot.end),
-            bookedBy: slot.bookedBy ?? '',
+            startTime: new Date(slot.start),
+            endTime: new Date(slot.end),
+            // When users come from `bookableUsers`, the control holds the id so the
+            // autocomplete can resolve the right label; otherwise it's the free text.
+            bookedBy: (this.bookableUsers().length ? slot.bookedById : slot.bookedBy) ?? '',
             booked: slot.booked ?? false,
         });
         const ref = this.dialog.open(ModalComponent, {
@@ -3679,6 +3732,7 @@ class CalendarComponent {
                 title: 'Edit time slot',
                 formGroup: form,
                 forms: this.slotForms(),
+                formErrors: this.slotFormErrors,
                 save: (v) => {
                     const updated = this.buildSlot(slot.id, v);
                     if (updated.booked && !slot.booked) {
@@ -3694,13 +3748,36 @@ class CalendarComponent {
         });
         form.get('startTime')?.valueChanges
             .pipe(takeUntil(ref.afterClosed()))
-            .subscribe(timeStr => {
-            if (!timeStr)
+            .subscribe(time => {
+            if (!time)
                 return;
-            form.get('endTime')?.setValue(this.shiftTimeStr(timeStr, this.slotDuration()));
+            form.get('endTime')?.setValue(this.shiftTime(time, this.slotDuration()));
         });
     }
     // ── Helpers ────────────────────────────────────────────────────────────────
+    // 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)}`;
+        return {
+            endBeforeStart: 'End time must be after the start time.',
+            outOfHours: `Times must be within working hours (${range}).`,
+        };
+    }
+    // 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.
+    slotTimeValidator = (group) => {
+        const start = group.get('startTime')?.value;
+        const end = group.get('endTime')?.value;
+        if (!start || !end)
+            return null;
+        const startMin = new Date(start).getHours() * 60 + new Date(start).getMinutes();
+        const endMin = new Date(end).getHours() * 60 + new Date(end).getMinutes();
+        const lo = this.minHour() * 60;
+        const hi = this.maxHour() * 60;
+        if (startMin < lo || startMin > hi || endMin < lo || endMin > hi)
+            return { outOfHours: true };
+        return endMin > startMin ? null : { endBeforeStart: true };
+    };
     buildForm(defaults) {
         return new FormGroup({
             title: new FormControl(defaults.title ?? ''),
@@ -3709,15 +3786,25 @@ class CalendarComponent {
             endTime: new FormControl(defaults.endTime ?? null, Validators.required),
             bookedBy: new FormControl(defaults.bookedBy ?? ''),
             booked: new FormControl(defaults.booked ?? false),
-        });
+        }, { validators: this.slotTimeValidator });
     }
     slotForms() {
+        const users = this.bookableUsers();
+        const bookedByField = users.length
+            ? {
+                type: ModalInputType.AUTOCOMPLETE,
+                title: 'Booked By',
+                property: 'bookedBy',
+                placeholder: 'Search for a student…',
+                availableOptions: users,
+            }
+            : { type: ModalInputType.INPUT, title: 'Booked By', property: 'bookedBy', placeholder: 'Student name or ID' };
         return [
             { type: ModalInputType.INPUT, title: 'Title', property: 'title', placeholder: 'e.g. Office hours' },
             { type: ModalInputType.DATETIME, title: 'Date', property: 'date' },
-            { type: ModalInputType.TIME, title: 'Start Time', property: 'startTime', intervalMinutes: this.slotDuration() },
-            { type: ModalInputType.TIME, title: 'End Time', property: 'endTime', intervalMinutes: this.slotDuration() },
-            { type: ModalInputType.INPUT, title: 'Booked By', property: 'bookedBy', placeholder: 'Student name or ID' },
+            { 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,
             {
                 type: ModalInputType.OPTIONS,
                 title: 'Status',
@@ -3730,44 +3817,37 @@ class CalendarComponent {
         ];
     }
     buildSlot(id, v) {
-        const start = this.applyTimeStr(new Date(v.date), v.startTime);
-        const end = this.applyTimeStr(new Date(v.date), v.endTime);
+        const start = this.combineDateTime(v.date, v.startTime);
+        const end = this.combineDateTime(v.date, v.endTime);
+        // When booking on behalf of a known user, the control holds the user id —
+        // resolve it to a display name and keep the id on the slot.
+        let bookedBy = v.bookedBy || undefined;
+        let bookedById;
+        const match = this.bookableUsers().find(u => u.value === v.bookedBy);
+        if (match) {
+            bookedBy = match.label;
+            bookedById = match.value;
+        }
         return {
             id,
             title: v.title || undefined,
             start,
             end,
             booked: !!v.booked,
-            bookedBy: v.bookedBy || undefined,
+            bookedBy,
+            bookedById,
         };
     }
-    shiftTimeStr(timeStr, minutes) {
-        const m = timeStr?.match(/(\d+):(\d+)\s*(AM|PM)/i);
-        if (!m)
-            return timeStr;
-        let h = parseInt(m[1], 10);
-        const min = parseInt(m[2], 10);
-        if (m[3].toUpperCase() === 'PM' && h !== 12)
-            h += 12;
-        if (m[3].toUpperCase() === 'AM' && h === 12)
-            h = 0;
-        const total = h * 60 + min + minutes;
-        const d = new Date();
-        d.setHours(Math.floor(total / 60) % 24, total % 60, 0, 0);
-        return this.formatTime(d);
-    }
-    applyTimeStr(base, timeStr) {
-        const m = timeStr?.match(/(\d+):(\d+)\s*(AM|PM)/i);
-        if (m) {
-            let h = parseInt(m[1], 10);
-            const min = parseInt(m[2], 10);
-            if (m[3].toUpperCase() === 'PM' && h !== 12)
-                h += 12;
-            if (m[3].toUpperCase() === 'AM' && h === 12)
-                h = 0;
-            base.setHours(h, min, 0, 0);
-        }
-        return base;
+    // Combine the date part of `date` with the time part of `time` (both Dates).
+    combineDateTime(date, time) {
+        const d = new Date(date);
+        const t = new Date(time);
+        d.setHours(t.getHours(), t.getMinutes(), 0, 0);
+        return d;
+    }
+    // Return a new Date `minutes` after `time` (used to auto-advance the end time).
+    shiftTime(time, minutes) {
+        return new Date(new Date(time).getTime() + minutes * 60000);
     }
     getMonday(d) {
         const day = new Date(d);
@@ -3797,11 +3877,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 } }, 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\">\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\">lock</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\">\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\">lock</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{background-image:repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(229,57,53,.07) 4px,rgba(229,57,53,.07) 8px)!important;cursor:not-allowed;border-top:1px solid rgba(229,57,53,.18)}.ud-cal__slot--booked:hover{filter:none!important;transform:none!important}.ud-cal__slot--booked .ud-cal__slot-title{text-decoration:line-through;text-decoration-color:#c6282866;text-decoration-thickness:1px;opacity:.9}.ud-cal__slot-lock{font-size:10px!important;width:10px!important;height:10px!important;line-height:10px!important;flex-shrink:0;opacity:.7}.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:#10b98121;color:#0e9f6e}.ud-cal__hovercard-pill--booked{background:#e539351f;color:#d33730}.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 } }, 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"] }] });
 }
 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\">\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\">lock</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\">\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\">lock</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{background-image:repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(229,57,53,.07) 4px,rgba(229,57,53,.07) 8px)!important;cursor:not-allowed;border-top:1px solid rgba(229,57,53,.18)}.ud-cal__slot--booked:hover{filter:none!important;transform:none!important}.ud-cal__slot--booked .ud-cal__slot-title{text-decoration:line-through;text-decoration-color:#c6282866;text-decoration-thickness:1px;opacity:.9}.ud-cal__slot-lock{font-size:10px!important;width:10px!important;height:10px!important;line-height:10px!important;flex-shrink:0;opacity:.7}.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:#10b98121;color:#0e9f6e}.ud-cal__hovercard-pill--booked{background:#e539351f;color:#d33730}.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                (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"] }]
         }], ctorParameters: () => [], propDecorators: { onDocMouseMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
@@ -3810,6 +3890,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 args: ['document:mouseup', ['$event']]
             }] } });
 
+/**
+ * Curated slot colours. Assign one to `CalendarSlot.color` for a consistent,
+ * on-brand palette instead of hand-picking hex values — the calendar tints these
+ * automatically for the slot fill, border and text. `Navy` is the default brand
+ * tone used for booked appointments.
+ */
+var CalendarSlotColor;
+(function (CalendarSlotColor) {
+    CalendarSlotColor["Navy"] = "#1b2535";
+    CalendarSlotColor["Blue"] = "#2563eb";
+    CalendarSlotColor["Teal"] = "#0d9488";
+    CalendarSlotColor["Green"] = "#16a34a";
+    CalendarSlotColor["Amber"] = "#d97706";
+    CalendarSlotColor["Red"] = "#dc2626";
+    CalendarSlotColor["Purple"] = "#7c3aed";
+    CalendarSlotColor["Pink"] = "#db2777";
+    CalendarSlotColor["Slate"] = "#475569";
+})(CalendarSlotColor || (CalendarSlotColor = {}));
+
 /**
  * Segmented button toggle group. Works with [(ngModel)] and reactive forms.
  *
@@ -3879,18 +3978,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 {
@@ -4098,5 +4204,5 @@ const generateTimeOptions = (start, end, intervalMinutes = 5) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ApplicationStatus, AutocompleteComponent, CalendarComponent, CapitalizePipe, CarouselComponent, ChipInputComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateInputComponent, DateOperator, DateRangeInputComponent, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FeatureFlagKey, FileInputComponent, FilterType, IconColor, KpiComponent, KpiDataType, KpiPillType, KpiProgressBarType, KpiVariant, LoadingStatus, ModalComponent, ModalInputType, MultiSelectComponent, NumberOperator, PhoneInputComponent, PillComponent, PillToggleComponent, PluralizePipe, ProgressBarComponent, SafePipe, SingularPipe, SnackbarType, StringOperator, SummaryViewComponent, TableDisplayColumnType, TabsComponent, TelInputComponent, TextInputComponent, TextareaComponent, TimePickerComponent, ToObservablePipe, ToggleComponent, ToggleOptionComponent, TranslateWrapperService, UdButtonComponent, UdButtonToggleComponent, UdPreviewContainerComponent, UdStepContentDirective, UdStepperComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray, withLoadingState };
+export { ApplicationStatus, AutocompleteComponent, CalendarComponent, CalendarSlotColor, CapitalizePipe, CarouselComponent, ChipInputComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateInputComponent, DateOperator, DateRangeInputComponent, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FeatureFlagKey, FileInputComponent, FilterType, IconColor, KpiComponent, KpiDataType, KpiPillType, KpiProgressBarType, KpiVariant, LoadingStatus, ModalComponent, ModalInputType, MultiSelectComponent, NumberOperator, PhoneInputComponent, PillComponent, PillToggleComponent, PluralizePipe, ProgressBarComponent, SafePipe, SingularPipe, SnackbarType, StringOperator, SummaryViewComponent, TableDisplayColumnType, TabsComponent, TelInputComponent, TextInputComponent, TextareaComponent, TimePickerComponent, ToObservablePipe, ToggleComponent, ToggleOptionComponent, TranslateWrapperService, UdButtonComponent, UdButtonToggleComponent, UdPreviewContainerComponent, UdStepContentDirective, UdStepperComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray, withLoadingState };
 //# sourceMappingURL=ud-components.mjs.map