@sbb-esta/lyne-elements-dev 4.7.0-dev.1773149675 → 4.7.0-dev.1773157346

package/image/image.component.js

@@ -1,72 +1,72 @@
-var fe = (o) => {
-  throw TypeError(o);
+var me = (r) => {
+  throw TypeError(r);
 };
-var _e = (o, r, l) => r.has(o) || fe("Cannot " + l);
-var d = (o, r, l) => (_e(o, r, "read from private field"), l ? l.call(o) : r.get(o)), h = (o, r, l) => r.has(o) ? fe("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(o) : r.set(o, l), s = (o, r, l, m) => (_e(o, r, "write to private field"), m ? m.call(o, l) : r.set(o, l), l);
-import { __esDecorate as p, __runInitializers as a } from "tslib";
-import { f as Pe, d as ye, a as Se, S as ze, c as ve, b as xe, g as $e, e as we } from "../sbb-tokens-HiNSQasB.js";
-import { css as Me, LitElement as Ie, nothing as F, html as q } from "lit";
-import { customElement as Le, property as g, eventOptions as Fe } from "lit/decorators.js";
+var ue = (r, o, l) => o.has(r) || me("Cannot " + l);
+var p = (r, o, l) => (ue(r, o, "read from private field"), l ? l.call(r) : o.get(r)), d = (r, o, l) => o.has(r) ? me("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(r) : o.set(r, l), a = (r, o, l, g) => (ue(r, o, "write to private field"), g ? g.call(r, l) : o.set(r, l), l);
+import { __esDecorate as h, __runInitializers as s } from "tslib";
+import { f as fe, d as _e, a as be, S as ke, c as Pe, b as ye, g as ze, e as ve } from "../sbb-tokens-HiNSQasB.js";
+import { css as Se, nothing as C, html as O } from "lit";
+import { property as m, eventOptions as xe } from "lit/decorators.js";
+import { SbbElement as $e } from "../core/base-elements.js";
 import { forceType as u } from "../core/decorators.js";
-import { SbbElementInternalsMixin as Ce } from "../core/mixins.js";
-import { boxSizingStyles as De } from "../core/styles.js";
-const Ee = Me`: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)}.sbb-image__img{opacity:.000001}:host(:is(:state(loaded),[state--loaded])) .sbb-image__img{opacity:.999999}:host(:not([skip-lqip])) .sbb-image__img{position:absolute;inset:0}:host(:is(:state(loaded),[state--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);border-radius:inherit;overflow:hidden}`, qe = (o) => {
-  if (!o || o.length === 0)
+import { boxSizingStyles as we } from "../core/styles.js";
+const Me = Se`: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)}.sbb-image__img{opacity:.000001}:host(:is(:state(loaded),[state--loaded])) .sbb-image__img{opacity:.999999}:host(:not([skip-lqip])) .sbb-image__img{position:absolute;inset:0}:host(:is(:state(loaded),[state--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);border-radius:inherit;overflow:hidden}`, Le = (r) => {
+  if (!r || r.length === 0)
     return [];
-  let r;
+  let o;
   try {
-    r = JSON.parse(o);
+    o = JSON.parse(r);
   } catch {
     return [];
   }
-  if (!r.breakpoints || r.breakpoints.length === 0)
+  if (!o.breakpoints || o.breakpoints.length === 0)
     return [];
-  if (!Array.isArray(r.breakpoints))
+  if (!Array.isArray(o.breakpoints))
     return [];
-  let l = !1, m = !1;
-  const C = ["image", "mediaQueries"];
-  return r.breakpoints.forEach((E) => {
-    const D = Object.keys(E);
-    D.forEach((f) => {
-      C.includes(f) || (l = !0);
-    }), C.forEach((f) => {
-      D.includes(f) || (m = !0);
+  let l = !1, g = !1;
+  const D = ["image", "mediaQueries"];
+  return o.breakpoints.forEach((Q) => {
+    const q = Object.keys(Q);
+    q.forEach((_) => {
+      D.includes(_) || (l = !0);
+    }), D.forEach((_) => {
+      q.includes(_) || (g = !0);
     });
-  }), l || m ? [] : r.breakpoints;
-}, Qe = {
+  }), l || g ? [] : o.breakpoints;
+}, Fe = {
   passive: !0
-}, Oe = {
-  "sbb-breakpoint-zero-min": we,
-  "sbb-breakpoint-zero-max": $e,
-  "sbb-breakpoint-small-min": xe,
-  "sbb-breakpoint-small-max": ve,
-  "sbb-breakpoint-large-min": ze,
-  "sbb-breakpoint-large-max": Se,
-  "sbb-breakpoint-ultra-min": ye,
-  "sbb-breakpoint-ultra-max": Pe
+}, Ce = {
+  "sbb-breakpoint-zero-min": ve,
+  "sbb-breakpoint-zero-max": ze,
+  "sbb-breakpoint-small-min": ye,
+  "sbb-breakpoint-small-max": Pe,
+  "sbb-breakpoint-large-min": ke,
+  "sbb-breakpoint-large-max": be,
+  "sbb-breakpoint-ultra-min": _e,
+  "sbb-breakpoint-ultra-max": fe
 };
-let Ke = (() => {
-  var _, k, P, y, S, z, v, x, $, w, M, I, n;
-  let o = [Le("sbb-image")], r, l = [], m, C = Ce(Ie), E = [], D, f = [], Q = [], O, B = [], X = [], Y, j = [], T = [], U, V = [], A = [], R, K = [], N = [], H, W = [], Z = [], G, J = [], ee = [], te, ie = [], ae = [], se, re = [], oe = [], ne, ce = [], le = [], pe, me = [], de = [], he, ge = [], ue = [], be;
-  return n = class extends C {
+let Te = (() => {
+  var b, k, P, y, z, v, S, x, $, w, M, L, n;
+  let r = $e, o = [], l, g = [], D = [], Q, q = [], _ = [], B, X = [], Y = [], j, I = [], T = [], U, V = [], A = [], R, K = [], N = [], H, W = [], Z = [], G, J = [], E = [], ee, te = [], ie = [], ae, se = [], re = [], oe, ne = [], ce = [], le, pe = [], de = [], he;
+  return n = class extends r {
     constructor() {
       super(...arguments);
-      h(this, _);
-      h(this, k);
-      h(this, P);
-      h(this, y);
-      h(this, S);
-      h(this, z);
-      h(this, v);
-      h(this, x);
-      h(this, $);
-      h(this, w);
-      h(this, M);
-      h(this, I);
-      this._captionElement = a(this, E), this._config = {
+      d(this, b);
+      d(this, k);
+      d(this, P);
+      d(this, y);
+      d(this, z);
+      d(this, v);
+      d(this, S);
+      d(this, x);
+      d(this, $);
+      d(this, w);
+      d(this, M);
+      d(this, L);
+      this._captionElement = s(this, o), this._config = {
         nonRetinaQuality: "45",
         retinaQuality: "20"
-      }, s(this, _, a(this, f, "")), s(this, k, (a(this, Q), a(this, B, !1))), s(this, P, (a(this, X), a(this, j, !1))), s(this, y, (a(this, T), a(this, V, "auto"))), s(this, S, (a(this, A), a(this, K, !1))), s(this, z, (a(this, N), a(this, W, 1))), s(this, v, (a(this, Z), a(this, J, 1))), s(this, x, (a(this, ee), a(this, ie, ""))), s(this, $, (a(this, ae), a(this, re, "high"))), s(this, w, (a(this, oe), a(this, ce, "eager"))), s(this, M, (a(this, le), a(this, me, ""))), s(this, I, (a(this, de), a(this, ge, ""))), a(this, ue);
+      }, a(this, b, s(this, g, "")), a(this, k, (s(this, D), s(this, q, !1))), a(this, P, (s(this, _), s(this, X, !1))), a(this, y, (s(this, Y), s(this, I, "auto"))), a(this, z, (s(this, T), s(this, V, !1))), a(this, v, (s(this, A), s(this, K, 1))), a(this, S, (s(this, N), s(this, W, 1))), a(this, x, (s(this, Z), s(this, J, ""))), a(this, $, (s(this, E), s(this, te, "high"))), a(this, w, (s(this, ie), s(this, se, "eager"))), a(this, M, (s(this, re), s(this, ne, ""))), a(this, L, (s(this, ce), s(this, pe, ""))), s(this, de);
     }
     /**
      * An alt text is not always necessary (e.g. in teaser cards when
@@ -76,10 +76,10 @@ let Ke = (() => {
      * technology, that they can skip the image.
      */
     get alt() {
-      return d(this, _);
+      return p(this, b);
     }
     set alt(t) {
-      s(this, _, t);
+      a(this, b, t);
     }
     /**
      * If set to false, we show a blurred version of the image as
@@ -89,10 +89,10 @@ let Ke = (() => {
      * https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62
      */
     get skipLqip() {
-      return d(this, k);
+      return p(this, k);
     }
     set skipLqip(t) {
-      s(this, k, t);
+      a(this, k, t);
     }
     /**
      * Set this to true, if you want to pass a custom focal point
@@ -100,10 +100,10 @@ let Ke = (() => {
      * https://docs.imgix.com/apis/rendering/focalpoint-crop
      */
     get customFocalPoint() {
-      return d(this, P);
+      return p(this, P);
     }
     set customFocalPoint(t) {
-      s(this, P, t);
+      a(this, P, t);
     }
     /**
      * If the lazy property is set to true, the module will automatically
@@ -113,38 +113,38 @@ let Ke = (() => {
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
      */
     get decoding() {
-      return d(this, y);
+      return p(this, y);
     }
     set decoding(t) {
-      s(this, y, t);
+      a(this, y, t);
     }
     /**
      * Set this to true, to receive visual guidance where the custom focal
      * point is currently set.
      */
     get focalPointDebug() {
-      return d(this, S);
+      return p(this, z);
     }
     set focalPointDebug(t) {
-      s(this, S, t);
+      a(this, z, t);
     }
     /**
      * Pass in a floating number between 0 (left) and 1 (right).
      */
     get focalPointX() {
-      return d(this, z);
+      return p(this, v);
     }
     set focalPointX(t) {
-      s(this, z, t);
+      a(this, v, t);
     }
     /**
      * Pass in a floating number between 0 (top) and 1 (bottom).
      */
     get focalPointY() {
-      return d(this, v);
+      return p(this, S);
     }
     set focalPointY(t) {
-      s(this, v, t);
+      a(this, S, t);
     }
     /**
      * Right now the module is heavily coupled with the image delivery
@@ -157,10 +157,10 @@ let Ke = (() => {
      * LYNE Core Team.
      */
     get imageSrc() {
-      return d(this, x);
+      return p(this, x);
     }
     set imageSrc(t) {
-      s(this, x, t);
+      a(this, x, t);
     }
     /**
      * The importance attribute is fairly new attribute which should
@@ -172,10 +172,10 @@ let Ke = (() => {
      * the fold, will set the attribute value to 'low'.
      */
     get importance() {
-      return d(this, $);
+      return p(this, $);
     }
     set importance(t) {
-      s(this, $, t);
+      a(this, $, t);
     }
     /**
      * With the support of native image lazy loading, we can now
@@ -188,10 +188,10 @@ let Ke = (() => {
      * of the initial viewport.
      */
     get loading() {
-      return d(this, w);
+      return p(this, w);
     }
     set loading(t) {
-      s(this, w, t);
+      a(this, w, t);
     }
     /**
      * With `performance.mark` you can log a timestamp associated with
@@ -207,10 +207,10 @@ let Ke = (() => {
      * here, separate words with underscores or dashes.
      */
     get performanceMark() {
-      return d(this, M);
+      return p(this, M);
     }
     set performanceMark(t) {
-      s(this, M, t);
+      a(this, M, t);
     }
     /**
      * With the pictureSizesConfig object, you can pass in information
@@ -281,10 +281,10 @@ let Ke = (() => {
      *  }
      */
     get pictureSizesConfig() {
-      return d(this, I);
+      return p(this, L);
     }
     set pictureSizesConfig(t) {
-      s(this, I, t);
+      a(this, L, t);
     }
     /** Whether the image is finished loading or failed to load. */
     get complete() {
@@ -360,16 +360,16 @@ let Ke = (() => {
             ]
           }
         ]
-      }`, qe(t);
+      }`, Le(t);
     }
     _createMediaQueryString(t) {
       let e = "";
       return t.forEach((i) => {
         const c = i.conditionFeature;
-        let L;
-        i.conditionFeatureValue.lyneDesignToken ? L = Oe[i.conditionFeatureValue.value] ?? "" : L = i.conditionFeatureValue.value;
-        const b = i.conditionOperator ? ` ${i.conditionOperator} ` : "";
-        e += `(${c}: ${L})${b}`;
+        let F;
+        i.conditionFeatureValue.lyneDesignToken ? F = Ce[i.conditionFeatureValue.value] ?? "" : F = i.conditionFeatureValue.value;
+        const f = i.conditionOperator ? ` ${i.conditionOperator} ` : "";
+        e += `(${c}: ${F})${f}`;
       }), e;
     }
     _imageLoaded() {
@@ -379,27 +379,27 @@ let Ke = (() => {
       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`
+      return O`
       <div class="sbb-image__wrapper">
-        ${this.skipLqip ? F : q`<img
+        ${this.skipLqip ? C : O`<img
               alt=""
               class="sbb-image__blurred"
               src=${t}
               width="1000"
               height="562"
-              loading=${this.loading ?? F}
-              decoding=${this.decoding ?? F}
+              loading=${this.loading ?? C}
+              decoding=${this.decoding ?? C}
             />`}
 
         <picture>
           <!-- render picture element sources -->
           ${i.map((c) => {
-        const L = c.image.height, b = c.image.width, ke = this._createMediaQueryString(c.mediaQueries);
-        return q`
+        const F = c.image.height, f = c.image.width, ge = this._createMediaQueryString(c.mediaQueries);
+        return O`
               <source
-                media=${`${ke}`}
-                sizes=${`${b}px`}
-                srcset=${`${e}&w=${b}&h=${L}&q=${this._config.nonRetinaQuality} ${b}w, ${e}&w=${b * 2}&h=${L * 2}&q=${this._config.retinaQuality} ${b * 2}w`}
+                media=${`${ge}`}
+                sizes=${`${f}px`}
+                srcset=${`${e}&w=${f}&h=${F}&q=${this._config.nonRetinaQuality} ${f}w, ${e}&w=${f * 2}&h=${F * 2}&q=${this._config.retinaQuality} ${f * 2}w`}
               ></source>`;
       })}
           <img
@@ -410,46 +410,46 @@ let Ke = (() => {
             src=${this.imageSrc}
             width="1000"
             height="562"
-            loading=${this.loading ?? F}
-            decoding=${this.decoding ?? F}
-            .fetchPriority=${this.importance ?? F}
+            loading=${this.loading ?? C}
+            decoding=${this.decoding ?? C}
+            .fetchPriority=${this.importance ?? C}
           />
         </picture>
       </div>
     `;
     }
-  }, _ = new WeakMap(), k = new WeakMap(), P = new WeakMap(), y = new WeakMap(), S = new WeakMap(), z = new WeakMap(), v = new WeakMap(), x = new WeakMap(), $ = new WeakMap(), w = new WeakMap(), M = new WeakMap(), I = new WeakMap(), m = n, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
-    D = [u(), g()], O = [u(), g({ attribute: "skip-lqip", type: Boolean, reflect: !0 })], Y = [u(), g({ attribute: "custom-focal-point", type: Boolean })], U = [g()], R = [u(), g({ attribute: "focal-point-debug", type: Boolean })], H = [u(), g({ attribute: "focal-point-x", type: Number })], G = [u(), g({ attribute: "focal-point-y", type: Number })], te = [u(), g({ attribute: "image-src" })], se = [g()], ne = [g()], pe = [u(), g({ attribute: "performance-mark" })], he = [u(), g({ attribute: "picture-sizes-config" })], be = [Fe(Qe)], p(n, null, D, { kind: "accessor", name: "alt", static: !1, private: !1, access: { has: (e) => "alt" in e, get: (e) => e.alt, set: (e, i) => {
+  }, b = new WeakMap(), k = new WeakMap(), P = new WeakMap(), y = new WeakMap(), z = new WeakMap(), v = new WeakMap(), S = new WeakMap(), x = new WeakMap(), $ = new WeakMap(), w = new WeakMap(), M = new WeakMap(), L = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    l = [u(), m()], Q = [u(), m({ attribute: "skip-lqip", type: Boolean, reflect: !0 })], B = [u(), m({ attribute: "custom-focal-point", type: Boolean })], j = [m()], U = [u(), m({ attribute: "focal-point-debug", type: Boolean })], R = [u(), m({ attribute: "focal-point-x", type: Number })], H = [u(), m({ attribute: "focal-point-y", type: Number })], G = [u(), m({ attribute: "image-src" })], ee = [m()], ae = [m()], oe = [u(), m({ attribute: "performance-mark" })], le = [u(), m({ attribute: "picture-sizes-config" })], he = [xe(Fe)], h(n, null, l, { 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 }, f, 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) => {
+    } }, metadata: t }, g, D), h(n, null, Q, { 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 }, B, 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) => {
+    } }, metadata: t }, q, _), h(n, null, B, { 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, T), p(n, null, U, { kind: "accessor", name: "decoding", static: !1, private: !1, access: { has: (e) => "decoding" in e, get: (e) => e.decoding, set: (e, i) => {
+    } }, metadata: t }, X, Y), h(n, null, j, { 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, A), p(n, null, R, { kind: "accessor", name: "focalPointDebug", static: !1, private: !1, access: { has: (e) => "focalPointDebug" in e, get: (e) => e.focalPointDebug, set: (e, i) => {
+    } }, metadata: t }, I, T), h(n, null, U, { 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 }, K, 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) => {
+    } }, metadata: t }, V, A), h(n, null, R, { 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 }, W, Z), p(n, null, G, { kind: "accessor", name: "focalPointY", static: !1, private: !1, access: { has: (e) => "focalPointY" in e, get: (e) => e.focalPointY, set: (e, i) => {
+    } }, metadata: t }, K, N), h(n, null, H, { 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 }, J, ee), p(n, null, te, { kind: "accessor", name: "imageSrc", static: !1, private: !1, access: { has: (e) => "imageSrc" in e, get: (e) => e.imageSrc, set: (e, i) => {
+    } }, metadata: t }, W, Z), h(n, null, G, { 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 }, ie, ae), p(n, null, se, { kind: "accessor", name: "importance", static: !1, private: !1, access: { has: (e) => "importance" in e, get: (e) => e.importance, set: (e, i) => {
+    } }, metadata: t }, J, E), h(n, null, ee, { 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 }, re, oe), p(n, null, ne, { kind: "accessor", name: "loading", static: !1, private: !1, access: { has: (e) => "loading" in e, get: (e) => e.loading, set: (e, i) => {
+    } }, metadata: t }, te, ie), h(n, null, ae, { 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 }, ce, le), p(n, null, pe, { kind: "accessor", name: "performanceMark", static: !1, private: !1, access: { has: (e) => "performanceMark" in e, get: (e) => e.performanceMark, set: (e, i) => {
+    } }, metadata: t }, se, re), h(n, null, oe, { 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 }, me, de), p(n, null, he, { kind: "accessor", name: "pictureSizesConfig", static: !1, private: !1, access: { has: (e) => "pictureSizesConfig" in e, get: (e) => e.pictureSizesConfig, set: (e, i) => {
+    } }, metadata: t }, ne, ce), h(n, null, le, { 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, ue), p(n, null, be, { kind: "method", name: "_imageLoaded", static: !1, private: !1, access: { has: (e) => "_imageLoaded" in e, get: (e) => e._imageLoaded }, metadata: t }, null, E), p(null, r = { value: m }, o, { kind: "class", name: m.name, metadata: t }, null, l), m = r.value, t && Object.defineProperty(m, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = [De, Ee], n.events = {
+    } }, metadata: t }, pe, de), h(n, null, he, { kind: "method", name: "_imageLoaded", static: !1, private: !1, access: { has: (e) => "_imageLoaded" in e, get: (e) => e._imageLoaded }, metadata: t }, null, o), t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.elementName = "sbb-image", n.styles = [we, Me], n.events = {
     error: "error",
     load: "load"
-  }, a(m, l), m;
+  }, n;
 })();
 export {
-  Ke as SbbImageElement
+  Te as SbbImageElement
 };

package/image.js

@@ -1,4 +1,5 @@
-import { SbbImageElement as b } from "./image/image.component.js";
+import { SbbImageElement as e } from "./image/image.component.js";
+e.define();
 export {
-  b as SbbImageElement
+  e as SbbImageElement
 };

package/image.pure.js

@@ -0,0 +1,4 @@
+import { SbbImageElement as b } from "./image/image.component.js";
+export {
+  b as SbbImageElement
+};