@coras-io/embed 0.1.0

package/dist/components/icon/icon.component.js

@@ -0,0 +1,104 @@
+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 { html, LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+import { sanitizeSvg } from "../../core/utils/html.js";
+import styles from "./icon.styles.js";
+// Browsers don't resolve external `<use href="icons.svg#id">` references inside a
+// shadow root, so the sprite is fetched once per URL (shared across every icon)
+// and each icon inlines its own symbol. The fetch is the integrator's validated
+// assets origin; the inlined markup is still SVG-sanitized (sanitizeSvg) as
+// defence in depth against a compromised asset host.
+const spriteCache = new Map();
+function loadSprite(url) {
+    let sprite = spriteCache.get(url);
+    if (!sprite) {
+        sprite = fetch(url)
+            .then(async (res) => {
+            // Guard against a misrouted assets path (e.g. an SPA server answering
+            // with index.html): only parse a real SVG response, so a wrong URL
+            // yields no icon rather than a noisy XML parse error.
+            const type = res.headers.get("content-type") ?? "";
+            if (!res.ok || !/svg|xml/i.test(type))
+                return null;
+            const doc = new DOMParser().parseFromString(await res.text(), "image/svg+xml");
+            return doc.querySelector("parsererror") ? null : doc;
+        })
+            .catch(() => null);
+        spriteCache.set(url, sprite);
+    }
+    return sprite;
+}
+let CorasIcon = class CorasIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.icon = "close";
+        this.label = msg("Icon");
+        this.size = "base";
+        this.closeIconStyle = false;
+        this.symbol = null;
+    }
+    static { this.styles = styles; }
+    willUpdate(changed) {
+        if (changed.has("assetsURL") || changed.has("icon")) {
+            void this.resolveSymbol();
+        }
+    }
+    async resolveSymbol() {
+        const { icon, assetsURL } = this;
+        const doc = await loadSprite(`${assetsURL}/icons.svg`);
+        // A newer icon/url change may have superseded this load.
+        if (this.icon !== icon || this.assetsURL !== assetsURL)
+            return;
+        const symbol = doc?.querySelector(`[id="${icon}"]`);
+        this.symbol = symbol
+            ? {
+                viewBox: symbol.getAttribute("viewBox") ?? "0 0 24 24",
+                content: symbol.innerHTML,
+            }
+            : null;
+    }
+    render() {
+        const classes = { [this.size]: true };
+        return html `
+      <svg
+        class=${classMap(classes)}
+        role="img"
+        aria-label=${this.label}
+        viewBox=${this.symbol?.viewBox ?? "0 0 24 24"}
+      >
+        ${this.symbol ? unsafeSVG(sanitizeSvg(this.symbol.content)) : ""}
+      </svg>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasIcon.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasIcon.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], CorasIcon.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], CorasIcon.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "close-icon-style" })
+], CorasIcon.prototype, "closeIconStyle", void 0);
+__decorate([
+    state()
+], CorasIcon.prototype, "symbol", void 0);
+CorasIcon = __decorate([
+    localized()
+], CorasIcon);
+export { CorasIcon };

package/dist/components/icon/icon.d.ts

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

package/dist/components/icon/icon.js

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

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

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

package/dist/components/icon/icon.styles.js

@@ -0,0 +1,43 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    box-sizing: content-box;
+    display: inline-block;
+  }
+
+  :host([close-icon-style]) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--icon-background-color, #6e6e6e);
+    border-radius: 50%;
+    padding: 2px;
+    height: 1.25rem;
+    width: 1.25rem;
+    fill: var(--drawer-close-icon-fill, white);
+    cursor: pointer;
+  }
+
+  svg,
+  div {
+    display: block;
+
+    &.base {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+
+    &.small {
+      height: 1rem;
+      width: 1rem;
+    }
+
+    &.large {
+      height: 3rem;
+      width: 3rem;
+    }
+  }
+`;

package/dist/components/icon/icon.types.d.ts

@@ -0,0 +1,2 @@
+export type IconName = "activity" | "bolt" | "calendar" | "card" | "check-circle-fill" | "check-circle" | "check" | "chevron-left" | "chevron-right" | "clock" | "close-circle" | "close" | "confirmation-number" | "date-range" | "delete" | "error" | "expand-more" | "flag" | "hourglass" | "image" | "info" | "keyboard-arrow-down" | "menu" | "minus-circle" | "music" | "person-add" | "pin-drop" | "plus-circle" | "remove" | "schedule" | "search" | "shopping-basket" | "sort" | "sport" | "success" | "theatre" | "ticket" | "timer" | "tune" | "warning";
+export type IconSize = "base" | "small" | "large";

package/dist/components/icon/icon.types.js

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

package/dist/components/icon-list/icon-list-item/icon-list-item.component.d.ts

@@ -0,0 +1,8 @@
+import { CSSResultGroup, LitElement, nothing } from "lit";
+import "../../icon/icon.js";
+export declare class CorasIconListItem extends LitElement {
+    static styles: CSSResultGroup;
+    icon: string;
+    iconBaseURL: string;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}

package/dist/components/icon-list/icon-list-item/icon-list-item.component.js

@@ -0,0 +1,42 @@
+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, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import styles from "./icon-list-item.styles.js";
+import "../../icon/icon.js";
+export class CorasIconListItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.icon = "";
+        this.iconBaseURL = "";
+    }
+    static { this.styles = styles; }
+    render() {
+        if (!this.icon) {
+            return nothing;
+        }
+        return html `
+      <div class="icon-list-item">
+        <coras-icon
+          assets-url="${this.iconBaseURL}"
+          icon="${this.icon}"
+          size="small"
+          class="icon"
+        ></coras-icon>
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasIconListItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasIconListItem.prototype, "iconBaseURL", void 0);

package/dist/components/icon-list/icon-list-item/icon-list-item.d.ts

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

package/dist/components/icon-list/icon-list-item/icon-list-item.js

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

package/dist/components/icon-list/icon-list-item/icon-list-item.styles.d.ts

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

package/dist/components/icon-list/icon-list-item/icon-list-item.styles.js

@@ -0,0 +1,23 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: block;
+  }
+
+  .icon-list-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .icon {
+    flex-shrink: 0;
+  }
+
+  .content {
+    flex: 1;
+  }
+`;

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

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

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

@@ -0,0 +1,12 @@
+import { LitElement, html } from "lit";
+import styles from "./icon-list.styles.js";
+export class CorasIconList extends LitElement {
+    static { this.styles = styles; }
+    render() {
+        return html `
+      <div class="icon-list">
+        <slot></slot>
+      </div>
+    `;
+    }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: block;
+  }
+
+  .icon-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+`;

package/dist/components/image/image.component.d.ts

@@ -0,0 +1,83 @@
+import { CSSResultGroup, LitElement, nothing } from "lit";
+import { type ImagePreset } from "../../core/images/srcset.js";
+import { type ImgixCrop } from "../../core/images/url.js";
+type Loading = "lazy" | "eager";
+type Decoding = "async" | "sync" | "auto";
+type Fit = "cover" | "contain";
+type Placeholder = "skeleton" | "color" | "none";
+type ArtDirection = "none" | "card";
+/**
+ * Shared image primitive.
+ *
+ * Wraps a native `<img>` (or `<picture>` when art direction is enabled) with
+ * CDN-aware srcset/sizes generation, slot-aware presets, intrinsic aspect
+ * ratio for CLS prevention, a skeleton placeholder, and an error fallback.
+ *
+ * Consumes the canonical helpers in `core/images/url` and `core/images/srcset`
+ * — call sites do not assemble URLs themselves.
+ *
+ * @element coras-image
+ * @csspart image       - The underlying `<img>` element.
+ * @csspart picture     - The `<picture>` wrapper when art-direction is on.
+ * @csspart placeholder - The placeholder shown until the image loads.
+ * @csspart error       - The fallback shown when loading fails.
+ */
+export declare class CorasImage extends LitElement {
+    static styles: CSSResultGroup;
+    /** Source URL. Treated as an imgix base when `preset` or `widths` is set. */
+    src: string;
+    /** Explicit srcset; bypasses auto-generation when set. */
+    srcset: string;
+    /** Explicit sizes; bypasses preset-derived sizes when set. */
+    sizes: string;
+    width: number;
+    height: number;
+    alt: string;
+    loading: Loading;
+    decoding: Decoding;
+    fit: Fit;
+    placeholder: Placeholder;
+    /** Background color for `placeholder="color"`. Accepts any CSS color. */
+    color: string;
+    crop: ImgixCrop;
+    /** Focal point, normalised 0..1. Only used when `crop="focalpoint"`. */
+    focalX: number | null;
+    focalY: number | null;
+    quality: number;
+    /** Layout preset; drives default `sizes` and srcset width caps. */
+    preset: ImagePreset | "";
+    /** Comma-separated width override; ignored when empty. */
+    widths: string;
+    /**
+     * Art direction mode. `card` renders a `<picture>` with a mobile
+     * `<source media="(max-width: 767px)">` derived from `mobile-width` /
+     * `mobile-height` and the same `src`.
+     */
+    artDirection: ArtDirection;
+    mobileWidth: number;
+    mobileHeight: number;
+    /**
+     * Optional mobile source URL. When the backend ships a separate aspect
+     * (e.g. a 3:2 alongside a square), pass it here and the `<picture>` mobile
+     * `<source>` will use it instead of re-cropping `src` with imgix `ar=`.
+     */
+    mobileSrc: string;
+    private _loaded;
+    private _errored;
+    willUpdate(changed: Map<string, unknown>): void;
+    private get aspectRatio();
+    private get mobileAspectRatio();
+    private get widthList();
+    private buildSrc;
+    private resolveSrcset;
+    private resolveSizes;
+    private shouldGenerateSrcset;
+    private handleLoad;
+    private handleError;
+    private renderPlaceholder;
+    private renderError;
+    private renderImg;
+    private renderPicture;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+export {};