@kerusiweb/angular 2.1.0 → 2.3.0

package/types/kerusiweb-angular.d.ts

@@ -1,7 +1,53 @@
 import * as _kerusiweb_core from '@kerusiweb/core';
-import { KerusiMap, KerusiState, KerusiSession, SeatAriaStrings, KerusiSeatmapColors, RenderSeat, DisallowedReason, KerusiViolation, RenderMap, SectionLayout, RenderSection, PlacedSeat, SeatOccupantVariant, PlacedElement, RenderLegendEntry, SequenceReader, HeldSeat, KerusiStateDelta, DeltaApplication } from '@kerusiweb/core';
+import { KerusiSeatContext, KerusiMap, KerusiState, KerusiSession, SeatAriaStrings, KerusiSeatmapColors, SeatStyleFn, RenderSeat, KerusiControlStrings, DisallowedReason, KerusiViolation, KerusiViewport, RenderMap, SectionLayout, RenderSection, PlacedSeat, PlacedElement, RenderLegendEntry, SeatOccupantVariant, SequenceReader, HeldSeat, KerusiStateDelta, DeltaApplication } from '@kerusiweb/core';
 import * as _angular_core from '@angular/core';
-import { Signal } from '@angular/core';
+import { TemplateRef, Signal } from '@angular/core';
+
+/**
+ * What a `kerusiSeat` template is handed for each seat (`let-seat`): the seat,
+ * whether it is selected, the stock glyph core resolved for it, and the stock
+ * drawing itself.
+ */
+interface SeatTemplateContext extends KerusiSeatContext {
+    /**
+     * The library's own drawing of this seat. Render it to keep the stock seat,
+     * or alongside your own marks to add to it:
+     *
+     * ```html
+     * <ng-container *ngTemplateOutlet="seat.defaultContent; context: { $implicit: seat }" />
+     * ```
+     */
+    defaultContent: TemplateRef<SeatTemplateOutletContext>;
+}
+/** The context object a seat template is stamped with. */
+interface SeatTemplateOutletContext {
+    $implicit: SeatTemplateContext;
+}
+/**
+ * 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>
+ * ```
+ */
+declare class KerusiSeatTemplateDirective {
+    readonly template: TemplateRef<SeatTemplateOutletContext>;
+    /** Types `let-seat` as a {@link SeatTemplateContext}. */
+    static ngTemplateContextGuard(_dir: KerusiSeatTemplateDirective, ctx: unknown): ctx is SeatTemplateOutletContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KerusiSeatTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KerusiSeatTemplateDirective, "ng-template[kerusiSeat]", never, {}, {}, never, never, true, never>;
+}
 
 /** How a document with validation errors is handled. */
 type ValidationMode = 
@@ -46,6 +92,11 @@ interface SeatDisallowed {
  * ```html
  * <kerusi-seatmap [map]="map" [state]="state" [(selection)]="picked" />
  * ```
+ *
+ * Two opt-in features sit on top, both off by default so an existing map is
+ * unchanged: `[zoomable]` (pinch, wheel and drag, keys `+` `-` `0`, buttons)
+ * and `[maximizable]` (a full-screen button). Their arithmetic is in
+ * `@kerusiweb/core`; this class supplies the listeners and the signals.
  */
 declare class KerusiSeatmapComponent {
     private readonly host;
@@ -64,6 +115,22 @@ declare class KerusiSeatmapComponent {
     readonly colors: _angular_core.InputSignal<KerusiSeatmapColors>;
     /** Let an available seat take its `SeatType.color` (§4.7). */
     readonly typeColors: _angular_core.InputSignal<boolean>;
+    /**
+     * 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.
+     */
+    readonly seatTypeStyles: _angular_core.InputSignal<Readonly<Record<string, _kerusiweb_core.KerusiSeatStyle>> | undefined>;
+    /**
+     * 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.
+     */
+    readonly seatStyle: _angular_core.InputSignal<SeatStyleFn | undefined>;
+    /**
+     * 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}.
+     */
+    protected readonly seatTemplate: _angular_core.Signal<KerusiSeatTemplateDirective | undefined>;
     /** Grid cell edge, in viewBox units. */
     readonly seatSize: _angular_core.InputSignal<number>;
     /** Gap between grid cells, in viewBox units. */
@@ -82,7 +149,7 @@ declare class KerusiSeatmapComponent {
     readonly sectionIds: _angular_core.InputSignal<readonly string[] | undefined>;
     readonly sectionOverrides: _angular_core.InputSignal<Readonly<Record<string, SectionRenderOptions>>>;
     /** Statuses in which a seat may be picked. Default: `['available']`. */
-    readonly selectableStatuses: _angular_core.InputSignal<readonly ("held" | "booked" | "available" | "blocked")[]>;
+    readonly selectableStatuses: _angular_core.InputSignal<readonly ("available" | "blocked" | "held" | "booked")[]>;
     /** `auto` selects a seat's companion closure together (§4.6). */
     readonly companionMode: _angular_core.InputSignal<"auto" | "independent">;
     readonly maxSelection: _angular_core.InputSignal<number | undefined>;
@@ -96,6 +163,22 @@ declare class KerusiSeatmapComponent {
      */
     readonly expireHolds: _angular_core.InputSignal<boolean>;
     readonly expiryIntervalMs: _angular_core.InputSignal<number>;
+    /**
+     * Pinch, Ctrl/Cmd + wheel and drag to zoom and pan, `+` `-` `0` on the keyboard,
+     * and on-screen buttons. A tap still selects at every zoom level.
+     */
+    readonly zoomable: _angular_core.InputSignal<boolean>;
+    /** The zoom ceiling, relative to fit-to-container. The floor is always fit. */
+    readonly maxZoom: _angular_core.InputSignal<number>;
+    /**
+     * The built-in zoom buttons. Turn this off to supply your own, anywhere on the
+     * page, and call `zoomIn()`, `zoomOut()` and `resetZoom()` on the component.
+     */
+    readonly showZoomControls: _angular_core.InputSignal<boolean>;
+    /** A button that maximizes the map to fill the screen. */
+    readonly maximizable: _angular_core.InputSignal<boolean>;
+    /** Overrides the built-in English names of the zoom and maximize controls. */
+    readonly controlStrings: _angular_core.InputSignal<Partial<KerusiControlStrings>>;
     readonly validate: _angular_core.InputSignal<ValidationMode>;
     readonly seatSelect: _angular_core.OutputEmitterRef<SeatInteraction>;
     readonly seatDeselect: _angular_core.OutputEmitterRef<SeatInteraction>;
@@ -103,6 +186,9 @@ declare class KerusiSeatmapComponent {
     readonly seatFocus: _angular_core.OutputEmitterRef<RenderSeat>;
     /** Emitted whenever the documents change, in `collect` mode. */
     readonly validationIssues: _angular_core.OutputEmitterRef<readonly KerusiViolation[]>;
+    /** The zoom and pan, whenever they change. For a host that persists or shows them. */
+    readonly viewportChange: _angular_core.OutputEmitterRef<KerusiViewport>;
+    readonly maximizedChange: _angular_core.OutputEmitterRef<boolean>;
     /**
      * The seat holding each section's tab stop, keyed by section id.
      *
@@ -114,6 +200,20 @@ declare class KerusiSeatmapComponent {
     private readonly announcement;
     /** Bumped by the hold ticker to force the state to be re-derived. */
     private readonly expiryTick;
+    private readonly viewportState;
+    private readonly maximizedState;
+    /** True for a discrete change (button, key, reveal), false while a finger or wheel drives. */
+    protected readonly animated: _angular_core.WritableSignal<boolean>;
+    private readonly viewportEl;
+    private readonly contentEl;
+    private gesture;
+    private suppressClick;
+    private gestureBase;
+    private nativeFullscreen;
+    /** The current zoom and pan. Read-only: drive it with the methods below. */
+    readonly viewport: _angular_core.Signal<KerusiViewport>;
+    /** Whether the map is currently maximized. */
+    readonly maximized: _angular_core.Signal<boolean>;
     constructor();
     protected readonly issues: _angular_core.Signal<readonly KerusiViolation[]>;
     /** The state actually rendered — with lapsed holds reverted when asked. */
@@ -123,6 +223,14 @@ declare class KerusiSeatmapComponent {
     protected readonly isRtl: _angular_core.Signal<boolean>;
     protected readonly resolvedColors: _angular_core.Signal<Required<KerusiSeatmapColors>>;
     protected readonly selectionSet: _angular_core.Signal<Set<string>>;
+    protected readonly limits: _angular_core.Signal<_kerusiweb_core.ViewportLimits>;
+    protected readonly strings: _angular_core.Signal<KerusiControlStrings>;
+    protected readonly controlColors: _angular_core.Signal<_kerusiweb_core.KerusiControlStyle>;
+    protected readonly transform: _angular_core.Signal<string>;
+    protected readonly touchAction: _angular_core.Signal<string>;
+    protected readonly showToolbar: _angular_core.Signal<boolean>;
+    protected readonly atMaxZoom: _angular_core.Signal<boolean>;
+    protected readonly atFit: _angular_core.Signal<boolean>;
     /** Placed geometry per section, keyed by section id. */
     protected readonly layouts: _angular_core.Signal<ReadonlyMap<string, SectionLayout>>;
     /** Navigation graphs per section — arrows move within, Tab moves between. */
@@ -150,16 +258,58 @@ declare class KerusiSeatmapComponent {
     /**
      * Moves the roving tab stop, then the DOM focus that follows it.
      *
+     * When zoomable, the browser's own scroll-into-view is suppressed: the map
+     * moves by transform, so `onSeatFocused` pans it into view instead.
+     */
+    private moveFocusTo;
+    /**
      * Seat ids come from the document, so they cannot be interpolated into a
      * selector unescaped — and `CSS.escape` is absent in jsdom and under SSR.
      * Scanning the rendered nodes avoids both problems.
      */
-    private moveFocusTo;
+    private seatNode;
+    /** Zooms in one step about the centre. No-op unless `zoomable`. */
+    zoomIn(): void;
+    /** Zooms out one step about the centre. No-op unless `zoomable`. */
+    zoomOut(): void;
+    /** Back to fit-to-container: the map's original view. No-op unless `zoomable`. */
+    resetZoom(): void;
+    private stepZoom;
+    /** Sizes in CSS pixels, read when needed: `offset*` ignores the zoom transform. */
+    private measure;
+    private commit;
+    private reclamp;
+    /** A point in the viewport's own coordinates, which is what the core functions take. */
+    private containerPoint;
+    /**
+     * Pans a seat that took keyboard focus into view. A click or tap also
+     * focuses the seat, but should not move the map under the finger, so only a
+     * `:focus-visible` focus counts.
+     */
+    private revealSeat;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerEnd;
+    private feedGesture;
+    private onClickCapture;
+    private onWheel;
+    private onGestureStart;
+    private onGestureChange;
+    private onGestureEnd;
+    /**
+     * `+` `-` `0` zoom, and arrows pan when the viewport itself has focus; Esc
+     * leaves a maximized map. A seat's own handler runs first, so an Esc that
+     * cleared the selection is already `defaultPrevented` and stays at that.
+     */
+    protected onRootKeydown(event: KeyboardEvent): void;
+    /** Maximizes or restores the map. Maximizing needs `maximizable`. */
+    toggleMaximized(): void;
+    setMaximized(next: boolean): void;
     private announceSelection;
     private announce;
     private visibleSectionIds;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KerusiSeatmapComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiSeatmapComponent, "kerusi-seatmap", never, { "map": { "alias": "map"; "required": true; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "session": { "alias": "session"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "rtl": { "alias": "rtl"; "required": false; "isSignal": true; }; "ariaStrings": { "alias": "ariaStrings"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "seatSize": { "alias": "seatSize"; "required": false; "isSignal": true; }; "seatGap": { "alias": "seatGap"; "required": false; "isSignal": true; }; "freeformBasis": { "alias": "freeformBasis"; "required": false; "isSignal": true; }; "unitScale": { "alias": "unitScale"; "required": false; "isSignal": true; }; "showSectionLabels": { "alias": "showSectionLabels"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showLegendPrices": { "alias": "showLegendPrices"; "required": false; "isSignal": true; }; "sectionIds": { "alias": "sectionIds"; "required": false; "isSignal": true; }; "sectionOverrides": { "alias": "sectionOverrides"; "required": false; "isSignal": true; }; "selectableStatuses": { "alias": "selectableStatuses"; "required": false; "isSignal": true; }; "companionMode": { "alias": "companionMode"; "required": false; "isSignal": true; }; "maxSelection": { "alias": "maxSelection"; "required": false; "isSignal": true; }; "seatSelectable": { "alias": "seatSelectable"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "expireHolds": { "alias": "expireHolds"; "required": false; "isSignal": true; }; "expiryIntervalMs": { "alias": "expiryIntervalMs"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "seatSelect": "seatSelect"; "seatDeselect": "seatDeselect"; "seatDisallowed": "seatDisallowed"; "seatFocus": "seatFocus"; "validationIssues": "validationIssues"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiSeatmapComponent, "kerusi-seatmap", never, { "map": { "alias": "map"; "required": true; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "session": { "alias": "session"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "rtl": { "alias": "rtl"; "required": false; "isSignal": true; }; "ariaStrings": { "alias": "ariaStrings"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "seatTypeStyles": { "alias": "seatTypeStyles"; "required": false; "isSignal": true; }; "seatStyle": { "alias": "seatStyle"; "required": false; "isSignal": true; }; "seatSize": { "alias": "seatSize"; "required": false; "isSignal": true; }; "seatGap": { "alias": "seatGap"; "required": false; "isSignal": true; }; "freeformBasis": { "alias": "freeformBasis"; "required": false; "isSignal": true; }; "unitScale": { "alias": "unitScale"; "required": false; "isSignal": true; }; "showSectionLabels": { "alias": "showSectionLabels"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showLegendPrices": { "alias": "showLegendPrices"; "required": false; "isSignal": true; }; "sectionIds": { "alias": "sectionIds"; "required": false; "isSignal": true; }; "sectionOverrides": { "alias": "sectionOverrides"; "required": false; "isSignal": true; }; "selectableStatuses": { "alias": "selectableStatuses"; "required": false; "isSignal": true; }; "companionMode": { "alias": "companionMode"; "required": false; "isSignal": true; }; "maxSelection": { "alias": "maxSelection"; "required": false; "isSignal": true; }; "seatSelectable": { "alias": "seatSelectable"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "expireHolds": { "alias": "expireHolds"; "required": false; "isSignal": true; }; "expiryIntervalMs": { "alias": "expiryIntervalMs"; "required": false; "isSignal": true; }; "zoomable": { "alias": "zoomable"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "showZoomControls": { "alias": "showZoomControls"; "required": false; "isSignal": true; }; "maximizable": { "alias": "maximizable"; "required": false; "isSignal": true; }; "controlStrings": { "alias": "controlStrings"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "seatSelect": "seatSelect"; "seatDeselect": "seatDeselect"; "seatDisallowed": "seatDisallowed"; "seatFocus": "seatFocus"; "validationIssues": "validationIssues"; "viewportChange": "viewportChange"; "maximizedChange": "maximizedChange"; }, ["seatTemplate"], never, true, never>;
 }
 
 /**
@@ -185,6 +335,12 @@ declare class KerusiSectionComponent {
     readonly colors: _angular_core.InputSignal<Required<KerusiSeatmapColors>>;
     /** Whether an available seat may take its `SeatType.color` (§4.7). */
     readonly typeColors: _angular_core.InputSignal<boolean>;
+    /** Styles for every seat of a type, keyed by `SeatType.id`. */
+    readonly seatTypeStyles: _angular_core.InputSignal<Readonly<Record<string, _kerusiweb_core.KerusiSeatStyle>> | undefined>;
+    /** A style for one seat, laid over its type's. */
+    readonly seatStyle: _angular_core.InputSignal<SeatStyleFn | undefined>;
+    /** Draws the inside of each seat in place of the stock glyph. */
+    readonly seatTemplate: _angular_core.InputSignal<TemplateRef<SeatTemplateOutletContext> | undefined>;
     /** When false, seats render but do not respond to pointer or keyboard. */
     readonly interactive: _angular_core.InputSignal<boolean>;
     /**
@@ -203,62 +359,19 @@ declare class KerusiSectionComponent {
     protected readonly viewBox: _angular_core.Signal<string>;
     /** The section's natural width in CSS pixels; it never draws wider. */
     protected readonly naturalWidth: _angular_core.Signal<number>;
-    protected isSelected(placed: PlacedSeat): boolean;
-    protected fill(placed: PlacedSeat): string;
-    protected textFill(placed: PlacedSeat): string;
-    protected backdrop(): string;
-    /** The seat's outline: square-ish front, tapered back — shape carries facing. */
-    protected bodyPath(placed: PlacedSeat): string;
-    /** `null` for an available or blocked seat — nothing to mark. */
-    protected occupantVariant(placed: PlacedSeat): SeatOccupantVariant | null;
-    /**
-     * 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.
-     */
-    private markBox;
-    /** The bright plate inside a selected seat's frame. */
-    protected corePath(placed: PlacedSeat): string;
-    protected coreFill(): string;
-    /** The dimming wash over a held or booked seat's type colour. */
-    protected washFill(placed: PlacedSeat): string;
-    /** The occupant figure for a marked seat, sized to whatever it sits on. */
-    protected occupantPath(placed: PlacedSeat): string;
-    protected occupantStroke(placed: PlacedSeat): number;
-    protected wheelchairCx(placed: PlacedSeat): number;
-    protected wheelchairCy(placed: PlacedSeat): number;
-    protected wheelchairRadius(placed: PlacedSeat): number;
     /**
-     * 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.
+     * Every seat with its glyph resolved, once per change of layout, selection or
+     * theme rather than once per binding per change detection.
      */
-    protected labelHalo(placed: PlacedSeat): string;
-    protected labelHaloWidth(placed: PlacedSeat): number;
-    /** Solid for selected/booked; `none` for held, which draws hollow instead. */
-    protected occupantFill(variant: SeatOccupantVariant): string;
-    protected occupantStrokeColor(variant: SeatOccupantVariant): string;
+    protected readonly seats: _angular_core.Signal<{
+        placed: PlacedSeat;
+        selected: boolean;
+        glyph: _kerusiweb_core.SeatGlyph;
+    }[]>;
+    protected backdrop(): string;
     /** The section's single tab stop; every other seat is reachable by arrow key. */
     protected tabIndex(placed: PlacedSeat): number;
     protected ariaLabel(placed: PlacedSeat): string;
-    protected seatClasses(placed: PlacedSeat): string;
     /** SVG rotate() about the item's center; null when it does not rotate. */
     protected transform(item: PlacedSeat | PlacedElement): string | null;
     /** Cancels the parent <g>'s rotation so the label stays upright and stays put. */
@@ -277,7 +390,7 @@ declare class KerusiSectionComponent {
     protected onSeatFocus(placed: PlacedSeat): void;
     protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KerusiSectionComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiSectionComponent, "kerusi-section", never, { "section": { "alias": "section"; "required": true; "isSignal": true; }; "layout": { "alias": "layout"; "required": true; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "focusedSeatId": { "alias": "focusedSeatId"; "required": false; "isSignal": true; }; "ariaLabels": { "alias": "ariaLabels"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "unitScale": { "alias": "unitScale"; "required": false; "isSignal": true; }; }, { "seatActivate": "seatActivate"; "seatFocused": "seatFocused"; "seatKeydown": "seatKeydown"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiSectionComponent, "kerusi-section", never, { "section": { "alias": "section"; "required": true; "isSignal": true; }; "layout": { "alias": "layout"; "required": true; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "focusedSeatId": { "alias": "focusedSeatId"; "required": false; "isSignal": true; }; "ariaLabels": { "alias": "ariaLabels"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "seatTypeStyles": { "alias": "seatTypeStyles"; "required": false; "isSignal": true; }; "seatStyle": { "alias": "seatStyle"; "required": false; "isSignal": true; }; "seatTemplate": { "alias": "seatTemplate"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "unitScale": { "alias": "unitScale"; "required": false; "isSignal": true; }; }, { "seatActivate": "seatActivate"; "seatFocused": "seatFocused"; "seatKeydown": "seatKeydown"; }, never, never, true, never>;
 }
 
 /** Which marks, beyond the body fill, a status swatch draws. */
@@ -310,6 +423,8 @@ declare class KerusiLegendComponent {
     readonly colors: _angular_core.InputSignal<Required<KerusiSeatmapColors>>;
     /** Whether an available seat takes its type color — mirrors the seatmap input. */
     readonly typeColors: _angular_core.InputSignal<boolean>;
+    /** Mirrors the seatmap input: a type's style is what its swatch shows. */
+    readonly seatTypeStyles: _angular_core.InputSignal<Readonly<Record<string, _kerusiweb_core.KerusiSeatStyle>> | undefined>;
     readonly showPrices: _angular_core.InputSignal<boolean>;
     /** Hide types no seat in the rendered map actually uses. */
     readonly hideUnusedTypes: _angular_core.InputSignal<boolean>;
@@ -318,6 +433,8 @@ declare class KerusiLegendComponent {
     protected readonly types: _angular_core.Signal<RenderLegendEntry[]>;
     protected readonly statuses: _angular_core.Signal<StatusEntry[]>;
     protected swatch(entry: RenderLegendEntry): string;
+    /** The swatch outline for a type styled with its own shape; `undefined` keeps the square. */
+    protected typeShape(entry: RenderLegendEntry): string | undefined;
     protected swatchText(entry: RenderLegendEntry): string;
     /** The swatch's viewBox edge; the seat glyph is drawn to fill it. */
     protected readonly glyphSize = 16;
@@ -341,7 +458,7 @@ declare class KerusiLegendComponent {
     protected coreFill(): string;
     protected price(entry: RenderLegendEntry): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KerusiLegendComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiLegendComponent, "kerusi-legend", never, { "legend": { "alias": "legend"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "showPrices": { "alias": "showPrices"; "required": false; "isSignal": true; }; "hideUnusedTypes": { "alias": "hideUnusedTypes"; "required": false; "isSignal": true; }; "headingSeatTypes": { "alias": "headingSeatTypes"; "required": false; "isSignal": true; }; "headingAvailability": { "alias": "headingAvailability"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiLegendComponent, "kerusi-legend", never, { "legend": { "alias": "legend"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "seatTypeStyles": { "alias": "seatTypeStyles"; "required": false; "isSignal": true; }; "showPrices": { "alias": "showPrices"; "required": false; "isSignal": true; }; "hideUnusedTypes": { "alias": "hideUnusedTypes"; "required": false; "isSignal": true; }; "headingSeatTypes": { "alias": "headingSeatTypes"; "required": false; "isSignal": true; }; "headingAvailability": { "alias": "headingAvailability"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -390,5 +507,5 @@ declare class KerusiStateStore {
     startExpiryTicker(intervalMs?: number): () => void;
 }
 
-export { KerusiLegendComponent, KerusiSeatmapComponent, KerusiSectionComponent, KerusiStateStore };
-export type { SeatDisallowed, SeatInteraction, SectionRenderOptions, ValidationMode };
+export { KerusiLegendComponent, KerusiSeatTemplateDirective, KerusiSeatmapComponent, KerusiSectionComponent, KerusiStateStore };
+export type { SeatDisallowed, SeatInteraction, SeatTemplateContext, SeatTemplateOutletContext, SectionRenderOptions, ValidationMode };