@seatlayer/angular 0.65.0 → 0.68.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +158 -21
- package/dist/README.md +158 -21
- package/package.json +15 -6
package/README.md
CHANGED
|
@@ -1,20 +1,42 @@
|
|
|
1
|
-
#
|
|
1
|
+
# SeatLayer Angular Seat Map SDK for Reserved Seating
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@seatlayer/angular)
|
|
4
4
|
[](https://www.npmjs.com/package/@seatlayer/angular)
|
|
5
5
|
[](https://angular.dev/)
|
|
6
|
+
[](https://www.typescriptlang.org/)
|
|
6
7
|
[](../../LICENSE)
|
|
7
8
|
|
|
8
|
-
The official Angular wrapper for SeatLayer reserved seating
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
`attachPickerFrame` helpers exported by this package; they are not additional
|
|
12
|
-
Angular components.
|
|
9
|
+
The official Angular wrapper for SeatLayer reserved seating. Render an
|
|
10
|
+
interactive seating chart with live seat availability inside an Angular app, let
|
|
11
|
+
buyers pick seats, and take a temporary hold on the inventory they choose.
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
The buyer modal and iframe integration stay framework-agnostic: this package
|
|
14
|
+
also re-exports the plain JavaScript `SeatPickerWidget` class and the
|
|
15
|
+
`attachPickerFrame` helper, so an Angular host depends on one package.
|
|
16
|
+
|
|
17
|
+
[SeatLayer Angular SDK on npm](https://www.npmjs.com/package/@seatlayer/angular) ·
|
|
18
|
+
[Angular seat-map documentation](https://docs.seatlayer.io/buyer-sdk/seat-picker/) ·
|
|
19
|
+
[SeatLayer reserved-seating platform](https://seatlayer.io/) ·
|
|
20
|
+
[Buyer seat-map demo](https://app.seatlayer.io/demo/play/grand-theatre) ·
|
|
21
|
+
[SeatLayer JavaScript seat map SDK](https://www.npmjs.com/package/@seatlayer/js) ·
|
|
22
|
+
[SeatLayer React seat map SDK](https://www.npmjs.com/package/@seatlayer/react) ·
|
|
23
|
+
[SeatLayer Vue seat map SDK](https://www.npmjs.com/package/@seatlayer/vue) ·
|
|
24
|
+
[SeatLayer AI Toolkit](https://github.com/seatlayer/seatlayer-ai-toolkit)
|
|
25
|
+
|
|
26
|
+
## What is included
|
|
27
|
+
|
|
28
|
+
- `SeatLayerSeatingChartComponent` — one standalone Angular component with the
|
|
29
|
+
`seatlayer-seating-chart` selector.
|
|
30
|
+
- `SeatPickerWidget` — the framework-agnostic one-call buyer modal.
|
|
31
|
+
- `attachPickerFrame` — the host-side iframe helper for embedded pickers.
|
|
32
|
+
- An Angular Package Format build (`fesm2022`) with TypeScript declarations at
|
|
33
|
+
`dist/index.d.ts`.
|
|
34
|
+
|
|
35
|
+
## Requirements
|
|
36
|
+
|
|
37
|
+
- Angular 17 or newer (`@angular/core` and `@angular/common` are peer
|
|
38
|
+
dependencies).
|
|
39
|
+
- A browser DOM: the chart is created when the component initialises.
|
|
18
40
|
|
|
19
41
|
## Install
|
|
20
42
|
|
|
@@ -22,10 +44,9 @@ Angular components.
|
|
|
22
44
|
npm install @seatlayer/angular
|
|
23
45
|
```
|
|
24
46
|
|
|
25
|
-
|
|
26
|
-
directly, no NgModule needed.
|
|
47
|
+
The component is **standalone** — import it directly, no NgModule needed.
|
|
27
48
|
|
|
28
|
-
##
|
|
49
|
+
## Quick start
|
|
29
50
|
|
|
30
51
|
```ts
|
|
31
52
|
import { Component, ViewChild } from '@angular/core';
|
|
@@ -39,6 +60,7 @@ import { SeatLayerSeatingChartComponent, type SelectedSeat } from '@seatlayer/an
|
|
|
39
60
|
<seatlayer-seating-chart
|
|
40
61
|
#chart
|
|
41
62
|
event="ev_9f3a"
|
|
63
|
+
publicKey="pk_live_your_publishable_key"
|
|
42
64
|
style="display:block; height:520px"
|
|
43
65
|
(selectionChange)="onSelectionChange($event)"
|
|
44
66
|
(hold)="bookOnYourServer($event.holdId)"
|
|
@@ -68,12 +90,16 @@ export class CheckoutComponent {
|
|
|
68
90
|
| `selectableObjects` | `string[] \| null` | Buyer-selectable allow-list. |
|
|
69
91
|
| `numberOfPlacesToSelect` | `number` | Exact count required for a valid selection. |
|
|
70
92
|
| `selectionValidators` | `PickerSelectionValidator[]` | Minimum, consecutive-seat, and no-orphan guards. |
|
|
71
|
-
| `publicKey` | `string` |
|
|
93
|
+
| `publicKey` | `string` | Publishable browser key for public Platform events. Configure the browser origin in SeatLayer. |
|
|
72
94
|
| `locale` | `string` | BCP-47 locale for built-in copy. |
|
|
73
95
|
| `currency` | `string` | ISO currency for price formatting. |
|
|
74
96
|
| `colorblindSafe` | `boolean` | Render colorblind-safe seat glyphs. |
|
|
75
97
|
| `seatTooltip` | `boolean` | Set `false` to draw your own popover from `(seatHover)`. |
|
|
76
98
|
| `messages` | `object` | Copy overrides. Read once per rebuild. |
|
|
99
|
+
| `initialView` | `RendererViewMode` | Initial 2D projection, read once per rebuild. |
|
|
100
|
+
| `errorDisplay` | `'message' \| 'none'` | `'message'` (default) shows a notice with Try again; `'none'` is silent. |
|
|
101
|
+
| `buyerAccessTokenProvider` | `BuyerAccessTokenProvider` | Sales Channels: mint a buyer access session on demand from your backend. |
|
|
102
|
+
| `buyerAccessToken` | `string \| BuyerAccessToken` | One-shot session for hosts that own the lifecycle. Cannot be renewed. |
|
|
77
103
|
|
|
78
104
|
`numberOfPlacesToSelect`, `selectionValidators`, and the other identity inputs rebuild the
|
|
79
105
|
canvas. `selectedObjects` and `selectableObjects` are initial values; use the
|
|
@@ -96,6 +122,9 @@ mid-selection because an array instance changed.
|
|
|
96
122
|
| `(deckTap)` | `string` (floor id) |
|
|
97
123
|
| `(hint)` | `string \| null` — `null` clears the hint |
|
|
98
124
|
| `(seatHover)` | `SeatHoverDetails \| null` — `null` when the pointer leaves |
|
|
125
|
+
| `(accessExpired)` | `BuyerAccessExpiredEvent` |
|
|
126
|
+
| `(accessUnavailable)` | `BuyerAccessUnavailableEvent` |
|
|
127
|
+
| `(selectedObjectUnavailable)` | `SelectedObjectUnavailableEvent` |
|
|
99
128
|
|
|
100
129
|
> `(errored)` rather than `(error)`: `error` collides with the native DOM error
|
|
101
130
|
> event on the host element, which would fire your handler for unrelated
|
|
@@ -111,7 +140,10 @@ Via a template ref (`#chart`):
|
|
|
111
140
|
`deselectCategories` · `setSelectableObjects` · `setMaxSelection` ·
|
|
112
141
|
`getSelectionValidity` ·
|
|
113
142
|
`getFloors` · `setFloor` · `setColorblindSafe` · `zoomIn` · `zoomOut` ·
|
|
114
|
-
`zoomToFit`
|
|
143
|
+
`zoomToFit` · `refreshAccess`
|
|
144
|
+
|
|
145
|
+
Calling any of them before the chart exists returns an empty answer rather than
|
|
146
|
+
throwing, so a template ref used one frame early is safe.
|
|
115
147
|
|
|
116
148
|
> `holdSelection()` rather than `hold()`: `hold` is already the name of the
|
|
117
149
|
> `@Output`, and a class cannot have both.
|
|
@@ -129,13 +161,118 @@ re-enters the zone only to emit, which is the only part Angular needs to see.
|
|
|
129
161
|
- `attachPickerFrame` — raw framework-agnostic JavaScript iframe helper; grows on `seatlayer:height` and
|
|
130
162
|
pins on `seatlayer:fullscreen`.
|
|
131
163
|
|
|
132
|
-
##
|
|
164
|
+
## Security boundary
|
|
165
|
+
|
|
166
|
+
The Angular app **selects and holds** inventory. Your trusted backend **inspects
|
|
167
|
+
and books** the hold after payment or order validation.
|
|
168
|
+
|
|
169
|
+
- Never ship a SeatLayer secret key in browser code or a bundled environment
|
|
170
|
+
file.
|
|
171
|
+
- A `pk_` public key is designed for browser code. SeatLayer binds it to the
|
|
172
|
+
configured origin and event; keep private-channel access behind a server-minted
|
|
173
|
+
`buyerAccessTokenProvider`.
|
|
174
|
+
- Send only the `holdId` and your normal checkout context to your backend.
|
|
175
|
+
- Calculate the charge from server-inspected hold items, not from browser input.
|
|
176
|
+
- Reuse your stable order id as `bookingRef` so a retried booking is idempotent.
|
|
177
|
+
|
|
178
|
+
Read [how the integration works](https://docs.seatlayer.io/start/how-it-works/)
|
|
179
|
+
before connecting checkout.
|
|
180
|
+
|
|
181
|
+
## Architecture
|
|
182
|
+
|
|
183
|
+
This package is a thin Angular layer over
|
|
184
|
+
[`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js), the
|
|
185
|
+
framework-agnostic browser runtime. The component's template is a single
|
|
186
|
+
`<div>`, `ngOnChanges` decides which inputs rebuild the chart, and the
|
|
187
|
+
imperative methods forward to the runtime handle. Chart geometry, availability,
|
|
188
|
+
and holds come from the SeatLayer API at runtime.
|
|
189
|
+
|
|
190
|
+
## Frequently asked questions
|
|
191
|
+
|
|
192
|
+
### How do I add a seat map to an Angular app?
|
|
193
|
+
|
|
194
|
+
Install `@seatlayer/angular`, import the standalone
|
|
195
|
+
`SeatLayerSeatingChartComponent`, and put `<seatlayer-seating-chart
|
|
196
|
+
event="ev_…">` on screen inside a block with a definite height. That is a
|
|
197
|
+
complete interactive seating chart with live availability; the
|
|
198
|
+
[seat-picker documentation](https://docs.seatlayer.io/buyer-sdk/seat-picker/)
|
|
199
|
+
covers inputs, outputs, holds, and checkout in depth.
|
|
200
|
+
|
|
201
|
+
### Is this a real Angular component or an iframe?
|
|
202
|
+
|
|
203
|
+
`SeatLayerSeatingChartComponent` is a real standalone Angular component whose
|
|
204
|
+
template is a plain `<div>` in your own tree — no iframe and no stylesheet of
|
|
205
|
+
its own. Its render loop and pointer handlers are created outside the Angular
|
|
206
|
+
zone and re-enter it only to emit, so a running chart does not schedule change
|
|
207
|
+
detection on every frame. If you would rather embed the buyer picker in an iframe,
|
|
208
|
+
`attachPickerFrame` is exported for that.
|
|
209
|
+
|
|
210
|
+
### How do temporary seat holds work?
|
|
211
|
+
|
|
212
|
+
When a buyer commits to a selection, `holdSelection()` reserves that inventory
|
|
213
|
+
against concurrent buyers for a limited checkout window and returns an opaque
|
|
214
|
+
`holdId`. The hold lapses on its own if checkout never completes —
|
|
215
|
+
`(holdExpired)` tells the app to return the buyer to the map — and
|
|
216
|
+
`resumeHold()` restores it after a same-tab checkout navigation or a reload.
|
|
217
|
+
This is what prevents double-selling without locking seats forever.
|
|
218
|
+
|
|
219
|
+
### Can I use my own payment provider?
|
|
220
|
+
|
|
221
|
+
Yes. Nothing in this package takes a payment. The browser hands your code a
|
|
222
|
+
`holdId` and priced line items, your backend charges through whatever provider
|
|
223
|
+
you already use, and it then books the hold through the
|
|
224
|
+
[server-side checkout flow](https://docs.seatlayer.io/buyer-sdk/holds-and-checkout/).
|
|
225
|
+
|
|
226
|
+
### Can I evaluate it without a SeatLayer account?
|
|
227
|
+
|
|
228
|
+
You can explore a live seating chart in the browser at the
|
|
229
|
+
[buyer seat-map demo](https://app.seatlayer.io/demo/play/grand-theatre) with no
|
|
230
|
+
account. Rendering your own venue needs an event key, because the chart and its
|
|
231
|
+
availability are served by the SeatLayer API — create a free test event for
|
|
232
|
+
that, which books no real inventory.
|
|
233
|
+
|
|
234
|
+
## Continue your Angular integration
|
|
235
|
+
|
|
236
|
+
- [Follow the buyer SDK installation guide](https://docs.seatlayer.io/buyer-sdk/install/)
|
|
237
|
+
for the full browser integration, options, and events.
|
|
238
|
+
- [Connect seat holds to secure server-side checkout](https://docs.seatlayer.io/buyer-sdk/holds-and-checkout/)
|
|
239
|
+
without putting booking credentials in the browser.
|
|
240
|
+
- [Run the complete checkout example](https://docs.seatlayer.io/examples/complete-checkout/)
|
|
241
|
+
to connect a buyer hold id to payment and idempotent booking.
|
|
242
|
+
- [Compare SeatLayer's mobile seat map SDKs](https://docs.seatlayer.io/buyer-sdk/mobile/)
|
|
243
|
+
when the same event also has to render in native iOS, Android, Flutter, or
|
|
244
|
+
React Native apps.
|
|
245
|
+
- [Read the embedded Designer guide](https://docs.seatlayer.io/platform/embedded-designer/)
|
|
246
|
+
to let organizers draw their own venues inside your product.
|
|
247
|
+
- [Explore the 3D seating chart](https://seatlayer.io/3d-seat-map/) for the
|
|
248
|
+
interactive venue view buyers can switch to from the map.
|
|
249
|
+
- [Point AI coding agents at the SeatLayer docs index](https://docs.seatlayer.io/llms.txt)
|
|
250
|
+
(`llms.txt`) for an agent-readable map of the documentation.
|
|
251
|
+
|
|
252
|
+
## SeatLayer SDK ecosystem
|
|
253
|
+
|
|
254
|
+
| Surface | Package or source |
|
|
255
|
+
| --- | --- |
|
|
256
|
+
| JavaScript | [`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js) |
|
|
257
|
+
| React | [`@seatlayer/react`](https://www.npmjs.com/package/@seatlayer/react) |
|
|
258
|
+
| Vue | [`@seatlayer/vue`](https://www.npmjs.com/package/@seatlayer/vue) |
|
|
259
|
+
| Angular | [`@seatlayer/angular`](https://www.npmjs.com/package/@seatlayer/angular) (this package) |
|
|
260
|
+
| React Native | [`@seatlayer/react-native`](https://www.npmjs.com/package/@seatlayer/react-native) |
|
|
261
|
+
| iOS | [`seatlayer-ios`](https://github.com/seatlayer/seatlayer-ios) |
|
|
262
|
+
| Flutter | [`seatlayer`](https://pub.dev/packages/seatlayer) |
|
|
263
|
+
| Android | [`seatlayer-android`](https://github.com/seatlayer/seatlayer-android) |
|
|
264
|
+
| Server SDKs | [Node.js, Python, PHP, Ruby, .NET, Java, and Go](https://docs.seatlayer.io/server-sdk/install/) |
|
|
265
|
+
|
|
266
|
+
## Development
|
|
267
|
+
|
|
268
|
+
```bash
|
|
269
|
+
pnpm install
|
|
270
|
+
pnpm verify
|
|
271
|
+
```
|
|
133
272
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
- [`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js) — framework-agnostic core
|
|
137
|
-
- [Server SDKs](https://docs.seatlayer.io/server-sdk/install/) — Node.js, Python, PHP, Java, Go, Ruby, .NET
|
|
273
|
+
Source, issues, and contribution guidance live in
|
|
274
|
+
[seatlayer/seatlayer-sdk](https://github.com/seatlayer/seatlayer-sdk).
|
|
138
275
|
|
|
139
276
|
## License
|
|
140
277
|
|
|
141
|
-
MIT
|
|
278
|
+
MIT © SeatLayer
|
package/dist/README.md
CHANGED
|
@@ -1,20 +1,42 @@
|
|
|
1
|
-
#
|
|
1
|
+
# SeatLayer Angular Seat Map SDK for Reserved Seating
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@seatlayer/angular)
|
|
4
4
|
[](https://www.npmjs.com/package/@seatlayer/angular)
|
|
5
5
|
[](https://angular.dev/)
|
|
6
|
+
[](https://www.typescriptlang.org/)
|
|
6
7
|
[](../../LICENSE)
|
|
7
8
|
|
|
8
|
-
The official Angular wrapper for SeatLayer reserved seating
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
`attachPickerFrame` helpers exported by this package; they are not additional
|
|
12
|
-
Angular components.
|
|
9
|
+
The official Angular wrapper for SeatLayer reserved seating. Render an
|
|
10
|
+
interactive seating chart with live seat availability inside an Angular app, let
|
|
11
|
+
buyers pick seats, and take a temporary hold on the inventory they choose.
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
The buyer modal and iframe integration stay framework-agnostic: this package
|
|
14
|
+
also re-exports the plain JavaScript `SeatPickerWidget` class and the
|
|
15
|
+
`attachPickerFrame` helper, so an Angular host depends on one package.
|
|
16
|
+
|
|
17
|
+
[SeatLayer Angular SDK on npm](https://www.npmjs.com/package/@seatlayer/angular) ·
|
|
18
|
+
[Angular seat-map documentation](https://docs.seatlayer.io/buyer-sdk/seat-picker/) ·
|
|
19
|
+
[SeatLayer reserved-seating platform](https://seatlayer.io/) ·
|
|
20
|
+
[Buyer seat-map demo](https://app.seatlayer.io/demo/play/grand-theatre) ·
|
|
21
|
+
[SeatLayer JavaScript seat map SDK](https://www.npmjs.com/package/@seatlayer/js) ·
|
|
22
|
+
[SeatLayer React seat map SDK](https://www.npmjs.com/package/@seatlayer/react) ·
|
|
23
|
+
[SeatLayer Vue seat map SDK](https://www.npmjs.com/package/@seatlayer/vue) ·
|
|
24
|
+
[SeatLayer AI Toolkit](https://github.com/seatlayer/seatlayer-ai-toolkit)
|
|
25
|
+
|
|
26
|
+
## What is included
|
|
27
|
+
|
|
28
|
+
- `SeatLayerSeatingChartComponent` — one standalone Angular component with the
|
|
29
|
+
`seatlayer-seating-chart` selector.
|
|
30
|
+
- `SeatPickerWidget` — the framework-agnostic one-call buyer modal.
|
|
31
|
+
- `attachPickerFrame` — the host-side iframe helper for embedded pickers.
|
|
32
|
+
- An Angular Package Format build (`fesm2022`) with TypeScript declarations at
|
|
33
|
+
`dist/index.d.ts`.
|
|
34
|
+
|
|
35
|
+
## Requirements
|
|
36
|
+
|
|
37
|
+
- Angular 17 or newer (`@angular/core` and `@angular/common` are peer
|
|
38
|
+
dependencies).
|
|
39
|
+
- A browser DOM: the chart is created when the component initialises.
|
|
18
40
|
|
|
19
41
|
## Install
|
|
20
42
|
|
|
@@ -22,10 +44,9 @@ Angular components.
|
|
|
22
44
|
npm install @seatlayer/angular
|
|
23
45
|
```
|
|
24
46
|
|
|
25
|
-
|
|
26
|
-
directly, no NgModule needed.
|
|
47
|
+
The component is **standalone** — import it directly, no NgModule needed.
|
|
27
48
|
|
|
28
|
-
##
|
|
49
|
+
## Quick start
|
|
29
50
|
|
|
30
51
|
```ts
|
|
31
52
|
import { Component, ViewChild } from '@angular/core';
|
|
@@ -39,6 +60,7 @@ import { SeatLayerSeatingChartComponent, type SelectedSeat } from '@seatlayer/an
|
|
|
39
60
|
<seatlayer-seating-chart
|
|
40
61
|
#chart
|
|
41
62
|
event="ev_9f3a"
|
|
63
|
+
publicKey="pk_live_your_publishable_key"
|
|
42
64
|
style="display:block; height:520px"
|
|
43
65
|
(selectionChange)="onSelectionChange($event)"
|
|
44
66
|
(hold)="bookOnYourServer($event.holdId)"
|
|
@@ -68,12 +90,16 @@ export class CheckoutComponent {
|
|
|
68
90
|
| `selectableObjects` | `string[] \| null` | Buyer-selectable allow-list. |
|
|
69
91
|
| `numberOfPlacesToSelect` | `number` | Exact count required for a valid selection. |
|
|
70
92
|
| `selectionValidators` | `PickerSelectionValidator[]` | Minimum, consecutive-seat, and no-orphan guards. |
|
|
71
|
-
| `publicKey` | `string` |
|
|
93
|
+
| `publicKey` | `string` | Publishable browser key for public Platform events. Configure the browser origin in SeatLayer. |
|
|
72
94
|
| `locale` | `string` | BCP-47 locale for built-in copy. |
|
|
73
95
|
| `currency` | `string` | ISO currency for price formatting. |
|
|
74
96
|
| `colorblindSafe` | `boolean` | Render colorblind-safe seat glyphs. |
|
|
75
97
|
| `seatTooltip` | `boolean` | Set `false` to draw your own popover from `(seatHover)`. |
|
|
76
98
|
| `messages` | `object` | Copy overrides. Read once per rebuild. |
|
|
99
|
+
| `initialView` | `RendererViewMode` | Initial 2D projection, read once per rebuild. |
|
|
100
|
+
| `errorDisplay` | `'message' \| 'none'` | `'message'` (default) shows a notice with Try again; `'none'` is silent. |
|
|
101
|
+
| `buyerAccessTokenProvider` | `BuyerAccessTokenProvider` | Sales Channels: mint a buyer access session on demand from your backend. |
|
|
102
|
+
| `buyerAccessToken` | `string \| BuyerAccessToken` | One-shot session for hosts that own the lifecycle. Cannot be renewed. |
|
|
77
103
|
|
|
78
104
|
`numberOfPlacesToSelect`, `selectionValidators`, and the other identity inputs rebuild the
|
|
79
105
|
canvas. `selectedObjects` and `selectableObjects` are initial values; use the
|
|
@@ -96,6 +122,9 @@ mid-selection because an array instance changed.
|
|
|
96
122
|
| `(deckTap)` | `string` (floor id) |
|
|
97
123
|
| `(hint)` | `string \| null` — `null` clears the hint |
|
|
98
124
|
| `(seatHover)` | `SeatHoverDetails \| null` — `null` when the pointer leaves |
|
|
125
|
+
| `(accessExpired)` | `BuyerAccessExpiredEvent` |
|
|
126
|
+
| `(accessUnavailable)` | `BuyerAccessUnavailableEvent` |
|
|
127
|
+
| `(selectedObjectUnavailable)` | `SelectedObjectUnavailableEvent` |
|
|
99
128
|
|
|
100
129
|
> `(errored)` rather than `(error)`: `error` collides with the native DOM error
|
|
101
130
|
> event on the host element, which would fire your handler for unrelated
|
|
@@ -111,7 +140,10 @@ Via a template ref (`#chart`):
|
|
|
111
140
|
`deselectCategories` · `setSelectableObjects` · `setMaxSelection` ·
|
|
112
141
|
`getSelectionValidity` ·
|
|
113
142
|
`getFloors` · `setFloor` · `setColorblindSafe` · `zoomIn` · `zoomOut` ·
|
|
114
|
-
`zoomToFit`
|
|
143
|
+
`zoomToFit` · `refreshAccess`
|
|
144
|
+
|
|
145
|
+
Calling any of them before the chart exists returns an empty answer rather than
|
|
146
|
+
throwing, so a template ref used one frame early is safe.
|
|
115
147
|
|
|
116
148
|
> `holdSelection()` rather than `hold()`: `hold` is already the name of the
|
|
117
149
|
> `@Output`, and a class cannot have both.
|
|
@@ -129,13 +161,118 @@ re-enters the zone only to emit, which is the only part Angular needs to see.
|
|
|
129
161
|
- `attachPickerFrame` — raw framework-agnostic JavaScript iframe helper; grows on `seatlayer:height` and
|
|
130
162
|
pins on `seatlayer:fullscreen`.
|
|
131
163
|
|
|
132
|
-
##
|
|
164
|
+
## Security boundary
|
|
165
|
+
|
|
166
|
+
The Angular app **selects and holds** inventory. Your trusted backend **inspects
|
|
167
|
+
and books** the hold after payment or order validation.
|
|
168
|
+
|
|
169
|
+
- Never ship a SeatLayer secret key in browser code or a bundled environment
|
|
170
|
+
file.
|
|
171
|
+
- A `pk_` public key is designed for browser code. SeatLayer binds it to the
|
|
172
|
+
configured origin and event; keep private-channel access behind a server-minted
|
|
173
|
+
`buyerAccessTokenProvider`.
|
|
174
|
+
- Send only the `holdId` and your normal checkout context to your backend.
|
|
175
|
+
- Calculate the charge from server-inspected hold items, not from browser input.
|
|
176
|
+
- Reuse your stable order id as `bookingRef` so a retried booking is idempotent.
|
|
177
|
+
|
|
178
|
+
Read [how the integration works](https://docs.seatlayer.io/start/how-it-works/)
|
|
179
|
+
before connecting checkout.
|
|
180
|
+
|
|
181
|
+
## Architecture
|
|
182
|
+
|
|
183
|
+
This package is a thin Angular layer over
|
|
184
|
+
[`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js), the
|
|
185
|
+
framework-agnostic browser runtime. The component's template is a single
|
|
186
|
+
`<div>`, `ngOnChanges` decides which inputs rebuild the chart, and the
|
|
187
|
+
imperative methods forward to the runtime handle. Chart geometry, availability,
|
|
188
|
+
and holds come from the SeatLayer API at runtime.
|
|
189
|
+
|
|
190
|
+
## Frequently asked questions
|
|
191
|
+
|
|
192
|
+
### How do I add a seat map to an Angular app?
|
|
193
|
+
|
|
194
|
+
Install `@seatlayer/angular`, import the standalone
|
|
195
|
+
`SeatLayerSeatingChartComponent`, and put `<seatlayer-seating-chart
|
|
196
|
+
event="ev_…">` on screen inside a block with a definite height. That is a
|
|
197
|
+
complete interactive seating chart with live availability; the
|
|
198
|
+
[seat-picker documentation](https://docs.seatlayer.io/buyer-sdk/seat-picker/)
|
|
199
|
+
covers inputs, outputs, holds, and checkout in depth.
|
|
200
|
+
|
|
201
|
+
### Is this a real Angular component or an iframe?
|
|
202
|
+
|
|
203
|
+
`SeatLayerSeatingChartComponent` is a real standalone Angular component whose
|
|
204
|
+
template is a plain `<div>` in your own tree — no iframe and no stylesheet of
|
|
205
|
+
its own. Its render loop and pointer handlers are created outside the Angular
|
|
206
|
+
zone and re-enter it only to emit, so a running chart does not schedule change
|
|
207
|
+
detection on every frame. If you would rather embed the buyer picker in an iframe,
|
|
208
|
+
`attachPickerFrame` is exported for that.
|
|
209
|
+
|
|
210
|
+
### How do temporary seat holds work?
|
|
211
|
+
|
|
212
|
+
When a buyer commits to a selection, `holdSelection()` reserves that inventory
|
|
213
|
+
against concurrent buyers for a limited checkout window and returns an opaque
|
|
214
|
+
`holdId`. The hold lapses on its own if checkout never completes —
|
|
215
|
+
`(holdExpired)` tells the app to return the buyer to the map — and
|
|
216
|
+
`resumeHold()` restores it after a same-tab checkout navigation or a reload.
|
|
217
|
+
This is what prevents double-selling without locking seats forever.
|
|
218
|
+
|
|
219
|
+
### Can I use my own payment provider?
|
|
220
|
+
|
|
221
|
+
Yes. Nothing in this package takes a payment. The browser hands your code a
|
|
222
|
+
`holdId` and priced line items, your backend charges through whatever provider
|
|
223
|
+
you already use, and it then books the hold through the
|
|
224
|
+
[server-side checkout flow](https://docs.seatlayer.io/buyer-sdk/holds-and-checkout/).
|
|
225
|
+
|
|
226
|
+
### Can I evaluate it without a SeatLayer account?
|
|
227
|
+
|
|
228
|
+
You can explore a live seating chart in the browser at the
|
|
229
|
+
[buyer seat-map demo](https://app.seatlayer.io/demo/play/grand-theatre) with no
|
|
230
|
+
account. Rendering your own venue needs an event key, because the chart and its
|
|
231
|
+
availability are served by the SeatLayer API — create a free test event for
|
|
232
|
+
that, which books no real inventory.
|
|
233
|
+
|
|
234
|
+
## Continue your Angular integration
|
|
235
|
+
|
|
236
|
+
- [Follow the buyer SDK installation guide](https://docs.seatlayer.io/buyer-sdk/install/)
|
|
237
|
+
for the full browser integration, options, and events.
|
|
238
|
+
- [Connect seat holds to secure server-side checkout](https://docs.seatlayer.io/buyer-sdk/holds-and-checkout/)
|
|
239
|
+
without putting booking credentials in the browser.
|
|
240
|
+
- [Run the complete checkout example](https://docs.seatlayer.io/examples/complete-checkout/)
|
|
241
|
+
to connect a buyer hold id to payment and idempotent booking.
|
|
242
|
+
- [Compare SeatLayer's mobile seat map SDKs](https://docs.seatlayer.io/buyer-sdk/mobile/)
|
|
243
|
+
when the same event also has to render in native iOS, Android, Flutter, or
|
|
244
|
+
React Native apps.
|
|
245
|
+
- [Read the embedded Designer guide](https://docs.seatlayer.io/platform/embedded-designer/)
|
|
246
|
+
to let organizers draw their own venues inside your product.
|
|
247
|
+
- [Explore the 3D seating chart](https://seatlayer.io/3d-seat-map/) for the
|
|
248
|
+
interactive venue view buyers can switch to from the map.
|
|
249
|
+
- [Point AI coding agents at the SeatLayer docs index](https://docs.seatlayer.io/llms.txt)
|
|
250
|
+
(`llms.txt`) for an agent-readable map of the documentation.
|
|
251
|
+
|
|
252
|
+
## SeatLayer SDK ecosystem
|
|
253
|
+
|
|
254
|
+
| Surface | Package or source |
|
|
255
|
+
| --- | --- |
|
|
256
|
+
| JavaScript | [`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js) |
|
|
257
|
+
| React | [`@seatlayer/react`](https://www.npmjs.com/package/@seatlayer/react) |
|
|
258
|
+
| Vue | [`@seatlayer/vue`](https://www.npmjs.com/package/@seatlayer/vue) |
|
|
259
|
+
| Angular | [`@seatlayer/angular`](https://www.npmjs.com/package/@seatlayer/angular) (this package) |
|
|
260
|
+
| React Native | [`@seatlayer/react-native`](https://www.npmjs.com/package/@seatlayer/react-native) |
|
|
261
|
+
| iOS | [`seatlayer-ios`](https://github.com/seatlayer/seatlayer-ios) |
|
|
262
|
+
| Flutter | [`seatlayer`](https://pub.dev/packages/seatlayer) |
|
|
263
|
+
| Android | [`seatlayer-android`](https://github.com/seatlayer/seatlayer-android) |
|
|
264
|
+
| Server SDKs | [Node.js, Python, PHP, Ruby, .NET, Java, and Go](https://docs.seatlayer.io/server-sdk/install/) |
|
|
265
|
+
|
|
266
|
+
## Development
|
|
267
|
+
|
|
268
|
+
```bash
|
|
269
|
+
pnpm install
|
|
270
|
+
pnpm verify
|
|
271
|
+
```
|
|
133
272
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
- [`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js) — framework-agnostic core
|
|
137
|
-
- [Server SDKs](https://docs.seatlayer.io/server-sdk/install/) — Node.js, Python, PHP, Java, Go, Ruby, .NET
|
|
273
|
+
Source, issues, and contribution guidance live in
|
|
274
|
+
[seatlayer/seatlayer-sdk](https://github.com/seatlayer/seatlayer-sdk).
|
|
138
275
|
|
|
139
276
|
## License
|
|
140
277
|
|
|
141
|
-
MIT
|
|
278
|
+
MIT © SeatLayer
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seatlayer/angular",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Angular
|
|
3
|
+
"version": "0.68.0",
|
|
4
|
+
"description": "SeatLayer's official Angular seating chart and seat map SDK — live availability, seat selection, temporary holds, and a typed TypeScript API for ticketing apps.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "SeatLayer",
|
|
@@ -18,17 +18,26 @@
|
|
|
18
18
|
},
|
|
19
19
|
"sideEffects": false,
|
|
20
20
|
"keywords": [
|
|
21
|
-
"
|
|
21
|
+
"seat map",
|
|
22
|
+
"seating chart",
|
|
22
23
|
"seat-map",
|
|
23
24
|
"seating-chart",
|
|
24
25
|
"seat-picker",
|
|
26
|
+
"seat-selection",
|
|
27
|
+
"seat-reservation",
|
|
28
|
+
"reserved-seating",
|
|
29
|
+
"seat-booking",
|
|
30
|
+
"event-ticketing",
|
|
31
|
+
"ticketing",
|
|
32
|
+
"live-inventory",
|
|
33
|
+
"seating",
|
|
25
34
|
"seatlayer",
|
|
26
35
|
"angular",
|
|
27
|
-
"
|
|
36
|
+
"typescript"
|
|
28
37
|
],
|
|
29
38
|
"dependencies": {
|
|
30
|
-
"@seatlayer/core": "0.
|
|
31
|
-
"@seatlayer/js": "0.
|
|
39
|
+
"@seatlayer/core": "0.68.0",
|
|
40
|
+
"@seatlayer/js": "0.68.0",
|
|
32
41
|
"tslib": "^2.8.1"
|
|
33
42
|
},
|
|
34
43
|
"peerDependencies": {
|