ud-components 0.5.15 → 0.5.18

package/fesm2022/ud-components.mjs

@@ -1,9 +1,9 @@
 import * as i1$2 from '@angular/common';
 import { CommonModule, formatDate, NgClass, AsyncPipe, NgStyle, DatePipe, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { ViewChild, Input, CUSTOM_ELEMENTS_SCHEMA, Component, Inject, Pipe, inject, EventEmitter, forwardRef, Output, HostBinding, Injectable, DestroyRef, TemplateRef, ContentChild, ViewContainerRef, Directive, ContentChildren, Optional, input, effect, ViewChildren, computed } from '@angular/core';
+import { ViewChild, Input, CUSTOM_ELEMENTS_SCHEMA, Component, Inject, Pipe, inject, EventEmitter, forwardRef, Output, HostBinding, Injectable, DestroyRef, TemplateRef, ContentChild, ViewContainerRef, Directive, ContentChildren, Optional, input, effect, ViewChildren, output, signal, ElementRef, computed, HostListener } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormsModule, ControlContainer, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl, FormGroupDirective } from '@angular/forms';
+import { FormsModule, ControlContainer, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl, FormGroupDirective, Validators } from '@angular/forms';
 import * as i1$1 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 import { interval, isObservable, of, Subject, startWith, takeUntil, map, debounceTime, distinctUntilChanged, switchMap, filter } from 'rxjs';
@@ -38,7 +38,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import * as i2$6 from 'ngx-file-drop';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import * as i1$4 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogContent, MatDialogConfig } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogContent, MatDialogConfig, MatDialog } from '@angular/material/dialog';
 import * as i2$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i2$4 from '@angular/cdk/text-field';
@@ -49,6 +49,7 @@ import * as i1$5 from '@angular/platform-browser';
 import * as i1$6 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatFormField as MatFormField$1 } from '@angular/material/form-field';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { signalStoreFeature, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
 
 class CarouselComponent {
@@ -56,8 +57,46 @@ class CarouselComponent {
     height = 300;
     direction = 'horizontal';
     autoplay = true;
+    objectFit = 'cover';
     swiperRef;
+    lightboxBackdrop;
     activeIndex = 0;
+    lightboxIndex = null;
+    lightboxShouldFocus = false;
+    get lightboxOpen() {
+        return this.lightboxIndex !== null;
+    }
+    openLightbox(index) {
+        this.lightboxIndex = index;
+        this.lightboxShouldFocus = true;
+    }
+    ngAfterViewChecked() {
+        if (this.lightboxShouldFocus && this.lightboxBackdrop) {
+            this.lightboxShouldFocus = false;
+            setTimeout(() => this.lightboxBackdrop?.nativeElement.focus(), 0);
+        }
+    }
+    closeLightbox() {
+        this.lightboxIndex = null;
+    }
+    lightboxPrev() {
+        if (this.lightboxIndex === null)
+            return;
+        this.lightboxIndex = (this.lightboxIndex - 1 + this.pictures.length) % this.pictures.length;
+    }
+    lightboxNext() {
+        if (this.lightboxIndex === null)
+            return;
+        this.lightboxIndex = (this.lightboxIndex + 1) % this.pictures.length;
+    }
+    onLightboxKeydown(event) {
+        if (event.key === 'Escape')
+            this.closeLightbox();
+        if (event.key === 'ArrowLeft')
+            this.lightboxPrev();
+        if (event.key === 'ArrowRight')
+            this.lightboxNext();
+    }
     ngAfterViewInit() {
         const el = this.swiperRef.nativeElement;
         Object.assign(el, { autoplay: this.autoplay });
@@ -89,11 +128,11 @@ class CarouselComponent {
         this.swiperRef.nativeElement.swiper.slideTo(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: CarouselComponent, isStandalone: true, selector: "ud-carousel", inputs: { pictures: "pictures", height: "height", direction: "direction", autoplay: "autoplay" }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-carousel\">\n  <swiper-container\n    #swiperRef\n    init=\"false\"\n    [slidesPerView]=\"1\"\n    [pagination]=\"false\"\n    [direction]=\"direction\"\n    [style.height.px]=\"height\">\n    @for (picture of pictures; track $index) {\n      <swiper-slide>\n        <img [src]=\"picture\" alt=\"Slide {{ $index + 1 }}\" />\n      </swiper-slide>\n    }\n  </swiper-container>\n\n  <button class=\"ud-nav ud-nav-prev\" (click)=\"prev()\" aria-label=\"Previous slide\">\n    <span class=\"material-icons-outlined\">chevron_left</span>\n  </button>\n  <button class=\"ud-nav ud-nav-next\" (click)=\"next()\" aria-label=\"Next slide\">\n    <span class=\"material-icons-outlined\">chevron_right</span>\n  </button>\n\n  <div class=\"ud-pagination\">\n    @for (picture of pictures; track $index) {\n      <button\n        class=\"ud-dot\"\n        [class.active]=\"activeIndex === $index\"\n        (click)=\"goTo($index)\"\n        [attr.aria-label]=\"'Go to slide ' + ($index + 1)\">\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.ud-carousel{position:relative;width:100%;border-radius:12px;overflow:hidden}.ud-carousel:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(15,20,30,.6) 0%,transparent 100%);border-radius:0 0 12px 12px;pointer-events:none;z-index:5}swiper-container{width:100%;border-radius:12px}swiper-slide{display:flex;justify-content:center;align-items:center;background:#1b2535;overflow:hidden}swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.ud-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:none;background:#0f141e73;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:.8;transition:background .2s ease,opacity .2s ease,transform .2s ease}.ud-nav span{font-size:22px;line-height:1;display:flex}.ud-nav:hover{background:#0f141ed1;opacity:1;transform:translateY(-50%) scale(1.08)}.ud-nav.ud-nav-prev{left:12px}.ud-nav.ud-nav-next{right:12px}.ud-pagination{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;z-index:10}.ud-dot{display:block;height:8px;width:8px;border-radius:100px;border:none;padding:0;background:#ffffff73;cursor:pointer;transition:width .3s cubic-bezier(.34,1.56,.64,1),background .25s ease}.ud-dot.active{width:28px;background:#fff}.ud-dot:hover:not(.active){background:#ffffffbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: CarouselComponent, isStandalone: true, selector: "ud-carousel", inputs: { pictures: "pictures", height: "height", direction: "direction", autoplay: "autoplay", objectFit: "objectFit" }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperRef"], descendants: true }, { propertyName: "lightboxBackdrop", first: true, predicate: ["lightboxBackdrop"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-carousel\">\n  <swiper-container\n    #swiperRef\n    init=\"false\"\n    [slidesPerView]=\"1\"\n    [pagination]=\"false\"\n    [direction]=\"direction\"\n    [style.height.px]=\"height\">\n    @for (picture of pictures; track $index) {\n      <swiper-slide>\n        <img\n          [src]=\"picture\"\n          alt=\"Slide {{ $index + 1 }}\"\n          [style.object-fit]=\"objectFit\"\n          (click)=\"openLightbox($index)\"\n          class=\"ud-slide-img\" />\n      </swiper-slide>\n    }\n  </swiper-container>\n\n  <button class=\"ud-nav ud-nav-prev\" (click)=\"prev()\" aria-label=\"Previous slide\">\n    <span class=\"material-icons-outlined\">chevron_left</span>\n  </button>\n  <button class=\"ud-nav ud-nav-next\" (click)=\"next()\" aria-label=\"Next slide\">\n    <span class=\"material-icons-outlined\">chevron_right</span>\n  </button>\n\n  <div class=\"ud-pagination\">\n    @for (picture of pictures; track $index) {\n      <button\n        class=\"ud-dot\"\n        [class.active]=\"activeIndex === $index\"\n        (click)=\"goTo($index)\"\n        [attr.aria-label]=\"'Go to slide ' + ($index + 1)\">\n      </button>\n    }\n  </div>\n</div>\n\n@if (lightboxOpen) {\n  <div\n    #lightboxBackdrop\n    class=\"ud-lightbox-backdrop\"\n    (click)=\"closeLightbox()\"\n    (keydown)=\"onLightboxKeydown($event)\"\n    tabindex=\"0\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Image fullscreen view\">\n\n    <button class=\"ud-lightbox-close\" (click)=\"closeLightbox()\" aria-label=\"Close\">\n      <span class=\"material-icons-outlined\">close</span>\n    </button>\n\n    <button\n      class=\"ud-lightbox-nav ud-lightbox-prev\"\n      (click)=\"$event.stopPropagation(); lightboxPrev()\"\n      aria-label=\"Previous image\">\n      <span class=\"material-icons-outlined\">chevron_left</span>\n    </button>\n\n    <div class=\"ud-lightbox-img-wrap\" (click)=\"$event.stopPropagation()\">\n      <img\n        [src]=\"pictures[lightboxIndex!]\"\n        alt=\"Fullscreen image {{ lightboxIndex! + 1 }}\"\n        class=\"ud-lightbox-img\" />\n    </div>\n\n    <button\n      class=\"ud-lightbox-nav ud-lightbox-next\"\n      (click)=\"$event.stopPropagation(); lightboxNext()\"\n      aria-label=\"Next image\">\n      <span class=\"material-icons-outlined\">chevron_right</span>\n    </button>\n\n    <div class=\"ud-lightbox-counter\">\n      {{ lightboxIndex! + 1 }} / {{ pictures.length }}\n    </div>\n  </div>\n}\n", styles: [":host{display:block;width:100%}.ud-carousel{position:relative;width:100%;border-radius:12px;overflow:hidden}.ud-carousel:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(15,20,30,.6) 0%,transparent 100%);border-radius:0 0 12px 12px;pointer-events:none;z-index:5}swiper-container{width:100%;border-radius:12px}swiper-slide{display:flex;justify-content:center;align-items:center;background:#1b2535;overflow:hidden}swiper-slide .ud-slide-img{display:block;width:100%;height:100%;cursor:zoom-in}.ud-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:none;background:#0f141e73;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:.8;transition:background .2s ease,opacity .2s ease,transform .2s ease}.ud-nav span{font-size:22px;line-height:1;display:flex}.ud-nav:hover{background:#0f141ed1;opacity:1;transform:translateY(-50%) scale(1.08)}.ud-nav.ud-nav-prev{left:12px}.ud-nav.ud-nav-next{right:12px}.ud-lightbox-backdrop{position:fixed;inset:0;z-index:1000;background:#000000e0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:ud-lightbox-in .2s ease;outline:none}@keyframes ud-lightbox-in{0%{opacity:0}to{opacity:1}}.ud-lightbox-img-wrap{max-width:calc(100vw - 120px);max-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center}.ud-lightbox-img{max-width:100%;max-height:calc(100vh - 80px);border-radius:10px;box-shadow:0 24px 64px #0009;object-fit:contain;display:block;animation:ud-lightbox-scale-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes ud-lightbox-scale-in{0%{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}.ud-lightbox-close{position:fixed;top:20px;right:20px;z-index:1001;width:44px;height:44px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}.ud-lightbox-close span{font-size:22px}.ud-lightbox-close:hover{background:#ffffff38;transform:scale(1.1)}.ud-lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:1001;width:52px;height:52px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}.ud-lightbox-nav span{font-size:28px}.ud-lightbox-nav:hover{background:#ffffff38}.ud-lightbox-nav.ud-lightbox-prev{left:16px}.ud-lightbox-nav.ud-lightbox-prev:hover{transform:translateY(-50%) scale(1.08)}.ud-lightbox-nav.ud-lightbox-next{right:16px}.ud-lightbox-nav.ud-lightbox-next:hover{transform:translateY(-50%) scale(1.08)}.ud-lightbox-counter{position:fixed;bottom:20px;left:50%;transform:translate(-50%);color:#ffffffb3;font-size:14px;font-weight:500;letter-spacing:.05em;z-index:1001}.ud-pagination{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;z-index:10}.ud-dot{display:block;height:8px;width:8px;border-radius:100px;border:none;padding:0;background:#ffffff73;cursor:pointer;transition:width .3s cubic-bezier(.34,1.56,.64,1),background .25s ease}.ud-dot.active{width:28px;background:#fff}.ud-dot:hover:not(.active){background:#ffffffbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ud-carousel', imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"ud-carousel\">\n  <swiper-container\n    #swiperRef\n    init=\"false\"\n    [slidesPerView]=\"1\"\n    [pagination]=\"false\"\n    [direction]=\"direction\"\n    [style.height.px]=\"height\">\n    @for (picture of pictures; track $index) {\n      <swiper-slide>\n        <img [src]=\"picture\" alt=\"Slide {{ $index + 1 }}\" />\n      </swiper-slide>\n    }\n  </swiper-container>\n\n  <button class=\"ud-nav ud-nav-prev\" (click)=\"prev()\" aria-label=\"Previous slide\">\n    <span class=\"material-icons-outlined\">chevron_left</span>\n  </button>\n  <button class=\"ud-nav ud-nav-next\" (click)=\"next()\" aria-label=\"Next slide\">\n    <span class=\"material-icons-outlined\">chevron_right</span>\n  </button>\n\n  <div class=\"ud-pagination\">\n    @for (picture of pictures; track $index) {\n      <button\n        class=\"ud-dot\"\n        [class.active]=\"activeIndex === $index\"\n        (click)=\"goTo($index)\"\n        [attr.aria-label]=\"'Go to slide ' + ($index + 1)\">\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.ud-carousel{position:relative;width:100%;border-radius:12px;overflow:hidden}.ud-carousel:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(15,20,30,.6) 0%,transparent 100%);border-radius:0 0 12px 12px;pointer-events:none;z-index:5}swiper-container{width:100%;border-radius:12px}swiper-slide{display:flex;justify-content:center;align-items:center;background:#1b2535;overflow:hidden}swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.ud-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:none;background:#0f141e73;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:.8;transition:background .2s ease,opacity .2s ease,transform .2s ease}.ud-nav span{font-size:22px;line-height:1;display:flex}.ud-nav:hover{background:#0f141ed1;opacity:1;transform:translateY(-50%) scale(1.08)}.ud-nav.ud-nav-prev{left:12px}.ud-nav.ud-nav-next{right:12px}.ud-pagination{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;z-index:10}.ud-dot{display:block;height:8px;width:8px;border-radius:100px;border:none;padding:0;background:#ffffff73;cursor:pointer;transition:width .3s cubic-bezier(.34,1.56,.64,1),background .25s ease}.ud-dot.active{width:28px;background:#fff}.ud-dot:hover:not(.active){background:#ffffffbf}\n"] }]
+            args: [{ selector: 'ud-carousel', imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"ud-carousel\">\n  <swiper-container\n    #swiperRef\n    init=\"false\"\n    [slidesPerView]=\"1\"\n    [pagination]=\"false\"\n    [direction]=\"direction\"\n    [style.height.px]=\"height\">\n    @for (picture of pictures; track $index) {\n      <swiper-slide>\n        <img\n          [src]=\"picture\"\n          alt=\"Slide {{ $index + 1 }}\"\n          [style.object-fit]=\"objectFit\"\n          (click)=\"openLightbox($index)\"\n          class=\"ud-slide-img\" />\n      </swiper-slide>\n    }\n  </swiper-container>\n\n  <button class=\"ud-nav ud-nav-prev\" (click)=\"prev()\" aria-label=\"Previous slide\">\n    <span class=\"material-icons-outlined\">chevron_left</span>\n  </button>\n  <button class=\"ud-nav ud-nav-next\" (click)=\"next()\" aria-label=\"Next slide\">\n    <span class=\"material-icons-outlined\">chevron_right</span>\n  </button>\n\n  <div class=\"ud-pagination\">\n    @for (picture of pictures; track $index) {\n      <button\n        class=\"ud-dot\"\n        [class.active]=\"activeIndex === $index\"\n        (click)=\"goTo($index)\"\n        [attr.aria-label]=\"'Go to slide ' + ($index + 1)\">\n      </button>\n    }\n  </div>\n</div>\n\n@if (lightboxOpen) {\n  <div\n    #lightboxBackdrop\n    class=\"ud-lightbox-backdrop\"\n    (click)=\"closeLightbox()\"\n    (keydown)=\"onLightboxKeydown($event)\"\n    tabindex=\"0\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Image fullscreen view\">\n\n    <button class=\"ud-lightbox-close\" (click)=\"closeLightbox()\" aria-label=\"Close\">\n      <span class=\"material-icons-outlined\">close</span>\n    </button>\n\n    <button\n      class=\"ud-lightbox-nav ud-lightbox-prev\"\n      (click)=\"$event.stopPropagation(); lightboxPrev()\"\n      aria-label=\"Previous image\">\n      <span class=\"material-icons-outlined\">chevron_left</span>\n    </button>\n\n    <div class=\"ud-lightbox-img-wrap\" (click)=\"$event.stopPropagation()\">\n      <img\n        [src]=\"pictures[lightboxIndex!]\"\n        alt=\"Fullscreen image {{ lightboxIndex! + 1 }}\"\n        class=\"ud-lightbox-img\" />\n    </div>\n\n    <button\n      class=\"ud-lightbox-nav ud-lightbox-next\"\n      (click)=\"$event.stopPropagation(); lightboxNext()\"\n      aria-label=\"Next image\">\n      <span class=\"material-icons-outlined\">chevron_right</span>\n    </button>\n\n    <div class=\"ud-lightbox-counter\">\n      {{ lightboxIndex! + 1 }} / {{ pictures.length }}\n    </div>\n  </div>\n}\n", styles: [":host{display:block;width:100%}.ud-carousel{position:relative;width:100%;border-radius:12px;overflow:hidden}.ud-carousel:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(15,20,30,.6) 0%,transparent 100%);border-radius:0 0 12px 12px;pointer-events:none;z-index:5}swiper-container{width:100%;border-radius:12px}swiper-slide{display:flex;justify-content:center;align-items:center;background:#1b2535;overflow:hidden}swiper-slide .ud-slide-img{display:block;width:100%;height:100%;cursor:zoom-in}.ud-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:none;background:#0f141e73;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:.8;transition:background .2s ease,opacity .2s ease,transform .2s ease}.ud-nav span{font-size:22px;line-height:1;display:flex}.ud-nav:hover{background:#0f141ed1;opacity:1;transform:translateY(-50%) scale(1.08)}.ud-nav.ud-nav-prev{left:12px}.ud-nav.ud-nav-next{right:12px}.ud-lightbox-backdrop{position:fixed;inset:0;z-index:1000;background:#000000e0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:ud-lightbox-in .2s ease;outline:none}@keyframes ud-lightbox-in{0%{opacity:0}to{opacity:1}}.ud-lightbox-img-wrap{max-width:calc(100vw - 120px);max-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center}.ud-lightbox-img{max-width:100%;max-height:calc(100vh - 80px);border-radius:10px;box-shadow:0 24px 64px #0009;object-fit:contain;display:block;animation:ud-lightbox-scale-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes ud-lightbox-scale-in{0%{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}.ud-lightbox-close{position:fixed;top:20px;right:20px;z-index:1001;width:44px;height:44px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}.ud-lightbox-close span{font-size:22px}.ud-lightbox-close:hover{background:#ffffff38;transform:scale(1.1)}.ud-lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:1001;width:52px;height:52px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}.ud-lightbox-nav span{font-size:28px}.ud-lightbox-nav:hover{background:#ffffff38}.ud-lightbox-nav.ud-lightbox-prev{left:16px}.ud-lightbox-nav.ud-lightbox-prev:hover{transform:translateY(-50%) scale(1.08)}.ud-lightbox-nav.ud-lightbox-next{right:16px}.ud-lightbox-nav.ud-lightbox-next:hover{transform:translateY(-50%) scale(1.08)}.ud-lightbox-counter{position:fixed;bottom:20px;left:50%;transform:translate(-50%);color:#ffffffb3;font-size:14px;font-weight:500;letter-spacing:.05em;z-index:1001}.ud-pagination{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;z-index:10}.ud-dot{display:block;height:8px;width:8px;border-radius:100px;border:none;padding:0;background:#ffffff73;cursor:pointer;transition:width .3s cubic-bezier(.34,1.56,.64,1),background .25s ease}.ud-dot.active{width:28px;background:#fff}.ud-dot:hover:not(.active){background:#ffffffbf}\n"] }]
         }], propDecorators: { pictures: [{
                 type: Input
             }], height: [{
@@ -102,9 +141,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Input
             }], autoplay: [{
                 type: Input
+            }], objectFit: [{
+                type: Input
             }], swiperRef: [{
                 type: ViewChild,
                 args: ['swiperRef']
+            }], lightboxBackdrop: [{
+                type: ViewChild,
+                args: ['lightboxBackdrop']
             }] } });
 
 class CustomInputComponent {
@@ -2233,56 +2277,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Input
             }] } });
 
-/**
- * Styled time picker that participates in the parent FormGroup.
- *
- * Usage (interval mode — value is in minutes):
- *   <ud-time-picker
- *     controlName="checkInTime"
- *     label="Check-in time"
- *     [intervalMinutes]="30" />
- *
- * Usage (custom options mode):
- *   <ud-time-picker
- *     controlName="checkInTime"
- *     label="Check-in time"
- *     [options]="timeOptions" />
- */
 class TimePickerComponent {
     controlName;
     label = '';
     placeholder = '';
-    icon = 'schedule';
-    iconFontSet = 'material-icons-outlined';
-    /**
-     * Minutes between each option in the dropdown (e.g. 30 → every half hour).
-     * Omit to use Material's default (30 min). Ignored when `options` is provided.
-     * Internally converted to seconds for mat-timepicker.
-     */
     intervalMinutes;
-    /** Pre-defined list of selectable times. When set, `intervalMinutes` is ignored. */
     options;
     disabled = false;
     hint = '';
     focused = false;
+    matOptions = [];
     controlContainer = inject(ControlContainer);
     get control() {
         return this.controlContainer.control.get(this.controlName);
     }
+    ngOnInit() {
+        this.matOptions = this.buildOptions();
+    }
     ngOnChanges(changes) {
         if (changes['disabled']) {
             this.disabled ? this.control.disable() : this.control.enable();
         }
+        if (changes['intervalMinutes'] || changes['options']) {
+            this.matOptions = this.buildOptions();
+        }
+    }
+    buildOptions() {
+        if (this.options?.length) {
+            return this.options.map(o => ({
+                value: o.value,
+                label: o.label ?? this.formatTime(o.value),
+            }));
+        }
+        const interval = this.intervalMinutes ?? 30;
+        const result = [];
+        for (let h = 0; h < 24; 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) });
+            }
+        }
+        return result;
     }
-    get _intervalSeconds() {
-        return this.intervalMinutes != null ? this.intervalMinutes * 60 : null;
+    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.19", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: TimePickerComponent, isStandalone: true, selector: "ud-time-picker", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", icon: "icon", iconFontSet: "iconFontSet", 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  @if (label) {\n    <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n  }\n  <div class=\"ud-input__wrapper\">\n    @if (icon) {\n      <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n    }\n    @if (options && options.length) {\n      <input\n        class=\"ud-input__field\"\n        [id]=\"'ud-input-' + controlName\"\n        [formControlName]=\"controlName\"\n        [placeholder]=\"placeholder\"\n        [matTimepicker]=\"optionsPicker\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\" />\n      <mat-timepicker-toggle class=\"ud-timepicker-toggle\" [for]=\"optionsPicker\">\n        <mat-icon matTimepickerToggleIcon fontSet=\"material-icons-outlined\">schedule</mat-icon>\n      </mat-timepicker-toggle>\n      <mat-timepicker #optionsPicker [options]=\"options\" />\n    } @else {\n      <input\n        class=\"ud-input__field\"\n        [id]=\"'ud-input-' + controlName\"\n        [formControlName]=\"controlName\"\n        [placeholder]=\"placeholder\"\n        [matTimepicker]=\"intervalPicker\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\" />\n      <mat-timepicker-toggle class=\"ud-timepicker-toggle\" [for]=\"intervalPicker\">\n        <mat-icon matTimepickerToggleIcon fontSet=\"material-icons-outlined\">schedule</mat-icon>\n      </mat-timepicker-toggle>\n      <mat-timepicker #intervalPicker [interval]=\"_intervalSeconds\" />\n    }\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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.19", 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 }) }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ud-time-picker', standalone: true, imports: [CommonModule, 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  @if (label) {\n    <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n  }\n  <div class=\"ud-input__wrapper\">\n    @if (icon) {\n      <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n    }\n    @if (options && options.length) {\n      <input\n        class=\"ud-input__field\"\n        [id]=\"'ud-input-' + controlName\"\n        [formControlName]=\"controlName\"\n        [placeholder]=\"placeholder\"\n        [matTimepicker]=\"optionsPicker\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\" />\n      <mat-timepicker-toggle class=\"ud-timepicker-toggle\" [for]=\"optionsPicker\">\n        <mat-icon matTimepickerToggleIcon fontSet=\"material-icons-outlined\">schedule</mat-icon>\n      </mat-timepicker-toggle>\n      <mat-timepicker #optionsPicker [options]=\"options\" />\n    } @else {\n      <input\n        class=\"ud-input__field\"\n        [id]=\"'ud-input-' + controlName\"\n        [formControlName]=\"controlName\"\n        [placeholder]=\"placeholder\"\n        [matTimepicker]=\"intervalPicker\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\" />\n      <mat-timepicker-toggle class=\"ud-timepicker-toggle\" [for]=\"intervalPicker\">\n        <mat-icon matTimepickerToggleIcon fontSet=\"material-icons-outlined\">schedule</mat-icon>\n      </mat-timepicker-toggle>\n      <mat-timepicker #intervalPicker [interval]=\"_intervalSeconds\" />\n    }\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}\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      [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 }]
@@ -2290,10 +2336,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Input
             }], placeholder: [{
                 type: Input
-            }], icon: [{
-                type: Input
-            }], iconFontSet: [{
-                type: Input
             }], intervalMinutes: [{
                 type: Input
             }], options: [{
@@ -2469,6 +2511,10 @@ class ModalComponent {
         if (this.data.showClose != undefined)
             this.showClose = this.data.showClose;
     }
+    onDelete() {
+        this.data.delete?.();
+        this.dialogRef?.close();
+    }
     close() {
         // If the caller is listening on (cancel) they own the close lifecycle —
         // emit and let them decide. Otherwise fall back to auto-closing the
@@ -2506,7 +2552,7 @@ class ModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", 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.19", 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 (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}\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", "icon", "iconFontSet", "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.19", 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -2532,7 +2578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", 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 (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}\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                  [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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3120,6 +3166,497 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Input
             }] } });
 
+class ChipInputComponent {
+    controlName;
+    label = '';
+    placeholder = '';
+    icon;
+    iconFontSet = 'material-icons-outlined';
+    disabled = false;
+    hint = '';
+    focused = false;
+    separatorKeysCodes = [ENTER, COMMA];
+    controlContainer = inject(ControlContainer);
+    get control() {
+        return this.controlContainer.control.get(this.controlName);
+    }
+    get chips() {
+        return this.control.value ?? [];
+    }
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.disabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    addChip(event) {
+        const value = (event.value ?? '').trim();
+        if (value) {
+            this.control.setValue([...this.chips, value]);
+            this.control.markAsDirty();
+        }
+        event.chipInput.clear();
+    }
+    removeChip(index) {
+        const updated = this.chips.filter((_, i) => i !== index);
+        this.control.setValue(updated);
+        this.control.markAsDirty();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ChipInputComponent, isStandalone: true, selector: "ud-chip-input", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", icon: "icon", iconFontSet: "iconFontSet", disabled: "disabled", hint: "hint" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"ud-chip-input\"\n  [class.ud-chip-input--focused]=\"focused\"\n  [class.ud-chip-input--disabled]=\"control.disabled\"\n  [class.ud-chip-input--error]=\"control.invalid && control.touched\">\n  @if (label) {\n    <label class=\"ud-chip-input__label\">{{ label }}</label>\n  }\n  <div class=\"ud-chip-input__wrapper\">\n    @if (icon) {\n      <mat-icon class=\"ud-chip-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n    }\n    <mat-chip-grid #chipGrid class=\"ud-chip-input__grid\" aria-label=\"Chip input\">\n      @for (chip of chips; track chip; let i = $index) {\n        <mat-chip-row class=\"ud-chip\" (removed)=\"removeChip(i)\">\n          {{ chip }}\n          <button matChipRemove aria-label=\"Remove chip\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n      <input\n        class=\"ud-chip-input__field\"\n        [placeholder]=\"chips.length === 0 ? placeholder : ''\"\n        [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n        [disabled]=\"control.disabled\"\n        (matChipInputTokenEnd)=\"addChip($event)\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\" />\n    </mat-chip-grid>\n  </div>\n  @if (hint) {\n    <span class=\"ud-chip-input__hint\">{{ hint }}</span>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.ud-chip-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-chip-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--eu-text, #2a3548);line-height:1}.ud-chip-input__wrapper{display:flex;align-items:flex-start;gap:8px;background:#f8fafc;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:8px;padding:6px 12px;min-height:40px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-chip-input--focused .ud-chip-input__wrapper{border-color:var(--eu-navy, #1b2535);box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-chip-input--error .ud-chip-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-chip-input--error.ud-chip-input--focused .ud-chip-input__wrapper{border-color:#e53935}.ud-chip-input--disabled .ud-chip-input__wrapper{background:var(--eu-bg, #f4f5f7);border-color:var(--eu-border-light, #e8eaef);cursor:not-allowed;opacity:.6}.ud-chip-input__icon{flex-shrink:0;color:var(--eu-muted, #6b7585);font-size:18px;width:18px;height:18px;margin-top:3px;line-height:1;transition:color .18s ease}.ud-chip-input--focused .ud-chip-input__icon{color:var(--eu-navy, #1b2535)}.ud-chip-input__grid{flex:1;min-width:0}:host ::ng-deep .ud-chip-input__grid .mdc-evolution-chip-set__chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0}.ud-chip-input__field{flex:1;min-width:80px;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:var(--eu-text, #2a3548);line-height:1;padding:2px 0}.ud-chip-input__field::placeholder{color:var(--eu-muted, #9099a8)}.ud-chip-input__field:disabled{cursor:not-allowed;color:var(--eu-muted, #9099a8)}:host ::ng-deep mat-chip-row.ud-chip{--mdc-chip-container-color: rgba(27, 37, 53, .07);--mdc-chip-label-text-color: var(--eu-text, #2a3548);--mdc-chip-label-text-font: \"DM Sans\", system-ui, sans-serif;--mdc-chip-label-text-size: 12px;--mdc-chip-label-text-weight: 500;--mdc-chip-container-shape-radius: 20px;--mdc-chip-with-trailing-icon-trailing-icon-color: var(--eu-muted, #6b7585);--mdc-chip-elevated-container-color: rgba(27, 37, 53, .07);height:24px;border:none}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing{padding:0 4px}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing .mat-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:var(--eu-muted, #6b7585);transition:color .15s ease}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing:hover .mat-icon{color:var(--eu-navy, #1b2535)}.ud-chip-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:var(--eu-muted, #6b7585);line-height:1.3}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { 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: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ChipInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-chip-input', standalone: true, imports: [ReactiveFormsModule, MatChipGrid, MatChipRow, MatChipInput, MatChipRemove, MatIcon], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div\n  class=\"ud-chip-input\"\n  [class.ud-chip-input--focused]=\"focused\"\n  [class.ud-chip-input--disabled]=\"control.disabled\"\n  [class.ud-chip-input--error]=\"control.invalid && control.touched\">\n  @if (label) {\n    <label class=\"ud-chip-input__label\">{{ label }}</label>\n  }\n  <div class=\"ud-chip-input__wrapper\">\n    @if (icon) {\n      <mat-icon class=\"ud-chip-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n    }\n    <mat-chip-grid #chipGrid class=\"ud-chip-input__grid\" aria-label=\"Chip input\">\n      @for (chip of chips; track chip; let i = $index) {\n        <mat-chip-row class=\"ud-chip\" (removed)=\"removeChip(i)\">\n          {{ chip }}\n          <button matChipRemove aria-label=\"Remove chip\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n      <input\n        class=\"ud-chip-input__field\"\n        [placeholder]=\"chips.length === 0 ? placeholder : ''\"\n        [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n        [disabled]=\"control.disabled\"\n        (matChipInputTokenEnd)=\"addChip($event)\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\" />\n    </mat-chip-grid>\n  </div>\n  @if (hint) {\n    <span class=\"ud-chip-input__hint\">{{ hint }}</span>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.ud-chip-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-chip-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--eu-text, #2a3548);line-height:1}.ud-chip-input__wrapper{display:flex;align-items:flex-start;gap:8px;background:#f8fafc;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:8px;padding:6px 12px;min-height:40px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-chip-input--focused .ud-chip-input__wrapper{border-color:var(--eu-navy, #1b2535);box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-chip-input--error .ud-chip-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-chip-input--error.ud-chip-input--focused .ud-chip-input__wrapper{border-color:#e53935}.ud-chip-input--disabled .ud-chip-input__wrapper{background:var(--eu-bg, #f4f5f7);border-color:var(--eu-border-light, #e8eaef);cursor:not-allowed;opacity:.6}.ud-chip-input__icon{flex-shrink:0;color:var(--eu-muted, #6b7585);font-size:18px;width:18px;height:18px;margin-top:3px;line-height:1;transition:color .18s ease}.ud-chip-input--focused .ud-chip-input__icon{color:var(--eu-navy, #1b2535)}.ud-chip-input__grid{flex:1;min-width:0}:host ::ng-deep .ud-chip-input__grid .mdc-evolution-chip-set__chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0}.ud-chip-input__field{flex:1;min-width:80px;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:var(--eu-text, #2a3548);line-height:1;padding:2px 0}.ud-chip-input__field::placeholder{color:var(--eu-muted, #9099a8)}.ud-chip-input__field:disabled{cursor:not-allowed;color:var(--eu-muted, #9099a8)}:host ::ng-deep mat-chip-row.ud-chip{--mdc-chip-container-color: rgba(27, 37, 53, .07);--mdc-chip-label-text-color: var(--eu-text, #2a3548);--mdc-chip-label-text-font: \"DM Sans\", system-ui, sans-serif;--mdc-chip-label-text-size: 12px;--mdc-chip-label-text-weight: 500;--mdc-chip-container-shape-radius: 20px;--mdc-chip-with-trailing-icon-trailing-icon-color: var(--eu-muted, #6b7585);--mdc-chip-elevated-container-color: rgba(27, 37, 53, .07);height:24px;border:none}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing{padding:0 4px}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing .mat-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:var(--eu-muted, #6b7585);transition:color .15s ease}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing:hover .mat-icon{color:var(--eu-navy, #1b2535)}.ud-chip-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:var(--eu-muted, #6b7585);line-height:1.3}\n"] }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconFontSet: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }] } });
+
+class CalendarComponent {
+    slots = input([]);
+    mode = input('admin');
+    defaultView = input('week');
+    slotDuration = input(30);
+    minHour = input(8);
+    maxHour = input(20);
+    slotAdded = output();
+    slotUpdated = output();
+    slotRemoved = output();
+    slotBooked = output();
+    activeView = signal('week');
+    navDate = signal(new Date());
+    viewOptions = [
+        { id: 'day', label: 'Day' },
+        { id: 'week', label: 'Week' },
+        { id: 'month', label: 'Month' },
+    ];
+    CELL_H = 56;
+    TIME_COL_W = 52;
+    dialog = inject(MatDialog);
+    elRef = inject(ElementRef);
+    // ── Drag state ─────────────────────────────────────────────────────────────
+    draggingSlot = null;
+    dragMoved = false;
+    dragTarget = null;
+    dragSlotDurationMin = 0;
+    dragStartPos = null;
+    constructor() {
+        effect(() => {
+            this.activeView.set(this.defaultView());
+        }, { allowSignalWrites: true });
+    }
+    // ── Time axis ──────────────────────────────────────────────────────────────
+    timeSlots = computed(() => {
+        const slots = [];
+        for (let h = this.minHour(); h < this.maxHour(); h++) {
+            slots.push({ hour: h, minute: 0, label: this.formatHour(h, 0) });
+            slots.push({ hour: h, minute: 30, label: '' });
+        }
+        return slots;
+    });
+    // ── Week view ──────────────────────────────────────────────────────────────
+    weekDays = computed(() => {
+        const d = this.navDate();
+        const monday = this.getMonday(d);
+        return Array.from({ length: 7 }, (_, i) => {
+            const day = new Date(monday);
+            day.setDate(monday.getDate() + i);
+            return day;
+        });
+    });
+    // ── Month view ─────────────────────────────────────────────────────────────
+    monthWeeks = computed(() => {
+        const d = this.navDate();
+        const year = d.getFullYear();
+        const month = d.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        const start = this.getMonday(firstDay);
+        const weeks = [];
+        let current = new Date(start);
+        while (current <= lastDay || weeks.length < 6) {
+            const week = [];
+            for (let i = 0; i < 7; i++) {
+                week.push(new Date(current));
+                current.setDate(current.getDate() + 1);
+            }
+            weeks.push(week);
+            if (current > lastDay && weeks.length >= 4)
+                break;
+        }
+        return weeks;
+    });
+    // ── Header label ───────────────────────────────────────────────────────────
+    headerLabel = computed(() => {
+        const d = this.navDate();
+        const view = this.activeView();
+        if (view === 'month') {
+            return d.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+        }
+        if (view === 'week') {
+            const days = this.weekDays();
+            const start = days[0];
+            const end = days[6];
+            if (start.getMonth() === end.getMonth()) {
+                return `${start.toLocaleDateString('en-US', { month: 'long' })} ${start.getDate()}–${end.getDate()}, ${start.getFullYear()}`;
+            }
+            return `${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} – ${end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`;
+        }
+        return d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
+    });
+    // ── Navigation ─────────────────────────────────────────────────────────────
+    navigate(dir) {
+        const d = new Date(this.navDate());
+        const view = this.activeView();
+        if (view === 'day')
+            d.setDate(d.getDate() + dir);
+        else if (view === 'week')
+            d.setDate(d.getDate() + dir * 7);
+        else
+            d.setMonth(d.getMonth() + dir);
+        this.navDate.set(d);
+    }
+    goToday() {
+        this.navDate.set(new Date());
+    }
+    switchView(view) {
+        this.activeView.set(view);
+    }
+    clickDay(day) {
+        this.navDate.set(new Date(day));
+        this.activeView.set('day');
+    }
+    // ── Slot helpers ───────────────────────────────────────────────────────────
+    slotsForDay(day) {
+        return this.slots().filter(s => this.isSameDay(s.start, day));
+    }
+    slotTop(slot) {
+        const startMinutes = slot.start.getHours() * 60 + slot.start.getMinutes();
+        const gridStart = this.minHour() * 60;
+        return ((startMinutes - gridStart) / 30) * this.CELL_H;
+    }
+    slotHeight(slot) {
+        const durationMs = slot.end.getTime() - slot.start.getTime();
+        const durationMin = durationMs / 60000;
+        return Math.max((durationMin / 30) * this.CELL_H - 2, 24);
+    }
+    slotBg(slot) {
+        if (slot.color)
+            return this.hexToRgba(slot.color, 0.15);
+        if (slot.booked)
+            return 'rgba(229,57,53,0.10)';
+        return 'rgba(27,37,53,0.10)';
+    }
+    slotTextColor(slot) {
+        if (slot.color)
+            return slot.color;
+        if (slot.booked)
+            return '#c62828';
+        return 'var(--eu-navy)';
+    }
+    slotBorderColor(slot) {
+        if (slot.color)
+            return slot.color;
+        if (slot.booked)
+            return '#e53935';
+        return 'var(--eu-navy)';
+    }
+    formatSlotTime(slot) {
+        return `${this.formatTime(slot.start)} – ${this.formatTime(slot.end)}`;
+    }
+    isToday(day) {
+        return this.isSameDay(day, new Date());
+    }
+    isCurrentMonth(day) {
+        return day.getMonth() === this.navDate().getMonth();
+    }
+    dayLabel(day) {
+        return day.toLocaleDateString('en-US', { weekday: 'short' });
+    }
+    dayNum(day) {
+        return day.getDate();
+    }
+    // ── Cell / slot interactions ───────────────────────────────────────────────
+    onCellClick(day, hour, minute) {
+        if (this.mode() !== 'admin')
+            return;
+        this.openAddModal(day, hour, minute);
+    }
+    onSlotMouseDown(e, slot) {
+        e.stopPropagation();
+        if (this.mode() === 'student' && !slot.booked) {
+            this.slotBooked.emit({ ...slot, booked: true });
+            return;
+        }
+        if (this.mode() !== 'admin')
+            return;
+        this.draggingSlot = slot;
+        this.dragMoved = false;
+        this.dragStartPos = { x: e.clientX, y: e.clientY };
+        this.dragSlotDurationMin = (slot.end.getTime() - slot.start.getTime()) / 60000;
+    }
+    onDocMouseMove(e) {
+        if (!this.draggingSlot || !this.dragStartPos)
+            return;
+        const dx = e.clientX - this.dragStartPos.x;
+        const dy = e.clientY - this.dragStartPos.y;
+        if (!this.dragMoved && Math.sqrt(dx * dx + dy * dy) > 6) {
+            this.dragMoved = true;
+            document.body.style.cursor = 'grabbing';
+            document.body.style.userSelect = 'none';
+        }
+        if (this.dragMoved) {
+            this.dragTarget = this.getGridTarget(e);
+        }
+    }
+    onDocMouseUp(e) {
+        if (!this.draggingSlot)
+            return;
+        if (this.dragMoved) {
+            const target = this.getGridTarget(e);
+            if (target) {
+                const newStart = new Date(target.day);
+                newStart.setHours(target.hour, target.minute, 0, 0);
+                const newEnd = new Date(newStart.getTime() + this.dragSlotDurationMin * 60000);
+                this.slotUpdated.emit({ ...this.draggingSlot, start: newStart, end: newEnd });
+            }
+        }
+        else {
+            this.openEditModal(this.draggingSlot);
+        }
+        this.draggingSlot = null;
+        this.dragMoved = false;
+        this.dragTarget = null;
+        this.dragStartPos = null;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }
+    previewTop(target) {
+        const min = target.hour * 60 + target.minute;
+        return ((min - this.minHour() * 60) / 30) * this.CELL_H;
+    }
+    previewHeight() {
+        return Math.max((this.dragSlotDurationMin / 30) * this.CELL_H - 2, 24);
+    }
+    getGridTarget(e) {
+        if (this.activeView() === 'month')
+            return null;
+        const scrollEl = this.elRef.nativeElement.querySelector('.ud-cal__week-scroll');
+        const headerEl = this.elRef.nativeElement.querySelector('.ud-cal__week-header');
+        const gridEl = this.elRef.nativeElement.querySelector('.ud-cal__week-grid');
+        if (!scrollEl || !headerEl || !gridEl)
+            return null;
+        const scrollRect = scrollEl.getBoundingClientRect();
+        const headerH = headerEl.getBoundingClientRect().height;
+        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];
+        const gridRect = gridEl.getBoundingClientRect();
+        const days = this.activeView() === 'day' ? [this.navDate()] : this.weekDays();
+        const totalDayW = gridRect.width - this.TIME_COL_W;
+        const relX = e.clientX - gridRect.left - this.TIME_COL_W;
+        if (relX < 0 || relX >= totalDayW)
+            return null;
+        const dayIndex = Math.min(days.length - 1, Math.floor(relX / (totalDayW / days.length)));
+        return { day: new Date(days[dayIndex]), hour, minute };
+    }
+    // ── Modal open ─────────────────────────────────────────────────────────────
+    openAddModal(day, hour, minute) {
+        const base = day ? new Date(day) : new Date();
+        const h = hour ?? base.getHours();
+        const m = minute ?? 0;
+        const startDate = new Date(base);
+        startDate.setHours(h, m, 0, 0);
+        const totalEnd = m + this.slotDuration();
+        const endDate = new Date(base);
+        endDate.setHours(h + Math.floor(totalEnd / 60), totalEnd % 60, 0, 0);
+        const form = this.buildForm({
+            date: new Date(base),
+            startTime: this.formatTime(startDate),
+            endTime: this.formatTime(endDate),
+        });
+        const ref = this.dialog.open(ModalComponent, {
+            width: '480px',
+            data: {
+                eyebrow: 'Calendar',
+                title: 'Add time slot',
+                formGroup: form,
+                forms: this.slotForms(),
+                save: (v) => this.slotAdded.emit(this.buildSlot(crypto.randomUUID(), v)),
+            },
+        });
+        form.get('startTime')?.valueChanges
+            .pipe(takeUntil(ref.afterClosed()))
+            .subscribe(timeStr => {
+            if (!timeStr)
+                return;
+            form.get('endTime')?.setValue(this.shiftTimeStr(timeStr, 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 ?? '',
+            booked: slot.booked ?? false,
+        });
+        const ref = this.dialog.open(ModalComponent, {
+            width: '480px',
+            data: {
+                eyebrow: 'Calendar',
+                title: 'Edit time slot',
+                formGroup: form,
+                forms: this.slotForms(),
+                save: (v) => {
+                    const updated = this.buildSlot(slot.id, v);
+                    if (updated.booked && !slot.booked) {
+                        this.slotBooked.emit(updated);
+                    }
+                    else {
+                        this.slotUpdated.emit(updated);
+                    }
+                },
+                deleteLabel: 'Delete slot',
+                delete: () => this.slotRemoved.emit(slot.id),
+            },
+        });
+        form.get('startTime')?.valueChanges
+            .pipe(takeUntil(ref.afterClosed()))
+            .subscribe(timeStr => {
+            if (!timeStr)
+                return;
+            form.get('endTime')?.setValue(this.shiftTimeStr(timeStr, this.slotDuration()));
+        });
+    }
+    // ── Helpers ────────────────────────────────────────────────────────────────
+    buildForm(defaults) {
+        return new FormGroup({
+            title: new FormControl(defaults.title ?? ''),
+            date: new FormControl(defaults.date ?? null, Validators.required),
+            startTime: new FormControl(defaults.startTime ?? null, Validators.required),
+            endTime: new FormControl(defaults.endTime ?? null, Validators.required),
+            bookedBy: new FormControl(defaults.bookedBy ?? ''),
+            booked: new FormControl(defaults.booked ?? false),
+        });
+    }
+    slotForms() {
+        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.OPTIONS,
+                title: 'Status',
+                property: 'booked',
+                availableOptions: [
+                    { value: false, label: 'Available' },
+                    { value: true, label: 'Booked' },
+                ],
+            },
+        ];
+    }
+    buildSlot(id, v) {
+        const start = this.applyTimeStr(new Date(v.date), v.startTime);
+        const end = this.applyTimeStr(new Date(v.date), v.endTime);
+        return {
+            id,
+            title: v.title || undefined,
+            start,
+            end,
+            booked: !!v.booked,
+            bookedBy: v.bookedBy || undefined,
+        };
+    }
+    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;
+    }
+    getMonday(d) {
+        const day = new Date(d);
+        const dow = day.getDay();
+        const diff = dow === 0 ? -6 : 1 - dow;
+        day.setDate(day.getDate() + diff);
+        day.setHours(0, 0, 0, 0);
+        return day;
+    }
+    isSameDay(a, b) {
+        return a.getFullYear() === b.getFullYear() &&
+            a.getMonth() === b.getMonth() &&
+            a.getDate() === b.getDate();
+    }
+    formatHour(h, m) {
+        const period = h < 12 ? 'am' : 'pm';
+        const hour = h % 12 || 12;
+        return m === 0 ? `${hour}${period}` : `${hour}:${m.toString().padStart(2, '0')}`;
+    }
+    formatTime(d) {
+        return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
+    }
+    hexToRgba(hex, alpha) {
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `rgba(${r},${g},${b},${alpha})`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", 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)" } }, 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--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.background]=\"slotBg(slot)\"\n                [style.color]=\"slotTextColor(slot)\"\n                [style.border-color]=\"slotBorderColor(slot)\"\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                  }\n                </div>\n                <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                @if (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--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.background]=\"slotBg(slot)\"\n              [style.color]=\"slotTextColor(slot)\"\n              [style.border-color]=\"slotBorderColor(slot)\"\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                }\n              </div>\n              <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n              @if (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", 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;left:3px;right:3px;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-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{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)}\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.19", 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--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.background]=\"slotBg(slot)\"\n                [style.color]=\"slotTextColor(slot)\"\n                [style.border-color]=\"slotBorderColor(slot)\"\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                  }\n                </div>\n                <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n                @if (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--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.background]=\"slotBg(slot)\"\n              [style.color]=\"slotTextColor(slot)\"\n              [style.border-color]=\"slotBorderColor(slot)\"\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                }\n              </div>\n              <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n              @if (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", 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;left:3px;right:3px;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-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{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)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onDocMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onDocMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }] } });
+
 /**
  * Segmented button toggle group. Works with [(ngModel)] and reactive forms.
  *
@@ -3408,5 +3945,5 @@ const generateTimeOptions = (start, end, intervalMinutes = 5) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ApplicationStatus, AutocompleteComponent, CapitalizePipe, CarouselComponent, 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, 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