@coras-io/embed 0.1.0

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

@@ -0,0 +1,8 @@
+import { CorasSelectedTicketsPreview } from "./selected-tickets-preview.component.js";
+export * from "./selected-tickets-preview.component.js";
+export default CorasSelectedTicketsPreview;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-selected-tickets-preview": CorasSelectedTicketsPreview;
+    }
+}

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

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

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

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

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

@@ -0,0 +1,89 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --selected-tickets-preview-border-color: var(--coras-color-neutral-300);
+    --selected-tickets-preview-details-font-size: var(--coras-font-size-sm);
+    --selected-tickets-preview-details-line-height: var(--coras-font-size-xl);
+    --selected-tickets-preview-details-font-weight: var(
+      --coras-font-weight-normal
+    );
+    --selected-tickets-preview-details-color: var(--coras-color-text);
+    --selected-tickets-preview-total-font-size: var(--coras-font-size-base);
+    --selected-tickets-preview-total-line-height: var(--coras-font-size-2xl);
+    --selected-tickets-preview-total-font-weight: var(
+      --coras-font-weight-semibold
+    );
+    --selected-tickets-preview-total-color: var(--coras-color-text);
+
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    padding-top: 2rem;
+    padding-bottom: 3.5rem;
+    border-top: 1px solid var(--selected-tickets-preview-border-color);
+    box-shadow: var(--coras-shadow-top);
+    animation: slideOut 0.4s both;
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.625rem;
+      width: 100%;
+      max-width: 551px;
+
+      .details {
+        font-size: var(--selected-tickets-preview-details-font-size);
+        line-height: var(--selected-tickets-preview-details-line-height);
+        font-weight: var(--selected-tickets-preview-details-font-weight);
+        color: var(--selected-tickets-preview-details-color);
+      }
+
+      .bottom {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-end;
+        width: 100%;
+
+        .total {
+          font-size: var(--selected-tickets-preview-total-font-size);
+          line-height: var(--selected-tickets-preview-total-line-height);
+          font-weight: var(--selected-tickets-preview-total-font-weight);
+          color: var(--selected-tickets-preview-total-color);
+        }
+      }
+    }
+  }
+
+  :host([open]) {
+    animation: slideIn 0.4s both;
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translate3d(0, 100%, 0);
+      visibility: visible;
+    }
+
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes slideOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+
+    to {
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+`;

package/dist/components/sort-dropdown/sort-dropdown.component.d.ts

@@ -0,0 +1,14 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../dropdown/dropdown.js";
+import "../sort-list/sort-list.js";
+import "../icon/icon.js";
+import "../button/button.js";
+export declare class CorasSortDropdown extends LitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    protected isDropdownOpen: boolean;
+    private toggleDropdown;
+    private handleDropdownClose;
+    private handelOptionClick;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/sort-dropdown/sort-dropdown.component.js

@@ -0,0 +1,57 @@
+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, state } from "lit/decorators.js";
+import "../dropdown/dropdown.js";
+import "../sort-list/sort-list.js";
+import "../icon/icon.js";
+import "../button/button.js";
+import styles from "./sort-dropdown.styles.js";
+export class CorasSortDropdown extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.isDropdownOpen = false;
+    }
+    static { this.styles = styles; }
+    toggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen;
+    }
+    handleDropdownClose(event) {
+        event.stopPropagation();
+        this.isDropdownOpen = false;
+    }
+    handelOptionClick(e) {
+        const path = e.composedPath();
+        if (path.find((el) => el.tagName === "CORAS-SELECT-OPTION")) {
+            this.handleDropdownClose(e);
+        }
+    }
+    render() {
+        return html `<coras-dropdown
+      ?open=${this.isDropdownOpen}
+      ?arrow=${true}
+      @dropdown-close-request=${this.handleDropdownClose}
+    >
+      <div slot="trigger" @click=${this.toggleDropdown}>
+        <coras-button circle variant="text">
+          <coras-icon assets-url="${this.assetsURL}" icon="sort"></coras-icon>
+        </coras-button>
+      </div>
+
+      <coras-sort-list @click=${this.handelOptionClick}>
+        <slot></slot>
+      </coras-sort-list>
+    </coras-dropdown>`;
+    }
+}
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasSortDropdown.prototype, "assetsURL", void 0);
+__decorate([
+    state()
+], CorasSortDropdown.prototype, "isDropdownOpen", void 0);

package/dist/components/sort-dropdown/sort-dropdown.d.ts

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

package/dist/components/sort-dropdown/sort-dropdown.js

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

package/dist/components/sort-dropdown/sort-dropdown.styles.d.ts

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

package/dist/components/sort-dropdown/sort-dropdown.styles.js

@@ -0,0 +1,22 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --sort-dropdown-button-icon-color: var(--coras-color-text);
+    --sort-dropdown-button-icon-color-hover: var(--coras-color-primary-700);
+  }
+
+  coras-button {
+    coras-icon {
+      fill: var(--sort-dropdown-button-icon-color);
+    }
+
+    &:hover {
+      coras-icon {
+        fill: var(--sort-dropdown-button-icon-color-hover);
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,7 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../flag-icon/flag-icon.js";
+import "../select-list/select-list.js";
+export declare class CorasSortList extends LitElement {
+    static styles: CSSResultGroup;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,25 @@
+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 { localized, msg } from "@lit/localize";
+import "../flag-icon/flag-icon.js";
+import "../select-list/select-list.js";
+import styles from "./sort-list.styles.js";
+let CorasSortList = class CorasSortList extends LitElement {
+    static { this.styles = styles; }
+    render() {
+        return html `
+      <coras-select-list caption="${msg("Sort by")}">
+        <slot></slot>
+      </coras-select-list>
+    `;
+    }
+};
+CorasSortList = __decorate([
+    localized()
+], CorasSortList);
+export { CorasSortList };

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --sort-list-label-font-size: var(--coras-font-size-sm);
+    --sort-list-label-color: var(--coras-color-text-secondary);
+    --sort-list-label-font-weight: var(--coras-font-weight-normal);
+  }
+
+  coras-dropdown-list::part(label) {
+    font-size: var(--sort-list-label-font-size);
+    color: var(--sort-list-label-color);
+    font-weight: var(--sort-list-label-font-weight);
+  }
+`;

package/dist/components/sport-options/sport-option/sport-option.component.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../../button/button.js";
+import "../../icon/icon.js";
+export declare class CorasSportOption extends LitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    section: string;
+    price: string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/sport-options/sport-option/sport-option.component.js

@@ -0,0 +1,57 @@
+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, msg } from "@lit/localize";
+import "../../button/button.js";
+import "../../icon/icon.js";
+import styles from "./sport-option.styles.js";
+let CorasSportOption = class CorasSportOption extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.section = "";
+        this.price = "";
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `<div class="sport-option">
+      <div class="section">
+        <div class="text">
+          <div class="label">${msg("Section")}</div>
+          <div class="value">${this.section}</div>
+        </div>
+      </div>
+      <div class="price">
+        <div class="text">
+          <div class="label">${msg("Price")}</div>
+          <div class="value">${this.price}<span> ${msg("each")}</span></div>
+        </div>
+        <coras-button circle variant="primary">
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            icon="chevron-right"
+            size="large"
+          ></coras-icon>
+        </coras-button>
+      </div>
+    </div>`;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasSportOption.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasSportOption.prototype, "section", void 0);
+__decorate([
+    property({ type: String })
+], CorasSportOption.prototype, "price", void 0);
+CorasSportOption = __decorate([
+    localized()
+], CorasSportOption);
+export { CorasSportOption };

package/dist/components/sport-options/sport-option/sport-option.d.ts

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

package/dist/components/sport-options/sport-option/sport-option.js

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

package/dist/components/sport-options/sport-option/sport-option.styles.d.ts

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

package/dist/components/sport-options/sport-option/sport-option.styles.js

@@ -0,0 +1,156 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --sport-option-color: var(--coras-color-text);
+    --sport-option-shadow: var(--coras-shadow-sm);
+    --sport-option-section-border-color: var(--coras-color-neutral-200);
+    --sport-option-section-border-radius: var(--coras-radius-md);
+    --sport-option-font-weight: var(--coras-font-weight-normal);
+    --sport-option-label-font-size: var(--coras-font-size-sm);
+    --sport-option-value-font-size: var(--coras-font-size-lg);
+    --sport-option-value-span-font-size: var(--coras-font-size-xs);
+    --sport-option-value-font-weight-mobile: var(--coras-font-weight-medium);
+    --sport-option-value-font-size-mobile: var(--coras-font-size-base);
+    --sport-option-value-span-font-size-mobile: var(--coras-font-size-xxs);
+  }
+
+  .sport-option {
+    container-type: inline-size;
+
+    display: flex;
+
+    width: 100%;
+    min-height: 5.125rem;
+    color: var(--sport-option-color);
+    cursor: pointer;
+
+    .section {
+      display: flex;
+      align-items: center;
+      padding: 1.125rem 1.25rem;
+      box-shadow: var(--sport-option-shadow);
+      width: 100%;
+      border: 1px solid var(--sport-option-section-border-color);
+      border-top-left-radius: var(--sport-option-section-border-radius);
+      border-bottom-left-radius: var(--sport-option-section-border-radius);
+    }
+
+    .price {
+      display: flex;
+      align-items: flex-start;
+      padding: 1.125rem 1.25rem;
+      box-shadow: var(--sport-option-shadow);
+      justify-content: space-between;
+      min-width: 14.25rem;
+      border: 1px solid var(--sport-option-section-border-color);
+      border-left: none;
+      border-top-right-radius: var(--sport-option-section-border-radius);
+      border-bottom-right-radius: var(--sport-option-section-border-radius);
+      background-color: var(--coras-color-primary-50);
+
+      coras-button {
+        margin-left: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: center;
+
+        &::part(base) {
+          height: 40px;
+          width: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        > coras-icon {
+          width: 34px;
+          height: 34px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &::part(svg) {
+            width: 34px;
+            height: 34px;
+          }
+        }
+      }
+    }
+
+    .text {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+
+      font-weight: var(--sport-option-font-weight);
+
+      .label {
+        font-size: var(--sport-option-label-font-size);
+        line-height: 1.25rem;
+      }
+
+      .value {
+        font-size: var(--sport-option-value-font-size);
+        line-height: 1.5rem;
+
+        > span {
+          font-size: var(--sport-option-value-span-font-size);
+          line-height: 1rem;
+        }
+      }
+    }
+  }
+
+  @container (max-width: 400px) {
+    .sport-option {
+      .section,
+      .price {
+        padding: 1.125rem 0.75rem;
+      }
+
+      .text {
+        .value {
+          font-size: var(--sport-option-value-font-size-mobile);
+          font-weight: var(--sport-option-value-font-weight-mobile);
+          line-height: 1.375rem;
+
+          > span {
+            font-size: var(--sport-option-value-span-font-size-mobile);
+            line-height: 0.875rem;
+          }
+        }
+      }
+
+      .price {
+        min-width: 11rem;
+
+        coras-button {
+          &::part(base) {
+            height: 36px;
+            width: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          > coras-icon {
+            width: 28px;
+            height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &::part(svg) {
+              width: 28px;
+              height: 28px;
+            }
+          }
+        }
+      }
+    }
+  }
+`;

package/dist/components/sport-options/sport-options.component.d.ts

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

package/dist/components/sport-options/sport-options.component.js

@@ -0,0 +1,27 @@
+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 "./sport-options.styles.js";
+export class CorasSportOptions extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `<div class="wrapper">
+      <div class="label">${this.label}</div>
+      <div class="options">
+        <slot></slot>
+      </div>
+    </div>`;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasSportOptions.prototype, "label", void 0);

package/dist/components/sport-options/sport-options.d.ts

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

package/dist/components/sport-options/sport-options.js

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

package/dist/components/sport-options/sport-options.styles.d.ts

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

package/dist/components/sport-options/sport-options.styles.js

@@ -0,0 +1,33 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --sport-options-label-color: var(--coras-color-text);
+    --sport-options-label-font-size: var(--coras-font-size-lg);
+    --sport-options-label-font-weight: var(--coras-font-weight-normal);
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .label {
+      margin: 0.5rem 0.75rem 1.5rem;
+      color: var(--sport-options-label-color);
+      font-size: var(--sport-options-label-font-size);
+      font-weight: var(--sport-options-label-font-weight);
+      line-height: 1.5rem;
+    }
+
+    .options {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+
+      width: 100%;
+    }
+  }
+`;

package/dist/components/star-rating/star-rating.component.d.ts

@@ -0,0 +1,15 @@
+import { CSSResultGroup, LitElement, TemplateResult } from "lit";
+/**
+ * A component that displays a star rating.
+ *
+ * @element coras-star-rating
+ *
+ * @property {number} rating - The rating value (0 to 5). Supports half-stars.
+ */
+export declare class CorasStarRating extends LitElement {
+    static styles: CSSResultGroup;
+    rating: number;
+    private get normalizedRating();
+    private renderStar;
+    render(): TemplateResult<1>;
+}