@kerusiweb/angular 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerusiweb/angular",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "An Angular seat-map component that renders Kerusi Seat Map & Availability Format documents as interactive, accessible inline SVG.",
   "keywords": [
     "angular",
@@ -27,7 +27,7 @@
   "peerDependencies": {
     "@angular/common": "^22.1.0",
     "@angular/core": "^22.1.0",
-    "@kerusiweb/core": "^2.2.0"
+    "@kerusiweb/core": "^2.3.0"
   },
   "dependencies": {
     "tslib": "^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, KerusiControlStrings, DisallowedReason, KerusiViolation, KerusiViewport, 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 = 
@@ -69,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. */
@@ -87,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>;
@@ -247,7 +309,7 @@ declare class KerusiSeatmapComponent {
     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; }; "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"; }, 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>;
 }
 
 /**
@@ -273,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>;
     /**
@@ -291,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.
+     * Every seat with its glyph resolved, once per change of layout, selection or
+     * theme rather than once per binding per change detection.
      */
-    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.
-     */
-    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. */
@@ -365,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. */
@@ -398,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>;
@@ -406,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;
@@ -429,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>;
 }
 
 /**
@@ -478,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 };