@coras-io/embed 0.1.0

package/dist/components/attraction-card/short/attraction-short-card.component.js

@@ -0,0 +1,75 @@
+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 { msg, localized } from "@lit/localize";
+import { AttractionCardMixin } from "../base/attraction-card.mixin.js";
+import { selectCorasImage } from "../../../core/images/selection.js";
+import "../../image/image.js";
+import styles from "./attraction-short-card.styles.js";
+const DESKTOP_SIZE = 220;
+const MOBILE_WIDTH = 330;
+const MOBILE_HEIGHT = 220;
+let CorasAttractionShortCard = class CorasAttractionShortCard extends AttractionCardMixin(LitElement) {
+    static { this.styles = [
+        super.styles,
+        styles,
+    ]; }
+    renderImage() {
+        const desktop = this.images.length
+            ? selectCorasImage(this.images, { slot: "card-desktop" })
+            : null;
+        const mobile = this.images.length
+            ? selectCorasImage(this.images, { slot: "card-mobile" })
+            : null;
+        const src = desktop?.primary.url ?? this.image;
+        const mobileSrc = mobile?.primary.url ?? "";
+        return html `
+      <div class="image">
+        <coras-image
+          src=${src}
+          mobile-src=${mobileSrc}
+          alt=${this.name}
+          width=${DESKTOP_SIZE}
+          height=${DESKTOP_SIZE}
+          mobile-width=${MOBILE_WIDTH}
+          mobile-height=${MOBILE_HEIGHT}
+          art-direction="card"
+          preset="card-grid"
+          loading="eager"
+        ></coras-image>
+      </div>
+    `;
+    }
+    renderContent() {
+        return html `
+      <div class="content">
+        <div class="title">${this.name}</div>
+        ${this.renderRatingOrDate()}
+      </div>
+    `;
+    }
+    renderDetails() {
+        return html `
+      <div class="details">
+        <div class="price">
+          <span>${msg("From")}</span>
+          ${this.price}
+        </div>
+        <div class="category-details">
+          <coras-category-tag
+            type="text"
+            variant="${this.category}"
+          ></coras-category-tag>
+        </div>
+      </div>
+    `;
+    }
+};
+CorasAttractionShortCard = __decorate([
+    localized()
+], CorasAttractionShortCard);
+export { CorasAttractionShortCard };

package/dist/components/attraction-card/short/attraction-short-card.d.ts

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

package/dist/components/attraction-card/short/attraction-short-card.js

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

package/dist/components/attraction-card/short/attraction-short-card.styles.d.ts

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

package/dist/components/attraction-card/short/attraction-short-card.styles.js

@@ -0,0 +1,66 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    container-type: inline-size;
+
+    display: block;
+    min-width: 13.75rem;
+
+    .wrapper {
+      width: 100%;
+      height: 100%;
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto 1fr;
+      grid-template-areas:
+        "image"
+        "content"
+        "details";
+
+      .image {
+        grid-area: image;
+        position: relative;
+        aspect-ratio: 1 / 1;
+        overflow: hidden;
+
+        coras-image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .content {
+        grid-area: content;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        padding: 0.5rem;
+        margin-bottom: 1rem;
+      }
+
+      .details {
+        grid-area: details;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: auto;
+        padding: 0 0.5rem 0.5rem;
+      }
+
+      ::slotted(*) {
+        grid-area: points;
+      }
+    }
+
+    @container coras-layout (max-width: 1000px) {
+      .wrapper {
+        .image {
+          aspect-ratio: 9 / 5;
+        }
+      }
+    }
+  }
+`;

package/dist/components/attraction-discovery/attraction-discovery-image/attraction-discovery-image.component.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../../image/image.js";
+export declare class CorasAttractionDiscoveryImage extends LitElement {
+    static styles: CSSResultGroup;
+    imageUrl: string;
+    width: number;
+    height: number;
+    caption: string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/attraction-discovery/attraction-discovery-image/attraction-discovery-image.component.js

@@ -0,0 +1,43 @@
+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 "../../image/image.js";
+import styles from "./attraction-discovery-image.styles.js";
+export class CorasAttractionDiscoveryImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.imageUrl = "";
+        this.width = 0;
+        this.height = 0;
+        this.caption = "";
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `
+      <coras-image
+        src=${this.imageUrl}
+        alt=${this.caption}
+        width=${this.width}
+        height=${this.height}
+        widths="280,375,480,640,768"
+      ></coras-image>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, attribute: "image-url" })
+], CorasAttractionDiscoveryImage.prototype, "imageUrl", void 0);
+__decorate([
+    property({ type: Number })
+], CorasAttractionDiscoveryImage.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], CorasAttractionDiscoveryImage.prototype, "height", void 0);
+__decorate([
+    property({ type: String })
+], CorasAttractionDiscoveryImage.prototype, "caption", void 0);

package/dist/components/attraction-discovery/attraction-discovery-image/attraction-discovery-image.d.ts

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

package/dist/components/attraction-discovery/attraction-discovery-image/attraction-discovery-image.js

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

package/dist/components/attraction-discovery/attraction-discovery-image/attraction-discovery-image.styles.d.ts

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

package/dist/components/attraction-discovery/attraction-discovery-image/attraction-discovery-image.styles.js

@@ -0,0 +1,23 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --attraction-discovery-image-border-radius: var(--coras-radius-sm);
+    --attraction-discovery-image-box-shadow: var(--coras-shadow-strong);
+  }
+
+  coras-image {
+    border-radius: var(--attraction-discovery-image-border-radius);
+    box-shadow: var(--attraction-discovery-image-box-shadow);
+  }
+
+  coras-image::part(image) {
+    border-radius: inherit;
+  }
+
+  :host(:hover) {
+    cursor: pointer;
+  }
+`;

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

@@ -0,0 +1,10 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../button/button.js";
+import { AttractionDiscoveryLayout } from "./attraction-discovery.constants.js";
+export declare class CorasAttractionDiscovery extends LitElement {
+    static styles: CSSResultGroup;
+    header: string;
+    description: string;
+    layout: AttractionDiscoveryLayout;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,52 @@
+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 { classMap } from "lit/directives/class-map.js";
+import "../button/button.js";
+import { AttractionDiscoveryLayout } from "./attraction-discovery.constants.js";
+import styles from "./attraction-discovery.styles.js";
+export class CorasAttractionDiscovery extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.header = "";
+        this.description = "";
+        this.layout = AttractionDiscoveryLayout.IMAGES_ON_THE_LEFT;
+    }
+    static { this.styles = styles; }
+    render() {
+        const classes = {
+            inverted: this.layout === AttractionDiscoveryLayout.IMAGES_ON_THE_RIGHT,
+            ["attraction-discovery"]: true,
+        };
+        return html `
+      <div class="attraction-discovery-container">
+        <div class=${classMap(classes)}>
+          <div class="images">
+            <slot name="images"></slot>
+          </div>
+
+          <div class="header">${this.header}</div>
+          <div class="description">${this.description}</div>
+
+          <div class="button">
+            <slot class="button" name="button"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasAttractionDiscovery.prototype, "header", void 0);
+__decorate([
+    property({ type: String })
+], CorasAttractionDiscovery.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], CorasAttractionDiscovery.prototype, "layout", void 0);

package/dist/components/attraction-discovery/attraction-discovery.constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum AttractionDiscoveryLayout {
+    IMAGES_ON_THE_RIGHT = "images-on-the-right",
+    IMAGES_ON_THE_LEFT = "images-on-the-left"
+}

package/dist/components/attraction-discovery/attraction-discovery.constants.js

@@ -0,0 +1,5 @@
+export var AttractionDiscoveryLayout;
+(function (AttractionDiscoveryLayout) {
+    AttractionDiscoveryLayout["IMAGES_ON_THE_RIGHT"] = "images-on-the-right";
+    AttractionDiscoveryLayout["IMAGES_ON_THE_LEFT"] = "images-on-the-left";
+})(AttractionDiscoveryLayout || (AttractionDiscoveryLayout = {}));

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

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

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

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

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

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

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

@@ -0,0 +1,193 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --attraction-discovery-text-column-width: 22.75rem;
+
+    --attraction-discovery-background: var(--coras-color-secondary-400);
+    --attraction-discovery-color: var(--coras-palette-white);
+    --attraction-discovery-image-border-radius: var(--coras-radius-sm);
+    --attraction-discovery-image-box-shadow: var(--coras-shadow-strong);
+    --attraction-discovery-font-size: var(--coras-font-size-3xl);
+    --attraction-discovery-font-weight: var(--coras-font-weight-semibold);
+
+    --attraction-discovery-description-font-size: var(--coras-font-size-base);
+    --attraction-discovery-description-font-weight: var(
+      --coras-font-weight-light
+    );
+
+    display: block;
+  }
+
+  .attraction-discovery-container {
+    container-type: inline-size;
+    width: 100%;
+    max-width: 100%;
+
+    .attraction-discovery {
+      display: grid;
+      column-gap: 4rem;
+      grid-template-columns: 1.25fr 1fr;
+      grid-template-rows: auto;
+      grid-template-areas:
+        "images header"
+        "images description"
+        "images button";
+
+      background: var(--attraction-discovery-background);
+      color: var(--attraction-discovery-color);
+      width: 100%;
+      max-width: 100%;
+      padding: 2.5rem 1rem;
+
+      .images {
+        justify-self: end;
+        grid-area: images;
+
+        display: grid;
+        gap: 1.25rem;
+        grid-template-areas:
+          "image1 image2"
+          "image1 image3";
+        grid-template-columns: auto auto;
+        align-items: center;
+        justify-items: flex-start;
+        align-content: center;
+
+        padding: 0 0.5rem;
+
+        ::slotted(coras-attraction-discovery-image:first-child) {
+          grid-area: image1;
+        }
+
+        ::slotted(coras-attraction-discovery-image:nth-child(2)) {
+          grid-area: image2;
+        }
+
+        ::slotted(coras-attraction-discovery-image:last-child) {
+          grid-area: image3;
+        }
+      }
+
+      .header {
+        grid-area: header;
+        justify-self: start;
+
+        width: var(--attraction-discovery-text-column-width);
+        font-size: var(--attraction-discovery-font-size);
+        font-weight: var(--attraction-discovery-font-weight);
+        line-height: 2.75rem;
+        text-shadow: 0 4px color-mix(in srgb, black, transparent 75%);
+        margin-top: 1.25rem;
+        margin-bottom: 0.75rem;
+      }
+
+      .description {
+        grid-area: description;
+        justify-self: start;
+
+        width: var(--attraction-discovery-text-column-width);
+        font-size: var(--attraction-discovery-description-font-size);
+        font-weight: var(--attraction-discovery-description-font-weight);
+        margin-bottom: 3.875rem;
+      }
+
+      .button {
+        grid-area: button;
+        justify-self: start;
+        margin-top: 3.5rem;
+        width: var(--attraction-discovery-text-column-width);
+      }
+
+      &.inverted {
+        grid-template-columns: 1fr 1.25fr;
+        grid-template-areas:
+          "header images"
+          "description images"
+          "button images";
+
+        .images {
+          justify-self: start;
+        }
+
+        .header {
+          justify-self: end;
+        }
+
+        .description {
+          justify-self: end;
+        }
+
+        .button {
+          justify-self: end;
+        }
+      }
+    }
+  }
+
+  @container (max-width: 800px) {
+    .attraction-discovery-container {
+      .attraction-discovery {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+        grid-template-areas:
+          "header"
+          "description"
+          "images"
+          "button";
+        justify-items: center;
+
+        text-align: center;
+
+        .images {
+          justify-self: center;
+
+          .column {
+            gap: 0.75rem;
+            margin-bottom: 1.5rem;
+          }
+        }
+
+        .header {
+          justify-self: center;
+
+          width: 100%;
+          margin-top: 0;
+          margin-bottom: 1rem;
+          padding: 0 2rem;
+        }
+
+        .description {
+          text-align: left;
+          justify-self: center;
+
+          width: 100%;
+          padding: 0 2rem;
+          margin-bottom: 3.375rem;
+        }
+
+        .button {
+          justify-self: center;
+
+          width: 100%;
+        }
+
+        &.inverted {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto;
+          grid-template-areas:
+            "header"
+            "description"
+            "images"
+            "button";
+
+          .images {
+            justify-self: center;
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,31 @@
+import { CSSResultGroup, LitElement } from "lit";
+import { SupportedLocales } from "../../core/types/index.js";
+import "../star-rating/star-rating.js";
+import { components } from "../../core/types/api-schema.js";
+/**
+ * A component that displays the attraction name and key metadata.
+ *
+ * @element coras-attraction-header
+ */
+export declare class CorasAttractionHeader extends LitElement {
+    static styles: CSSResultGroup;
+    /** The type of the attraction (e.g., THEATER, TOUR). */
+    attractionType?: components["schemas"]["AttractionEvent"]["attraction_type"];
+    /** The name of the attraction. */
+    attractionName?: components["schemas"]["Event"]["attraction_name"];
+    /** The city where the attraction is located. */
+    city?: string | null;
+    /** The name of the specific location or venue. */
+    locationName?: string | null;
+    /** The timezone for date formatting. Defaults to UTC if not provided. */
+    timezone?: string | null;
+    /** The rating of the attraction (0-5). */
+    rating?: components["schemas"]["Event"]["rating"];
+    /** Total number of instances/performances available. */
+    totalInstances?: number;
+    /** The date of the first available instance. */
+    firstInstanceDate?: string;
+    /** The locale used for formatting dates and numbers. */
+    locale: SupportedLocales;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,69 @@
+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 styles from "./attraction-header.styles.js";
+import "../star-rating/star-rating.js";
+import { DEFAULT_LOCALE } from "../../views/constants.js";
+import { getAttractionHeaderDetails } from "./attraction-header.utils.js";
+/**
+ * A component that displays the attraction name and key metadata.
+ *
+ * @element coras-attraction-header
+ */
+export class CorasAttractionHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The locale used for formatting dates and numbers. */
+        this.locale = DEFAULT_LOCALE;
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `
+      <h1 part="title">${this.attractionName}</h1>
+      <div class="details" part="details">
+        ${getAttractionHeaderDetails({
+            attractionType: this.attractionType,
+            rating: this.rating,
+            city: this.city,
+            locationName: this.locationName,
+            totalInstances: this.totalInstances,
+            firstInstanceDate: this.firstInstanceDate,
+            timezone: this.timezone,
+            locale: this.locale,
+        })}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, attribute: "attraction-type" })
+], CorasAttractionHeader.prototype, "attractionType", void 0);
+__decorate([
+    property({ type: String, attribute: "attraction-name" })
+], CorasAttractionHeader.prototype, "attractionName", void 0);
+__decorate([
+    property({ type: String })
+], CorasAttractionHeader.prototype, "city", void 0);
+__decorate([
+    property({ type: String, attribute: "location-name" })
+], CorasAttractionHeader.prototype, "locationName", void 0);
+__decorate([
+    property({ type: String })
+], CorasAttractionHeader.prototype, "timezone", void 0);
+__decorate([
+    property({ type: Number })
+], CorasAttractionHeader.prototype, "rating", void 0);
+__decorate([
+    property({ type: Number, attribute: "total-instances" })
+], CorasAttractionHeader.prototype, "totalInstances", void 0);
+__decorate([
+    property({ type: String, attribute: "first-instance-date" })
+], CorasAttractionHeader.prototype, "firstInstanceDate", void 0);
+__decorate([
+    property({ type: String })
+], CorasAttractionHeader.prototype, "locale", void 0);

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

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

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

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