@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

package/icon-sidebar/icon-sidebar-container/icon-sidebar-container.component.js

@@ -0,0 +1,32 @@
+import { __esDecorate as n, __runInitializers as o } from "tslib";
+import { css as m, LitElement as c, html as b } from "lit";
+import { customElement as d } from "lit/decorators.js";
+import { sidebarContainerCommonStyle as u } from "../../sidebar/common.js";
+const h = m`:host{display:flex}`;
+let S = (() => {
+  var e;
+  let i = [d("sbb-icon-sidebar-container")], s, a = [], t, r = c;
+  return e = class extends r {
+    /** The icon-sidebar children. */
+    get sidebars() {
+      return Array.from(this.querySelectorAll?.(":scope > sbb-icon-sidebar") ?? []);
+    }
+    /** The icon-sidebar child at the start position. */
+    get start() {
+      return this.firstElementChild?.localName === "sbb-icon-sidebar" ? this.firstElementChild : null;
+    }
+    /** The icon-sidebar child at the end position. */
+    get end() {
+      return this.lastElementChild?.localName === "sbb-icon-sidebar" ? this.lastElementChild : null;
+    }
+    render() {
+      return b`<slot></slot>`;
+    }
+  }, t = e, (() => {
+    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    n(null, s = { value: t }, i, { kind: "class", name: t.name, metadata: l }, null, a), t = s.value, l && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+  })(), e.styles = [u, h], o(t, a), t;
+})();
+export {
+  S as SbbIconSidebarContainerElement
+};

package/icon-sidebar/icon-sidebar-container.js

@@ -0,0 +1,4 @@
+import { SbbIconSidebarContainerElement as o } from "./icon-sidebar-container/icon-sidebar-container.component.js";
+export {
+  o as SbbIconSidebarContainerElement
+};

package/icon-sidebar/icon-sidebar-content/icon-sidebar-content.component.js

@@ -0,0 +1,23 @@
+import { __esDecorate as n, __runInitializers as c } from "tslib";
+import { css as i, LitElement as m, html as b } from "lit";
+import { customElement as u } from "lit/decorators.js";
+import { sidebarContentCommonStyle as d } from "../../sidebar/common.js";
+const f = i`:host{flex-grow:1}`;
+let h = (() => {
+  var e;
+  let o = [u("sbb-icon-sidebar-content")], l, s = [], t, r = m;
+  return e = class extends r {
+    connectedCallback() {
+      super.connectedCallback(), this.classList.add("sbb-scrollbar");
+    }
+    render() {
+      return b`<slot></slot>`;
+    }
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    n(null, l = { value: t }, o, { kind: "class", name: t.name, metadata: a }, null, s), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [d, f], c(t, s), t;
+})();
+export {
+  h as SbbIconSidebarContentElement
+};

package/icon-sidebar/icon-sidebar-content.js

@@ -0,0 +1,4 @@
+import { SbbIconSidebarContentElement as o } from "./icon-sidebar-content/icon-sidebar-content.component.js";
+export {
+  o as SbbIconSidebarContentElement
+};

package/icon-sidebar/icon-sidebar-link/icon-sidebar-link.component.js

@@ -0,0 +1,24 @@
+import { __esDecorate as n, __runInitializers as s } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { SbbLinkBaseElement as c } from "../../core/base-elements.js";
+import { boxSizingStyles as u } from "../../core/styles.js";
+import { SbbIconNameMixin as b } from "../../icon.js";
+import { iconSidebarButtonCommonStyle as d } from "../../sidebar/common.js";
+let I = (() => {
+  var e;
+  let l = [m("sbb-icon-sidebar-link")], a, i = [], t, o = b(c);
+  return e = class extends o {
+    constructor() {
+      super(...arguments), this.tooltipPositions = ["inline-end", "inline-start"];
+    }
+    renderTemplate() {
+      return super.renderIconSlot();
+    }
+  }, t = e, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    n(null, a = { value: t }, l, { kind: "class", name: t.name, metadata: r }, null, i), t = a.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), e.styles = [u, d], s(t, i), t;
+})();
+export {
+  I as SbbIconSidebarLinkElement
+};

package/icon-sidebar/icon-sidebar-link.js

@@ -0,0 +1,4 @@
+import { SbbIconSidebarLinkElement as n } from "./icon-sidebar-link/icon-sidebar-link.component.js";
+export {
+  n as SbbIconSidebarLinkElement
+};

package/icon-sidebar/icon-sidebar.js

@@ -0,0 +1,4 @@
+import { SbbIconSidebarElement as o } from "./icon-sidebar/icon-sidebar.component.js";
+export {
+  o as SbbIconSidebarElement
+};

package/icon-sidebar-button-common-ffAscVDk.js

@@ -0,0 +1,7 @@
+import { css as o } from "lit";
+const i = o`:host{position:absolute;inset:0}`, b = o`:host{position:relative;display:block;height:100%;overflow:auto;outline-color:var(--sbb-focus-outline-color)}`, r = o`:host{display:block;outline:none!important;--sbb-icon-sidebar-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-icon-sidebar-button-transition-easing-function: var(--sbb-animation-easing);--sbb-icon-sidebar-button-dimension: var(--sbb-size-element-m);--sbb-icon-sidebar-button-border-radius: var(--sbb-border-radius-4x);--sbb-icon-sidebar-button-color: var(--sbb-color-granite);--sbb-icon-sidebar-button-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-icon-sidebar-button-current-color: var(--sbb-color-3);--sbb-icon-sidebar-button-current-border-width: var(--sbb-border-width-3x);--sbb-icon-sidebar-button-current-border-inset-block: var(--sbb-spacing-fixed-2x);--sbb-icon-sidebar-button__current-border-inset-inline-start: 0;--sbb-icon-sidebar-button__color: var(--sbb-icon-sidebar-button-color)}@media(forced-colors:active){:host{--sbb-icon-sidebar-button-current-color: Highlight !important}}@media(forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-icon-sidebar-button-color: ButtonText !important}}@media(forced-colors:active){:host(:is(:state(link),[state--link])){--sbb-icon-sidebar-button-color: LinkText !important}}@media(any-hover:hover){:host(:not(:active,:is(:state(active),[state--active])):hover){--sbb-icon-sidebar-button__hover-shift: .0625rem;--sbb-icon-sidebar-button__cursor: var(--sbb-cursor-pointer)}}.sbb-action-base{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--sbb-icon-sidebar-button-dimension);padding-block:0 calc(2 * var(--sbb-icon-sidebar-button__hover-shift, 0rem));color:var(--sbb-icon-sidebar-button__color);border-radius:var(--sbb-icon-sidebar-button-border-radius);cursor:var(--sbb-icon-sidebar-button__cursor);-webkit-user-select:none;user-select:none;transition-duration:var(--sbb-icon-sidebar-button-transition-duration);transition-timing-function:var(--sbb-icon-sidebar-button-transition-easing-function);transition-property:color,padding}:host(.sbb-active) .sbb-action-base{color:var(--sbb-icon-sidebar-button-current-color)}:host(.sbb-active) .sbb-action-base:before{content:"";display:block;position:absolute;inset-block:var(--sbb-icon-sidebar-button-current-border-inset-block);inset-inline:var(--sbb-icon-sidebar-button__current-border-inset-inline-start) 0;border-inline-start:var(--sbb-icon-sidebar-button-current-border-width) solid currentcolor}:host(:focus-visible) .sbb-action-base,.sbb-action-base:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:calc(-1 * var(--sbb-focus-outline-width) - .3125rem)}`;
+export {
+  b as a,
+  r as i,
+  i as s
+};

package/icon-sidebar.js

@@ -0,0 +1,12 @@
+import { SbbIconSidebarElement as n } from "./icon-sidebar/icon-sidebar/icon-sidebar.component.js";
+import { SbbIconSidebarButtonElement as b } from "./icon-sidebar/icon-sidebar-button/icon-sidebar-button.component.js";
+import { SbbIconSidebarContainerElement as m } from "./icon-sidebar/icon-sidebar-container/icon-sidebar-container.component.js";
+import { SbbIconSidebarContentElement as i } from "./icon-sidebar/icon-sidebar-content/icon-sidebar-content.component.js";
+import { SbbIconSidebarLinkElement as c } from "./icon-sidebar/icon-sidebar-link/icon-sidebar-link.component.js";
+export {
+  b as SbbIconSidebarButtonElement,
+  m as SbbIconSidebarContainerElement,
+  i as SbbIconSidebarContentElement,
+  n as SbbIconSidebarElement,
+  c as SbbIconSidebarLinkElement
+};

package/icon.js

@@ -0,0 +1,13 @@
+import { SbbIconElement as t } from "./icon/icon.component.js";
+import { SbbIconBase as n } from "./icon/icon-base.js";
+import { getSvgContent as b } from "./icon/icon-request.js";
+import { isValid as a, validateContent as f } from "./icon/icon-validate.js";
+import { SbbIconNameMixin as p } from "./icon/icon-name-mixin.js";
+export {
+  n as SbbIconBase,
+  t as SbbIconElement,
+  p as SbbIconNameMixin,
+  b as getSvgContent,
+  a as isValid,
+  f as validateContent
+};

package/image/image.component.js

@@ -0,0 +1,455 @@
+var fe = (o) => {
+  throw TypeError(o);
+};
+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";
+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)
+    return [];
+  let r;
+  try {
+    r = JSON.parse(o);
+  } catch {
+    return [];
+  }
+  if (!r.breakpoints || r.breakpoints.length === 0)
+    return [];
+  if (!Array.isArray(r.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);
+    });
+  }), l || m ? [] : r.breakpoints;
+}, Qe = {
+  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
+};
+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 {
+    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 = {
+        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);
+    }
+    /**
+     * 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 d(this, _);
+    }
+    set alt(t) {
+      s(this, _, t);
+    }
+    /**
+     * If set to false, we show a blurred version of the image as
+     * placeholder before the actual image shows up. This will help
+     * to improve the perceived loading performance. Read more about
+     * the idea of lqip here:
+     * https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62
+     */
+    get skipLqip() {
+      return d(this, k);
+    }
+    set skipLqip(t) {
+      s(this, k, t);
+    }
+    /**
+     * Set this to true, if you want to pass a custom focal point
+     * for the image. See full documentation here:
+     * https://docs.imgix.com/apis/rendering/focalpoint-crop
+     */
+    get customFocalPoint() {
+      return d(this, P);
+    }
+    set customFocalPoint(t) {
+      s(this, P, t);
+    }
+    /**
+     * If the lazy property is set to true, the module will automatically
+     * change the decoding to async, otherwise the decoding is set to auto
+     * which leaves the handling up to the browser. Read more about the
+     * decoding attribute here:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
+     */
+    get decoding() {
+      return d(this, y);
+    }
+    set decoding(t) {
+      s(this, y, t);
+    }
+    /**
+     * Set this to true, to receive visual guidance where the custom focal
+     * point is currently set.
+     */
+    get focalPointDebug() {
+      return d(this, S);
+    }
+    set focalPointDebug(t) {
+      s(this, S, t);
+    }
+    /**
+     * Pass in a floating number between 0 (left) and 1 (right).
+     */
+    get focalPointX() {
+      return d(this, z);
+    }
+    set focalPointX(t) {
+      s(this, z, t);
+    }
+    /**
+     * Pass in a floating number between 0 (top) and 1 (bottom).
+     */
+    get focalPointY() {
+      return d(this, v);
+    }
+    set focalPointY(t) {
+      s(this, v, t);
+    }
+    /**
+     * Right now the module is heavily coupled with the image delivery
+     * service imgix and depends on the original files being stored
+     * inside AEM. You can pass in any https://cdn.img.sbb.ch img
+     * src address you find on sbb.ch to play around with it. Just
+     * strip the url parameters and paste in the plain file address.
+     * If you want to know how to best work with this module with
+     * images coming from a different source, please contact the
+     * LYNE Core Team.
+     */
+    get imageSrc() {
+      return d(this, x);
+    }
+    set imageSrc(t) {
+      s(this, x, t);
+    }
+    /**
+     * The importance attribute is fairly new attribute which should
+     * help the browser decide which resources it should prioritise
+     * during page load. We will set the attribute value based on the
+     * value, we receive in the loading attribute. 'eager', which we use
+     * for the largest image within the initial viewport, will set the
+     * attribute value to 'high'. 'lazy', which we use for images below
+     * the fold, will set the attribute value to 'low'.
+     */
+    get importance() {
+      return d(this, $);
+    }
+    set importance(t) {
+      s(this, $, t);
+    }
+    /**
+     * With the support of native image lazy loading, we can now
+     * decide whether we want to load the image immediately or only
+     * once it is close to the visible viewport. The value eager is
+     * best used for images within the initial viewport. We want to
+     * load these images as fast as possible to improve the Core Web
+     * Vitals values. lazy on the other hand works best for images
+     * which are further down the page or invisible during the loading
+     * of the initial viewport.
+     */
+    get loading() {
+      return d(this, w);
+    }
+    set loading(t) {
+      s(this, w, t);
+    }
+    /**
+     * With `performance.mark` you can log a timestamp associated with
+     * the name you define in performanceMark when a certain event is
+     * happening. In our case we will log the `performance.mark` into
+     * the PerformanceEntry API once the image is fully loaded.
+     * Performance monitoring tools like SpeedCurve or Lighthouse are
+     * then able to grab these entries from the PerformanceEntry API
+     * and give us additional information and insights about our page
+     * loading behaviour. We are then also able to monitor these
+     * values over a long period to see if our performance
+     * increases or decreases over time. Best to use lowercase strings
+     * here, separate words with underscores or dashes.
+     */
+    get performanceMark() {
+      return d(this, M);
+    }
+    set performanceMark(t) {
+      s(this, M, t);
+    }
+    /**
+     * With the pictureSizesConfig object, you can pass in information
+     * into image about what kind of source elements should get
+     * rendered. mediaQueries accepts multiple Media Query entries
+     * which can get combined by defining a conditionOperator.
+     * Type is: stringified InterfaceImageAttributesSizesConfig-Object
+     * An example could look like this:
+     * {
+     *    "breakpoints": [
+     *      {
+     *        "image": {
+     *          "height": "675",
+     *          "width": "1200"
+     *        },
+     *        "mediaQueries": [
+     *          {
+     *            "conditionFeature": "min-width",
+     *            "conditionFeatureValue": {
+     *              "lyneDesignToken": true,
+     *              "value": "sbb-breakpoint-large-min"
+     *            },
+     *            "conditionOperator": false
+     *          }
+     *        ]
+     *      },
+     *      {
+     *        "image": {
+     *          "height": "549",
+     *          "width": "976"
+     *        },
+     *        "mediaQueries": [
+     *          {
+     *            "conditionFeature": "min-width",
+     *            "conditionFeatureValue": {
+     *              "lyneDesignToken": true,
+     *              "value": "sbb-breakpoint-small-min"
+     *            },
+     *            "conditionOperator": false
+     *          }
+     *        ]
+     *      },
+     *      {
+     *        "image": {
+     *          "height": "180",
+     *          "width": "320"
+     *        },
+     *        "mediaQueries": [
+     *          {
+     *            "conditionFeature": "max-width",
+     *            "conditionFeatureValue": {
+     *              "lyneDesignToken": true,
+     *              "value": "sbb-breakpoint-small-max"
+     *            },
+     *            "conditionOperator": "and"
+     *          },
+     *          {
+     *            "conditionFeature": "orientation",
+     *            "conditionFeatureValue": {
+     *              "lyneDesignToken": false,
+     *              "value": "landscape"
+     *            },
+     *            "conditionOperator": false
+     *          }
+     *        ]
+     *      }
+     *    ]
+     *  }
+     */
+    get pictureSizesConfig() {
+      return d(this, I);
+    }
+    set pictureSizesConfig(t) {
+      s(this, I, t);
+    }
+    /** Whether the image is finished loading or failed to load. */
+    get complete() {
+      return this.shadowRoot?.querySelector?.(".sbb-image__img")?.complete ?? !1;
+    }
+    updated(t) {
+      super.updated(t), this._captionElement && (this._linksInCaption = this._captionElement.querySelectorAll("a"), this._linksInCaption && this._addFocusAbilityToLinksInCaption());
+    }
+    _logPerformanceMarks() {
+      this.performanceMark && (performance.clearMarks(this.performanceMark), performance.mark(this.performanceMark));
+    }
+    _addFocusAbilityToLinksInCaption() {
+      this._linksInCaption?.forEach((t) => {
+        t.removeAttribute("tabindex");
+      });
+    }
+    _prepareImageUrl(t, e = !1) {
+      if (!t || t === "")
+        return "";
+      const i = !!t.match(/^\w+:\/\//), c = i ? new URL(t) : new URL(`http://noop/${t}`);
+      return e ? (c.searchParams.append("blur", "100"), c.searchParams.append("w", "100"), c.searchParams.append("h", "56")) : c.searchParams.append("auto", "format,compress,cs=tinysrgb"), this.customFocalPoint && (c.searchParams.append("fit", "crop"), c.searchParams.append("crop", "focalpoint"), c.searchParams.append("fp-x", this.focalPointX.toString(10)), c.searchParams.append("fp-y", this.focalPointY.toString(10)), c.searchParams.append("fp-z", "1")), this.focalPointDebug && c.searchParams.append("fp-debug", "true"), i ? c.href : c.pathname.substring(1) + c.search;
+    }
+    _preparePictureSizeConfigs() {
+      let t;
+      return this.pictureSizesConfig ? t = this.pictureSizesConfig : t = `{
+        "breakpoints": [
+          {
+            "image": {
+              "height": 675,
+              "width": 1200
+            },
+            "mediaQueries": [
+              {
+                "conditionFeature": "min-width",
+                "conditionFeatureValue": {
+                  "lyneDesignToken": true,
+                  "value": "sbb-breakpoint-large-min"
+                },
+                "conditionOperator": false
+              }
+            ]
+          },
+          {
+            "image": {
+              "height": 549,
+              "width": 976
+            },
+            "mediaQueries": [
+              {
+                "conditionFeature": "min-width",
+                "conditionFeatureValue": {
+                  "lyneDesignToken": true,
+                  "value": "sbb-breakpoint-small-min"
+                },
+                "conditionOperator": false
+              }
+            ]
+          },
+          {
+            "image": {
+              "height": 180,
+              "width": 320
+            },
+            "mediaQueries": [
+              {
+                "conditionFeature": "max-width",
+                "conditionFeatureValue": {
+                  "lyneDesignToken": true,
+                  "value": "sbb-breakpoint-zero-max"
+                },
+                "conditionOperator": false
+              }
+            ]
+          }
+        ]
+      }`, qe(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}`;
+      }), e;
+    }
+    _imageLoaded() {
+      this._logPerformanceMarks(), this.internals.states.add("loaded"), this.dispatchEvent(new Event("load"));
+    }
+    render() {
+      const t = this._prepareImageUrl(this.imageSrc, !0), e = this._prepareImageUrl(this.imageSrc, !1);
+      this.loading === "lazy" && (this.decoding = "async", this.importance = "low");
+      const i = this._preparePictureSizeConfigs();
+      return q`
+      <div class="sbb-image__wrapper">
+        ${this.skipLqip ? F : q`<img
+              alt=""
+              class="sbb-image__blurred"
+              src=${t}
+              width="1000"
+              height="562"
+              loading=${this.loading ?? F}
+              decoding=${this.decoding ?? F}
+            />`}
+
+        <picture>
+          <!-- render picture element sources -->
+          ${i.map((c) => {
+        const L = c.image.height, b = c.image.width, ke = this._createMediaQueryString(c.mediaQueries);
+        return q`
+              <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`}
+              ></source>`;
+      })}
+          <img
+            alt=${this.alt || ""}
+            @load=${this._imageLoaded}
+            @error=${() => this.dispatchEvent(new Event("error"))}
+            class="sbb-image__img"
+            src=${this.imageSrc}
+            width="1000"
+            height="562"
+            loading=${this.loading ?? F}
+            decoding=${this.decoding ?? F}
+            .fetchPriority=${this.importance ?? F}
+          />
+        </picture>
+      </div>
+    `;
+    }
+  }, _ = 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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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) => {
+      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 = {
+    error: "error",
+    load: "load"
+  }, a(m, l), m;
+})();
+export {
+  Ke as SbbImageElement
+};

package/image.js

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