@sbb-esta/lyne-elements 2.6.0 → 2.7.1

package/image.js

@@ -1,469 +1,4 @@
-var _e = (r) => {
-  throw TypeError(r);
-};
-var ke = (r, o, l) => o.has(r) || _e("Cannot " + l);
-var h = (r, o, l) => (ke(r, o, "read from private field"), l ? l.call(r) : o.get(r)), u = (r, o, l) => o.has(r) ? _e("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(r) : o.set(r, l), s = (r, o, l, d) => (ke(r, o, "write to private field"), d ? d.call(r, l) : o.set(r, l), l);
-import { __esDecorate as p, __runInitializers as a } from "tslib";
-import { S as Se, a as ye, b as ze, c as ve, d as xe, e as Me, f as $e, g as we, h as Le, i as Ie, j as Ce, k as Fe, l as De, m as Be, n as Ee } from "./sbb-tokens-BgDF8jIh.js";
-import { css as Qe, LitElement as qe, nothing as F, html as Q } from "lit";
-import { customElement as Oe, property as g, eventOptions as Te } from "lit/decorators.js";
-import { forceType as b } from "./core/decorators.js";
-const Xe = Qe`*,:before,:after{box-sizing:border-box}:host{--sbb-image-aspect-ratio: 16 / 9;--sbb-image-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-image-object-fit: cover;display:block;border-radius:var(--sbb-border-radius-4x);overflow:hidden}.sbb-image__img{opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host(:not([skip-lqip])) .sbb-image__img{position:absolute;top:0;right:0;bottom:0;left:0}:host([data-loaded]) .sbb-image__blurred{opacity:0}picture{display:contents}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:var(--sbb-image-object-fit);object-position:var(--sbb-image-object-position);transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{display:flex;position:relative;width:100%;height:100%;aspect-ratio:var(--sbb-image-aspect-ratio)}`, Ye = (r) => {
-  if (!r || r.length === 0)
-    return [];
-  let o;
-  try {
-    o = JSON.parse(r);
-  } catch {
-    return [];
-  }
-  if (!o.breakpoints || o.breakpoints.length === 0)
-    return [];
-  if (!Array.isArray(o.breakpoints))
-    return [];
-  let l = !1, d = !1;
-  const D = ["image", "mediaQueries"];
-  return o.breakpoints.forEach((E) => {
-    const B = Object.keys(E);
-    B.forEach((_) => {
-      D.includes(_) || (l = !0);
-    }), D.forEach((_) => {
-      B.includes(_) || (d = !0);
-    });
-  }), l || d ? [] : o.breakpoints;
-}, je = {
-  once: !0,
-  passive: !0
-}, m = (r) => r / Se, Ue = {
-  "sbb-breakpoint-zero-min": m(Ee),
-  "sbb-breakpoint-zero-max": m(Be),
-  "sbb-breakpoint-micro-min": m(De),
-  "sbb-breakpoint-micro-max": m(Fe),
-  "sbb-breakpoint-small-min": m(Ce),
-  "sbb-breakpoint-small-max": m(Ie),
-  "sbb-breakpoint-medium-min": m(Le),
-  "sbb-breakpoint-medium-max": m(we),
-  "sbb-breakpoint-large-min": m($e),
-  "sbb-breakpoint-large-max": m(Me),
-  "sbb-breakpoint-wide-min": m(xe),
-  "sbb-breakpoint-wide-max": m(ve),
-  "sbb-breakpoint-ultra-min": m(ze),
-  "sbb-breakpoint-ultra-max": m(ye)
-};
-let Ze = (() => {
-  var k, P, S, y, z, v, x, M, $, w, L, I, n;
-  let r = [Oe("sbb-image")], o, l = [], d, D = qe, E = [], B, _ = [], q = [], O, T = [], X = [], Y, j = [], U = [], A, V = [], R = [], K, W = [], N = [], H, Z = [], G = [], J, ee = [], te = [], ie, ae = [], se = [], re, oe = [], ne = [], ce, le = [], pe = [], me, de = [], he = [], ue, ge = [], be = [], fe;
-  return n = class extends D {
-    constructor() {
-      super(...arguments);
-      u(this, k);
-      u(this, P);
-      u(this, S);
-      u(this, y);
-      u(this, z);
-      u(this, v);
-      u(this, x);
-      u(this, M);
-      u(this, $);
-      u(this, w);
-      u(this, L);
-      u(this, I);
-      this._captionElement = a(this, E), this._config = {
-        nonRetinaQuality: "45",
-        retinaQuality: "20"
-      }, s(this, k, a(this, _, "")), s(this, P, (a(this, q), a(this, T, !1))), s(this, S, (a(this, X), a(this, j, !1))), s(this, y, (a(this, U), a(this, V, "auto"))), s(this, z, (a(this, R), a(this, W, !1))), s(this, v, (a(this, N), a(this, Z, 1))), s(this, x, (a(this, G), a(this, ee, 1))), s(this, M, (a(this, te), a(this, ae, ""))), s(this, $, (a(this, se), a(this, oe, "high"))), s(this, w, (a(this, ne), a(this, le, "eager"))), s(this, L, (a(this, pe), a(this, de, ""))), s(this, I, (a(this, he), a(this, ge, ""))), a(this, be);
-    }
-    /**
-     * An alt text is not always necessary (e.g. in teaser cards when
-     * additional link text is provided). In this case we can leave
-     * the value of the alt attribute blank, but the attribute itself
-     * still needs to be present. That way we can signal assistive
-     * technology, that they can skip the image.
-     */
-    get alt() {
-      return h(this, k);
-    }
-    set alt(t) {
-      s(this, k, t);
-    }
-    /**
-     * If set to false, we show a blurred version of the image as
-     * placeholder before the actual image shows up. This will help
-     * to improve the perceived loading performance. Read more about
-     * the idea of lqip here:
-     * https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62
-     */
-    get skipLqip() {
-      return h(this, P);
-    }
-    set skipLqip(t) {
-      s(this, P, t);
-    }
-    /**
-     * Set this to true, if you want to pass a custom focal point
-     * for the image. See full documentation here:
-     * https://docs.imgix.com/apis/rendering/focalpoint-crop
-     */
-    get customFocalPoint() {
-      return h(this, S);
-    }
-    set customFocalPoint(t) {
-      s(this, S, t);
-    }
-    /**
-     * If the lazy property is set to true, the module will automatically
-     * change the decoding to async, otherwise the decoding is set to auto
-     * which leaves the handling up to the browser. Read more about the
-     * decoding attribute here:
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
-     */
-    get decoding() {
-      return h(this, y);
-    }
-    set decoding(t) {
-      s(this, y, t);
-    }
-    /**
-     * Set this to true, to receive visual guidance where the custom focal
-     * point is currently set.
-     */
-    get focalPointDebug() {
-      return h(this, z);
-    }
-    set focalPointDebug(t) {
-      s(this, z, t);
-    }
-    /**
-     * Pass in a floating number between 0 (left) and 1 (right).
-     */
-    get focalPointX() {
-      return h(this, v);
-    }
-    set focalPointX(t) {
-      s(this, v, t);
-    }
-    /**
-     * Pass in a floating number between 0 (top) and 1 (bottom).
-     */
-    get focalPointY() {
-      return h(this, x);
-    }
-    set focalPointY(t) {
-      s(this, x, t);
-    }
-    /**
-     * Right now the module is heavily coupled with the image delivery
-     * service imgix and depends on the original files being stored
-     * inside AEM. You can pass in any https://cdn.img.sbb.ch img
-     * src address you find on sbb.ch to play around with it. Just
-     * strip the url parameters and paste in the plain file address.
-     * If you want to know how to best work with this module with
-     * images coming from a different source, please contact the
-     * LYNE Core Team.
-     */
-    get imageSrc() {
-      return h(this, M);
-    }
-    set imageSrc(t) {
-      s(this, M, t);
-    }
-    /**
-     * The importance attribute is fairly new attribute which should
-     * help the browser decide which resources it should prioritise
-     * during page load. We will set the attribute value based on the
-     * value, we receive in the loading attribute. 'eager', which we use
-     * for the largest image within the initial viewport, will set the
-     * attribute value to 'high'. 'lazy', which we use for images below
-     * the fold, will set the attribute value to 'low'.
-     */
-    get importance() {
-      return h(this, $);
-    }
-    set importance(t) {
-      s(this, $, t);
-    }
-    /**
-     * With the support of native image lazy loading, we can now
-     * decide whether we want to load the image immediately or only
-     * once it is close to the visible viewport. The value eager is
-     * best used for images within the initial viewport. We want to
-     * load these images as fast as possible to improve the Core Web
-     * Vitals values. lazy on the other hand works best for images
-     * which are further down the page or invisible during the loading
-     * of the initial viewport.
-     */
-    get loading() {
-      return h(this, w);
-    }
-    set loading(t) {
-      s(this, w, t);
-    }
-    /**
-     * With performance.mark you can log a timestamp associated with
-     * the name you define in performanceMark when a certain event is
-     * happening. In our case we will log the performance.mark into
-     * the PerformanceEntry API once the image is fully loaded.
-     * Performance monitoring tools like SpeedCurve or Lighthouse are
-     * then able to grab these entries from the PerformanceEntry API
-     * and give us additional information and insights about our page
-     * loading behaviour. We are then also able to monitor these
-     * values over a long period to see if our performance
-     * increases or decreases over time. Best to use lowercase strings
-     * here, separate words with underscores or dashes.
-     */
-    get performanceMark() {
-      return h(this, L);
-    }
-    set performanceMark(t) {
-      s(this, L, t);
-    }
-    /**
-     * With the pictureSizesConfig object, you can pass in information
-     * into image about what kind of source elements should get
-     * rendered. mediaQueries accepts multiple Media Query entries
-     * which can get combined by defining a conditionOperator.
-     * Type is: stringified InterfaceImageAttributesSizesConfig-Object
-     * An example could look like this:
-     * {
-     *    "breakpoints": [
-     *      {
-     *        "image": {
-     *          "height": "675",
-     *          "width": "1200"
-     *        },
-     *        "mediaQueries": [
-     *          {
-     *            "conditionFeature": "min-width",
-     *            "conditionFeatureValue": {
-     *              "lyneDesignToken": true,
-     *              "value": "sbb-breakpoint-large-min"
-     *            },
-     *            "conditionOperator": false
-     *          }
-     *        ]
-     *      },
-     *      {
-     *        "image": {
-     *          "height": "549",
-     *          "width": "976"
-     *        },
-     *        "mediaQueries": [
-     *          {
-     *            "conditionFeature": "min-width",
-     *            "conditionFeatureValue": {
-     *              "lyneDesignToken": true,
-     *              "value": "sbb-breakpoint-small-min"
-     *            },
-     *            "conditionOperator": false
-     *          }
-     *        ]
-     *      },
-     *      {
-     *        "image": {
-     *          "height": "180",
-     *          "width": "320"
-     *        },
-     *        "mediaQueries": [
-     *          {
-     *            "conditionFeature": "max-width",
-     *            "conditionFeatureValue": {
-     *              "lyneDesignToken": true,
-     *              "value": "sbb-breakpoint-micro-max"
-     *            },
-     *            "conditionOperator": "and"
-     *          },
-     *          {
-     *            "conditionFeature": "orientation",
-     *            "conditionFeatureValue": {
-     *              "lyneDesignToken": false,
-     *              "value": "landscape"
-     *            },
-     *            "conditionOperator": false
-     *          }
-     *        ]
-     *      }
-     *    ]
-     *  }
-     */
-    get pictureSizesConfig() {
-      return h(this, I);
-    }
-    set pictureSizesConfig(t) {
-      s(this, I, t);
-    }
-    /** Whether the image is finished loading or failed to load. */
-    get complete() {
-      var t, e, i;
-      return ((i = (e = (t = this.shadowRoot) == null ? void 0 : t.querySelector) == null ? void 0 : e.call(t, ".sbb-image__img")) == null ? void 0 : i.complete) ?? !1;
-    }
-    updated(t) {
-      super.updated(t), this._captionElement && (this._linksInCaption = this._captionElement.querySelectorAll("a"), this._linksInCaption && this._addFocusAbilityToLinksInCaption());
-    }
-    async firstUpdated(t) {
-      super.firstUpdated(t), await this.updateComplete, this.complete && this.toggleAttribute("data-loaded", !0);
-    }
-    _logPerformanceMarks() {
-      this.performanceMark && (performance.clearMarks(this.performanceMark), performance.mark(this.performanceMark));
-    }
-    _matchMediaQueryDesignToken(t) {
-      const e = Ue[t];
-      return e ? `${e}rem` : "";
-    }
-    _addFocusAbilityToLinksInCaption() {
-      var t;
-      (t = this._linksInCaption) == null || t.forEach((e) => {
-        e.removeAttribute("tabindex");
-      });
-    }
-    _prepareImageUrl(t, e = !1) {
-      if (!t || t === "")
-        return "";
-      const i = !!t.match(/^\w+:\/\//), c = i ? new URL(t) : new URL(`http://noop/${t}`);
-      return e ? (c.searchParams.append("blur", "100"), c.searchParams.append("w", "100"), c.searchParams.append("h", "56")) : c.searchParams.append("auto", "format,compress,cs=tinysrgb"), this.customFocalPoint && (c.searchParams.append("fit", "crop"), c.searchParams.append("crop", "focalpoint"), c.searchParams.append("fp-x", this.focalPointX.toString(10)), c.searchParams.append("fp-y", this.focalPointY.toString(10)), c.searchParams.append("fp-z", "1")), this.focalPointDebug && c.searchParams.append("fp-debug", "true"), i ? c.href : c.pathname.substring(1) + c.search;
-    }
-    _preparePictureSizeConfigs() {
-      let t;
-      return this.pictureSizesConfig ? t = this.pictureSizesConfig : t = `{
-        "breakpoints": [
-          {
-            "image": {
-              "height": 675,
-              "width": 1200
-            },
-            "mediaQueries": [
-              {
-                "conditionFeature": "min-width",
-                "conditionFeatureValue": {
-                  "lyneDesignToken": true,
-                  "value": "sbb-breakpoint-large-min"
-                },
-                "conditionOperator": false
-              }
-            ]
-          },
-          {
-            "image": {
-              "height": 549,
-              "width": 976
-            },
-            "mediaQueries": [
-              {
-                "conditionFeature": "min-width",
-                "conditionFeatureValue": {
-                  "lyneDesignToken": true,
-                  "value": "sbb-breakpoint-micro-min"
-                },
-                "conditionOperator": false
-              }
-            ]
-          },
-          {
-            "image": {
-              "height": 180,
-              "width": 320
-            },
-            "mediaQueries": [
-              {
-                "conditionFeature": "max-width",
-                "conditionFeatureValue": {
-                  "lyneDesignToken": true,
-                  "value": "sbb-breakpoint-zero-max"
-                },
-                "conditionOperator": false
-              }
-            ]
-          }
-        ]
-      }`, Ye(t);
-    }
-    _createMediaQueryString(t) {
-      let e = "";
-      return t.forEach((i) => {
-        const c = i.conditionFeature;
-        let C;
-        i.conditionFeatureValue.lyneDesignToken ? C = this._matchMediaQueryDesignToken(i.conditionFeatureValue.value) : C = i.conditionFeatureValue.value;
-        const f = i.conditionOperator ? ` ${i.conditionOperator} ` : "";
-        e += `(${c}: ${C})${f}`;
-      }), e;
-    }
-    _imageLoaded() {
-      this._logPerformanceMarks(), this.toggleAttribute("data-loaded", !0), this.dispatchEvent(new Event("load"));
-    }
-    render() {
-      const t = this._prepareImageUrl(this.imageSrc, !0), e = this._prepareImageUrl(this.imageSrc, !1);
-      this.loading === "lazy" && (this.decoding = "async", this.importance = "low");
-      const i = this._preparePictureSizeConfigs();
-      return Q`
-      <div class="sbb-image__wrapper">
-        ${this.skipLqip ? F : Q`<img
-              alt=""
-              class="sbb-image__blurred"
-              src=${t}
-              width="1000"
-              height="562"
-              loading=${this.loading ?? F}
-              decoding=${this.decoding ?? F}
-            />`}
-
-        <picture>
-          <!-- render picture element sources -->
-          ${i.map((c) => {
-        const C = c.image.height, f = c.image.width, Pe = this._createMediaQueryString(c.mediaQueries);
-        return Q`
-              <source
-                media=${`${Pe}`}
-                sizes=${`${f}px`}
-                srcset=${`${e}&w=${f}&h=${C}&q=${this._config.nonRetinaQuality} ${f}w, ${e}&w=${f * 2}&h=${C * 2}&q=${this._config.retinaQuality} ${f * 2}w`}
-              ></source>`;
-      })}
-          <img
-            alt=${this.alt || ""}
-            @load=${this._imageLoaded}
-            @error=${() => this.dispatchEvent(new Event("error"))}
-            class="sbb-image__img"
-            src=${this.imageSrc}
-            width="1000"
-            height="562"
-            loading=${this.loading ?? F}
-            decoding=${this.decoding ?? F}
-            .fetchPriority=${this.importance ?? F}
-          />
-        </picture>
-      </div>
-    `;
-    }
-  }, k = new WeakMap(), P = new WeakMap(), S = new WeakMap(), y = new WeakMap(), z = new WeakMap(), v = new WeakMap(), x = new WeakMap(), M = new WeakMap(), $ = new WeakMap(), w = new WeakMap(), L = new WeakMap(), I = new WeakMap(), d = n, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(D[Symbol.metadata] ?? null) : void 0;
-    B = [b(), g()], O = [b(), g({ attribute: "skip-lqip", type: Boolean, reflect: !0 })], Y = [b(), g({ attribute: "custom-focal-point", type: Boolean })], A = [g()], K = [b(), g({ attribute: "focal-point-debug", type: Boolean })], H = [b(), g({ attribute: "focal-point-x", type: Number })], J = [b(), g({ attribute: "focal-point-y", type: Number })], ie = [b(), g({ attribute: "image-src" })], re = [g()], ce = [g()], me = [b(), g({ attribute: "performance-mark" })], ue = [b(), g({ attribute: "picture-sizes-config" })], fe = [Te(je)], p(n, null, B, { kind: "accessor", name: "alt", static: !1, private: !1, access: { has: (e) => "alt" in e, get: (e) => e.alt, set: (e, i) => {
-      e.alt = i;
-    } }, metadata: t }, _, q), p(n, null, O, { kind: "accessor", name: "skipLqip", static: !1, private: !1, access: { has: (e) => "skipLqip" in e, get: (e) => e.skipLqip, set: (e, i) => {
-      e.skipLqip = i;
-    } }, metadata: t }, T, X), p(n, null, Y, { kind: "accessor", name: "customFocalPoint", static: !1, private: !1, access: { has: (e) => "customFocalPoint" in e, get: (e) => e.customFocalPoint, set: (e, i) => {
-      e.customFocalPoint = i;
-    } }, metadata: t }, j, U), p(n, null, A, { kind: "accessor", name: "decoding", static: !1, private: !1, access: { has: (e) => "decoding" in e, get: (e) => e.decoding, set: (e, i) => {
-      e.decoding = i;
-    } }, metadata: t }, V, R), p(n, null, K, { kind: "accessor", name: "focalPointDebug", static: !1, private: !1, access: { has: (e) => "focalPointDebug" in e, get: (e) => e.focalPointDebug, set: (e, i) => {
-      e.focalPointDebug = i;
-    } }, metadata: t }, W, N), p(n, null, H, { kind: "accessor", name: "focalPointX", static: !1, private: !1, access: { has: (e) => "focalPointX" in e, get: (e) => e.focalPointX, set: (e, i) => {
-      e.focalPointX = i;
-    } }, metadata: t }, Z, G), p(n, null, J, { kind: "accessor", name: "focalPointY", static: !1, private: !1, access: { has: (e) => "focalPointY" in e, get: (e) => e.focalPointY, set: (e, i) => {
-      e.focalPointY = i;
-    } }, metadata: t }, ee, te), p(n, null, ie, { kind: "accessor", name: "imageSrc", static: !1, private: !1, access: { has: (e) => "imageSrc" in e, get: (e) => e.imageSrc, set: (e, i) => {
-      e.imageSrc = i;
-    } }, metadata: t }, ae, se), p(n, null, re, { kind: "accessor", name: "importance", static: !1, private: !1, access: { has: (e) => "importance" in e, get: (e) => e.importance, set: (e, i) => {
-      e.importance = i;
-    } }, metadata: t }, oe, ne), p(n, null, ce, { kind: "accessor", name: "loading", static: !1, private: !1, access: { has: (e) => "loading" in e, get: (e) => e.loading, set: (e, i) => {
-      e.loading = i;
-    } }, metadata: t }, le, pe), p(n, null, me, { kind: "accessor", name: "performanceMark", static: !1, private: !1, access: { has: (e) => "performanceMark" in e, get: (e) => e.performanceMark, set: (e, i) => {
-      e.performanceMark = i;
-    } }, metadata: t }, de, he), p(n, null, ue, { kind: "accessor", name: "pictureSizesConfig", static: !1, private: !1, access: { has: (e) => "pictureSizesConfig" in e, get: (e) => e.pictureSizesConfig, set: (e, i) => {
-      e.pictureSizesConfig = i;
-    } }, metadata: t }, ge, be), p(n, null, fe, { kind: "method", name: "_imageLoaded", static: !1, private: !1, access: { has: (e) => "_imageLoaded" in e, get: (e) => e._imageLoaded }, metadata: t }, null, E), p(null, o = { value: d }, r, { kind: "class", name: d.name, metadata: t }, null, l), d = o.value, t && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = Xe, n.events = {
-    error: "error",
-    load: "load"
-  }, a(d, l), d;
-})();
+import { SbbImageElement as b } from "./image/image.js";
 export {
-  Ze as SbbImageElement
+  b as SbbImageElement
 };