@sbb-esta/lyne-elements 1.16.0 → 2.0.1

package/image.js

@@ -1,86 +1,77 @@
-var qt = (r) => {
+var _e = (r) => {
   throw TypeError(r);
 };
-var Tt = (r, n, m) => n.has(r) || qt("Cannot " + m);
-var p = (r, n, m) => (Tt(r, n, "read from private field"), m ? m.call(r) : n.get(r)), h = (r, n, m) => n.has(r) ? qt("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, m), s = (r, n, m, b) => (Tt(r, n, "write to private field"), b ? b.call(r, m) : n.set(r, m), m);
-import { __esDecorate as c, __runInitializers as a } from "tslib";
-import { S as At, a as Ut, b as Vt, c as Kt, d as Wt, e as Nt, f as Zt, g as Gt, h as Jt, i as te, j as ee, k as ie, l as ae, m as se, n as re } from "./sbb-tokens-Dx20OtVg.js";
-import { css as oe, html as T, nothing as _, LitElement as ne } from "lit";
-import { customElement as ce, property as d, eventOptions as le } from "lit/decorators.js";
-import { ref as pe } from "lit/directives/ref.js";
-import { forceType as u } from "./core/decorators.js";
-import { hostContext as he } from "./core/dom.js";
-const de = oe`*,:before,:after{box-sizing:border-box}:host{--sbb-image-border-radius: var(--sbb-border-radius-4x);--sbb-image-aspect-ratio: auto;--sbb-image-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-image-object-fit: cover;display:block}:host([aspect-ratio="1-1"]){--sbb-image-aspect-ratio: 1 / 1}:host([aspect-ratio="1-2"]){--sbb-image-aspect-ratio: 1 / 2}:host([aspect-ratio="2-1"]){--sbb-image-aspect-ratio: 2 / 1}:host([aspect-ratio="2-3"]){--sbb-image-aspect-ratio: 2 / 3}:host([aspect-ratio="3-2"]){--sbb-image-aspect-ratio: 3 / 2}:host([aspect-ratio="3-4"]){--sbb-image-aspect-ratio: 3 / 4}:host([aspect-ratio="4-3"]){--sbb-image-aspect-ratio: 4 / 3}:host([aspect-ratio="4-5"]){--sbb-image-aspect-ratio: 4 / 5}:host([aspect-ratio="5-4"]){--sbb-image-aspect-ratio: 5 / 4}:host([aspect-ratio="16-9"]){--sbb-image-aspect-ratio: 16 / 9}:host([aspect-ratio="9-16"]){--sbb-image-aspect-ratio: 9 / 16}:host([data-teaser]){--sbb-image-aspect-ratio: 1 / 1}@media (min-width: 37.5rem){:host([data-teaser]){--sbb-image-aspect-ratio: 16 / 9}}:host(:is([border-radius=none],[data-teaser])){--sbb-image-border-radius: 0}:host([border-radius=round]:not([data-teaser])){--sbb-image-border-radius: var(--sbb-border-radius-infinity)}.sbb-image__figure{display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-4x);margin:0;height:100%}.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;overflow:hidden;width:100%;height:100%;aspect-ratio:var(--sbb-image-aspect-ratio);border-radius:var(--sbb-image-border-radius)}.sbb-image__caption{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}`;
-var jt = Object.freeze, me = Object.defineProperty, ge = (r, n) => jt(me(r, "raw", { value: jt(r.slice()) })), Xt;
-const be = (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-Dx20OtVg.js";
+import { css as Qe, html as Q, nothing as F, LitElement as qe } 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 n;
+  let o;
   try {
-    n = JSON.parse(r);
+    o = JSON.parse(r);
   } catch {
     return [];
   }
-  if (!n.breakpoints || n.breakpoints.length === 0)
+  if (!o.breakpoints || o.breakpoints.length === 0)
     return [];
-  if (!Array.isArray(n.breakpoints))
+  if (!Array.isArray(o.breakpoints))
     return [];
-  let m = !1, b = !1;
-  const Q = ["image", "mediaQueries"];
-  return n.breakpoints.forEach((j) => {
-    const H = Object.keys(j);
-    H.forEach((k) => {
-      Q.includes(k) || (m = !0);
-    }), Q.forEach((k) => {
-      H.includes(k) || (b = !0);
+  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);
     });
-  }), m || b ? [] : n.breakpoints;
-}, ue = {
+  }), l || d ? [] : o.breakpoints;
+}, je = {
   once: !0,
   passive: !0
-}, g = (r) => r / At, _e = {
-  "sbb-breakpoint-zero-min": g(Ut),
-  "sbb-breakpoint-zero-max": g(Vt),
-  "sbb-breakpoint-micro-min": g(Kt),
-  "sbb-breakpoint-micro-max": g(Wt),
-  "sbb-breakpoint-small-min": g(Nt),
-  "sbb-breakpoint-small-max": g(Zt),
-  "sbb-breakpoint-medium-min": g(Gt),
-  "sbb-breakpoint-medium-max": g(Jt),
-  "sbb-breakpoint-large-min": g(te),
-  "sbb-breakpoint-large-max": g(ee),
-  "sbb-breakpoint-wide-min": g(ie),
-  "sbb-breakpoint-wide-max": g(ae),
-  "sbb-breakpoint-ultra-min": g(se),
-  "sbb-breakpoint-ultra-max": g(re)
+}, m = (r) => r / Se, Ue = {
+  "sbb-breakpoint-zero-min": m(ye),
+  "sbb-breakpoint-zero-max": m(ze),
+  "sbb-breakpoint-micro-min": m(ve),
+  "sbb-breakpoint-micro-max": m(xe),
+  "sbb-breakpoint-small-min": m(Me),
+  "sbb-breakpoint-small-max": m($e),
+  "sbb-breakpoint-medium-min": m(we),
+  "sbb-breakpoint-medium-max": m(Le),
+  "sbb-breakpoint-large-min": m(Ie),
+  "sbb-breakpoint-large-max": m(Ce),
+  "sbb-breakpoint-wide-min": m(Fe),
+  "sbb-breakpoint-wide-max": m(De),
+  "sbb-breakpoint-ultra-min": m(Be),
+  "sbb-breakpoint-ultra-max": m(Ee)
 };
-let Me = (() => {
-  var y, z, P, v, S, x, $, M, w, I, L, C, R, D, F, B, E, o;
-  let r = [ce("sbb-image")], n, m = [], b, Q = ne, j = [], H, k = [], X = [], Y, A = [], U = [], V, K = [], W = [], N, Z = [], G = [], J, tt = [], et = [], it, at = [], st = [], rt, ot = [], nt = [], ct, lt = [], pt = [], ht, dt = [], mt = [], gt, bt = [], ut = [], _t, ft = [], kt = [], yt, zt = [], Pt = [], vt, St = [], xt = [], $t, Mt = [], wt = [], It, Lt = [], Ct = [], Rt, Dt = [], Ft = [], Bt, Et = [], Qt = [], Ht;
-  return o = class extends Q {
+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);
-      h(this, y);
-      h(this, z);
-      h(this, P);
-      h(this, v);
-      h(this, S);
-      h(this, x);
-      h(this, $);
-      h(this, M);
-      h(this, w);
-      h(this, I);
-      h(this, L);
-      h(this, C);
-      h(this, R);
-      h(this, D);
-      h(this, F);
-      h(this, B);
-      h(this, E);
-      this._captionElement = a(this, j), this._config = {
+      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, y, a(this, k, "")), s(this, z, (a(this, X), a(this, A, !1))), s(this, P, (a(this, U), a(this, K, ""))), s(this, v, (a(this, W), a(this, Z, ""))), s(this, S, (a(this, G), a(this, tt, "Organization"))), s(this, x, (a(this, et), a(this, at, !1))), s(this, $, (a(this, st), a(this, ot, "auto"))), s(this, M, (a(this, nt), a(this, lt, !1))), s(this, w, (a(this, pt), a(this, dt, 1))), s(this, I, (a(this, mt), a(this, bt, 1))), s(this, L, (a(this, ut), a(this, ft, ""))), s(this, C, (a(this, kt), a(this, zt, "high"))), s(this, R, (a(this, Pt), a(this, St, "eager"))), s(this, D, (a(this, xt), a(this, Mt, ""))), s(this, F, (a(this, wt), a(this, Lt, ""))), s(this, B, (a(this, Ct), a(this, Dt, "default"))), s(this, E, (a(this, Ft), a(this, Et, "16-9"))), a(this, Qt);
+      }, 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
@@ -90,10 +81,10 @@ let Me = (() => {
      * technology, that they can skip the image.
      */
     get alt() {
-      return p(this, y);
+      return h(this, k);
     }
-    set alt(e) {
-      s(this, y, e);
+    set alt(t) {
+      s(this, k, t);
     }
     /**
      * If set to false, we show a blurred version of the image as
@@ -103,42 +94,10 @@ let Me = (() => {
      * https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62
      */
     get skipLqip() {
-      return p(this, z);
+      return h(this, P);
     }
-    set skipLqip(e) {
-      s(this, z, e);
-    }
-    /**
-     * A caption can provide additional context to the image (e.g.
-     * descriptions and the like).
-     * Links will automatically receive tabindex=-1 if hideFromScreenreader
-     * is set to true. That way they will no longer become focusable.
-     */
-    get caption() {
-      return p(this, P);
-    }
-    set caption(e) {
-      s(this, P, e);
-    }
-    /**
-     * If a copyright text is provided, we will add it to the caption
-     * and create a structured data json-ld block with the copyright
-     * information.
-     */
-    get copyright() {
-      return p(this, v);
-    }
-    set copyright(e) {
-      s(this, v, e);
-    }
-    /**
-     * Copyright holder can either be an Organization or a Person
-     */
-    get copyrightHolder() {
-      return p(this, S);
-    }
-    set copyrightHolder(e) {
-      s(this, S, e);
+    set skipLqip(t) {
+      s(this, P, t);
     }
     /**
      * Set this to true, if you want to pass a custom focal point
@@ -146,10 +105,10 @@ let Me = (() => {
      * https://docs.imgix.com/apis/rendering/focalpoint-crop
      */
     get customFocalPoint() {
-      return p(this, x);
+      return h(this, S);
     }
-    set customFocalPoint(e) {
-      s(this, x, e);
+    set customFocalPoint(t) {
+      s(this, S, t);
     }
     /**
      * If the lazy property is set to true, the module will automatically
@@ -159,38 +118,38 @@ let Me = (() => {
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
      */
     get decoding() {
-      return p(this, $);
+      return h(this, y);
     }
-    set decoding(e) {
-      s(this, $, e);
+    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 p(this, M);
+      return h(this, z);
     }
-    set focalPointDebug(e) {
-      s(this, M, e);
+    set focalPointDebug(t) {
+      s(this, z, t);
     }
     /**
      * Pass in a floating number between 0 (left) and 1 (right).
      */
     get focalPointX() {
-      return p(this, w);
+      return h(this, v);
     }
-    set focalPointX(e) {
-      s(this, w, e);
+    set focalPointX(t) {
+      s(this, v, t);
     }
     /**
      * Pass in a floating number between 0 (top) and 1 (bottom).
      */
     get focalPointY() {
-      return p(this, I);
+      return h(this, x);
     }
-    set focalPointY(e) {
-      s(this, I, e);
+    set focalPointY(t) {
+      s(this, x, t);
     }
     /**
      * Right now the module is heavily coupled with the image delivery
@@ -203,10 +162,10 @@ let Me = (() => {
      * LYNE Core Team.
      */
     get imageSrc() {
-      return p(this, L);
+      return h(this, M);
     }
-    set imageSrc(e) {
-      s(this, L, e);
+    set imageSrc(t) {
+      s(this, M, t);
     }
     /**
      * The importance attribute is fairly new attribute which should
@@ -218,10 +177,10 @@ let Me = (() => {
      * the fold, will set the attribute value to 'low'.
      */
     get importance() {
-      return p(this, C);
+      return h(this, $);
     }
-    set importance(e) {
-      s(this, C, e);
+    set importance(t) {
+      s(this, $, t);
     }
     /**
      * With the support of native image lazy loading, we can now
@@ -234,10 +193,10 @@ let Me = (() => {
      * of the initial viewport.
      */
     get loading() {
-      return p(this, R);
+      return h(this, w);
     }
-    set loading(e) {
-      s(this, R, e);
+    set loading(t) {
+      s(this, w, t);
     }
     /**
      * With performance.mark you can log a timestamp associated with
@@ -253,10 +212,10 @@ let Me = (() => {
      * here, separate words with underscores or dashes.
      */
     get performanceMark() {
-      return p(this, D);
+      return h(this, L);
     }
-    set performanceMark(e) {
-      s(this, D, e);
+    set performanceMark(t) {
+      s(this, L, t);
     }
     /**
      * With the pictureSizesConfig object, you can pass in information
@@ -327,67 +286,44 @@ let Me = (() => {
      *  }
      */
     get pictureSizesConfig() {
-      return p(this, F);
+      return h(this, I);
     }
-    set pictureSizesConfig(e) {
-      s(this, F, e);
-    }
-    /**
-     * Border radius of the image. Choose between a default radius, no radius and a completely round image.
-     */
-    get borderRadius() {
-      return p(this, B);
-    }
-    set borderRadius(e) {
-      s(this, B, e);
-    }
-    /**
-     * Set an aspect ratio
-     * default is '16-9' (16/9)
-     * other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16'
-     */
-    get aspectRatio() {
-      return p(this, E);
-    }
-    set aspectRatio(e) {
-      s(this, E, e);
+    set pictureSizesConfig(t) {
+      s(this, I, t);
     }
     /** Whether the image is finished loading or failed to load. */
     get complete() {
-      var e, t, i;
-      return ((i = (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector) == null ? void 0 : t.call(e, ".sbb-image__img")) == null ? void 0 : i.complete) ?? !1;
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.toggleAttribute("data-teaser", !!he("sbb-teaser-hero", this) || !!this.closest("sbb-teaser-paid"));
+      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(e) {
-      super.updated(e), this._captionElement && (this._linksInCaption = this._captionElement.querySelectorAll("a"), this._linksInCaption && this._addFocusAbilityToLinksInCaption());
+    updated(t) {
+      super.updated(t), this._captionElement && (this._linksInCaption = this._captionElement.querySelectorAll("a"), this._linksInCaption && this._addFocusAbilityToLinksInCaption());
     }
-    async firstUpdated(e) {
-      super.firstUpdated(e), await this.updateComplete, this.complete && this.toggleAttribute("data-loaded", !0);
+    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(e) {
-      const t = _e[e];
-      return t ? `${t}rem` : "";
+    _matchMediaQueryDesignToken(t) {
+      const e = Ue[t];
+      return e ? `${e}rem` : "";
     }
     _addFocusAbilityToLinksInCaption() {
-      var e;
-      (e = this._linksInCaption) == null || e.forEach((t) => {
-        t.removeAttribute("tabindex");
+      var t;
+      (t = this._linksInCaption) == null || t.forEach((e) => {
+        e.removeAttribute("tabindex");
       });
     }
-    _prepareImageUrl(e, t = !1) {
-      if (!e || e === "")
+    _prepareImageUrl(t, e = !1) {
+      if (!t || t === "")
         return "";
-      const i = !!e.match(/^\w+:\/\//), l = i ? new URL(e) : new URL(`http://noop/${e}`);
-      return t ? (l.searchParams.append("blur", "100"), l.searchParams.append("w", "100"), l.searchParams.append("h", "56")) : l.searchParams.append("auto", "format,compress,cs=tinysrgb"), this.customFocalPoint && (l.searchParams.append("fit", "crop"), l.searchParams.append("crop", "focalpoint"), l.searchParams.append("fp-x", this.focalPointX.toString(10)), l.searchParams.append("fp-y", this.focalPointY.toString(10)), l.searchParams.append("fp-z", "1")), this.focalPointDebug && l.searchParams.append("fp-debug", "true"), i ? l.href : l.pathname.substring(1) + l.search;
+      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 e;
-      return this.pictureSizesConfig ? e = this.pictureSizesConfig : e = `{
+      let t;
+      return this.pictureSizesConfig ? t = this.pictureSizesConfig : t = `{
         "breakpoints": [
           {
             "image": {
@@ -438,126 +374,96 @@ let Me = (() => {
             ]
           }
         ]
-      }`, be(e);
-    }
-    _createMediaQueryString(e) {
-      let t = "";
-      return e.forEach((i) => {
-        const l = i.conditionFeature;
-        let O;
-        i.conditionFeatureValue.lyneDesignToken ? O = this._matchMediaQueryDesignToken(i.conditionFeatureValue.value) : O = i.conditionFeatureValue.value;
+      }`, 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} ` : "";
-        t += `(${l}: ${O})${f}`;
-      }), t;
+        e += `(${c}: ${C})${f}`;
+      }), e;
     }
     _imageLoaded() {
       this._logPerformanceMarks(), this.toggleAttribute("data-loaded", !0), this.dispatchEvent(new Event("load"));
     }
     render() {
-      let { caption: e } = this, t = "";
-      const i = this._prepareImageUrl(this.imageSrc, !0), l = this._prepareImageUrl(this.imageSrc, !1);
-      this.loading === "lazy" && (this.decoding = "async", this.importance = "low"), this.copyright && (e = `${this.caption} ©${this.copyright}`, t = `{
-        "@context": "https://schema.org",
-        "@type": "Photograph",
-        "image": "${this.imageSrc}",
-        "copyrightHolder": {
-          "@type": "${this.copyrightHolder}",
-          "name": "${this.copyright}"
-        }
-      }`);
-      const O = this._preparePictureSizeConfigs();
-      return T`
-      <figure class="sbb-image__figure">
-        <div class="sbb-image__wrapper">
-          ${this.skipLqip ? _ : T`<img
-                alt=""
-                class="sbb-image__blurred"
-                src=${i}
-                width="1000"
-                height="562"
-                loading=${this.loading ?? _}
-                decoding=${this.decoding ?? _}
-              />`}
-
-          <picture>
-            <!-- render picture element sources -->
-            ${O.map((f) => {
-        const Ot = f.image.height, q = f.image.width, Yt = this._createMediaQueryString(f.mediaQueries);
-        return [
-          T` <source
-                  media=${`${Yt}`}
-                  sizes=${`${q}px`}
-                  srcset=${`${l}&w=${q}&h=${Ot}&q=${this._config.nonRetinaQuality} ${q}w, ${l}&w=${q * 2}&h=${Ot * 2}&q=${this._config.retinaQuality} ${q * 2}w`}
-                ></source>`
-        ];
-      })}
-            <img
-              alt=${this.alt || ""}
-              @load=${this._imageLoaded}
-              @error=${() => this.dispatchEvent(new Event("error"))}
-              class="sbb-image__img"
-              src=${this.imageSrc}
+      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 ?? _}
-              decoding=${this.decoding ?? _}
-              .fetchPriority=${this.importance ?? _}
-            />
-          </picture>
-        </div>
-        ${e ? T`<figcaption
-              class="sbb-image__caption"
-              .innerHTML=${e}
-              ${pe((f) => {
-        this._captionElement = f;
+              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>`;
       })}
-            ></figcaption>` : _}
-        ${t ? T(Xt || (Xt = ge(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), t) : _}
-      </figure>
+          <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>
     `;
     }
-  }, y = new WeakMap(), z = new WeakMap(), P = new WeakMap(), v = new WeakMap(), S = new WeakMap(), x = new WeakMap(), $ = new WeakMap(), M = new WeakMap(), w = new WeakMap(), I = new WeakMap(), L = new WeakMap(), C = new WeakMap(), R = new WeakMap(), D = new WeakMap(), F = new WeakMap(), B = new WeakMap(), E = new WeakMap(), b = o, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(Q[Symbol.metadata] ?? null) : void 0;
-    H = [u(), d()], Y = [u(), d({ attribute: "skip-lqip", type: Boolean, reflect: !0 })], V = [u(), d()], N = [u(), d()], J = [d({ attribute: "copyright-holder" })], it = [u(), d({ attribute: "custom-focal-point", type: Boolean })], rt = [d()], ct = [u(), d({ attribute: "focal-point-debug", type: Boolean })], ht = [u(), d({ attribute: "focal-point-x", type: Number })], gt = [u(), d({ attribute: "focal-point-y", type: Number })], _t = [u(), d({ attribute: "image-src" })], yt = [d()], vt = [d()], $t = [u(), d({ attribute: "performance-mark" })], It = [u(), d({ attribute: "picture-sizes-config" })], Rt = [d({ attribute: "border-radius", reflect: !0 })], Bt = [d({ attribute: "aspect-ratio", reflect: !0 })], Ht = [le(ue)], c(o, null, H, { kind: "accessor", name: "alt", static: !1, private: !1, access: { has: (t) => "alt" in t, get: (t) => t.alt, set: (t, i) => {
-      t.alt = i;
-    } }, metadata: e }, k, X), c(o, null, Y, { kind: "accessor", name: "skipLqip", static: !1, private: !1, access: { has: (t) => "skipLqip" in t, get: (t) => t.skipLqip, set: (t, i) => {
-      t.skipLqip = i;
-    } }, metadata: e }, A, U), c(o, null, V, { kind: "accessor", name: "caption", static: !1, private: !1, access: { has: (t) => "caption" in t, get: (t) => t.caption, set: (t, i) => {
-      t.caption = i;
-    } }, metadata: e }, K, W), c(o, null, N, { kind: "accessor", name: "copyright", static: !1, private: !1, access: { has: (t) => "copyright" in t, get: (t) => t.copyright, set: (t, i) => {
-      t.copyright = i;
-    } }, metadata: e }, Z, G), c(o, null, J, { kind: "accessor", name: "copyrightHolder", static: !1, private: !1, access: { has: (t) => "copyrightHolder" in t, get: (t) => t.copyrightHolder, set: (t, i) => {
-      t.copyrightHolder = i;
-    } }, metadata: e }, tt, et), c(o, null, it, { kind: "accessor", name: "customFocalPoint", static: !1, private: !1, access: { has: (t) => "customFocalPoint" in t, get: (t) => t.customFocalPoint, set: (t, i) => {
-      t.customFocalPoint = i;
-    } }, metadata: e }, at, st), c(o, null, rt, { kind: "accessor", name: "decoding", static: !1, private: !1, access: { has: (t) => "decoding" in t, get: (t) => t.decoding, set: (t, i) => {
-      t.decoding = i;
-    } }, metadata: e }, ot, nt), c(o, null, ct, { kind: "accessor", name: "focalPointDebug", static: !1, private: !1, access: { has: (t) => "focalPointDebug" in t, get: (t) => t.focalPointDebug, set: (t, i) => {
-      t.focalPointDebug = i;
-    } }, metadata: e }, lt, pt), c(o, null, ht, { kind: "accessor", name: "focalPointX", static: !1, private: !1, access: { has: (t) => "focalPointX" in t, get: (t) => t.focalPointX, set: (t, i) => {
-      t.focalPointX = i;
-    } }, metadata: e }, dt, mt), c(o, null, gt, { kind: "accessor", name: "focalPointY", static: !1, private: !1, access: { has: (t) => "focalPointY" in t, get: (t) => t.focalPointY, set: (t, i) => {
-      t.focalPointY = i;
-    } }, metadata: e }, bt, ut), c(o, null, _t, { kind: "accessor", name: "imageSrc", static: !1, private: !1, access: { has: (t) => "imageSrc" in t, get: (t) => t.imageSrc, set: (t, i) => {
-      t.imageSrc = i;
-    } }, metadata: e }, ft, kt), c(o, null, yt, { kind: "accessor", name: "importance", static: !1, private: !1, access: { has: (t) => "importance" in t, get: (t) => t.importance, set: (t, i) => {
-      t.importance = i;
-    } }, metadata: e }, zt, Pt), c(o, null, vt, { kind: "accessor", name: "loading", static: !1, private: !1, access: { has: (t) => "loading" in t, get: (t) => t.loading, set: (t, i) => {
-      t.loading = i;
-    } }, metadata: e }, St, xt), c(o, null, $t, { kind: "accessor", name: "performanceMark", static: !1, private: !1, access: { has: (t) => "performanceMark" in t, get: (t) => t.performanceMark, set: (t, i) => {
-      t.performanceMark = i;
-    } }, metadata: e }, Mt, wt), c(o, null, It, { kind: "accessor", name: "pictureSizesConfig", static: !1, private: !1, access: { has: (t) => "pictureSizesConfig" in t, get: (t) => t.pictureSizesConfig, set: (t, i) => {
-      t.pictureSizesConfig = i;
-    } }, metadata: e }, Lt, Ct), c(o, null, Rt, { kind: "accessor", name: "borderRadius", static: !1, private: !1, access: { has: (t) => "borderRadius" in t, get: (t) => t.borderRadius, set: (t, i) => {
-      t.borderRadius = i;
-    } }, metadata: e }, Dt, Ft), c(o, null, Bt, { kind: "accessor", name: "aspectRatio", static: !1, private: !1, access: { has: (t) => "aspectRatio" in t, get: (t) => t.aspectRatio, set: (t, i) => {
-      t.aspectRatio = i;
-    } }, metadata: e }, Et, Qt), c(o, null, Ht, { kind: "method", name: "_imageLoaded", static: !1, private: !1, access: { has: (t) => "_imageLoaded" in t, get: (t) => t._imageLoaded }, metadata: e }, null, j), c(null, n = { value: b }, r, { kind: "class", name: b.name, metadata: e }, null, m), b = n.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), o.styles = de, o.events = {
+  }, 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(b, m), b;
+  }, a(d, l), d;
 })();
 export {
-  Me as SbbImageElement
+  Ze as SbbImageElement
 };