@coras-io/embed 0.1.0

package/dist/components/location-image/location-image.component.js

@@ -0,0 +1,135 @@
+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 { property, state } from "lit/decorators.js";
+import { getLocationImageURL } from "../../core/images/helpers.js";
+import "../image/image.js";
+import styles from "./location-image.styles.js";
+let CorasLocationImage = class CorasLocationImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.baseURL = "https://coras.imgix.net/locations";
+        this.defaultImage = "ireland/cork.png";
+        this.country = "ireland";
+        this.imageExtension = "png";
+        this.alt = msg("Location image");
+        this.width = 1160;
+        this.height = 160;
+        this.loading = false;
+        this.currentSrc = "";
+        this.fallbackTried = false;
+        this.loadFailed = false;
+        this.handleImageLoad = () => {
+            this.loading = false;
+        };
+        this.handleImageError = () => {
+            this.loading = false;
+            if (this.fallbackTried || this.currentSrc === this.fallbackSrc) {
+                console.warn("Location image: Both primary and fallback images failed to load");
+                this.loadFailed = true;
+                return;
+            }
+            this.currentSrc = this.fallbackSrc;
+            this.fallbackTried = true;
+        };
+    }
+    static { this.styles = styles; }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has("baseURL") ||
+            changedProperties.has("country") ||
+            changedProperties.has("city") ||
+            changedProperties.has("imageExtension") ||
+            changedProperties.has("defaultImage")) {
+            this.resetSource();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resetSource();
+    }
+    resetSource() {
+        this.currentSrc = getLocationImageURL({
+            baseURL: this.baseURL,
+            country: this.country,
+            city: this.city ?? "",
+            imageExtension: this.imageExtension,
+        });
+        this.fallbackTried = false;
+        this.loadFailed = false;
+    }
+    /**
+     * Hard-coded Coras CDN fallback. Used when the primary URL fails even when
+     * `baseURL` is misconfigured — that's deliberate, so a broken caller still
+     * gets a working image instead of a placeholder.
+     */
+    get fallbackSrc() {
+        return `https://coras.imgix.net/locations/${this.defaultImage}`;
+    }
+    render() {
+        if (this.loadFailed) {
+            const label = msg("Image could not be loaded");
+            return html `<div part="placeholder" role="img" aria-label=${label}>
+        ${label}
+      </div>`;
+        }
+        return html `
+      <coras-image
+        exportparts="image,placeholder"
+        src=${this.currentSrc}
+        alt=${this.alt}
+        width=${this.width}
+        height=${this.height}
+        preset="header-banner"
+        loading="eager"
+        @coras-image-load=${this.handleImageLoad}
+        @coras-image-error=${this.handleImageError}
+      ></coras-image>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], CorasLocationImage.prototype, "baseURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasLocationImage.prototype, "defaultImage", void 0);
+__decorate([
+    property({ type: String })
+], CorasLocationImage.prototype, "country", void 0);
+__decorate([
+    property({ type: String })
+], CorasLocationImage.prototype, "city", void 0);
+__decorate([
+    property({ type: String })
+], CorasLocationImage.prototype, "imageExtension", void 0);
+__decorate([
+    property({ type: String })
+], CorasLocationImage.prototype, "alt", void 0);
+__decorate([
+    property({ type: Number })
+], CorasLocationImage.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], CorasLocationImage.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasLocationImage.prototype, "loading", void 0);
+__decorate([
+    state()
+], CorasLocationImage.prototype, "currentSrc", void 0);
+__decorate([
+    state()
+], CorasLocationImage.prototype, "fallbackTried", void 0);
+__decorate([
+    state()
+], CorasLocationImage.prototype, "loadFailed", void 0);
+CorasLocationImage = __decorate([
+    localized()
+], CorasLocationImage);
+export { CorasLocationImage };

package/dist/components/location-image/location-image.d.ts

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

package/dist/components/location-image/location-image.js

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

package/dist/components/location-image/location-image.styles.d.ts

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

package/dist/components/location-image/location-image.styles.js

@@ -0,0 +1,49 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: inline-block;
+    position: relative;
+
+    --location-image-max-width: 952px;
+    --location-image-height: 148px;
+    --location-image-border-radius: 40px 2px;
+    --location-image-drop-shadow: 0px 4px 4px
+      color-mix(in srgb, black, transparent 75%);
+    --location-image-placeholder-bg: var(--coras-color-surface-sunken);
+    --location-image-placeholder-color: var(--coras-color-text-muted);
+  }
+
+  :host([loading]) {
+    opacity: 0.8;
+  }
+
+  coras-image {
+    display: block;
+    height: var(--location-image-height);
+    max-width: var(--location-image-max-width);
+    width: 100%;
+    border-radius: var(--location-image-border-radius);
+    filter: drop-shadow(var(--location-image-drop-shadow));
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  coras-image::part(image) {
+    border-radius: inherit;
+  }
+
+  [part="placeholder"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--location-image-height);
+    max-width: var(--location-image-max-width);
+    width: 100%;
+    background-color: var(--location-image-placeholder-bg);
+    color: var(--location-image-placeholder-color);
+    border-radius: var(--location-image-border-radius);
+    font-size: 0.875rem;
+  }
+`;

package/dist/components/locations-results/locations-results.component.d.ts

@@ -0,0 +1,21 @@
+import { CSSResultGroup, LitElement, TemplateResult } from "lit";
+import "../icon/icon.js";
+import "../select-list/select-list.js";
+import "../select-list/select-option/select-option.js";
+import { components } from "../../core/types/api-schema.js";
+export declare class CorasLocationsResults extends LitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    items: components["schemas"]["LocationSchema"][];
+    private near;
+    private renderPopular;
+    render(): TemplateResult<1>;
+}
+export interface LocationResultOptionProps {
+    item: components["schemas"]["LocationSchema"];
+    localizedName: string;
+    selected?: boolean;
+    onSelect?: (item: components["schemas"]["LocationSchema"]) => void;
+    assetsURL: string;
+}
+export declare function renderLocationResultOption({ item, selected, onSelect, localizedName, assetsURL, }: LocationResultOptionProps): TemplateResult;

package/dist/components/locations-results/locations-results.component.js

@@ -0,0 +1,83 @@
+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 { fireInternalEvent } from "../../core/events.js";
+import styles from "./locations-results.styles.js";
+import "../icon/icon.js";
+import "../select-list/select-list.js";
+import "../select-list/select-option/select-option.js";
+let CorasLocationsResults = class CorasLocationsResults extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.items = [];
+    }
+    static { this.styles = styles; }
+    near() {
+        if ("geolocation" in navigator) {
+            navigator.geolocation.getCurrentPosition((position) => {
+                fireInternalEvent(this, "geolocation-selected", {
+                    latitude: position.coords.latitude,
+                    longitude: position.coords.longitude,
+                });
+            }, (error) => {
+                console.error(`An error occurred while getting the current position of the device. Error code: ${error.code}`);
+            });
+        }
+        else {
+            // TODO: add error/warning modal?
+            console.error("Geolocation is not supported by this browser.");
+        }
+    }
+    renderPopular() {
+        return html `
+      <div class="popular">
+        <p>${msg("Popular")}</p>
+        <div>
+          <span @click=${() => this.near()}>Near me</span>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      ${this.renderPopular()}
+
+      <coras-select-list>
+        <slot></slot>
+      </coras-select-list>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasLocationsResults.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: Array })
+], CorasLocationsResults.prototype, "items", void 0);
+CorasLocationsResults = __decorate([
+    localized()
+], CorasLocationsResults);
+export { CorasLocationsResults };
+export function renderLocationResultOption({ item, selected, onSelect, localizedName, assetsURL, }) {
+    return html `
+    <coras-select-option
+      key=${localizedName}
+      ?selected=${selected}
+      @click=${() => onSelect && onSelect(item)}
+    >
+      ${renderIcon(item, assetsURL)}
+      <span>${localizedName}</span>
+    </coras-select-option>
+  `;
+}
+function renderIcon(item, assetsURL) {
+    const icon = item.location_type === "country" ? "flag" : "pin-drop";
+    return html `<coras-icon assets-url="${assetsURL}" icon=${icon}></coras-icon>`;
+}

package/dist/components/locations-results/locations-results.d.ts

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

package/dist/components/locations-results/locations-results.js

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

package/dist/components/locations-results/locations-results.styles.d.ts

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

package/dist/components/locations-results/locations-results.styles.js

@@ -0,0 +1,64 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --locations-results-background-color: var(--coras-color-surface);
+    --locations-results-font-size: var(--coras-font-size-sm);
+    --locations-results-hover-background-color: var(
+      --coras-color-surface-hover
+    );
+    --locations-results-popular-border-color: var(--coras-color-neutral-200);
+    --locations-results-popular-font-size: var(--coras-font-size-sm);
+    --locations-results-popular-border-radius: var(--coras-radius-chip);
+    --locations-results-popular-background-color: var(
+      --coras-color-primary-300
+    );
+
+    background-color: var(--locations-results-background-color);
+    width: 20rem;
+    max-width: 100%;
+
+    .popular {
+      padding: 1rem 0.5rem;
+      border-bottom: 1px solid var(--locations-results-popular-border-color);
+      display: flex;
+      flex-direction: column;
+      row-gap: 1rem;
+
+      p {
+        font-weight: 600;
+        font-size: var(--locations-results-popular-font-size);
+        line-height: 20px;
+        letter-spacing: 0.4px;
+        padding: 0 0 0 10px;
+        margin: 0;
+      }
+
+      div {
+        display: flex;
+        gap: 0.5rem;
+
+        span {
+          display: flex;
+          align-items: center;
+          border-radius: var(--locations-results-popular-border-radius);
+          font-size: var(--locations-results-popular-font-size);
+          justify-content: center;
+          line-height: 0.875rem;
+          letter-spacing: 0.2px;
+          padding: 8px 12px;
+          white-space: nowrap;
+          background-color: var(--locations-results-popular-background-color);
+          cursor: pointer;
+        }
+      }
+    }
+
+    & coras-icon {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+  }
+`;

package/dist/components/marketing-tag/marketing-tag.component.d.ts

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

package/dist/components/marketing-tag/marketing-tag.component.js

@@ -0,0 +1,8 @@
+import { LitElement, html } from "lit";
+import styles from "./marketing-tag.styles.js";
+export class CorasMarketingTag extends LitElement {
+    static { this.styles = styles; }
+    render() {
+        return html `<span class="tag"><slot></slot></span>`;
+    }
+}

package/dist/components/marketing-tag/marketing-tag.d.ts

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

package/dist/components/marketing-tag/marketing-tag.js

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

package/dist/components/marketing-tag/marketing-tag.styles.d.ts

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

package/dist/components/marketing-tag/marketing-tag.styles.js

@@ -0,0 +1,36 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: inline-block;
+
+    --marketing-tag-line-height: 1rem;
+    --marketing-tag-letter-spacing: 0.01em;
+    --marketing-tag-background-color: var(--coras-color-info-500);
+
+    --marketing-tag-border-radius: var(--coras-radius-md);
+    --marketing-tag-font-size: var(--coras-font-size-xs);
+    --marketing-tag-font-weight: var(--coras-font-weight-semibold);
+    --marketing-tag-color: var(--coras-palette-white);
+    --marketing-tag-shadow: var(--coras-shadow-strong);
+  }
+
+  .tag {
+    display: flex;
+    align-items: center;
+    border-radius: var(--marketing-tag-border-radius);
+    font-size: var(--marketing-tag-font-size);
+    font-weight: var(--marketing-tag-font-weight);
+    justify-content: center;
+    line-height: var(--marketing-tag-line-height);
+    letter-spacing: var(--marketing-tag-letter-spacing);
+    padding: 4px 8px;
+    white-space: nowrap;
+    background-color: var(--marketing-tag-background-color);
+    color: var(--marketing-tag-color);
+    box-shadow: var(--marketing-tag-shadow);
+    filter: drop-shadow(0px 2px 3px color-mix(in srgb, black, transparent 70%));
+  }
+`;

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

@@ -0,0 +1,12 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../icon/icon.js";
+import { MessageCardVariant } from "./message-card.types.js";
+export declare class CorasMessageCard extends LitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    title: string;
+    variant: MessageCardVariant;
+    private _hasSlottedContent;
+    private _handleSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,56 @@
+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, state } from "lit/decorators.js";
+import "../icon/icon.js";
+import styles from "./message-card.styles.js";
+export class CorasMessageCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.title = "";
+        this.variant = "info";
+        this._hasSlottedContent = false;
+    }
+    static { this.styles = styles; }
+    _handleSlotChange(e) {
+        const slot = e.target;
+        this._hasSlottedContent = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    render() {
+        return html `
+      <div part="base" class="container">
+        <div class="icon">
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            icon="${this.variant === "info" ? "info" : "error"}"
+          ></coras-icon>
+        </div>
+        <div class="content">
+          <p class="title" data-testid="title">${this.title}</p>
+          ${this._hasSlottedContent
+            ? html `<div class="message" data-testid="message">
+                <slot @slotchange=${this._handleSlotChange}></slot>
+              </div>`
+            : html `<slot @slotchange=${this._handleSlotChange}></slot>`}
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasMessageCard.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasMessageCard.prototype, "title", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], CorasMessageCard.prototype, "variant", void 0);
+__decorate([
+    state()
+], CorasMessageCard.prototype, "_hasSlottedContent", void 0);

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

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

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

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

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

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

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

@@ -0,0 +1,72 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: block;
+    width: 100%;
+
+    .container {
+      border-radius: 20px;
+      padding: 16px;
+      border: 1px solid var(--coras-color-info-500);
+      background-color: var(--coras-color-info-50);
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+
+      .icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        height: 28px;
+
+        coras-icon {
+          width: 28px;
+          height: 28px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          fill: var(--coras-color-info-500);
+        }
+      }
+
+      .content {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+
+        .title {
+          font-weight: 600;
+          font-size: 20px;
+          line-height: 28px;
+          letter-spacing: 0.6px;
+          color: var(--coras-color-text);
+          margin: 0;
+        }
+
+        .message {
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
+          color: var(--coras-color-text);
+          margin: 8px 0 0;
+        }
+      }
+    }
+  }
+
+  :host([variant="error"]) {
+    .container {
+      border-color: var(--coras-color-error-500);
+      background-color: var(--coras-color-error-50);
+
+      .icon {
+        coras-icon {
+          fill: var(--coras-color-error-500);
+        }
+      }
+    }
+  }
+`;

package/dist/components/message-card/message-card.types.d.ts

@@ -0,0 +1 @@
+export type MessageCardVariant = "info" | "error";

package/dist/components/message-card/message-card.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/mobile-menu-item/mobile-menu-item.component.d.ts

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