@seatschart/angular 0.1.0 → 0.2.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 SeatsChart
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 SeatsChart
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,148 +1,148 @@
-# @seatschart/angular
-
-Angular standalone components for SeatsChart: the buyer seat chart, the Event Manager and the map designer. They are
-thin wrappers over the script-tag host API of [`@seatschart/embed`](https://www.npmjs.com/package/@seatschart/embed)
-(`SeatsChart`, `SeatsChartEventManager`, `SeatsChartDesigner`): same options, seats.io-compatible callback names and
-the same commands. SSR-safe (Angular SSR / Universal): nothing touches `window` at import and the iframe is created
-in the browser only, after the view is ready.
-
-## Install
-
-```bash
-npm install @seatschart/angular @seatschart/embed
-```
-
-Angular 18 or newer (tested with the Angular 21 LTS). The package ships partially compiled (Ivy) components that the
-Angular CLI links into your app; it works with and without zone.js.
-
-## Buyer seat chart
-
-`token` is a short-lived buyer JWT minted by your server with the API key (`POST /api/viewer-tokens`). Never pass an
-API key or a secret to the browser.
-
-```ts
-import { Component, ViewChild } from "@angular/core";
-import { SeatChartComponent, type SeatChartPrompt } from "@seatschart/angular";
-import type { ChartObjectSelected, ChartSessionHold } from "@seatschart/embed";
-
-@Component({
-  selector: "app-seats",
-  imports: [SeatChartComponent],
-  template: `
-    <seatschart-chart
-      #chart
-      class="seat-map"
-      webBase="https://your-tenant.seatschart.com"
-      [event]="eventId"
-      [token]="jwt"
-      language="pt"
-      [height]="640"
-      [maxSelectedObjects]="maxSeats"
-      [objectColor]="{ byStatus: { locked: '#f59e0b' } }"
-      [settings3d]="{ lightPreset: 'exteriorSunset' }"
-      (chartRendered)="ready = true"
-      (objectSelected)="onSelected($event)"
-      (sessionHold)="onHold($event)"
-      (holdFailed)="error = $event.message"
-    />
-    <button type="button" (click)="chart.clearSelection()">Clear</button>
-    <button type="button" (click)="chart.selectBestAvailable({ number: 2, categories: ['VIP'] })">Best 2 VIP</button>
-  `,
-})
-export class SeatsComponent {
-  @ViewChild(SeatChartComponent) chart?: SeatChartComponent;
-  eventId = "EVENT_UUID";
-  jwt = "";
-  maxSeats = 4;
-  ready = false;
-  error = "";
-  cart: string[] = [];
-
-  onSelected(e: ChartObjectSelected): void {
-    this.cart = [...this.cart, e.label];
-  }
-  onHold(e: ChartSessionHold): void {
-    // Route to your payment step with e.holdToken + e.seatIds.
-  }
-  async viewFromSeat(label: string): Promise<void> {
-    await this.chart?.showViewFromSeat(label); // "3d" or "photo"
-  }
-}
-```
-
-- **Inputs** are the `SeatsChart` options of `@seatschart/embed` (`event`, `token`, `webBase`, `parentOrigin`,
-  `channel`, `channelKey(s)`, `holdToken`, `pricing`, `language`, `theme`, `defaultRenderer`, …) and every declarative
-  renderer option (`objectColor`, `objectLabel`, `tooltip`, `maxSelectedObjects`, `legend`, `filterControls`,
-  `settings3d`, …). The chart `style` option (`{ font, cornerRadius, buttonShape }`) is **`chartStyle`**: `class` and
-  `style` style the host element `<seatschart-chart>` (a block); `className` styles the iframe.
-- **Changes** (`ngOnChanges`) are compared by value — pass new object references, in-place mutations are not seen.
-  Declarative options and `pricing` are applied live with `changeConfig` (no reload); `height`, `title` and
-  `className` update the iframe in place; any other input re-renders the iframe and the hold session continues.
-- **Outputs**: every chart callback without `on`: `(objectSelected)`, `(objectClicked)`, `(holdSucceeded)`,
-  `(holdConfirmed)`, `(selectionInvalid)`, `(bestAvailableSelected)`, `(floorChanged)`, `(fullScreenOpened)`,
-  `(holdCreated)` (`SEATSCHART_RESERVATION_SUCCESS`), … with the `@seatschart/embed` payload as `$event`. Chart
-  messages run outside the Angular zone: only outputs you subscribe to trigger change detection.
-- **Host-drawn prompts**: subscribing to `(placesPrompt)`, `(ticketTypePrompt)` or `(placesWithTicketTypesPrompt)`
-  switches that viewer prompt to your page; `$event` is `{ params, confirm, cancel }` (`SeatChartPrompt<T>`).
-- **Commands** are component methods (`@ViewChild` or a template variable): every `SeatsChart` command —
-  `selectObjects`, `deselectObjects`, `clearSelection`, `trySelectObjects`, `selectBestAvailable`, `changeConfig`,
-  `setFilters`, `zoomToObjects`, `zoomToSection`, `goToFloor`, `showViewFromSeat`, `getHoldToken`,
-  `releaseHoldToken`, `exportImage`, … Each resolves once the chart rendered and rejects with `ChartCommandError`.
-  `chart` is the `SeatsChart` instance (`chart?.selectedObjects`, `chart?.holdToken` synchronously); `getIframe()`
-  and `rerender()` are there too.
-- **Cleanup**: `ngOnDestroy` removes the iframe and its message listener; pending commands reject.
-
-## Event Manager (back office)
-
-```ts
-import { EventManagerComponent } from "@seatschart/angular";
-
-@Component({
-  selector: "app-box-office",
-  imports: [EventManagerComponent],
-  template: `
-    <seatschart-event-manager #manager webBase="https://your-tenant.seatschart.com" [event]="eventId"
-      [token]="managerEmbedToken" mode="select" colorScheme="auto" [maxSelectedObjects]="8"
-      (selectionChanged)="cart = $event" (managerError)="error = $event.message" />
-    <button type="button" (click)="manager.setHighlightedObjects(['A-1'])">Highlight A-1</button>
-  `,
-})
-export class BoxOfficeComponent { /* … */ }
-```
-
-Selectability rules, `maxSelectedObjects`, `selectedObjects`, `order`, `filters`, `language` and `colorScheme`
-change live (`changeConfig`); `mode`, `event` or `token` re-render the iframe. Methods: every
-`SeatsChartEventManager` command (`listSelectedObjects`, `selectObjects`, `listOrderChanges`, `zoomToObjects`, …);
-`manager` is the instance. The seats.io `onError` callback is `(managerError)` (an output named `error` would also
-catch native DOM `error` events).
-
-## Designer
-
-```ts
-import { DesignerComponent } from "@seatschart/angular";
-
-@Component({
-  selector: "app-venue-editor",
-  imports: [DesignerComponent],
-  template: `
-    <seatschart-designer #designer webBase="https://your-tenant.seatschart.com" [token]="designerEmbedToken"
-      [chartId]="chartId" mode="safe" canvasColorScheme="dark"
-      (chartUpdated)="saved = true" (exitRequested)="close()" />
-    <button type="button" (click)="designer.publish('Summer layout')">Publish</button>
-  `,
-})
-export class VenueEditorComponent { /* … */ }
-```
-
-Without `chartId` the designer creates a chart (`(chartCreated)`). The Exit button shows only when something
-subscribes to `(exitRequested)`. Outputs emit the callback's event (`(chartUpdated)` gets `{ chartId, draftUpdatedAt,
-… }`); `onError` is `(designerError)`. `language`, `colorScheme`, `canvasColorScheme`, `mode` and `safeModeOptions`
-change live. Methods: `save()`, `publish(note?)`, `getState()`, `changeConfig()`; `designer?.chartId` is the chart
-being edited.
-
-## Documentation
-
-- [Embed guide](https://github.com/seatschart/seatschart-prod/blob/main/docs/locales/en/README.md) and
-  [Quickstart](https://github.com/seatschart/seatschart-prod/blob/main/docs/locales/en/QUICKSTART.md)
-- Every option, callback and command: `@seatschart/embed` (`SeatsChartConfig`, `SeatsChartEventManagerConfig`,
-  `SeatsChartDesignerConfig`).
+# @seatschart/angular
+
+Angular standalone components for SeatsChart: the buyer seat chart, the Event Manager and the map designer. They are
+thin wrappers over the script-tag host API of [`@seatschart/embed`](https://www.npmjs.com/package/@seatschart/embed)
+(`SeatsChart`, `SeatsChartEventManager`, `SeatsChartDesigner`): same options, seats.io-compatible callback names and
+the same commands. SSR-safe (Angular SSR / Universal): nothing touches `window` at import and the iframe is created
+in the browser only, after the view is ready.
+
+## Install
+
+```bash
+npm install @seatschart/angular @seatschart/embed
+```
+
+Angular 18 or newer (tested with the Angular 21 LTS). The package ships partially compiled (Ivy) components that the
+Angular CLI links into your app; it works with and without zone.js.
+
+## Buyer seat chart
+
+`token` is a short-lived buyer JWT minted by your server with the API key (`POST /api/viewer-tokens`). Never pass an
+API key or a secret to the browser.
+
+```ts
+import { Component, ViewChild } from "@angular/core";
+import { SeatChartComponent, type SeatChartPrompt } from "@seatschart/angular";
+import type { ChartObjectSelected, ChartSessionHold } from "@seatschart/embed";
+
+@Component({
+  selector: "app-seats",
+  imports: [SeatChartComponent],
+  template: `
+    <seatschart-chart
+      #chart
+      class="seat-map"
+      webBase="https://your-tenant.seatschart.com"
+      [event]="eventId"
+      [token]="jwt"
+      language="pt"
+      [height]="640"
+      [maxSelectedObjects]="maxSeats"
+      [objectColor]="{ byStatus: { locked: '#f59e0b' } }"
+      [settings3d]="{ lightPreset: 'exteriorSunset' }"
+      (chartRendered)="ready = true"
+      (objectSelected)="onSelected($event)"
+      (sessionHold)="onHold($event)"
+      (holdFailed)="error = $event.message"
+    />
+    <button type="button" (click)="chart.clearSelection()">Clear</button>
+    <button type="button" (click)="chart.selectBestAvailable({ number: 2, categories: ['VIP'] })">Best 2 VIP</button>
+  `,
+})
+export class SeatsComponent {
+  @ViewChild(SeatChartComponent) chart?: SeatChartComponent;
+  eventId = "EVENT_UUID";
+  jwt = "";
+  maxSeats = 4;
+  ready = false;
+  error = "";
+  cart: string[] = [];
+
+  onSelected(e: ChartObjectSelected): void {
+    this.cart = [...this.cart, e.label];
+  }
+  onHold(e: ChartSessionHold): void {
+    // Route to your payment step with e.holdToken + e.seatIds.
+  }
+  async viewFromSeat(label: string): Promise<void> {
+    await this.chart?.showViewFromSeat(label); // "3d" or "photo"
+  }
+}
+```
+
+- **Inputs** are the `SeatsChart` options of `@seatschart/embed` (`event`, `token`, `webBase`, `parentOrigin`,
+  `channel`, `channelKey(s)`, `holdToken`, `pricing`, `language`, `theme`, `defaultRenderer`, …) and every declarative
+  renderer option (`objectColor`, `objectLabel`, `tooltip`, `maxSelectedObjects`, `legend`, `filterControls`,
+  `settings3d`, …). The chart `style` option (`{ font, cornerRadius, buttonShape }`) is **`chartStyle`**: `class` and
+  `style` style the host element `<seatschart-chart>` (a block); `className` styles the iframe.
+- **Changes** (`ngOnChanges`) are compared by value — pass new object references, in-place mutations are not seen.
+  Declarative options and `pricing` are applied live with `changeConfig` (no reload); `height`, `title` and
+  `className` update the iframe in place; any other input re-renders the iframe and the hold session continues.
+- **Outputs**: every chart callback without `on`: `(objectSelected)`, `(objectClicked)`, `(holdSucceeded)`,
+  `(holdConfirmed)`, `(selectionInvalid)`, `(bestAvailableSelected)`, `(floorChanged)`, `(fullScreenOpened)`,
+  `(holdCreated)` (`SEATSCHART_RESERVATION_SUCCESS`), … with the `@seatschart/embed` payload as `$event`. Chart
+  messages run outside the Angular zone: only outputs you subscribe to trigger change detection.
+- **Host-drawn prompts**: subscribing to `(placesPrompt)`, `(ticketTypePrompt)` or `(placesWithTicketTypesPrompt)`
+  switches that viewer prompt to your page; `$event` is `{ params, confirm, cancel }` (`SeatChartPrompt<T>`).
+- **Commands** are component methods (`@ViewChild` or a template variable): every `SeatsChart` command —
+  `selectObjects`, `deselectObjects`, `clearSelection`, `trySelectObjects`, `selectBestAvailable`, `changeConfig`,
+  `setFilters`, `zoomToObjects`, `zoomToSection`, `goToFloor`, `showViewFromSeat`, `getHoldToken`,
+  `releaseHoldToken`, `exportImage`, … Each resolves once the chart rendered and rejects with `ChartCommandError`.
+  `chart` is the `SeatsChart` instance (`chart?.selectedObjects`, `chart?.holdToken` synchronously); `getIframe()`
+  and `rerender()` are there too.
+- **Cleanup**: `ngOnDestroy` removes the iframe and its message listener; pending commands reject.
+
+## Event Manager (back office)
+
+```ts
+import { EventManagerComponent } from "@seatschart/angular";
+
+@Component({
+  selector: "app-box-office",
+  imports: [EventManagerComponent],
+  template: `
+    <seatschart-event-manager #manager webBase="https://your-tenant.seatschart.com" [event]="eventId"
+      [token]="managerEmbedToken" mode="select" colorScheme="auto" [maxSelectedObjects]="8"
+      (selectionChanged)="cart = $event" (managerError)="error = $event.message" />
+    <button type="button" (click)="manager.setHighlightedObjects(['A-1'])">Highlight A-1</button>
+  `,
+})
+export class BoxOfficeComponent { /* … */ }
+```
+
+Selectability rules, `maxSelectedObjects`, `selectedObjects`, `order`, `filters`, `language` and `colorScheme`
+change live (`changeConfig`); `mode`, `event` or `token` re-render the iframe. Methods: every
+`SeatsChartEventManager` command (`listSelectedObjects`, `selectObjects`, `listOrderChanges`, `zoomToObjects`, …);
+`manager` is the instance. The seats.io `onError` callback is `(managerError)` (an output named `error` would also
+catch native DOM `error` events).
+
+## Designer
+
+```ts
+import { DesignerComponent } from "@seatschart/angular";
+
+@Component({
+  selector: "app-venue-editor",
+  imports: [DesignerComponent],
+  template: `
+    <seatschart-designer #designer webBase="https://your-tenant.seatschart.com" [token]="designerEmbedToken"
+      [chartId]="chartId" mode="safe" canvasColorScheme="dark"
+      (chartUpdated)="saved = true" (exitRequested)="close()" />
+    <button type="button" (click)="designer.publish('Summer layout')">Publish</button>
+  `,
+})
+export class VenueEditorComponent { /* … */ }
+```
+
+Without `chartId` the designer creates a chart (`(chartCreated)`). The Exit button shows only when something
+subscribes to `(exitRequested)`. Outputs emit the callback's event (`(chartUpdated)` gets `{ chartId, draftUpdatedAt,
+… }`); `onError` is `(designerError)`. `language`, `colorScheme`, `canvasColorScheme`, `mode` and `safeModeOptions`
+change live. Methods: `save()`, `publish(note?)`, `getState()`, `changeConfig()`; `designer?.chartId` is the chart
+being edited.
+
+## Documentation
+
+- [Embed guide](https://github.com/seatschart/seatschart-prod/blob/main/docs/locales/en/README.md) and
+  [Quickstart](https://github.com/seatschart/seatschart-prod/blob/main/docs/locales/en/QUICKSTART.md)
+- Every option, callback and command: `@seatschart/embed` (`SeatsChartConfig`, `SeatsChartEventManagerConfig`,
+  `SeatsChartDesignerConfig`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seatschart/angular",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Angular standalone components for SeatsChart seat maps: buyer chart, Event Manager and designer embeds",
   "type": "module",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "@angular/core": ">=19.0.0"
   },
   "dependencies": {
-    "@seatschart/embed": "^0.5.0"
+    "@seatschart/embed": "^0.6.0"
   },
   "devDependencies": {
     "@angular/common": "21.2.25",