@coras-io/embed 0.1.0

package/dist/components/seats-io/seats-io.styles.js

@@ -0,0 +1,15 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: block;
+    height: 100%;
+  }
+
+  #chart {
+    width: 100%;
+    height: 100%;
+  }
+`;

package/dist/components/seats-io/seats-io.transform.d.ts

@@ -0,0 +1,77 @@
+import type { SelectableObject, Section, CategoryKey } from "@seatsio/seatsio-types";
+import { components } from "../../core/types/api-schema.js";
+import { SupportedCurrencies } from "../../core/types/index.js";
+type SeatCategory = components["schemas"]["SeatCategory"];
+type TicketRequest = components["schemas"]["AttractionTicketRequestSchema"];
+export interface AvailableSeat {
+    corasSeatID: string;
+    priceTypeID: string;
+    categoryID: number;
+    restrictedView: string | null;
+}
+export interface ChartCategory {
+    key: string;
+    label: string;
+    color: string;
+}
+export interface ChartPricing {
+    category: CategoryKey;
+    price: number;
+}
+export interface FlatPriceBand {
+    categoryId: number;
+    priceTypeId: string;
+    basePrice: number;
+    fullPrice: number;
+    bookingFee: number;
+    validSplits: number[];
+}
+export interface SelectedSeat {
+    id: string;
+    seatLabel: string;
+}
+export interface SelectionGroup {
+    categoryKey: string;
+    label: string;
+    color: string;
+    seatLabels: string[];
+    unitPrice: number;
+    count: number;
+}
+export interface SelectionSummary {
+    groups: SelectionGroup[];
+    total: number;
+}
+export interface SeatsChartData {
+    categories: ChartCategory[];
+    objectCategories: Record<string, string>;
+    pricing: ChartPricing[];
+    selectableObjects: string[];
+    availableSeats: Record<string, AvailableSeat>;
+    flatPriceBands: FlatPriceBand[];
+}
+/**
+ * Coras charts carry only the layout; categories, prices and availability all
+ * come from the Coras API. The seats response is self-contained: each category
+ * bundles its seats and its price band, which fold into the shape the seats.io
+ * renderer needs.
+ */
+export declare const buildChartData: (response: SeatCategory | SeatCategory[], currency: SupportedCurrencies) => SeatsChartData;
+export declare const findPriceBand: (seatLabel: string, availableSeats: Record<string, AvailableSeat>, flatPriceBands: FlatPriceBand[]) => FlatPriceBand | undefined;
+/**
+ * Maps the selected seat labels back to reservation tickets, grouped by price
+ * type + category, carrying the coras_seat_id values the API books with.
+ */
+export declare const buildTickets: (selectedLabels: string[], availableSeats: Record<string, AvailableSeat>, flatPriceBands: FlatPriceBand[]) => TicketRequest[];
+/**
+ * Groups the selected seats by price-band category for the booking drawer:
+ * one row per category with its colour, seat labels, unit price (incl. fees)
+ * and count, plus the order total. All amounts in minor units.
+ */
+export declare const buildSelectionSummary: (seats: SelectedSeat[], availableSeats: Record<string, AvailableSeat>, flatPriceBands: FlatPriceBand[], categories: ChartCategory[]) => SelectionSummary;
+export declare const makeIsSeatSelectable: (availableSeats: Record<string, AvailableSeat>) => (object: SelectableObject) => boolean;
+export declare const makeObjectColor: (availableSeats: Record<string, AvailableSeat>, categoryColors: Record<string, string>) => (object: SelectableObject, defaultColor: string) => string;
+export declare const setSectionColor: (section: Section, _defaultColor: string) => string;
+export declare const makeRestrictedViewInfo: (availableSeats: Record<string, AvailableSeat>) => (object: SelectableObject) => string;
+export declare const categoryColorMap: (categories: ChartCategory[]) => Record<string, string>;
+export {};

package/dist/components/seats-io/seats-io.transform.js

@@ -0,0 +1,152 @@
+import { CATEGORY_COLORS, SECTION_AVAILABLE_COLOR, SECTION_UNAVAILABLE_COLOR, } from "./seats-io.constants.js";
+const toArray = (response) => Array.isArray(response) ? response : [response];
+const bandLabel = (band, categoryId) => band.price_category || band.section_name || String(categoryId);
+const flattenPriceBand = (band, currency) => (band.price_types ?? []).map((priceType) => ({
+    categoryId: band.id,
+    priceTypeId: priceType.price_type_id,
+    basePrice: priceType.price?.[currency] ?? 0,
+    fullPrice: priceType.min_full_price?.[currency] ?? priceType.price?.[currency] ?? 0,
+    bookingFee: priceType.min_booking_fee?.[currency] ?? 0,
+    validSplits: priceType.valid_splits ?? [],
+}));
+/**
+ * Coras charts carry only the layout; categories, prices and availability all
+ * come from the Coras API. The seats response is self-contained: each category
+ * bundles its seats and its price band, which fold into the shape the seats.io
+ * renderer needs.
+ */
+export const buildChartData = (response, currency) => {
+    const objectCategories = {};
+    const availableSeats = {};
+    const categories = [];
+    const pricing = [];
+    const flatPriceBands = [];
+    toArray(response).forEach((group) => {
+        const categoryId = group.category_id;
+        const categoryKey = String(categoryId);
+        const seats = group.seats ?? {};
+        const band = group.price_band;
+        flatPriceBands.push(...flattenPriceBand(band, currency));
+        Object.entries(seats).forEach(([label, info]) => {
+            objectCategories[label] = categoryKey;
+            availableSeats[label] = {
+                corasSeatID: info.coras_seat_id,
+                priceTypeID: info.price_type_id,
+                categoryID: categoryId,
+                restrictedView: info.restricted_view,
+            };
+        });
+        if (Object.keys(seats).length === 0) {
+            return;
+        }
+        categories.push({
+            key: categoryKey,
+            label: bandLabel(band, categoryId),
+            color: CATEGORY_COLORS[categories.length % CATEGORY_COLORS.length],
+        });
+        pricing.push({
+            category: categoryKey,
+            price: band.price_types?.[0]?.price?.[currency] ?? 0,
+        });
+    });
+    return {
+        categories,
+        objectCategories,
+        pricing,
+        selectableObjects: Object.keys(objectCategories),
+        availableSeats,
+        flatPriceBands,
+    };
+};
+export const findPriceBand = (seatLabel, availableSeats, flatPriceBands) => {
+    const seat = availableSeats[seatLabel];
+    if (!seat) {
+        return undefined;
+    }
+    return flatPriceBands.find((band) => band.categoryId === seat.categoryID &&
+        band.priceTypeId === seat.priceTypeID);
+};
+/**
+ * Maps the selected seat labels back to reservation tickets, grouped by price
+ * type + category, carrying the coras_seat_id values the API books with.
+ */
+export const buildTickets = (selectedLabels, availableSeats, flatPriceBands) => {
+    const groups = new Map();
+    selectedLabels.forEach((label) => {
+        const seat = availableSeats[label];
+        const band = findPriceBand(label, availableSeats, flatPriceBands);
+        if (!seat || !band) {
+            return;
+        }
+        const key = `${seat.categoryID}:${seat.priceTypeID}`;
+        const existing = groups.get(key);
+        if (existing) {
+            existing.number_of_tickets += 1;
+            existing.seats.push(seat.corasSeatID);
+        }
+        else {
+            groups.set(key, {
+                price_type_id: seat.priceTypeID,
+                number_of_tickets: 1,
+                booking_fee: band.bookingFee,
+                seats: [seat.corasSeatID],
+            });
+        }
+    });
+    return [...groups.values()];
+};
+/**
+ * Groups the selected seats by price-band category for the booking drawer:
+ * one row per category with its colour, seat labels, unit price (incl. fees)
+ * and count, plus the order total. All amounts in minor units.
+ */
+export const buildSelectionSummary = (seats, availableSeats, flatPriceBands, categories) => {
+    const categoryByKey = new Map(categories.map((category) => [category.key, category]));
+    const groups = new Map();
+    let total = 0;
+    seats.forEach((seat) => {
+        const meta = availableSeats[seat.id];
+        const band = findPriceBand(seat.id, availableSeats, flatPriceBands);
+        if (!meta || !band) {
+            return;
+        }
+        total += band.fullPrice;
+        const key = String(meta.categoryID);
+        const existing = groups.get(key);
+        if (existing) {
+            existing.seatLabels.push(seat.seatLabel);
+            existing.count += 1;
+        }
+        else {
+            const category = categoryByKey.get(key);
+            groups.set(key, {
+                categoryKey: key,
+                label: category?.label ?? key,
+                color: category?.color ?? "",
+                seatLabels: [seat.seatLabel],
+                unitPrice: band.fullPrice,
+                count: 1,
+            });
+        }
+    });
+    return { groups: [...groups.values()], total };
+};
+const isReserved = (object) => {
+    const status = "status" in object ? object.status : undefined;
+    return status === "reservedByToken" || status === "booked";
+};
+export const makeIsSeatSelectable = (availableSeats) => (object) => !isReserved(object) && object.label in availableSeats;
+export const makeObjectColor = (availableSeats, categoryColors) => (object, defaultColor) => {
+    const seat = availableSeats[object.label];
+    if (!seat || isReserved(object)) {
+        return defaultColor;
+    }
+    return categoryColors[String(seat.categoryID)] ?? defaultColor;
+};
+export const setSectionColor = (section, _defaultColor) => section.numberOfSelectableObjects > 0
+    ? SECTION_AVAILABLE_COLOR
+    : SECTION_UNAVAILABLE_COLOR;
+// Price and category already show in the default popover; the restricted-view
+// note is the one piece of seat info the renderer doesn't surface on its own.
+export const makeRestrictedViewInfo = (availableSeats) => (object) => availableSeats[object.label]?.restrictedView ?? "";
+export const categoryColorMap = (categories) => Object.fromEntries(categories.map((category) => [category.key, category.color]));

package/dist/components/select-list/select-list.component.d.ts

@@ -0,0 +1,19 @@
+import { CSSResultGroup, LitElement } from "lit";
+export declare class CorasSelectList extends LitElement {
+    static styles: CSSResultGroup;
+    caption: string;
+    spacious: boolean;
+    height: "long" | "short";
+    private focusedIndex;
+    private typeAheadBuffer;
+    private typeAheadTimeout;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private getOptions;
+    private updateFocusedOption;
+    private handleKeyDown;
+    private handleTypeAhead;
+    private handleFocus;
+    setInitialFocus(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/select-list/select-list.component.js

@@ -0,0 +1,160 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from "lit";
+import { state } from "lit/decorators.js";
+import styles from "./select-list.styles.js";
+import { property } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+export class CorasSelectList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.caption = "";
+        this.spacious = false;
+        this.height = "long";
+        this.focusedIndex = -1;
+        this.typeAheadBuffer = "";
+        this.typeAheadTimeout = null;
+        this.handleKeyDown = (event) => {
+            const options = this.getOptions();
+            if (options.length === 0)
+                return;
+            switch (event.key) {
+                case "ArrowDown": {
+                    event.preventDefault();
+                    const nextIndex = this.focusedIndex < options.length - 1 ? this.focusedIndex + 1 : 0;
+                    this.updateFocusedOption(nextIndex);
+                    break;
+                }
+                case "ArrowUp": {
+                    event.preventDefault();
+                    const prevIndex = this.focusedIndex > 0 ? this.focusedIndex - 1 : options.length - 1;
+                    this.updateFocusedOption(prevIndex);
+                    break;
+                }
+                case "Enter":
+                case " ":
+                    event.preventDefault();
+                    if (this.focusedIndex >= 0) {
+                        const focusedOption = options[this.focusedIndex];
+                        if (focusedOption) {
+                            focusedOption.click();
+                        }
+                    }
+                    break;
+                case "Home":
+                    event.preventDefault();
+                    this.updateFocusedOption(0);
+                    break;
+                case "End":
+                    event.preventDefault();
+                    this.updateFocusedOption(options.length - 1);
+                    break;
+                default:
+                    // Type-ahead functionality
+                    if (event.key.length === 1 && /[a-zA-Z0-9]/.test(event.key)) {
+                        event.preventDefault();
+                        this.handleTypeAhead(event.key.toLowerCase());
+                    }
+                    break;
+            }
+        };
+        this.handleFocus = () => {
+            this.setInitialFocus();
+        };
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "listbox");
+        this.setAttribute("tabindex", "0");
+        this.addEventListener("keydown", this.handleKeyDown);
+        this.addEventListener("focus", this.handleFocus);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("keydown", this.handleKeyDown);
+        this.removeEventListener("focus", this.handleFocus);
+        if (this.typeAheadTimeout) {
+            clearTimeout(this.typeAheadTimeout);
+        }
+        super.disconnectedCallback();
+    }
+    getOptions() {
+        const slot = this.shadowRoot?.querySelector("slot");
+        if (!slot)
+            return [];
+        return slot
+            .assignedElements()
+            .filter((el) => el.tagName === "CORAS-SELECT-OPTION");
+    }
+    updateFocusedOption(index) {
+        const options = this.getOptions();
+        // Remove focus from all options
+        options.forEach((option) => {
+            option.setAttribute("aria-selected", "false");
+            option.removeAttribute("focused"); // Using an attribute for styling
+        });
+        // Focus on the new option
+        if (index >= 0 && index < options.length) {
+            this.focusedIndex = index;
+            const focusedOption = options[index];
+            if (focusedOption) {
+                focusedOption.setAttribute("aria-selected", "true");
+                focusedOption.setAttribute("focused", ""); // For styling
+                focusedOption.scrollIntoView({ block: "nearest" });
+            }
+        }
+    }
+    handleTypeAhead(char) {
+        // Clear existing timeout
+        if (this.typeAheadTimeout) {
+            clearTimeout(this.typeAheadTimeout);
+        }
+        // Add character to buffer
+        this.typeAheadBuffer += char;
+        // Find a matching option
+        const options = this.getOptions();
+        const matchingIndex = options.findIndex((option) => option.innerText.toLowerCase().startsWith(this.typeAheadBuffer));
+        if (matchingIndex !== -1) {
+            this.updateFocusedOption(matchingIndex);
+        }
+        // Clear buffer after delay
+        this.typeAheadTimeout = window.setTimeout(() => {
+            this.typeAheadBuffer = "";
+        }, 1000);
+    }
+    setInitialFocus() {
+        // Set initial focus to the first option if none is selected
+        const options = this.getOptions();
+        const selectedIndex = options.findIndex((option) => option.hasAttribute("selected"));
+        if (selectedIndex !== -1) {
+            this.updateFocusedOption(selectedIndex);
+        }
+        else if (options.length > 0) {
+            this.updateFocusedOption(0);
+        }
+    }
+    render() {
+        return html `
+      ${when(this.caption, () => html `<div data-testid="caption" class="caption">
+            ${this.caption}
+          </div>`)}
+      <slot></slot>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasSelectList.prototype, "caption", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "spacious" })
+], CorasSelectList.prototype, "spacious", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], CorasSelectList.prototype, "height", void 0);
+__decorate([
+    state()
+], CorasSelectList.prototype, "focusedIndex", void 0);

package/dist/components/select-list/select-list.d.ts

@@ -0,0 +1,8 @@
+import { CorasSelectList } from "./select-list.component.js";
+export * from "./select-list.component.js";
+export default CorasSelectList;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-select-list": CorasSelectList;
+    }
+}

package/dist/components/select-list/select-list.js

@@ -0,0 +1,6 @@
+import { CorasSelectList } from "./select-list.component.js";
+export * from "./select-list.component.js";
+export default CorasSelectList;
+if (!customElements.get("coras-select-list")) {
+    customElements.define("coras-select-list", CorasSelectList);
+}

package/dist/components/select-list/select-list.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/select-list/select-list.styles.js

@@ -0,0 +1,46 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --select-list-caption-font-size: var(--coras-font-size-xl);
+    --select-list-caption-font-weight: var(--coras-font-weight-semibold);
+    --select-list-caption-icon-color: var(--coras-color-text);
+
+    --select-option-padding-y: 6px;
+    --select-option-padding-x: 12px;
+
+    display: flex;
+    flex-direction: column;
+    min-width: 264px;
+    padding: 8px 0;
+    list-style-type: none;
+
+    & > .caption {
+      padding: 0.6rem 1rem 0.9rem 1rem;
+      font-weight: var(--select-list-caption-font-weight);
+      font-size: var(--select-list-caption-font-size);
+      color: var(--select-list-caption-icon-color);
+    }
+  }
+
+  :host([height="short"]) {
+    max-height: 17.125rem; /* 274px in rem */
+    overflow-y: auto;
+  }
+
+  :host([spacious]) {
+    --select-option-padding-y: 12px;
+    --select-option-padding-x: 24px;
+
+    & > .caption {
+      padding: 0.6rem 1.5rem 0.9rem;
+    }
+  }
+
+  :host([spacious][height="short"]) {
+    max-height: 17.125rem; /* 274px in rem */
+    overflow-y: auto;
+  }
+`;

package/dist/components/select-list/select-option/select-option.component.d.ts

@@ -0,0 +1,7 @@
+import { CSSResultGroup, LitElement } from "lit";
+export declare class CorasSelectOption extends LitElement {
+    static styles: CSSResultGroup;
+    key: string;
+    selected: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/select-list/select-option/select-option.component.js

@@ -0,0 +1,28 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import styles from "./select-option.styles.js";
+export class CorasSelectOption extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.key = "";
+        this.selected = false;
+    }
+    static { this.styles = styles; }
+    render() {
+        this.setAttribute("role", "option");
+        this.setAttribute("aria-selected", this.selected.toString());
+        return html ` <slot></slot> `;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasSelectOption.prototype, "key", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasSelectOption.prototype, "selected", void 0);

package/dist/components/select-list/select-option/select-option.d.ts

@@ -0,0 +1,8 @@
+import { CorasSelectOption } from "./select-option.component.js";
+export * from "./select-option.component.js";
+export default CorasSelectOption;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-select-option": CorasSelectOption;
+    }
+}

package/dist/components/select-list/select-option/select-option.js

@@ -0,0 +1,6 @@
+import { CorasSelectOption } from "./select-option.component.js";
+export * from "./select-option.component.js";
+export default CorasSelectOption;
+if (!customElements.get("coras-select-option")) {
+    customElements.define("coras-select-option", CorasSelectOption);
+}

package/dist/components/select-list/select-option/select-option.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/select-list/select-option/select-option.styles.js

@@ -0,0 +1,52 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --select-option-font-size: var(--coras-font-size-base);
+    --select-option-line-height: var(--coras-font-size-2xl);
+    --select-option-color: var(--coras-color-text);
+    --select-option-hovered-background-color: var(--coras-color-surface-hover);
+    --select-option-selected-background-color: var(--coras-color-surface-hover);
+    --select-option-check-mark-color: var(--coras-color-primary-500);
+
+    --check-mark-size: 12px;
+
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 8px;
+    justify-content: flex-start;
+    align-items: center;
+    padding: var(--select-option-padding-y) var(--select-option-padding-x);
+    cursor: pointer;
+    position: relative;
+    font-size: var(--select-option-font-size);
+    line-height: var(--select-option-line-height);
+    color: var(--select-option-color);
+    padding-inline-end: calc(
+      var(--select-option-padding-x) + var(--check-mark-size)
+    );
+  }
+
+  :host(:hover) {
+    background-color: var(--select-option-hovered-background-color);
+  }
+
+  :host([focused]) {
+    background-color: var(--select-option-hovered-background-color);
+  }
+
+  :host([selected]:not(:hover)) {
+    background-color: var(--select-option-selected-background-color);
+  }
+
+  :host([selected])::after {
+    content: "✓";
+    position: absolute;
+    right: 0;
+    color: var(--select-option-check-mark-color);
+    padding-inline-end: var(--select-option-padding-x);
+  }
+`;

package/dist/components/selected-tickets-preview/selected-tickets-preview.component.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultGroup, LitElement } from "lit";
+export declare class CorasSelectedTicketsPreview extends LitElement {
+    static styles: CSSResultGroup;
+    open: boolean;
+    total: string;
+    private setVisibility;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/selected-tickets-preview/selected-tickets-preview.component.js

@@ -0,0 +1,51 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import styles from "./selected-tickets-preview.styles.js";
+let CorasSelectedTicketsPreview = class CorasSelectedTicketsPreview extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.total = "";
+    }
+    static { this.styles = styles; }
+    setVisibility() {
+        this.style.visibility = this.open ? "visible" : "hidden";
+    }
+    firstUpdated() {
+        this.setVisibility();
+        this.addEventListener("animationend", this.setVisibility);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("animationend", this.setVisibility);
+    }
+    render() {
+        return html `
+      <div class="content">
+        <slot name="details"></slot>
+
+        <div class="bottom">
+          <span class="total">${msg("Total")} ${this.total}</span>
+          <slot name="button"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], CorasSelectedTicketsPreview.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], CorasSelectedTicketsPreview.prototype, "total", void 0);
+CorasSelectedTicketsPreview = __decorate([
+    localized()
+], CorasSelectedTicketsPreview);
+export { CorasSelectedTicketsPreview };