@m1z23r/ngx-ui 1.1.56 → 1.1.59

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, signal, Injectable, computed, InjectionToken, ApplicationRef, EnvironmentInjector, createComponent, Injector, input, output, ChangeDetectionStrategy, Component, ElementRef, HostListener, effect, Directive, model, Pipe, contentChildren, TemplateRef, contentChild, ViewChild, viewChild, afterRenderEffect, DestroyRef } from '@angular/core';
+import { inject, PLATFORM_ID, signal, Injectable, computed, InjectionToken, ApplicationRef, EnvironmentInjector, createComponent, Injector, input, model, ChangeDetectionStrategy, Component, viewChild, afterNextRender, HostListener, output, ElementRef, effect, Directive, Pipe, contentChildren, TemplateRef, contentChild, ViewChild, afterRenderEffect, DestroyRef } from '@angular/core';
 import { isPlatformBrowser, DOCUMENT, NgTemplateOutlet, NgComponentOutlet, DecimalPipe } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
 
 /**
  * Collection of built-in validators for form inputs
@@ -426,6 +427,207 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+class CarouselComponent {
+    images = input.required(...(ngDevMode ? [{ debugName: "images" }] : []));
+    startIndex = input(0, ...(ngDevMode ? [{ debugName: "startIndex" }] : []));
+    loop = input(true, ...(ngDevMode ? [{ debugName: "loop" }] : []));
+    showCounter = input(true, ...(ngDevMode ? [{ debugName: "showCounter" }] : []));
+    ariaLabel = input('Image carousel', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    index = model(...(ngDevMode ? [undefined, { debugName: "index" }] : []));
+    /** Horizontal drag offset in px while a swipe is in progress */
+    dragOffset = signal(0, ...(ngDevMode ? [{ debugName: "dragOffset" }] : []));
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
+    pointerId = null;
+    dragStartX = 0;
+    dragStartY = 0;
+    dragAxis = null;
+    currentIndex = computed(() => {
+        const count = this.images().length;
+        if (count === 0)
+            return 0;
+        const index = this.index() ?? this.startIndex();
+        return Math.max(0, Math.min(count - 1, index));
+    }, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
+    hasPrev = computed(() => {
+        return this.loop() ? this.images().length > 1 : this.currentIndex() > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasPrev" }] : []));
+    hasNext = computed(() => {
+        return this.loop()
+            ? this.images().length > 1
+            : this.currentIndex() < this.images().length - 1;
+    }, ...(ngDevMode ? [{ debugName: "hasNext" }] : []));
+    prev() {
+        if (!this.hasPrev())
+            return;
+        const count = this.images().length;
+        this.index.set((this.currentIndex() - 1 + count) % count);
+    }
+    next() {
+        if (!this.hasNext())
+            return;
+        const count = this.images().length;
+        this.index.set((this.currentIndex() + 1) % count);
+    }
+    handleKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.prev();
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.next();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.index.set(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.index.set(this.images().length - 1);
+                break;
+        }
+    }
+    onPointerDown(event) {
+        if (this.images().length < 2)
+            return;
+        this.pointerId = event.pointerId;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.dragAxis = null;
+        this.dragging.set(true);
+    }
+    onPointerMove(event) {
+        if (this.pointerId !== event.pointerId)
+            return;
+        const deltaX = event.clientX - this.dragStartX;
+        const deltaY = event.clientY - this.dragStartY;
+        // Lock the gesture axis once movement is unambiguous, so vertical
+        // page scrolling on touch devices is not hijacked
+        if (this.dragAxis === null && (Math.abs(deltaX) > 8 || Math.abs(deltaY) > 8)) {
+            this.dragAxis = Math.abs(deltaX) > Math.abs(deltaY) ? 'x' : 'y';
+            if (this.dragAxis === 'x') {
+                event.target.setPointerCapture?.(event.pointerId);
+            }
+        }
+        if (this.dragAxis === 'x') {
+            this.dragOffset.set(deltaX);
+        }
+    }
+    onPointerUp(event) {
+        if (this.pointerId !== event.pointerId)
+            return;
+        const offset = this.dragOffset();
+        const threshold = 48;
+        if (this.dragAxis === 'x') {
+            if (offset <= -threshold) {
+                this.next();
+            }
+            else if (offset >= threshold) {
+                this.prev();
+            }
+        }
+        this.pointerId = null;
+        this.dragAxis = null;
+        this.dragOffset.set(0);
+        this.dragging.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CarouselComponent, isStandalone: true, selector: "ui-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, startIndex: { classPropertyName: "startIndex", publicName: "startIndex", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, ngImport: i0, template: "<div\n  class=\"ui-carousel\"\n  role=\"group\"\n  aria-roledescription=\"carousel\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <div\n    class=\"ui-carousel__viewport\"\n    tabindex=\"0\"\n    (keydown)=\"handleKeyDown($event)\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPointerUp($event)\"\n    (pointercancel)=\"onPointerUp($event)\"\n  >\n    <div\n      class=\"ui-carousel__track\"\n      [class.ui-carousel__track--dragging]=\"dragging()\"\n      [style.transform]=\"'translateX(calc(-' + currentIndex() * 100 + '% + ' + dragOffset() + 'px))'\"\n    >\n      @for (image of images(); track image.src; let i = $index) {\n        <div\n          class=\"ui-carousel__slide\"\n          role=\"group\"\n          aria-roledescription=\"slide\"\n          [attr.aria-label]=\"(i + 1) + ' of ' + images().length\"\n          [attr.aria-hidden]=\"i !== currentIndex()\"\n        >\n          <img\n            class=\"ui-carousel__image\"\n            [src]=\"image.src\"\n            [alt]=\"image.alt || ''\"\n            draggable=\"false\"\n            [attr.loading]=\"i === currentIndex() ? null : 'lazy'\"\n          />\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (hasPrev()) {\n    <button\n      type=\"button\"\n      class=\"ui-carousel__arrow ui-carousel__arrow--prev\"\n      aria-label=\"Previous image\"\n      (click)=\"prev()\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M15 18l-6-6 6-6\"/>\n      </svg>\n    </button>\n  }\n  @if (hasNext()) {\n    <button\n      type=\"button\"\n      class=\"ui-carousel__arrow ui-carousel__arrow--next\"\n      aria-label=\"Next image\"\n      (click)=\"next()\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M9 6l6 6-6 6\"/>\n      </svg>\n    </button>\n  }\n\n  @if (showCounter() && images().length > 0) {\n    <span class=\"ui-carousel__counter\" aria-live=\"polite\">\n      {{ currentIndex() + 1 }}/{{ images().length }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block}.ui-carousel{position:relative;overflow:hidden;height:100%;border-radius:var(--ui-radius-lg);background-color:var(--ui-bg-tertiary)}.ui-carousel__viewport{overflow:hidden;touch-action:pan-y;height:100%}.ui-carousel__viewport:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-carousel__track{display:flex;height:100%;transition:transform var(--ui-transition-normal)}.ui-carousel__track--dragging{transition:none}.ui-carousel__slide{flex:0 0 100%;min-width:0;display:flex;align-items:center;justify-content:center}.ui-carousel__image{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none}.ui-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:50%;background-color:var(--ui-carousel-control-bg);color:var(--ui-carousel-control-text);cursor:pointer;opacity:0;transition:opacity var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-carousel__arrow--prev{left:var(--ui-spacing-sm)}.ui-carousel__arrow--next{right:var(--ui-spacing-sm)}.ui-carousel:hover .ui-carousel__arrow,.ui-carousel__arrow:focus-visible{opacity:1}@media(hover:none){.ui-carousel__arrow{opacity:1}}.ui-carousel__arrow:hover{background-color:color-mix(in srgb,var(--ui-carousel-control-bg) 80%,#000000)}.ui-carousel__arrow:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-carousel__counter{position:absolute;right:var(--ui-spacing-sm);bottom:var(--ui-spacing-sm);padding:2px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);background-color:var(--ui-carousel-counter-bg);color:var(--ui-carousel-control-text);font-size:var(--ui-font-xs);font-weight:500;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-carousel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-carousel\"\n  role=\"group\"\n  aria-roledescription=\"carousel\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <div\n    class=\"ui-carousel__viewport\"\n    tabindex=\"0\"\n    (keydown)=\"handleKeyDown($event)\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPointerUp($event)\"\n    (pointercancel)=\"onPointerUp($event)\"\n  >\n    <div\n      class=\"ui-carousel__track\"\n      [class.ui-carousel__track--dragging]=\"dragging()\"\n      [style.transform]=\"'translateX(calc(-' + currentIndex() * 100 + '% + ' + dragOffset() + 'px))'\"\n    >\n      @for (image of images(); track image.src; let i = $index) {\n        <div\n          class=\"ui-carousel__slide\"\n          role=\"group\"\n          aria-roledescription=\"slide\"\n          [attr.aria-label]=\"(i + 1) + ' of ' + images().length\"\n          [attr.aria-hidden]=\"i !== currentIndex()\"\n        >\n          <img\n            class=\"ui-carousel__image\"\n            [src]=\"image.src\"\n            [alt]=\"image.alt || ''\"\n            draggable=\"false\"\n            [attr.loading]=\"i === currentIndex() ? null : 'lazy'\"\n          />\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (hasPrev()) {\n    <button\n      type=\"button\"\n      class=\"ui-carousel__arrow ui-carousel__arrow--prev\"\n      aria-label=\"Previous image\"\n      (click)=\"prev()\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M15 18l-6-6 6-6\"/>\n      </svg>\n    </button>\n  }\n  @if (hasNext()) {\n    <button\n      type=\"button\"\n      class=\"ui-carousel__arrow ui-carousel__arrow--next\"\n      aria-label=\"Next image\"\n      (click)=\"next()\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M9 6l6 6-6 6\"/>\n      </svg>\n    </button>\n  }\n\n  @if (showCounter() && images().length > 0) {\n    <span class=\"ui-carousel__counter\" aria-live=\"polite\">\n      {{ currentIndex() + 1 }}/{{ images().length }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block}.ui-carousel{position:relative;overflow:hidden;height:100%;border-radius:var(--ui-radius-lg);background-color:var(--ui-bg-tertiary)}.ui-carousel__viewport{overflow:hidden;touch-action:pan-y;height:100%}.ui-carousel__viewport:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-carousel__track{display:flex;height:100%;transition:transform var(--ui-transition-normal)}.ui-carousel__track--dragging{transition:none}.ui-carousel__slide{flex:0 0 100%;min-width:0;display:flex;align-items:center;justify-content:center}.ui-carousel__image{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none}.ui-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:50%;background-color:var(--ui-carousel-control-bg);color:var(--ui-carousel-control-text);cursor:pointer;opacity:0;transition:opacity var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-carousel__arrow--prev{left:var(--ui-spacing-sm)}.ui-carousel__arrow--next{right:var(--ui-spacing-sm)}.ui-carousel:hover .ui-carousel__arrow,.ui-carousel__arrow:focus-visible{opacity:1}@media(hover:none){.ui-carousel__arrow{opacity:1}}.ui-carousel__arrow:hover{background-color:color-mix(in srgb,var(--ui-carousel-control-bg) 80%,#000000)}.ui-carousel__arrow:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-carousel__counter{position:absolute;right:var(--ui-spacing-sm);bottom:var(--ui-spacing-sm);padding:2px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);background-color:var(--ui-carousel-counter-bg);color:var(--ui-carousel-control-text);font-size:var(--ui-font-xs);font-weight:500;pointer-events:none}\n"] }]
+        }], propDecorators: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: true }] }], startIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIndex", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], showCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCounter", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }] } });
+
+/**
+ * Fullscreen image lightbox. Opened via LightboxService — not meant to be
+ * embedded directly in templates.
+ */
+class LightboxComponent {
+    config = inject(DIALOG_DATA);
+    dialogRef = inject(DIALOG_REF);
+    carousel = viewChild.required(CarouselComponent);
+    viewport = viewChild.required('container');
+    /** Tracks if mousedown started on the backdrop (to prevent close on drag-out) */
+    mouseDownOnBackdrop = signal(false, ...(ngDevMode ? [{ debugName: "mouseDownOnBackdrop" }] : []));
+    constructor() {
+        afterNextRender(() => {
+            this.viewport().nativeElement.focus();
+        });
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.carousel().prev();
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.carousel().next();
+                break;
+        }
+    }
+    onBackdropMouseDown(event) {
+        this.mouseDownOnBackdrop.set(event.target === event.currentTarget);
+    }
+    onBackdropClick(event) {
+        if (this.mouseDownOnBackdrop() && event.target === event.currentTarget) {
+            this.close();
+        }
+        this.mouseDownOnBackdrop.set(false);
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LightboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: LightboxComponent, isStandalone: true, selector: "ui-lightbox", host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "carousel", first: true, predicate: CarouselComponent, descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ui-lightbox__backdrop\"\n  (mousedown)=\"onBackdropMouseDown($event)\"\n  (click)=\"onBackdropClick($event)\"\n>\n  <div\n    #container\n    class=\"ui-lightbox__container\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Image gallery\"\n    tabindex=\"-1\"\n  >\n    <button\n      type=\"button\"\n      class=\"ui-lightbox__close\"\n      aria-label=\"Close\"\n      (click)=\"close()\"\n    >\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6l12 12\"/>\n      </svg>\n    </button>\n\n    <ui-carousel\n      class=\"ui-lightbox__carousel\"\n      [images]=\"config.images\"\n      [startIndex]=\"config.startIndex ?? 0\"\n      [showCounter]=\"true\"\n    />\n  </div>\n</div>\n", styles: [".ui-lightbox__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background-color:var(--ui-lightbox-backdrop);animation:fadeIn var(--ui-transition-fast)}.ui-lightbox__container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-xl);outline:none;pointer-events:none}.ui-lightbox__carousel{width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:auto}.ui-lightbox__carousel ::ng-deep .ui-carousel{height:100%;background:transparent;border-radius:0}.ui-lightbox__carousel ::ng-deep .ui-carousel__image{object-fit:contain}.ui-lightbox__carousel ::ng-deep .ui-carousel__counter{right:50%;transform:translate(50%);font-size:var(--ui-font-sm)}.ui-lightbox__close{position:absolute;top:var(--ui-spacing-md);right:var(--ui-spacing-md);z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background-color:var(--ui-lightbox-control-bg);color:var(--ui-lightbox-control-text);cursor:pointer;pointer-events:auto;transition:background-color var(--ui-transition-fast)}.ui-lightbox__close:hover{background-color:color-mix(in srgb,var(--ui-lightbox-control-bg) 80%,#000000)}.ui-lightbox__close:focus-visible{outline:2px solid var(--ui-lightbox-control-text);outline-offset:2px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: CarouselComponent, selector: "ui-carousel", inputs: ["images", "startIndex", "loop", "showCounter", "ariaLabel", "index"], outputs: ["indexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LightboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-lightbox', standalone: true, imports: [CarouselComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-lightbox__backdrop\"\n  (mousedown)=\"onBackdropMouseDown($event)\"\n  (click)=\"onBackdropClick($event)\"\n>\n  <div\n    #container\n    class=\"ui-lightbox__container\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Image gallery\"\n    tabindex=\"-1\"\n  >\n    <button\n      type=\"button\"\n      class=\"ui-lightbox__close\"\n      aria-label=\"Close\"\n      (click)=\"close()\"\n    >\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M18 6L6 18M6 6l12 12\"/>\n      </svg>\n    </button>\n\n    <ui-carousel\n      class=\"ui-lightbox__carousel\"\n      [images]=\"config.images\"\n      [startIndex]=\"config.startIndex ?? 0\"\n      [showCounter]=\"true\"\n    />\n  </div>\n</div>\n", styles: [".ui-lightbox__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background-color:var(--ui-lightbox-backdrop);animation:fadeIn var(--ui-transition-fast)}.ui-lightbox__container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-xl);outline:none;pointer-events:none}.ui-lightbox__carousel{width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:auto}.ui-lightbox__carousel ::ng-deep .ui-carousel{height:100%;background:transparent;border-radius:0}.ui-lightbox__carousel ::ng-deep .ui-carousel__image{object-fit:contain}.ui-lightbox__carousel ::ng-deep .ui-carousel__counter{right:50%;transform:translate(50%);font-size:var(--ui-font-sm)}.ui-lightbox__close{position:absolute;top:var(--ui-spacing-md);right:var(--ui-spacing-md);z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background-color:var(--ui-lightbox-control-bg);color:var(--ui-lightbox-control-text);cursor:pointer;pointer-events:auto;transition:background-color var(--ui-transition-fast)}.ui-lightbox__close:hover{background-color:color-mix(in srgb,var(--ui-lightbox-control-bg) 80%,#000000)}.ui-lightbox__close:focus-visible{outline:2px solid var(--ui-lightbox-control-text);outline-offset:2px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { carousel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CarouselComponent), { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], onKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+/**
+ * Service for opening a fullscreen image lightbox.
+ *
+ * @example
+ * ```typescript
+ * const ref = this.lightboxService.open({
+ *   images: [{ src: '/photos/1.jpg', alt: 'Living room' }],
+ *   startIndex: 0,
+ * });
+ *
+ * await ref.afterClosed();
+ * ```
+ */
+class LightboxService {
+    dialogService = inject(DialogService);
+    /**
+     * Opens the lightbox with the given images.
+     *
+     * @returns A DialogRef that resolves when the lightbox is closed
+     */
+    open(config) {
+        return this.dialogService.open(LightboxComponent, {
+            data: config,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LightboxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LightboxService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LightboxService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class ToastComponent {
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
     dismissed = output();
@@ -6391,6 +6593,435 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+class SegmentedComponent {
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    track = viewChild.required('track');
+    segmentedClasses = computed(() => {
+        const classes = [`ui-segmented--${this.size()}`];
+        if (this.fullWidth()) {
+            classes.push('ui-segmented--full-width');
+        }
+        if (this.disabled()) {
+            classes.push('ui-segmented--disabled');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "segmentedClasses" }] : []));
+    selectedIndex = computed(() => {
+        return this.options().findIndex(option => option.value === this.value());
+    }, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    isSegmentDisabled(option) {
+        return this.disabled() || !!option.disabled;
+    }
+    isTabbable(index) {
+        const selected = this.selectedIndex();
+        if (selected >= 0)
+            return index === selected;
+        // No selection yet: first enabled segment holds the tab stop
+        const firstEnabled = this.options().findIndex(option => !this.isSegmentDisabled(option));
+        return index === firstEnabled;
+    }
+    selectSegment(option) {
+        if (this.isSegmentDisabled(option))
+            return;
+        this.value.set(option.value);
+    }
+    handleKeyDown(event, currentIndex) {
+        const enabledSegments = this.options()
+            .map((option, index) => ({ option, index }))
+            .filter(({ option }) => !this.isSegmentDisabled(option));
+        if (enabledSegments.length === 0)
+            return;
+        const currentEnabledIndex = enabledSegments.findIndex(({ index }) => index === currentIndex);
+        let nextEnabledIndex = -1;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                nextEnabledIndex = (currentEnabledIndex + 1) % enabledSegments.length;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                nextEnabledIndex = (currentEnabledIndex - 1 + enabledSegments.length) % enabledSegments.length;
+                break;
+            case 'Home':
+                event.preventDefault();
+                nextEnabledIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                nextEnabledIndex = enabledSegments.length - 1;
+                break;
+            default:
+                return;
+        }
+        if (nextEnabledIndex >= 0) {
+            const { option, index } = enabledSegments[nextEnabledIndex];
+            this.selectSegment(option);
+            this.focusSegment(index);
+        }
+    }
+    focusSegment(index) {
+        const buttons = this.track().nativeElement.querySelectorAll('.ui-segmented__segment');
+        buttons[index]?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SegmentedComponent, isStandalone: true, selector: "ui-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #track\n  class=\"ui-segmented\"\n  [class]=\"segmentedClasses()\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n>\n  @for (option of options(); track option.value; let i = $index) {\n    <button\n      type=\"button\"\n      class=\"ui-segmented__segment\"\n      role=\"radio\"\n      [class.ui-segmented__segment--active]=\"i === selectedIndex()\"\n      [class.ui-segmented__segment--disabled]=\"isSegmentDisabled(option)\"\n      [attr.aria-checked]=\"i === selectedIndex()\"\n      [attr.tabindex]=\"isTabbable(i) ? 0 : -1\"\n      [disabled]=\"isSegmentDisabled(option)\"\n      (click)=\"selectSegment(option)\"\n      (keydown)=\"handleKeyDown($event, i)\"\n    >\n      {{ option.label }}\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-block}.ui-segmented{display:inline-flex;padding:3px;gap:2px;background-color:var(--ui-segmented-track-bg);border-radius:var(--ui-radius-md)}.ui-segmented__segment{flex:0 1 auto;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;white-space:nowrap;cursor:pointer;border-radius:var(--ui-radius-sm);transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-segmented__segment:hover:not(:disabled):not(.ui-segmented__segment--active){color:var(--ui-text)}.ui-segmented__segment:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-segmented__segment--active{background-color:var(--ui-segmented-active-bg);color:var(--ui-segmented-active-text);box-shadow:var(--ui-shadow-sm)}.ui-segmented__segment--disabled{opacity:.5;cursor:not-allowed}.ui-segmented--disabled{opacity:.7}:host:has(.ui-segmented--full-width){display:block}.ui-segmented--full-width{display:flex;width:100%}.ui-segmented--full-width .ui-segmented__segment{flex:1 1 0}.ui-segmented--sm .ui-segmented__segment{padding:.25rem .75rem;font-size:var(--ui-font-sm)}.ui-segmented--md .ui-segmented__segment{padding:.375rem 1rem;font-size:var(--ui-font-sm)}.ui-segmented--lg .ui-segmented__segment{padding:.5rem 1.25rem;font-size:var(--ui-font-md)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SegmentedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-segmented', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #track\n  class=\"ui-segmented\"\n  [class]=\"segmentedClasses()\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n>\n  @for (option of options(); track option.value; let i = $index) {\n    <button\n      type=\"button\"\n      class=\"ui-segmented__segment\"\n      role=\"radio\"\n      [class.ui-segmented__segment--active]=\"i === selectedIndex()\"\n      [class.ui-segmented__segment--disabled]=\"isSegmentDisabled(option)\"\n      [attr.aria-checked]=\"i === selectedIndex()\"\n      [attr.tabindex]=\"isTabbable(i) ? 0 : -1\"\n      [disabled]=\"isSegmentDisabled(option)\"\n      (click)=\"selectSegment(option)\"\n      (keydown)=\"handleKeyDown($event, i)\"\n    >\n      {{ option.label }}\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-block}.ui-segmented{display:inline-flex;padding:3px;gap:2px;background-color:var(--ui-segmented-track-bg);border-radius:var(--ui-radius-md)}.ui-segmented__segment{flex:0 1 auto;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;white-space:nowrap;cursor:pointer;border-radius:var(--ui-radius-sm);transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-segmented__segment:hover:not(:disabled):not(.ui-segmented__segment--active){color:var(--ui-text)}.ui-segmented__segment:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-segmented__segment--active{background-color:var(--ui-segmented-active-bg);color:var(--ui-segmented-active-text);box-shadow:var(--ui-shadow-sm)}.ui-segmented__segment--disabled{opacity:.5;cursor:not-allowed}.ui-segmented--disabled{opacity:.7}:host:has(.ui-segmented--full-width){display:block}.ui-segmented--full-width{display:flex;width:100%}.ui-segmented--full-width .ui-segmented__segment{flex:1 1 0}.ui-segmented--sm .ui-segmented__segment{padding:.25rem .75rem;font-size:var(--ui-font-sm)}.ui-segmented--md .ui-segmented__segment{padding:.375rem 1rem;font-size:var(--ui-font-sm)}.ui-segmented--lg .ui-segmented__segment{padding:.5rem 1.25rem;font-size:var(--ui-font-md)}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+
+class StepperComponent {
+    steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : []));
+    linear = input(true, ...(ngDevMode ? [{ debugName: "linear" }] : []));
+    ariaLabel = input('Progress', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    activeIndex = model(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    stepClick = output();
+    stepStates = computed(() => {
+        const active = this.activeIndex();
+        return this.steps().map((step, index) => ({
+            step,
+            index,
+            completed: index < active,
+            active: index === active,
+            clickable: this.linear() ? index < active : index !== active,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "stepStates" }] : []));
+    selectStep(index, clickable) {
+        if (!clickable)
+            return;
+        this.activeIndex.set(index);
+        this.stepClick.emit(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: StepperComponent, isStandalone: true, selector: "ui-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", stepClick: "stepClick" }, ngImport: i0, template: "<ol class=\"ui-stepper\" [attr.aria-label]=\"ariaLabel()\">\n  @for (state of stepStates(); track state.step.key) {\n    <li\n      class=\"ui-stepper__step\"\n      [class.ui-stepper__step--completed]=\"state.completed\"\n      [class.ui-stepper__step--active]=\"state.active\"\n      [attr.aria-current]=\"state.active ? 'step' : null\"\n    >\n      @if (!$first) {\n        <span class=\"ui-stepper__connector\" aria-hidden=\"true\"></span>\n      }\n      @if (state.clickable) {\n        <button\n          type=\"button\"\n          class=\"ui-stepper__button\"\n          (click)=\"selectStep(state.index, true)\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"stepContent\"\n            [ngTemplateOutletContext]=\"{ $implicit: state }\"\n          />\n        </button>\n      } @else {\n        <span class=\"ui-stepper__button ui-stepper__button--static\">\n          <ng-container\n            [ngTemplateOutlet]=\"stepContent\"\n            [ngTemplateOutletContext]=\"{ $implicit: state }\"\n          />\n        </span>\n      }\n    </li>\n  }\n</ol>\n\n<ng-template #stepContent let-state>\n  <span class=\"ui-stepper__circle\" aria-hidden=\"true\">\n    @if (state.completed) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\">\n        <path d=\"M20 6L9 17l-5-5\"/>\n      </svg>\n    } @else {\n      {{ state.index + 1 }}\n    }\n  </span>\n  <span class=\"ui-stepper__label\">{{ state.step.label }}</span>\n</ng-template>\n", styles: [":host{display:block}.ui-stepper{display:flex;margin:0;padding:0;list-style:none}.ui-stepper__step{display:flex;align-items:center;flex:0 1 auto;min-width:0}.ui-stepper__step:not(:first-child){flex:1 1 0}.ui-stepper__connector{flex:1 1 0;height:2px;min-width:var(--ui-spacing-md);margin:0 var(--ui-spacing-sm);background-color:var(--ui-stepper-connector);transition:background-color var(--ui-transition-normal)}.ui-stepper__step--completed .ui-stepper__connector,.ui-stepper__step--active .ui-stepper__connector{background-color:var(--ui-stepper-completed)}.ui-stepper__button{display:inline-flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-xs);border:none;background:transparent;font:inherit;color:var(--ui-text-muted);border-radius:var(--ui-radius-md);white-space:nowrap;min-width:0}button.ui-stepper__button{cursor:pointer;transition:color var(--ui-transition-fast)}button.ui-stepper__button:hover{color:var(--ui-text)}button.ui-stepper__button:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ui-stepper-circle-size);height:var(--ui-stepper-circle-size);border:2px solid var(--ui-stepper-connector);border-radius:50%;font-size:var(--ui-font-sm);font-weight:600;color:var(--ui-text-muted);background-color:var(--ui-bg);transition:all var(--ui-transition-normal)}.ui-stepper__label{font-size:var(--ui-font-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis}.ui-stepper__step--completed .ui-stepper__circle{border-color:var(--ui-stepper-completed);background-color:var(--ui-stepper-completed);color:var(--ui-stepper-completed-text)}.ui-stepper__step--completed .ui-stepper__label{color:var(--ui-text)}.ui-stepper__step--active .ui-stepper__circle{border-color:var(--ui-primary);color:var(--ui-primary)}.ui-stepper__step--active .ui-stepper__label{color:var(--ui-text);font-weight:600}@media(max-width:768px){.ui-stepper__step:not(.ui-stepper__step--active) .ui-stepper__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-stepper', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ol class=\"ui-stepper\" [attr.aria-label]=\"ariaLabel()\">\n  @for (state of stepStates(); track state.step.key) {\n    <li\n      class=\"ui-stepper__step\"\n      [class.ui-stepper__step--completed]=\"state.completed\"\n      [class.ui-stepper__step--active]=\"state.active\"\n      [attr.aria-current]=\"state.active ? 'step' : null\"\n    >\n      @if (!$first) {\n        <span class=\"ui-stepper__connector\" aria-hidden=\"true\"></span>\n      }\n      @if (state.clickable) {\n        <button\n          type=\"button\"\n          class=\"ui-stepper__button\"\n          (click)=\"selectStep(state.index, true)\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"stepContent\"\n            [ngTemplateOutletContext]=\"{ $implicit: state }\"\n          />\n        </button>\n      } @else {\n        <span class=\"ui-stepper__button ui-stepper__button--static\">\n          <ng-container\n            [ngTemplateOutlet]=\"stepContent\"\n            [ngTemplateOutletContext]=\"{ $implicit: state }\"\n          />\n        </span>\n      }\n    </li>\n  }\n</ol>\n\n<ng-template #stepContent let-state>\n  <span class=\"ui-stepper__circle\" aria-hidden=\"true\">\n    @if (state.completed) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\">\n        <path d=\"M20 6L9 17l-5-5\"/>\n      </svg>\n    } @else {\n      {{ state.index + 1 }}\n    }\n  </span>\n  <span class=\"ui-stepper__label\">{{ state.step.label }}</span>\n</ng-template>\n", styles: [":host{display:block}.ui-stepper{display:flex;margin:0;padding:0;list-style:none}.ui-stepper__step{display:flex;align-items:center;flex:0 1 auto;min-width:0}.ui-stepper__step:not(:first-child){flex:1 1 0}.ui-stepper__connector{flex:1 1 0;height:2px;min-width:var(--ui-spacing-md);margin:0 var(--ui-spacing-sm);background-color:var(--ui-stepper-connector);transition:background-color var(--ui-transition-normal)}.ui-stepper__step--completed .ui-stepper__connector,.ui-stepper__step--active .ui-stepper__connector{background-color:var(--ui-stepper-completed)}.ui-stepper__button{display:inline-flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-xs);border:none;background:transparent;font:inherit;color:var(--ui-text-muted);border-radius:var(--ui-radius-md);white-space:nowrap;min-width:0}button.ui-stepper__button{cursor:pointer;transition:color var(--ui-transition-fast)}button.ui-stepper__button:hover{color:var(--ui-text)}button.ui-stepper__button:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ui-stepper-circle-size);height:var(--ui-stepper-circle-size);border:2px solid var(--ui-stepper-connector);border-radius:50%;font-size:var(--ui-font-sm);font-weight:600;color:var(--ui-text-muted);background-color:var(--ui-bg);transition:all var(--ui-transition-normal)}.ui-stepper__label{font-size:var(--ui-font-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis}.ui-stepper__step--completed .ui-stepper__circle{border-color:var(--ui-stepper-completed);background-color:var(--ui-stepper-completed);color:var(--ui-stepper-completed-text)}.ui-stepper__step--completed .ui-stepper__label{color:var(--ui-text)}.ui-stepper__step--active .ui-stepper__circle{border-color:var(--ui-primary);color:var(--ui-primary)}.ui-stepper__step--active .ui-stepper__label{color:var(--ui-text);font-weight:600}@media(max-width:768px){.ui-stepper__step:not(.ui-stepper__step--active) .ui-stepper__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}\n"] }]
+        }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }] } });
+
+class BreadcrumbSeparatorDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BreadcrumbSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: BreadcrumbSeparatorDirective, isStandalone: true, selector: "[uiBreadcrumbSeparator]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BreadcrumbSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiBreadcrumbSeparator]',
+                    standalone: true,
+                }]
+        }] });
+
+class BreadcrumbComponent {
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : []));
+    separatorTemplate = contentChild(BreadcrumbSeparatorDirective, ...(ngDevMode ? [{ debugName: "separatorTemplate" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BreadcrumbComponent, isStandalone: true, selector: "ui-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "separatorTemplate", first: true, predicate: BreadcrumbSeparatorDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<nav class=\"ui-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol class=\"ui-breadcrumb__list\">\n    @for (item of items(); track $index) {\n      <li class=\"ui-breadcrumb__item\">\n        @if (!$first) {\n          <span class=\"ui-breadcrumb__separator\" aria-hidden=\"true\">\n            @if (separatorTemplate(); as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef\" />\n            } @else {\n              {{ separator() }}\n            }\n          </span>\n        }\n        @if (item.url && !$last) {\n          <a class=\"ui-breadcrumb__link\" [routerLink]=\"item.url\">{{ item.label }}</a>\n        } @else {\n          <span\n            class=\"ui-breadcrumb__current\"\n            [attr.aria-current]=\"$last ? 'page' : null\"\n          >{{ item.label }}</span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}.ui-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none}.ui-breadcrumb__item{display:flex;align-items:center;min-width:0;font-size:var(--ui-font-sm)}.ui-breadcrumb__separator{display:inline-flex;align-items:center;margin:0 var(--ui-spacing-sm);color:var(--ui-text-muted);-webkit-user-select:none;user-select:none}.ui-breadcrumb__link,.ui-breadcrumb__current{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-breadcrumb__link{color:var(--ui-text-muted);text-decoration:none;border-radius:var(--ui-radius-sm);transition:color var(--ui-transition-fast)}.ui-breadcrumb__link:hover{color:var(--ui-text);text-decoration:underline}.ui-breadcrumb__link:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-breadcrumb__current{color:var(--ui-text);font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-breadcrumb', standalone: true, imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"ui-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol class=\"ui-breadcrumb__list\">\n    @for (item of items(); track $index) {\n      <li class=\"ui-breadcrumb__item\">\n        @if (!$first) {\n          <span class=\"ui-breadcrumb__separator\" aria-hidden=\"true\">\n            @if (separatorTemplate(); as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef\" />\n            } @else {\n              {{ separator() }}\n            }\n          </span>\n        }\n        @if (item.url && !$last) {\n          <a class=\"ui-breadcrumb__link\" [routerLink]=\"item.url\">{{ item.label }}</a>\n        } @else {\n          <span\n            class=\"ui-breadcrumb__current\"\n            [attr.aria-current]=\"$last ? 'page' : null\"\n          >{{ item.label }}</span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}.ui-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none}.ui-breadcrumb__item{display:flex;align-items:center;min-width:0;font-size:var(--ui-font-sm)}.ui-breadcrumb__separator{display:inline-flex;align-items:center;margin:0 var(--ui-spacing-sm);color:var(--ui-text-muted);-webkit-user-select:none;user-select:none}.ui-breadcrumb__link,.ui-breadcrumb__current{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-breadcrumb__link{color:var(--ui-text-muted);text-decoration:none;border-radius:var(--ui-radius-sm);transition:color var(--ui-transition-fast)}.ui-breadcrumb__link:hover{color:var(--ui-text);text-decoration:underline}.ui-breadcrumb__link:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-breadcrumb__current{color:var(--ui-text);font-weight:500}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], separatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbSeparatorDirective), { isSignal: true }] }] } });
+
+class SkeletonComponent {
+    variant = input('line', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+    height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : []));
+    count = input(1, ...(ngDevMode ? [{ debugName: "count" }] : []));
+    items = computed(() => {
+        return Array.from({ length: Math.max(1, this.count()) }, (_, i) => i);
+    }, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    itemWidth(index) {
+        // Last line of a multi-line paragraph placeholder is shortened
+        if (this.variant() === 'line' && this.count() > 1 && index === this.count() - 1) {
+            return '60%';
+        }
+        return this.width() ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SkeletonComponent, isStandalone: true, selector: "ui-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ui-skeleton\" aria-hidden=\"true\">\n  @for (item of items(); track item) {\n    <span\n      class=\"ui-skeleton__item\"\n      [class]=\"'ui-skeleton__item--' + variant()\"\n      [style.width]=\"itemWidth(item)\"\n      [style.height]=\"height() ?? null\"\n    ></span>\n  }\n</div>\n", styles: [":host{display:block}.ui-skeleton{display:flex;flex-direction:column;gap:var(--ui-spacing-sm)}.ui-skeleton__item{display:block;background:linear-gradient(90deg,var(--ui-skeleton-base) 25%,var(--ui-skeleton-highlight) 37%,var(--ui-skeleton-base) 63%);background-size:400% 100%;animation:ui-skeleton-shimmer 1.4s ease infinite}.ui-skeleton__item--line{width:100%;height:.875rem;border-radius:var(--ui-radius-sm)}.ui-skeleton__item--box{width:100%;height:6rem;border-radius:var(--ui-radius-md)}.ui-skeleton__item--circle{width:3rem;height:3rem;border-radius:50%}@keyframes ui-skeleton-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.ui-skeleton__item{background:var(--ui-skeleton-base);animation:ui-skeleton-pulse 2s ease-in-out infinite}@keyframes ui-skeleton-pulse{0%,to{opacity:1}50%{opacity:.6}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-skeleton\" aria-hidden=\"true\">\n  @for (item of items(); track item) {\n    <span\n      class=\"ui-skeleton__item\"\n      [class]=\"'ui-skeleton__item--' + variant()\"\n      [style.width]=\"itemWidth(item)\"\n      [style.height]=\"height() ?? null\"\n    ></span>\n  }\n</div>\n", styles: [":host{display:block}.ui-skeleton{display:flex;flex-direction:column;gap:var(--ui-spacing-sm)}.ui-skeleton__item{display:block;background:linear-gradient(90deg,var(--ui-skeleton-base) 25%,var(--ui-skeleton-highlight) 37%,var(--ui-skeleton-base) 63%);background-size:400% 100%;animation:ui-skeleton-shimmer 1.4s ease infinite}.ui-skeleton__item--line{width:100%;height:.875rem;border-radius:var(--ui-radius-sm)}.ui-skeleton__item--box{width:100%;height:6rem;border-radius:var(--ui-radius-md)}.ui-skeleton__item--circle{width:3rem;height:3rem;border-radius:50%}@keyframes ui-skeleton-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.ui-skeleton__item{background:var(--ui-skeleton-base);animation:ui-skeleton-pulse 2s ease-in-out infinite}@keyframes ui-skeleton-pulse{0%,to{opacity:1}50%{opacity:.6}}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }] } });
+
+class ImageUploaderComponent {
+    maxCount = input(30, ...(ngDevMode ? [{ debugName: "maxCount" }] : []));
+    accept = input('image/*', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    maxFileSizeMb = input(...(ngDevMode ? [undefined, { debugName: "maxFileSizeMb" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    coverLabel = input('Cover', ...(ngDevMode ? [{ debugName: "coverLabel" }] : []));
+    addLabel = input('Add images', ...(ngDevMode ? [{ debugName: "addLabel" }] : []));
+    items = model([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    filesAdded = output();
+    filesRejected = output();
+    removed = output();
+    reordered = output();
+    fileInput = viewChild.required('fileInput');
+    grid = viewChild.required('grid');
+    dragOver = signal(false, ...(ngDevMode ? [{ debugName: "dragOver" }] : []));
+    /** Id of the tile currently grabbed for keyboard reordering */
+    grabbedId = signal(null, ...(ngDevMode ? [{ debugName: "grabbedId" }] : []));
+    /** Announcement for screen readers after a keyboard move */
+    liveMessage = signal('', ...(ngDevMode ? [{ debugName: "liveMessage" }] : []));
+    /** Id of the tile being pointer-dragged */
+    dragId = signal(null, ...(ngDevMode ? [{ debugName: "dragId" }] : []));
+    ghostX = signal(0, ...(ngDevMode ? [{ debugName: "ghostX" }] : []));
+    ghostY = signal(0, ...(ngDevMode ? [{ debugName: "ghostY" }] : []));
+    ghostSize = signal(0, ...(ngDevMode ? [{ debugName: "ghostSize" }] : []));
+    pointerId = null;
+    pointerDownX = 0;
+    pointerDownY = 0;
+    pointerDownId = null;
+    dragStarted = false;
+    canAdd = computed(() => {
+        return !this.disabled() && this.items().length < this.maxCount();
+    }, ...(ngDevMode ? [{ debugName: "canAdd" }] : []));
+    dragItem = computed(() => {
+        const id = this.dragId();
+        return id === null ? null : this.items().find(item => item.id === id) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "dragItem" }] : []));
+    tileLabel(item, index) {
+        const position = `Image ${index + 1} of ${this.items().length}`;
+        const cover = index === 0 ? ', cover image' : '';
+        const error = item.error ? `, error: ${item.error}` : '';
+        return `${position}${cover}${error}`;
+    }
+    // --- Adding files ---
+    openFilePicker() {
+        if (this.canAdd()) {
+            this.fileInput().nativeElement.click();
+        }
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.processFiles(Array.from(input.files));
+            input.value = '';
+        }
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.canAdd()) {
+            this.dragOver.set(true);
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragOver.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragOver.set(false);
+        if (!this.canAdd())
+            return;
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.processFiles(Array.from(files));
+        }
+    }
+    processFiles(files) {
+        const accepted = [];
+        const rejected = [];
+        const remaining = this.maxCount() - this.items().length;
+        const maxBytes = this.maxFileSizeMb() != null ? this.maxFileSizeMb() * 1024 * 1024 : null;
+        for (const file of files) {
+            if (accepted.length >= remaining) {
+                rejected.push({ file, reason: `Maximum ${this.maxCount()} image(s) allowed` });
+                continue;
+            }
+            if (!this.isFileTypeAccepted(file)) {
+                rejected.push({ file, reason: 'File type not accepted' });
+                continue;
+            }
+            if (maxBytes !== null && file.size > maxBytes) {
+                rejected.push({ file, reason: `File exceeds maximum size of ${this.maxFileSizeMb()} MB` });
+                continue;
+            }
+            accepted.push(file);
+        }
+        if (accepted.length > 0) {
+            this.filesAdded.emit(accepted);
+        }
+        if (rejected.length > 0) {
+            this.filesRejected.emit(rejected);
+        }
+    }
+    isFileTypeAccepted(file) {
+        const accept = this.accept();
+        if (!accept)
+            return true;
+        const acceptedTypes = accept.split(',').map(t => t.trim().toLowerCase());
+        for (const type of acceptedTypes) {
+            if (type === file.type.toLowerCase())
+                return true;
+            if (type.endsWith('/*')) {
+                const category = type.slice(0, -2);
+                if (file.type.toLowerCase().startsWith(category + '/'))
+                    return true;
+            }
+            if (type.startsWith('.')) {
+                const ext = file.name.toLowerCase().slice(file.name.lastIndexOf('.'));
+                if (ext === type)
+                    return true;
+            }
+        }
+        return false;
+    }
+    // --- Removing ---
+    removeItem(event, id) {
+        event.stopPropagation();
+        if (this.disabled())
+            return;
+        this.items.update(items => items.filter(item => item.id !== id));
+        this.removed.emit(id);
+    }
+    // --- Pointer drag to reorder ---
+    onTilePointerDown(event, id) {
+        if (this.disabled())
+            return;
+        // Ignore drags starting on the remove button
+        if (event.target.closest('.ui-image-uploader__remove'))
+            return;
+        this.pointerId = event.pointerId;
+        this.pointerDownX = event.clientX;
+        this.pointerDownY = event.clientY;
+        this.pointerDownId = id;
+        this.dragStarted = false;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+    }
+    onTilePointerMove(event) {
+        if (this.pointerId !== event.pointerId || this.pointerDownId === null)
+            return;
+        if (!this.dragStarted) {
+            const distance = Math.hypot(event.clientX - this.pointerDownX, event.clientY - this.pointerDownY);
+            if (distance < 6)
+                return;
+            this.dragStarted = true;
+            this.dragId.set(this.pointerDownId);
+            const tile = this.findTileElement(this.pointerDownId);
+            this.ghostSize.set(tile?.offsetWidth ?? 0);
+        }
+        this.ghostX.set(event.clientX);
+        this.ghostY.set(event.clientY);
+        const targetIndex = this.tileIndexAtPoint(event.clientX, event.clientY);
+        if (targetIndex === null)
+            return;
+        const currentIndex = this.items().findIndex(item => item.id === this.dragId());
+        if (currentIndex >= 0 && targetIndex !== currentIndex) {
+            this.moveItem(currentIndex, targetIndex, false);
+        }
+    }
+    onTilePointerUp(event) {
+        if (this.pointerId !== event.pointerId)
+            return;
+        if (this.dragStarted) {
+            this.reordered.emit(this.items().map(item => item.id));
+        }
+        this.pointerId = null;
+        this.pointerDownId = null;
+        this.dragStarted = false;
+        this.dragId.set(null);
+    }
+    findTileElement(id) {
+        return this.grid().nativeElement.querySelector(`.ui-image-uploader__tile[data-id="${CSS.escape(id)}"]`);
+    }
+    tileIndexAtPoint(x, y) {
+        const tiles = this.grid().nativeElement.querySelectorAll('.ui-image-uploader__tile');
+        for (let i = 0; i < tiles.length; i++) {
+            const rect = tiles[i].getBoundingClientRect();
+            if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+                return i;
+            }
+        }
+        return null;
+    }
+    // --- Keyboard reorder ---
+    onTileKeyDown(event, id, index) {
+        if (this.disabled())
+            return;
+        switch (event.key) {
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                if (this.grabbedId() === id) {
+                    this.grabbedId.set(null);
+                    this.liveMessage.set(`Image dropped at position ${index + 1}`);
+                }
+                else {
+                    this.grabbedId.set(id);
+                    this.liveMessage.set(`Image ${index + 1} grabbed. Use arrow keys to move, Space to drop, Escape to cancel.`);
+                }
+                break;
+            case 'Escape':
+                if (this.grabbedId() === id) {
+                    event.preventDefault();
+                    this.grabbedId.set(null);
+                    this.liveMessage.set('Move cancelled');
+                }
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                if (this.grabbedId() === id) {
+                    event.preventDefault();
+                    this.moveByKeyboard(index, index - 1, id);
+                }
+                break;
+            case 'ArrowRight':
+            case 'ArrowDown':
+                if (this.grabbedId() === id) {
+                    event.preventDefault();
+                    this.moveByKeyboard(index, index + 1, id);
+                }
+                break;
+            case 'Delete':
+            case 'Backspace':
+                event.preventDefault();
+                this.removeItem(event, id);
+                break;
+        }
+    }
+    moveByKeyboard(from, to, id) {
+        if (to < 0 || to >= this.items().length)
+            return;
+        this.moveItem(from, to, true);
+        this.liveMessage.set(`Image moved to position ${to + 1} of ${this.items().length}`);
+        // Keep focus on the moved tile after the DOM reorders
+        setTimeout(() => this.findTileElement(id)?.focus());
+    }
+    moveItem(from, to, emit) {
+        this.items.update(items => {
+            const next = [...items];
+            const [moved] = next.splice(from, 1);
+            next.splice(to, 0, moved);
+            return next;
+        });
+        if (emit) {
+            this.reordered.emit(this.items().map(item => item.id));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ImageUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ImageUploaderComponent, isStandalone: true, selector: "ui-image-uploader", inputs: { maxCount: { classPropertyName: "maxCount", publicName: "maxCount", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeMb: { classPropertyName: "maxFileSizeMb", publicName: "maxFileSizeMb", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, coverLabel: { classPropertyName: "coverLabel", publicName: "coverLabel", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filesAdded: "filesAdded", filesRejected: "filesRejected", removed: "removed", reordered: "reordered" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n  #grid\n  class=\"ui-image-uploader\"\n  [class.ui-image-uploader--drag-over]=\"dragOver()\"\n  [class.ui-image-uploader--disabled]=\"disabled()\"\n  role=\"list\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  @for (item of items(); track item.id; let i = $index) {\n    <li\n      class=\"ui-image-uploader__tile\"\n      [class.ui-image-uploader__tile--error]=\"item.error\"\n      [class.ui-image-uploader__tile--grabbed]=\"grabbedId() === item.id\"\n      [class.ui-image-uploader__tile--dragging]=\"dragId() === item.id\"\n      [attr.data-id]=\"item.id\"\n      [attr.tabindex]=\"disabled() ? null : 0\"\n      [attr.aria-label]=\"tileLabel(item, i)\"\n      [attr.title]=\"item.error || null\"\n      (pointerdown)=\"onTilePointerDown($event, item.id)\"\n      (pointermove)=\"onTilePointerMove($event)\"\n      (pointerup)=\"onTilePointerUp($event)\"\n      (pointercancel)=\"onTilePointerUp($event)\"\n      (keydown)=\"onTileKeyDown($event, item.id, i)\"\n    >\n      <img class=\"ui-image-uploader__image\" [src]=\"item.previewUrl\" alt=\"\" draggable=\"false\" />\n\n      @if (i === 0) {\n        <span class=\"ui-image-uploader__cover-badge\">{{ coverLabel() }}</span>\n      }\n\n      @if (item.progress != null && item.progress < 100) {\n        <span class=\"ui-image-uploader__progress\" aria-hidden=\"true\">\n          <span class=\"ui-image-uploader__progress-bar\">\n            <span\n              class=\"ui-image-uploader__progress-fill\"\n              [style.width.%]=\"item.progress\"\n            ></span>\n          </span>\n          <span class=\"ui-image-uploader__progress-text\">{{ item.progress }}%</span>\n        </span>\n      }\n\n      @if (item.error) {\n        <span class=\"ui-image-uploader__error-icon\" aria-hidden=\"true\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n            <path d=\"M12 8v4M12 16h.01\"/>\n          </svg>\n        </span>\n      }\n\n      @if (!disabled()) {\n        <button\n          type=\"button\"\n          class=\"ui-image-uploader__remove\"\n          aria-label=\"Remove image\"\n          (click)=\"removeItem($event, item.id)\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M18 6L6 18M6 6l12 12\"/>\n          </svg>\n        </button>\n      }\n    </li>\n  }\n\n  @if (canAdd()) {\n    <li class=\"ui-image-uploader__add-item\">\n      <button\n        type=\"button\"\n        class=\"ui-image-uploader__add\"\n        [attr.aria-label]=\"addLabel()\"\n        (click)=\"openFilePicker()\"\n      >\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M12 5v14M5 12h14\"/>\n        </svg>\n        <span class=\"ui-image-uploader__add-text\">{{ addLabel() }}</span>\n      </button>\n    </li>\n  }\n</ul>\n\n@if (dragItem(); as item) {\n  <img\n    class=\"ui-image-uploader__ghost\"\n    [src]=\"item.previewUrl\"\n    alt=\"\"\n    aria-hidden=\"true\"\n    [style.width.px]=\"ghostSize()\"\n    [style.height.px]=\"ghostSize()\"\n    [style.left.px]=\"ghostX()\"\n    [style.top.px]=\"ghostY()\"\n  />\n}\n\n<span class=\"ui-visually-hidden\" aria-live=\"polite\">{{ liveMessage() }}</span>\n\n<input\n  #fileInput\n  type=\"file\"\n  class=\"ui-image-uploader__input\"\n  [accept]=\"accept()\"\n  multiple\n  (change)=\"onFileSelected($event)\"\n/>\n", styles: [":host{display:block}.ui-image-uploader{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:var(--ui-spacing-sm);margin:0;padding:var(--ui-spacing-sm);list-style:none;border:2px dashed transparent;border-radius:var(--ui-radius-lg);transition:border-color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-image-uploader--drag-over{border-color:var(--ui-primary);background-color:color-mix(in srgb,var(--ui-primary) 6%,transparent)}.ui-image-uploader--disabled{opacity:.6}.ui-image-uploader__tile{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--ui-image-uploader-tile-border);border-radius:var(--ui-radius-md);background-color:var(--ui-image-uploader-tile-bg);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.ui-image-uploader__tile:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-image-uploader__tile--grabbed{outline:2px solid var(--ui-primary);outline-offset:2px;box-shadow:var(--ui-shadow-md)}.ui-image-uploader__tile--dragging{opacity:.4;cursor:grabbing}.ui-image-uploader__tile--error{border:2px solid var(--ui-danger)}.ui-image-uploader__image{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.ui-image-uploader__tile--error .ui-image-uploader__image{opacity:.5}.ui-image-uploader__cover-badge{position:absolute;left:var(--ui-spacing-xs);bottom:var(--ui-spacing-xs);padding:1px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);background-color:var(--ui-primary);color:var(--ui-primary-text);font-size:var(--ui-font-xs);font-weight:600;pointer-events:none}.ui-image-uploader__remove{position:absolute;top:var(--ui-spacing-xs);right:var(--ui-spacing-xs);display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:50%;background-color:var(--ui-image-uploader-overlay-bg);color:#fff;cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-image-uploader__remove:hover{background-color:var(--ui-danger)}.ui-image-uploader__remove:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-image-uploader__progress{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-sm);background-color:var(--ui-image-uploader-overlay-bg);pointer-events:none}.ui-image-uploader__progress-bar{width:80%;height:4px;border-radius:2px;background-color:#ffffff4d;overflow:hidden}.ui-image-uploader__progress-fill{display:block;height:100%;border-radius:2px;background-color:var(--ui-primary);transition:width var(--ui-transition-fast)}.ui-image-uploader__progress-text{color:#fff;font-size:var(--ui-font-xs);font-weight:600}.ui-image-uploader__error-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ui-danger);pointer-events:none}.ui-image-uploader__add-item{aspect-ratio:1}.ui-image-uploader__add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ui-spacing-xs);width:100%;height:100%;border:2px dashed var(--ui-border);border-radius:var(--ui-radius-md);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:border-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-image-uploader__add:hover{border-color:var(--ui-border-hover);color:var(--ui-text)}.ui-image-uploader__add:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-image-uploader__add-text{font-size:var(--ui-font-xs);font-weight:500}.ui-image-uploader__ghost{position:fixed;z-index:1000;transform:translate(-50%,-50%) scale(.9);border-radius:var(--ui-radius-md);object-fit:cover;box-shadow:var(--ui-shadow-lg);opacity:.9;pointer-events:none}.ui-image-uploader__input{display:none}.ui-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ImageUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-image-uploader', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul\n  #grid\n  class=\"ui-image-uploader\"\n  [class.ui-image-uploader--drag-over]=\"dragOver()\"\n  [class.ui-image-uploader--disabled]=\"disabled()\"\n  role=\"list\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  @for (item of items(); track item.id; let i = $index) {\n    <li\n      class=\"ui-image-uploader__tile\"\n      [class.ui-image-uploader__tile--error]=\"item.error\"\n      [class.ui-image-uploader__tile--grabbed]=\"grabbedId() === item.id\"\n      [class.ui-image-uploader__tile--dragging]=\"dragId() === item.id\"\n      [attr.data-id]=\"item.id\"\n      [attr.tabindex]=\"disabled() ? null : 0\"\n      [attr.aria-label]=\"tileLabel(item, i)\"\n      [attr.title]=\"item.error || null\"\n      (pointerdown)=\"onTilePointerDown($event, item.id)\"\n      (pointermove)=\"onTilePointerMove($event)\"\n      (pointerup)=\"onTilePointerUp($event)\"\n      (pointercancel)=\"onTilePointerUp($event)\"\n      (keydown)=\"onTileKeyDown($event, item.id, i)\"\n    >\n      <img class=\"ui-image-uploader__image\" [src]=\"item.previewUrl\" alt=\"\" draggable=\"false\" />\n\n      @if (i === 0) {\n        <span class=\"ui-image-uploader__cover-badge\">{{ coverLabel() }}</span>\n      }\n\n      @if (item.progress != null && item.progress < 100) {\n        <span class=\"ui-image-uploader__progress\" aria-hidden=\"true\">\n          <span class=\"ui-image-uploader__progress-bar\">\n            <span\n              class=\"ui-image-uploader__progress-fill\"\n              [style.width.%]=\"item.progress\"\n            ></span>\n          </span>\n          <span class=\"ui-image-uploader__progress-text\">{{ item.progress }}%</span>\n        </span>\n      }\n\n      @if (item.error) {\n        <span class=\"ui-image-uploader__error-icon\" aria-hidden=\"true\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n            <path d=\"M12 8v4M12 16h.01\"/>\n          </svg>\n        </span>\n      }\n\n      @if (!disabled()) {\n        <button\n          type=\"button\"\n          class=\"ui-image-uploader__remove\"\n          aria-label=\"Remove image\"\n          (click)=\"removeItem($event, item.id)\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M18 6L6 18M6 6l12 12\"/>\n          </svg>\n        </button>\n      }\n    </li>\n  }\n\n  @if (canAdd()) {\n    <li class=\"ui-image-uploader__add-item\">\n      <button\n        type=\"button\"\n        class=\"ui-image-uploader__add\"\n        [attr.aria-label]=\"addLabel()\"\n        (click)=\"openFilePicker()\"\n      >\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M12 5v14M5 12h14\"/>\n        </svg>\n        <span class=\"ui-image-uploader__add-text\">{{ addLabel() }}</span>\n      </button>\n    </li>\n  }\n</ul>\n\n@if (dragItem(); as item) {\n  <img\n    class=\"ui-image-uploader__ghost\"\n    [src]=\"item.previewUrl\"\n    alt=\"\"\n    aria-hidden=\"true\"\n    [style.width.px]=\"ghostSize()\"\n    [style.height.px]=\"ghostSize()\"\n    [style.left.px]=\"ghostX()\"\n    [style.top.px]=\"ghostY()\"\n  />\n}\n\n<span class=\"ui-visually-hidden\" aria-live=\"polite\">{{ liveMessage() }}</span>\n\n<input\n  #fileInput\n  type=\"file\"\n  class=\"ui-image-uploader__input\"\n  [accept]=\"accept()\"\n  multiple\n  (change)=\"onFileSelected($event)\"\n/>\n", styles: [":host{display:block}.ui-image-uploader{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:var(--ui-spacing-sm);margin:0;padding:var(--ui-spacing-sm);list-style:none;border:2px dashed transparent;border-radius:var(--ui-radius-lg);transition:border-color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-image-uploader--drag-over{border-color:var(--ui-primary);background-color:color-mix(in srgb,var(--ui-primary) 6%,transparent)}.ui-image-uploader--disabled{opacity:.6}.ui-image-uploader__tile{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--ui-image-uploader-tile-border);border-radius:var(--ui-radius-md);background-color:var(--ui-image-uploader-tile-bg);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.ui-image-uploader__tile:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-image-uploader__tile--grabbed{outline:2px solid var(--ui-primary);outline-offset:2px;box-shadow:var(--ui-shadow-md)}.ui-image-uploader__tile--dragging{opacity:.4;cursor:grabbing}.ui-image-uploader__tile--error{border:2px solid var(--ui-danger)}.ui-image-uploader__image{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.ui-image-uploader__tile--error .ui-image-uploader__image{opacity:.5}.ui-image-uploader__cover-badge{position:absolute;left:var(--ui-spacing-xs);bottom:var(--ui-spacing-xs);padding:1px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);background-color:var(--ui-primary);color:var(--ui-primary-text);font-size:var(--ui-font-xs);font-weight:600;pointer-events:none}.ui-image-uploader__remove{position:absolute;top:var(--ui-spacing-xs);right:var(--ui-spacing-xs);display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:50%;background-color:var(--ui-image-uploader-overlay-bg);color:#fff;cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-image-uploader__remove:hover{background-color:var(--ui-danger)}.ui-image-uploader__remove:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-image-uploader__progress{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-sm);background-color:var(--ui-image-uploader-overlay-bg);pointer-events:none}.ui-image-uploader__progress-bar{width:80%;height:4px;border-radius:2px;background-color:#ffffff4d;overflow:hidden}.ui-image-uploader__progress-fill{display:block;height:100%;border-radius:2px;background-color:var(--ui-primary);transition:width var(--ui-transition-fast)}.ui-image-uploader__progress-text{color:#fff;font-size:var(--ui-font-xs);font-weight:600}.ui-image-uploader__error-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ui-danger);pointer-events:none}.ui-image-uploader__add-item{aspect-ratio:1}.ui-image-uploader__add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ui-spacing-xs);width:100%;height:100%;border:2px dashed var(--ui-border);border-radius:var(--ui-radius-md);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:border-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-image-uploader__add:hover{border-color:var(--ui-border-hover);color:var(--ui-text)}.ui-image-uploader__add:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-image-uploader__add-text{font-size:var(--ui-font-xs);font-weight:500}.ui-image-uploader__ghost{position:fixed;z-index:1000;transform:translate(-50%,-50%) scale(.9);border-radius:var(--ui-radius-md);object-fit:cover;box-shadow:var(--ui-shadow-lg);opacity:.9;pointer-events:none}.ui-image-uploader__input{display:none}.ui-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { maxCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCount", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeMb", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], coverLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "coverLabel", required: false }] }], addLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addLabel", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], filesRejected: [{ type: i0.Output, args: ["filesRejected"] }], removed: [{ type: i0.Output, args: ["removed"] }], reordered: [{ type: i0.Output, args: ["reordered"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
+
 class ShellComponent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     sidebarService = inject(SidebarService);
@@ -7729,5 +8360,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, JsonTreeComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective, jsonToTreeNodes };
+export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbSeparatorDirective, ButtonComponent, CardComponent, CarouselComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, ImageUploaderComponent, InputComponent, JsonTreeComponent, LOADABLE, LightboxComponent, LightboxService, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SegmentedComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, StepperComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective, jsonToTreeNodes };
 //# sourceMappingURL=m1z23r-ngx-ui.mjs.map