@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/image.js

@@ -1,66 +1,66 @@
-import { css as y, LitElement as k, html as h, nothing as l } from "lit";
-import { property as s, eventOptions as v, customElement as $ } from "lit/decorators.js";
-import { ref as _ } from "lit/directives/ref.js";
+import { css as y, LitElement as _, html as d, nothing as l } 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, B = 839, O = 840, F = 1023, D = 1024, Q = 1279, C = 1280, E = 1439, L = 1440, j = 2579, R = 16, H = 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 d = Object.freeze, g = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (t, e, r, i) => {
-  for (var n = i > 1 ? void 0 : i ? T(e, r) : e, p = t.length - 1, c; p >= 0; p--)
-    (c = t[p]) && (n = (i ? c(e, r, n) : c(n)) || n);
-  return i && n && g(e, r, n), n;
-}, A = (t, e) => d(g(t, "raw", { value: d(t.slice()) })), u;
-const V = (t) => {
-  if (!t || t.length === 0)
+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, 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, o = (e, t, r, i) => {
+  for (var n = i > 1 ? void 0 : i ? A(t, r) : t, p = e.length - 1, b; p >= 0; p--)
+    (b = e[p]) && (n = (i ? b(t, r, n) : b(n)) || n);
+  return i && n && u(t, r, n), n;
+}, U = (e, t) => h(u(e, "raw", { value: h(e.slice()) })), g;
+const H = (e) => {
+  if (!e || e.length === 0)
     return [];
-  let e;
+  let t;
   try {
-    e = JSON.parse(t);
+    t = JSON.parse(e);
   } catch {
     return [];
   }
-  if (!e.breakpoints || e.breakpoints.length === 0)
+  if (!t.breakpoints || t.breakpoints.length === 0)
     return [];
-  if (!Array.isArray(e.breakpoints))
+  if (!Array.isArray(t.breakpoints))
     return [];
   let r = !1, i = !1;
   const n = ["image", "mediaQueries"];
-  return e.breakpoints.forEach((p) => {
-    const c = Object.keys(p);
-    c.forEach((m) => {
+  return t.breakpoints.forEach((p) => {
+    const b = Object.keys(p);
+    b.forEach((m) => {
       n.includes(m) || (r = !0);
     }), n.forEach((m) => {
-      c.includes(m) || (i = !0);
+      b.includes(m) || (i = !0);
     });
-  }), r || i ? [] : e.breakpoints;
-}, q = {
+  }), r || i ? [] : t.breakpoints;
+}, j = {
   once: !0,
   passive: !0
-}, b = (t) => t / R, U = {
-  "sbb-breakpoint-zero-min": b(w),
-  "sbb-breakpoint-zero-max": b(S),
-  "sbb-breakpoint-micro-min": b(P),
-  "sbb-breakpoint-micro-max": b(M),
-  "sbb-breakpoint-small-min": b(z),
-  "sbb-breakpoint-small-max": b(B),
-  "sbb-breakpoint-medium-min": b(O),
-  "sbb-breakpoint-medium-max": b(F),
-  "sbb-breakpoint-large-min": b(D),
-  "sbb-breakpoint-large-max": b(Q),
-  "sbb-breakpoint-wide-min": b(C),
-  "sbb-breakpoint-wide-max": b(E),
-  "sbb-breakpoint-ultra-min": b(L),
-  "sbb-breakpoint-ultra-max": b(j)
+}, c = (e) => e / I, V = {
+  "sbb-breakpoint-zero-min": c(w),
+  "sbb-breakpoint-zero-max": c(S),
+  "sbb-breakpoint-micro-min": c(P),
+  "sbb-breakpoint-micro-max": c(M),
+  "sbb-breakpoint-small-min": c(z),
+  "sbb-breakpoint-small-max": c(C),
+  "sbb-breakpoint-medium-min": c(B),
+  "sbb-breakpoint-medium-max": c(L),
+  "sbb-breakpoint-large-min": c(O),
+  "sbb-breakpoint-large-max": c(Q),
+  "sbb-breakpoint-wide-min": c(F),
+  "sbb-breakpoint-wide-max": c(D),
+  "sbb-breakpoint-ultra-min": c(E),
+  "sbb-breakpoint-ultra-max": c(T)
 };
-let a = class extends k {
+let a = class extends _ {
   constructor() {
-    super(...arguments), this.c = {
+    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 t, e, r;
-    return ((r = (e = (t = this.shadowRoot) == null ? void 0 : t.querySelector) == null ? void 0 : e.call(t, ".sbb-image__img")) == null ? void 0 : r.complete) ?? !1;
+    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(
@@ -68,34 +68,34 @@ let a = class extends k {
       !!x("sbb-teaser-hero", this) || !!this.closest("sbb-teaser-paid")
     );
   }
-  updated(t) {
-    super.updated(t), this.a && (this.b = this.a.querySelectorAll("a"), this.b && this.e());
+  updated(e) {
+    super.updated(e), this._captionElement && (this._linksInCaption = this._captionElement.querySelectorAll("a"), this._linksInCaption && this._addFocusAbilityToLinksInCaption());
   }
-  async firstUpdated(t) {
-    super.firstUpdated(t), await this.updateComplete, this.complete && this.toggleAttribute("data-loaded", !0);
+  async firstUpdated(e) {
+    super.firstUpdated(e), await this.updateComplete, this.complete && this.toggleAttribute("data-loaded", !0);
   }
-  f() {
+  _logPerformanceMarks() {
     this.performanceMark && (performance.clearMarks(this.performanceMark), performance.mark(this.performanceMark));
   }
-  g(t) {
-    const e = U[t];
-    return e ? `${e}rem` : "";
+  _matchMediaQueryDesignToken(e) {
+    const t = V[e];
+    return t ? `${t}rem` : "";
   }
-  e() {
-    var t;
-    (t = this.b) == null || t.forEach((e) => {
-      e.removeAttribute("tabindex");
+  _addFocusAbilityToLinksInCaption() {
+    var e;
+    (e = this._linksInCaption) == null || e.forEach((t) => {
+      t.removeAttribute("tabindex");
     });
   }
-  d(t, e = !1) {
-    if (!t || t === "")
+  _prepareImageUrl(e, t = !1) {
+    if (!e || e === "")
       return "";
-    const r = !!t.match(/^\w+:\/\//), i = r ? new URL(t) : new URL(`http://noop/${t}`);
-    return e ? (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;
+    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;
   }
-  h() {
-    let t;
-    return this.pictureSizesConfig ? t = this.pictureSizesConfig : t = `{
+  _preparePictureSizeConfigs() {
+    let e;
+    return this.pictureSizesConfig ? e = this.pictureSizesConfig : e = `{
         "breakpoints": [
           {
             "image": {
@@ -146,25 +146,25 @@ let a = class extends k {
             ]
           }
         ]
-      }`, V(t);
+      }`, H(e);
   }
-  i(t) {
-    let e = "";
-    return t.forEach((r) => {
+  _createMediaQueryString(e) {
+    let t = "";
+    return e.forEach((r) => {
       const i = r.conditionFeature;
       let n;
-      r.conditionFeatureValue.lyneDesignToken ? n = this.g(r.conditionFeatureValue.value) : n = r.conditionFeatureValue.value;
+      r.conditionFeatureValue.lyneDesignToken ? n = this._matchMediaQueryDesignToken(r.conditionFeatureValue.value) : n = r.conditionFeatureValue.value;
       const p = r.conditionOperator ? ` ${r.conditionOperator} ` : "";
-      e += `(${i}: ${n})${p}`;
-    }), e;
+      t += `(${i}: ${n})${p}`;
+    }), t;
   }
-  j() {
-    this.f(), this.toggleAttribute("data-loaded", !0), this.dispatchEvent(new Event("load"));
+  _imageLoaded() {
+    this._logPerformanceMarks(), this.toggleAttribute("data-loaded", !0), this.dispatchEvent(new Event("load"));
   }
   render() {
-    let { caption: t } = this, e = "";
-    const r = this.d(this.imageSrc, !0), i = this.d(this.imageSrc, !1);
-    this.loading === "lazy" && (this.decoding = "async", this.importance = "low"), this.copyright && (t = `${this.caption} ©${this.copyright}`, e = `{
+    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 = `{
         "@context": "https://schema.org",
         "@type": "Photograph",
         "image": "${this.imageSrc}",
@@ -173,11 +173,11 @@ let a = class extends k {
           "name": "${this.copyright}"
         }
       }`);
-    const n = this.h();
-    return h`
+    const n = this._preparePictureSizeConfigs();
+    return d`
       <figure class="sbb-image__figure">
         <div class="sbb-image__wrapper">
-          ${this.skipLqip ? l : h`<img
+          ${this.skipLqip ? l : d`<img
                 alt=""
                 class="sbb-image__blurred"
                 src=${r}
@@ -190,18 +190,18 @@ let a = class extends k {
           <picture>
             <!-- render picture element sources -->
             ${n.map((p) => {
-      const c = p.image.height, m = p.image.width, f = this.i(p.mediaQueries);
+      const b = p.image.height, m = p.image.width, f = this._createMediaQueryString(p.mediaQueries);
       return [
-        h` <source
+        d` <source
                   media=${`${f}`}
                   sizes=${`${m}px`}
-                  srcset=${`${i}&w=${m}&h=${c}&q=${this.c.nonRetinaQuality} ${m}w, ${i}&w=${m * 2}&h=${c * 2}&q=${this.c.retinaQuality} ${m * 2}w`}
+                  srcset=${`${i}&w=${m}&h=${b}&q=${this._config.nonRetinaQuality} ${m}w, ${i}&w=${m * 2}&h=${b * 2}&q=${this._config.retinaQuality} ${m * 2}w`}
                 ></source>`
       ];
     })}
             <img
               alt=${this.alt || ""}
-              @load=${this.j}
+              @load=${this._imageLoaded}
               @error=${() => this.dispatchEvent(new Event("error"))}
               class="sbb-image__img"
               src=${this.imageSrc}
@@ -213,19 +213,19 @@ let a = class extends k {
             />
           </picture>
         </div>
-        ${t ? h`<figcaption
+        ${e ? d`<figcaption
               class="sbb-image__caption"
-              .innerHTML=${t}
-              ${_((p) => {
-      this.a = p;
+              .innerHTML=${e}
+              ${$((p) => {
+      this._captionElement = p;
     })}
             ></figcaption>` : l}
-        ${e ? h(u || (u = A(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), e) : l}
+        ${t ? d(g || (g = U(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), t) : l}
       </figure>
     `;
   }
 };
-a.styles = H;
+a.styles = R;
 a.events = {
   error: "error",
   load: "load"
@@ -282,10 +282,10 @@ o([
   s({ attribute: "aspect-ratio", reflect: !0 })
 ], a.prototype, "aspectRatio", 2);
 o([
-  v(q)
-], a.prototype, "j", 1);
+  k(j)
+], a.prototype, "_imageLoaded", 1);
 a = o([
-  $("sbb-image")
+  v("sbb-image")
 ], a);
 export {
   a as SbbImageElement

package/journey-header.js

@@ -1,26 +1,26 @@
-import { css as m, LitElement as d, html as p, nothing as c } from "lit";
-import { property as n, customElement as h } from "lit/decorators.js";
+import { css as g, LitElement as m, html as p, nothing as c } from "lit";
+import { property as t, customElement as d } from "lit/decorators.js";
 import { SbbLanguageController as u } from "./core/controllers.js";
-import { getDocumentWritingMode as g } from "./core/dom.js";
+import { getDocumentWritingMode as h } from "./core/dom.js";
 import { i18nConnectionFrom as y, i18nConnectionTo as f, i18nConnectionRoundtrip as v } from "./core/i18n.js";
-import { SbbNegativeMixin as x } from "./core/mixins.js";
+import { SbbNegativeMixin as _ } from "./core/mixins.js";
 import "./icon.js";
 import "./screen-reader-only.js";
 import "./title.js";
-const $ = m`*,:before,:after{box-sizing:border-box}:host{--sbb-journey-header-gap: var(--sbb-spacing-fixed-1x);display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}sbb-title{margin:0}sbb-icon{min-width:var(--sbb-size-icon-ui-small)}.sbb-journey-header{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sbb-journey-header-gap);width:fit-content}.sbb-journey-header[dir=rtl] sbb-icon{transform:rotate(-180deg)}`;
-var j = Object.defineProperty, w = Object.getOwnPropertyDescriptor, t = (s, o, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? w(o, a) : o, b = s.length - 1, l; b >= 0; b--)
+const x = g`*,:before,:after{box-sizing:border-box}:host{--sbb-journey-header-gap: var(--sbb-spacing-fixed-1x);display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}sbb-title{margin:0}sbb-icon{min-width:var(--sbb-size-icon-ui-small)}.sbb-journey-header{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sbb-journey-header-gap);width:fit-content}.sbb-journey-header[dir=rtl] sbb-icon{transform:rotate(-180deg)}`;
+var $ = Object.defineProperty, j = Object.getOwnPropertyDescriptor, n = (s, o, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? j(o, a) : o, b = s.length - 1, l; b >= 0; b--)
     (l = s[b]) && (r = (i ? l(o, a, r) : l(r)) || r);
-  return i && r && j(o, a, r), r;
+  return i && r && $(o, a, r), r;
 };
-const _ = /* @__PURE__ */ new Map([
+const w = /* @__PURE__ */ new Map([
   ["s", "6"],
   ["m", "5"],
   ["l", "4"]
 ]);
-let e = class extends x(d) {
+let e = class extends _(m) {
   constructor() {
-    super(...arguments), this.level = "3", this.size = "m", this.a = new u(this);
+    super(...arguments), this.level = "3", this.size = "m", this._language = new u(this);
   }
   render() {
     const s = this.roundTrip ? "arrows-long-right-left-small" : "arrow-long-right-small";
@@ -28,23 +28,23 @@ let e = class extends x(d) {
       <sbb-title
         level=${this.level || c}
         ?negative=${this.negative}
-        visual-level=${_.get(this.size)}
+        visual-level=${w.get(this.size)}
       >
-        <span class="sbb-journey-header" dir=${g()}>
+        <span class="sbb-journey-header" dir=${h()}>
           <span class="sbb-journey-header__origin">
             <sbb-screen-reader-only>
-              ${y[this.a.current]}&nbsp;
+              ${y[this._language.current]}&nbsp;
             </sbb-screen-reader-only>
             ${this.origin}
           </span>
           <sbb-icon name=${s}></sbb-icon>
           <span class="sbb-journey-header__destination">
             <sbb-screen-reader-only>
-              &nbsp;${f[this.a.current]}&nbsp;
+              &nbsp;${f[this._language.current]}&nbsp;
             </sbb-screen-reader-only>
             ${this.destination}
             ${this.roundTrip ? p` <sbb-screen-reader-only>
-                  ${v(this.origin)[this.a.current]}
+                  ${v(this.origin)[this._language.current]}
                 </sbb-screen-reader-only>` : c}
           </span>
         </span>
@@ -52,24 +52,24 @@ let e = class extends x(d) {
     `;
   }
 };
-e.styles = $;
-t([
-  n()
+e.styles = x;
+n([
+  t()
 ], e.prototype, "origin", 2);
-t([
-  n()
+n([
+  t()
 ], e.prototype, "destination", 2);
-t([
-  n({ attribute: "round-trip", type: Boolean })
+n([
+  t({ attribute: "round-trip", type: Boolean })
 ], e.prototype, "roundTrip", 2);
-t([
-  n()
+n([
+  t()
 ], e.prototype, "level", 2);
-t([
-  n({ reflect: !0 })
+n([
+  t({ reflect: !0 })
 ], e.prototype, "size", 2);
-e = t([
-  h("sbb-journey-header")
+e = n([
+  d("sbb-journey-header")
 ], e);
 export {
   e as SbbJourneyHeaderElement

package/map-container.js

@@ -1,27 +1,27 @@
-import { css as m, LitElement as p, html as e, nothing as l } from "lit";
+import { css as m, LitElement as p, html as n, nothing as l } from "lit";
 import { property as h, state as u, customElement as v } from "lit/decorators.js";
 import { ref as d } from "lit/directives/ref.js";
 import { SbbLanguageController as g } from "./core/controllers.js";
-import { i18nMapContainerButtonLabel as w } from "./core/i18n.js";
-import { AgnosticIntersectionObserver as _ } from "./core/observers.js";
+import { i18nMapContainerButtonLabel as _ } from "./core/i18n.js";
+import { AgnosticIntersectionObserver as w } from "./core/observers.js";
 import "./button/tertiary-button.js";
 const f = m`*,:before,:after{box-sizing:border-box}:host{--sbb-map-container-map-height-zero: 18.4375rem;--sbb-map-container-map-height-small: 20rem;--sbb-map-container-sidebar-width: 25rem;--sbb-map-container-sidebar-background-color: var(--sbb-color-white);--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-zero) + var(--sbb-border-radius-4x) );--sbb-map-container-border-radius: var(--sbb-border-radius-4x);--sbb-map-container-animation-duration: var(--sbb-animation-duration-4x);display:block}@media (min-width: 37.5rem){:host{--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius) )}}@media (min-width: 80rem){:host{--sbb-map-container-sidebar-width: 30rem}}.sbb-map-container{display:grid;grid-template-rows:auto auto;height:100%}@media (min-width: 52.5rem){.sbb-map-container{grid-template-columns:max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));height:calc(100vh - var(--sbb-map-container-margin-start, var(--sbb-header-height)));overflow:hidden}}.sbb-map-container__sidebar-button{position:fixed;left:50%;inset-block-end:var(--sbb-spacing-fixed-5x);visibility:hidden;opacity:0;transform:translate(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));transition:opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration),transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing)}:host([data-scroll-up-button-visible]) .sbb-map-container__sidebar-button{transition:visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),transform var(--sbb-map-container-animation-duration) ease-out;visibility:visible;opacity:1;transform:translate(-50%) translateY(0)}@media (min-width: 52.5rem){.sbb-map-container__sidebar-button{display:none}}.sbb-map-container__sidebar{--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);grid-column:1/3;grid-row:2/3;width:100%;height:calc(100% + var(--sbb-map-container-border-radius));overflow:hidden auto;position:relative;z-index:2;border-start-end-radius:var(--sbb-map-container-border-radius);border-start-start-radius:var(--sbb-map-container-border-radius);margin-block-start:calc(var(--sbb-map-container-border-radius) * -1);background-color:var(--sbb-map-container-sidebar-background-color)}.sbb-map-container__sidebar::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-map-container__sidebar::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-map-container__sidebar::-webkit-scrollbar-button,.sbb-map-container__sidebar::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-map-container__sidebar{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media (min-width: 52.5rem){.sbb-map-container__sidebar{grid-column:1/2;grid-row:1/3;border-radius:0;margin-block-start:0;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-color-cloud)}}.sbb-map-container__map{position:sticky;inset-block-start:0;inset-inline:0;z-index:1;grid-row:1/2;grid-column:1/3;height:var(--sbb-map-container-map-height)}@media (min-width: 52.5rem){.sbb-map-container__map{grid-row:1/3;grid-column:2/3;height:100%;position:relative}}`;
-var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (r, t, i, b) => {
-  for (var a = b > 1 ? void 0 : b ? x(t, i) : t, s = r.length - 1, n; s >= 0; s--)
-    (n = r[s]) && (a = (b ? n(t, i, a) : n(a)) || a);
+var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (r, t, i, b) => {
+  for (var a = b > 1 ? void 0 : b ? y(t, i) : t, s = r.length - 1, e; s >= 0; s--)
+    (e = r[s]) && (a = (b ? e(t, i, a) : e(a)) || a);
   return b && a && k(t, i, a), a;
 };
 let o = class extends p {
   constructor() {
-    super(...arguments), this.hideScrollUpButton = !1, this.c = !1, this.e = new g(this), this.b = new _(
-      (r) => this.f(r)
+    super(...arguments), this.hideScrollUpButton = !1, this._scrollUpButtonVisible = !1, this._language = new g(this), this._observer = new w(
+      (r) => this._toggleButtonVisibilityOnIntersect(r)
     );
   }
   /**
    * Button click callback to trigger the scroll to container top
    * @private
    */
-  g() {
+  _onScrollButtonClick() {
     this.scrollIntoView({ behavior: "smooth" });
   }
   /**
@@ -29,44 +29,44 @@ let o = class extends p {
    * @param entries
    * @private
    */
-  f(r) {
+  _toggleButtonVisibilityOnIntersect(r) {
     r.forEach((t) => {
       const i = !t.isIntersecting;
-      this.toggleAttribute("data-scroll-up-button-visible", i), this.c = i;
+      this.toggleAttribute("data-scroll-up-button-visible", i), this._scrollUpButtonVisible = i;
     });
   }
   connectedCallback() {
-    super.connectedCallback(), this.d();
+    super.connectedCallback(), this._updateIntersectionObserver();
   }
-  d() {
-    this.b.disconnect(), !this.hideScrollUpButton && this.a && this.b.observe(this.a);
+  _updateIntersectionObserver() {
+    this._observer.disconnect(), !this.hideScrollUpButton && this._intersector && this._observer.observe(this._intersector);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.b.disconnect();
+    super.disconnectedCallback(), this._observer.disconnect();
   }
   render() {
-    return e`
+    return n`
       <div class="sbb-map-container">
         <div class="sbb-map-container__sidebar">
-          ${this.hideScrollUpButton ? l : e`<span
+          ${this.hideScrollUpButton ? l : n`<span
                 ${d((r) => {
-      this.a !== r && (this.a = r, this.d());
+      this._intersector !== r && (this._intersector = r, this._updateIntersectionObserver());
     })}
               ></span>`}
 
           <slot></slot>
 
-          ${this.hideScrollUpButton ? l : e`<sbb-tertiary-button
+          ${this.hideScrollUpButton ? l : n`<sbb-tertiary-button
                 class="sbb-map-container__sidebar-button"
                 size="l"
                 icon-name="location-pin-map-small"
                 type="button"
-                @click=${() => this.g()}
+                @click=${() => this._onScrollButtonClick()}
                 ${d((r) => {
-      r && (r.inert = !this.c);
+      r && (r.inert = !this._scrollUpButtonVisible);
     })}
               >
-                ${w[this.e.current]}
+                ${_[this._language.current]}
               </sbb-tertiary-button>`}
         </div>
         <div class="sbb-map-container__map">
@@ -82,7 +82,7 @@ c([
 ], o.prototype, "hideScrollUpButton", 2);
 c([
   u()
-], o.prototype, "c", 2);
+], o.prototype, "_scrollUpButtonVisible", 2);
 o = c([
   v("sbb-map-container")
 ], o);