@kerusiweb/angular 2.1.0 → 2.2.0

package/fesm2022/kerusiweb-angular.mjs

@@ -1,6 +1,7 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, model, signal, effect } from '@angular/core';
-import { DEFAULT_KERUSI_COLORS, seatFill, seatTextFill, cssVar, seatBodyPath, seatOccupantVariant, seatSelectedFrame, seatCoreFill, seatWashFill, seatOccupantPath, seatOccupantStroke, occupantFillFor, occupantStrokeFor, elementStyle, elementFill, elementTextFill, screenPath, readableOn, formatMoney, DEFAULT_SEAT_ARIA_STRINGS, errorsOf, KerusiValidationError, validateDocumentSet, expireHolds, buildRenderModel, resolveMapLocale, isRtlLocale, resolveColors, computeSectionLayout, buildNavigationGraph, seatAriaLabel, summarizeSelection, toggleSeatSelection, disallowedAnnouncement, DEFAULT_SEQUENCE_READER, heldSeats, applyStateDeltaOrdered } from '@kerusiweb/core';
+import { input, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, model, signal, viewChild, effect, untracked } from '@angular/core';
+import { DEFAULT_KERUSI_COLORS, seatFill, seatTextFill, cssVar, seatBodyPath, seatOccupantVariant, seatSelectedFrame, seatCoreFill, seatWashFill, seatOccupantPath, seatOccupantStroke, occupantFillFor, occupantStrokeFor, elementStyle, elementFill, elementTextFill, screenPath, readableOn, formatMoney, DEFAULT_SEAT_ARIA_STRINGS, DEFAULT_MAX_ZOOM, FIT_VIEWPORT, IDLE_GESTURE, errorsOf, KerusiValidationError, viewportsEqual, validateDocumentSet, expireHolds, buildRenderModel, resolveMapLocale, isRtlLocale, resolveColors, zoomLimits, resolveControlStrings, controlStyle, viewportTransform, viewportTouchAction, computeSectionLayout, buildNavigationGraph, seatAriaLabel, summarizeSelection, toggleSeatSelection, disallowedAnnouncement, fitViewport, stepViewport, clampViewport, revealRect, reduceGesture, wheelZoomFactor, zoomViewportBy, zoomViewportTo, isTextEntryTarget, keyboardViewport, DEFAULT_SEQUENCE_READER, heldSeats, applyStateDeltaOrdered } from '@kerusiweb/core';
 
 /**
  * Draws one Kerusi `Section` as a single `<svg>`.
@@ -375,6 +376,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  * ```html
  * <kerusi-seatmap [map]="map" [state]="state" [(selection)]="picked" />
  * ```
+ *
+ * Two opt-in features sit on top, both off by default so an existing map is
+ * unchanged: `[zoomable]` (pinch, wheel and drag, keys `+` `-` `0`, buttons)
+ * and `[maximizable]` (a full-screen button). Their arithmetic is in
+ * `@kerusiweb/core`; this class supplies the listeners and the signals.
  */
 class KerusiSeatmapComponent {
     host = inject((ElementRef));
@@ -456,6 +462,28 @@ class KerusiSeatmapComponent {
     ...(ngDevMode ? [{ debugName: "expireHolds" }] : /* istanbul ignore next */ []));
     expiryIntervalMs = input(1000, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expiryIntervalMs" }] : /* istanbul ignore next */ []));
+    // --- zoom, pan and maximize (both opt in) ---------------------------------
+    /**
+     * Pinch, Ctrl/Cmd + wheel and drag to zoom and pan, `+` `-` `0` on the keyboard,
+     * and on-screen buttons. A tap still selects at every zoom level.
+     */
+    zoomable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomable" }] : /* istanbul ignore next */ []));
+    /** The zoom ceiling, relative to fit-to-container. The floor is always fit. */
+    maxZoom = input(DEFAULT_MAX_ZOOM, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxZoom" }] : /* istanbul ignore next */ []));
+    /**
+     * The built-in zoom buttons. Turn this off to supply your own, anywhere on the
+     * page, and call `zoomIn()`, `zoomOut()` and `resetZoom()` on the component.
+     */
+    showZoomControls = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showZoomControls" }] : /* istanbul ignore next */ []));
+    /** A button that maximizes the map to fill the screen. */
+    maximizable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizable" }] : /* istanbul ignore next */ []));
+    /** Overrides the built-in English names of the zoom and maximize controls. */
+    controlStrings = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlStrings" }] : /* istanbul ignore next */ []));
     // --- validation -----------------------------------------------------------
     validate = input('collect', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "validate" }] : /* istanbul ignore next */ []));
@@ -466,6 +494,9 @@ class KerusiSeatmapComponent {
     seatFocus = output();
     /** Emitted whenever the documents change, in `collect` mode. */
     validationIssues = output();
+    /** The zoom and pan, whenever they change. For a host that persists or shows them. */
+    viewportChange = output();
+    maximizedChange = output();
     // --- internal state -------------------------------------------------------
     /**
      * The seat holding each section's tab stop, keyed by section id.
@@ -481,6 +512,25 @@ class KerusiSeatmapComponent {
     /** Bumped by the hold ticker to force the state to be re-derived. */
     expiryTick = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expiryTick" }] : /* istanbul ignore next */ []));
+    viewportState = signal(FIT_VIEWPORT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportState" }] : /* istanbul ignore next */ []));
+    maximizedState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizedState" }] : /* istanbul ignore next */ []));
+    /** True for a discrete change (button, key, reveal), false while a finger or wheel drives. */
+    animated = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+    viewportEl = viewChild('viewport', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportEl" }] : /* istanbul ignore next */ []));
+    contentEl = viewChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentEl" }] : /* istanbul ignore next */ []));
+    gesture = IDLE_GESTURE;
+    suppressClick = false;
+    gestureBase = null;
+    nativeFullscreen = false;
+    /** The current zoom and pan. Read-only: drive it with the methods below. */
+    viewport = this.viewportState.asReadonly();
+    /** Whether the map is currently maximized. */
+    maximized = this.maximizedState.asReadonly();
     constructor() {
         effect(() => {
             const issues = this.issues();
@@ -520,6 +570,93 @@ class KerusiSeatmapComponent {
             const handle = setInterval(() => this.expiryTick.update((n) => n + 1), this.expiryIntervalMs());
             onCleanup(() => clearInterval(handle));
         });
+        // Gesture listeners go on natively, not through the template: the wheel
+        // listener must be non-passive to `preventDefault` a page zoom, and the
+        // click listener must be in the capture phase to swallow the click that
+        // follows a drag before the seat sees it.
+        effect((onCleanup) => {
+            const el = this.viewportEl()?.nativeElement;
+            if (!el) {
+                return;
+            }
+            const listeners = [
+                ['pointerdown', (e) => this.onPointerDown(e), false],
+                ['pointermove', (e) => this.onPointerMove(e), false],
+                ['pointerup', (e) => this.onPointerEnd(e, 'up'), false],
+                ['pointercancel', (e) => this.onPointerEnd(e, 'cancel'), false],
+                ['wheel', (e) => this.onWheel(e), { passive: false }],
+                ['click', (e) => this.onClickCapture(e), true],
+                // Safari reports a trackpad pinch as gesture events, not Ctrl + wheel.
+                ['gesturestart', (e) => this.onGestureStart(e), { passive: false }],
+                ['gesturechange', (e) => this.onGestureChange(e), { passive: false }],
+                ['gestureend', (e) => this.onGestureEnd(e), { passive: false }],
+            ];
+            for (const [type, listener, options] of listeners) {
+                el.addEventListener(type, listener, options);
+            }
+            onCleanup(() => {
+                for (const [type, listener, options] of listeners) {
+                    el.removeEventListener(type, listener, options);
+                }
+            });
+        });
+        // Re-clamp when the box or the ceiling changes: a rotated phone, a
+        // maximized map, a lowered `maxZoom`.
+        effect((onCleanup) => {
+            this.limits();
+            const view = this.viewportEl()?.nativeElement;
+            untracked(() => this.reclamp());
+            if (!view || typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const observer = new ResizeObserver(() => this.reclamp());
+            observer.observe(view);
+            const content = this.contentEl()?.nativeElement;
+            if (content) {
+                observer.observe(content);
+            }
+            onCleanup(() => observer.disconnect());
+        });
+        // Switching `zoomable` or `maximizable` off puts the map back as it was.
+        effect(() => {
+            if (!this.zoomable() && !viewportsEqual(untracked(this.viewportState), FIT_VIEWPORT)) {
+                this.viewportState.set(FIT_VIEWPORT);
+            }
+        });
+        effect(() => {
+            if (!this.maximizable() && untracked(this.maximizedState)) {
+                untracked(() => this.setMaximized(false));
+            }
+        });
+        // While maximized: freeze the page behind, and follow the browser leaving
+        // native full screen (Esc) so the two never disagree.
+        effect((onCleanup) => {
+            if (!this.maximizedState()) {
+                return;
+            }
+            const host = this.host.nativeElement;
+            const doc = host.ownerDocument;
+            const previousOverflow = doc.body.style.overflow;
+            doc.body.style.overflow = 'hidden';
+            const onFullscreenChange = () => {
+                if (doc.fullscreenElement === host) {
+                    this.nativeFullscreen = true;
+                }
+                else if (this.nativeFullscreen) {
+                    this.nativeFullscreen = false;
+                    this.setMaximized(false);
+                }
+            };
+            doc.addEventListener('fullscreenchange', onFullscreenChange);
+            onCleanup(() => {
+                doc.body.style.overflow = previousOverflow;
+                doc.removeEventListener('fullscreenchange', onFullscreenChange);
+                this.nativeFullscreen = false;
+                if (doc.fullscreenElement === host) {
+                    doc.exitFullscreen?.().catch(() => undefined);
+                }
+            });
+        });
     }
     // --- derived model --------------------------------------------------------
     issues = computed(() => this.validate() === 'off'
@@ -555,6 +692,22 @@ class KerusiSeatmapComponent {
     ...(ngDevMode ? [{ debugName: "resolvedColors" }] : /* istanbul ignore next */ []));
     selectionSet = computed(() => new Set(this.selection()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectionSet" }] : /* istanbul ignore next */ []));
+    limits = computed(() => zoomLimits(this.maxZoom()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limits" }] : /* istanbul ignore next */ []));
+    strings = computed(() => resolveControlStrings(this.controlStrings()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strings" }] : /* istanbul ignore next */ []));
+    controlColors = computed(() => controlStyle(this.colors()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlColors" }] : /* istanbul ignore next */ []));
+    transform = computed(() => viewportTransform(this.viewportState()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    touchAction = computed(() => viewportTouchAction(this.viewportState(), this.maximizedState()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touchAction" }] : /* istanbul ignore next */ []));
+    showToolbar = computed(() => (this.zoomable() && this.showZoomControls()) || this.maximizable(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
+    atMaxZoom = computed(() => this.viewportState().zoom >= this.limits().maxZoom - 1e-4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atMaxZoom" }] : /* istanbul ignore next */ []));
+    atFit = computed(() => this.viewportState().zoom <= 1 + 1e-4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atFit" }] : /* istanbul ignore next */ []));
     /** Placed geometry per section, keyed by section id. */
     layouts = computed(() => {
         const overrides = this.sectionOverrides();
@@ -643,6 +796,9 @@ class KerusiSeatmapComponent {
         }
         this.setFocusedSeat(seat.sectionId, seatId);
         this.seatFocus.emit(seat);
+        if (this.zoomable()) {
+            this.revealSeat(seatId);
+        }
     }
     /**
      * Arrow keys walk the navigation graph, which orders seats by `col` in grid
@@ -714,19 +870,247 @@ class KerusiSeatmapComponent {
     /**
      * Moves the roving tab stop, then the DOM focus that follows it.
      *
+     * When zoomable, the browser's own scroll-into-view is suppressed: the map
+     * moves by transform, so `onSeatFocused` pans it into view instead.
+     */
+    moveFocusTo(sectionId, seatId) {
+        this.setFocusedSeat(sectionId, seatId);
+        const node = this.seatNode(seatId);
+        if (this.zoomable()) {
+            node?.focus?.({ preventScroll: true });
+        }
+        else {
+            node?.focus?.();
+        }
+    }
+    /**
      * Seat ids come from the document, so they cannot be interpolated into a
      * selector unescaped — and `CSS.escape` is absent in jsdom and under SSR.
      * Scanning the rendered nodes avoids both problems.
      */
-    moveFocusTo(sectionId, seatId) {
-        this.setFocusedSeat(sectionId, seatId);
+    seatNode(seatId) {
         const nodes = this.host.nativeElement.querySelectorAll('[data-seat-id]');
         for (const node of Array.from(nodes)) {
             if (node.dataset['seatId'] === seatId) {
-                node.focus?.();
+                return node;
+            }
+        }
+        return null;
+    }
+    // --- zoom and pan ---------------------------------------------------------
+    /** Zooms in one step about the centre. No-op unless `zoomable`. */
+    zoomIn() {
+        this.stepZoom(1);
+    }
+    /** Zooms out one step about the centre. No-op unless `zoomable`. */
+    zoomOut() {
+        this.stepZoom(-1);
+    }
+    /** Back to fit-to-container: the map's original view. No-op unless `zoomable`. */
+    resetZoom() {
+        const measured = this.measure();
+        if (measured && this.zoomable()) {
+            this.commit(fitViewport(measured.content, measured.container, this.limits()), true);
+        }
+    }
+    stepZoom(direction) {
+        const measured = this.measure();
+        if (measured && this.zoomable()) {
+            const next = stepViewport(this.viewportState(), direction, measured.content, measured.container, this.limits());
+            this.commit(next, true);
+        }
+    }
+    /** Sizes in CSS pixels, read when needed: `offset*` ignores the zoom transform. */
+    measure() {
+        const view = this.viewportEl()?.nativeElement;
+        const content = this.contentEl()?.nativeElement;
+        if (!view || !content) {
+            return null;
+        }
+        return {
+            container: { width: view.clientWidth, height: view.clientHeight },
+            content: { width: content.offsetWidth, height: content.offsetHeight },
+        };
+    }
+    commit(next, animate) {
+        if (viewportsEqual(next, this.viewportState())) {
+            return;
+        }
+        this.animated.set(animate);
+        this.viewportState.set(next);
+        this.viewportChange.emit(next);
+    }
+    reclamp() {
+        const measured = this.measure();
+        if (measured && this.zoomable()) {
+            const next = clampViewport(this.viewportState(), measured.content, measured.container, this.limits());
+            this.commit(next, false);
+        }
+    }
+    /** A point in the viewport's own coordinates, which is what the core functions take. */
+    containerPoint(event) {
+        const box = this.viewportEl().nativeElement.getBoundingClientRect();
+        return { x: event.clientX - box.left, y: event.clientY - box.top };
+    }
+    /**
+     * Pans a seat that took keyboard focus into view. A click or tap also
+     * focuses the seat, but should not move the map under the finger, so only a
+     * `:focus-visible` focus counts.
+     */
+    revealSeat(seatId) {
+        const view = this.viewportEl()?.nativeElement;
+        const node = this.seatNode(seatId);
+        const measured = this.measure();
+        if (!view || !node || !measured || !focusIsVisible(node)) {
+            return;
+        }
+        const seat = node.getBoundingClientRect();
+        const frame = view.getBoundingClientRect();
+        const next = revealRect(this.viewportState(), {
+            x: seat.left - frame.left,
+            y: seat.top - frame.top,
+            width: seat.width,
+            height: seat.height,
+        }, measured.content, measured.container, undefined, this.limits());
+        this.commit(next, true);
+    }
+    // --- pointer gestures -----------------------------------------------------
+    onPointerDown(event) {
+        if (event.pointerType === 'mouse' && event.button !== 0) {
+            return;
+        }
+        this.suppressClick = false;
+        this.feedGesture({ type: 'down', id: event.pointerId, point: this.containerPoint(event) });
+    }
+    onPointerMove(event) {
+        if (this.gesture.ids.length > 0) {
+            this.feedGesture({ type: 'move', id: event.pointerId, point: this.containerPoint(event) });
+        }
+    }
+    onPointerEnd(event, type) {
+        this.feedGesture({ type, id: event.pointerId });
+    }
+    feedGesture(event) {
+        const measured = this.measure();
+        if (!measured) {
+            return;
+        }
+        const result = reduceGesture(this.gesture, event, {
+            viewport: this.viewportState(),
+            content: measured.content,
+            container: measured.container,
+            limits: this.limits(),
+        });
+        this.gesture = result.state;
+        // Capture only once a tap has become a gesture: capturing on `down` would
+        // retarget the tap's click away from the seat.
+        if (result.capture) {
+            const view = this.viewportEl()?.nativeElement;
+            for (const id of result.state.ids) {
+                try {
+                    view?.setPointerCapture(id);
+                }
+                catch {
+                    // The pointer already ended; nothing to capture.
+                }
+            }
+        }
+        if (result.viewport !== this.viewportState()) {
+            this.commit(result.viewport, false);
+        }
+        if (result.suppressClick) {
+            // The click a drag ends with arrives right after `pointerup`, before this timer.
+            this.suppressClick = true;
+            setTimeout(() => (this.suppressClick = false));
+        }
+    }
+    onClickCapture(event) {
+        if (this.suppressClick) {
+            this.suppressClick = false;
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    onWheel(event) {
+        const factor = wheelZoomFactor(event);
+        const measured = this.measure();
+        if (factor === null || !measured) {
+            return; // A plain wheel is the page's to scroll.
+        }
+        event.preventDefault();
+        const next = zoomViewportBy(this.viewportState(), factor, this.containerPoint(event), measured.content, measured.container, this.limits());
+        this.commit(next, false);
+    }
+    onGestureStart(event) {
+        event.preventDefault();
+        this.gestureBase = this.viewportState();
+    }
+    onGestureChange(event) {
+        event.preventDefault();
+        const measured = this.measure();
+        if (!this.gestureBase || !measured) {
+            return;
+        }
+        const next = zoomViewportTo(this.gestureBase, this.gestureBase.zoom * event.scale, this.containerPoint(event), measured.content, measured.container, this.limits());
+        this.commit(next, false);
+    }
+    onGestureEnd(event) {
+        event.preventDefault();
+        this.gestureBase = null;
+    }
+    // --- keyboard on the map as a whole ----------------------------------------
+    /**
+     * `+` `-` `0` zoom, and arrows pan when the viewport itself has focus; Esc
+     * leaves a maximized map. A seat's own handler runs first, so an Esc that
+     * cleared the selection is already `defaultPrevented` and stays at that.
+     */
+    onRootKeydown(event) {
+        if (event.defaultPrevented || isTextEntryTarget(event.target)) {
+            return;
+        }
+        if (this.zoomable()) {
+            const measured = this.measure();
+            const next = measured &&
+                keyboardViewport(this.viewportState(), {
+                    key: event.key,
+                    ctrlKey: event.ctrlKey,
+                    metaKey: event.metaKey,
+                    altKey: event.altKey,
+                    viewportFocused: event.target === this.viewportEl()?.nativeElement,
+                }, measured.content, measured.container, this.limits());
+            if (next) {
+                event.preventDefault();
+                this.commit(next, true);
                 return;
             }
         }
+        if (event.key === 'Escape' && this.maximizedState()) {
+            event.preventDefault();
+            this.setMaximized(false);
+        }
+    }
+    // --- maximize -------------------------------------------------------------
+    /** Maximizes or restores the map. Maximizing needs `maximizable`. */
+    toggleMaximized() {
+        this.setMaximized(!this.maximizedState());
+    }
+    setMaximized(next) {
+        if (next === this.maximizedState() || (next && !this.maximizable())) {
+            return;
+        }
+        this.maximizedState.set(next);
+        this.maximizedChange.emit(next);
+        // Native full screen is an enhancement over the fixed-position layout, which
+        // is all iPhone Safari offers. It is requested here, inside the click that
+        // got us here, because browsers only grant it to a user gesture.
+        const host = this.host.nativeElement;
+        const doc = host.ownerDocument;
+        if (next && !doc.fullscreenElement) {
+            host.requestFullscreen?.()?.catch(() => undefined);
+        }
+        else if (!next && doc.fullscreenElement === host) {
+            doc.exitFullscreen?.()?.catch(() => undefined);
+        }
     }
     announceSelection(selection) {
         const strings = this.ariaStrings();
@@ -758,15 +1142,24 @@ class KerusiSeatmapComponent {
         return (this.map().sections ?? []).map((s) => s.id).filter((id) => !hidden.includes(id));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSeatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiSeatmapComponent, isStandalone: true, selector: "kerusi-seatmap", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, session: { classPropertyName: "session", publicName: "session", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, ariaStrings: { classPropertyName: "ariaStrings", publicName: "ariaStrings", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, seatSize: { classPropertyName: "seatSize", publicName: "seatSize", isSignal: true, isRequired: false, transformFunction: null }, seatGap: { classPropertyName: "seatGap", publicName: "seatGap", isSignal: true, isRequired: false, transformFunction: null }, freeformBasis: { classPropertyName: "freeformBasis", publicName: "freeformBasis", isSignal: true, isRequired: false, transformFunction: null }, unitScale: { classPropertyName: "unitScale", publicName: "unitScale", isSignal: true, isRequired: false, transformFunction: null }, showSectionLabels: { classPropertyName: "showSectionLabels", publicName: "showSectionLabels", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showLegendPrices: { classPropertyName: "showLegendPrices", publicName: "showLegendPrices", isSignal: true, isRequired: false, transformFunction: null }, sectionIds: { classPropertyName: "sectionIds", publicName: "sectionIds", isSignal: true, isRequired: false, transformFunction: null }, sectionOverrides: { classPropertyName: "sectionOverrides", publicName: "sectionOverrides", isSignal: true, isRequired: false, transformFunction: null }, selectableStatuses: { classPropertyName: "selectableStatuses", publicName: "selectableStatuses", isSignal: true, isRequired: false, transformFunction: null }, companionMode: { classPropertyName: "companionMode", publicName: "companionMode", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, seatSelectable: { classPropertyName: "seatSelectable", publicName: "seatSelectable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, expireHolds: { classPropertyName: "expireHolds", publicName: "expireHolds", isSignal: true, isRequired: false, transformFunction: null }, expiryIntervalMs: { classPropertyName: "expiryIntervalMs", publicName: "expiryIntervalMs", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", seatSelect: "seatSelect", seatDeselect: "seatDeselect", seatDisallowed: "seatDisallowed", seatFocus: "seatFocus", validationIssues: "validationIssues" }, ngImport: i0, template: "<div\r\n  class=\"kerusi-seatmap\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"mapLabel()\"\r\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\r\n  [attr.lang]=\"resolvedLocale()\"\r\n>\r\n  @for (section of renderMap().sections; track section.id) {\r\n    <section\r\n      class=\"kerusi-seatmap__section kerusi-seatmap__section--{{ section.layoutMode }}\"\r\n      role=\"group\"\r\n      [attr.aria-labelledby]=\"labelFor(section) ? labelId(section) : null\"\r\n      [attr.aria-label]=\"labelFor(section) ? null : section.id\"\r\n    >\r\n      @if (showSectionLabels() && labelFor(section)) {\r\n        <h3 class=\"kerusi-section-label\" [id]=\"labelId(section)\">{{ labelFor(section) }}</h3>\r\n      }\r\n\r\n      <kerusi-section\r\n        [section]=\"section\"\r\n        [layout]=\"layoutFor(section)\"\r\n        [selection]=\"selectionSet()\"\r\n        [focusedSeatId]=\"focusedSeatIn(section)\"\r\n        [ariaLabels]=\"ariaLabels()\"\r\n        [colors]=\"resolvedColors()\"\r\n        [typeColors]=\"typeColors()\"\r\n        [unitScale]=\"unitScale()\"\r\n        [interactive]=\"interactive()\"\r\n        (seatActivate)=\"onSeatActivate($event)\"\r\n        (seatFocused)=\"onSeatFocused($event)\"\r\n        (seatKeydown)=\"onKeydown(section, $event)\"\r\n      />\r\n    </section>\r\n  }\r\n\r\n  @if (showLegend()) {\r\n    <kerusi-legend\r\n      [legend]=\"renderMap().legend\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [colors]=\"resolvedColors()\"\r\n      [typeColors]=\"typeColors()\"\r\n      [showPrices]=\"showLegendPrices()\"\r\n    />\r\n  }\r\n\r\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__section{display:flex;flex-direction:column;gap:.4rem}.kerusi-section-label{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}.kerusi-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: KerusiSectionComponent, selector: "kerusi-section", inputs: ["section", "layout", "selection", "focusedSeatId", "ariaLabels", "colors", "typeColors", "interactive", "unitScale"], outputs: ["seatActivate", "seatFocused", "seatKeydown"] }, { kind: "component", type: KerusiLegendComponent, selector: "kerusi-legend", inputs: ["legend", "locale", "colors", "typeColors", "showPrices", "hideUnusedTypes", "headingSeatTypes", "headingAvailability"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiSeatmapComponent, isStandalone: true, selector: "kerusi-seatmap", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, session: { classPropertyName: "session", publicName: "session", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, ariaStrings: { classPropertyName: "ariaStrings", publicName: "ariaStrings", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, seatSize: { classPropertyName: "seatSize", publicName: "seatSize", isSignal: true, isRequired: false, transformFunction: null }, seatGap: { classPropertyName: "seatGap", publicName: "seatGap", isSignal: true, isRequired: false, transformFunction: null }, freeformBasis: { classPropertyName: "freeformBasis", publicName: "freeformBasis", isSignal: true, isRequired: false, transformFunction: null }, unitScale: { classPropertyName: "unitScale", publicName: "unitScale", isSignal: true, isRequired: false, transformFunction: null }, showSectionLabels: { classPropertyName: "showSectionLabels", publicName: "showSectionLabels", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showLegendPrices: { classPropertyName: "showLegendPrices", publicName: "showLegendPrices", isSignal: true, isRequired: false, transformFunction: null }, sectionIds: { classPropertyName: "sectionIds", publicName: "sectionIds", isSignal: true, isRequired: false, transformFunction: null }, sectionOverrides: { classPropertyName: "sectionOverrides", publicName: "sectionOverrides", isSignal: true, isRequired: false, transformFunction: null }, selectableStatuses: { classPropertyName: "selectableStatuses", publicName: "selectableStatuses", isSignal: true, isRequired: false, transformFunction: null }, companionMode: { classPropertyName: "companionMode", publicName: "companionMode", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, seatSelectable: { classPropertyName: "seatSelectable", publicName: "seatSelectable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, expireHolds: { classPropertyName: "expireHolds", publicName: "expireHolds", isSignal: true, isRequired: false, transformFunction: null }, expiryIntervalMs: { classPropertyName: "expiryIntervalMs", publicName: "expiryIntervalMs", isSignal: true, isRequired: false, transformFunction: null }, zoomable: { classPropertyName: "zoomable", publicName: "zoomable", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, showZoomControls: { classPropertyName: "showZoomControls", publicName: "showZoomControls", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, controlStrings: { classPropertyName: "controlStrings", publicName: "controlStrings", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", seatSelect: "seatSelect", seatDeselect: "seatDeselect", seatDisallowed: "seatDisallowed", seatFocus: "seatFocus", validationIssues: "validationIssues", viewportChange: "viewportChange", maximizedChange: "maximizedChange" }, viewQueries: [{ propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "contentEl", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"kerusi-seatmap\"\r\n  [class.kerusi-seatmap--maximized]=\"maximized()\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"mapLabel()\"\r\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\r\n  [attr.lang]=\"resolvedLocale()\"\r\n  [style.background]=\"maximized() ? controlColors().maximizedBackground : null\"\r\n  [style.color]=\"maximized() ? controlColors().maximizedColor : null\"\r\n  (keydown)=\"onRootKeydown($event)\"\r\n>\r\n  @if (zoomable() || maximizable()) {\r\n    <!-- Only when a zoom or maximize feature is on, so a plain map's markup is\r\n         exactly what it was before they existed. -->\r\n    <div class=\"kerusi-seatmap__stage\">\r\n      @if (showToolbar()) {\r\n        <div\r\n          class=\"kerusi-toolbar\"\r\n          role=\"toolbar\"\r\n          [attr.aria-label]=\"strings().toolbar\"\r\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\r\n        >\r\n          @if (zoomable() && showZoomControls()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-in\"\r\n              [attr.aria-label]=\"strings().zoomIn\"\r\n              [attr.aria-disabled]=\"atMaxZoom()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"zoomIn()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M12 5v14M5 12h14\" />\r\n              </svg>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-out\"\r\n              [attr.aria-label]=\"strings().zoomOut\"\r\n              [attr.aria-disabled]=\"atFit()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"zoomOut()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M5 12h14\" />\r\n              </svg>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-reset\"\r\n              [attr.aria-label]=\"strings().zoomReset\"\r\n              [attr.aria-disabled]=\"atFit()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"resetZoom()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v5h5\" />\r\n              </svg>\r\n            </button>\r\n          }\r\n          @if (maximizable()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--maximize\"\r\n              [attr.aria-label]=\"maximized() ? strings().restore : strings().maximize\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"toggleMaximized()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                @if (maximized()) {\r\n                  <path d=\"M9 4v5H4M15 4v5h5M15 20v-5h5M9 20v-5H4\" />\r\n                } @else {\r\n                  <path d=\"M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5\" />\r\n                }\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (zoomable()) {\r\n        <div\r\n          #viewport\r\n          class=\"kerusi-viewport\"\r\n          role=\"group\"\r\n          tabindex=\"0\"\r\n          [attr.aria-label]=\"strings().viewport\"\r\n          [style.touch-action]=\"touchAction()\"\r\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\r\n        >\r\n          <div\r\n            #content\r\n            class=\"kerusi-viewport__content\"\r\n            [class.kerusi-viewport__content--animated]=\"animated()\"\r\n            [style.transform]=\"transform()\"\r\n          >\r\n            <ng-container [ngTemplateOutlet]=\"sections\" />\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"sections\" />\r\n      }\r\n    </div>\r\n  } @else {\r\n    <ng-container [ngTemplateOutlet]=\"sections\" />\r\n  }\r\n\r\n  @if (showLegend()) {\r\n    <kerusi-legend\r\n      [legend]=\"renderMap().legend\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [colors]=\"resolvedColors()\"\r\n      [typeColors]=\"typeColors()\"\r\n      [showPrices]=\"showLegendPrices()\"\r\n    />\r\n  }\r\n\r\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\r\n</div>\r\n\r\n<ng-template #sections>\r\n  @for (section of renderMap().sections; track section.id) {\r\n    <section\r\n      class=\"kerusi-seatmap__section kerusi-seatmap__section--{{ section.layoutMode }}\"\r\n      role=\"group\"\r\n      [attr.aria-labelledby]=\"labelFor(section) ? labelId(section) : null\"\r\n      [attr.aria-label]=\"labelFor(section) ? null : section.id\"\r\n    >\r\n      @if (showSectionLabels() && labelFor(section)) {\r\n        <h3 class=\"kerusi-section-label\" [id]=\"labelId(section)\">{{ labelFor(section) }}</h3>\r\n      }\r\n\r\n      <kerusi-section\r\n        [section]=\"section\"\r\n        [layout]=\"layoutFor(section)\"\r\n        [selection]=\"selectionSet()\"\r\n        [focusedSeatId]=\"focusedSeatIn(section)\"\r\n        [ariaLabels]=\"ariaLabels()\"\r\n        [colors]=\"resolvedColors()\"\r\n        [typeColors]=\"typeColors()\"\r\n        [unitScale]=\"unitScale()\"\r\n        [interactive]=\"interactive()\"\r\n        (seatActivate)=\"onSeatActivate($event)\"\r\n        (seatFocused)=\"onSeatFocused($event)\"\r\n        (seatKeydown)=\"onKeydown(section, $event)\"\r\n      />\r\n    </section>\r\n  }\r\n</ng-template>\r\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__section{display:flex;flex-direction:column;gap:.4rem}.kerusi-section-label{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}.kerusi-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.kerusi-seatmap__stage{display:flex;flex-direction:column;gap:1.25rem}.kerusi-toolbar{display:flex;gap:.35rem;align-self:flex-end;flex:none}.kerusi-control{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:2.75rem;height:2.75rem;padding:0;border:1px solid;border-radius:.4rem;font:inherit;cursor:pointer}.kerusi-control[aria-disabled=true]{opacity:.45;cursor:default}.kerusi-control svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.kerusi-control:focus-visible,.kerusi-viewport:focus-visible{outline:2px solid var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));outline-offset:2px}.kerusi-viewport{position:relative;overflow:hidden;overflow:clip;user-select:none;-webkit-user-select:none}.kerusi-viewport__content{display:flex;flex-direction:column;gap:1.25rem;transform-origin:0 0}.kerusi-viewport__content--animated{transition:transform .16s ease-out}@media(prefers-reduced-motion:reduce){.kerusi-viewport__content--animated{transition:none}}.kerusi-seatmap--maximized{position:fixed;inset:0;z-index:var(--kerusi-maximized-z-index, 1000);box-sizing:border-box;padding:.75rem;gap:.5rem;overflow:hidden;overscroll-behavior:contain}.kerusi-seatmap--maximized .kerusi-seatmap__stage{flex:1 1 auto;min-height:0;gap:.5rem;overflow:auto}.kerusi-seatmap--maximized .kerusi-viewport{flex:1 1 auto;min-height:0}\n"], dependencies: [{ kind: "component", type: KerusiSectionComponent, selector: "kerusi-section", inputs: ["section", "layout", "selection", "focusedSeatId", "ariaLabels", "colors", "typeColors", "interactive", "unitScale"], outputs: ["seatActivate", "seatFocused", "seatKeydown"] }, { kind: "component", type: KerusiLegendComponent, selector: "kerusi-legend", inputs: ["legend", "locale", "colors", "typeColors", "showPrices", "hideUnusedTypes", "headingSeatTypes", "headingAvailability"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSeatmapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kerusi-seatmap', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KerusiSectionComponent, KerusiLegendComponent], template: "<div\r\n  class=\"kerusi-seatmap\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"mapLabel()\"\r\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\r\n  [attr.lang]=\"resolvedLocale()\"\r\n>\r\n  @for (section of renderMap().sections; track section.id) {\r\n    <section\r\n      class=\"kerusi-seatmap__section kerusi-seatmap__section--{{ section.layoutMode }}\"\r\n      role=\"group\"\r\n      [attr.aria-labelledby]=\"labelFor(section) ? labelId(section) : null\"\r\n      [attr.aria-label]=\"labelFor(section) ? null : section.id\"\r\n    >\r\n      @if (showSectionLabels() && labelFor(section)) {\r\n        <h3 class=\"kerusi-section-label\" [id]=\"labelId(section)\">{{ labelFor(section) }}</h3>\r\n      }\r\n\r\n      <kerusi-section\r\n        [section]=\"section\"\r\n        [layout]=\"layoutFor(section)\"\r\n        [selection]=\"selectionSet()\"\r\n        [focusedSeatId]=\"focusedSeatIn(section)\"\r\n        [ariaLabels]=\"ariaLabels()\"\r\n        [colors]=\"resolvedColors()\"\r\n        [typeColors]=\"typeColors()\"\r\n        [unitScale]=\"unitScale()\"\r\n        [interactive]=\"interactive()\"\r\n        (seatActivate)=\"onSeatActivate($event)\"\r\n        (seatFocused)=\"onSeatFocused($event)\"\r\n        (seatKeydown)=\"onKeydown(section, $event)\"\r\n      />\r\n    </section>\r\n  }\r\n\r\n  @if (showLegend()) {\r\n    <kerusi-legend\r\n      [legend]=\"renderMap().legend\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [colors]=\"resolvedColors()\"\r\n      [typeColors]=\"typeColors()\"\r\n      [showPrices]=\"showLegendPrices()\"\r\n    />\r\n  }\r\n\r\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__section{display:flex;flex-direction:column;gap:.4rem}.kerusi-section-label{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}.kerusi-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], session: [{ type: i0.Input, args: [{ isSignal: true, alias: "session", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], rtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtl", required: false }] }], ariaStrings: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaStrings", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], seatSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatSize", required: false }] }], seatGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatGap", required: false }] }], freeformBasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeformBasis", required: false }] }], unitScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitScale", required: false }] }], showSectionLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSectionLabels", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showLegendPrices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegendPrices", required: false }] }], sectionIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionIds", required: false }] }], sectionOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionOverrides", required: false }] }], selectableStatuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableStatuses", required: false }] }], companionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "companionMode", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], seatSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatSelectable", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], expireHolds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expireHolds", required: false }] }], expiryIntervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "expiryIntervalMs", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], seatSelect: [{ type: i0.Output, args: ["seatSelect"] }], seatDeselect: [{ type: i0.Output, args: ["seatDeselect"] }], seatDisallowed: [{ type: i0.Output, args: ["seatDisallowed"] }], seatFocus: [{ type: i0.Output, args: ["seatFocus"] }], validationIssues: [{ type: i0.Output, args: ["validationIssues"] }] } });
+            args: [{ selector: 'kerusi-seatmap', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KerusiSectionComponent, KerusiLegendComponent, NgTemplateOutlet], template: "<div\r\n  class=\"kerusi-seatmap\"\r\n  [class.kerusi-seatmap--maximized]=\"maximized()\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"mapLabel()\"\r\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\r\n  [attr.lang]=\"resolvedLocale()\"\r\n  [style.background]=\"maximized() ? controlColors().maximizedBackground : null\"\r\n  [style.color]=\"maximized() ? controlColors().maximizedColor : null\"\r\n  (keydown)=\"onRootKeydown($event)\"\r\n>\r\n  @if (zoomable() || maximizable()) {\r\n    <!-- Only when a zoom or maximize feature is on, so a plain map's markup is\r\n         exactly what it was before they existed. -->\r\n    <div class=\"kerusi-seatmap__stage\">\r\n      @if (showToolbar()) {\r\n        <div\r\n          class=\"kerusi-toolbar\"\r\n          role=\"toolbar\"\r\n          [attr.aria-label]=\"strings().toolbar\"\r\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\r\n        >\r\n          @if (zoomable() && showZoomControls()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-in\"\r\n              [attr.aria-label]=\"strings().zoomIn\"\r\n              [attr.aria-disabled]=\"atMaxZoom()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"zoomIn()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M12 5v14M5 12h14\" />\r\n              </svg>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-out\"\r\n              [attr.aria-label]=\"strings().zoomOut\"\r\n              [attr.aria-disabled]=\"atFit()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"zoomOut()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M5 12h14\" />\r\n              </svg>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--zoom-reset\"\r\n              [attr.aria-label]=\"strings().zoomReset\"\r\n              [attr.aria-disabled]=\"atFit()\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"resetZoom()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v5h5\" />\r\n              </svg>\r\n            </button>\r\n          }\r\n          @if (maximizable()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"kerusi-control kerusi-control--maximize\"\r\n              [attr.aria-label]=\"maximized() ? strings().restore : strings().maximize\"\r\n              [style.background]=\"controlColors().buttonBackground\"\r\n              [style.color]=\"controlColors().buttonColor\"\r\n              [style.border-color]=\"controlColors().buttonBorder\"\r\n              (click)=\"toggleMaximized()\"\r\n            >\r\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n                @if (maximized()) {\r\n                  <path d=\"M9 4v5H4M15 4v5h5M15 20v-5h5M9 20v-5H4\" />\r\n                } @else {\r\n                  <path d=\"M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5\" />\r\n                }\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (zoomable()) {\r\n        <div\r\n          #viewport\r\n          class=\"kerusi-viewport\"\r\n          role=\"group\"\r\n          tabindex=\"0\"\r\n          [attr.aria-label]=\"strings().viewport\"\r\n          [style.touch-action]=\"touchAction()\"\r\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\r\n        >\r\n          <div\r\n            #content\r\n            class=\"kerusi-viewport__content\"\r\n            [class.kerusi-viewport__content--animated]=\"animated()\"\r\n            [style.transform]=\"transform()\"\r\n          >\r\n            <ng-container [ngTemplateOutlet]=\"sections\" />\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"sections\" />\r\n      }\r\n    </div>\r\n  } @else {\r\n    <ng-container [ngTemplateOutlet]=\"sections\" />\r\n  }\r\n\r\n  @if (showLegend()) {\r\n    <kerusi-legend\r\n      [legend]=\"renderMap().legend\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [colors]=\"resolvedColors()\"\r\n      [typeColors]=\"typeColors()\"\r\n      [showPrices]=\"showLegendPrices()\"\r\n    />\r\n  }\r\n\r\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\r\n</div>\r\n\r\n<ng-template #sections>\r\n  @for (section of renderMap().sections; track section.id) {\r\n    <section\r\n      class=\"kerusi-seatmap__section kerusi-seatmap__section--{{ section.layoutMode }}\"\r\n      role=\"group\"\r\n      [attr.aria-labelledby]=\"labelFor(section) ? labelId(section) : null\"\r\n      [attr.aria-label]=\"labelFor(section) ? null : section.id\"\r\n    >\r\n      @if (showSectionLabels() && labelFor(section)) {\r\n        <h3 class=\"kerusi-section-label\" [id]=\"labelId(section)\">{{ labelFor(section) }}</h3>\r\n      }\r\n\r\n      <kerusi-section\r\n        [section]=\"section\"\r\n        [layout]=\"layoutFor(section)\"\r\n        [selection]=\"selectionSet()\"\r\n        [focusedSeatId]=\"focusedSeatIn(section)\"\r\n        [ariaLabels]=\"ariaLabels()\"\r\n        [colors]=\"resolvedColors()\"\r\n        [typeColors]=\"typeColors()\"\r\n        [unitScale]=\"unitScale()\"\r\n        [interactive]=\"interactive()\"\r\n        (seatActivate)=\"onSeatActivate($event)\"\r\n        (seatFocused)=\"onSeatFocused($event)\"\r\n        (seatKeydown)=\"onKeydown(section, $event)\"\r\n      />\r\n    </section>\r\n  }\r\n</ng-template>\r\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__section{display:flex;flex-direction:column;gap:.4rem}.kerusi-section-label{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}.kerusi-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.kerusi-seatmap__stage{display:flex;flex-direction:column;gap:1.25rem}.kerusi-toolbar{display:flex;gap:.35rem;align-self:flex-end;flex:none}.kerusi-control{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:2.75rem;height:2.75rem;padding:0;border:1px solid;border-radius:.4rem;font:inherit;cursor:pointer}.kerusi-control[aria-disabled=true]{opacity:.45;cursor:default}.kerusi-control svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.kerusi-control:focus-visible,.kerusi-viewport:focus-visible{outline:2px solid var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));outline-offset:2px}.kerusi-viewport{position:relative;overflow:hidden;overflow:clip;user-select:none;-webkit-user-select:none}.kerusi-viewport__content{display:flex;flex-direction:column;gap:1.25rem;transform-origin:0 0}.kerusi-viewport__content--animated{transition:transform .16s ease-out}@media(prefers-reduced-motion:reduce){.kerusi-viewport__content--animated{transition:none}}.kerusi-seatmap--maximized{position:fixed;inset:0;z-index:var(--kerusi-maximized-z-index, 1000);box-sizing:border-box;padding:.75rem;gap:.5rem;overflow:hidden;overscroll-behavior:contain}.kerusi-seatmap--maximized .kerusi-seatmap__stage{flex:1 1 auto;min-height:0;gap:.5rem;overflow:auto}.kerusi-seatmap--maximized .kerusi-viewport{flex:1 1 auto;min-height:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], session: [{ type: i0.Input, args: [{ isSignal: true, alias: "session", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], rtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtl", required: false }] }], ariaStrings: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaStrings", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], seatSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatSize", required: false }] }], seatGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatGap", required: false }] }], freeformBasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeformBasis", required: false }] }], unitScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitScale", required: false }] }], showSectionLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSectionLabels", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showLegendPrices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegendPrices", required: false }] }], sectionIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionIds", required: false }] }], sectionOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionOverrides", required: false }] }], selectableStatuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableStatuses", required: false }] }], companionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "companionMode", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], seatSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatSelectable", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], expireHolds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expireHolds", required: false }] }], expiryIntervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "expiryIntervalMs", required: false }] }], zoomable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomable", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], showZoomControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZoomControls", required: false }] }], maximizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizable", required: false }] }], controlStrings: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlStrings", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], seatSelect: [{ type: i0.Output, args: ["seatSelect"] }], seatDeselect: [{ type: i0.Output, args: ["seatDeselect"] }], seatDisallowed: [{ type: i0.Output, args: ["seatDisallowed"] }], seatFocus: [{ type: i0.Output, args: ["seatFocus"] }], validationIssues: [{ type: i0.Output, args: ["validationIssues"] }], viewportChange: [{ type: i0.Output, args: ["viewportChange"] }], maximizedChange: [{ type: i0.Output, args: ["maximizedChange"] }], viewportEl: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], contentEl: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 function formatTotal(total, locale) {
     return total ? formatMoney(total, locale) : '';
 }
+/** `:focus-visible` where the engine knows it; otherwise assume the focus is the keyboard's. */
+function focusIsVisible(node) {
+    try {
+        return node.matches(':focus-visible');
+    }
+    catch {
+        return true;
+    }
+}
 
 /**
  * The Kerusi-native seat map: `<kerusi-seatmap>`, its section renderer, and an