@coras-io/embed 0.1.0

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

@@ -0,0 +1,301 @@
+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, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { fireInternalEvent } from "../../core/events.js";
+import { buildSizes, buildSrcset, RESPONSIVE_WIDTHS, } from "../../core/images/srcset.js";
+import { buildImgixUrl } from "../../core/images/url.js";
+import styles from "./image.styles.js";
+/**
+ * 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 class CorasImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Source URL. Treated as an imgix base when `preset` or `widths` is set. */
+        this.src = "";
+        /** Explicit srcset; bypasses auto-generation when set. */
+        this.srcset = "";
+        /** Explicit sizes; bypasses preset-derived sizes when set. */
+        this.sizes = "";
+        this.width = 0;
+        this.height = 0;
+        this.alt = "";
+        this.loading = "lazy";
+        this.decoding = "async";
+        this.fit = "cover";
+        this.placeholder = "skeleton";
+        /** Background color for `placeholder="color"`. Accepts any CSS color. */
+        this.color = "";
+        this.crop = "faces,edges,entropy";
+        /** Focal point, normalised 0..1. Only used when `crop="focalpoint"`. */
+        this.focalX = null;
+        this.focalY = null;
+        this.quality = 85;
+        /** Layout preset; drives default `sizes` and srcset width caps. */
+        this.preset = "";
+        /** Comma-separated width override; ignored when empty. */
+        this.widths = "";
+        /**
+         * 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`.
+         */
+        this.artDirection = "none";
+        this.mobileWidth = 0;
+        this.mobileHeight = 0;
+        /**
+         * 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=`.
+         */
+        this.mobileSrc = "";
+        this._loaded = false;
+        this._errored = false;
+        this.handleLoad = () => {
+            this._loaded = true;
+            fireInternalEvent(this, "coras-image-load", {});
+        };
+        this.handleError = () => {
+            this._errored = true;
+            fireInternalEvent(this, "coras-image-error", {});
+        };
+    }
+    static { this.styles = styles; }
+    willUpdate(changed) {
+        if (changed.has("src") || changed.has("srcset")) {
+            this._loaded = false;
+            this._errored = false;
+        }
+    }
+    get aspectRatio() {
+        if (this.width && this.height)
+            return this.width / this.height;
+        return undefined;
+    }
+    get mobileAspectRatio() {
+        if (this.mobileWidth && this.mobileHeight)
+            return this.mobileWidth / this.mobileHeight;
+        return undefined;
+    }
+    get widthList() {
+        if (!this.widths)
+            return RESPONSIVE_WIDTHS;
+        return this.widths
+            .split(",")
+            .map((w) => Number(w.trim()))
+            .filter((w) => Number.isFinite(w) && w > 0);
+    }
+    buildSrc(targetWidth, aspectRatio) {
+        return buildImgixUrl(this.src, {
+            w: targetWidth,
+            h: aspectRatio ? Math.round(targetWidth / aspectRatio) : undefined,
+            fit: "crop",
+            crop: this.crop,
+            q: this.quality,
+            ...(this.crop === "focalpoint" &&
+                this.focalX != null &&
+                this.focalY != null
+                ? { fpX: this.focalX, fpY: this.focalY }
+                : {}),
+        });
+    }
+    resolveSrcset(aspectRatio) {
+        if (this.srcset)
+            return this.srcset;
+        if (!this.shouldGenerateSrcset())
+            return "";
+        return buildSrcset(this.src, this.widthList, {
+            aspectRatio,
+            fit: "crop",
+            crop: this.crop,
+            q: this.quality,
+            ...(this.crop === "focalpoint" &&
+                this.focalX != null &&
+                this.focalY != null
+                ? { fpX: this.focalX, fpY: this.focalY }
+                : {}),
+        });
+    }
+    resolveSizes() {
+        if (this.sizes)
+            return this.sizes;
+        if (this.preset)
+            return buildSizes(this.preset);
+        return "";
+    }
+    shouldGenerateSrcset() {
+        return Boolean(this.src) && Boolean(this.preset || this.widths);
+    }
+    renderPlaceholder() {
+        if (this.placeholder === "none" || this._loaded || this._errored)
+            return nothing;
+        const style = this.placeholder === "color" && this.color
+            ? `background-color: ${this.color};`
+            : "";
+        return html `<div
+      part="placeholder"
+      class=${classMap({
+            placeholder: true,
+            [`placeholder-${this.placeholder}`]: true,
+        })}
+      style=${style}
+      aria-hidden="true"
+    ></div>`;
+    }
+    renderError() {
+        if (!this._errored)
+            return nothing;
+        return html `<div
+      part="error"
+      class="error"
+      role="img"
+      aria-label=${this.alt}
+    ></div>`;
+    }
+    renderImg(srcset, sizes) {
+        const aspect = this.aspectRatio;
+        const fallbackWidth = this.width || (this.preset ? this.widthList[0] : undefined);
+        const fallbackSrc = fallbackWidth && this.shouldGenerateSrcset()
+            ? this.buildSrc(fallbackWidth, aspect)
+            : this.src;
+        return html `<img
+      part="image"
+      class=${classMap({ image: true, loaded: this._loaded })}
+      src=${fallbackSrc}
+      srcset=${srcset || nothing}
+      sizes=${sizes || nothing}
+      width=${this.width || nothing}
+      height=${this.height || nothing}
+      alt=${this.alt}
+      loading=${this.loading}
+      decoding=${this.decoding}
+      @load=${this.handleLoad}
+      @error=${this.handleError}
+    />`;
+    }
+    renderPicture(srcset, sizes) {
+        const mobileAspect = this.mobileAspectRatio;
+        const mobileBase = this.mobileSrc || this.src;
+        const mobileSrcset = mobileAspect
+            ? buildSrcset(mobileBase, this.widthList, {
+                aspectRatio: mobileAspect,
+                fit: "crop",
+                crop: this.crop,
+                q: this.quality,
+            })
+            : "";
+        return html `<picture part="picture">
+      ${mobileSrcset
+            ? html `<source
+            media="(max-width: 767px)"
+            srcset=${mobileSrcset}
+            sizes=${sizes || nothing}
+          />`
+            : nothing}
+      ${this.renderImg(srcset, sizes)}
+    </picture>`;
+    }
+    render() {
+        if (!this.src)
+            return this.renderPlaceholder();
+        const aspect = this.aspectRatio;
+        const srcset = this.resolveSrcset(aspect);
+        const sizes = this.resolveSizes();
+        const useArtDirection = this.artDirection === "card" && this.mobileAspectRatio !== undefined;
+        return html `
+      ${this.renderPlaceholder()}
+      ${useArtDirection
+            ? this.renderPicture(srcset, sizes)
+            : this.renderImg(srcset, sizes)}
+      ${this.renderError()}
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasImage.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], CorasImage.prototype, "srcset", void 0);
+__decorate([
+    property({ type: String })
+], CorasImage.prototype, "sizes", void 0);
+__decorate([
+    property({ type: Number })
+], CorasImage.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], CorasImage.prototype, "height", void 0);
+__decorate([
+    property({ type: String })
+], CorasImage.prototype, "alt", void 0);
+__decorate([
+    property({ type: String })
+], CorasImage.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], CorasImage.prototype, "decoding", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], CorasImage.prototype, "fit", void 0);
+__decorate([
+    property({ type: String })
+], CorasImage.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], CorasImage.prototype, "color", void 0);
+__decorate([
+    property({ type: String })
+], CorasImage.prototype, "crop", void 0);
+__decorate([
+    property({ type: Number, attribute: "focal-x" })
+], CorasImage.prototype, "focalX", void 0);
+__decorate([
+    property({ type: Number, attribute: "focal-y" })
+], CorasImage.prototype, "focalY", void 0);
+__decorate([
+    property({ type: Number })
+], CorasImage.prototype, "quality", void 0);
+__decorate([
+    property({ type: String })
+], CorasImage.prototype, "preset", void 0);
+__decorate([
+    property({ type: String })
+], CorasImage.prototype, "widths", void 0);
+__decorate([
+    property({ type: String, attribute: "art-direction", reflect: true })
+], CorasImage.prototype, "artDirection", void 0);
+__decorate([
+    property({ type: Number, attribute: "mobile-width" })
+], CorasImage.prototype, "mobileWidth", void 0);
+__decorate([
+    property({ type: Number, attribute: "mobile-height" })
+], CorasImage.prototype, "mobileHeight", void 0);
+__decorate([
+    property({ type: String, attribute: "mobile-src" })
+], CorasImage.prototype, "mobileSrc", void 0);
+__decorate([
+    state()
+], CorasImage.prototype, "_loaded", void 0);
+__decorate([
+    state()
+], CorasImage.prototype, "_errored", void 0);

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

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

package/dist/components/image/image.js

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

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

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

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

@@ -0,0 +1,88 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --coras-image-border-radius: 0;
+    --coras-image-placeholder-bg: var(--coras-color-surface-sunken);
+    --coras-image-placeholder-shimmer: color-mix(
+      in srgb,
+      var(--coras-color-surface-raised),
+      transparent 30%
+    );
+    --coras-image-error-bg: var(--coras-color-surface-sunken);
+    --coras-image-error-color: var(--coras-color-text-muted);
+
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--coras-image-border-radius);
+  }
+
+  picture {
+    display: contents;
+  }
+
+  .image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .image.loaded {
+    opacity: 1;
+  }
+
+  :host([fit="cover"]) .image {
+    object-fit: cover;
+  }
+
+  :host([fit="contain"]) .image {
+    object-fit: contain;
+  }
+
+  .placeholder {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .placeholder-skeleton {
+    background: linear-gradient(
+      90deg,
+      var(--coras-image-placeholder-bg) 0%,
+      var(--coras-image-placeholder-shimmer) 50%,
+      var(--coras-image-placeholder-bg) 100%
+    );
+    background-size: 200% 100%;
+    animation: coras-image-shimmer 1.4s linear infinite;
+  }
+
+  @keyframes coras-image-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  .error {
+    position: absolute;
+    inset: 0;
+    background-color: var(--coras-image-error-bg);
+    color: var(--coras-image-error-color);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .placeholder-skeleton {
+      animation: none;
+    }
+    .image {
+      transition: none;
+    }
+  }
+`;

package/dist/components/image-carousel/image-carousel-item/image-carousel-item.component.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../../image/image.js";
+export declare class CorasImageCarouselItem extends LitElement {
+    static styles: CSSResultGroup;
+    image: string;
+    width: number;
+    height: number;
+    alt: string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/image-carousel/image-carousel-item/image-carousel-item.component.js

@@ -0,0 +1,43 @@
+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 styles from "./image-carousel-item.styles.js";
+export class CorasImageCarouselItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.image = "";
+        this.width = 780;
+        this.height = 520;
+        this.alt = "";
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `<div class="image">
+      <coras-image
+        src=${this.image}
+        alt=${this.alt}
+        width=${this.width}
+        height=${this.height}
+        preset="gallery"
+      ></coras-image>
+    </div>`;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasImageCarouselItem.prototype, "image", void 0);
+__decorate([
+    property({ type: Number })
+], CorasImageCarouselItem.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], CorasImageCarouselItem.prototype, "height", void 0);
+__decorate([
+    property({ type: String })
+], CorasImageCarouselItem.prototype, "alt", void 0);

package/dist/components/image-carousel/image-carousel-item/image-carousel-item.d.ts

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

package/dist/components/image-carousel/image-carousel-item/image-carousel-item.js

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

package/dist/components/image-carousel/image-carousel-item/image-carousel-item.styles.d.ts

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

package/dist/components/image-carousel/image-carousel-item/image-carousel-item.styles.js

@@ -0,0 +1,28 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --img-width: 90vw;
+    --img-max-width: 780px;
+  }
+
+  .image {
+    width: var(--img-width);
+    max-width: var(--img-max-width);
+    max-height: 520px;
+
+    border-radius: 2px;
+
+    coras-image {
+      border-radius: inherit;
+      width: 100%;
+      height: 100%;
+    }
+
+    coras-image::part(image) {
+      border-radius: inherit;
+    }
+  }
+`;

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

@@ -0,0 +1,8 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../carousel/carousel.js";
+export declare class CorasImageCarousel extends LitElement {
+    static styles: CSSResultGroup;
+    showImageNumber: boolean;
+    imageNumberLabel: string;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,36 @@
+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 "../carousel/carousel.js";
+import styles from "./image-carousel.styles.js";
+export class CorasImageCarousel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showImageNumber = false;
+        this.imageNumberLabel = "";
+    }
+    static { this.styles = styles; }
+    render() {
+        return html `<div class="image-carousel">
+      <slot name="tag"></slot>
+      <slot name="chip"></slot>
+      <coras-carousel
+        ?show-image-number=${this.showImageNumber}
+        image-number-label=${this.imageNumberLabel}
+      >
+        <slot></slot>
+      </coras-carousel>
+    </div>`;
+    }
+}
+__decorate([
+    property({ type: Boolean, attribute: "show-image-number" })
+], CorasImageCarousel.prototype, "showImageNumber", void 0);
+__decorate([
+    property({ type: String, attribute: "image-number-label" })
+], CorasImageCarousel.prototype, "imageNumberLabel", void 0);

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

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

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

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

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

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

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

@@ -0,0 +1,72 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --image-carousel-width: 90vw;
+    --image-carousel-max-width: 780px;
+
+    --carousel-button-left-transform: var(
+      --image-carousel-button-left-transform,
+      translate(0, -50%)
+    );
+    --carousel-button-right-transform: var(
+      --image-carousel-button-right-transform,
+      translate(0, -50%)
+    );
+    --carousel-button-left-left: var(
+      --image-carousel-button-left-left,
+      0.75rem
+    );
+    --carousel-button-right-right: var(
+      --image-carousel-button-right-right,
+      0.75rem
+    );
+  }
+
+  .image-carousel {
+    position: relative;
+    width: var(--image-carousel-width);
+    max-width: var(--image-carousel-max-width);
+
+    > ::slotted([slot="tag"]) {
+      position: absolute;
+      top: 0.5rem;
+      left: 0.5rem;
+      z-index: 2;
+    }
+
+    > ::slotted([slot="chip"]) {
+      position: absolute;
+      right: 0.5rem;
+      bottom: 0.5rem;
+      z-index: 1;
+    }
+
+    coras-carousel {
+      &::part(base) {
+        margin: 0;
+      }
+
+      &::part(carousel) {
+        gap: 0;
+      }
+
+      &::part(btn-left) {
+        transform: var(--carousel-button-left-transform);
+        left: var(--carousel-button-left-left);
+      }
+
+      &::part(btn-right) {
+        transform: var(--carousel-button-right-transform);
+        right: var(--carousel-button-right-right);
+      }
+
+      ::slotted(coras-image-carousel-item) {
+        --img-width: var(--image-carousel-width);
+        --img-max-width: var(--image-carousel-max-width);
+      }
+    }
+  }
+`;

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

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