@coras-io/embed 0.1.0

package/dist/components/basket/basket.styles.js

@@ -0,0 +1,196 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --basket-items-divider-color: var(--coras-color-neutral-200);
+    --basket-items-actions-background-color: var(--coras-color-surface-muted);
+    --basket-items-background-color: var(--coras-color-surface);
+    --basket-items-shadow: var(--coras-shadow-md);
+    --basket-items-border-radius: var(--coras-radius-sm);
+
+    /* Accent color required by design (var(--coras-color-text)), expose as overrideable var */
+    --basket-accent-color: var(
+      --coras-basket-accent-color,
+      var(--coras-color-text)
+    );
+
+    /* Totals styling (labels and values use the accent color) */
+    --basket-total-label-color: var(--basket-accent-color);
+    --basket-total-value-color: var(--basket-accent-color);
+    --basket-total-label-font-size: var(--coras-font-size-lg); /* 18px */
+    --basket-total-value-font-size: var(--coras-font-size-xl); /* 20px */
+    --basket-total-font-weight: var(--coras-font-weight-semibold); /* 600 */
+    --basket-total-value-column-min-width: 7.5rem;
+    --basket-total-value-column-gap: 1rem;
+    --basket-earn-pill-offset: 0.75rem;
+
+    /* Earn pill background to primary.30 (#EEF0FF) and text to accent */
+    --basket-earn-pill-bg: var(--coras-color-primary-200);
+    --basket-earn-pill-text: var(--basket-accent-color);
+    --basket-earn-pill-radius: var(--coras-radius-lg); /* 24px */
+    --basket-earn-pill-font-size: var(--coras-font-size-xs); /* 12px */
+    --basket-earn-pill-font-weight: var(--coras-font-weight-bold); /* 700 */
+  }
+
+  :host([expanded]) .basket {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  :host([expanded]) .basket .basket-content {
+    max-height: none;
+    flex: 1 1 auto;
+  }
+
+  :host([expanded]) .basket .footer,
+  :host([expanded]) .basket .footer .price,
+  :host([expanded]) .basket .footer .actions {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .basket {
+    width: 25.875rem; /* 414px */
+    background-color: var(--basket-items-background-color);
+    border-radius: 16px;
+    box-shadow: 0px 4px 4px 0px color-mix(in srgb, black, transparent 90%);
+    border: 1px solid var(--basket-items-divider-color);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+
+    .header {
+      display: flex;
+      align-items: center;
+      padding: 1.25rem;
+      border-bottom: 0.0625rem solid var(--basket-items-divider-color);
+
+      .basket-title {
+        font-size: var(--coras-font-size-xl);
+        font-weight: 600;
+        line-height: 1.75rem;
+      }
+
+      .basket-quantity {
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        margin-left: 0.3125rem;
+      }
+    }
+
+    .basket-content {
+      max-height: 29.25rem;
+      overflow-y: auto;
+      /* The header's border-bottom is the single divider above the content; a
+         border-top here would double it. The footer carries the lower divider. */
+    }
+
+    .footer {
+      border-top: 0.0625rem solid var(--basket-items-divider-color);
+      background-color: var(--basket-items-actions-background-color);
+      border-bottom-right-radius: 16px;
+      border-bottom-left-radius: 16px;
+
+      .price {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1.25rem;
+        font-size: 1.2rem;
+        font-weight: 600;
+        border-bottom-right-radius: 16px;
+        border-bottom-left-radius: 16px;
+      }
+
+      .totals .total-row {
+        display: grid;
+        grid-template-columns:
+          minmax(0, 1fr)
+          minmax(var(--basket-total-value-column-min-width), max-content);
+        column-gap: var(--basket-total-value-column-gap);
+        align-items: center;
+        padding: 1.25rem;
+        border-top: 0.0625rem solid var(--basket-items-divider-color);
+        font-weight: 600;
+      }
+
+      .totals .total-row:first-child {
+        border-top: none;
+      }
+
+      .totals .total-row .label {
+        color: var(--basket-total-label-color);
+        font-size: var(--basket-total-label-font-size);
+        font-weight: var(--basket-total-font-weight);
+        line-height: 22px;
+        letter-spacing: 0.2px;
+        text-align: left;
+        justify-self: start;
+      }
+
+      .totals .total-row .value {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        width: max-content;
+        max-width: 100%;
+        color: var(--basket-total-value-color);
+        font-size: var(--basket-total-value-font-size);
+        font-weight: var(--basket-total-font-weight);
+        line-height: 20px;
+        letter-spacing: 0.16px;
+        justify-self: start;
+      }
+
+      .totals .total-row .value-earn-group {
+        position: relative;
+        justify-self: start;
+        width: max-content;
+        max-width: 100%;
+        padding-bottom: calc(28px + var(--basket-earn-pill-offset));
+      }
+
+      .totals .total-row .fida-logo {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+
+      .totals .earn-pill {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        display: inline-flex;
+        min-height: 28px;
+        padding: 0 12px;
+        align-items: center;
+        white-space: nowrap;
+        border-radius: var(--basket-earn-pill-radius);
+        background: var(--basket-earn-pill-bg);
+        color: var(--basket-earn-pill-text);
+        font-size: var(--basket-earn-pill-font-size);
+        font-weight: var(--basket-earn-pill-font-weight);
+        line-height: 16px;
+        letter-spacing: 0.24px;
+      }
+
+      .actions {
+        padding: 0 1.25rem 1.25rem;
+        background-color: var(--basket-items-actions-background-color);
+        border-bottom-right-radius: 16px;
+        border-bottom-left-radius: 16px;
+
+        ::slotted(coras-button) {
+          width: 100%;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { CSSResultGroup, LitElement } from "lit";
+export declare class CorasBasketEmpty extends LitElement {
+    static styles: CSSResultGroup;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,24 @@
+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 } from "lit";
+import styles from "./basket-empty.styles.js";
+let CorasBasketEmpty = class CorasBasketEmpty extends LitElement {
+    static { this.styles = styles; }
+    render() {
+        return html `
+      <p>${msg("Your basket is empty!")}</p>
+      <p>
+        ${msg("When you add tickets to your basket, they will appear here")}
+      </p>
+    `;
+    }
+};
+CorasBasketEmpty = __decorate([
+    localized()
+], CorasBasketEmpty);
+export { CorasBasketEmpty };

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

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

package/dist/components/basket-empty/basket-empty.js

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

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

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

package/dist/components/basket-empty/basket-empty.styles.js

@@ -0,0 +1,39 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --basket-empty-caption-font-size: var(--coras-font-size-xl);
+    --basket-empty-caption-line-height: var(--coras-font-size-2xl);
+    --basket-empty-caption-font-weight: var(--coras-font-weight-bold);
+    --basket-empty-message-font-size: var(--coras-font-size-sm);
+    --basket-empty-message-line-height: var(--coras-font-size-xl);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    padding-block: 2rem;
+
+    p {
+      margin: 0;
+      padding: 0;
+
+      &:first-of-type {
+        font-weight: var(--basket-empty-caption-font-weight);
+        font-size: var(--basket-empty-caption-font-size);
+        line-height: var(--basket-empty-caption-line-height);
+        letter-spacing: 1px;
+      }
+
+      &:last-of-type {
+        font-size: var(--basket-empty-message-font-size);
+        line-height: var(--basket-empty-message-line-height);
+        letter-spacing: 1px;
+        text-align: center;
+        width: 60%;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,27 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../icon/icon.js";
+import "../image/image.js";
+import "../expiration-timer/expiration-timer.js";
+export declare class CorasBasketItem extends LitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    name: string;
+    image: string;
+    date: string;
+    time: string;
+    quantity: number;
+    section: string;
+    seats: string;
+    price: string;
+    totalPrice: string;
+    expiresIn: number;
+    private renderImage;
+    private renderSeatsInfo;
+    private renderTicketInfo;
+    private renderPriceInfo;
+    private renderTicketTypes;
+    private renderTicketDetailsLeft;
+    private renderBottom;
+    private renderExpirationTime;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,153 @@
+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 { localized } from "@lit/localize";
+import styles from "./basket-item.styles.js";
+import "../icon/icon.js";
+import "../image/image.js";
+import "../expiration-timer/expiration-timer.js";
+let CorasBasketItem = class CorasBasketItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.name = "";
+        this.image = "";
+        this.date = "";
+        this.time = "";
+        this.quantity = 1;
+        this.section = "";
+        this.seats = "";
+        this.price = "";
+        this.totalPrice = "";
+        this.expiresIn = 0;
+    }
+    static { this.styles = styles; }
+    renderImage() {
+        return html `
+      <coras-image
+        src=${this.image}
+        alt=${this.name}
+        width="70"
+        height="70"
+        loading="eager"
+        preset="thumbnail"
+      ></coras-image>
+    `;
+    }
+    renderSeatsInfo() {
+        return html `
+      <div class="seats-info">
+        <span>${this.section}</span>
+        <span>${this.seats}</span>
+      </div>
+    `;
+    }
+    renderTicketInfo() {
+        return html `
+      <div class="ticket-info">
+        <div class="ticket-title">
+          <span class="title">${this.name}</span>
+        </div>
+        <div class="ticket-datetime">
+          <span>${this.date}</span>
+          <span>${this.time}</span>
+        </div>
+      </div>
+    `;
+    }
+    renderPriceInfo() {
+        return html `
+      <div class="price-info">
+        <span class="total-price">${this.totalPrice}</span>
+      </div>
+    `;
+    }
+    renderTicketTypes() {
+        return html `<slot name="tickets"></slot>`;
+    }
+    renderTicketDetailsLeft() {
+        return html `
+      <div class="ticket-details-left">
+        ${this.renderImage()}
+        <div class="ticket-details">${this.renderTicketInfo()}</div>
+      </div>
+    `;
+    }
+    renderBottom() {
+        return html `
+      <div class="bottom">
+        ${this.renderSeatsInfo()}
+        <slot name="points"></slot>
+        <div class="remove-button-container">
+          <slot name="remove-button"></slot>
+        </div>
+      </div>
+    `;
+    }
+    renderExpirationTime() {
+        if (!this.expiresIn)
+            return html ``;
+        return html `
+      <div class="expiration-time">
+        <coras-expiration-timer
+          assets-url="${this.assetsURL}"
+          expiration-time="${this.expiresIn}"
+        ></coras-expiration-timer>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div class="basket-item">
+        ${this.renderExpirationTime()}
+        <div class="main-content">
+          ${this.renderTicketDetailsLeft()} ${this.renderPriceInfo()}
+        </div>
+        <div class="ticket-types">${this.renderTicketTypes()}</div>
+        ${this.renderBottom()}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasBasketItem.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasBasketItem.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], CorasBasketItem.prototype, "image", void 0);
+__decorate([
+    property({ type: String })
+], CorasBasketItem.prototype, "date", void 0);
+__decorate([
+    property({ type: String })
+], CorasBasketItem.prototype, "time", void 0);
+__decorate([
+    property({ type: Number })
+], CorasBasketItem.prototype, "quantity", void 0);
+__decorate([
+    property({ type: String })
+], CorasBasketItem.prototype, "section", void 0);
+__decorate([
+    property({ type: String })
+], CorasBasketItem.prototype, "seats", void 0);
+__decorate([
+    property({ type: String })
+], CorasBasketItem.prototype, "price", void 0);
+__decorate([
+    property({ type: String, attribute: "total-price" })
+], CorasBasketItem.prototype, "totalPrice", void 0);
+__decorate([
+    property({ type: Number, attribute: "expires-in" })
+], CorasBasketItem.prototype, "expiresIn", void 0);
+CorasBasketItem = __decorate([
+    localized()
+], CorasBasketItem);
+export { CorasBasketItem };

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

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

package/dist/components/basket-item/basket-item.js

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

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

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

package/dist/components/basket-item/basket-item.styles.js

@@ -0,0 +1,178 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --basket-item-image-border-radius: var(--coras-radius-sm);
+    --basket-item-title-font-size: var(--coras-font-size-base);
+    --basket-item-title-color: var(--coras-color-text);
+    --basket-item-title-font-weight: var(--coras-font-weight-medium);
+    --basket-item-info-font-size: var(--coras-font-size-sm);
+    --basket-item-info-font-weight: var(--coras-font-weight-normal);
+    --basket-item-info-color: var(--coras-color-text-secondary);
+    --basket-item-border-color: var(--coras-color-neutral-200);
+    --basket-item-price-font-size: var(--coras-font-size-base);
+    --basket-item-price-font-weight: var(--coras-font-weight-semibold);
+    --basket-item-price-color: var(--coras-color-text);
+    --basket-item-remove-button-color: var(--coras-color-neutral-600);
+  }
+
+  .basket-item {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+    padding: 1rem;
+    border-bottom: 1px solid var(--basket-item-border-color);
+    position: relative;
+
+    &:last-child {
+      padding-bottom: 1rem;
+      margin-bottom: 0;
+    }
+
+    .expiration-time {
+      width: 100%;
+      display: flex;
+      justify-content: flex-start;
+      margin-bottom: 2rem;
+    }
+
+    .main-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 10px;
+    }
+
+    .ticket-details-left {
+      display: flex;
+      width: 100%;
+      margin-bottom: 10px;
+    }
+
+    coras-image {
+      width: 70px;
+      height: 70px;
+      border-radius: var(--basket-item-image-border-radius);
+      margin-right: 10px;
+    }
+
+    .ticket-details {
+      flex: 1;
+    }
+
+    .ticket-info {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      font-size: var(--basket-item-info-font-size);
+      font-weight: var(--basket-item-info-font-weight);
+      color: var(--basket-item-info-color);
+
+      .ticket-title {
+        .title {
+          font-size: var(--basket-item-title-font-size);
+          font-weight: var(--basket-item-title-font-weight);
+          color: var(--basket-item-title-color);
+          margin-bottom: 5px;
+        }
+      }
+
+      .ticket-datetime {
+        display: flex;
+        flex-direction: column;
+        font-size: var(--basket-item-info-font-size);
+        color: var(--basket-item-info-color);
+      }
+    }
+
+    .price-info {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 5px;
+
+      .total-price {
+        font-size: var(--basket-item-price-font-size);
+        font-weight: var(--basket-item-price-font-weight);
+        color: var(--basket-item-price-color);
+      }
+    }
+
+    .ticket-types {
+      margin: 10px 0;
+      padding-left: 80px;
+    }
+
+    .ticket-type {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 8px;
+      font-size: var(--basket-item-info-font-size);
+
+      .ticket-type-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        margin-bottom: 2px;
+
+        .ticket-type-name {
+          font-weight: var(--basket-item-title-font-weight);
+          color: var(--basket-item-title-color);
+        }
+
+        .ticket-type-total-price {
+          font-weight: var(--basket-item-price-font-weight);
+          color: var(--basket-item-price-color);
+        }
+      }
+
+      .ticket-type-footer {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+
+        .ticket-type-price-per-ticket {
+          font-size: var(--basket-item-info-font-size);
+          color: var(--basket-item-info-color);
+          font-weight: var(--basket-item-info-font-weight);
+        }
+      }
+    }
+
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      width: 100%;
+      font-size: var(--basket-item-info-font-size);
+      font-weight: var(--basket-item-info-font-weight);
+      color: var(--basket-item-info-color);
+      margin-top: 10px;
+
+      .seats-info {
+        display: flex;
+        flex-direction: column;
+        font-size: var(--basket-item-info-font-size);
+        color: var(--basket-item-info-color);
+      }
+
+      .remove-button-container {
+        display: flex;
+        justify-content: flex-end;
+        align-self: flex-end;
+      }
+    }
+  }
+
+  slot[name="remove-button"]::slotted(*) {
+    background: none;
+    border: none;
+    font-size: var(--basket-item-title-font-size);
+    color: var(--basket-item-remove-button-color);
+    cursor: pointer;
+    padding: 0;
+  }
+`;

package/dist/components/basket-item-ticket/basket-item-ticket.component.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement } from "lit";
+export declare class CorasBasketItemTicket extends LitElement {
+    static styles: CSSResultGroup;
+    ticketCount: number;
+    ticketName: string;
+    price: string;
+    totalPrice: string;
+    render(): import("lit").TemplateResult<1>;
+}