@coras-io/embed 0.1.0

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

@@ -0,0 +1,204 @@
+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 { autoUpdate, computePosition, flip, offset, shift, arrow, size, } from "@floating-ui/dom";
+import { LitElement, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import styles from "./dropdown.styles.js";
+import { fireInternalEvent } from "../../core/events.js";
+export class CorasDropdown extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.arrow = false;
+        this.unstyledContent = false;
+        this.autoFocus = false;
+        this.handleKeyDown = (event) => {
+            if (event.key === "Escape" && this.open) {
+                event.stopPropagation();
+                event.preventDefault();
+                this.dispatchCloseEvent();
+            }
+        };
+        this.handleDocumentMouseDown = (event) => {
+            const path = event.composedPath();
+            if (!path.includes(this.containingElement)) {
+                this.dispatchCloseEvent();
+            }
+        };
+        this.dispatchCloseEvent = () => {
+            fireInternalEvent(this, "dropdown-close-request", {});
+        };
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.containingElement) {
+            this.containingElement = this;
+        }
+        this.addEventListener("keydown", this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        this.hide();
+        if (this.cleanup) {
+            this.cleanup();
+        }
+        this.removeEventListener("keydown", this.handleKeyDown);
+        super.disconnectedCallback();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("open")) {
+            const previousOpen = changedProperties.get("open");
+            if (previousOpen === false && this.open) {
+                this.applyAutoUpdate();
+                this.show();
+            }
+            else if (previousOpen === true && !this.open) {
+                this.hide();
+            }
+        }
+    }
+    applyAutoUpdate() {
+        const contentOffset = this.arrow ? 20 : 8;
+        this.cleanup = autoUpdate(this.trigger, this.content, () => {
+            const middleware = [
+                shift({ padding: 10 }),
+                offset({ mainAxis: contentOffset }),
+                flip(),
+                size({
+                    padding: 10,
+                    // Scroll lives on the inner wrapper, not the floating box: the box
+                    // hosts the arrow (positioned above its top edge) and `overflow` here
+                    // would clip it. Setting overflow-y also promotes overflow-x to a clip.
+                    apply: ({ rects, elements, availableHeight }) => {
+                        Object.assign(elements.floating.style, {
+                            minWidth: `${rects.reference.width}px`,
+                        });
+                        Object.assign(this.scrollElement.style, {
+                            maxHeight: `${availableHeight}px`,
+                            overflowY: "auto",
+                        });
+                    },
+                }),
+            ];
+            if (this.arrow) {
+                middleware.push(arrow({ element: this.arrowElement }));
+            }
+            computePosition(this.trigger, this.content, {
+                placement: "bottom",
+                middleware,
+            }).then(({ x, y, middlewareData }) => {
+                Object.assign(this.content.style, {
+                    left: x != null ? `${x}px` : "",
+                    top: y != null ? `${y}px` : "",
+                });
+                if (middlewareData.arrow) {
+                    const { x } = middlewareData.arrow;
+                    Object.assign(this.arrowElement.style, {
+                        left: x != null ? `${x}px` : "",
+                        top: "-10px",
+                    });
+                }
+            });
+        });
+    }
+    firstUpdated() {
+        this.applyAutoUpdate();
+        if (this.open) {
+            this.show();
+        }
+    }
+    show() {
+        document.addEventListener("mousedown", this.handleDocumentMouseDown);
+        this.content.setAttribute("data-show", "");
+        // Focus the content element when the dropdown opens (only if autoFocus is enabled)
+        if (this.autoFocus) {
+            this.updateComplete.then(() => {
+                const slot = this.content.querySelector("slot:not([name])"); // Target the default slot
+                if (!slot) {
+                    this.content.setAttribute("tabindex", "-1");
+                    this.content.focus();
+                    return;
+                }
+                const focusableElement = slot
+                    .assignedElements({ flatten: true })
+                    .find((el) => el instanceof HTMLElement &&
+                    el.hasAttribute("role") &&
+                    el.getAttribute("role") === "listbox");
+                if (focusableElement && "focus" in focusableElement) {
+                    focusableElement.focus();
+                }
+                else {
+                    // Fallback to focusing on the content container
+                    this.content.setAttribute("tabindex", "-1");
+                    this.content.focus();
+                }
+            });
+        }
+    }
+    hide() {
+        document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+        // `disconnectedCallback` calls `hide` even when the dropdown is torn down
+        // before its first render, so `content` may not exist yet.
+        this.content?.removeAttribute("data-show");
+        if (this.cleanup) {
+            this.cleanup();
+        }
+        // Focus the trigger element when the dropdown closes (only if autoFocus is enabled)
+        if (this.autoFocus) {
+            this.updateComplete.then(() => {
+                const triggerElement = this.trigger.assignedElements()[0];
+                if (triggerElement && triggerElement.focus) {
+                    triggerElement.focus();
+                }
+            });
+        }
+    }
+    render() {
+        return html `
+      <slot name="trigger"></slot>
+      <div
+        class="content"
+        part="content"
+        ?data-unstyled=${this.unstyledContent}
+        aria-hidden=${this.open ? "false" : "true"}
+        aria-labelledby="dropdown"
+      >
+        ${this.arrow ? html `<div class="arrow"></div>` : null}
+        <div class="scroll">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    query("slot[name=trigger]")
+], CorasDropdown.prototype, "trigger", void 0);
+__decorate([
+    query(".content")
+], CorasDropdown.prototype, "content", void 0);
+__decorate([
+    query(".arrow")
+], CorasDropdown.prototype, "arrowElement", void 0);
+__decorate([
+    query(".scroll")
+], CorasDropdown.prototype, "scrollElement", void 0);
+__decorate([
+    state()
+], CorasDropdown.prototype, "containingElement", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasDropdown.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasDropdown.prototype, "arrow", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "unstyled-content" })
+], CorasDropdown.prototype, "unstyledContent", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "auto-focus" })
+], CorasDropdown.prototype, "autoFocus", void 0);

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

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

package/dist/components/dropdown/dropdown.js

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

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

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

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

@@ -0,0 +1,60 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --dropdown-popover-background-color: var(--coras-color-surface);
+    --dropdown-popover-arrow-icon-color: var(--coras-color-primary-400);
+    --dropdown-popover-border-color: var(--coras-color-neutral-200);
+    --dropdown-popover-border-radius: var(--coras-radius-sm);
+    --dropdown-popover-options-shadow: var(--coras-shadow-md);
+
+    display: inline-block;
+    position: relative;
+  }
+
+  slot[name="trigger"] {
+    display: block;
+    height: 100%;
+  }
+
+  .content {
+    display: none;
+    position: absolute;
+    width: max-content;
+    top: 0;
+    left: 0;
+    max-width: calc(100vw - 2.5rem);
+    z-index: 5;
+
+    &:not([data-unstyled]) {
+      background-color: var(--dropdown-popover-background-color);
+      box-shadow: var(--dropdown-popover-options-shadow);
+      border: 1px solid var(--dropdown-popover-border-color);
+      border-radius: var(--dropdown-popover-border-radius);
+    }
+
+    &[data-show] {
+      display: block;
+    }
+
+    /* The scroll/clip lives here so the floating box stays overflow-visible and
+       the arrow above its top edge is never clipped. Inherits the box radius so
+       scrolled content keeps the rounded corners. */
+    .scroll {
+      border-radius: inherit;
+    }
+
+    .arrow {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      pointer-events: none;
+      transform: rotate(45deg);
+      background-color: var(--dropdown-popover-background-color);
+      border-left: 1px solid var(--dropdown-popover-border-color);
+      border-top: 1px solid var(--dropdown-popover-border-color);
+    }
+  }
+`;

package/dist/components/expiration-timer/expiration-timer.component.d.ts

@@ -0,0 +1,12 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../icon/icon.js";
+export declare class CorasExpirationTimer extends LitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    expirationTime: number;
+    private timer;
+    protected firstUpdated(): void;
+    private handleExpiration;
+    private timeLeftLabel;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/expiration-timer/expiration-timer.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 { localized, msg } from "@lit/localize";
+import { TimeExpirationController } from "../../controllers/time-expiration.js";
+import styles from "./expiration-timer.styles.js";
+import "../icon/icon.js";
+import { intervalToDuration } from "date-fns/intervalToDuration";
+let CorasExpirationTimer = class CorasExpirationTimer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.expirationTime = 0;
+        this.timer = null;
+    }
+    static { this.styles = styles; }
+    firstUpdated() {
+        this.timer = new TimeExpirationController(this, this.expirationTime, () => this.handleExpiration());
+    }
+    handleExpiration() { }
+    timeLeftLabel() {
+        const duration = intervalToDuration({
+            start: 0,
+            end: (this.timer?.value === undefined
+                ? this.expirationTime
+                : this.timer.value) * 1000,
+        });
+        return `${String(duration.minutes || 0).padStart(2, "0")}:${String(duration.seconds || 0).padStart(2, "0")}`;
+    }
+    render() {
+        return html `
+      <coras-icon assets-url="${this.assetsURL}" icon="hourglass"></coras-icon>
+      <span>${msg("Tickets reserved for")}</span>
+      <span class="time">${this.timeLeftLabel()}</span>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasExpirationTimer.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: Number, attribute: "expiration-time", reflect: true })
+], CorasExpirationTimer.prototype, "expirationTime", void 0);
+CorasExpirationTimer = __decorate([
+    localized()
+], CorasExpirationTimer);
+export { CorasExpirationTimer };

package/dist/components/expiration-timer/expiration-timer.d.ts

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

package/dist/components/expiration-timer/expiration-timer.js

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

package/dist/components/expiration-timer/expiration-timer.styles.d.ts

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

package/dist/components/expiration-timer/expiration-timer.styles.js

@@ -0,0 +1,37 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --expiration-timer-background-color: var(--coras-color-info-50);
+    --expiration-timer-font-size: var(--coras-font-size-base);
+    --expiration-timer-line-height: var(--coras-font-size-xl);
+    --expiration-timer-font-weight: var(--coras-font-weight-normal);
+    --expiration-timer-color: var(--coras-color-info-900);
+
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    padding: 0.5rem;
+    background-color: var(--expiration-timer-background-color);
+    border-radius: 0.25rem;
+    font-size: var(--expiration-timer-font-size);
+    line-height: var(--expiration-timer-line-height);
+    font-weight: var(--expiration-timer-font-weight);
+    color: var(--expiration-timer-color);
+
+    coras-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      fill: var(--expiration-timer-color);
+    }
+
+    .time {
+      width: 3rem;
+      margin-inline-end: 0.5rem;
+    }
+  }
+`;

package/dist/components/explore-card/explore-card.component.d.ts

@@ -0,0 +1,11 @@
+import { CSSResultGroup, LitElement, TemplateResult } from "lit";
+import "../image/image.js";
+import { ExploreCardVariants } from "./explore-card.constants.js";
+export declare class CorasExploreCard extends LitElement {
+    static styles: CSSResultGroup;
+    label: string;
+    variant: ExploreCardVariants | null;
+    image: string;
+    private renderImage;
+    render(): TemplateResult;
+}

package/dist/components/explore-card/explore-card.component.js

@@ -0,0 +1,48 @@
+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 { ExploreCardVariants } from "./explore-card.constants.js";
+import styles from "./explore-card.styles.js";
+export class CorasExploreCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.variant = null;
+        this.image = "";
+    }
+    static { this.styles = styles; }
+    renderImage() {
+        const height = this.variant === ExploreCardVariants.HALF_SIZE_BG ? 220 : 360;
+        return html `<div class="image">
+      <coras-image
+        src=${this.image}
+        alt=${this.label}
+        width="250"
+        height=${height}
+        widths="250,375,500,750"
+      ></coras-image>
+    </div>`;
+    }
+    render() {
+        return html `<div class="wrapper">
+      ${this.renderImage()}
+      <div class="label">${this.label}</div>
+      <div class="button"><slot name="button"></slot></div>
+    </div>`;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasExploreCard.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], CorasExploreCard.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], CorasExploreCard.prototype, "image", void 0);

package/dist/components/explore-card/explore-card.constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum ExploreCardVariants {
+    FULL_SIZE_BG = "fullSizeBg",
+    HALF_SIZE_BG = "halfSizeBg"
+}

package/dist/components/explore-card/explore-card.constants.js

@@ -0,0 +1,5 @@
+export var ExploreCardVariants;
+(function (ExploreCardVariants) {
+    ExploreCardVariants["FULL_SIZE_BG"] = "fullSizeBg";
+    ExploreCardVariants["HALF_SIZE_BG"] = "halfSizeBg";
+})(ExploreCardVariants || (ExploreCardVariants = {}));

package/dist/components/explore-card/explore-card.d.ts

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

package/dist/components/explore-card/explore-card.js

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

package/dist/components/explore-card/explore-card.styles.d.ts

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

package/dist/components/explore-card/explore-card.styles.js

@@ -0,0 +1,71 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --explore-card-border-radius: var(--coras-radius-sm);
+    --explore-card-shadow: var(--coras-shadow-lg);
+    --explore-card-label-color: var(--coras-color-primary-100);
+    --explore-card-label-font-size: var(--coras-font-size-3xl);
+    --explore-card-label-font-weight: var(--coras-font-weight-semibold);
+  }
+
+  :host([variant="halfSizeBg"]) {
+    .wrapper {
+      .image {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+
+  .wrapper {
+    position: relative;
+    width: 100%;
+
+    border-radius: var(--explore-card-border-radius);
+    box-shadow: var(--explore-card-shadow);
+
+    .image {
+      border-radius: inherit;
+
+      width: 100%;
+      height: 100%;
+
+      coras-image {
+        border-radius: inherit;
+        width: 100%;
+        height: 100%;
+      }
+
+      coras-image::part(image) {
+        border-radius: inherit;
+      }
+    }
+
+    .label {
+      position: absolute;
+      top: 66px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      text-align: center;
+
+      color: var(--explore-card-label-color);
+      font-size: var(--explore-card-label-font-size);
+      font-weight: var(--explore-card-label-font-weight);
+      text-shadow:
+        0 2px 3px color-mix(in srgb, black, transparent 70%),
+        0 6px 10px color-mix(in srgb, black, transparent 85%);
+    }
+
+    .button {
+      position: absolute;
+      bottom: 74px;
+      width: 100%;
+
+      display: flex;
+      justify-content: center;
+    }
+  }
+`;

package/dist/components/filter-chip/filter-chip.component.d.ts

@@ -0,0 +1,12 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { sizes, variants } from "./filter-chip.constants.js";
+export declare class CorasFilterChip extends LitElement {
+    static styles: CSSResultGroup;
+    variant: (typeof variants)[number];
+    size: (typeof sizes)[number];
+    disabled: boolean;
+    selected: boolean;
+    updated(changed: PropertyValues): void;
+    private getClassMap;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/filter-chip/filter-chip.component.js

@@ -0,0 +1,68 @@
+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 { classMap } from "lit/directives/class-map.js";
+import styles from "./filter-chip.styles.js";
+export class CorasFilterChip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "primary";
+        this.size = "small";
+        this.disabled = false;
+        this.selected = false;
+    }
+    static { this.styles = styles; }
+    updated(changed) {
+        if (changed.has("disabled")) {
+            this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+        }
+    }
+    getClassMap() {
+        return classMap({
+            primary: this.variant === "primary",
+            text: this.variant === "text",
+            small: this.size === "small",
+            large: this.size === "large",
+            selected: !this.disabled && this.selected,
+        });
+    }
+    render() {
+        return html `
+      <button
+        part="base"
+        ?disabled="${this.disabled}"
+        aria-disabled="${this.disabled ? "true" : "false"}"
+        class="${this.getClassMap()}"
+      >
+        <div class="grid">
+          <span class="prefix">
+            <slot name="prefix" part="prefix"></slot>
+          </span>
+          <span class="label">
+            <slot part="label"></slot>
+          </span>
+          <span class="suffix">
+            <slot name="suffix" part="suffix"></slot>
+          </span>
+        </div>
+      </button>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], CorasFilterChip.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], CorasFilterChip.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasFilterChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasFilterChip.prototype, "selected", void 0);

package/dist/components/filter-chip/filter-chip.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const variants: readonly ["primary", "text"];
+export declare const sizes: readonly ["small", "large"];

package/dist/components/filter-chip/filter-chip.constants.js

@@ -0,0 +1,2 @@
+export const variants = ["primary", "text"];
+export const sizes = ["small", "large"];