@sbb-esta/lyne-elements 1.12.1 → 1.14.0

package/image.js

@@ -1,101 +1,392 @@
-import { css as y, LitElement as _, html as d, nothing as m } from "lit";
-import { property as s, eventOptions as k, customElement as v } from "lit/decorators.js";
-import { ref as $ } from "lit/directives/ref.js";
-import { hostContext as x } from "./core/dom.js";
-const w = 0, S = 359, P = 360, M = 599, z = 600, C = 839, B = 840, L = 1023, O = 1024, Q = 1279, F = 1280, D = 1439, E = 1440, T = 2579, j = 16, I = y`*,: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 h = Object.freeze, u = Object.defineProperty, R = Object.getOwnPropertyDescriptor, o = (e, t, r, i) => {
-  for (var n = i > 1 ? void 0 : i ? R(t, r) : t, c = e.length - 1, b; c >= 0; c--)
-    (b = e[c]) && (n = (i ? b(t, r, n) : b(n)) || n);
-  return i && n && u(t, r, n), n;
-}, A = (e, t) => h(u(e, "raw", { value: h(e.slice()) })), g;
-const U = (e) => {
-  if (!e || e.length === 0)
+var qt = (r) => {
+  throw TypeError(r);
+};
+var Tt = (r, n, g) => n.has(r) || qt("Cannot " + g);
+var p = (r, n, g) => (Tt(r, n, "read from private field"), g ? g.call(r) : n.get(r)), h = (r, n, g) => n.has(r) ? qt("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, g), s = (r, n, g, b) => (Tt(r, n, "write to private field"), b ? b.call(r, g) : n.set(r, g), g);
+import { __esDecorate as c, __runInitializers as a } from "tslib";
+import { css as At, html as T, nothing as _, LitElement as Ut } from "lit";
+import { customElement as Vt, property as d, eventOptions as Kt } from "lit/decorators.js";
+import { ref as Wt } from "lit/directives/ref.js";
+import { forceType as u } from "./core/decorators.js";
+import { hostContext as Nt } from "./core/dom.js";
+const Zt = 0, Gt = 359, Jt = 360, te = 599, ee = 600, ie = 839, ae = 840, se = 1023, re = 1024, oe = 1279, ne = 1280, ce = 1439, le = 1440, pe = 2579, he = 16, de = At`*,: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, ge = Object.defineProperty, me = (r, n) => jt(ge(r, "raw", { value: jt(r.slice()) })), Xt;
+const be = (r) => {
+  if (!r || r.length === 0)
     return [];
-  let t;
+  let n;
   try {
-    t = JSON.parse(e);
+    n = JSON.parse(r);
   } catch {
     return [];
   }
-  if (!t.breakpoints || t.breakpoints.length === 0)
+  if (!n.breakpoints || n.breakpoints.length === 0)
     return [];
-  if (!Array.isArray(t.breakpoints))
+  if (!Array.isArray(n.breakpoints))
     return [];
-  let r = !1, i = !1;
-  const n = ["image", "mediaQueries"];
-  return t.breakpoints.forEach((c) => {
-    const b = Object.keys(c);
-    b.forEach((l) => {
-      n.includes(l) || (r = !0);
-    }), n.forEach((l) => {
-      b.includes(l) || (i = !0);
+  let g = !1, b = !1;
+  const Q = ["image", "mediaQueries"];
+  return n.breakpoints.forEach((j) => {
+    const H = Object.keys(j);
+    H.forEach((k) => {
+      Q.includes(k) || (g = !0);
+    }), Q.forEach((k) => {
+      H.includes(k) || (b = !0);
     });
-  }), r || i ? [] : t.breakpoints;
-}, H = {
+  }), g || b ? [] : n.breakpoints;
+}, ue = {
   once: !0,
   passive: !0
-}, p = (e) => e / j, q = {
-  "sbb-breakpoint-zero-min": p(w),
-  "sbb-breakpoint-zero-max": p(S),
-  "sbb-breakpoint-micro-min": p(P),
-  "sbb-breakpoint-micro-max": p(M),
-  "sbb-breakpoint-small-min": p(z),
-  "sbb-breakpoint-small-max": p(C),
-  "sbb-breakpoint-medium-min": p(B),
-  "sbb-breakpoint-medium-max": p(L),
-  "sbb-breakpoint-large-min": p(O),
-  "sbb-breakpoint-large-max": p(Q),
-  "sbb-breakpoint-wide-min": p(F),
-  "sbb-breakpoint-wide-max": p(D),
-  "sbb-breakpoint-ultra-min": p(E),
-  "sbb-breakpoint-ultra-max": p(T)
+}, m = (r) => r / he, _e = {
+  "sbb-breakpoint-zero-min": m(Zt),
+  "sbb-breakpoint-zero-max": m(Gt),
+  "sbb-breakpoint-micro-min": m(Jt),
+  "sbb-breakpoint-micro-max": m(te),
+  "sbb-breakpoint-small-min": m(ee),
+  "sbb-breakpoint-small-max": m(ie),
+  "sbb-breakpoint-medium-min": m(ae),
+  "sbb-breakpoint-medium-max": m(se),
+  "sbb-breakpoint-large-min": m(re),
+  "sbb-breakpoint-large-max": m(oe),
+  "sbb-breakpoint-wide-min": m(ne),
+  "sbb-breakpoint-wide-max": m(ce),
+  "sbb-breakpoint-ultra-min": m(le),
+  "sbb-breakpoint-ultra-max": m(pe)
 };
-let a = class extends _ {
-  constructor() {
-    super(...arguments), this._config = {
-      nonRetinaQuality: "45",
-      retinaQuality: "20"
-    }, this.skipLqip = !1, this.copyrightHolder = "Organization", this.customFocalPoint = !1, this.decoding = "auto", this.focalPointDebug = !1, this.focalPointX = 1, this.focalPointY = 1, this.importance = "high", this.loading = "eager", this.borderRadius = "default", this.aspectRatio = "16-9";
-  }
-  /** Whether the image is finished loading or failed to load. */
-  get complete() {
-    var e, t, r;
-    return ((r = (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector) == null ? void 0 : t.call(e, ".sbb-image__img")) == null ? void 0 : r.complete) ?? !1;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.toggleAttribute(
-      "data-teaser",
-      !!x("sbb-teaser-hero", this) || !!this.closest("sbb-teaser-paid")
-    );
-  }
-  updated(e) {
-    super.updated(e), 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);
-  }
-  _logPerformanceMarks() {
-    this.performanceMark && (performance.clearMarks(this.performanceMark), performance.mark(this.performanceMark));
-  }
-  _matchMediaQueryDesignToken(e) {
-    const t = q[e];
-    return t ? `${t}rem` : "";
-  }
-  _addFocusAbilityToLinksInCaption() {
-    var e;
-    (e = this._linksInCaption) == null || e.forEach((t) => {
-      t.removeAttribute("tabindex");
-    });
-  }
-  _prepareImageUrl(e, t = !1) {
-    if (!e || e === "")
-      return "";
-    const r = !!e.match(/^\w+:\/\//), i = r ? new URL(e) : new URL(`http://noop/${e}`);
-    return t ? (i.searchParams.append("blur", "100"), i.searchParams.append("w", "100"), i.searchParams.append("h", "56")) : i.searchParams.append("auto", "format,compress,cs=tinysrgb"), this.customFocalPoint && (i.searchParams.append("fit", "crop"), i.searchParams.append("crop", "focalpoint"), i.searchParams.append("fp-x", this.focalPointX.toString(10)), i.searchParams.append("fp-y", this.focalPointY.toString(10)), i.searchParams.append("fp-z", "1")), this.focalPointDebug && i.searchParams.append("fp-debug", "true"), r ? i.href : i.pathname.substring(1) + i.search;
-  }
-  _preparePictureSizeConfigs() {
-    let e;
-    return this.pictureSizesConfig ? e = this.pictureSizesConfig : e = `{
+let $e = (() => {
+  var y, z, P, v, x, S, $, M, w, I, L, C, R, D, F, B, E, o;
+  let r = [Vt("sbb-image")], n, g = [], b, Q = Ut, 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 = [], gt = [], mt, bt = [], ut = [], _t, ft = [], kt = [], yt, zt = [], Pt = [], vt, xt = [], St = [], $t, Mt = [], wt = [], It, Lt = [], Ct = [], Rt, Dt = [], Ft = [], Bt, Et = [], Qt = [], Ht;
+  return o = class extends Q {
+    constructor() {
+      super(...arguments);
+      h(this, y);
+      h(this, z);
+      h(this, P);
+      h(this, v);
+      h(this, x);
+      h(this, S);
+      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 = {
+        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, x, (a(this, G), a(this, tt, "Organization"))), s(this, S, (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, gt), 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, xt, "eager"))), s(this, D, (a(this, St), 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);
+    }
+    /**
+     * 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 p(this, y);
+    }
+    set alt(e) {
+      s(this, y, e);
+    }
+    /**
+     * 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 p(this, z);
+    }
+    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, x);
+    }
+    set copyrightHolder(e) {
+      s(this, x, e);
+    }
+    /**
+     * 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 p(this, S);
+    }
+    set customFocalPoint(e) {
+      s(this, S, e);
+    }
+    /**
+     * 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 p(this, $);
+    }
+    set decoding(e) {
+      s(this, $, e);
+    }
+    /**
+     * Set this to true, to receive visual guidance where the custom focal
+     * point is currently set.
+     */
+    get focalPointDebug() {
+      return p(this, M);
+    }
+    set focalPointDebug(e) {
+      s(this, M, e);
+    }
+    /**
+     * Pass in a floating number between 0 (left) and 1 (right).
+     */
+    get focalPointX() {
+      return p(this, w);
+    }
+    set focalPointX(e) {
+      s(this, w, e);
+    }
+    /**
+     * Pass in a floating number between 0 (top) and 1 (bottom).
+     */
+    get focalPointY() {
+      return p(this, I);
+    }
+    set focalPointY(e) {
+      s(this, I, e);
+    }
+    /**
+     * 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 p(this, L);
+    }
+    set imageSrc(e) {
+      s(this, L, e);
+    }
+    /**
+     * 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 p(this, C);
+    }
+    set importance(e) {
+      s(this, C, e);
+    }
+    /**
+     * 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 p(this, R);
+    }
+    set loading(e) {
+      s(this, R, e);
+    }
+    /**
+     * 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 p(this, D);
+    }
+    set performanceMark(e) {
+      s(this, D, e);
+    }
+    /**
+     * 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 p(this, F);
+    }
+    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);
+    }
+    /** 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", !!Nt("sbb-teaser-hero", this) || !!this.closest("sbb-teaser-paid"));
+    }
+    updated(e) {
+      super.updated(e), 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);
+    }
+    _logPerformanceMarks() {
+      this.performanceMark && (performance.clearMarks(this.performanceMark), performance.mark(this.performanceMark));
+    }
+    _matchMediaQueryDesignToken(e) {
+      const t = _e[e];
+      return t ? `${t}rem` : "";
+    }
+    _addFocusAbilityToLinksInCaption() {
+      var e;
+      (e = this._linksInCaption) == null || e.forEach((t) => {
+        t.removeAttribute("tabindex");
+      });
+    }
+    _prepareImageUrl(e, t = !1) {
+      if (!e || e === "")
+        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;
+    }
+    _preparePictureSizeConfigs() {
+      let e;
+      return this.pictureSizesConfig ? e = this.pictureSizesConfig : e = `{
         "breakpoints": [
           {
             "image": {
@@ -146,25 +437,25 @@ let a = class extends _ {
             ]
           }
         ]
-      }`, U(e);
-  }
-  _createMediaQueryString(e) {
-    let t = "";
-    return e.forEach((r) => {
-      const i = r.conditionFeature;
-      let n;
-      r.conditionFeatureValue.lyneDesignToken ? n = this._matchMediaQueryDesignToken(r.conditionFeatureValue.value) : n = r.conditionFeatureValue.value;
-      const c = r.conditionOperator ? ` ${r.conditionOperator} ` : "";
-      t += `(${i}: ${n})${c}`;
-    }), t;
-  }
-  _imageLoaded() {
-    this._logPerformanceMarks(), this.toggleAttribute("data-loaded", !0), this.dispatchEvent(new Event("load"));
-  }
-  render() {
-    let { caption: e } = this, t = "";
-    const r = this._prepareImageUrl(this.imageSrc, !0), i = this._prepareImageUrl(this.imageSrc, !1);
-    this.loading === "lazy" && (this.decoding = "async", this.importance = "low"), this.copyright && (e = `${this.caption} ©${this.copyright}`, t = `{
+      }`, 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;
+        const f = i.conditionOperator ? ` ${i.conditionOperator} ` : "";
+        t += `(${l}: ${O})${f}`;
+      }), t;
+    }
+    _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}",
@@ -173,32 +464,32 @@ let a = class extends _ {
           "name": "${this.copyright}"
         }
       }`);
-    const n = this._preparePictureSizeConfigs();
-    return d`
+      const O = this._preparePictureSizeConfigs();
+      return T`
       <figure class="sbb-image__figure">
         <div class="sbb-image__wrapper">
-          ${this.skipLqip ? m : d`<img
+          ${this.skipLqip ? _ : T`<img
                 alt=""
                 class="sbb-image__blurred"
-                src=${r}
+                src=${i}
                 width="1000"
                 height="562"
-                loading=${this.loading ?? m}
-                decoding=${this.decoding ?? m}
+                loading=${this.loading ?? _}
+                decoding=${this.decoding ?? _}
               />`}
 
           <picture>
             <!-- render picture element sources -->
-            ${n.map((c) => {
-      const b = c.image.height, l = c.image.width, f = this._createMediaQueryString(c.mediaQueries);
-      return [
-        d` <source
-                  media=${`${f}`}
-                  sizes=${`${l}px`}
-                  srcset=${`${i}&w=${l}&h=${b}&q=${this._config.nonRetinaQuality} ${l}w, ${i}&w=${l * 2}&h=${b * 2}&q=${this._config.retinaQuality} ${l * 2}w`}
+            ${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}
@@ -207,86 +498,65 @@ let a = class extends _ {
               src=${this.imageSrc}
               width="1000"
               height="562"
-              loading=${this.loading ?? m}
-              decoding=${this.decoding ?? m}
-              .fetchPriority=${this.importance ?? m}
+              loading=${this.loading ?? _}
+              decoding=${this.decoding ?? _}
+              .fetchPriority=${this.importance ?? _}
             />
           </picture>
         </div>
-        ${e ? d`<figcaption
+        ${e ? T`<figcaption
               class="sbb-image__caption"
               .innerHTML=${e}
-              ${$((c) => {
-      this._captionElement = c;
-    })}
-            ></figcaption>` : m}
-        ${t ? d(g || (g = A(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), t) : m}
+              ${Wt((f) => {
+        this._captionElement = f;
+      })}
+            ></figcaption>` : _}
+        ${t ? T(Xt || (Xt = me(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), t) : _}
       </figure>
     `;
-  }
-};
-a.styles = I;
-a.events = {
-  error: "error",
-  load: "load"
-};
-o([
-  s()
-], a.prototype, "alt", 2);
-o([
-  s({ attribute: "skip-lqip", type: Boolean, reflect: !0 })
-], a.prototype, "skipLqip", 2);
-o([
-  s()
-], a.prototype, "caption", 2);
-o([
-  s()
-], a.prototype, "copyright", 2);
-o([
-  s({ attribute: "copyright-holder" })
-], a.prototype, "copyrightHolder", 2);
-o([
-  s({ attribute: "custom-focal-point", type: Boolean })
-], a.prototype, "customFocalPoint", 2);
-o([
-  s()
-], a.prototype, "decoding", 2);
-o([
-  s({ attribute: "focal-point-debug", type: Boolean })
-], a.prototype, "focalPointDebug", 2);
-o([
-  s({ attribute: "focal-point-x", type: Number })
-], a.prototype, "focalPointX", 2);
-o([
-  s({ attribute: "focal-point-y", type: Number })
-], a.prototype, "focalPointY", 2);
-o([
-  s({ attribute: "image-src" })
-], a.prototype, "imageSrc", 2);
-o([
-  s()
-], a.prototype, "importance", 2);
-o([
-  s()
-], a.prototype, "loading", 2);
-o([
-  s({ attribute: "performance-mark" })
-], a.prototype, "performanceMark", 2);
-o([
-  s({ attribute: "picture-sizes-config" })
-], a.prototype, "pictureSizesConfig", 2);
-o([
-  s({ attribute: "border-radius", reflect: !0 })
-], a.prototype, "borderRadius", 2);
-o([
-  s({ attribute: "aspect-ratio", reflect: !0 })
-], a.prototype, "aspectRatio", 2);
-o([
-  k(H)
-], a.prototype, "_imageLoaded", 1);
-a = o([
-  v("sbb-image")
-], a);
+    }
+  }, y = new WeakMap(), z = new WeakMap(), P = new WeakMap(), v = new WeakMap(), x = new WeakMap(), S = 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 })], mt = [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 = [Kt(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, gt), c(o, null, mt, { 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 }, xt, St), 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, g), b = n.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o.styles = de, o.events = {
+    error: "error",
+    load: "load"
+  }, a(b, g), b;
+})();
 export {
-  a as SbbImageElement
+  $e as SbbImageElement
 };