@seatschart/angular 0.0.0-stage → 0.2.0

package/dist/seat-chart.component.js

@@ -0,0 +1,132 @@
+import { isPlatformBrowser } from "@angular/common";
+import { ChangeDetectionStrategy, Component, ElementRef, NgZone, PLATFORM_ID, inject, } from "@angular/core";
+import { CHART_CALLBACKS, CHART_COMMANDS, CHART_KIND, EmbedBinding, runCommand, } from "./host-core.js";
+import { createOutputs, emitterOf, outputForwarders, pickInputs } from "./outputs.js";
+import * as i0 from "@angular/core";
+// Literal lists: the Angular compiler reads component metadata statically (checked against the embed below).
+const INPUTS = [
+    "objectColor", "objectLabel", "tooltip", "priceFormatter", "numberOfPlacesToSelect", "maxSelectedObjects",
+    "showSectionContents", "showMinimap", "showSurroundings", "sessionMode", "selectionValidators", "accessibilityFilter",
+    "mode", "prompts", "objectWithoutPricingSelectable", "fitTo", "loading", "messages", "selectedObjects",
+    "gestureHandling", "selectionModes", "showSeatLabels", "minimumSelectedPlaces", "sectionColor", "objectIcon",
+    "isObjectVisible", "hideSectionsNotForSale", "selectableObjects", "objectWithoutCategorySelectable",
+    "showSectionPricingOverlay", "showObjectPopover", "showFilterControls", "showLegend", "showZoomOutButton",
+    "showFullScreenButton", "fullScreenTarget", "canGoBack", "resaleListings", "partySize", "chartStyle", "objectPopover",
+    "legend", "filterControls", "activeFloor", "lockActiveFloor", "showFloorElevator", "settings3d",
+    "webBase", "event", "events", "publicKey", "workspaceKey", "token", "parentOrigin", "channel", "channelKey",
+    "channelKeys", "session", "season", "language", "multiSelectEnabled", "holdToken", "availableCategories",
+    "unavailableCategories", "currency", "theme", "statusPalette", "transparent", "backgroundColor", "pricing",
+    "defaultRenderer", "height", "title", "className", "allowFullscreen", "timeoutMs", "holdTokenInputName",
+    "selectedObjectsInputName", "form",
+];
+const OUTPUTS = [
+    "objectSelected", "objectDeselected", "sessionHold", "holdSucceeded", "holdCallsInProgress", "holdCallsComplete",
+    "holdConfirmed", "releaseHoldSucceeded", "releaseHoldFailed", "selectedObjectUnavailable", "chartRerenderingStarted",
+    "promptRequest", "holdTokenExpired", "chartRendered", "chartRenderingFailed", "objectClicked", "objectHovered",
+    "objectUnhovered", "holdFailed", "selectionInvalid", "selectionValid", "objectStatusChanged", "bestAvailableSelected",
+    "bestAvailableFailed", "filteredCategoriesChanged", "accessibilityFilterChanged", "filtersChanged",
+    "sessionInitialized", "floorChanged", "fullScreenOpened", "fullScreenClosed", "fullScreenRequest", "objectMouseOver",
+    "objectMouseOut", "bestAvailableSelectionFailed", "selectedObjectBooked", "holdCreated",
+    "placesPrompt", "ticketTypePrompt", "placesWithTicketTypesPrompt",
+];
+const PROMPTS = [
+    ["onPlacesPrompt", "placesPrompt", "places"],
+    ["onTicketTypePrompt", "ticketTypePrompt", "ticketType"],
+    ["onPlacesWithTicketTypesPrompt", "placesWithTicketTypesPrompt", "placesWithTicketTypes"],
+];
+const bindings = new WeakMap();
+/**
+ * `<seatschart-chart>`: the SeatsChart buyer seat map (sandboxed viewer iframe). Inputs map to the `SeatsChart`
+ * loader options; changes to declarative options (colours, labels, caps, pricing, prompts, `settings3d`, …) are
+ * applied live with `changeConfig`, other changes re-render the iframe (the hold session continues). Pass new object
+ * references to change object inputs (`OnChanges`). Every chart callback is an output; every `SeatsChart` command is a
+ * method (`@ViewChild(SeatChartComponent)`), each resolving once the chart rendered. `token` is a short-lived buyer
+ * JWT from your backend — never an API key.
+ */
+export class SeatChartComponent {
+    constructor() {
+        this.host = inject(ElementRef);
+        this.zone = inject(NgZone);
+        this.browser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.promptForwarders = {};
+        createOutputs(this, OUTPUTS);
+        bindings.set(this, new EmbedBinding(CHART_KIND));
+        this.forwarders = outputForwarders(this, CHART_CALLBACKS, this.zone);
+        for (const [callback, output] of PROMPTS) {
+            this.promptForwarders[callback] = (params, confirm, cancel) => {
+                const emitter = emitterOf(this, output);
+                if (!emitter.observed)
+                    cancel();
+                else
+                    this.zone.run(() => emitter.emit({ params, confirm, cancel }));
+            };
+        }
+    }
+    /**
+     * The underlying `SeatsChart` instance (null before the view is ready, on the server and after destroy):
+     * `chart?.selectedObjects` and `chart?.holdToken` give the live selection and hold token synchronously (the
+     * component's `selectedObjects` / `holdToken` are the inputs).
+     */
+    get chart() {
+        return bindings.get(this)?.current ?? null;
+    }
+    getIframe() {
+        return this.chart?.getIframe() ?? null;
+    }
+    /** Re-create the iframe with the current inputs; an active hold session continues. */
+    rerender() {
+        this.zone.runOutsideAngular(() => bindings.get(this)?.rerender());
+    }
+    ngOnChanges() {
+        const config = this.config();
+        // Outside the zone: chart messages without a subscribed output never trigger change detection.
+        this.zone.runOutsideAngular(() => bindings.get(this)?.update(config));
+    }
+    ngAfterViewInit() {
+        if (!this.browser)
+            return; // Server rendering: the host element only.
+        const config = this.config();
+        this.zone.runOutsideAngular(() => bindings.get(this)?.mount(this.host.nativeElement, config));
+    }
+    ngOnDestroy() {
+        bindings.get(this)?.destroy();
+    }
+    config() {
+        const options = pickInputs(this, INPUTS);
+        if (options.chartStyle !== undefined)
+            options.style = options.chartStyle;
+        delete options.chartStyle;
+        // A subscribed prompt output switches its viewer prompt to the host (same merge as the loader).
+        const prompts = { ...(this.prompts ?? {}) };
+        for (const [callback, output, prompt] of PROMPTS) {
+            if (!emitterOf(this, output).observed)
+                continue;
+            prompts[prompt] = true;
+            options[callback] = this.promptForwarders[callback];
+        }
+        if (Object.keys(prompts).length > 0)
+            options.prompts = prompts;
+        else
+            delete options.prompts;
+        return { ...options, ...this.forwarders };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SeatChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: SeatChartComponent, isStandalone: true, selector: "seatschart-chart", inputs: { objectColor: "objectColor", objectLabel: "objectLabel", tooltip: "tooltip", priceFormatter: "priceFormatter", numberOfPlacesToSelect: "numberOfPlacesToSelect", maxSelectedObjects: "maxSelectedObjects", showSectionContents: "showSectionContents", showMinimap: "showMinimap", showSurroundings: "showSurroundings", sessionMode: "sessionMode", selectionValidators: "selectionValidators", accessibilityFilter: "accessibilityFilter", mode: "mode", prompts: "prompts", objectWithoutPricingSelectable: "objectWithoutPricingSelectable", fitTo: "fitTo", loading: "loading", messages: "messages", selectedObjects: "selectedObjects", gestureHandling: "gestureHandling", selectionModes: "selectionModes", showSeatLabels: "showSeatLabels", minimumSelectedPlaces: "minimumSelectedPlaces", sectionColor: "sectionColor", objectIcon: "objectIcon", isObjectVisible: "isObjectVisible", hideSectionsNotForSale: "hideSectionsNotForSale", selectableObjects: "selectableObjects", objectWithoutCategorySelectable: "objectWithoutCategorySelectable", showSectionPricingOverlay: "showSectionPricingOverlay", showObjectPopover: "showObjectPopover", showFilterControls: "showFilterControls", showLegend: "showLegend", showZoomOutButton: "showZoomOutButton", showFullScreenButton: "showFullScreenButton", fullScreenTarget: "fullScreenTarget", canGoBack: "canGoBack", resaleListings: "resaleListings", partySize: "partySize", chartStyle: "chartStyle", objectPopover: "objectPopover", legend: "legend", filterControls: "filterControls", activeFloor: "activeFloor", lockActiveFloor: "lockActiveFloor", showFloorElevator: "showFloorElevator", settings3d: "settings3d", webBase: "webBase", event: "event", events: "events", publicKey: "publicKey", workspaceKey: "workspaceKey", token: "token", parentOrigin: "parentOrigin", channel: "channel", channelKey: "channelKey", channelKeys: "channelKeys", session: "session", season: "season", language: "language", multiSelectEnabled: "multiSelectEnabled", holdToken: "holdToken", availableCategories: "availableCategories", unavailableCategories: "unavailableCategories", currency: "currency", theme: "theme", statusPalette: "statusPalette", transparent: "transparent", backgroundColor: "backgroundColor", pricing: "pricing", defaultRenderer: "defaultRenderer", height: "height", title: "title", className: "className", allowFullscreen: "allowFullscreen", timeoutMs: "timeoutMs", holdTokenInputName: "holdTokenInputName", selectedObjectsInputName: "selectedObjectsInputName", form: "form" }, outputs: { objectSelected: "objectSelected", objectDeselected: "objectDeselected", sessionHold: "sessionHold", holdSucceeded: "holdSucceeded", holdCallsInProgress: "holdCallsInProgress", holdCallsComplete: "holdCallsComplete", holdConfirmed: "holdConfirmed", releaseHoldSucceeded: "releaseHoldSucceeded", releaseHoldFailed: "releaseHoldFailed", selectedObjectUnavailable: "selectedObjectUnavailable", chartRerenderingStarted: "chartRerenderingStarted", promptRequest: "promptRequest", holdTokenExpired: "holdTokenExpired", chartRendered: "chartRendered", chartRenderingFailed: "chartRenderingFailed", objectClicked: "objectClicked", objectHovered: "objectHovered", objectUnhovered: "objectUnhovered", holdFailed: "holdFailed", selectionInvalid: "selectionInvalid", selectionValid: "selectionValid", objectStatusChanged: "objectStatusChanged", bestAvailableSelected: "bestAvailableSelected", bestAvailableFailed: "bestAvailableFailed", filteredCategoriesChanged: "filteredCategoriesChanged", accessibilityFilterChanged: "accessibilityFilterChanged", filtersChanged: "filtersChanged", sessionInitialized: "sessionInitialized", floorChanged: "floorChanged", fullScreenOpened: "fullScreenOpened", fullScreenClosed: "fullScreenClosed", fullScreenRequest: "fullScreenRequest", objectMouseOver: "objectMouseOver", objectMouseOut: "objectMouseOut", bestAvailableSelectionFailed: "bestAvailableSelectionFailed", selectedObjectBooked: "selectedObjectBooked", holdCreated: "holdCreated", placesPrompt: "placesPrompt", ticketTypePrompt: "ticketTypePrompt", placesWithTicketTypesPrompt: "placesWithTicketTypesPrompt" }, host: { attributes: { "data-seatschart-chart": "" } }, usesOnChanges: true, ngImport: i0, template: "", isInline: true, styles: [":host{display:block}"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SeatChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "seatschart-chart", standalone: true, template: "", changeDetection: ChangeDetectionStrategy.OnPush, host: { "data-seatschart-chart": "" }, inputs: [...INPUTS], outputs: [...OUTPUTS], styles: [":host{display:block}"] }]
+        }], ctorParameters: () => [] });
+for (const name of CHART_COMMANDS) {
+    Object.defineProperty(SeatChartComponent.prototype, name, {
+        configurable: true,
+        writable: true,
+        value(...args) {
+            return runCommand(bindings.get(this)?.current ?? null, name, CHART_KIND.label, args);
+        },
+    });
+}
+/** `<seatschart-chart>` input names (`chartStyle` is the chart `style` option). */
+export const SEAT_CHART_INPUTS = INPUTS;
+/** `<seatschart-chart>` output names (`onObjectSelected` → `objectSelected`, plus the three prompts). */
+export const SEAT_CHART_OUTPUTS = OUTPUTS;

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@seatschart/angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Angular standalone components for SeatsChart seat maps: buyer chart, Event Manager and designer embeds",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/seatschart/seatschart-prod.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "seatschart",
+    "seats",
+    "angular",
+    "embed",
+    "ticketing"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "ngc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "bun test src",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0"
+  },
+  "dependencies": {
+    "@seatschart/embed": "^0.6.0"
+  },
+  "devDependencies": {
+    "@angular/common": "21.2.25",
+    "@angular/compiler": "21.2.25",
+    "@angular/compiler-cli": "21.2.25",
+    "@angular/core": "21.2.25",
+    "@angular/platform-browser": "21.2.25",
+    "@happy-dom/global-registrator": "^21.0.4",
+    "happy-dom": "^21.0.4",
+    "rxjs": "^7.8.2",
+    "typescript": "~6.0.3"
+  },
+  "sideEffects": false
+}