@kerusiweb/angular 2.1.0 → 2.2.0

package/types/kerusiweb-angular.d.ts

@@ -1,5 +1,5 @@
 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 { 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 * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
 
@@ -46,6 +46,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;
@@ -96,6 +101,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 +124,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 +138,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 +161,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 +196,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; }; "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>;
 }
 
 /**