@mk-kit/ui 0.34.0

package/fesm2022/mk-kit-ui-media.mjs

@@ -0,0 +1,896 @@
+import * as i0 from '@angular/core';
+import { inject, input, booleanAttribute, output, computed, linkedSignal, ChangeDetectionStrategy, Component, signal, Injectable, numberAttribute, PLATFORM_ID, viewChild, model, effect, untracked, afterNextRender, TemplateRef, Directive, contentChild } from '@angular/core';
+import { MK_I18N, MkOverlayRef, MK_OVERLAY_DATA, MkOverlayService } from '@mk-kit/ui/core';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import { mkMoveItemInArray, MkDropList, MkDrag } from '@mk-kit/ui/dnd';
+
+/**
+ * Image — an enhanced image block. While the picture loads it shows a skeleton
+ * shimmer, and when loading fails it swaps to a localised fallback panel
+ * (icon + text, never colour alone). The picture is wrapped in a `<figure>`
+ * with an optional `<figcaption>`, and changing `src` restarts the whole load
+ * cycle.
+ *
+ * ```html
+ * <mk-image
+ *   src="/photos/harbour.jpg"
+ *   alt="Harbour at dawn"
+ *   aspectRatio="16 / 9"
+ *   caption="The old harbour, photographed at dawn"
+ *   (loaded)="onLoaded()"
+ *   (errored)="onErrored()"
+ * />
+ *
+ * <!-- The hero: eager, high priority, and sized per breakpoint so a phone
+ *      does not download the desktop file. -->
+ * <mk-image
+ *   src="/photos/hero-1600.jpg"
+ *   srcset="/photos/hero-800.jpg 800w, /photos/hero-1600.jpg 1600w"
+ *   sizes="100vw"
+ *   alt=""
+ *   aspectRatio="16 / 9"
+ *   priority
+ * />
+ * ```
+ *
+ * `aspectRatio` is what keeps this from shifting layout: the frame reserves
+ * its box before the picture arrives, so nothing below it moves.
+ */
+class MkImage {
+    /** Localised strings (override globally via `provideMkI18n`). */
+    i18n = inject(MK_I18N);
+    /** Image URL. Changing it resets the block to its loading state. */
+    src = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /** Alt text, always reflected onto the `<img>`. Keep `''` for decorative images. */
+    alt = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    /** Any CSS `aspect-ratio` value for the frame, e.g. `'1 / 1'` or `'16 / 9'`. */
+    aspectRatio = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    /** How the picture fills the frame. */
+    fit = input('cover', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []));
+    /** Corner rounding of the frame. */
+    rounded = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    /** Caption rendered in a `<figcaption>` below the picture. */
+    caption = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    /** Defer fetching until near the viewport (`loading="lazy"` vs `"eager"`). */
+    lazy = input(true, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Mark this as the page's LCP image: fetched eagerly at high priority and
+     * decoded synchronously, and `lazy` is ignored. Use it on exactly ONE image
+     * per page — the hero. Marking several is worse than marking none, because
+     * they then compete for the same bandwidth the real LCP image needs.
+     *
+     * This does NOT emit a `<link rel=preload>`; the tag has to be in the HTML
+     * the server sends to beat the preload scanner, which a component rendered
+     * later cannot guarantee. Pair it with a preload hint for a background or
+     * late-rendered hero.
+     */
+    priority = input(false, { ...(ngDevMode ? { debugName: "priority" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Responsive candidates, passed through verbatim to the `<img>`. Serving a
+     * 2048px file into a 600px slot is one of the most common LCP mistakes, and
+     * this is the fix; pair with {@link sizes}.
+     */
+    srcset = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "srcset" }] : /* istanbul ignore next */ []));
+    /** `sizes` attribute — how wide the image renders at each breakpoint. */
+    sizes = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []));
+    /** Emits once the picture has finished loading. */
+    loaded = output();
+    /** Emits when the picture fails to load and the fallback panel is shown. */
+    errored = output();
+    /** `loading` attribute: priority always wins over `lazy`. */
+    loadingAttr = computed(() => this.priority() ? 'eager' : this.lazy() ? 'lazy' : 'eager', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingAttr" }] : /* istanbul ignore next */ []));
+    /** Load lifecycle; snaps back to `'loading'` whenever `src` changes. */
+    state = linkedSignal({ ...(ngDevMode ? { debugName: "state" } : /* istanbul ignore next */ {}), source: this.src,
+        computation: () => 'loading' });
+    onLoad() {
+        this.state.set('loaded');
+        this.loaded.emit();
+    }
+    onError() {
+        this.state.set('error');
+        this.errored.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkImage, isStandalone: true, selector: "mk-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, srcset: { classPropertyName: "srcset", publicName: "srcset", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", errored: "errored" }, host: { properties: { "attr.data-fit": "fit()", "attr.data-rounded": "rounded()", "attr.data-state": "state()" }, classAttribute: "mk-image" }, exportAs: ["mkImage"], ngImport: i0, template: "<figure class=\"mk-image__figure\">\n  <div class=\"mk-image__frame\" [style.aspect-ratio]=\"aspectRatio()\">\n    @if (state() !== 'error') {\n      <img\n        class=\"mk-image__img\"\n        [src]=\"src()\"\n        [alt]=\"alt()\"\n        [attr.srcset]=\"srcset() || null\"\n        [attr.sizes]=\"sizes() || null\"\n        [attr.loading]=\"loadingAttr()\"\n        [attr.fetchpriority]=\"priority() ? 'high' : null\"\n        [attr.decoding]=\"priority() ? 'sync' : 'async'\"\n        (load)=\"onLoad()\"\n        (error)=\"onError()\"\n      />\n      @if (state() === 'loading') {\n        <span class=\"mk-image__skeleton\" aria-hidden=\"true\"></span>\n      }\n    } @else {\n      <div class=\"mk-image__fallback\">\n        <svg\n          class=\"mk-image__fallback-icon\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\" />\n          <circle cx=\"9\" cy=\"10\" r=\"1.5\" />\n          <path d=\"m5 17 4-4 3 3 3.5-3.5L20 17\" />\n          <path d=\"m4 3 16 18\" />\n        </svg>\n        <span class=\"mk-image__fallback-text\">{{ i18n.imageFailed }}</span>\n      </div>\n    }\n  </div>\n  @if (caption()) {\n    <figcaption class=\"mk-image__caption\">{{ caption() }}</figcaption>\n  }\n</figure>\n", styles: ["@charset \"UTF-8\";:host{--_radius: var(--mk-radius-md);display:block;min-width:0;font-family:var(--mk-font-sans)}:host([data-rounded=none]){--_radius: var(--mk-radius-none)}:host([data-rounded=lg]){--_radius: var(--mk-radius-lg)}:host([data-rounded=circle]){--_radius: var(--mk-radius-circle)}.mk-image__figure{display:flex;flex-direction:column;gap:var(--mk-space-2);margin:0;min-width:0}.mk-image__frame{position:relative;width:100%;overflow:hidden;border-radius:var(--_radius);background-color:var(--mk-surface-2)}.mk-image__img{display:block;width:100%;height:100%;object-fit:cover}:host([data-fit=contain]) .mk-image__img{object-fit:contain}:host([data-state=loading]) .mk-image__img{opacity:0}.mk-image__skeleton{position:absolute;inset:0;overflow:hidden;background-color:var(--mk-skeleton-base)}.mk-image__skeleton:after{content:\"\";position:absolute;inset:0;width:200%;background-image:linear-gradient(90deg,var(--mk-skeleton-base) 0%,var(--mk-skeleton-shine) 50%,var(--mk-skeleton-base) 100%);animation:mk-image-shimmer 1.4s ease-in-out infinite}@keyframes mk-image-shimmer{0%{transform:translate(-50%)}to{transform:translate(50%)}}.mk-image__fallback{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);width:100%;height:100%;min-height:var(--mk-control-height-lg);padding:var(--mk-space-4);background-color:var(--mk-surface-2);border:var(--mk-border-width) dashed var(--mk-border);border-radius:var(--_radius);color:var(--mk-text-muted);text-align:center}.mk-image__fallback-icon{flex:none;width:var(--mk-space-6);height:var(--mk-space-6)}.mk-image__fallback-text{font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug)}.mk-image__caption{font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug);color:var(--mk-text-muted)}@media(prefers-reduced-motion:reduce){.mk-image__skeleton:after{content:none;animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkImage, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-image', exportAs: 'mkImage', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-image',
+                        '[attr.data-fit]': 'fit()',
+                        '[attr.data-rounded]': 'rounded()',
+                        '[attr.data-state]': 'state()',
+                    }, template: "<figure class=\"mk-image__figure\">\n  <div class=\"mk-image__frame\" [style.aspect-ratio]=\"aspectRatio()\">\n    @if (state() !== 'error') {\n      <img\n        class=\"mk-image__img\"\n        [src]=\"src()\"\n        [alt]=\"alt()\"\n        [attr.srcset]=\"srcset() || null\"\n        [attr.sizes]=\"sizes() || null\"\n        [attr.loading]=\"loadingAttr()\"\n        [attr.fetchpriority]=\"priority() ? 'high' : null\"\n        [attr.decoding]=\"priority() ? 'sync' : 'async'\"\n        (load)=\"onLoad()\"\n        (error)=\"onError()\"\n      />\n      @if (state() === 'loading') {\n        <span class=\"mk-image__skeleton\" aria-hidden=\"true\"></span>\n      }\n    } @else {\n      <div class=\"mk-image__fallback\">\n        <svg\n          class=\"mk-image__fallback-icon\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\" />\n          <circle cx=\"9\" cy=\"10\" r=\"1.5\" />\n          <path d=\"m5 17 4-4 3 3 3.5-3.5L20 17\" />\n          <path d=\"m4 3 16 18\" />\n        </svg>\n        <span class=\"mk-image__fallback-text\">{{ i18n.imageFailed }}</span>\n      </div>\n    }\n  </div>\n  @if (caption()) {\n    <figcaption class=\"mk-image__caption\">{{ caption() }}</figcaption>\n  }\n</figure>\n", styles: ["@charset \"UTF-8\";:host{--_radius: var(--mk-radius-md);display:block;min-width:0;font-family:var(--mk-font-sans)}:host([data-rounded=none]){--_radius: var(--mk-radius-none)}:host([data-rounded=lg]){--_radius: var(--mk-radius-lg)}:host([data-rounded=circle]){--_radius: var(--mk-radius-circle)}.mk-image__figure{display:flex;flex-direction:column;gap:var(--mk-space-2);margin:0;min-width:0}.mk-image__frame{position:relative;width:100%;overflow:hidden;border-radius:var(--_radius);background-color:var(--mk-surface-2)}.mk-image__img{display:block;width:100%;height:100%;object-fit:cover}:host([data-fit=contain]) .mk-image__img{object-fit:contain}:host([data-state=loading]) .mk-image__img{opacity:0}.mk-image__skeleton{position:absolute;inset:0;overflow:hidden;background-color:var(--mk-skeleton-base)}.mk-image__skeleton:after{content:\"\";position:absolute;inset:0;width:200%;background-image:linear-gradient(90deg,var(--mk-skeleton-base) 0%,var(--mk-skeleton-shine) 50%,var(--mk-skeleton-base) 100%);animation:mk-image-shimmer 1.4s ease-in-out infinite}@keyframes mk-image-shimmer{0%{transform:translate(-50%)}to{transform:translate(50%)}}.mk-image__fallback{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);width:100%;height:100%;min-height:var(--mk-control-height-lg);padding:var(--mk-space-4);background-color:var(--mk-surface-2);border:var(--mk-border-width) dashed var(--mk-border);border-radius:var(--_radius);color:var(--mk-text-muted);text-align:center}.mk-image__fallback-icon{flex:none;width:var(--mk-space-6);height:var(--mk-space-6)}.mk-image__fallback-text{font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug)}.mk-image__caption{font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug);color:var(--mk-text-muted)}@media(prefers-reduced-motion:reduce){.mk-image__skeleton:after{content:none;animation:none}}\n"] }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], srcset: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcset", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], errored: [{ type: i0.Output, args: ["errored"] }] } });
+
+/**
+ * Internal overlay component backing {@link MkLightboxService}. Renders the
+ * current image near-fullscreen over the overlay scrim with a caption bar,
+ * an `imageOf` counter, a close button and looping previous/next navigation.
+ *
+ * Keyboard: `ArrowLeft`/`ArrowRight` navigate, `Home`/`End` jump to the first
+ * or last image. `Escape` and backdrop clicks are handled by the overlay
+ * itself (`closeOnEscape` / `closeOnBackdropClick`), so they are deliberately
+ * not re-handled here.
+ *
+ * Open it via the service — not by placing `<mk-lightbox>` in a template:
+ *
+ * ```ts
+ * inject(MkLightboxService).open(items, 2);
+ * ```
+ */
+class MkLightbox {
+    ref = inject(MkOverlayRef);
+    data = inject(MK_OVERLAY_DATA);
+    /** Localised strings (override globally via `provideMkI18n`). */
+    i18n = inject(MK_I18N);
+    /** The images being paged through. */
+    items = this.data?.items ?? [];
+    /** Total number of images. */
+    total = this.items.length;
+    /** Index of the currently displayed image. */
+    index = signal(Math.min(Math.max(this.data?.startIndex ?? 0, 0), Math.max(this.total - 1, 0)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    /** The currently displayed item. */
+    current = computed(() => this.items[this.index()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** Localised "Image i of n" counter text. */
+    counter = computed(() => this.i18n.imageOf(this.index() + 1, this.total), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counter" }] : /* istanbul ignore next */ []));
+    /** `true` while the current image is still loading. */
+    loading = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** `true` when the current image failed to load. */
+    failed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []));
+    /** Show the previous image, wrapping from the first to the last. */
+    previous() {
+        this.goTo((this.index() - 1 + this.total) % this.total);
+    }
+    /** Show the next image, wrapping from the last back to the first. */
+    next() {
+        this.goTo((this.index() + 1) % this.total);
+    }
+    /** Jump to `index`, resetting the loading/error state. */
+    goTo(index) {
+        if (this.total === 0 || index === this.index())
+            return;
+        this.index.set(index);
+        this.loading.set(true);
+        this.failed.set(false);
+    }
+    /** Close the surrounding overlay. */
+    close() {
+        this.ref.close();
+    }
+    /** Current image finished loading — hide the spinner. */
+    onLoad() {
+        this.loading.set(false);
+    }
+    /** Current image failed — show the localised failure message instead. */
+    onError() {
+        this.loading.set(false);
+        this.failed.set(true);
+    }
+    /**
+     * Host keydown handler. Escape is intentionally not handled here — the
+     * overlay's `closeOnEscape` already closes the lightbox.
+     */
+    onKeydown(event) {
+        const key = event.key;
+        switch (key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.previous();
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.next();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.goTo(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.goTo(this.total - 1);
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLightbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkLightbox, isStandalone: true, selector: "mk-lightbox", host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.mk-lightbox": "true" } }, ngImport: i0, template: "@if (current(); as item) {\n  <figure class=\"mk-lightbox__figure\">\n    <div class=\"mk-lightbox__stage\">\n      @if (failed()) {\n        <p class=\"mk-lightbox__error\" role=\"alert\">{{ i18n.imageFailed }}</p>\n      } @else {\n        @if (loading()) {\n          <span class=\"mk-lightbox__spinner\" aria-hidden=\"true\"></span>\n        }\n        <img\n          class=\"mk-lightbox__image\"\n          [class.mk-lightbox__image--loading]=\"loading()\"\n          [src]=\"item.src\"\n          [alt]=\"item.alt ?? ''\"\n          (load)=\"onLoad()\"\n          (error)=\"onError()\"\n        />\n      }\n    </div>\n    @if (item.caption) {\n      <figcaption class=\"mk-lightbox__caption\">{{ item.caption }}</figcaption>\n    }\n    <p class=\"mk-lightbox__counter\" aria-live=\"polite\">{{ counter() }}</p>\n  </figure>\n}\n\n<button\n  type=\"button\"\n  class=\"mk-lightbox__button mk-lightbox__close\"\n  [attr.aria-label]=\"i18n.close\"\n  (click)=\"close()\"\n>\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M6 6l12 12M18 6L6 18\" />\n  </svg>\n</button>\n\n@if (total > 1) {\n  <button\n    type=\"button\"\n    class=\"mk-lightbox__button mk-lightbox__nav mk-lightbox__nav--prev\"\n    [attr.aria-label]=\"i18n.previousImage\"\n    (click)=\"previous()\"\n  >\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M15 5l-7 7 7 7\" />\n    </svg>\n  </button>\n  <button\n    type=\"button\"\n    class=\"mk-lightbox__button mk-lightbox__nav mk-lightbox__nav--next\"\n    [attr.aria-label]=\"i18n.nextImage\"\n    (click)=\"next()\"\n  >\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M9 5l7 7-7 7\" />\n    </svg>\n  </button>\n}\n", styles: [":host{--_chrome-bg: color-mix(in srgb, var(--mk-surface-inverse) 60%, transparent);--_chrome-bg-hover: color-mix( in srgb, var(--mk-surface-inverse) 80%, transparent );--_chrome-fg: var(--mk-text-inverse);display:flex;align-items:center;justify-content:center;width:100vw;height:100dvh;font-family:var(--mk-font-sans)}.mk-lightbox__figure{display:flex;flex-direction:column;align-items:center;gap:var(--mk-space-3);margin:0;max-width:90vw}.mk-lightbox__stage{position:relative;display:grid;place-items:center;min-width:4rem;min-height:4rem}.mk-lightbox__image{display:block;max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-xl);transition:opacity var(--mk-duration-normal) var(--mk-ease-out)}.mk-lightbox__image--loading{opacity:0}.mk-lightbox__spinner{position:absolute;inset:0;margin:auto;width:2rem;height:2rem;border:3px solid color-mix(in srgb,var(--mk-surface-inverse) 45%,transparent);border-top-color:var(--_chrome-fg);border-radius:var(--mk-radius-circle);animation:mk-lightbox-spin var(--mk-duration-slow) linear infinite}.mk-lightbox__error{margin:0;padding:var(--mk-space-3) var(--mk-space-5);border-radius:var(--mk-radius-lg);background:var(--_chrome-bg);color:var(--_chrome-fg);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug)}.mk-lightbox__caption{max-width:90vw;padding:var(--mk-space-2) var(--mk-space-4);border-radius:var(--mk-radius-pill);background:var(--_chrome-bg);color:var(--_chrome-fg);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug);text-align:center}.mk-lightbox__counter{margin:0;padding:var(--mk-space-1) var(--mk-space-3);border-radius:var(--mk-radius-pill);background:var(--_chrome-bg);color:var(--_chrome-fg);font-size:var(--mk-font-size-xs);font-variant-numeric:tabular-nums}.mk-lightbox__button{position:absolute;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:var(--mk-radius-circle);background:var(--_chrome-bg);color:var(--_chrome-fg);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),scale var(--mk-duration-fast) var(--mk-ease-standard)}.mk-lightbox__button:hover{background:var(--_chrome-bg-hover)}.mk-lightbox__button:active{scale:.94}.mk-lightbox__button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-lightbox__button svg{width:1.25rem;height:1.25rem}.mk-lightbox__close{top:var(--mk-space-4);right:var(--mk-space-4)}.mk-lightbox__nav{top:50%;translate:0 -50%}.mk-lightbox__nav--prev{left:var(--mk-space-4)}.mk-lightbox__nav--next{right:var(--mk-space-4)}@keyframes mk-lightbox-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-lightbox__image,.mk-lightbox__button{transition:none}.mk-lightbox__spinner{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLightbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-lightbox', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        // Bound (not static) so it merges with the overlay's own panel classes —
+                        // a static host `class` would overwrite `mk-overlay-panel` on the host.
+                        '[class.mk-lightbox]': 'true',
+                        '(keydown)': 'onKeydown($event)',
+                    }, template: "@if (current(); as item) {\n  <figure class=\"mk-lightbox__figure\">\n    <div class=\"mk-lightbox__stage\">\n      @if (failed()) {\n        <p class=\"mk-lightbox__error\" role=\"alert\">{{ i18n.imageFailed }}</p>\n      } @else {\n        @if (loading()) {\n          <span class=\"mk-lightbox__spinner\" aria-hidden=\"true\"></span>\n        }\n        <img\n          class=\"mk-lightbox__image\"\n          [class.mk-lightbox__image--loading]=\"loading()\"\n          [src]=\"item.src\"\n          [alt]=\"item.alt ?? ''\"\n          (load)=\"onLoad()\"\n          (error)=\"onError()\"\n        />\n      }\n    </div>\n    @if (item.caption) {\n      <figcaption class=\"mk-lightbox__caption\">{{ item.caption }}</figcaption>\n    }\n    <p class=\"mk-lightbox__counter\" aria-live=\"polite\">{{ counter() }}</p>\n  </figure>\n}\n\n<button\n  type=\"button\"\n  class=\"mk-lightbox__button mk-lightbox__close\"\n  [attr.aria-label]=\"i18n.close\"\n  (click)=\"close()\"\n>\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M6 6l12 12M18 6L6 18\" />\n  </svg>\n</button>\n\n@if (total > 1) {\n  <button\n    type=\"button\"\n    class=\"mk-lightbox__button mk-lightbox__nav mk-lightbox__nav--prev\"\n    [attr.aria-label]=\"i18n.previousImage\"\n    (click)=\"previous()\"\n  >\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M15 5l-7 7 7 7\" />\n    </svg>\n  </button>\n  <button\n    type=\"button\"\n    class=\"mk-lightbox__button mk-lightbox__nav mk-lightbox__nav--next\"\n    [attr.aria-label]=\"i18n.nextImage\"\n    (click)=\"next()\"\n  >\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M9 5l7 7-7 7\" />\n    </svg>\n  </button>\n}\n", styles: [":host{--_chrome-bg: color-mix(in srgb, var(--mk-surface-inverse) 60%, transparent);--_chrome-bg-hover: color-mix( in srgb, var(--mk-surface-inverse) 80%, transparent );--_chrome-fg: var(--mk-text-inverse);display:flex;align-items:center;justify-content:center;width:100vw;height:100dvh;font-family:var(--mk-font-sans)}.mk-lightbox__figure{display:flex;flex-direction:column;align-items:center;gap:var(--mk-space-3);margin:0;max-width:90vw}.mk-lightbox__stage{position:relative;display:grid;place-items:center;min-width:4rem;min-height:4rem}.mk-lightbox__image{display:block;max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-xl);transition:opacity var(--mk-duration-normal) var(--mk-ease-out)}.mk-lightbox__image--loading{opacity:0}.mk-lightbox__spinner{position:absolute;inset:0;margin:auto;width:2rem;height:2rem;border:3px solid color-mix(in srgb,var(--mk-surface-inverse) 45%,transparent);border-top-color:var(--_chrome-fg);border-radius:var(--mk-radius-circle);animation:mk-lightbox-spin var(--mk-duration-slow) linear infinite}.mk-lightbox__error{margin:0;padding:var(--mk-space-3) var(--mk-space-5);border-radius:var(--mk-radius-lg);background:var(--_chrome-bg);color:var(--_chrome-fg);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug)}.mk-lightbox__caption{max-width:90vw;padding:var(--mk-space-2) var(--mk-space-4);border-radius:var(--mk-radius-pill);background:var(--_chrome-bg);color:var(--_chrome-fg);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug);text-align:center}.mk-lightbox__counter{margin:0;padding:var(--mk-space-1) var(--mk-space-3);border-radius:var(--mk-radius-pill);background:var(--_chrome-bg);color:var(--_chrome-fg);font-size:var(--mk-font-size-xs);font-variant-numeric:tabular-nums}.mk-lightbox__button{position:absolute;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:var(--mk-radius-circle);background:var(--_chrome-bg);color:var(--_chrome-fg);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),scale var(--mk-duration-fast) var(--mk-ease-standard)}.mk-lightbox__button:hover{background:var(--_chrome-bg-hover)}.mk-lightbox__button:active{scale:.94}.mk-lightbox__button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-lightbox__button svg{width:1.25rem;height:1.25rem}.mk-lightbox__close{top:var(--mk-space-4);right:var(--mk-space-4)}.mk-lightbox__nav{top:50%;translate:0 -50%}.mk-lightbox__nav--prev{left:var(--mk-space-4)}.mk-lightbox__nav--next{right:var(--mk-space-4)}@keyframes mk-lightbox-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-lightbox__image,.mk-lightbox__button{transition:none}.mk-lightbox__spinner{animation:none}}\n"] }]
+        }] });
+
+/**
+ * Fullscreen image lightbox — opens a set of images in a modal overlay with
+ * looping previous/next navigation, captions, a counter, keyboard support
+ * (Arrow keys, Home/End, Escape) and focus trapping, all powered by
+ * {@link MkOverlayService}.
+ *
+ * ```ts
+ * private readonly lightbox = inject(MkLightboxService);
+ *
+ * viewPhoto(index: number): void {
+ *   this.lightbox.open(
+ *     [
+ *       { src: '/photos/1.jpg', alt: 'Harbour at dawn', caption: 'Dawn' },
+ *       { src: '/photos/2.jpg', alt: 'Old town square' },
+ *     ],
+ *     index,
+ *   );
+ * }
+ * ```
+ */
+class MkLightboxService {
+    overlay = inject(MkOverlayService);
+    i18n = inject(MK_I18N);
+    /**
+     * Open the lightbox over the page. Does nothing when `items` is empty.
+     * `startIndex` is clamped into `[0, items.length - 1]`.
+     */
+    open(items, startIndex = 0) {
+        if (items.length === 0)
+            return;
+        const start = Math.min(Math.max(Math.trunc(startIndex), 0), items.length - 1);
+        this.overlay.open(MkLightbox, {
+            data: { items, startIndex: start },
+            hasBackdrop: true,
+            closeOnBackdropClick: true,
+            closeOnEscape: true,
+            trapFocus: true,
+            role: 'dialog',
+            ariaLabel: this.i18n.imageOf(start + 1, items.length),
+            panelClass: 'mk-lightbox-panel',
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLightboxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLightboxService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLightboxService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Image gallery — a wall of clickable picture tiles built on {@link MkImage}.
+ * Choose a uniform `grid`, a natural-ratio `masonry` flow, or a snap-scrolling
+ * horizontal `strip`. Clicking a tile opens the shared {@link MkLightboxService}
+ * at that picture (full-size `src`, not the thumb) and always emits
+ * `itemClick`. With `max` set, only the first `max` tiles render and the last
+ * one carries a "+N" overflow scrim that opens the rest in the lightbox.
+ *
+ * ```html
+ * <mk-image-gallery
+ *   [items]="[
+ *     { src: '/photos/1.jpg', thumb: '/thumbs/1.jpg', alt: 'Harbour at dawn' },
+ *     { src: '/photos/2.jpg', alt: 'Old town square', caption: 'Kraków' },
+ *   ]"
+ *   [columns]="4"
+ *   [max]="8"
+ *   aspectRatio="4 / 3"
+ *   (itemClick)="onItemClick($event)"
+ * />
+ * ```
+ */
+class MkImageGallery {
+    lightboxService = inject(MkLightboxService);
+    /** Localised strings (override globally via `provideMkI18n`). */
+    i18n = inject(MK_I18N);
+    /** Pictures to show. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Tile arrangement. */
+    layout = input('grid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Grid/masonry column count; also sets the visible tile count of a strip. */
+    columns = input(3, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** When set, show only the first `max` tiles plus a "+N" overflow tile. */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Open the shared lightbox on tile click. */
+    lightbox = input(true, { ...(ngDevMode ? { debugName: "lightbox" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** CSS aspect-ratio of grid/strip tiles (masonry keeps natural ratios). */
+    aspectRatio = input('1 / 1', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    /** Corner rounding of the tiles. */
+    rounded = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    /** Emits on every tile click (also when the lightbox opens). */
+    itemClick = output();
+    /** Tiles actually rendered — the first `max` when `max` is set. */
+    visibleItems = computed(() => {
+        const items = this.items();
+        const max = this.max();
+        return max != null && items.length > max
+            ? items.slice(0, Math.max(0, max))
+            : items;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    /** How many pictures the trailing "+N" tile stands for (0 = no overflow). */
+    overflowCount = computed(() => this.items().length - this.visibleItems().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []));
+    /** Frame ratio forwarded to the tiles (`'auto'` in masonry). */
+    tileAspectRatio = computed(() => this.layout() === 'masonry' ? 'auto' : this.aspectRatio(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tileAspectRatio" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible label of tile `index`: `viewImage(alt)` when the picture has
+     * alt text, else positional `imageOf(...)`; the overflow tile appends "+N".
+     */
+    tileLabel(index) {
+        const items = this.items();
+        const alt = items[index]?.alt;
+        const base = alt
+            ? this.i18n.viewImage(alt)
+            : this.i18n.imageOf(index + 1, items.length);
+        const overflow = this.overflowCount();
+        const isOverflowTile = overflow > 0 && index === this.visibleItems().length - 1;
+        return isOverflowTile ? `${base} (+${overflow})` : base;
+    }
+    onTileClick(index) {
+        const items = this.items();
+        if (this.lightbox()) {
+            const lightboxItems = items.map(({ src, alt, caption }) => ({ src, alt, caption }));
+            this.lightboxService.open(lightboxItems, index);
+        }
+        this.itemClick.emit({ item: items[index], index });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkImageGallery, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkImageGallery, isStandalone: true, selector: "mk-image-gallery", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, lightbox: { classPropertyName: "lightbox", publicName: "lightbox", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "attr.data-layout": "layout()", "attr.data-rounded": "rounded()", "style.--_cols": "columns()" }, classAttribute: "mk-image-gallery" }, exportAs: ["mkImageGallery"], ngImport: i0, template: "@for (item of visibleItems(); track $index; let i = $index; let last = $last) {\n  <button\n    type=\"button\"\n    class=\"mk-gallery__tile\"\n    [attr.aria-label]=\"tileLabel(i)\"\n    (click)=\"onTileClick(i)\"\n  >\n    <mk-image\n      [src]=\"item.thumb ?? item.src\"\n      [aspectRatio]=\"tileAspectRatio()\"\n      [rounded]=\"rounded()\"\n    />\n    @if (last && overflowCount() > 0) {\n      <span class=\"mk-gallery__more\" aria-hidden=\"true\"\n        >+{{ overflowCount() }}</span\n      >\n    }\n  </button>\n}\n", styles: [":host{--_cols: 3;--_gap: var(--mk-space-2);--_radius: var(--mk-radius-md);display:grid;grid-template-columns:repeat(var(--_cols),1fr);gap:var(--_gap);min-width:0;font-family:var(--mk-font-sans)}:host([data-rounded=none]){--_radius: var(--mk-radius-none)}:host([data-rounded=lg]){--_radius: var(--mk-radius-lg)}:host([data-rounded=circle]){--_radius: var(--mk-radius-circle)}:host([data-layout=masonry]){display:block;columns:var(--_cols);column-gap:var(--_gap)}:host([data-layout=masonry]) .mk-gallery__tile{width:100%;break-inside:avoid;margin-block-end:var(--_gap)}:host([data-layout=strip]){display:flex;gap:var(--_gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:var(--mk-space-1)}:host([data-layout=strip]) .mk-gallery__tile{flex:0 0 calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols));scroll-snap-align:start}.mk-gallery__tile{position:relative;display:block;min-width:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;border-radius:var(--_radius);cursor:pointer}.mk-gallery__tile:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-gallery__tile:after{content:\"\";position:absolute;inset:0;border-radius:var(--_radius);background-color:transparent;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard);pointer-events:none}.mk-gallery__tile:hover:after{background-color:var(--mk-hover-overlay)}.mk-gallery__tile:active:after{background-color:var(--mk-active-overlay)}.mk-gallery__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:var(--_radius);background-color:var(--mk-overlay-scrim);color:var(--mk-primary-contrast);font-size:var(--mk-font-size-xl);font-weight:var(--mk-font-weight-semibold);pointer-events:none}@media(prefers-reduced-motion:reduce){.mk-gallery__tile:after{transition:none}}\n"], dependencies: [{ kind: "component", type: MkImage, selector: "mk-image", inputs: ["src", "alt", "aspectRatio", "fit", "rounded", "caption", "lazy", "priority", "srcset", "sizes"], outputs: ["loaded", "errored"], exportAs: ["mkImage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkImageGallery, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-image-gallery', exportAs: 'mkImageGallery', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkImage], host: {
+                        class: 'mk-image-gallery',
+                        '[attr.data-layout]': 'layout()',
+                        '[attr.data-rounded]': 'rounded()',
+                        '[style.--_cols]': 'columns()',
+                    }, template: "@for (item of visibleItems(); track $index; let i = $index; let last = $last) {\n  <button\n    type=\"button\"\n    class=\"mk-gallery__tile\"\n    [attr.aria-label]=\"tileLabel(i)\"\n    (click)=\"onTileClick(i)\"\n  >\n    <mk-image\n      [src]=\"item.thumb ?? item.src\"\n      [aspectRatio]=\"tileAspectRatio()\"\n      [rounded]=\"rounded()\"\n    />\n    @if (last && overflowCount() > 0) {\n      <span class=\"mk-gallery__more\" aria-hidden=\"true\"\n        >+{{ overflowCount() }}</span\n      >\n    }\n  </button>\n}\n", styles: [":host{--_cols: 3;--_gap: var(--mk-space-2);--_radius: var(--mk-radius-md);display:grid;grid-template-columns:repeat(var(--_cols),1fr);gap:var(--_gap);min-width:0;font-family:var(--mk-font-sans)}:host([data-rounded=none]){--_radius: var(--mk-radius-none)}:host([data-rounded=lg]){--_radius: var(--mk-radius-lg)}:host([data-rounded=circle]){--_radius: var(--mk-radius-circle)}:host([data-layout=masonry]){display:block;columns:var(--_cols);column-gap:var(--_gap)}:host([data-layout=masonry]) .mk-gallery__tile{width:100%;break-inside:avoid;margin-block-end:var(--_gap)}:host([data-layout=strip]){display:flex;gap:var(--_gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:var(--mk-space-1)}:host([data-layout=strip]) .mk-gallery__tile{flex:0 0 calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols));scroll-snap-align:start}.mk-gallery__tile{position:relative;display:block;min-width:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;border-radius:var(--_radius);cursor:pointer}.mk-gallery__tile:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-gallery__tile:after{content:\"\";position:absolute;inset:0;border-radius:var(--_radius);background-color:transparent;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard);pointer-events:none}.mk-gallery__tile:hover:after{background-color:var(--mk-hover-overlay)}.mk-gallery__tile:active:after{background-color:var(--mk-active-overlay)}.mk-gallery__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:var(--_radius);background-color:var(--mk-overlay-scrim);color:var(--mk-primary-contrast);font-size:var(--mk-font-size-xl);font-weight:var(--mk-font-weight-semibold);pointer-events:none}@media(prefers-reduced-motion:reduce){.mk-gallery__tile:after{transition:none}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], lightbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightbox", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+// --- Pure crop geometry -----------------------------------------------------
+// jsdom has no canvas and never loads images, so everything numeric lives in
+// these exported functions where it can be unit-tested directly.
+/**
+ * Base cover scale for an image in a viewport — the smallest scale at which
+ * `imgW × imgH` fully covers `vpW × vpH` (object-fit: cover). Returns `1`
+ * for degenerate (non-positive) dimensions.
+ */
+function mkCoverScale(imgW, imgH, vpW, vpH) {
+    if (imgW <= 0 || imgH <= 0 || vpW <= 0 || vpH <= 0)
+        return 1;
+    return Math.max(vpW / imgW, vpH / imgH);
+}
+/**
+ * Clamp a pan offset (CSS px, measured from the viewport centre to the image
+ * centre) so the image scaled by `scale` still covers the viewport — no empty
+ * edges. When the scaled image is not larger than the viewport on an axis the
+ * offset collapses to `0` (centred).
+ */
+function mkClampPan(x, y, imgW, imgH, vpW, vpH, scale) {
+    const maxX = Math.max(0, (imgW * scale - vpW) / 2);
+    const maxY = Math.max(0, (imgH * scale - vpH) / 2);
+    // `+ 0` normalises the -0 produced when an axis has no slack.
+    return {
+        x: Math.min(maxX, Math.max(-maxX, x)) + 0,
+        y: Math.min(maxY, Math.max(-maxY, y)) + 0,
+    };
+}
+/**
+ * Source rect (in natural image pixels) of the crop region visible through
+ * the viewport. `scale` maps natural pixels to CSS pixels (cover scale ×
+ * zoom); `panX`/`panY` are the CSS-px offsets of the image centre from the
+ * viewport centre. The rect is clamped inside the image bounds.
+ */
+function mkCropRect(imgNaturalW, imgNaturalH, vpW, vpH, scale, panX, panY) {
+    if (imgNaturalW <= 0 || imgNaturalH <= 0 || vpW <= 0 || vpH <= 0 || scale <= 0) {
+        return { sx: 0, sy: 0, sw: Math.max(0, imgNaturalW), sh: Math.max(0, imgNaturalH) };
+    }
+    const sw = Math.min(vpW / scale, imgNaturalW);
+    const sh = Math.min(vpH / scale, imgNaturalH);
+    // The image point rendered at the viewport centre.
+    const cx = imgNaturalW / 2 - panX / scale;
+    const cy = imgNaturalH / 2 - panY / scale;
+    const sx = Math.min(Math.max(cx - sw / 2, 0), imgNaturalW - sw);
+    const sy = Math.min(Math.max(cy - sh / 2, 0), imgNaturalH - sh);
+    return { sx, sy, sw, sh };
+}
+/** Zoom step used by the −/+ buttons. */
+const BUTTON_ZOOM_STEP = 0.25;
+/** Zoom step used by the `+`/`-` keys. */
+const KEY_ZOOM_STEP = 0.1;
+/**
+ * ImageCropper — pan-and-zoom crop control for avatars, covers and media uploads.
+ * The image covers a fixed-aspect viewport (object-fit-cover style); the user
+ * drags to pan, scrolls / pinch-zooms via the slider or `+`/`−` controls, and
+ * `crop()` renders the visible region to a data-URL on an offscreen canvas.
+ *
+ * Pan is always clamped so the image keeps covering the viewport, a
+ * rule-of-thirds grid appears while dragging, and `round` overlays a circular
+ * scrim for avatar crops (the exported bitmap stays rectangular). The crop
+ * area is keyboard operable: Arrow keys pan by 10px (1px with Shift), `+`/`-`
+ * zoom.
+ *
+ * ```html
+ * <mk-image-cropper #cropper src="/assets/photo.jpg" [aspect]="1" round />
+ * <button mkButton (click)="avatar = cropper.crop({ size: 512 })">Save</button>
+ * ```
+ */
+class MkImageCropper {
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Localised strings (override globally via `provideMkI18n`). */
+    i18n = inject(MK_I18N);
+    viewportRef = viewChild.required('viewport', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportRef" }] : /* istanbul ignore next */ []));
+    imageRef = viewChild('image', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imageRef" }] : /* istanbul ignore next */ []));
+    /** Image URL or data-URL to crop. */
+    src = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /**
+     * Aspect ratio (width / height) of the crop viewport, e.g. `1` for a
+     * square or `16 / 9`. `null` makes the viewport fill its container.
+     */
+    aspect = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aspect" }] : /* istanbul ignore next */ []));
+    /**
+     * Circular mask overlay for avatar crops. Purely visual — the exported
+     * bitmap from `crop()` stays rectangular.
+     */
+    round = input(false, { ...(ngDevMode ? { debugName: "round" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Lowest allowed zoom factor. */
+    minZoom = input(1, { ...(ngDevMode ? { debugName: "minZoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Highest allowed zoom factor. */
+    maxZoom = input(4, { ...(ngDevMode ? { debugName: "maxZoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Disable panning and zooming. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * `crossorigin` for the internal `<img>`. Set to `'anonymous'` when
+     * cropping CORS-enabled remote images — without it the canvas is tainted
+     * and `crop()` returns `null`. Same-origin and data-URL sources don't
+     * need it.
+     */
+    crossOrigin = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "crossOrigin" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the crop area (defaults to the i18n `zoom` label). */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Emits on any pan or zoom change. */
+    changed = output();
+    /** Emits when the image fails to load. */
+    imageError = output();
+    /** Two-way zoom factor, clamped to `[minZoom, maxZoom]`. */
+    zoom = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    natW = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "natW" }] : /* istanbul ignore next */ []));
+    natH = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "natH" }] : /* istanbul ignore next */ []));
+    vpW = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vpW" }] : /* istanbul ignore next */ []));
+    vpH = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vpH" }] : /* istanbul ignore next */ []));
+    panX = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panX" }] : /* istanbul ignore next */ []));
+    panY = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panY" }] : /* istanbul ignore next */ []));
+    status = signal('loading', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    dragStart = null;
+    resizeObserver;
+    coverScale = computed(() => mkCoverScale(this.natW(), this.natH(), this.vpW(), this.vpH()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "coverScale" }] : /* istanbul ignore next */ []));
+    totalScale = computed(() => this.coverScale() * this.zoom(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalScale" }] : /* istanbul ignore next */ []));
+    /** CSS transform applied to the image element. */
+    imageTransform = computed(() => `translate(calc(-50% + ${this.panX()}px), calc(-50% + ${this.panY()}px)) ` +
+        `scale(${this.totalScale()})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imageTransform" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Restart from scratch whenever the source changes.
+        effect(() => {
+            this.src();
+            untracked(() => {
+                this.status.set('loading');
+                this.natW.set(0);
+                this.natH.set(0);
+                this.reset();
+            });
+        });
+        // Keep an externally-written zoom model inside [minZoom, maxZoom].
+        effect(() => {
+            const clamped = this.clampZoom(this.zoom());
+            if (clamped !== this.zoom())
+                this.zoom.set(clamped);
+        });
+        // Re-clamp pan when zoom, image or viewport geometry changes.
+        effect(() => {
+            const scale = this.totalScale();
+            const [imgW, imgH, vpW, vpH] = [this.natW(), this.natH(), this.vpW(), this.vpH()];
+            untracked(() => {
+                const p = mkClampPan(this.panX(), this.panY(), imgW, imgH, vpW, vpH, scale);
+                this.panX.set(p.x);
+                this.panY.set(p.y);
+            });
+        });
+        afterNextRender(() => {
+            this.measure();
+            const viewport = this.viewportRef().nativeElement;
+            // Angular's (wheel) binding may register passively; zooming must be
+            // able to preventDefault, so attach by hand.
+            viewport.addEventListener('wheel', this.onWheel, { passive: false });
+            if ('ResizeObserver' in window) {
+                this.resizeObserver = new ResizeObserver(() => this.measure());
+                this.resizeObserver.observe(viewport);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        if (this.isBrowser) {
+            this.viewportRef().nativeElement.removeEventListener('wheel', this.onWheel);
+        }
+    }
+    // --- Public API -----------------------------------------------------------
+    /** Centre the image and reset zoom to 1 (clamped to `minZoom`). */
+    reset() {
+        const zoom = this.clampZoom(1);
+        const dirty = this.zoom() !== zoom || this.panX() !== 0 || this.panY() !== 0;
+        this.zoom.set(zoom);
+        this.panX.set(0);
+        this.panY.set(0);
+        if (dirty)
+            this.changed.emit();
+    }
+    /**
+     * Draw the visible crop region to an offscreen canvas and return it as a
+     * data-URL (longest edge capped at `options.size ?? 1024`). Returns `null`
+     * when the image is not loaded or the canvas is unavailable (SSR, jsdom).
+     */
+    /**
+     * The visible crop region in natural image pixels — what `crop()` would
+     * rasterise, without touching a canvas. Use it when the backend performs
+     * the actual crop from the master image (no client-side quality loss).
+     * Returns `null` until the image has loaded and the viewport is measured.
+     */
+    cropRect() {
+        if (this.status() !== 'loaded')
+            return null;
+        const [natW, natH, vpW, vpH] = [this.natW(), this.natH(), this.vpW(), this.vpH()];
+        if (!natW || !natH || !vpW || !vpH)
+            return null;
+        return mkCropRect(natW, natH, vpW, vpH, this.totalScale(), this.panX(), this.panY());
+    }
+    crop(options) {
+        const image = this.imageRef()?.nativeElement;
+        if (!this.isBrowser || this.status() !== 'loaded' || !image)
+            return null;
+        const [natW, natH, vpW, vpH] = [this.natW(), this.natH(), this.vpW(), this.vpH()];
+        if (!natW || !natH || !vpW || !vpH)
+            return null;
+        const { sx, sy, sw, sh } = mkCropRect(natW, natH, vpW, vpH, this.totalScale(), this.panX(), this.panY());
+        const cap = options?.size ?? 1024;
+        const factor = Math.min(1, cap / Math.max(sw, sh));
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = Math.max(1, Math.round(sw * factor));
+            canvas.height = Math.max(1, Math.round(sh * factor));
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return null;
+            ctx.drawImage(image, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);
+            return canvas.toDataURL(options?.type ?? 'image/png', options?.quality) || null;
+        }
+        catch {
+            // Environments without canvas rasterisation (e.g. jsdom).
+            return null;
+        }
+    }
+    // --- Image lifecycle ------------------------------------------------------
+    onImageLoad(event) {
+        const image = event.target;
+        this.natW.set(image.naturalWidth);
+        this.natH.set(image.naturalHeight);
+        this.status.set('loaded');
+        this.reset();
+    }
+    onImageError() {
+        this.status.set('error');
+        this.imageError.emit();
+    }
+    // --- Pointer panning ------------------------------------------------------
+    onPointerDown(event) {
+        if (this.disabled())
+            return;
+        try {
+            this.viewportRef().nativeElement.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // jsdom / detached element.
+        }
+        this.dragStart = {
+            x: event.clientX,
+            y: event.clientY,
+            panX: this.panX(),
+            panY: this.panY(),
+        };
+        this.dragging.set(true);
+        event.preventDefault();
+    }
+    onPointerMove(event) {
+        const start = this.dragStart;
+        if (!start)
+            return;
+        this.panTo(start.panX + event.clientX - start.x, start.panY + event.clientY - start.y);
+    }
+    onPointerUp() {
+        this.dragStart = null;
+        this.dragging.set(false);
+    }
+    // --- Zooming --------------------------------------------------------------
+    onWheel = (event) => {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        // Multiplicative steps feel uniform across the whole zoom range.
+        this.zoomTo(this.zoom() * Math.exp(-event.deltaY * 0.0015));
+    };
+    onRangeInput(event) {
+        const value = Number(event.target.value);
+        if (!Number.isNaN(value))
+            this.zoomTo(value);
+    }
+    stepZoom(direction) {
+        this.zoomTo(this.zoom() + direction * BUTTON_ZOOM_STEP);
+    }
+    /**
+     * Zoom towards the viewport centre: the pan offset scales with the zoom
+     * ratio so the image point at the centre stays put, then re-clamps.
+     */
+    zoomTo(next) {
+        const clamped = this.clampZoom(next);
+        const previous = this.zoom();
+        if (clamped === previous)
+            return;
+        const ratio = clamped / previous;
+        this.zoom.set(clamped);
+        const p = mkClampPan(this.panX() * ratio, this.panY() * ratio, this.natW(), this.natH(), this.vpW(), this.vpH(), this.coverScale() * clamped);
+        this.panX.set(p.x);
+        this.panY.set(p.y);
+        this.changed.emit();
+    }
+    // --- Keyboard -------------------------------------------------------------
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        const step = event.shiftKey ? 1 : 10;
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.panTo(this.panX() - step, this.panY());
+                break;
+            case 'ArrowRight':
+                this.panTo(this.panX() + step, this.panY());
+                break;
+            case 'ArrowUp':
+                this.panTo(this.panX(), this.panY() - step);
+                break;
+            case 'ArrowDown':
+                this.panTo(this.panX(), this.panY() + step);
+                break;
+            case '+':
+            case '=':
+                this.zoomTo(this.zoom() + KEY_ZOOM_STEP);
+                break;
+            case '-':
+            case '_':
+                this.zoomTo(this.zoom() - KEY_ZOOM_STEP);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    // --- Internals ------------------------------------------------------------
+    clampZoom(value) {
+        return Math.min(this.maxZoom(), Math.max(this.minZoom(), value));
+    }
+    panTo(x, y) {
+        const p = mkClampPan(x, y, this.natW(), this.natH(), this.vpW(), this.vpH(), this.totalScale());
+        if (p.x === this.panX() && p.y === this.panY())
+            return;
+        this.panX.set(p.x);
+        this.panY.set(p.y);
+        this.changed.emit();
+    }
+    /** Capture the viewport's CSS size (initial render + every resize). */
+    measure() {
+        if (!this.isBrowser)
+            return;
+        const rect = this.viewportRef().nativeElement.getBoundingClientRect();
+        this.vpW.set(rect.width);
+        this.vpH.set(rect.height);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkImageCropper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkImageCropper, isStandalone: true, selector: "mk-image-cropper", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, round: { classPropertyName: "round", publicName: "round", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, crossOrigin: { classPropertyName: "crossOrigin", publicName: "crossOrigin", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", imageError: "imageError", zoom: "zoomChange" }, host: { properties: { "class.mk-image-cropper--disabled": "disabled()", "class.mk-image-cropper--round": "round()" }, classAttribute: "mk-image-cropper" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "imageRef", first: true, predicate: ["image"], descendants: true, isSignal: true }], exportAs: ["mkImageCropper"], ngImport: i0, template: "<div\n  #viewport\n  class=\"mk-image-cropper__viewport\"\n  role=\"application\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  [attr.aria-label]=\"ariaLabel() || i18n.zoom\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [class.mk-image-cropper__viewport--fill]=\"aspect() === null\"\n  [class.mk-image-cropper__viewport--dragging]=\"dragging()\"\n  [style.aspect-ratio]=\"aspect()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp()\"\n  (pointercancel)=\"onPointerUp()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (status() === 'error') {\n    <div class=\"mk-image-cropper__error\">{{ i18n.imageFailed }}</div>\n  } @else {\n    <img\n      #image\n      class=\"mk-image-cropper__image\"\n      [class.mk-image-cropper__image--ready]=\"status() === 'loaded'\"\n      [src]=\"src()\"\n      alt=\"\"\n      draggable=\"false\"\n      [attr.crossorigin]=\"crossOrigin()\"\n      [style.transform]=\"imageTransform()\"\n      (load)=\"onImageLoad($event)\"\n      (error)=\"onImageError()\"\n    />\n    <div class=\"mk-image-cropper__grid\" aria-hidden=\"true\"></div>\n    @if (round()) {\n      <div class=\"mk-image-cropper__mask\" aria-hidden=\"true\"></div>\n    }\n  }\n</div>\n\n<div class=\"mk-image-cropper__controls\">\n  <button\n    type=\"button\"\n    class=\"mk-image-cropper__zoom-btn\"\n    [attr.aria-label]=\"i18n.zoomOut\"\n    [disabled]=\"disabled() || zoom() <= minZoom()\"\n    (click)=\"stepZoom(-1)\"\n  >\n    <span aria-hidden=\"true\">&minus;</span>\n  </button>\n  <input\n    type=\"range\"\n    class=\"mk-image-cropper__range\"\n    step=\"0.01\"\n    [min]=\"minZoom()\"\n    [max]=\"maxZoom()\"\n    [value]=\"zoom()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"i18n.zoom\"\n    (input)=\"onRangeInput($event)\"\n  />\n  <button\n    type=\"button\"\n    class=\"mk-image-cropper__zoom-btn\"\n    [attr.aria-label]=\"i18n.zoomIn\"\n    [disabled]=\"disabled() || zoom() >= maxZoom()\"\n    (click)=\"stepZoom(1)\"\n  >\n    <span aria-hidden=\"true\">+</span>\n  </button>\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--mk-font-sans)}.mk-image-cropper__viewport{position:relative;width:100%;overflow:hidden;background-color:var(--mk-surface-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.mk-image-cropper__viewport--fill{height:100%}.mk-image-cropper__viewport--dragging{cursor:grabbing}.mk-image-cropper__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-image-cropper--disabled) .mk-image-cropper__viewport{cursor:not-allowed;opacity:.7}.mk-image-cropper__image{position:absolute;top:50%;left:50%;width:auto;height:auto;max-width:none;max-height:none;transform-origin:center;will-change:transform;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-image-cropper__image--ready{opacity:1}.mk-image-cropper__grid{--_grid-line: color-mix(in srgb, var(--mk-surface) 75%, transparent);position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--_grid-line),var(--_grid-line)),linear-gradient(var(--_grid-line),var(--_grid-line)),linear-gradient(var(--_grid-line),var(--_grid-line)),linear-gradient(var(--_grid-line),var(--_grid-line));background-repeat:no-repeat;background-position:33.333% 0,66.667% 0,0 33.333%,0 66.667%;background-size:1px 100%,1px 100%,100% 1px,100% 1px;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-image-cropper__viewport--dragging .mk-image-cropper__grid{opacity:1}.mk-image-cropper__mask{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle closest-side at 50% 50%,transparent calc(100% - 1px),color-mix(in srgb,var(--mk-bg) 50%,transparent) 100%)}.mk-image-cropper__error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--mk-space-4);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);text-align:center}.mk-image-cropper__controls{display:flex;align-items:center;gap:var(--mk-space-3);margin-top:var(--mk-space-3)}.mk-image-cropper__zoom-btn{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);padding:0;font-family:inherit;font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-medium);line-height:1;color:var(--mk-text-muted);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-image-cropper__zoom-btn:hover:not(:disabled){color:var(--mk-text);background-color:var(--mk-surface-2);border-color:var(--mk-border-strong)}.mk-image-cropper__zoom-btn:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-image-cropper__zoom-btn:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-image-cropper__range{--_track-h: .4rem;--_thumb: 1.15rem;flex:1 1 auto;min-width:0;height:var(--mk-control-height-sm);margin:0;appearance:none;background:transparent;cursor:pointer}.mk-image-cropper__range::-webkit-slider-runnable-track{height:var(--_track-h);background-color:var(--mk-surface-3);border-radius:var(--mk-radius-pill)}.mk-image-cropper__range::-webkit-slider-thumb{appearance:none;width:var(--_thumb);height:var(--_thumb);margin-top:calc((var(--_track-h) - var(--_thumb)) / 2);background-color:var(--mk-surface);border:var(--mk-border-width-strong) solid var(--mk-primary);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm)}.mk-image-cropper__range::-moz-range-track{height:var(--_track-h);background-color:var(--mk-surface-3);border-radius:var(--mk-radius-pill)}.mk-image-cropper__range::-moz-range-thumb{width:var(--_thumb);height:var(--_thumb);background-color:var(--mk-surface);border:var(--mk-border-width-strong) solid var(--mk-primary);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm)}.mk-image-cropper__range:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-image-cropper__range:disabled{cursor:not-allowed;opacity:.6}@media(prefers-reduced-motion:reduce){.mk-image-cropper__image,.mk-image-cropper__grid,.mk-image-cropper__zoom-btn{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkImageCropper, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-image-cropper', exportAs: 'mkImageCropper', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-image-cropper',
+                        '[class.mk-image-cropper--disabled]': 'disabled()',
+                        '[class.mk-image-cropper--round]': 'round()',
+                    }, template: "<div\n  #viewport\n  class=\"mk-image-cropper__viewport\"\n  role=\"application\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  [attr.aria-label]=\"ariaLabel() || i18n.zoom\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [class.mk-image-cropper__viewport--fill]=\"aspect() === null\"\n  [class.mk-image-cropper__viewport--dragging]=\"dragging()\"\n  [style.aspect-ratio]=\"aspect()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp()\"\n  (pointercancel)=\"onPointerUp()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (status() === 'error') {\n    <div class=\"mk-image-cropper__error\">{{ i18n.imageFailed }}</div>\n  } @else {\n    <img\n      #image\n      class=\"mk-image-cropper__image\"\n      [class.mk-image-cropper__image--ready]=\"status() === 'loaded'\"\n      [src]=\"src()\"\n      alt=\"\"\n      draggable=\"false\"\n      [attr.crossorigin]=\"crossOrigin()\"\n      [style.transform]=\"imageTransform()\"\n      (load)=\"onImageLoad($event)\"\n      (error)=\"onImageError()\"\n    />\n    <div class=\"mk-image-cropper__grid\" aria-hidden=\"true\"></div>\n    @if (round()) {\n      <div class=\"mk-image-cropper__mask\" aria-hidden=\"true\"></div>\n    }\n  }\n</div>\n\n<div class=\"mk-image-cropper__controls\">\n  <button\n    type=\"button\"\n    class=\"mk-image-cropper__zoom-btn\"\n    [attr.aria-label]=\"i18n.zoomOut\"\n    [disabled]=\"disabled() || zoom() <= minZoom()\"\n    (click)=\"stepZoom(-1)\"\n  >\n    <span aria-hidden=\"true\">&minus;</span>\n  </button>\n  <input\n    type=\"range\"\n    class=\"mk-image-cropper__range\"\n    step=\"0.01\"\n    [min]=\"minZoom()\"\n    [max]=\"maxZoom()\"\n    [value]=\"zoom()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"i18n.zoom\"\n    (input)=\"onRangeInput($event)\"\n  />\n  <button\n    type=\"button\"\n    class=\"mk-image-cropper__zoom-btn\"\n    [attr.aria-label]=\"i18n.zoomIn\"\n    [disabled]=\"disabled() || zoom() >= maxZoom()\"\n    (click)=\"stepZoom(1)\"\n  >\n    <span aria-hidden=\"true\">+</span>\n  </button>\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--mk-font-sans)}.mk-image-cropper__viewport{position:relative;width:100%;overflow:hidden;background-color:var(--mk-surface-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.mk-image-cropper__viewport--fill{height:100%}.mk-image-cropper__viewport--dragging{cursor:grabbing}.mk-image-cropper__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-image-cropper--disabled) .mk-image-cropper__viewport{cursor:not-allowed;opacity:.7}.mk-image-cropper__image{position:absolute;top:50%;left:50%;width:auto;height:auto;max-width:none;max-height:none;transform-origin:center;will-change:transform;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-image-cropper__image--ready{opacity:1}.mk-image-cropper__grid{--_grid-line: color-mix(in srgb, var(--mk-surface) 75%, transparent);position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--_grid-line),var(--_grid-line)),linear-gradient(var(--_grid-line),var(--_grid-line)),linear-gradient(var(--_grid-line),var(--_grid-line)),linear-gradient(var(--_grid-line),var(--_grid-line));background-repeat:no-repeat;background-position:33.333% 0,66.667% 0,0 33.333%,0 66.667%;background-size:1px 100%,1px 100%,100% 1px,100% 1px;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-image-cropper__viewport--dragging .mk-image-cropper__grid{opacity:1}.mk-image-cropper__mask{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle closest-side at 50% 50%,transparent calc(100% - 1px),color-mix(in srgb,var(--mk-bg) 50%,transparent) 100%)}.mk-image-cropper__error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--mk-space-4);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);text-align:center}.mk-image-cropper__controls{display:flex;align-items:center;gap:var(--mk-space-3);margin-top:var(--mk-space-3)}.mk-image-cropper__zoom-btn{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);padding:0;font-family:inherit;font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-medium);line-height:1;color:var(--mk-text-muted);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-image-cropper__zoom-btn:hover:not(:disabled){color:var(--mk-text);background-color:var(--mk-surface-2);border-color:var(--mk-border-strong)}.mk-image-cropper__zoom-btn:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-image-cropper__zoom-btn:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-image-cropper__range{--_track-h: .4rem;--_thumb: 1.15rem;flex:1 1 auto;min-width:0;height:var(--mk-control-height-sm);margin:0;appearance:none;background:transparent;cursor:pointer}.mk-image-cropper__range::-webkit-slider-runnable-track{height:var(--_track-h);background-color:var(--mk-surface-3);border-radius:var(--mk-radius-pill)}.mk-image-cropper__range::-webkit-slider-thumb{appearance:none;width:var(--_thumb);height:var(--_thumb);margin-top:calc((var(--_track-h) - var(--_thumb)) / 2);background-color:var(--mk-surface);border:var(--mk-border-width-strong) solid var(--mk-primary);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm)}.mk-image-cropper__range::-moz-range-track{height:var(--_track-h);background-color:var(--mk-surface-3);border-radius:var(--mk-radius-pill)}.mk-image-cropper__range::-moz-range-thumb{width:var(--_thumb);height:var(--_thumb);background-color:var(--mk-surface);border:var(--mk-border-width-strong) solid var(--mk-primary);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm)}.mk-image-cropper__range:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-image-cropper__range:disabled{cursor:not-allowed;opacity:.6}@media(prefers-reduced-motion:reduce){.mk-image-cropper__image,.mk-image-cropper__grid,.mk-image-cropper__zoom-btn{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], imageRef: [{ type: i0.ViewChild, args: ['image', { isSignal: true }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], aspect: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspect", required: false }] }], round: [{ type: i0.Input, args: [{ isSignal: true, alias: "round", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], crossOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossOrigin", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], imageError: [{ type: i0.Output, args: ["imageError"] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }, { type: i0.Output, args: ["zoomChange"] }] } });
+
+/**
+ * Marks an `<ng-template>` as the per-tile action bar for {@link MkMediaGallery}.
+ * The template's implicit context is the {@link MkMediaItem}, so consumers can
+ * destructure it with `let-item`. The gallery renders it into each tile's
+ * top-right action bar (revealed on hover / focus-within, always visible on
+ * touch devices); the consumer supplies the buttons and their handlers.
+ *
+ * ```html
+ * <mk-media-gallery [items]="assets()">
+ *   <ng-template mkMediaActions let-item>
+ *     <button mkButton size="sm" variant="ghost" (click)="edit(item)">Edit</button>
+ *   </ng-template>
+ * </mk-media-gallery>
+ * ```
+ */
+class MkMediaActions {
+    /** The projected action-bar template, rendered once per tile. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMediaActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkMediaActions, isStandalone: true, selector: "[mkMediaActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMediaActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkMediaActions]',
+                }]
+        }] });
+/**
+ * Media gallery — a management grid of image tiles for admin media libraries.
+ * Each tile shows a square thumbnail (a labelled preview button emitting
+ * {@link itemClick}), the item's name and optional meta line, an optional
+ * selection checkbox (two-way `selection` model of selected ids) and an
+ * optional consumer-projected action bar ({@link MkMediaActions}).
+ *
+ * With `reorderable`, tiles become draggable via the dnd group's
+ * `[mkDropList]` / `[mkDrag]` directives — pointer and keyboard dragging
+ * (WCAG 2.1.1) both included. Each drop immutably updates the two-way `items`
+ * model and emits {@link reordered}.
+ *
+ * Clicking a tile always means "open/preview" — selection only toggles through
+ * the checkbox, never on tile click.
+ *
+ * ```html
+ * <mk-media-gallery
+ *   [(items)]="assets"
+ *   [(selection)]="selectedIds"
+ *   selectable
+ *   reorderable
+ *   [columns]="5"
+ *   (itemClick)="openPreview($event)"
+ *   (reordered)="persistOrder($event)"
+ * >
+ *   <ng-template mkMediaActions let-item>
+ *     <button mkButton size="sm" variant="ghost" (click)="edit(item)">Edit</button>
+ *     <button mkButton size="sm" variant="ghost" tone="danger" (click)="remove(item)">
+ *       Delete
+ *     </button>
+ *   </ng-template>
+ * </mk-media-gallery>
+ * ```
+ */
+class MkMediaGallery {
+    /** Localized strings (region label, checkbox/preview labels, empty state). */
+    i18n = inject(MK_I18N);
+    /** The gallery's items (two-way). Replaced immutably on every reorder drop. */
+    items = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Ids of the currently selected items (two-way). */
+    selection = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /** Show a selection checkbox on every tile. */
+    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Allow drag-and-drop (pointer + keyboard) reordering of the tiles. */
+    reorderable = input(false, { ...(ngDevMode ? { debugName: "reorderable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Number of grid columns. */
+    columns = input(4, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Accessible name of the gallery region. Defaults to `i18n.mediaLibrary`. */
+    ariaLabel = input(this.i18n.mediaLibrary, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Emitted when a tile's preview button is activated (click/Enter/Space). */
+    itemClick = output();
+    /** Emitted after a drop has updated the `items` model. */
+    reordered = output();
+    /** Optional consumer-projected per-tile action bar (`$implicit` = item). */
+    actions = contentChild(MkMediaActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    /** Whether the item with `id` is currently selected. */
+    isSelected(id) {
+        return this.selection().includes(id);
+    }
+    /** Sync the two-way `selection` model with the checkbox's native state. */
+    onCheckboxChange(item, event) {
+        const checked = event.target.checked;
+        const current = this.selection();
+        if (checked) {
+            if (!current.includes(item.id))
+                this.selection.set([...current, item.id]);
+        }
+        else {
+            this.selection.set(current.filter((id) => id !== item.id));
+        }
+    }
+    /** Emit {@link itemClick} for the tile's preview button. */
+    onPreviewClick(item) {
+        this.itemClick.emit(item);
+    }
+    /**
+     * Apply a drop from the dnd module: move the item on a copy of `items`,
+     * write the copy back to the two-way model and emit {@link reordered}.
+     */
+    onDrop(event) {
+        const from = event.previousIndex;
+        const to = event.currentIndex;
+        if (from === to)
+            return;
+        const next = [...this.items()];
+        mkMoveItemInArray(next, from, to);
+        this.items.set(next);
+        this.reordered.emit({ from, to, items: next });
+    }
+    /**
+     * Keep events from the tile's nested controls (checkbox, action buttons)
+     * inside those controls: without this, Space/Enter on the checkbox or an
+     * action button would bubble to the surrounding `[mkDrag]` host and pick the
+     * tile up instead, and a pointer press would start a drag session. Native
+     * behavior is untouched — only propagation stops.
+     */
+    stopEvent(event) {
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMediaGallery, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkMediaGallery, isStandalone: true, selector: "mk-media-gallery", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", selection: "selectionChange", itemClick: "itemClick", reordered: "reordered" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "mk-media-gallery" }, queries: [{ propertyName: "actions", first: true, predicate: MkMediaActions, descendants: true, isSignal: true }], exportAs: ["mkMediaGallery"], ngImport: i0, template: "@if (items().length === 0) {\n  <div class=\"mk-media-gallery__empty\">{{ i18n.noData }}</div>\n} @else if (reorderable()) {\n  <div\n    mkDropList\n    class=\"mk-media-gallery__grid\"\n    [style.--_cols]=\"columns()\"\n    [mkDropListData]=\"items()\"\n    [mkDropListLabel]=\"ariaLabel()\"\n    mkDropListOrientation=\"horizontal\"\n    (mkDropListDropped)=\"onDrop($event)\"\n  >\n    @for (item of items(); track item.id) {\n      <div\n        mkDrag\n        class=\"mk-media-gallery__tile\"\n        [class.mk-media-gallery__tile--selected]=\"isSelected(item.id)\"\n        [mkDragData]=\"item\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"tile\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        />\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"mk-media-gallery__grid\" [style.--_cols]=\"columns()\">\n    @for (item of items(); track item.id) {\n      <div\n        class=\"mk-media-gallery__tile\"\n        [class.mk-media-gallery__tile--selected]=\"isSelected(item.id)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"tile\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        />\n      </div>\n    }\n  </div>\n}\n\n<ng-template #tile let-item>\n  <div class=\"mk-media-gallery__media\">\n    <button\n      type=\"button\"\n      class=\"mk-media-gallery__preview\"\n      [attr.aria-label]=\"i18n.viewImage(item.alt ?? item.name)\"\n      (click)=\"onPreviewClick(item)\"\n      (keydown)=\"stopEvent($event)\"\n    >\n      <img\n        class=\"mk-media-gallery__img\"\n        [src]=\"item.thumb ?? item.src\"\n        [alt]=\"item.alt ?? ''\"\n        loading=\"lazy\"\n        draggable=\"false\"\n      />\n    </button>\n\n    @if (selectable()) {\n      <span\n        class=\"mk-media-gallery__check\"\n        (keydown)=\"stopEvent($event)\"\n        (pointerdown)=\"stopEvent($event)\"\n      >\n        <input\n          type=\"checkbox\"\n          class=\"mk-media-gallery__check-input\"\n          [checked]=\"isSelected(item.id)\"\n          [attr.aria-label]=\"i18n.selectRow(item.name)\"\n          (change)=\"onCheckboxChange(item, $event)\"\n        />\n        <span class=\"mk-media-gallery__check-box\" aria-hidden=\"true\">\n          <span class=\"mk-media-gallery__check-mark\"></span>\n        </span>\n      </span>\n    }\n\n    @if (actions(); as actionsDir) {\n      <div\n        class=\"mk-media-gallery__actions\"\n        (keydown)=\"stopEvent($event)\"\n        (pointerdown)=\"stopEvent($event)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"actionsDir.template\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        />\n      </div>\n    }\n  </div>\n\n  <div class=\"mk-media-gallery__caption\">\n    <span class=\"mk-media-gallery__name\">{{ item.name }}</span>\n    @if (item.meta) {\n      <span class=\"mk-media-gallery__meta\">{{ item.meta }}</span>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-media-gallery__grid{display:grid;grid-template-columns:repeat(var(--_cols, 4),1fr);gap:var(--mk-space-3)}.mk-media-gallery__tile{position:relative;display:flex;flex-direction:column;gap:var(--mk-space-1);min-width:0;border-radius:var(--mk-radius-md)}.mk-media-gallery__tile:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-media-gallery__media{position:relative;aspect-ratio:1/1;overflow:hidden;background-color:var(--mk-surface-2);border-radius:var(--mk-radius-md)}.mk-media-gallery__tile--selected .mk-media-gallery__media{outline:var(--mk-border-width-strong) solid var(--mk-primary);outline-offset:var(--mk-focus-ring-offset)}.mk-media-gallery__preview{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;margin:0;cursor:pointer;background:none;border:none;border-radius:inherit}.mk-media-gallery__preview:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width) - var(--mk-focus-ring-offset))}.mk-media-gallery__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--mk-duration-normal) var(--mk-ease-standard)}.mk-media-gallery__preview:hover .mk-media-gallery__img{transform:scale(1.04)}.mk-media-gallery__check{position:absolute;top:var(--mk-space-2);left:var(--mk-space-2);display:inline-flex;width:1.25rem;height:1.25rem}.mk-media-gallery__check-input{position:absolute;inset:calc(-1 * var(--mk-space-2));width:auto;height:auto;margin:0;cursor:pointer;opacity:0}.mk-media-gallery__check-box{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none;background-color:var(--mk-surface);border:var(--mk-border-width-strong) solid var(--mk-border-strong);border-radius:var(--mk-radius-sm);box-shadow:var(--mk-shadow-sm);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-media-gallery__check-mark{width:30%;height:55%;border-right:2px solid var(--mk-primary-contrast);border-bottom:2px solid var(--mk-primary-contrast);opacity:0;transform:rotate(45deg) translateY(-8%)}.mk-media-gallery__check-input:hover+.mk-media-gallery__check-box{border-color:var(--mk-primary)}.mk-media-gallery__check-input:checked+.mk-media-gallery__check-box{background-color:var(--mk-primary);border-color:var(--mk-primary)}.mk-media-gallery__check-input:checked+.mk-media-gallery__check-box .mk-media-gallery__check-mark{opacity:1}.mk-media-gallery__check-input:focus-visible+.mk-media-gallery__check-box{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-media-gallery__actions{position:absolute;top:var(--mk-space-2);right:var(--mk-space-2);display:flex;gap:var(--mk-space-1);align-items:center;padding:var(--mk-space-1);background-color:color-mix(in srgb,var(--mk-surface) 85%,transparent);border-radius:var(--mk-radius-sm);box-shadow:var(--mk-shadow-sm);opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-media-gallery__tile:hover .mk-media-gallery__actions,.mk-media-gallery__tile:focus-within .mk-media-gallery__actions{opacity:1}@media(hover:none){.mk-media-gallery__actions{opacity:1}}.mk-media-gallery__caption{display:flex;flex-direction:column;min-width:0;padding:0 var(--mk-space-1) var(--mk-space-1)}.mk-media-gallery__name{overflow:hidden;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);text-overflow:ellipsis;white-space:nowrap}.mk-media-gallery__meta{overflow:hidden;font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);text-overflow:ellipsis;white-space:nowrap}.mk-media-gallery__empty{display:flex;align-items:center;justify-content:center;padding:var(--mk-space-10) var(--mk-space-4);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted);text-align:center;background-color:var(--mk-surface-2);border:var(--mk-border-width) dashed var(--mk-border);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-media-gallery__img,.mk-media-gallery__actions,.mk-media-gallery__check-box{transition:none}.mk-media-gallery__preview:hover .mk-media-gallery__img{transform:none}}\n"], dependencies: [{ kind: "component", type: MkDropList, selector: "[mkDropList]", inputs: ["mkDropListData", "mkDropListId", "mkDropListConnectedTo", "mkDropListLabel", "mkDropListOrientation", "mkDropListDisabled"], outputs: ["mkDropListDropped"], exportAs: ["mkDropList"] }, { kind: "component", type: MkDrag, selector: "[mkDrag]", inputs: ["mkDragData", "mkDragDisabled", "mkDragTouchDelay"], exportAs: ["mkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMediaGallery, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-media-gallery', exportAs: 'mkMediaGallery', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkDropList, MkDrag, NgTemplateOutlet], host: {
+                        class: 'mk-media-gallery',
+                        role: 'group',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    }, template: "@if (items().length === 0) {\n  <div class=\"mk-media-gallery__empty\">{{ i18n.noData }}</div>\n} @else if (reorderable()) {\n  <div\n    mkDropList\n    class=\"mk-media-gallery__grid\"\n    [style.--_cols]=\"columns()\"\n    [mkDropListData]=\"items()\"\n    [mkDropListLabel]=\"ariaLabel()\"\n    mkDropListOrientation=\"horizontal\"\n    (mkDropListDropped)=\"onDrop($event)\"\n  >\n    @for (item of items(); track item.id) {\n      <div\n        mkDrag\n        class=\"mk-media-gallery__tile\"\n        [class.mk-media-gallery__tile--selected]=\"isSelected(item.id)\"\n        [mkDragData]=\"item\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"tile\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        />\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"mk-media-gallery__grid\" [style.--_cols]=\"columns()\">\n    @for (item of items(); track item.id) {\n      <div\n        class=\"mk-media-gallery__tile\"\n        [class.mk-media-gallery__tile--selected]=\"isSelected(item.id)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"tile\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        />\n      </div>\n    }\n  </div>\n}\n\n<ng-template #tile let-item>\n  <div class=\"mk-media-gallery__media\">\n    <button\n      type=\"button\"\n      class=\"mk-media-gallery__preview\"\n      [attr.aria-label]=\"i18n.viewImage(item.alt ?? item.name)\"\n      (click)=\"onPreviewClick(item)\"\n      (keydown)=\"stopEvent($event)\"\n    >\n      <img\n        class=\"mk-media-gallery__img\"\n        [src]=\"item.thumb ?? item.src\"\n        [alt]=\"item.alt ?? ''\"\n        loading=\"lazy\"\n        draggable=\"false\"\n      />\n    </button>\n\n    @if (selectable()) {\n      <span\n        class=\"mk-media-gallery__check\"\n        (keydown)=\"stopEvent($event)\"\n        (pointerdown)=\"stopEvent($event)\"\n      >\n        <input\n          type=\"checkbox\"\n          class=\"mk-media-gallery__check-input\"\n          [checked]=\"isSelected(item.id)\"\n          [attr.aria-label]=\"i18n.selectRow(item.name)\"\n          (change)=\"onCheckboxChange(item, $event)\"\n        />\n        <span class=\"mk-media-gallery__check-box\" aria-hidden=\"true\">\n          <span class=\"mk-media-gallery__check-mark\"></span>\n        </span>\n      </span>\n    }\n\n    @if (actions(); as actionsDir) {\n      <div\n        class=\"mk-media-gallery__actions\"\n        (keydown)=\"stopEvent($event)\"\n        (pointerdown)=\"stopEvent($event)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"actionsDir.template\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        />\n      </div>\n    }\n  </div>\n\n  <div class=\"mk-media-gallery__caption\">\n    <span class=\"mk-media-gallery__name\">{{ item.name }}</span>\n    @if (item.meta) {\n      <span class=\"mk-media-gallery__meta\">{{ item.meta }}</span>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-media-gallery__grid{display:grid;grid-template-columns:repeat(var(--_cols, 4),1fr);gap:var(--mk-space-3)}.mk-media-gallery__tile{position:relative;display:flex;flex-direction:column;gap:var(--mk-space-1);min-width:0;border-radius:var(--mk-radius-md)}.mk-media-gallery__tile:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-media-gallery__media{position:relative;aspect-ratio:1/1;overflow:hidden;background-color:var(--mk-surface-2);border-radius:var(--mk-radius-md)}.mk-media-gallery__tile--selected .mk-media-gallery__media{outline:var(--mk-border-width-strong) solid var(--mk-primary);outline-offset:var(--mk-focus-ring-offset)}.mk-media-gallery__preview{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;margin:0;cursor:pointer;background:none;border:none;border-radius:inherit}.mk-media-gallery__preview:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width) - var(--mk-focus-ring-offset))}.mk-media-gallery__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--mk-duration-normal) var(--mk-ease-standard)}.mk-media-gallery__preview:hover .mk-media-gallery__img{transform:scale(1.04)}.mk-media-gallery__check{position:absolute;top:var(--mk-space-2);left:var(--mk-space-2);display:inline-flex;width:1.25rem;height:1.25rem}.mk-media-gallery__check-input{position:absolute;inset:calc(-1 * var(--mk-space-2));width:auto;height:auto;margin:0;cursor:pointer;opacity:0}.mk-media-gallery__check-box{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none;background-color:var(--mk-surface);border:var(--mk-border-width-strong) solid var(--mk-border-strong);border-radius:var(--mk-radius-sm);box-shadow:var(--mk-shadow-sm);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-media-gallery__check-mark{width:30%;height:55%;border-right:2px solid var(--mk-primary-contrast);border-bottom:2px solid var(--mk-primary-contrast);opacity:0;transform:rotate(45deg) translateY(-8%)}.mk-media-gallery__check-input:hover+.mk-media-gallery__check-box{border-color:var(--mk-primary)}.mk-media-gallery__check-input:checked+.mk-media-gallery__check-box{background-color:var(--mk-primary);border-color:var(--mk-primary)}.mk-media-gallery__check-input:checked+.mk-media-gallery__check-box .mk-media-gallery__check-mark{opacity:1}.mk-media-gallery__check-input:focus-visible+.mk-media-gallery__check-box{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-media-gallery__actions{position:absolute;top:var(--mk-space-2);right:var(--mk-space-2);display:flex;gap:var(--mk-space-1);align-items:center;padding:var(--mk-space-1);background-color:color-mix(in srgb,var(--mk-surface) 85%,transparent);border-radius:var(--mk-radius-sm);box-shadow:var(--mk-shadow-sm);opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}.mk-media-gallery__tile:hover .mk-media-gallery__actions,.mk-media-gallery__tile:focus-within .mk-media-gallery__actions{opacity:1}@media(hover:none){.mk-media-gallery__actions{opacity:1}}.mk-media-gallery__caption{display:flex;flex-direction:column;min-width:0;padding:0 var(--mk-space-1) var(--mk-space-1)}.mk-media-gallery__name{overflow:hidden;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);text-overflow:ellipsis;white-space:nowrap}.mk-media-gallery__meta{overflow:hidden;font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);text-overflow:ellipsis;white-space:nowrap}.mk-media-gallery__empty{display:flex;align-items:center;justify-content:center;padding:var(--mk-space-10) var(--mk-space-4);font-size:var(--mk-font-size-sm);color:var(--mk-text-muted);text-align:center;background-color:var(--mk-surface-2);border:var(--mk-border-width) dashed var(--mk-border);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-media-gallery__img,.mk-media-gallery__actions,.mk-media-gallery__check-box{transition:none}.mk-media-gallery__preview:hover .mk-media-gallery__img{transform:none}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], reordered: [{ type: i0.Output, args: ["reordered"] }], actions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MkMediaActions), { isSignal: true }] }] } });
+
+/**
+ * MEDIA components group barrel for @mk-kit/ui.
+ * Images, galleries, lightbox, cropping and media management.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkImage, MkImageCropper, MkImageGallery, MkLightbox, MkLightboxService, MkMediaActions, MkMediaGallery, mkClampPan, mkCoverScale, mkCropRect };
+//# sourceMappingURL=mk-kit-ui-media.mjs.map