@coras-io/embed 0.1.0

package/dist/components/attraction-header/attraction-header.styles.d.ts

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

package/dist/components/attraction-header/attraction-header.styles.js

@@ -0,0 +1,41 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --attraction-header-attraction-name-font-size: var(--coras-font-size-3xl);
+    --attraction-header-attraction-name-font-weight: var(
+      --coras-font-weight-semibold
+    );
+    --attraction-header-attraction-name-line-height: var(--coras-font-size-4xl);
+    --attraction-header-attraction-name-color: var(--coras-color-text);
+    --attraction-header-details-font-size: var(--coras-font-size-sm);
+    --attraction-header-details-font-weight: var(--coras-font-weight-normal);
+    --attraction-header-details-line-height: var(--coras-font-size-xl);
+    --attraction-header-details-color: var(--coras-color-text);
+
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+
+    h1 {
+      margin: 0;
+      font-size: var(--attraction-header-attraction-name-font-size);
+      font-weight: var(--attraction-header-attraction-name-font-weight);
+      line-height: var(--attraction-header-attraction-name-line-height);
+      color: var(--attraction-header-attraction-name-color);
+    }
+
+    .details {
+      display: inline-flex;
+      gap: 12px;
+      align-items: center;
+      font-size: var(--attraction-header-details-font-size);
+      font-weight: var(--attraction-header-details-font-weight);
+      line-height: var(--attraction-header-details-line-height);
+      color: var(--attraction-header-details-color);
+    }
+  }
+`;

package/dist/components/attraction-header/attraction-header.utils.d.ts

@@ -0,0 +1,20 @@
+import { TemplateResult } from "lit";
+import { components } from "../../core/types/api-schema.js";
+import { SupportedLocales } from "../../core/types/index.js";
+import "../star-rating/star-rating.js";
+interface AttractionHeaderDetailsParams {
+    attractionType?: components["schemas"]["AttractionEvent"]["attraction_type"];
+    rating?: components["schemas"]["Event"]["rating"];
+    city?: string | null;
+    locationName?: string | null;
+    totalInstances?: number;
+    firstInstanceDate?: string;
+    timezone?: string | null;
+    locale: SupportedLocales;
+}
+/**
+ * Determines the content for the secondary line of the attraction header.
+ * Encapsulates the business logic for displaying different metadata based on attraction type and availability.
+ */
+export declare const getAttractionHeaderDetails: (params: AttractionHeaderDetailsParams) => string | TemplateResult | (string | null)[];
+export {};

package/dist/components/attraction-header/attraction-header.utils.js

@@ -0,0 +1,37 @@
+import { html } from "lit";
+import { formatDateTimeForDisplay } from "../../core/utils/datetime.js";
+import "../star-rating/star-rating.js";
+/**
+ * Determines the content for the secondary line of the attraction header.
+ * Encapsulates the business logic for displaying different metadata based on attraction type and availability.
+ */
+export const getAttractionHeaderDetails = (params) => {
+    const { attractionType, rating, city, locationName, totalInstances, firstInstanceDate, timezone, locale, } = params;
+    if (totalInstances === 1 && firstInstanceDate) {
+        const formattedDate = formatDateTimeForDisplay({
+            dateTime: firstInstanceDate,
+            timezone: timezone || "UTC",
+            locale: locale,
+        }, {
+            includeTime: true,
+            includeYear: true,
+            shortFormat: false,
+        });
+        const parts = [formattedDate];
+        if (locationName)
+            parts.push(locationName);
+        return parts.join(", ");
+    }
+    if (attractionType === "TOUR") {
+        if (rating) {
+            return html `<coras-star-rating .rating=${rating}></coras-star-rating>`;
+        }
+        return city || "";
+    }
+    const parts = [];
+    if (locationName)
+        parts.push(locationName);
+    if (city)
+        parts.push(city);
+    return parts.join(", ");
+};

package/dist/components/attraction-option/attraction-option.component.d.ts

@@ -0,0 +1,11 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../icon/icon.js";
+export declare class CorasAttractionOption extends LitElement {
+    static styles: CSSResultGroup;
+    caption: string;
+    price: string;
+    details: string;
+    showTimeOptions: boolean;
+    showLanguageOptions: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/attraction-option/attraction-option.component.js

@@ -0,0 +1,82 @@
+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, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import "../icon/icon.js";
+import styles from "./attraction-option.styles.js";
+let CorasAttractionOption = class CorasAttractionOption extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.caption = "";
+        this.price = "";
+        this.details = "";
+        this.showTimeOptions = false;
+        this.showLanguageOptions = false;
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `
+      <slot name="badge"></slot>
+
+      <div data-testid="caption" class="caption">${this.caption}</div>
+
+      ${this.showTimeOptions && this.showLanguageOptions
+            ? html `<div class="divider"></div>`
+            : nothing}
+      ${this.showLanguageOptions
+            ? html `
+            <div data-testid="language-options" class="options">
+              <div class="options-header">
+                ${msg("Please select a tour language")}
+              </div>
+              <slot name="language-options"></slot>
+            </div>
+          `
+            : nothing}
+      ${this.showTimeOptions
+            ? html `
+            <div data-testid="time-options" class="options">
+              <div class="options-header">${msg("Please select a time")}</div>
+              <slot name="time-options"></slot>
+            </div>
+          `
+            : nothing}
+
+      <div class="divider"></div>
+
+      <div class="footer">
+        <span data-testid="details" class="details">${this.details}</span>
+
+        <div class="price-basket-button-container">
+          <span data-testid="price" class="price">${this.price}</span>
+
+          <slot name="basket-button"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], CorasAttractionOption.prototype, "caption", void 0);
+__decorate([
+    property({ type: String })
+], CorasAttractionOption.prototype, "price", void 0);
+__decorate([
+    property({ type: String })
+], CorasAttractionOption.prototype, "details", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-time-options" })
+], CorasAttractionOption.prototype, "showTimeOptions", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-language-options" })
+], CorasAttractionOption.prototype, "showLanguageOptions", void 0);
+CorasAttractionOption = __decorate([
+    localized()
+], CorasAttractionOption);
+export { CorasAttractionOption };

package/dist/components/attraction-option/attraction-option.d.ts

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

package/dist/components/attraction-option/attraction-option.js

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

package/dist/components/attraction-option/attraction-option.styles.d.ts

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

package/dist/components/attraction-option/attraction-option.styles.js

@@ -0,0 +1,132 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --padding-inline: 1.5rem;
+
+    --attraction-option-border-color: var(--coras-color-neutral-200);
+    --attraction-option-border-radius: var(--coras-radius-md);
+    --attraction-option-color-box-shadow: var(--coras-shadow-sm);
+
+    --attraction-option-caption-font-size: var(--coras-font-size-xl);
+    --attraction-option-caption-font-weight: var(--coras-font-weight-semibold);
+    --attraction-option-caption-line-height: 1.75rem;
+    --attraction-option-caption-color: var(--coras-color-text);
+
+    --attraction-option-header-font-size: var(--coras-font-size-base);
+    --attraction-option-header-font-weight: var(--coras-font-weight-normal);
+    --attraction-option-header-line-height: 1.625rem;
+    --attraction-option-header-color: var(--coras-color-text);
+
+    --attraction-option-divider-border-color: var(--coras-color-neutral-200);
+
+    --attraction-option-details-font-size: var(--coras-font-size-sm);
+    --attraction-option-details-font-weight: var(--coras-font-weight-normal);
+    --attraction-option-details-line-height: var(--coras-font-size-base);
+    --attraction-option-details-color: var(--coras-color-text);
+
+    --attraction-option-price-font-size: var(--coras-font-size-lg);
+    --attraction-option-price-font-weight: var(--coras-font-weight-normal);
+    --attraction-option-price-line-height: var(--coras-font-size-2xl);
+    --attraction-option-price-color: var(--coras-color-text);
+
+    --attraction-option-one-last-option-border-radius: var(--coras-radius-xl);
+    --attraction-option-one-last-option-font-size: var(--coras-font-size-xs);
+    --attraction-option-one-last-option-font-weight: var(
+      --coras-font-weight-normal
+    );
+    --attraction-option-one-last-option-line-height: var(--coras-font-size-sm);
+    --attraction-option-one-last-option-color: var(--coras-color-text);
+    --attraction-option-one-last-option-background-color: var(
+      --coras-color-error-50
+    );
+
+    --attraction-option-options-border-color: var(--coras-color-neutral-200);
+
+    display: flex;
+    flex-direction: column;
+    padding-top: 1rem;
+    padding-bottom: 0;
+    padding-inline: var(--padding-inline);
+
+    border: 1px solid var(--attraction-option-border-color);
+    border-radius: var(--attraction-option-border-radius);
+    box-shadow: var(--attraction-option-color-box-shadow);
+    overflow: hidden;
+
+    ::slotted(*[slot="badge"]) {
+      margin-top: 0.5rem;
+    }
+
+    .caption {
+      font-size: var(--attraction-option-caption-font-size);
+      font-weight: var(--attraction-option-caption-font-weight);
+      line-height: var(--attraction-option-caption-line-height);
+      color: var(--attraction-option-caption-color);
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+      white-space: pre-wrap;
+    }
+
+    .options {
+      display: flex;
+      flex-direction: column;
+      padding-top: 1.5rem;
+
+      .options-header {
+        font-size: var(--attraction-option-header-font-size);
+        font-weight: var(--attraction-option-header-font-weight);
+        line-height: var(--attraction-option-header-line-height);
+        color: var(--attraction-option-header-color);
+        margin-bottom: 0.875rem;
+      }
+    }
+
+    .divider {
+      border-top: 1px solid var(--attraction-option-divider-border-color);
+      margin-inline: calc(-1 * var(--padding-inline));
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .footer {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      margin-top: 0;
+      margin-inline: calc(-1 * var(--padding-inline));
+      padding-inline: var(--padding-inline);
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+      background-color: var(--coras-color-surface-muted);
+
+      .details {
+        font-size: var(--attraction-option-details-font-size);
+        font-weight: var(--attraction-option-details-font-weight);
+        line-height: var(--attraction-option-details-line-height);
+        color: var(--attraction-option-details-color);
+      }
+
+      .price-basket-button-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+
+        .price {
+          font-size: var(--attraction-option-price-font-size);
+          font-weight: var(--attraction-option-price-font-weight);
+          line-height: var(--attraction-option-price-line-height);
+          color: var(--attraction-option-price-color);
+        }
+      }
+    }
+
+    ::slotted(*[slot="language-options"]),
+    ::slotted(*[slot="time-options"]) {
+      margin-bottom: 1.5rem;
+    }
+  }
+`;

package/dist/components/basket/basket.component.d.ts

@@ -0,0 +1,28 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../button/button.js";
+import { SupportedCurrencies } from "../../core/types/index.js";
+export declare class CorasBasketItems extends LitElement {
+    static styles: CSSResultGroup;
+    expanded: boolean;
+    /** Total quantity of items in the basket. */
+    quantity: number;
+    /** Formatted total price in the selected fiat currency (e.g. "€217.32"). */
+    price: string;
+    /** Selected fiat currency code used in labels (e.g. "EUR", "USD"). */
+    currency: SupportedCurrencies;
+    /** Formatted crypto price shown as "Total in FIDA" (string). */
+    cryptoPrice: string;
+    /** Formatted amount of FIDA the user can earn (string). Used in a pill under the fiat total. */
+    cryptoEarn: string;
+    /** Base assets URL to resolve icons (e.g. /assets). Accepts relative or absolute http(s) only. */
+    assetsURL: string;
+    checkout: boolean;
+    loading: boolean;
+    loyaltyPoints: boolean;
+    private renderHeader;
+    private renderTotalsWhenCryptoProvided;
+    private renderPrice;
+    private renderButton;
+    private renderFooter;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/basket/basket.component.js

@@ -0,0 +1,162 @@
+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 { localized, msg } from "@lit/localize";
+import { LitElement, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import "../button/button.js";
+import styles from "./basket.styles.js";
+import { consume } from "@lit/context";
+import { loyaltyPointsContext } from "../../contexts/properties.context.js";
+let CorasBasketItems = class CorasBasketItems extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.expanded = false;
+        /** Total quantity of items in the basket. */
+        this.quantity = 0;
+        /** Formatted total price in the selected fiat currency (e.g. "€217.32"). */
+        this.price = "$0.00";
+        /** Selected fiat currency code used in labels (e.g. "EUR", "USD"). */
+        this.currency = "EUR";
+        /** Formatted crypto price shown as "Total in FIDA" (string). */
+        this.cryptoPrice = "0";
+        /** Formatted amount of FIDA the user can earn (string). Used in a pill under the fiat total. */
+        this.cryptoEarn = "0";
+        /** Base assets URL to resolve icons (e.g. /assets). Accepts relative or absolute http(s) only. */
+        this.assetsURL = "";
+        this.checkout = false;
+        this.loading = false;
+        this.loyaltyPoints = false;
+    }
+    static { this.styles = styles; }
+    renderHeader() {
+        return html `
+      <div class="header" part="header">
+        <span class="basket-title" part="title">${msg("Your basket")}</span>
+        <span
+          data-testid="checkout-quantity"
+          class="basket-quantity"
+          part="quantity"
+        >
+          (${this.quantity} ${msg("items")})
+        </span>
+      </div>
+    `;
+    }
+    renderTotalsWhenCryptoProvided() {
+        const hasRequiredParams = !!this.cryptoPrice && !!this.cryptoEarn;
+        if (!hasRequiredParams)
+            return undefined;
+        return html `
+      <div class="totals" part="totals">
+        <div class="total-row" data-testid="total-fida">
+          <span class="label" part="total-label">${msg("Total in FIDA")}</span>
+          <span class="value" part="total-value">
+            ${this.cryptoPrice}
+            <img
+              class="fida-logo"
+              src="${`${this.assetsURL}/payment/fida.svg`}"
+              alt="FIDA"
+            />
+          </span>
+        </div>
+
+        <div class="total-row" data-testid="total-fiat">
+          <span class="label" part="total-label">
+            ${msg("Total in")} ${this.currency}
+          </span>
+          <div class="value-earn-group">
+            <span class="value" part="total-value">
+              <span data-testid="checkout-total-price">${this.price}</span>
+            </span>
+            <div class="earn-pill" part="earn-pill" data-testid="earn-pill">
+              + ${msg("Earn")} ${this.cryptoEarn} FIDA
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderPrice() {
+        if (this.quantity < 1) {
+            return undefined;
+        }
+        if (this.loyaltyPoints && this.cryptoPrice && this.cryptoEarn) {
+            return this.renderTotalsWhenCryptoProvided();
+        }
+        return html `
+      <div class="price" part="price">
+        ${msg("Total Price")}
+        <span data-testid="checkout-total-price">${this.price}</span>
+      </div>
+    `;
+    }
+    renderButton() {
+        if (!this.checkout || this.quantity < 1) {
+            return undefined;
+        }
+        return html `
+      <div class="actions" part="actions">
+        <slot name="button"></slot>
+      </div>
+    `;
+    }
+    renderFooter() {
+        const price = this.renderPrice();
+        const button = this.renderButton();
+        // An empty basket has neither a total nor a checkout button; skip the footer
+        // entirely so its border/background don't show as a stray strip.
+        if (!price && !button) {
+            return nothing;
+        }
+        return html ` <div class="footer" part="footer">${price} ${button}</div> `;
+    }
+    render() {
+        return html `
+      <div class="basket" part="base" aria-label="${msg("Basket")}">
+        ${this.renderHeader()}
+        <div class="basket-content" part="content">
+          <slot></slot>
+        </div>
+        ${this.renderFooter()}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasBasketItems.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Number })
+], CorasBasketItems.prototype, "quantity", void 0);
+__decorate([
+    property({ type: String })
+], CorasBasketItems.prototype, "price", void 0);
+__decorate([
+    property({ type: String })
+], CorasBasketItems.prototype, "currency", void 0);
+__decorate([
+    property({ type: String, attribute: "crypto-price" })
+], CorasBasketItems.prototype, "cryptoPrice", void 0);
+__decorate([
+    property({ type: String, attribute: "crypto-earn" })
+], CorasBasketItems.prototype, "cryptoEarn", void 0);
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasBasketItems.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasBasketItems.prototype, "checkout", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasBasketItems.prototype, "loading", void 0);
+__decorate([
+    consume({ context: loyaltyPointsContext, subscribe: true })
+], CorasBasketItems.prototype, "loyaltyPoints", void 0);
+CorasBasketItems = __decorate([
+    localized()
+], CorasBasketItems);
+export { CorasBasketItems };

package/dist/components/basket/basket.d.ts

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

package/dist/components/basket/basket.js

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

package/dist/components/basket/basket.styles.d.ts

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