@kerusiweb/angular 2.2.0 → 3.0.0

package/fesm2022/kerusiweb-angular.mjs

@@ -1,24 +1,34 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/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';
+import { input, output, computed, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, ElementRef, model, contentChild, signal, viewChild, effect, untracked } from '@angular/core';
+import { DEFAULT_KERUSI_COLORS, elementTextFill, elementStyle, resolveSeatStyle, resolveSeatGlyph, elementFill, screenPath, cssVar, legendSwatchFill, legendSwatchPath, legendSwatchText, seatBodyPath, seatSelectedFrame, seatOccupantPath, seatOccupantStroke, seatWashFill, occupantFillFor, occupantStrokeFor, seatCoreFill, 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, computeMapLayout, buildNavigationGraph, seatAriaLabel, summarizeSelection, toggleSeatSelection, disallowedAnnouncement, fitViewport, viewportForRect, canvasRectToContent, 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>`.
+ * Draws one Kerusi `Section` as a `<g>` on the map's shared canvas (D1).
  *
- * One SVG per section — rather than section groups inside a shared canvas — is
- * what makes per-section `aspectRatio` and mixed grid/freeform modes work: each
- * gets its own `viewBox` and its own intrinsic proportions, and CSS is free to
- * stack, wrap or column them. It also puts the section heading in real DOM,
- * where a screen reader can use it as a landmark.
+ * Sections are zones on one canvas in rev 15 (§4.1), and two may sit side by
+ * side, so a section is a group inside the map's single `<svg>` rather than an
+ * SVG of its own. Use it on a `<g>` inside an `<svg>` whose `viewBox` is the
+ * canvas: `<g kerusi-section [layout]="placed"></g>`. Its template prefixes
+ * every element with `svg:`, because Angular cannot tell from a component's
+ * own template that it will be stamped into SVG.
  *
  * This component holds no state. It takes a placed layout and emits intent.
  */
 class KerusiSectionComponent {
-    section = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
+    /** The section with its seats and elements placed on the map's canvas. */
     layout = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** The section's name: its accessible name, and its drawn label when one is shown. */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Draw `label` inside the SVG, at the top-left of the section's bounds. Only
+     * a section that declares `bounds` gets one (D5); otherwise the label is the
+     * group's accessible name alone.
+     */
+    showLabel = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
     /** Currently selected seat ids. */
     selection = input(new Set(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
@@ -33,137 +43,47 @@ class KerusiSectionComponent {
     /** Whether an available seat may take its `SeatType.color` (§4.7). */
     typeColors = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "typeColors" }] : /* istanbul ignore next */ []));
+    /** Styles for every seat of a type, keyed by `SeatType.id`. */
+    seatTypeStyles = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatTypeStyles" }] : /* istanbul ignore next */ []));
+    /** A style for one seat, laid over its type's. */
+    seatStyle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatStyle" }] : /* istanbul ignore next */ []));
+    /** Draws the inside of each seat in place of the stock glyph. */
+    seatTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatTemplate" }] : /* istanbul ignore next */ []));
     /** When false, seats render but do not respond to pointer or keyboard. */
     interactive = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
-    /**
-     * CSS pixels per viewBox unit, at the section's natural size.
-     *
-     * Without a cap every section stretches to the full container width, so in a
-     * four-tier theatre the narrow box row would draw seats several times the
-     * size of the orchestra's. Capping each section at its own intrinsic width
-     * keeps a seat the same size everywhere; a section too wide to fit still
-     * scales down to the container.
-     */
-    unitScale = input(1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "unitScale" }] : /* istanbul ignore next */ []));
     seatActivate = output();
     seatFocused = output();
     seatKeydown = output();
-    viewBox = computed(() => `0 0 ${this.layout().width} ${this.layout().height}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    /** The section's natural width in CSS pixels; it never draws wider. */
-    naturalWidth = computed(() => this.layout().width * this.unitScale(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "naturalWidth" }] : /* istanbul ignore next */ []));
-    isSelected(placed) {
-        return this.selection().has(placed.seat.id);
-    }
-    fill(placed) {
-        return seatFill(placed.seat, this.isSelected(placed), this.colors(), this.typeColors());
-    }
-    textFill(placed) {
-        return seatTextFill(placed.seat, this.isSelected(placed), this.colors(), this.typeColors());
-    }
-    backdrop() {
-        return cssVar('backdrop', this.colors().backdrop);
-    }
-    // --- the seat glyph -------------------------------------------------------
-    /** The seat's outline: square-ish front, tapered back — shape carries facing. */
-    bodyPath(placed) {
-        return seatBodyPath(placed.x, placed.y, placed.width, placed.height);
-    }
-    /** `null` for an available or blocked seat — nothing to mark. */
-    occupantVariant(placed) {
-        return seatOccupantVariant(placed.seat, this.isSelected(placed));
-    }
+    /** Whether the label is drawn: asked for, present, and with declared bounds to sit in. */
+    drawsLabel = computed(() => this.showLabel() && !!this.label() && this.layout().section.boundsDeclared, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawsLabel" }] : /* istanbul ignore next */ []));
+    labelFill = computed(() => elementTextFill(elementStyle('label').tone, this.colors()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelFill" }] : /* istanbul ignore next */ []));
     /**
-     * The box a seat's decorative marks are drawn to: the seat's own, or — when
-     * it is selected — the core plate's, which is inset by the frame width.
-     *
-     * Everything over a selected seat sits on the core, so it all has to be
-     * measured from the core. Drawing to the seat's box instead leaves the
-     * occupant's hips crossing the frame, where a figure tinted `selectedBg`
-     * lands on a frame filled `selectedBg` and reads as a hard nub. Since the
-     * core is an exact scaled copy of the body (see {@link seatSelectedFrame}),
-     * routing through here reproduces every clearance the mark had against the
-     * body, scaled — so the frame width stays free to change.
+     * Every seat with its glyph resolved, once per change of layout, selection or
+     * theme rather than once per binding per change detection.
      */
-    markBox(placed) {
-        if (!this.isSelected(placed)) {
-            return placed;
-        }
-        const frame = seatSelectedFrame(placed.width, placed.height);
-        return {
-            x: placed.x + frame,
-            y: placed.y + frame,
-            width: placed.width - frame * 2,
-            height: placed.height - frame * 2,
-        };
-    }
-    /** The bright plate inside a selected seat's frame. */
-    corePath(placed) {
-        const box = this.markBox(placed);
-        return seatBodyPath(box.x, box.y, box.width, box.height);
-    }
-    coreFill() {
-        return seatCoreFill(this.colors());
-    }
-    /** The dimming wash over a held or booked seat's type colour. */
-    washFill(placed) {
-        // Only called for held/booked seats — see the template's @if.
-        return seatWashFill(placed.seat.status, this.colors());
-    }
-    /** The occupant figure for a marked seat, sized to whatever it sits on. */
-    occupantPath(placed) {
-        const box = this.markBox(placed);
-        return seatOccupantPath(box.x, box.y, box.width, box.height);
-    }
-    occupantStroke(placed) {
-        const box = this.markBox(placed);
-        return seatOccupantStroke(box.width, box.height);
-    }
-    // The wheelchair marker keeps the same relative corner it always had; only
-    // the box it is relative to changes, so a selected seat's dot stays whole
-    // instead of being bitten off by the frame.
-    wheelchairCx(placed) {
-        const box = this.markBox(placed);
-        return box.x + box.width * 0.82;
-    }
-    wheelchairCy(placed) {
-        const box = this.markBox(placed);
-        return box.y + box.height * 0.18;
-    }
-    wheelchairRadius(placed) {
-        return this.markBox(placed).width * 0.13;
-    }
-    /**
-     * A core-coloured outline behind a selected seat's number, painted under the
-     * glyphs via `paint-order`.
-     *
-     * The label is centred on the occupant's shoulder line, so without this it is
-     * `selectedBg` over a `selectedBg` silhouette — the figure, not the plate, is
-     * what it actually has to contrast against. The halo also rescues a label too
-     * long for the core, which would otherwise run onto the frame and vanish into
-     * it.
-     *
-     * Bound here rather than in the stylesheet on purpose: a CSS
-     * `var(--kerusi-selected-fg, …)` rule would carry the library default as its
-     * fallback and silently skip the `[colors]` input tier, which only the
-     * TypeScript side can resolve.
-     */
-    labelHalo(placed) {
-        return this.isSelected(placed) ? seatCoreFill(this.colors()) : 'none';
-    }
-    labelHaloWidth(placed) {
-        return this.isSelected(placed) ? placed.fontSize * 0.22 : 0;
-    }
-    /** Solid for selected/booked; `none` for held, which draws hollow instead. */
-    occupantFill(variant) {
-        return occupantFillFor(variant, this.colors());
-    }
-    occupantStrokeColor(variant) {
-        return occupantStrokeFor(variant, this.colors());
-    }
+    seats = computed(() => {
+        const selection = this.selection();
+        const colors = this.colors();
+        const typeColors = this.typeColors();
+        const typeStyles = this.seatTypeStyles();
+        const seatStyle = this.seatStyle();
+        return this.layout().seats.map((placed) => {
+            const selected = selection.has(placed.seat.id);
+            const style = resolveSeatStyle(placed.seat, selected, typeStyles, seatStyle);
+            return {
+                placed,
+                selected,
+                glyph: resolveSeatGlyph(placed, selected, colors, typeColors, style),
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seats" }] : /* istanbul ignore next */ []));
     /** The section's single tab stop; every other seat is reachable by arrow key. */
     tabIndex(placed) {
         if (!this.interactive()) {
@@ -174,19 +94,6 @@ class KerusiSectionComponent {
     ariaLabel(placed) {
         return this.ariaLabels().get(placed.seat.id) ?? placed.seat.label;
     }
-    seatClasses(placed) {
-        const seat = placed.seat;
-        return [
-            'kerusi-seat',
-            `kerusi-seat--${seat.status}`,
-            this.isSelected(placed) ? 'kerusi-seat--selected' : '',
-            seat.selectable ? '' : 'kerusi-seat--unselectable',
-            seat.accessibility?.wheelchairAccessible ? 'kerusi-seat--wheelchair' : '',
-            seat.companions.length > 0 ? 'kerusi-seat--companion' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
     /** SVG rotate() about the item's center; null when it does not rotate. */
     transform(item) {
         return item.rotation ? `rotate(${item.rotation} ${item.centerX} ${item.centerY})` : null;
@@ -238,12 +145,17 @@ class KerusiSectionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiSectionComponent, isStandalone: true, selector: "kerusi-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, focusedSeatId: { classPropertyName: "focusedSeatId", publicName: "focusedSeatId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", 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 }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, unitScale: { classPropertyName: "unitScale", publicName: "unitScale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { seatActivate: "seatActivate", seatFocused: "seatFocused", seatKeydown: "seatKeydown" }, ngImport: i0, template: "<svg\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  class=\"kerusi-section-svg\"\r\n  role=\"presentation\"\r\n  focusable=\"false\"\r\n  [style.--kerusi-focus-ring-input]=\"colors().focusRing\"\r\n  [attr.viewBox]=\"viewBox()\"\r\n  [style.max-width.px]=\"naturalWidth()\"\r\n  preserveAspectRatio=\"xMidYMid meet\"\r\n>\r\n  <rect\r\n    x=\"0\"\r\n    y=\"0\"\r\n    [attr.width]=\"layout().width\"\r\n    [attr.height]=\"layout().height\"\r\n    [style.fill]=\"backdrop()\"\r\n  />\r\n\r\n  <!-- Elements first, so a screen or stage sits behind the seats it faces. -->\r\n  @for (placed of layout().elements; track placed.element.id) {\r\n    @if (drawsElement(placed)) {\r\n      <g\r\n        class=\"kerusi-element kerusi-element--{{ placed.element.kind }}\"\r\n        [attr.transform]=\"transform(placed)\"\r\n      >\r\n        @switch (style(placed).shape) {\r\n          @case ('screen') {\r\n            <path [attr.d]=\"screenPathOf(placed)\" [style.fill]=\"elementFillOf(placed)\" />\r\n          }\r\n          @case ('text') {}\r\n          @case ('void') {\r\n            <rect\r\n              class=\"kerusi-element__void\"\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [style.stroke]=\"elementTextFillOf(placed)\"\r\n              fill=\"none\"\r\n            />\r\n          }\r\n          @default {\r\n            <rect\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [attr.rx]=\"radiusOf(placed)\"\r\n              [style.fill]=\"elementFillOf(placed)\"\r\n            />\r\n          }\r\n        }\r\n        @if (placed.element.label && style(placed).showLabel) {\r\n          <text\r\n            class=\"kerusi-element__label\"\r\n            text-anchor=\"middle\"\r\n            dominant-baseline=\"central\"\r\n            [attr.x]=\"placed.centerX\"\r\n            [attr.y]=\"placed.centerY\"\r\n            [attr.font-size]=\"placed.fontSize\"\r\n            [style.fill]=\"elementTextFillOf(placed)\"\r\n            [attr.transform]=\"labelTransform(placed)\"\r\n          >\r\n            {{ placed.element.label }}\r\n          </text>\r\n        }\r\n      </g>\r\n    }\r\n  }\r\n\r\n  @for (placed of layout().seats; track placed.seat.id) {\r\n    <g\r\n      [class]=\"seatClasses(placed)\"\r\n      role=\"button\"\r\n      [attr.tabindex]=\"tabIndex(placed)\"\r\n      [attr.aria-label]=\"ariaLabel(placed)\"\r\n      [attr.aria-pressed]=\"isSelected(placed)\"\r\n      [attr.aria-disabled]=\"!placed.seat.selectable\"\r\n      [attr.data-seat-id]=\"placed.seat.id\"\r\n      [attr.transform]=\"transform(placed)\"\r\n      (click)=\"onSeatClick(placed)\"\r\n      (focus)=\"onSeatFocus(placed)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      @let variant = occupantVariant(placed);\r\n      <!-- Tapered toward the back, square at the front, so which way the seat\r\n           faces is legible from the outline alone. -->\r\n      <path class=\"kerusi-seat__box\" [attr.d]=\"bodyPath(placed)\" [style.fill]=\"fill(placed)\" />\r\n      @if (variant === 'held' || variant === 'booked') {\r\n        <!-- Colour stays the seat type's; a taken seat recedes under a wash\r\n             instead, so the type colour still reads on a busy map. -->\r\n        <path\r\n          class=\"kerusi-seat__wash\"\r\n          [attr.d]=\"bodyPath(placed)\"\r\n          [style.fill]=\"washFill(placed)\"\r\n        />\r\n      }\r\n      @if (variant === 'selected') {\r\n        <!-- Selection is the one state drawn from two tones: the body above is\r\n             the frame, this is the bright core inside it. Whichever way the\r\n             host page is themed, one of the two separates from it \u2014 which is\r\n             why nothing here has to know about the page. -->\r\n        <path class=\"kerusi-seat__core\" [attr.d]=\"corePath(placed)\" [style.fill]=\"coreFill()\" />\r\n      }\r\n      @if (variant) {\r\n        <!-- Deliberately not counter-rotated: the occupant leans with the\r\n             seat. Solid = settled (yours, or sold); hollow = a hold still in\r\n             progress. -->\r\n        <path\r\n          class=\"kerusi-seat__occupant kerusi-seat__occupant--{{ variant }}\"\r\n          [attr.d]=\"occupantPath(placed)\"\r\n          [attr.stroke-width]=\"occupantStroke(placed)\"\r\n          [style.fill]=\"occupantFill(variant)\"\r\n          [style.stroke]=\"occupantStrokeColor(variant)\"\r\n        />\r\n      }\r\n      <text\r\n        class=\"kerusi-seat__label\"\r\n        text-anchor=\"middle\"\r\n        dominant-baseline=\"central\"\r\n        [attr.x]=\"placed.centerX\"\r\n        [attr.y]=\"placed.centerY\"\r\n        [attr.font-size]=\"placed.fontSize\"\r\n        [style.fill]=\"textFill(placed)\"\r\n        [style.stroke]=\"labelHalo(placed)\"\r\n        [attr.stroke-width]=\"labelHaloWidth(placed)\"\r\n        [attr.transform]=\"counterRotate(placed)\"\r\n      >\r\n        {{ placed.seat.label }}\r\n      </text>\r\n      @if (placed.seat.accessibility?.wheelchairAccessible) {\r\n        <!-- A corner marker, not a different fill: availability owns the fill. -->\r\n        <circle\r\n          class=\"kerusi-seat__wheelchair\"\r\n          [attr.cx]=\"wheelchairCx(placed)\"\r\n          [attr.cy]=\"wheelchairCy(placed)\"\r\n          [attr.r]=\"wheelchairRadius(placed)\"\r\n          [style.fill]=\"textFill(placed)\"\r\n        />\r\n      }\r\n    </g>\r\n  }\r\n</svg>\r\n", styles: [":host{display:block}.kerusi-section-svg{display:block;width:100%;height:auto;max-width:100%}.kerusi-seat{cursor:pointer;outline:none}.kerusi-seat--unselectable{cursor:not-allowed}.kerusi-seat__label,.kerusi-element__label{pointer-events:none;-webkit-user-select:none;user-select:none;font-family:inherit}.kerusi-seat__label{paint-order:stroke;stroke-linejoin:round}.kerusi-seat__wash{pointer-events:none;opacity:.5}.kerusi-seat__core,.kerusi-seat__occupant{pointer-events:none}.kerusi-seat__occupant--selected{opacity:.2}.kerusi-seat__occupant--booked{opacity:.55}.kerusi-seat__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-seat--selected .kerusi-seat__label{font-weight:600}.kerusi-seat:focus-visible .kerusi-seat__box{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5;paint-order:stroke}.kerusi-element__void{stroke-width:1;stroke-dasharray:4 3;opacity:.7}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiSectionComponent, isStandalone: true, selector: "g[kerusi-section]", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, focusedSeatId: { classPropertyName: "focusedSeatId", publicName: "focusedSeatId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", 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 }, seatTypeStyles: { classPropertyName: "seatTypeStyles", publicName: "seatTypeStyles", isSignal: true, isRequired: false, transformFunction: null }, seatStyle: { classPropertyName: "seatStyle", publicName: "seatStyle", isSignal: true, isRequired: false, transformFunction: null }, seatTemplate: { classPropertyName: "seatTemplate", publicName: "seatTemplate", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { seatActivate: "seatActivate", seatFocused: "seatFocused", seatKeydown: "seatKeydown" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label() ?? layout().section.id", "attr.data-section-id": "layout().section.id" }, classAttribute: "kerusi-section" }, ngImport: i0, template: "<!-- Hidden from assistive technology: the group already carries the same text\n     as its accessible name. -->\n@if (drawsLabel()) {\n  <svg:text\n    class=\"kerusi-section-label\"\n    aria-hidden=\"true\"\n    text-anchor=\"start\"\n    dominant-baseline=\"hanging\"\n    [attr.x]=\"layout().labelAnchor.x\"\n    [attr.y]=\"layout().labelAnchor.y\"\n    [attr.font-size]=\"layout().labelAnchor.fontSize\"\n    [style.fill]=\"labelFill()\"\n  >\n    {{ label() }}\n  </svg:text>\n}\n\n<!-- Elements first, so a screen or stage sits behind the seats it faces. -->\n@for (placed of layout().elements; track placed.element.id) {\n  @if (drawsElement(placed)) {\n    <svg:g\n      class=\"kerusi-element kerusi-element--{{ placed.element.kind }}\"\n      [attr.transform]=\"transform(placed)\"\n    >\n      @switch (style(placed).shape) {\n        @case ('screen') {\n          <svg:path [attr.d]=\"screenPathOf(placed)\" [style.fill]=\"elementFillOf(placed)\" />\n        }\n        @case ('text') {}\n        @case ('void') {\n          <svg:rect\n            class=\"kerusi-element__void\"\n            [attr.x]=\"placed.x\"\n            [attr.y]=\"placed.y\"\n            [attr.width]=\"placed.width\"\n            [attr.height]=\"placed.height\"\n            [style.stroke]=\"elementTextFillOf(placed)\"\n            fill=\"none\"\n          />\n        }\n        @default {\n          <svg:rect\n            [attr.x]=\"placed.x\"\n            [attr.y]=\"placed.y\"\n            [attr.width]=\"placed.width\"\n            [attr.height]=\"placed.height\"\n            [attr.rx]=\"radiusOf(placed)\"\n            [style.fill]=\"elementFillOf(placed)\"\n          />\n        }\n      }\n      @if (placed.element.label && style(placed).showLabel) {\n        <svg:text\n          class=\"kerusi-element__label\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"central\"\n          [attr.x]=\"placed.centerX\"\n          [attr.y]=\"placed.centerY\"\n          [attr.font-size]=\"placed.fontSize\"\n          [style.fill]=\"elementTextFillOf(placed)\"\n          [attr.transform]=\"labelTransform(placed)\"\n        >\n          {{ placed.element.label }}\n        </svg:text>\n      }\n    </svg:g>\n  }\n}\n\n<!-- The stock seat drawing. A template rather than inline markup so that a\n     custom seat template can render it too, as `defaultContent`. Its `svg:`\n     prefixes create its elements in the SVG namespace wherever it is stamped. -->\n<ng-template #stockSeat let-seat>\n  @let glyph = seat.glyph;\n  <!-- Tapered toward the back, square at the front, so which way the seat\n       faces is legible from the outline alone. -->\n  <svg:path class=\"kerusi-seat__box\" [attr.d]=\"glyph.body.d\" [style.fill]=\"glyph.body.fill\" />\n  @if (glyph.wash; as wash) {\n    <!-- Colour stays the seat type's; a taken seat recedes under a wash\n         instead, so the type colour still reads on a busy map. -->\n    <svg:path class=\"kerusi-seat__wash\" [attr.d]=\"wash.d\" [style.fill]=\"wash.fill\" />\n  }\n  @if (glyph.core; as core) {\n    <!-- Selection is the one state drawn from two tones: the body above is\n         the frame, this is the bright core inside it. Whichever way the\n         host page is themed, one of the two separates from it \u2014 which is\n         why nothing here has to know about the page. -->\n    <svg:path class=\"kerusi-seat__core\" [attr.d]=\"core.d\" [style.fill]=\"core.fill\" />\n  }\n  @if (glyph.occupant; as occupant) {\n    <!-- Deliberately not counter-rotated: the occupant leans with the\n         seat. Solid = settled (yours, or sold); hollow = a hold still in\n         progress. -->\n    <svg:path\n      class=\"kerusi-seat__occupant kerusi-seat__occupant--{{ occupant.variant }}\"\n      [attr.d]=\"occupant.d\"\n      [attr.stroke-width]=\"occupant.strokeWidth\"\n      [style.fill]=\"occupant.fill\"\n      [style.stroke]=\"occupant.stroke\"\n    />\n  }\n  <!-- The halo colour and width are bound here rather than in the\n       stylesheet: a CSS `var(--kerusi-selected-fg, \u2026)` rule would carry\n       the library default as its fallback and skip the [colors] tier. -->\n  <svg:text\n    class=\"kerusi-seat__label\"\n    text-anchor=\"middle\"\n    dominant-baseline=\"central\"\n    [attr.x]=\"glyph.label.x\"\n    [attr.y]=\"glyph.label.y\"\n    [attr.font-size]=\"glyph.label.fontSize\"\n    [style.fill]=\"glyph.label.fill\"\n    [style.stroke]=\"glyph.label.halo\"\n    [attr.stroke-width]=\"glyph.label.haloWidth\"\n    [attr.transform]=\"glyph.label.transform\"\n  >\n    {{ glyph.label.text }}\n  </svg:text>\n  @if (glyph.wheelchair; as wheelchair) {\n    <!-- A corner marker, not a different fill: availability owns the fill. -->\n    <svg:circle\n      class=\"kerusi-seat__wheelchair\"\n      [attr.cx]=\"wheelchair.cx\"\n      [attr.cy]=\"wheelchair.cy\"\n      [attr.r]=\"wheelchair.r\"\n      [style.fill]=\"wheelchair.fill\"\n    />\n  }\n</ng-template>\n\n@for (entry of seats(); track entry.placed.seat.id) {\n  @let placed = entry.placed;\n  @let glyph = entry.glyph;\n  @let ctx =\n    {\n      placed: placed,\n      seat: placed.seat,\n      selected: entry.selected,\n      glyph: glyph,\n      defaultContent: stockSeat,\n    };\n  <svg:g\n    [class]=\"glyph.className\"\n    role=\"button\"\n    [attr.tabindex]=\"tabIndex(placed)\"\n    [attr.aria-label]=\"ariaLabel(placed)\"\n    [attr.aria-pressed]=\"entry.selected\"\n    [attr.aria-disabled]=\"!placed.seat.selectable\"\n    [attr.data-seat-id]=\"placed.seat.id\"\n    [attr.data-seat-type]=\"glyph.data.type\"\n    [attr.data-seat-status]=\"glyph.data.status\"\n    [attr.data-section-id]=\"glyph.data.section\"\n    [attr.data-seat-row]=\"glyph.data.row\"\n    [attr.data-seat-attributes]=\"glyph.data.attributes\"\n    [attr.transform]=\"transform(placed)\"\n    (click)=\"onSeatClick(placed)\"\n    (focus)=\"onSeatFocus(placed)\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @if (seatTemplate(); as custom) {\n      <ng-container *ngTemplateOutlet=\"custom; context: { $implicit: ctx }\" />\n      <!-- Drawn over the custom content, because that content may have no\n           .kerusi-seat__box for the stock focus ring to stroke. Only visible\n           on :focus-visible. -->\n      <svg:path class=\"kerusi-seat__focus\" [attr.d]=\"glyph.body.d\" />\n    } @else {\n      <ng-container *ngTemplateOutlet=\"stockSeat; context: { $implicit: ctx }\" />\n    }\n  </svg:g>\n}\n", styles: [".kerusi-section-label{font-family:inherit;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.kerusi-seat{cursor:pointer;outline:none}.kerusi-seat--unselectable{cursor:not-allowed}.kerusi-seat__label,.kerusi-element__label{pointer-events:none;-webkit-user-select:none;user-select:none;font-family:inherit}.kerusi-seat__label{paint-order:stroke;stroke-linejoin:round}.kerusi-seat__wash{pointer-events:none;opacity:.5}.kerusi-seat__core,.kerusi-seat__occupant{pointer-events:none}.kerusi-seat__occupant--selected{opacity:.2}.kerusi-seat__occupant--booked{opacity:.55}.kerusi-seat__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-seat--selected .kerusi-seat__label{font-weight:600}.kerusi-seat:focus-visible .kerusi-seat__box{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5;paint-order:stroke}.kerusi-seat__focus{fill:none;stroke:none;pointer-events:none}.kerusi-seat:focus-visible .kerusi-seat__focus{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5}.kerusi-element__void{stroke-width:1;stroke-dasharray:4 3;opacity:.7}\n"], dependencies: [{ 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: KerusiSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kerusi-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  class=\"kerusi-section-svg\"\r\n  role=\"presentation\"\r\n  focusable=\"false\"\r\n  [style.--kerusi-focus-ring-input]=\"colors().focusRing\"\r\n  [attr.viewBox]=\"viewBox()\"\r\n  [style.max-width.px]=\"naturalWidth()\"\r\n  preserveAspectRatio=\"xMidYMid meet\"\r\n>\r\n  <rect\r\n    x=\"0\"\r\n    y=\"0\"\r\n    [attr.width]=\"layout().width\"\r\n    [attr.height]=\"layout().height\"\r\n    [style.fill]=\"backdrop()\"\r\n  />\r\n\r\n  <!-- Elements first, so a screen or stage sits behind the seats it faces. -->\r\n  @for (placed of layout().elements; track placed.element.id) {\r\n    @if (drawsElement(placed)) {\r\n      <g\r\n        class=\"kerusi-element kerusi-element--{{ placed.element.kind }}\"\r\n        [attr.transform]=\"transform(placed)\"\r\n      >\r\n        @switch (style(placed).shape) {\r\n          @case ('screen') {\r\n            <path [attr.d]=\"screenPathOf(placed)\" [style.fill]=\"elementFillOf(placed)\" />\r\n          }\r\n          @case ('text') {}\r\n          @case ('void') {\r\n            <rect\r\n              class=\"kerusi-element__void\"\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [style.stroke]=\"elementTextFillOf(placed)\"\r\n              fill=\"none\"\r\n            />\r\n          }\r\n          @default {\r\n            <rect\r\n              [attr.x]=\"placed.x\"\r\n              [attr.y]=\"placed.y\"\r\n              [attr.width]=\"placed.width\"\r\n              [attr.height]=\"placed.height\"\r\n              [attr.rx]=\"radiusOf(placed)\"\r\n              [style.fill]=\"elementFillOf(placed)\"\r\n            />\r\n          }\r\n        }\r\n        @if (placed.element.label && style(placed).showLabel) {\r\n          <text\r\n            class=\"kerusi-element__label\"\r\n            text-anchor=\"middle\"\r\n            dominant-baseline=\"central\"\r\n            [attr.x]=\"placed.centerX\"\r\n            [attr.y]=\"placed.centerY\"\r\n            [attr.font-size]=\"placed.fontSize\"\r\n            [style.fill]=\"elementTextFillOf(placed)\"\r\n            [attr.transform]=\"labelTransform(placed)\"\r\n          >\r\n            {{ placed.element.label }}\r\n          </text>\r\n        }\r\n      </g>\r\n    }\r\n  }\r\n\r\n  @for (placed of layout().seats; track placed.seat.id) {\r\n    <g\r\n      [class]=\"seatClasses(placed)\"\r\n      role=\"button\"\r\n      [attr.tabindex]=\"tabIndex(placed)\"\r\n      [attr.aria-label]=\"ariaLabel(placed)\"\r\n      [attr.aria-pressed]=\"isSelected(placed)\"\r\n      [attr.aria-disabled]=\"!placed.seat.selectable\"\r\n      [attr.data-seat-id]=\"placed.seat.id\"\r\n      [attr.transform]=\"transform(placed)\"\r\n      (click)=\"onSeatClick(placed)\"\r\n      (focus)=\"onSeatFocus(placed)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      @let variant = occupantVariant(placed);\r\n      <!-- Tapered toward the back, square at the front, so which way the seat\r\n           faces is legible from the outline alone. -->\r\n      <path class=\"kerusi-seat__box\" [attr.d]=\"bodyPath(placed)\" [style.fill]=\"fill(placed)\" />\r\n      @if (variant === 'held' || variant === 'booked') {\r\n        <!-- Colour stays the seat type's; a taken seat recedes under a wash\r\n             instead, so the type colour still reads on a busy map. -->\r\n        <path\r\n          class=\"kerusi-seat__wash\"\r\n          [attr.d]=\"bodyPath(placed)\"\r\n          [style.fill]=\"washFill(placed)\"\r\n        />\r\n      }\r\n      @if (variant === 'selected') {\r\n        <!-- Selection is the one state drawn from two tones: the body above is\r\n             the frame, this is the bright core inside it. Whichever way the\r\n             host page is themed, one of the two separates from it \u2014 which is\r\n             why nothing here has to know about the page. -->\r\n        <path class=\"kerusi-seat__core\" [attr.d]=\"corePath(placed)\" [style.fill]=\"coreFill()\" />\r\n      }\r\n      @if (variant) {\r\n        <!-- Deliberately not counter-rotated: the occupant leans with the\r\n             seat. Solid = settled (yours, or sold); hollow = a hold still in\r\n             progress. -->\r\n        <path\r\n          class=\"kerusi-seat__occupant kerusi-seat__occupant--{{ variant }}\"\r\n          [attr.d]=\"occupantPath(placed)\"\r\n          [attr.stroke-width]=\"occupantStroke(placed)\"\r\n          [style.fill]=\"occupantFill(variant)\"\r\n          [style.stroke]=\"occupantStrokeColor(variant)\"\r\n        />\r\n      }\r\n      <text\r\n        class=\"kerusi-seat__label\"\r\n        text-anchor=\"middle\"\r\n        dominant-baseline=\"central\"\r\n        [attr.x]=\"placed.centerX\"\r\n        [attr.y]=\"placed.centerY\"\r\n        [attr.font-size]=\"placed.fontSize\"\r\n        [style.fill]=\"textFill(placed)\"\r\n        [style.stroke]=\"labelHalo(placed)\"\r\n        [attr.stroke-width]=\"labelHaloWidth(placed)\"\r\n        [attr.transform]=\"counterRotate(placed)\"\r\n      >\r\n        {{ placed.seat.label }}\r\n      </text>\r\n      @if (placed.seat.accessibility?.wheelchairAccessible) {\r\n        <!-- A corner marker, not a different fill: availability owns the fill. -->\r\n        <circle\r\n          class=\"kerusi-seat__wheelchair\"\r\n          [attr.cx]=\"wheelchairCx(placed)\"\r\n          [attr.cy]=\"wheelchairCy(placed)\"\r\n          [attr.r]=\"wheelchairRadius(placed)\"\r\n          [style.fill]=\"textFill(placed)\"\r\n        />\r\n      }\r\n    </g>\r\n  }\r\n</svg>\r\n", styles: [":host{display:block}.kerusi-section-svg{display:block;width:100%;height:auto;max-width:100%}.kerusi-seat{cursor:pointer;outline:none}.kerusi-seat--unselectable{cursor:not-allowed}.kerusi-seat__label,.kerusi-element__label{pointer-events:none;-webkit-user-select:none;user-select:none;font-family:inherit}.kerusi-seat__label{paint-order:stroke;stroke-linejoin:round}.kerusi-seat__wash{pointer-events:none;opacity:.5}.kerusi-seat__core,.kerusi-seat__occupant{pointer-events:none}.kerusi-seat__occupant--selected{opacity:.2}.kerusi-seat__occupant--booked{opacity:.55}.kerusi-seat__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-seat--selected .kerusi-seat__label{font-weight:600}.kerusi-seat:focus-visible .kerusi-seat__box{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5;paint-order:stroke}.kerusi-element__void{stroke-width:1;stroke-dasharray:4 3;opacity:.7}\n"] }]
-        }], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], focusedSeatId: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedSeatId", required: false }] }], ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], unitScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitScale", required: false }] }], seatActivate: [{ type: i0.Output, args: ["seatActivate"] }], seatFocused: [{ type: i0.Output, args: ["seatFocused"] }], seatKeydown: [{ type: i0.Output, args: ["seatKeydown"] }] } });
+            args: [{ selector: 'g[kerusi-section]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: {
+                        class: 'kerusi-section',
+                        role: 'group',
+                        '[attr.aria-label]': 'label() ?? layout().section.id',
+                        '[attr.data-section-id]': 'layout().section.id',
+                    }, template: "<!-- Hidden from assistive technology: the group already carries the same text\n     as its accessible name. -->\n@if (drawsLabel()) {\n  <svg:text\n    class=\"kerusi-section-label\"\n    aria-hidden=\"true\"\n    text-anchor=\"start\"\n    dominant-baseline=\"hanging\"\n    [attr.x]=\"layout().labelAnchor.x\"\n    [attr.y]=\"layout().labelAnchor.y\"\n    [attr.font-size]=\"layout().labelAnchor.fontSize\"\n    [style.fill]=\"labelFill()\"\n  >\n    {{ label() }}\n  </svg:text>\n}\n\n<!-- Elements first, so a screen or stage sits behind the seats it faces. -->\n@for (placed of layout().elements; track placed.element.id) {\n  @if (drawsElement(placed)) {\n    <svg:g\n      class=\"kerusi-element kerusi-element--{{ placed.element.kind }}\"\n      [attr.transform]=\"transform(placed)\"\n    >\n      @switch (style(placed).shape) {\n        @case ('screen') {\n          <svg:path [attr.d]=\"screenPathOf(placed)\" [style.fill]=\"elementFillOf(placed)\" />\n        }\n        @case ('text') {}\n        @case ('void') {\n          <svg:rect\n            class=\"kerusi-element__void\"\n            [attr.x]=\"placed.x\"\n            [attr.y]=\"placed.y\"\n            [attr.width]=\"placed.width\"\n            [attr.height]=\"placed.height\"\n            [style.stroke]=\"elementTextFillOf(placed)\"\n            fill=\"none\"\n          />\n        }\n        @default {\n          <svg:rect\n            [attr.x]=\"placed.x\"\n            [attr.y]=\"placed.y\"\n            [attr.width]=\"placed.width\"\n            [attr.height]=\"placed.height\"\n            [attr.rx]=\"radiusOf(placed)\"\n            [style.fill]=\"elementFillOf(placed)\"\n          />\n        }\n      }\n      @if (placed.element.label && style(placed).showLabel) {\n        <svg:text\n          class=\"kerusi-element__label\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"central\"\n          [attr.x]=\"placed.centerX\"\n          [attr.y]=\"placed.centerY\"\n          [attr.font-size]=\"placed.fontSize\"\n          [style.fill]=\"elementTextFillOf(placed)\"\n          [attr.transform]=\"labelTransform(placed)\"\n        >\n          {{ placed.element.label }}\n        </svg:text>\n      }\n    </svg:g>\n  }\n}\n\n<!-- The stock seat drawing. A template rather than inline markup so that a\n     custom seat template can render it too, as `defaultContent`. Its `svg:`\n     prefixes create its elements in the SVG namespace wherever it is stamped. -->\n<ng-template #stockSeat let-seat>\n  @let glyph = seat.glyph;\n  <!-- Tapered toward the back, square at the front, so which way the seat\n       faces is legible from the outline alone. -->\n  <svg:path class=\"kerusi-seat__box\" [attr.d]=\"glyph.body.d\" [style.fill]=\"glyph.body.fill\" />\n  @if (glyph.wash; as wash) {\n    <!-- Colour stays the seat type's; a taken seat recedes under a wash\n         instead, so the type colour still reads on a busy map. -->\n    <svg:path class=\"kerusi-seat__wash\" [attr.d]=\"wash.d\" [style.fill]=\"wash.fill\" />\n  }\n  @if (glyph.core; as core) {\n    <!-- Selection is the one state drawn from two tones: the body above is\n         the frame, this is the bright core inside it. Whichever way the\n         host page is themed, one of the two separates from it \u2014 which is\n         why nothing here has to know about the page. -->\n    <svg:path class=\"kerusi-seat__core\" [attr.d]=\"core.d\" [style.fill]=\"core.fill\" />\n  }\n  @if (glyph.occupant; as occupant) {\n    <!-- Deliberately not counter-rotated: the occupant leans with the\n         seat. Solid = settled (yours, or sold); hollow = a hold still in\n         progress. -->\n    <svg:path\n      class=\"kerusi-seat__occupant kerusi-seat__occupant--{{ occupant.variant }}\"\n      [attr.d]=\"occupant.d\"\n      [attr.stroke-width]=\"occupant.strokeWidth\"\n      [style.fill]=\"occupant.fill\"\n      [style.stroke]=\"occupant.stroke\"\n    />\n  }\n  <!-- The halo colour and width are bound here rather than in the\n       stylesheet: a CSS `var(--kerusi-selected-fg, \u2026)` rule would carry\n       the library default as its fallback and skip the [colors] tier. -->\n  <svg:text\n    class=\"kerusi-seat__label\"\n    text-anchor=\"middle\"\n    dominant-baseline=\"central\"\n    [attr.x]=\"glyph.label.x\"\n    [attr.y]=\"glyph.label.y\"\n    [attr.font-size]=\"glyph.label.fontSize\"\n    [style.fill]=\"glyph.label.fill\"\n    [style.stroke]=\"glyph.label.halo\"\n    [attr.stroke-width]=\"glyph.label.haloWidth\"\n    [attr.transform]=\"glyph.label.transform\"\n  >\n    {{ glyph.label.text }}\n  </svg:text>\n  @if (glyph.wheelchair; as wheelchair) {\n    <!-- A corner marker, not a different fill: availability owns the fill. -->\n    <svg:circle\n      class=\"kerusi-seat__wheelchair\"\n      [attr.cx]=\"wheelchair.cx\"\n      [attr.cy]=\"wheelchair.cy\"\n      [attr.r]=\"wheelchair.r\"\n      [style.fill]=\"wheelchair.fill\"\n    />\n  }\n</ng-template>\n\n@for (entry of seats(); track entry.placed.seat.id) {\n  @let placed = entry.placed;\n  @let glyph = entry.glyph;\n  @let ctx =\n    {\n      placed: placed,\n      seat: placed.seat,\n      selected: entry.selected,\n      glyph: glyph,\n      defaultContent: stockSeat,\n    };\n  <svg:g\n    [class]=\"glyph.className\"\n    role=\"button\"\n    [attr.tabindex]=\"tabIndex(placed)\"\n    [attr.aria-label]=\"ariaLabel(placed)\"\n    [attr.aria-pressed]=\"entry.selected\"\n    [attr.aria-disabled]=\"!placed.seat.selectable\"\n    [attr.data-seat-id]=\"placed.seat.id\"\n    [attr.data-seat-type]=\"glyph.data.type\"\n    [attr.data-seat-status]=\"glyph.data.status\"\n    [attr.data-section-id]=\"glyph.data.section\"\n    [attr.data-seat-row]=\"glyph.data.row\"\n    [attr.data-seat-attributes]=\"glyph.data.attributes\"\n    [attr.transform]=\"transform(placed)\"\n    (click)=\"onSeatClick(placed)\"\n    (focus)=\"onSeatFocus(placed)\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @if (seatTemplate(); as custom) {\n      <ng-container *ngTemplateOutlet=\"custom; context: { $implicit: ctx }\" />\n      <!-- Drawn over the custom content, because that content may have no\n           .kerusi-seat__box for the stock focus ring to stroke. Only visible\n           on :focus-visible. -->\n      <svg:path class=\"kerusi-seat__focus\" [attr.d]=\"glyph.body.d\" />\n    } @else {\n      <ng-container *ngTemplateOutlet=\"stockSeat; context: { $implicit: ctx }\" />\n    }\n  </svg:g>\n}\n", styles: [".kerusi-section-label{font-family:inherit;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75;pointer-events:none;-webkit-user-select:none;user-select:none}.kerusi-seat{cursor:pointer;outline:none}.kerusi-seat--unselectable{cursor:not-allowed}.kerusi-seat__label,.kerusi-element__label{pointer-events:none;-webkit-user-select:none;user-select:none;font-family:inherit}.kerusi-seat__label{paint-order:stroke;stroke-linejoin:round}.kerusi-seat__wash{pointer-events:none;opacity:.5}.kerusi-seat__core,.kerusi-seat__occupant{pointer-events:none}.kerusi-seat__occupant--selected{opacity:.2}.kerusi-seat__occupant--booked{opacity:.55}.kerusi-seat__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-seat--selected .kerusi-seat__label{font-weight:600}.kerusi-seat:focus-visible .kerusi-seat__box{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5;paint-order:stroke}.kerusi-seat__focus{fill:none;stroke:none;pointer-events:none}.kerusi-seat:focus-visible .kerusi-seat__focus{stroke:var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));stroke-width:2.5}.kerusi-element__void{stroke-width:1;stroke-dasharray:4 3;opacity:.7}\n"] }]
+        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], focusedSeatId: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedSeatId", required: false }] }], ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], seatTypeStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatTypeStyles", required: false }] }], seatStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatStyle", required: false }] }], seatTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatTemplate", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], seatActivate: [{ type: i0.Output, args: ["seatActivate"] }], seatFocused: [{ type: i0.Output, args: ["seatFocused"] }], seatKeydown: [{ type: i0.Output, args: ["seatKeydown"] }] } });
 
 /**
  * A key for a seat map: its seat types on one side, its availability states on
@@ -269,6 +181,9 @@ class KerusiLegendComponent {
     /** Whether an available seat takes its type color — mirrors the seatmap input. */
     typeColors = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "typeColors" }] : /* istanbul ignore next */ []));
+    /** Mirrors the seatmap input: a type's style is what its swatch shows. */
+    seatTypeStyles = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatTypeStyles" }] : /* istanbul ignore next */ []));
     showPrices = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showPrices" }] : /* istanbul ignore next */ []));
     /** Hide types no seat in the rendered map actually uses. */
@@ -302,13 +217,17 @@ class KerusiLegendComponent {
         ];
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
+    // Same token and fallback as an available seat of the type, so a rule that
+    // sets `--kerusi-seat-fill` on the seats and the legend items keeps them in step.
     swatch(entry) {
-        return (this.typeColors() && entry.color) || cssVar('availableBg', this.colors().availableBg);
+        return legendSwatchFill(entry, this.colors(), this.typeColors(), this.seatTypeStyles()?.[entry.id]);
+    }
+    /** The swatch outline for a type styled with its own shape; `undefined` keeps the square. */
+    typeShape(entry) {
+        return legendSwatchPath(this.seatTypeStyles()?.[entry.id], this.glyphSize);
     }
     swatchText(entry) {
-        const typeColor = this.typeColors() && entry.color;
-        // Mirrors `seatTextFill`: only a document-supplied color needs guessing at.
-        return typeColor ? readableOn(typeColor) : cssVar('availableFg', this.colors().availableFg);
+        return legendSwatchText(entry, this.colors(), this.typeColors(), this.seatTypeStyles()?.[entry.id]);
     }
     // --- status swatches -------------------------------------------------------
     //
@@ -356,19 +275,53 @@ class KerusiLegendComponent {
         return entry.price ? formatMoney(entry.price, this.locale()) : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiLegendComponent, isStandalone: true, selector: "kerusi-legend", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", 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 }, showPrices: { classPropertyName: "showPrices", publicName: "showPrices", isSignal: true, isRequired: false, transformFunction: null }, hideUnusedTypes: { classPropertyName: "hideUnusedTypes", publicName: "hideUnusedTypes", isSignal: true, isRequired: false, transformFunction: null }, headingSeatTypes: { classPropertyName: "headingSeatTypes", publicName: "headingSeatTypes", isSignal: true, isRequired: false, transformFunction: null }, headingAvailability: { classPropertyName: "headingAvailability", publicName: "headingAvailability", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kerusi-legend\">\r\n  @if (types().length) {\r\n    <div class=\"kerusi-legend__block\">\r\n      <h4 class=\"kerusi-legend__heading\">{{ headingSeatTypes() }}</h4>\r\n      <ul class=\"kerusi-legend__list\">\r\n        @for (entry of types(); track entry.id) {\r\n          <li class=\"kerusi-legend__item\">\r\n            <span\r\n              class=\"kerusi-legend__swatch\"\r\n              aria-hidden=\"true\"\r\n              [style.background]=\"swatch(entry)\"\r\n              [style.color]=\"swatchText(entry)\"\r\n            ></span>\r\n            <span class=\"kerusi-legend__label\">{{ entry.label }}</span>\r\n            @if (showPrices() && price(entry)) {\r\n              <span class=\"kerusi-legend__price\">{{ price(entry) }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"kerusi-legend__block\">\r\n    <h4 class=\"kerusi-legend__heading\">{{ headingAvailability() }}</h4>\r\n    <ul class=\"kerusi-legend__list\">\r\n      @for (status of statuses(); track status.key) {\r\n        <li class=\"kerusi-legend__item\">\r\n          <!-- Shape carries status now, so every swatch draws the seat glyph\r\n               rather than a flat colour \u2014 a flat swatch would teach a cue the\r\n               map itself no longer uses. -->\r\n          <svg\r\n            class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n            [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\r\n          >\r\n            <path [attr.d]=\"glyphBody\" [style.fill]=\"status.fill\" />\r\n            @if (hasWash(status.kind)) {\r\n              <path [attr.d]=\"glyphBody\" [style.fill]=\"washFillOf(status.kind)\" opacity=\"0.5\" />\r\n            }\r\n            @if (status.kind === 'selected') {\r\n              <!-- Two tones, same as the map: the body above is the frame, this\r\n                   is the core inside it. -->\r\n              <path [attr.d]=\"glyphCore\" [style.fill]=\"coreFill()\" />\r\n            }\r\n            @if (hasOccupant(status.kind)) {\r\n              <path\r\n                [attr.d]=\"occupantPathOf(status.kind)\"\r\n                class=\"kerusi-legend__occupant kerusi-legend__occupant--{{ status.kind }}\"\r\n                [attr.stroke-width]=\"occupantStrokeWidthOf(status.kind)\"\r\n                [style.fill]=\"occupantFillOf(status.kind)\"\r\n                [style.stroke]=\"occupantStrokeOf(status.kind)\"\r\n              />\r\n            }\r\n          </svg>\r\n          <span class=\"kerusi-legend__label\">{{ status.label }}</span>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-legend{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem}.kerusi-legend__block{display:flex;flex-direction:column;gap:.4rem;min-width:0}.kerusi-legend__heading{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.65}.kerusi-legend__list{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:0;list-style:none}.kerusi-legend__item{display:inline-flex;align-items:center;gap:.4rem}.kerusi-legend__swatch{display:inline-block;flex:none;width:.85rem;height:.85rem;border-radius:3px}.kerusi-legend__swatch--glyph{border-radius:0;overflow:visible}.kerusi-legend__occupant--selected{opacity:.2}.kerusi-legend__occupant--booked{opacity:.55}.kerusi-legend__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-legend__price{opacity:.7;font-variant-numeric:tabular-nums}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiLegendComponent, isStandalone: true, selector: "kerusi-legend", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", 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 }, seatTypeStyles: { classPropertyName: "seatTypeStyles", publicName: "seatTypeStyles", isSignal: true, isRequired: false, transformFunction: null }, showPrices: { classPropertyName: "showPrices", publicName: "showPrices", isSignal: true, isRequired: false, transformFunction: null }, hideUnusedTypes: { classPropertyName: "hideUnusedTypes", publicName: "hideUnusedTypes", isSignal: true, isRequired: false, transformFunction: null }, headingSeatTypes: { classPropertyName: "headingSeatTypes", publicName: "headingSeatTypes", isSignal: true, isRequired: false, transformFunction: null }, headingAvailability: { classPropertyName: "headingAvailability", publicName: "headingAvailability", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kerusi-legend\">\n  @if (types().length) {\n    <div class=\"kerusi-legend__block\">\n      <h4 class=\"kerusi-legend__heading\">{{ headingSeatTypes() }}</h4>\n      <ul class=\"kerusi-legend__list\">\n        @for (entry of types(); track entry.id) {\n          <li class=\"kerusi-legend__item\" [attr.data-seat-type]=\"entry.id\">\n            @if (typeShape(entry); as d) {\n              <!-- A type styled with its own shape keys that shape, not a square. -->\n              <svg\n                class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n                [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\n              >\n                <path [attr.d]=\"d\" [style.fill]=\"swatch(entry)\" />\n              </svg>\n            } @else {\n              <span\n                class=\"kerusi-legend__swatch\"\n                aria-hidden=\"true\"\n                [style.background]=\"swatch(entry)\"\n                [style.color]=\"swatchText(entry)\"\n              ></span>\n            }\n            <span class=\"kerusi-legend__label\">{{ entry.label }}</span>\n            @if (showPrices() && price(entry)) {\n              <span class=\"kerusi-legend__price\">{{ price(entry) }}</span>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <div class=\"kerusi-legend__block\">\n    <h4 class=\"kerusi-legend__heading\">{{ headingAvailability() }}</h4>\n    <ul class=\"kerusi-legend__list\">\n      @for (status of statuses(); track status.key) {\n        <li class=\"kerusi-legend__item\">\n          <!-- Shape carries status now, so every swatch draws the seat glyph\n               rather than a flat colour \u2014 a flat swatch would teach a cue the\n               map itself no longer uses. -->\n          <svg\n            class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n            [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\n          >\n            <path [attr.d]=\"glyphBody\" [style.fill]=\"status.fill\" />\n            @if (hasWash(status.kind)) {\n              <path [attr.d]=\"glyphBody\" [style.fill]=\"washFillOf(status.kind)\" opacity=\"0.5\" />\n            }\n            @if (status.kind === 'selected') {\n              <!-- Two tones, same as the map: the body above is the frame, this\n                   is the core inside it. -->\n              <path [attr.d]=\"glyphCore\" [style.fill]=\"coreFill()\" />\n            }\n            @if (hasOccupant(status.kind)) {\n              <path\n                [attr.d]=\"occupantPathOf(status.kind)\"\n                class=\"kerusi-legend__occupant kerusi-legend__occupant--{{ status.kind }}\"\n                [attr.stroke-width]=\"occupantStrokeWidthOf(status.kind)\"\n                [style.fill]=\"occupantFillOf(status.kind)\"\n                [style.stroke]=\"occupantStrokeOf(status.kind)\"\n              />\n            }\n          </svg>\n          <span class=\"kerusi-legend__label\">{{ status.label }}</span>\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [":host{display:block}.kerusi-legend{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem}.kerusi-legend__block{display:flex;flex-direction:column;gap:.4rem;min-width:0}.kerusi-legend__heading{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.65}.kerusi-legend__list{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:0;list-style:none}.kerusi-legend__item{display:inline-flex;align-items:center;gap:.4rem}.kerusi-legend__swatch{display:inline-block;flex:none;width:.85rem;height:.85rem;border-radius:3px}.kerusi-legend__swatch--glyph{border-radius:0;overflow:visible}.kerusi-legend__occupant--selected{opacity:.2}.kerusi-legend__occupant--booked{opacity:.55}.kerusi-legend__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-legend__price{opacity:.7;font-variant-numeric:tabular-nums}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiLegendComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kerusi-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kerusi-legend\">\r\n  @if (types().length) {\r\n    <div class=\"kerusi-legend__block\">\r\n      <h4 class=\"kerusi-legend__heading\">{{ headingSeatTypes() }}</h4>\r\n      <ul class=\"kerusi-legend__list\">\r\n        @for (entry of types(); track entry.id) {\r\n          <li class=\"kerusi-legend__item\">\r\n            <span\r\n              class=\"kerusi-legend__swatch\"\r\n              aria-hidden=\"true\"\r\n              [style.background]=\"swatch(entry)\"\r\n              [style.color]=\"swatchText(entry)\"\r\n            ></span>\r\n            <span class=\"kerusi-legend__label\">{{ entry.label }}</span>\r\n            @if (showPrices() && price(entry)) {\r\n              <span class=\"kerusi-legend__price\">{{ price(entry) }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"kerusi-legend__block\">\r\n    <h4 class=\"kerusi-legend__heading\">{{ headingAvailability() }}</h4>\r\n    <ul class=\"kerusi-legend__list\">\r\n      @for (status of statuses(); track status.key) {\r\n        <li class=\"kerusi-legend__item\">\r\n          <!-- Shape carries status now, so every swatch draws the seat glyph\r\n               rather than a flat colour \u2014 a flat swatch would teach a cue the\r\n               map itself no longer uses. -->\r\n          <svg\r\n            class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n            [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\r\n          >\r\n            <path [attr.d]=\"glyphBody\" [style.fill]=\"status.fill\" />\r\n            @if (hasWash(status.kind)) {\r\n              <path [attr.d]=\"glyphBody\" [style.fill]=\"washFillOf(status.kind)\" opacity=\"0.5\" />\r\n            }\r\n            @if (status.kind === 'selected') {\r\n              <!-- Two tones, same as the map: the body above is the frame, this\r\n                   is the core inside it. -->\r\n              <path [attr.d]=\"glyphCore\" [style.fill]=\"coreFill()\" />\r\n            }\r\n            @if (hasOccupant(status.kind)) {\r\n              <path\r\n                [attr.d]=\"occupantPathOf(status.kind)\"\r\n                class=\"kerusi-legend__occupant kerusi-legend__occupant--{{ status.kind }}\"\r\n                [attr.stroke-width]=\"occupantStrokeWidthOf(status.kind)\"\r\n                [style.fill]=\"occupantFillOf(status.kind)\"\r\n                [style.stroke]=\"occupantStrokeOf(status.kind)\"\r\n              />\r\n            }\r\n          </svg>\r\n          <span class=\"kerusi-legend__label\">{{ status.label }}</span>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-legend{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem}.kerusi-legend__block{display:flex;flex-direction:column;gap:.4rem;min-width:0}.kerusi-legend__heading{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.65}.kerusi-legend__list{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:0;list-style:none}.kerusi-legend__item{display:inline-flex;align-items:center;gap:.4rem}.kerusi-legend__swatch{display:inline-block;flex:none;width:.85rem;height:.85rem;border-radius:3px}.kerusi-legend__swatch--glyph{border-radius:0;overflow:visible}.kerusi-legend__occupant--selected{opacity:.2}.kerusi-legend__occupant--booked{opacity:.55}.kerusi-legend__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-legend__price{opacity:.7;font-variant-numeric:tabular-nums}\n"] }]
-        }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], showPrices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrices", required: false }] }], hideUnusedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideUnusedTypes", required: false }] }], headingSeatTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingSeatTypes", required: false }] }], headingAvailability: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingAvailability", required: false }] }] } });
+            args: [{ selector: 'kerusi-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kerusi-legend\">\n  @if (types().length) {\n    <div class=\"kerusi-legend__block\">\n      <h4 class=\"kerusi-legend__heading\">{{ headingSeatTypes() }}</h4>\n      <ul class=\"kerusi-legend__list\">\n        @for (entry of types(); track entry.id) {\n          <li class=\"kerusi-legend__item\" [attr.data-seat-type]=\"entry.id\">\n            @if (typeShape(entry); as d) {\n              <!-- A type styled with its own shape keys that shape, not a square. -->\n              <svg\n                class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n                [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\n              >\n                <path [attr.d]=\"d\" [style.fill]=\"swatch(entry)\" />\n              </svg>\n            } @else {\n              <span\n                class=\"kerusi-legend__swatch\"\n                aria-hidden=\"true\"\n                [style.background]=\"swatch(entry)\"\n                [style.color]=\"swatchText(entry)\"\n              ></span>\n            }\n            <span class=\"kerusi-legend__label\">{{ entry.label }}</span>\n            @if (showPrices() && price(entry)) {\n              <span class=\"kerusi-legend__price\">{{ price(entry) }}</span>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <div class=\"kerusi-legend__block\">\n    <h4 class=\"kerusi-legend__heading\">{{ headingAvailability() }}</h4>\n    <ul class=\"kerusi-legend__list\">\n      @for (status of statuses(); track status.key) {\n        <li class=\"kerusi-legend__item\">\n          <!-- Shape carries status now, so every swatch draws the seat glyph\n               rather than a flat colour \u2014 a flat swatch would teach a cue the\n               map itself no longer uses. -->\n          <svg\n            class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n            [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\n          >\n            <path [attr.d]=\"glyphBody\" [style.fill]=\"status.fill\" />\n            @if (hasWash(status.kind)) {\n              <path [attr.d]=\"glyphBody\" [style.fill]=\"washFillOf(status.kind)\" opacity=\"0.5\" />\n            }\n            @if (status.kind === 'selected') {\n              <!-- Two tones, same as the map: the body above is the frame, this\n                   is the core inside it. -->\n              <path [attr.d]=\"glyphCore\" [style.fill]=\"coreFill()\" />\n            }\n            @if (hasOccupant(status.kind)) {\n              <path\n                [attr.d]=\"occupantPathOf(status.kind)\"\n                class=\"kerusi-legend__occupant kerusi-legend__occupant--{{ status.kind }}\"\n                [attr.stroke-width]=\"occupantStrokeWidthOf(status.kind)\"\n                [style.fill]=\"occupantFillOf(status.kind)\"\n                [style.stroke]=\"occupantStrokeOf(status.kind)\"\n              />\n            }\n          </svg>\n          <span class=\"kerusi-legend__label\">{{ status.label }}</span>\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [":host{display:block}.kerusi-legend{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem}.kerusi-legend__block{display:flex;flex-direction:column;gap:.4rem;min-width:0}.kerusi-legend__heading{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.65}.kerusi-legend__list{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:0;list-style:none}.kerusi-legend__item{display:inline-flex;align-items:center;gap:.4rem}.kerusi-legend__swatch{display:inline-block;flex:none;width:.85rem;height:.85rem;border-radius:3px}.kerusi-legend__swatch--glyph{border-radius:0;overflow:visible}.kerusi-legend__occupant--selected{opacity:.2}.kerusi-legend__occupant--booked{opacity:.55}.kerusi-legend__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-legend__price{opacity:.7;font-variant-numeric:tabular-nums}\n"] }]
+        }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], seatTypeStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatTypeStyles", required: false }] }], showPrices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrices", required: false }] }], hideUnusedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideUnusedTypes", required: false }] }], headingSeatTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingSeatTypes", required: false }] }], headingAvailability: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingAvailability", required: false }] }] } });
+
+/**
+ * Marks an `<ng-template>` inside `<kerusi-seatmap>` as the drawing for every
+ * seat. The library keeps each seat's `<g>`, with its role, ARIA state, tab
+ * stop, rotation and event handlers, and stamps this template inside it.
+ *
+ * The template is declared outside any `<svg>`, so Angular cannot tell its
+ * elements are SVG: prefix each one with `svg:` (`<svg:path>`, `<svg:image>`),
+ * or it is created as an unknown HTML element and draws nothing.
+ *
+ * ```html
+ * <kerusi-seatmap [map]="map">
+ *   <ng-template kerusiSeat let-seat>
+ *     <ng-container *ngTemplateOutlet="seat.defaultContent; context: { $implicit: seat }" />
+ *     <svg:circle [attr.cx]="seat.glyph.box.x" [attr.cy]="seat.glyph.box.y" r="3" />
+ *   </ng-template>
+ * </kerusi-seatmap>
+ * ```
+ */
+class KerusiSeatTemplateDirective {
+    template = inject(TemplateRef);
+    /** Types `let-seat` as a {@link SeatTemplateContext}. */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSeatTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: KerusiSeatTemplateDirective, isStandalone: true, selector: "ng-template[kerusiSeat]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSeatTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[kerusiSeat]' }]
+        }] });
 
 /**
  * Renders a Kerusi seat map.
  *
  * Takes a `KerusiMap` and its `KerusiState` directly — no adapter, no
- * intermediate row model. Each `Section` becomes its own `<svg>` with its own
- * layout mode and proportions, seats take their color from the map's legend,
+ * intermediate row model. The map is one `<svg>` whose `viewBox` is the
+ * document's canvas (§4.5), each `Section` is a group on it, every seat is
+ * drawn exactly where and as large as the document says, seats take their
+ * color from the map's legend,
  * every seat is keyboard-reachable and announced with its type, price, status
  * and §4.3.4 accessibility properties, and selection is an immutable set of
  * seat ids the caller can two-way bind.
@@ -412,21 +365,38 @@ class KerusiSeatmapComponent {
     /** Let an available seat take its `SeatType.color` (§4.7). */
     typeColors = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "typeColors" }] : /* istanbul ignore next */ []));
-    /** Grid cell edge, in viewBox units. */
-    seatSize = input(28, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "seatSize" }] : /* istanbul ignore next */ []));
-    /** Gap between grid cells, in viewBox units. */
-    seatGap = input(6, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "seatGap" }] : /* istanbul ignore next */ []));
-    /** Freeform viewBox width; height follows the section's aspect ratio. */
-    freeformBasis = input(1000, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "freeformBasis" }] : /* istanbul ignore next */ []));
     /**
-     * CSS pixels per viewBox unit. Caps each section at its natural size so a
-     * narrow section and a wide one in the same map draw seats the same size.
+     * Styles for every seat of a type, keyed by `SeatType.id`: fill, label colour
+     * and classes. Never changes a selected or blocked seat's fill. Also shown in
+     * the legend.
+     */
+    seatTypeStyles = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatTypeStyles" }] : /* istanbul ignore next */ []));
+    /**
+     * A style for one seat, laid over its `seatTypeStyles` entry; return nothing
+     * to leave a seat be. Never changes a selected or blocked seat's fill.
+     */
+    seatStyle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * A `<ng-template kerusiSeat let-seat>` placed inside the map draws the inside
+     * of every seat in place of the stock glyph. See {@link KerusiSeatTemplateDirective}.
+     */
+    seatTemplate = contentChild(KerusiSeatTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS pixels per canvas unit, at most: the map never draws wider than
+     * `canvas.width × unitScale`, and scales down to a narrower container. The
+     * document fixes every seat's size and position (§4.5); this is the only
+     * sizing control. Default `1`.
      */
     unitScale = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "unitScale" }] : /* istanbul ignore next */ []));
+    /**
+     * Draws each section's label inside the map, at the top-left of its `bounds`.
+     * Only sections that declare `bounds` get one; every section's label is its
+     * group's accessible name either way. Default `true`.
+     */
     showSectionLabels = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showSectionLabels" }] : /* istanbul ignore next */ []));
     showLegend = input(false, /* @ts-ignore */
@@ -708,24 +678,19 @@ class KerusiSeatmapComponent {
     ...(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();
-        return new Map(this.renderMap().sections.map((section) => {
-            const override = overrides[section.id] ?? {};
-            return [
-                section.id,
-                computeSectionLayout(section, {
-                    seatSize: override.seatSize ?? this.seatSize(),
-                    seatGap: this.seatGap(),
-                    freeformBasis: this.freeformBasis(),
-                    aspectRatio: override.aspectRatio,
-                    rtl: this.isRtl(),
-                }),
-            ];
-        }));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layouts" }] : /* istanbul ignore next */ []));
+    /** Every seat and element placed on the canvas, mirrored as a whole in RTL (D3). */
+    layout = computed(() => computeMapLayout(this.renderMap(), { rtl: this.isRtl() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => `0 0 ${this.layout().width} ${this.layout().height}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    /** `unitScale` CSS pixels per canvas unit, at most. */
+    naturalWidth = computed(() => this.layout().width * this.unitScale(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "naturalWidth" }] : /* istanbul ignore next */ []));
+    /** The canvas's width over its height, so a maximized map can fit the whole canvas. */
+    canvasAspect = computed(() => String(this.layout().width / this.layout().height), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasAspect" }] : /* istanbul ignore next */ []));
+    backdrop = computed(() => cssVar('backdrop', this.resolvedColors().backdrop), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
     /** Navigation graphs per section — arrows move within, Tab moves between. */
     graphs = computed(() => new Map(this.renderMap().sections.map((section) => [
         section.id,
@@ -750,15 +715,9 @@ class KerusiSeatmapComponent {
     summary = computed(() => summarizeSelection(this.renderMap(), this.selection()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
     // --- template helpers -----------------------------------------------------
-    layoutFor(section) {
-        return this.layouts().get(section.id);
-    }
     labelFor(section) {
         return this.sectionOverrides()[section.id]?.label ?? section.label;
     }
-    labelId(section) {
-        return `kerusi-section-${this.renderMap().id}-${section.id}`;
-    }
     /** The seat holding this section's tab stop. */
     focusedSeatIn(section) {
         return this.focusedSeatIds()[section.id] ?? null;
@@ -801,9 +760,9 @@ class KerusiSeatmapComponent {
         }
     }
     /**
-     * Arrow keys walk the navigation graph, which orders seats by `col` in grid
-     * and mixed sections — §4.3.1's logical adjacency — so the aisle that is a
-     * skipped column is stepped across rather than into.
+     * Arrow keys walk the navigation graph, which follows §4.3.5 adjacency:
+     * along a row by `col`, across an aisle (a skipped `col`) rather than into
+     * it, and between rows to the seat nearest on the canvas (D6).
      */
     onKeydown(section, event) {
         const seatId = event.target?.dataset?.['seatId'];
@@ -906,13 +865,40 @@ class KerusiSeatmapComponent {
     zoomOut() {
         this.stepZoom(-1);
     }
-    /** Back to fit-to-container: the map's original view. No-op unless `zoomable`. */
+    /** Back to fit-to-container: the whole canvas. No-op unless `zoomable`. */
     resetZoom() {
         const measured = this.measure();
         if (measured && this.zoomable()) {
             this.commit(fitViewport(measured.content, measured.container, this.limits()), true);
         }
     }
+    /**
+     * Zooms to one section: its declared `bounds`, or the box around its seats
+     * and elements when it declares none. No-op unless `zoomable`, or for a
+     * section that is not rendered.
+     */
+    zoomToSection(sectionId) {
+        const layout = this.layout();
+        const placed = layout.sections.find((s) => s.section.id === sectionId);
+        if (placed) {
+            this.zoomToCanvasRect(placed.bounds, layout);
+        }
+    }
+    zoomToCanvasRect(rect, canvas) {
+        const measured = this.measure();
+        if (!measured || !this.zoomable() || !(canvas.width > 0 && canvas.height > 0)) {
+            return;
+        }
+        // The map's <svg> is the content's only child and sets its height; its
+        // width can stop short of the content's (`unitScale` caps it), so the
+        // drawn width comes from the height and the canvas's proportions.
+        const drawn = {
+            width: (measured.content.height * canvas.width) / canvas.height,
+            height: measured.content.height,
+        };
+        const next = viewportForRect(canvasRectToContent(rect, canvas, drawn), measured.content, measured.container, undefined, this.limits());
+        this.commit(next, true);
+    }
     stepZoom(direction) {
         const measured = this.measure();
         if (measured && this.zoomable()) {
@@ -1142,12 +1128,12 @@ 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 }, 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 });
+    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 }, seatTypeStyles: { classPropertyName: "seatTypeStyles", publicName: "seatTypeStyles", isSignal: true, isRequired: false, transformFunction: null }, seatStyle: { classPropertyName: "seatStyle", publicName: "seatStyle", 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" }, queries: [{ propertyName: "seatTemplate", first: true, predicate: KerusiSeatTemplateDirective, descendants: true, isSignal: true }], 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\n  class=\"kerusi-seatmap\"\n  [class.kerusi-seatmap--maximized]=\"maximized()\"\n  role=\"group\"\n  [attr.aria-label]=\"mapLabel()\"\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\n  [attr.lang]=\"resolvedLocale()\"\n  [style.background]=\"maximized() ? controlColors().maximizedBackground : null\"\n  [style.color]=\"maximized() ? controlColors().maximizedColor : null\"\n  (keydown)=\"onRootKeydown($event)\"\n>\n  @if (zoomable() || maximizable()) {\n    <!-- Only when a zoom or maximize feature is on, so a plain map's markup is\n         exactly what it was before they existed. -->\n    <div class=\"kerusi-seatmap__stage\">\n      @if (showToolbar()) {\n        <div\n          class=\"kerusi-toolbar\"\n          role=\"toolbar\"\n          [attr.aria-label]=\"strings().toolbar\"\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\n        >\n          @if (zoomable() && showZoomControls()) {\n            <button\n              type=\"button\"\n              class=\"kerusi-control kerusi-control--zoom-in\"\n              [attr.aria-label]=\"strings().zoomIn\"\n              [attr.aria-disabled]=\"atMaxZoom()\"\n              [style.background]=\"controlColors().buttonBackground\"\n              [style.color]=\"controlColors().buttonColor\"\n              [style.border-color]=\"controlColors().buttonBorder\"\n              (click)=\"zoomIn()\"\n            >\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M12 5v14M5 12h14\" />\n              </svg>\n            </button>\n            <button\n              type=\"button\"\n              class=\"kerusi-control kerusi-control--zoom-out\"\n              [attr.aria-label]=\"strings().zoomOut\"\n              [attr.aria-disabled]=\"atFit()\"\n              [style.background]=\"controlColors().buttonBackground\"\n              [style.color]=\"controlColors().buttonColor\"\n              [style.border-color]=\"controlColors().buttonBorder\"\n              (click)=\"zoomOut()\"\n            >\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M5 12h14\" />\n              </svg>\n            </button>\n            <button\n              type=\"button\"\n              class=\"kerusi-control kerusi-control--zoom-reset\"\n              [attr.aria-label]=\"strings().zoomReset\"\n              [attr.aria-disabled]=\"atFit()\"\n              [style.background]=\"controlColors().buttonBackground\"\n              [style.color]=\"controlColors().buttonColor\"\n              [style.border-color]=\"controlColors().buttonBorder\"\n              (click)=\"resetZoom()\"\n            >\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v5h5\" />\n              </svg>\n            </button>\n          }\n          @if (maximizable()) {\n            <button\n              type=\"button\"\n              class=\"kerusi-control kerusi-control--maximize\"\n              [attr.aria-label]=\"maximized() ? strings().restore : strings().maximize\"\n              [style.background]=\"controlColors().buttonBackground\"\n              [style.color]=\"controlColors().buttonColor\"\n              [style.border-color]=\"controlColors().buttonBorder\"\n              (click)=\"toggleMaximized()\"\n            >\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                @if (maximized()) {\n                  <path d=\"M9 4v5H4M15 4v5h5M15 20v-5h5M9 20v-5H4\" />\n                } @else {\n                  <path d=\"M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5\" />\n                }\n              </svg>\n            </button>\n          }\n        </div>\n      }\n\n      @if (zoomable()) {\n        <div\n          #viewport\n          class=\"kerusi-viewport\"\n          role=\"group\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"strings().viewport\"\n          [style.touch-action]=\"touchAction()\"\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\n          [style.--kerusi-canvas-aspect]=\"canvasAspect()\"\n        >\n          <div\n            #content\n            class=\"kerusi-viewport__content\"\n            [class.kerusi-viewport__content--animated]=\"animated()\"\n            [style.transform]=\"transform()\"\n          >\n            <ng-container [ngTemplateOutlet]=\"drawing\" />\n          </div>\n        </div>\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"drawing\" />\n      }\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"drawing\" />\n  }\n\n  @if (showLegend()) {\n    <kerusi-legend\n      [legend]=\"renderMap().legend\"\n      [locale]=\"resolvedLocale()\"\n      [colors]=\"resolvedColors()\"\n      [typeColors]=\"typeColors()\"\n      [seatTypeStyles]=\"seatTypeStyles()\"\n      [showPrices]=\"showLegendPrices()\"\n    />\n  }\n\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\n</div>\n\n<!-- The whole map: one <svg> on the document's canvas, a group per section (D1). -->\n<ng-template #drawing>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"kerusi-seatmap__svg\"\n    role=\"presentation\"\n    focusable=\"false\"\n    [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.max-width.px]=\"naturalWidth()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n  >\n    <rect\n      x=\"0\"\n      y=\"0\"\n      [attr.width]=\"layout().width\"\n      [attr.height]=\"layout().height\"\n      [style.fill]=\"backdrop()\"\n    />\n    <!-- A hidden section's group is simply absent; the canvas keeps its size,\n         so its space stays empty (D4). -->\n    @for (placed of layout().sections; track placed.section.id) {\n      <g\n        kerusi-section\n        [layout]=\"placed\"\n        [label]=\"labelFor(placed.section)\"\n        [showLabel]=\"showSectionLabels()\"\n        [selection]=\"selectionSet()\"\n        [focusedSeatId]=\"focusedSeatIn(placed.section)\"\n        [ariaLabels]=\"ariaLabels()\"\n        [colors]=\"resolvedColors()\"\n        [typeColors]=\"typeColors()\"\n        [seatTemplate]=\"seatTemplate()?.template\"\n        [seatStyle]=\"seatStyle()\"\n        [seatTypeStyles]=\"seatTypeStyles()\"\n        [interactive]=\"interactive()\"\n        (seatActivate)=\"onSeatActivate($event)\"\n        (seatFocused)=\"onSeatFocused($event)\"\n        (seatKeydown)=\"onKeydown(placed.section, $event)\"\n      ></g>\n    }\n  </svg>\n</ng-template>\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__svg{display:block;width:100%;height:auto;max-width:100%}.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;container-type:size}.kerusi-seatmap--maximized .kerusi-viewport__content{width:min(100cqw,100cqh * var(--kerusi-canvas-aspect, 1))}\n"], dependencies: [{ kind: "component", type: KerusiSectionComponent, selector: "g[kerusi-section]", inputs: ["layout", "label", "showLabel", "selection", "focusedSeatId", "ariaLabels", "colors", "typeColors", "seatTypeStyles", "seatStyle", "seatTemplate", "interactive"], outputs: ["seatActivate", "seatFocused", "seatKeydown"] }, { kind: "component", type: KerusiLegendComponent, selector: "kerusi-legend", inputs: ["legend", "locale", "colors", "typeColors", "seatTypeStyles", "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, 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 }] }] } });
+            args: [{ selector: 'kerusi-seatmap', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KerusiSectionComponent, KerusiLegendComponent, NgTemplateOutlet], template: "<div\n  class=\"kerusi-seatmap\"\n  [class.kerusi-seatmap--maximized]=\"maximized()\"\n  role=\"group\"\n  [attr.aria-label]=\"mapLabel()\"\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\n  [attr.lang]=\"resolvedLocale()\"\n  [style.background]=\"maximized() ? controlColors().maximizedBackground : null\"\n  [style.color]=\"maximized() ? controlColors().maximizedColor : null\"\n  (keydown)=\"onRootKeydown($event)\"\n>\n  @if (zoomable() || maximizable()) {\n    <!-- Only when a zoom or maximize feature is on, so a plain map's markup is\n         exactly what it was before they existed. -->\n    <div class=\"kerusi-seatmap__stage\">\n      @if (showToolbar()) {\n        <div\n          class=\"kerusi-toolbar\"\n          role=\"toolbar\"\n          [attr.aria-label]=\"strings().toolbar\"\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\n        >\n          @if (zoomable() && showZoomControls()) {\n            <button\n              type=\"button\"\n              class=\"kerusi-control kerusi-control--zoom-in\"\n              [attr.aria-label]=\"strings().zoomIn\"\n              [attr.aria-disabled]=\"atMaxZoom()\"\n              [style.background]=\"controlColors().buttonBackground\"\n              [style.color]=\"controlColors().buttonColor\"\n              [style.border-color]=\"controlColors().buttonBorder\"\n              (click)=\"zoomIn()\"\n            >\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M12 5v14M5 12h14\" />\n              </svg>\n            </button>\n            <button\n              type=\"button\"\n              class=\"kerusi-control kerusi-control--zoom-out\"\n              [attr.aria-label]=\"strings().zoomOut\"\n              [attr.aria-disabled]=\"atFit()\"\n              [style.background]=\"controlColors().buttonBackground\"\n              [style.color]=\"controlColors().buttonColor\"\n              [style.border-color]=\"controlColors().buttonBorder\"\n              (click)=\"zoomOut()\"\n            >\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M5 12h14\" />\n              </svg>\n            </button>\n            <button\n              type=\"button\"\n              class=\"kerusi-control kerusi-control--zoom-reset\"\n              [attr.aria-label]=\"strings().zoomReset\"\n              [attr.aria-disabled]=\"atFit()\"\n              [style.background]=\"controlColors().buttonBackground\"\n              [style.color]=\"controlColors().buttonColor\"\n              [style.border-color]=\"controlColors().buttonBorder\"\n              (click)=\"resetZoom()\"\n            >\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v5h5\" />\n              </svg>\n            </button>\n          }\n          @if (maximizable()) {\n            <button\n              type=\"button\"\n              class=\"kerusi-control kerusi-control--maximize\"\n              [attr.aria-label]=\"maximized() ? strings().restore : strings().maximize\"\n              [style.background]=\"controlColors().buttonBackground\"\n              [style.color]=\"controlColors().buttonColor\"\n              [style.border-color]=\"controlColors().buttonBorder\"\n              (click)=\"toggleMaximized()\"\n            >\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                @if (maximized()) {\n                  <path d=\"M9 4v5H4M15 4v5h5M15 20v-5h5M9 20v-5H4\" />\n                } @else {\n                  <path d=\"M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5\" />\n                }\n              </svg>\n            </button>\n          }\n        </div>\n      }\n\n      @if (zoomable()) {\n        <div\n          #viewport\n          class=\"kerusi-viewport\"\n          role=\"group\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"strings().viewport\"\n          [style.touch-action]=\"touchAction()\"\n          [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\n          [style.--kerusi-canvas-aspect]=\"canvasAspect()\"\n        >\n          <div\n            #content\n            class=\"kerusi-viewport__content\"\n            [class.kerusi-viewport__content--animated]=\"animated()\"\n            [style.transform]=\"transform()\"\n          >\n            <ng-container [ngTemplateOutlet]=\"drawing\" />\n          </div>\n        </div>\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"drawing\" />\n      }\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"drawing\" />\n  }\n\n  @if (showLegend()) {\n    <kerusi-legend\n      [legend]=\"renderMap().legend\"\n      [locale]=\"resolvedLocale()\"\n      [colors]=\"resolvedColors()\"\n      [typeColors]=\"typeColors()\"\n      [seatTypeStyles]=\"seatTypeStyles()\"\n      [showPrices]=\"showLegendPrices()\"\n    />\n  }\n\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\n</div>\n\n<!-- The whole map: one <svg> on the document's canvas, a group per section (D1). -->\n<ng-template #drawing>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"kerusi-seatmap__svg\"\n    role=\"presentation\"\n    focusable=\"false\"\n    [style.--kerusi-focus-ring-input]=\"resolvedColors().focusRing\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.max-width.px]=\"naturalWidth()\"\n    preserveAspectRatio=\"xMidYMid meet\"\n  >\n    <rect\n      x=\"0\"\n      y=\"0\"\n      [attr.width]=\"layout().width\"\n      [attr.height]=\"layout().height\"\n      [style.fill]=\"backdrop()\"\n    />\n    <!-- A hidden section's group is simply absent; the canvas keeps its size,\n         so its space stays empty (D4). -->\n    @for (placed of layout().sections; track placed.section.id) {\n      <g\n        kerusi-section\n        [layout]=\"placed\"\n        [label]=\"labelFor(placed.section)\"\n        [showLabel]=\"showSectionLabels()\"\n        [selection]=\"selectionSet()\"\n        [focusedSeatId]=\"focusedSeatIn(placed.section)\"\n        [ariaLabels]=\"ariaLabels()\"\n        [colors]=\"resolvedColors()\"\n        [typeColors]=\"typeColors()\"\n        [seatTemplate]=\"seatTemplate()?.template\"\n        [seatStyle]=\"seatStyle()\"\n        [seatTypeStyles]=\"seatTypeStyles()\"\n        [interactive]=\"interactive()\"\n        (seatActivate)=\"onSeatActivate($event)\"\n        (seatFocused)=\"onSeatFocused($event)\"\n        (seatKeydown)=\"onKeydown(placed.section, $event)\"\n      ></g>\n    }\n  </svg>\n</ng-template>\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__svg{display:block;width:100%;height:auto;max-width:100%}.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;container-type:size}.kerusi-seatmap--maximized .kerusi-viewport__content{width:min(100cqw,100cqh * var(--kerusi-canvas-aspect, 1))}\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 }] }], seatTypeStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatTypeStyles", required: false }] }], seatStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatStyle", required: false }] }], seatTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KerusiSeatTemplateDirective), { isSignal: true }] }], 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) : '';
 }
@@ -1269,5 +1255,5 @@ class KerusiStateStore {
  * Generated bundle index. Do not edit.
  */
 
-export { KerusiLegendComponent, KerusiSeatmapComponent, KerusiSectionComponent, KerusiStateStore };
+export { KerusiLegendComponent, KerusiSeatTemplateDirective, KerusiSeatmapComponent, KerusiSectionComponent, KerusiStateStore };
 //# sourceMappingURL=kerusiweb-angular.mjs.map