@coras-io/embed 0.1.0

package/dist/views/details-page/details-page.d.ts

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

package/dist/views/details-page/details-page.js

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

package/dist/views/details-page/details-page.styles.d.ts

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

package/dist/views/details-page/details-page.styles.js

@@ -0,0 +1,558 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --details-page-ticket-availability-border-color: var(
+      --coras-color-neutral-200
+    );
+    --details-page-ticket-availability-border-radius: var(--coras-radius-md);
+    --details-page-ticket-availability-caption-font-size: var(
+      --coras-font-size-base
+    );
+    --details-page-ticket-availability-caption-font-weight: var(
+      --coras-font-weight-normal
+    );
+    --details-page-ticket-availability-caption-color: var(--coras-color-text);
+
+    --details-page-date-field-open-chevron-color: var(
+      --coras-color-primary-500
+    );
+    --details-page-ticket-availability-caption-font-size-mobile: var(
+      --coras-font-size-sm
+    );
+
+    --details-page-options-header-color: var(--coras-color-text);
+    --details-page-options-header-font-size: var(--coras-font-size-lg);
+    --details-page-options-header-font-weight: var(--coras-font-weight-normal);
+    --details-page-options-header-line-height: 1.5rem;
+
+    --details-page-section-header-color: var(--coras-color-text);
+    --details-page-section-header-font-size: var(--coras-font-size-2xl);
+    --details-page-section-header-font-weight: var(
+      --coras-font-weight-semibold
+    );
+    --details-page-section-header-line-height: 1.875rem;
+
+    --details-page-section-list-item-color: var(--coras-color-text);
+    --details-page-section-list-item-font-size: var(--coras-font-size-base);
+    --details-page-section-list-item-font-weight: var(
+      --coras-font-weight-normal
+    );
+    --details-page-section-list-item-line-height: 1.625rem;
+
+    --details-page-details-list-item-font-weight: var(
+      --coras-font-weight-normal
+    );
+
+    --details-page-section-paragraph-color: var(--coras-color-text);
+    --details-page-section-paragraph-font-size: var(--coras-font-size-base);
+    --details-page-section-paragraph-font-weight: var(
+      --coras-font-weight-normal
+    );
+    --details-page-section-paragraph-line-height: 1.625rem;
+
+    --details-page-reviews-footer-font-size: var(--coras-font-size-sm);
+    --details-page-reviews-footer-font-weight: var(--coras-font-weight-normal);
+    --details-page-reviews-footer-color: var(--coras-color-text-secondary);
+
+    --details-page-top-panel-max-width: 820px;
+    --details-page-details-max-width: 562px;
+    --details-page-tour-options-max-width: 480px;
+    --details-page-sport-options-max-width: 480px;
+    --details-page-theatre-options-max-width: 650px;
+  }
+
+  ::slotted([slot="navbar"]) {
+    z-index: 3;
+  }
+
+  coras-layout {
+    container-type: inline-size;
+    container-name: --coras-layout;
+
+    coras-breadcrumbs {
+      display: block;
+      margin-bottom: 2.75rem;
+    }
+
+    coras-attraction-header {
+      margin-bottom: 1rem;
+    }
+
+    .attraction-header {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 2.5rem;
+      width: 100%;
+      margin-bottom: 1.75rem;
+
+      .image-carousel-wrapper {
+        width: 100%;
+        max-width: 480px;
+
+        coras-better-carousel {
+          coras-better-carousel-item {
+            display: block;
+            width: 100%;
+            overflow: hidden;
+            border-radius: var(--coras-radius-md);
+
+            coras-image {
+              --coras-image-border-radius: var(--coras-radius-md);
+            }
+
+            img {
+              display: block;
+              width: 100%;
+            }
+          }
+        }
+      }
+
+      .ticket-availability {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 100%;
+        max-width: 280px;
+
+        border: 1px solid var(--details-page-ticket-availability-border-color);
+        border-radius: var(--details-page-ticket-availability-border-radius);
+        padding: 1.875rem 1rem 2rem;
+
+        .caption {
+          text-align: center;
+          color: var(--details-page-ticket-availability-caption-color);
+          font-size: var(--details-page-ticket-availability-caption-font-size);
+          font-weight: var(
+            --details-page-ticket-availability-caption-font-weight
+          );
+          line-height: 1.625rem;
+          margin-bottom: 2rem;
+        }
+
+        coras-tour-ticket-type-selector {
+          margin-bottom: 1.5rem;
+        }
+
+        #calendar-dropdown {
+          margin-bottom: 2rem;
+
+          coras-dropdown {
+            width: 100%;
+
+            #date-field-chevron {
+              transform: rotate(0deg);
+              transition: transform 0.3s;
+
+              &.open {
+                transform: rotate(180deg);
+                transition: transform 0.3s;
+                fill: var(--details-page-date-field-open-chevron-color);
+              }
+            }
+
+            .calendar {
+              padding: 1.25rem 0.5rem;
+            }
+          }
+        }
+
+        coras-button {
+          align-self: center;
+          width: 100%;
+
+          &::part(base) {
+            text-wrap: wrap;
+          }
+        }
+      }
+
+      .pay-in-container {
+        grid-column: 1 / -1;
+        display: flex;
+        align-items: center;
+        margin-top: 1rem;
+        margin-bottom: 4rem;
+
+        .divider {
+          align-self: stretch;
+          border-left: 1px solid var(--coras-color-neutral-100);
+          margin: 0 1rem;
+        }
+      }
+    }
+
+    @container --coras-layout (max-width: 800px) {
+      .attraction-header {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .options {
+      margin-bottom: 4rem;
+
+      .header {
+        color: var(--details-page-options-header-color);
+        font-size: var(--details-page-options-header-font-size);
+        font-weight: var(--details-page-options-header-font-weight);
+        line-height: var(--details-page-options-header-line-height);
+
+        margin-bottom: 1.5rem;
+      }
+
+      .tour-options {
+        max-width: var(--details-page-tour-options-max-width);
+
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+      }
+
+      .performance-times-label {
+        color: var(--details-page-options-header-color);
+        font-size: var(--details-page-options-header-font-size);
+        font-weight: var(--details-page-options-header-font-weight);
+        line-height: var(--details-page-options-header-line-height);
+        margin-bottom: 1rem;
+      }
+
+      .performance-times {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .sport-options {
+        max-width: var(--details-page-sport-options-max-width);
+      }
+
+      .theatre-options {
+        max-width: var(--details-page-theatre-options-max-width);
+      }
+    }
+
+    .details {
+      max-width: var(--details-page-details-max-width);
+
+      .details-chips {
+        margin-bottom: 2.5rem;
+
+        display: flex;
+        gap: 0.75rem;
+      }
+
+      .section {
+        margin-bottom: 3rem;
+
+        .header {
+          color: var(--details-page-section-header-color);
+          font-size: var(--details-page-section-header-font-size);
+          font-weight: var(--details-page-section-header-font-weight);
+          line-height: var(--details-page-section-header-line-height);
+          margin-bottom: 0.75rem;
+        }
+
+        .icon-list {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+
+          margin-bottom: 1.5rem;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          coras-list-item {
+            &::part(label) {
+              font-weight: var(--details-page-details-list-item-font-weight);
+            }
+          }
+        }
+
+        ul {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+
+          padding-left: 1rem;
+
+          li {
+            color: var(--details-page-section-list-item-color);
+            font-size: var(--details-page-section-list-item-font-size);
+            font-weight: var(--details-page-section-list-item-font-weight);
+            line-height: var(--details-page-section-list-item-line-height);
+          }
+        }
+
+        .paragraph {
+          color: var(--details-page-section-paragraph-color);
+          font-size: var(--details-page-section-paragraph-font-size);
+          font-weight: var(--details-page-section-paragraph-font-weight);
+          line-height: var(--details-page-section-paragraph-line-height);
+          margin-bottom: 1.625rem;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      coras-accordion {
+        margin-bottom: 3rem;
+      }
+
+      #reviews {
+        margin-bottom: 4.75rem;
+
+        .reviews-footer {
+          display: flex;
+          flex-direction: column;
+
+          > div {
+            color: var(--details-page-reviews-footer-color);
+            font-size: var(--details-page-reviews-footer-font-size);
+            font-weight: var(--details-page-reviews-footer-font-weight);
+            line-height: 1.25rem;
+            margin: 1rem 0 0.625rem;
+          }
+
+          > coras-button {
+            align-self: center;
+          }
+        }
+      }
+    }
+
+    .other-attractions {
+      display: flex;
+      flex-direction: column;
+      gap: 3.25rem;
+
+      .attraction-cards {
+        .header {
+          color: var(--details-page-section-header-color);
+          font-size: var(--details-page-section-header-font-size);
+          font-weight: var(--details-page-section-header-font-weight);
+          line-height: var(--details-page-section-header-line-height);
+          margin-bottom: 1rem;
+        }
+
+        .items {
+          display: flex;
+          gap: 1.25rem;
+
+          coras-attraction-card {
+            cursor: pointer;
+          }
+        }
+      }
+
+      .carousel {
+        .header {
+          color: var(--details-page-section-header-color);
+          font-size: var(--details-page-section-header-font-size);
+          font-weight: var(--details-page-section-header-font-weight);
+          line-height: var(--details-page-section-header-line-height);
+          margin-bottom: 1rem;
+        }
+
+        coras-carousel {
+          coras-carousel-item {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+
+    .description {
+      max-width: 35rem;
+      padding-top: 1rem;
+    }
+  }
+
+  /* Basket modal */
+
+  .basket-modal-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .basket-modal-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+
+    &::part(svg) {
+      fill: var(--coras-color-success-500);
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  .basket-modal-title {
+    color: var(--coras-color-text);
+    font-size: var(--coras-font-size-xl);
+    font-weight: var(--coras-font-weight-semibold);
+    line-height: 1.75rem;
+  }
+
+  .basket-modal-content {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+
+    coras-image::part(image) {
+      border-radius: var(--coras-radius-sm);
+    }
+  }
+
+  .basket-modal-description {
+    display: flex;
+    flex-direction: column;
+    padding: 0.125rem 2.125rem 0 0;
+  }
+
+  .basket-modal-name {
+    margin-bottom: 0.5rem;
+    color: var(--coras-color-text);
+    font-size: var(--coras-font-size-base);
+    font-weight: var(--coras-font-weight-medium);
+    line-height: 1.375rem;
+  }
+
+  .basket-modal-date {
+    margin-bottom: 1.125rem;
+    color: var(--coras-color-text-secondary);
+    font-size: var(--coras-font-size-sm);
+    font-weight: var(--coras-font-weight-normal);
+    line-height: 1.25rem;
+  }
+
+  .basket-modal-price {
+    margin-bottom: 0.25rem;
+    color: var(--coras-color-text);
+    font-size: var(--coras-font-size-base);
+    font-weight: var(--coras-font-weight-medium);
+    line-height: 1.375rem;
+  }
+
+  .basket-modal-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+
+    coras-button {
+      width: 100%;
+      max-width: 16.25rem;
+    }
+  }
+
+  .image-viewer-modal-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+
+    .image-viewer-modal-content {
+      flex: 1;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      min-height: 0;
+      overflow: hidden;
+
+      .image-viewer-modal-image-viewer {
+        width: 100%;
+        height: 100%;
+        flex: 1;
+      }
+    }
+  }
+
+  @container --coras-layout (max-width: 800px) {
+    coras-layout {
+      .attraction-header {
+        height: auto;
+        flex-direction: column;
+        gap: 1rem;
+        justify-content: center;
+        width: 100%;
+
+        .image-carousel-wrapper {
+          width: 100%;
+          max-width: 100%;
+
+          justify-content: center;
+        }
+
+        .pay-in-container {
+          order: 1;
+          margin-bottom: 0;
+
+          coras-pay-in {
+            flex: 1;
+            min-width: 0;
+
+            &::part(base) {
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: auto;
+              padding: 0.5rem 0;
+            }
+          }
+        }
+
+        .ticket-availability {
+          order: 2;
+          width: 100%;
+          max-width: 100%;
+
+          .caption {
+            font-size: var(
+              --details-page-ticket-availability-caption-font-size-mobile
+            );
+            line-height: 1.25rem;
+            margin-bottom: 1rem;
+          }
+        }
+      }
+
+      .options {
+        margin-bottom: 3.25rem;
+
+        .tour-options {
+          max-width: 100%;
+        }
+
+        .sport-options {
+          max-width: 100%;
+        }
+      }
+
+      .other-attractions {
+        flex-direction: column-reverse;
+
+        .attraction-cards {
+          .items {
+            flex-direction: column;
+            gap: 0.75rem;
+          }
+        }
+      }
+    }
+  }
+`;

package/dist/views/details-page/details-page.utilts.d.ts

@@ -0,0 +1,40 @@
+import { components } from "../../core/types/api-schema.js";
+import { SupportedCurrencies, SupportedLocales } from "../../core/types/index.js";
+export declare const formatDateWithTimezone: ({ dateString, timezone, formatString, timeFormatString, includeTime, }: {
+    dateString: string;
+    timezone?: string;
+    formatString?: string;
+    timeFormatString?: string;
+    includeTime?: boolean;
+}) => string;
+export declare const getCurrentMonth: (date: string, currentMonth?: string) => string;
+export declare const getTotalTicketsCount: (selectedPriceTypes: Record<string, number>) => number;
+export declare const getTicketsAmount: (id: string, selectedPriceTypes: Record<string, number>, maxAmount: number | null) => number;
+export declare const getTicketSelectorLabel: (priceTypes: components["schemas"]["AttractionPriceType"][], selectedPriceTypes: Record<string, number>, apiResponse?: components["schemas"]["AttractionEvent"] | components["schemas"]["AttractionTour"]) => string;
+export declare const calculateTotalPrice: (tickets: components["schemas"]["TourTicket"][] | null | undefined) => number;
+export declare const sumPricesAndFormat: ({ prices, locale, currency, }: {
+    prices: components["schemas"]["AvailabilityItemPriceModel"][] | null;
+    locale: SupportedLocales;
+    currency: SupportedCurrencies;
+}) => string;
+export declare const isSingleDayAvailability: (salePeriods: components["schemas"]["SalePeriodInfo"][] | null) => boolean;
+export declare const getAvailabilityDays: ({ salePeriods, targetMonth, timezone, }: {
+    salePeriods: components["schemas"]["SalePeriodInfo"][] | null;
+    targetMonth: string;
+    timezone: string;
+}) => string[];
+export declare const formatTicketDetails: ({ prices, locale, currency, }: {
+    prices: components["schemas"]["AvailabilityItemPriceModel"][] | null;
+    locale: SupportedLocales;
+    currency: SupportedCurrencies;
+}) => string;
+export declare const groupAvailabilityByTime: (items: components["schemas"]["AvailabilityItemModel"][], locale: string) => Map<string, components["schemas"]["AvailabilityItemModel"][]>;
+export declare const sortTimes: (times: string[]) => string[];
+export declare const scrollToTop: (behavior?: "smooth" | "instant") => void;
+export declare const getAvailabilitySummary: (item: components["schemas"]["AvailabilityItemModel"], currency: string) => {
+    totalPrice: number;
+    pricePerTicket: number;
+    bookingFeePerTicket: number;
+    ticketsPrice: number;
+    totalFee: number;
+};