@kerusiweb/angular 2.3.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerusiweb/angular",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "An Angular seat-map component that renders Kerusi Seat Map & Availability Format documents as interactive, accessible inline SVG.",
   "keywords": [
     "angular",
@@ -20,14 +20,14 @@
   "author": "Arsyad \"Shad Ahm\" Ahmad",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ShadAhm/kerusiweb.git",
+    "url": "git+https://github.com/ShadAhm/kerusiweb.git",
     "directory": "projects/angular"
   },
   "homepage": "https://github.com/ShadAhm/kerusiweb",
   "peerDependencies": {
     "@angular/common": "^22.1.0",
     "@angular/core": "^22.1.0",
-    "@kerusiweb/core": "^2.3.0"
+    "@kerusiweb/core": "^3.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/types/kerusiweb-angular.d.ts

@@ -1,5 +1,5 @@
 import * as _kerusiweb_core 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 { KerusiSeatContext, KerusiMap, KerusiState, KerusiSession, SeatAriaStrings, KerusiSeatmapColors, SeatStyleFn, RenderSeat, KerusiControlStrings, DisallowedReason, KerusiViolation, KerusiViewport, RenderMap, MapLayout, RenderSection, PlacedSection, PlacedSeat, PlacedElement, RenderLegendEntry, SeatOccupantVariant, SequenceReader, HeldSeat, KerusiStateDelta, DeltaApplication } from '@kerusiweb/core';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, Signal } from '@angular/core';
 
@@ -59,11 +59,8 @@ type ValidationMode =
  | 'off';
 /** Per-section rendering overrides, keyed by `Section.id`. */
 interface SectionRenderOptions {
+    /** Leaves the section out. Its space on the canvas stays empty (D4). */
     hidden?: boolean;
-    /** Overrides `Section.aspectRatio`. */
-    aspectRatio?: string;
-    /** Overrides the seat size for this section only. */
-    seatSize?: number;
     /** Overrides the localized `Section.label`. */
     label?: string;
 }
@@ -83,8 +80,10 @@ interface SeatDisallowed {
  * 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.
@@ -131,17 +130,18 @@ declare class KerusiSeatmapComponent {
      * 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. */
-    readonly seatGap: _angular_core.InputSignal<number>;
-    /** Freeform viewBox width; height follows the section's aspect ratio. */
-    readonly freeformBasis: _angular_core.InputSignal<number>;
     /**
-     * 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.
+     * 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`.
      */
     readonly unitScale: _angular_core.InputSignal<number>;
+    /**
+     * 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`.
+     */
     readonly showSectionLabels: _angular_core.InputSignal<boolean>;
     readonly showLegend: _angular_core.InputSignal<boolean>;
     readonly showLegendPrices: _angular_core.InputSignal<boolean>;
@@ -149,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 ("available" | "blocked" | "held" | "booked")[]>;
+    readonly selectableStatuses: _angular_core.InputSignal<readonly ("held" | "booked" | "blocked" | "available")[]>;
     /** `auto` selects a seat's companion closure together (§4.6). */
     readonly companionMode: _angular_core.InputSignal<"auto" | "independent">;
     readonly maxSelection: _angular_core.InputSignal<number | undefined>;
@@ -231,8 +231,14 @@ declare class KerusiSeatmapComponent {
     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>>;
+    /** Every seat and element placed on the canvas, mirrored as a whole in RTL (D3). */
+    protected readonly layout: _angular_core.Signal<MapLayout>;
+    protected readonly viewBox: _angular_core.Signal<string>;
+    /** `unitScale` CSS pixels per canvas unit, at most. */
+    protected readonly naturalWidth: _angular_core.Signal<number>;
+    /** The canvas's width over its height, so a maximized map can fit the whole canvas. */
+    protected readonly canvasAspect: _angular_core.Signal<string>;
+    protected readonly backdrop: _angular_core.Signal<string>;
     /** Navigation graphs per section — arrows move within, Tab moves between. */
     private readonly graphs;
     protected readonly ariaLabels: _angular_core.Signal<ReadonlyMap<string, string>>;
@@ -241,17 +247,15 @@ declare class KerusiSeatmapComponent {
     protected readonly liveMessage: _angular_core.Signal<string>;
     /** The selection's seats and total, for callers that want it off the template. */
     readonly summary: _angular_core.Signal<_kerusiweb_core.SelectionSummary>;
-    protected layoutFor(section: RenderSection): SectionLayout;
     protected labelFor(section: RenderSection): string | undefined;
-    protected labelId(section: RenderSection): string;
     /** The seat holding this section's tab stop. */
     protected focusedSeatIn(section: RenderSection): string | null;
     protected onSeatActivate(seatId: string): void;
     protected onSeatFocused(seatId: string): void;
     /**
-     * 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).
      */
     protected onKeydown(section: RenderSection, event: KeyboardEvent): void;
     private setFocusedSeat;
@@ -272,8 +276,15 @@ declare class KerusiSeatmapComponent {
     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`. */
+    /** Back to fit-to-container: the whole canvas. No-op unless `zoomable`. */
     resetZoom(): void;
+    /**
+     * 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: string): void;
+    private zoomToCanvasRect;
     private stepZoom;
     /** Sizes in CSS pixels, read when needed: `offset*` ignores the zoom transform. */
     private measure;
@@ -309,23 +320,32 @@ 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; }; "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>;
+    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; }; "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>;
 }
 
 /**
- * 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.
  */
 declare class KerusiSectionComponent {
-    readonly section: _angular_core.InputSignal<RenderSection>;
-    readonly layout: _angular_core.InputSignal<SectionLayout>;
+    /** The section with its seats and elements placed on the map's canvas. */
+    readonly layout: _angular_core.InputSignal<PlacedSection>;
+    /** The section's name: its accessible name, and its drawn label when one is shown. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 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.
+     */
+    readonly showLabel: _angular_core.InputSignal<boolean>;
     /** Currently selected seat ids. */
     readonly selection: _angular_core.InputSignal<ReadonlySet<string>>;
     /** The seat holding the section's single tab stop, if any. */
@@ -343,22 +363,12 @@ declare class KerusiSectionComponent {
     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>;
-    /**
-     * 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.
-     */
-    readonly unitScale: _angular_core.InputSignal<number>;
     readonly seatActivate: _angular_core.OutputEmitterRef<string>;
     readonly seatFocused: _angular_core.OutputEmitterRef<string>;
     readonly seatKeydown: _angular_core.OutputEmitterRef<KeyboardEvent>;
-    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>;
+    /** Whether the label is drawn: asked for, present, and with declared bounds to sit in. */
+    protected readonly drawsLabel: _angular_core.Signal<boolean>;
+    protected readonly labelFill: _angular_core.Signal<string>;
     /**
      * Every seat with its glyph resolved, once per change of layout, selection or
      * theme rather than once per binding per change detection.
@@ -368,7 +378,6 @@ declare class KerusiSectionComponent {
         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;
@@ -390,7 +399,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; }; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiSectionComponent, "g[kerusi-section]", never, { "layout": { "alias": "layout"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "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; }; }, { "seatActivate": "seatActivate"; "seatFocused": "seatFocused"; "seatKeydown": "seatKeydown"; }, never, never, true, never>;
 }
 
 /** Which marks, beyond the body fill, a status swatch draws. */