@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/image/image.d.ts

@@ -0,0 +1,236 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+
+export interface InterfaceImageAttributesSizesConfig {
+    breakpoints: InterfaceImageAttributesSizesConfigBreakpoint[];
+}
+export interface InterfaceImageAttributesSizesConfigBreakpoint {
+    image: {
+        height: number;
+        width: number;
+    };
+    mediaQueries: InterfaceImageAttributesSizesConfigMediaQuery[];
+}
+export interface InterfaceImageAttributesSizesConfigMediaQuery {
+    conditionFeature: string;
+    conditionFeatureValue: {
+        lyneDesignToken: boolean;
+        value: string;
+    };
+    conditionOperator: false;
+}
+/**
+ * It displays an image.
+ *
+ * @cssprop [--sbb-image-aspect-ratio=auto] - Can be used to override `aspectRatio` property.
+ * This way we can have, for example, an image component with an aspect
+ * ratio of 4/3 in smaller viewports and 16/9 in larger viewports.
+ * @cssprop [--sbb-image-border-radius=var(--sbb-border-radius-4x)] - Can be used to override the
+ * `borderRadius` property in case of different values for different viewports.
+ */
+export declare class SbbImageElement extends LitElement {
+    static styles: CSSResultGroup;
+    private _captionElement?;
+    private _linksInCaption?;
+    private _config;
+    /**
+     * 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.
+     */
+    alt?: string;
+    /**
+     * 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
+     */
+    skipLqip: boolean;
+    /**
+     * 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.
+     */
+    caption?: string;
+    /**
+     * 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.
+     */
+    copyright?: string;
+    /**
+     * Copyright holder can either be an Organization or a Person
+     */
+    copyrightHolder: 'Organization' | 'Person';
+    /**
+     * 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
+     */
+    customFocalPoint: boolean;
+    /**
+     * 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
+     */
+    decoding: 'sync' | 'async' | 'auto';
+    /**
+     * Set this to true, to receive visual guidance where the custom focal
+     * point is currently set.
+     */
+    focalPointDebug: boolean;
+    /**
+     * Pass in a floating number between 0 (left) and 1 (right).
+     */
+    focalPointX: number;
+    /**
+     * Pass in a floating number between 0 (top) and 1 (bottom).
+     */
+    focalPointY: number;
+    /**
+     * 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.
+     */
+    imageSrc?: string;
+    /**
+     * 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'.
+     */
+    importance: 'auto' | 'high' | 'low';
+    /**
+     * 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.
+     */
+    loading: 'eager' | 'lazy';
+    /**
+     * 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.
+     */
+    performanceMark?: string;
+    /**
+     * 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
+     *          }
+     *        ]
+     *      }
+     *    ]
+     *  }
+     */
+    pictureSizesConfig?: string;
+    /**
+     * Border radius of the image. Choose between a default radius, no radius and a completely round image.
+     */
+    borderRadius: 'default' | 'none' | 'round';
+    /**
+     * 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'
+     */
+    aspectRatio: 'free' | '1-1' | '1-2' | '2-1' | '2-3' | '3-2' | '3-4' | '4-3' | '4-5' | '5-4' | '9-16' | '16-9';
+    private _logPerformanceMarks;
+    private _matchMediaQueryDesignToken;
+    private _addFocusAbilityToLinksInCaption;
+    private _prepareImageUrl;
+    private _preparePictureSizeConfigs;
+    private _createMediaQueryString;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    private _imageLoaded;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-image': SbbImageElement;
+    }
+}
+//# sourceMappingURL=image.d.ts.map

package/image/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/elements/image/image.ts"],"names":[],"mappings":"AAiBA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,MAAM,WAAW,mCAAmC;IAClD,WAAW,EAAE,6CAA6C,EAAE,CAAC;CAC9D;AAED,MAAM,WAAW,6CAA6C;IAC5D,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,YAAY,EAAE,6CAA6C,EAAE,CAAC;CAC/D;AAED,MAAM,WAAW,6CAA6C;IAC5D,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB,EAAE;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,iBAAiB,EAAE,KAAK,CAAC;CAC1B;AAkGD;;;;;;;;GAQG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAAC,CAAc;IACtC,OAAO,CAAC,eAAe,CAAC,CAA8B;IACtD,OAAO,CAAC,OAAO,CAGb;IAEF;;;;;;OAMG;IACgB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEhC;;;;;;OAMG;IACyD,QAAQ,UAAS;IAE7E;;;;;OAKG;IACgB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEpC;;;;OAIG;IACgB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEtC;;OAEG;IAEI,eAAe,EAAE,cAAc,GAAG,QAAQ,CAAkB;IAEnE;;;;OAIG;IACkE,gBAAgB,UAAS;IAE9F;;;;;;OAMG;IACgB,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAU;IAEhE;;;OAGG;IACiE,eAAe,UAAS;IAE5F;;OAEG;IAC4D,WAAW,SAAK;IAE/E;;OAEG;IAC4D,WAAW,SAAK;IAE/E;;;;;;;;;OASG;IAC0C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE/D;;;;;;;;OAQG;IACgB,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAU;IAEhE;;;;;;;;;OASG;IACgB,OAAO,EAAE,OAAO,GAAG,MAAM,CAAW;IAEvD;;;;;;;;;;;;OAYG;IACiD,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmEG;IACqD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAEpF;;OAEG;IAC6D,YAAY,EACxE,SAAS,GACT,MAAM,GACN,OAAO,CAAa;IAExB;;;;OAIG;IAEI,WAAW,EACd,MAAM,GACN,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,CAAU;IAEpB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,2BAA2B;IAKnC,OAAO,CAAC,gCAAgC;IAMxC,OAAO,CAAC,gBAAgB;IA0CxB,OAAO,CAAC,0BAA0B;IAgElC,OAAO,CAAC,uBAAuB;IAuBf,iBAAiB,IAAI,IAAI;cAStB,MAAM,IAAI,cAAc;cAgGxB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAiBzE,OAAO,CAAC,YAAY;CAIrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/image.d.ts

@@ -0,0 +1,2 @@
+export * from './image/image.js';
+//# sourceMappingURL=image.d.ts.map

package/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/elements/image.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/image.js

@@ -0,0 +1,279 @@
+import { css as y, LitElement as k, html as d, nothing as l } from "lit";
+import { property as s, eventOptions as _, customElement as $ } from "lit/decorators.js";
+import { ref as v } from "lit/directives/ref.js";
+import { hostContext as x } from "./core/dom.js";
+const S = 0, P = 359, w = 360, M = 599, z = 600, B = 839, C = 840, L = 1023, O = 1024, Q = 1279, F = 1280, D = 1439, T = 1440, E = 2579, I = 16, R = 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) );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{margin:0}.sbb-image__img{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host([data-loaded]) .sbb-image__blurred{opacity:0}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:cover;transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{position:relative;overflow:hidden;max-width:100%;border-radius:var(--sbb-image-border-radius);aspect-ratio:var(--sbb-image-aspect-ratio)}.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);margin-block-start:var(--sbb-spacing-fixed-4x)}`;
+var h = Object.freeze, u = Object.defineProperty, A = Object.getOwnPropertyDescriptor, r = (e, t, o, i) => {
+  for (var n = i > 1 ? void 0 : i ? A(t, o) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (n = (i ? c(t, o, n) : c(n)) || n);
+  return i && n && u(t, o, n), n;
+}, H = (e, t) => h(u(e, "raw", { value: h(e.slice()) })), g;
+const j = (e) => {
+  if (!e || e.length === 0)
+    return [];
+  let t;
+  try {
+    t = JSON.parse(e);
+  } catch {
+    return [];
+  }
+  if (!t.breakpoints || t.breakpoints.length === 0)
+    return [];
+  if (!Array.isArray(t.breakpoints))
+    return [];
+  let o = !1, i = !1;
+  const n = ["image", "mediaQueries"];
+  return t.breakpoints.forEach((p) => {
+    const c = Object.keys(p);
+    c.forEach((m) => {
+      n.includes(m) || (o = !0);
+    }), n.forEach((m) => {
+      c.includes(m) || (i = !0);
+    });
+  }), o || i ? [] : t.breakpoints;
+}, U = {
+  once: !0,
+  passive: !0
+}, b = (e) => e / I, V = {
+  "sbb-breakpoint-zero-min": b(S),
+  "sbb-breakpoint-zero-max": b(P),
+  "sbb-breakpoint-micro-min": b(w),
+  "sbb-breakpoint-micro-max": b(M),
+  "sbb-breakpoint-small-min": b(z),
+  "sbb-breakpoint-small-max": b(B),
+  "sbb-breakpoint-medium-min": b(C),
+  "sbb-breakpoint-medium-max": b(L),
+  "sbb-breakpoint-large-min": b(O),
+  "sbb-breakpoint-large-max": b(Q),
+  "sbb-breakpoint-wide-min": b(F),
+  "sbb-breakpoint-wide-max": b(D),
+  "sbb-breakpoint-ultra-min": b(T),
+  "sbb-breakpoint-ultra-max": b(E)
+};
+let a = class extends k {
+  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";
+  }
+  _logPerformanceMarks() {
+    this.performanceMark && (performance.clearMarks(this.performanceMark), performance.mark(this.performanceMark));
+  }
+  _matchMediaQueryDesignToken(e) {
+    const t = V[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 o = !!e.match(/^\w+:\/\//), i = o ? 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"), o ? i.href : i.pathname.substring(1) + i.search;
+  }
+  _preparePictureSizeConfigs() {
+    let e;
+    return this.pictureSizesConfig ? e = this.pictureSizesConfig : e = `{
+        "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": false
+              }
+            ]
+          }
+        ]
+      }`, j(e);
+  }
+  _createMediaQueryString(e) {
+    let t = "";
+    return e.forEach((o) => {
+      const i = o.conditionFeature;
+      let n;
+      o.conditionFeatureValue.lyneDesignToken ? n = this._matchMediaQueryDesignToken(o.conditionFeatureValue.value) : n = o.conditionFeatureValue.value;
+      const p = o.conditionOperator ? ` ${o.conditionOperator} ` : "";
+      t += `(${i}: ${n})${p}`;
+    }), t;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.toggleAttribute(
+      "data-teaser",
+      !!x("sbb-teaser-hero", this) || !!this.closest("sbb-teaser-paid")
+    );
+  }
+  render() {
+    let { caption: e } = this, t = "";
+    const o = 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 = `{
+        "@context": "https://schema.org",
+        "@type": "Photograph",
+        "image": "${this.imageSrc}",
+        "copyrightHolder": {
+          "@type": "${this.copyrightHolder}",
+          "name": "${this.copyright}"
+        }
+      }`);
+    const n = this._preparePictureSizeConfigs();
+    return d`
+      <figure class="sbb-image__figure">
+        <div class="sbb-image__wrapper">
+          ${this.skipLqip ? l : d`<img
+                alt=""
+                class="sbb-image__blurred"
+                src=${o}
+                width="1000"
+                height="562"
+                loading=${this.loading ?? l}
+                decoding=${this.decoding ?? l}
+              />`}
+
+          <picture>
+            <!-- render picture element sources -->
+            ${n.map((p) => {
+      const c = p.image.height, m = p.image.width, f = this._createMediaQueryString(p.mediaQueries);
+      return [
+        d` <source
+                  media=${`${f}`}
+                  sizes=${`${m}px`}
+                  srcset=${`${i}&w=${m}&h=${c}&q=${this._config.nonRetinaQuality} ${m}w, ${i}&w=${m * 2}&h=${c * 2}&q=${this._config.retinaQuality} ${m * 2}w`}
+                ></source>`
+      ];
+    })}
+            <img
+              alt=${this.alt || ""}
+              @load=${this._imageLoaded}
+              class="sbb-image__img"
+              src=${this.imageSrc}
+              width="1000"
+              height="562"
+              loading=${this.loading ?? l}
+              decoding=${this.decoding ?? l}
+              .fetchPriority=${this.importance ?? l}
+            />
+          </picture>
+        </div>
+        ${e ? d`<figcaption
+              class="sbb-image__caption"
+              .innerHTML=${e}
+              ${v((p) => {
+      this._captionElement = p;
+    })}
+            ></figcaption>` : l}
+        ${t ? d(g || (g = H(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), t) : l}
+      </figure>
+    `;
+  }
+  updated(e) {
+    super.updated(e), this._captionElement && (this._linksInCaption = this._captionElement.querySelectorAll("a"), this._linksInCaption && this._addFocusAbilityToLinksInCaption());
+  }
+  _imageLoaded() {
+    this._logPerformanceMarks(), this.toggleAttribute("data-loaded", !0);
+  }
+};
+a.styles = R;
+r([
+  s()
+], a.prototype, "alt", 2);
+r([
+  s({ attribute: "skip-lqip", type: Boolean })
+], a.prototype, "skipLqip", 2);
+r([
+  s()
+], a.prototype, "caption", 2);
+r([
+  s()
+], a.prototype, "copyright", 2);
+r([
+  s({ attribute: "copyright-holder" })
+], a.prototype, "copyrightHolder", 2);
+r([
+  s({ attribute: "custom-focal-point", type: Boolean })
+], a.prototype, "customFocalPoint", 2);
+r([
+  s()
+], a.prototype, "decoding", 2);
+r([
+  s({ attribute: "focal-point-debug", type: Boolean })
+], a.prototype, "focalPointDebug", 2);
+r([
+  s({ attribute: "focal-point-x", type: Number })
+], a.prototype, "focalPointX", 2);
+r([
+  s({ attribute: "focal-point-y", type: Number })
+], a.prototype, "focalPointY", 2);
+r([
+  s({ attribute: "image-src" })
+], a.prototype, "imageSrc", 2);
+r([
+  s()
+], a.prototype, "importance", 2);
+r([
+  s()
+], a.prototype, "loading", 2);
+r([
+  s({ attribute: "performance-mark" })
+], a.prototype, "performanceMark", 2);
+r([
+  s({ attribute: "picture-sizes-config" })
+], a.prototype, "pictureSizesConfig", 2);
+r([
+  s({ attribute: "border-radius", reflect: !0 })
+], a.prototype, "borderRadius", 2);
+r([
+  s({ attribute: "aspect-ratio", reflect: !0 })
+], a.prototype, "aspectRatio", 2);
+r([
+  _(U)
+], a.prototype, "_imageLoaded", 1);
+a = r([
+  $("sbb-image")
+], a);
+export {
+  a as SbbImageElement
+};