@sbb-esta/lyne-elements 1.16.0 → 2.0.1

package/core/testing.js

@@ -1,5 +1,5 @@
-import { isSafari as l } from "./dom.js";
-class v {
+import { isSafari as m } from "./dom.js";
+class p {
   get count() {
     return this._count;
   }
@@ -12,13 +12,13 @@ class v {
   get lastEvent() {
     return this.events.length ? this.events[this.events.length - 1] : null;
   }
-  constructor(e, t = null) {
-    this._event = e, this._target = t, this._count = 0, this._events = [], this._promiseEventMap = /* @__PURE__ */ new Map(), this._target || (this._target = document), this._listenForEvent();
+  constructor(e, i = null, r = null) {
+    this._event = e, this._target = i, this._options = r, this._count = 0, this._events = [], this._promiseEventMap = /* @__PURE__ */ new Map(), this._target || (this._target = document), this._listenForEvent();
   }
   calledOnce(e) {
     return this.calledTimes(1, e);
   }
-  calledTimes(e, t = 2e3) {
+  calledTimes(e, i = 2e3) {
     if (this.count > e)
       return Promise.reject(`Event has been emitted more than expected (expected ${e}, actual ${this.count}`);
     if (this.count === e)
@@ -27,91 +27,82 @@ class v {
       return this._promiseEventMap.get(e).promise;
     {
       let r, s;
-      const o = {
-        promise: new Promise((a, m) => {
-          r = a, s = m;
+      const n = {
+        promise: new Promise((a, l) => {
+          r = a, s = l;
         }),
         resolve: r,
         reject: s
       };
-      return this._promiseEventMap.set(e, o), this._wrapPromiseWithTimeout(o, e, t);
+      return this._promiseEventMap.set(e, n), this._wrapPromiseWithTimeout(n, e, i);
     }
   }
-  _wrapPromiseWithTimeout(e, t, r) {
-    const s = setTimeout(() => e.reject(`awaiting calledTimes(${t}) results in timeout`), r);
+  _wrapPromiseWithTimeout(e, i, r) {
+    const s = setTimeout(() => e.reject(`awaiting calledTimes(${i}) results in timeout`), r);
     return e.promise.then(() => clearTimeout(s)), e.promise;
   }
   _listenForEvent() {
     var e;
-    (e = this._target) == null || e.addEventListener(this._event, (t) => {
+    (e = this._target) == null || e.addEventListener(this._event, (i) => {
       var r;
-      this._events.push(t), this._count++, (r = this._promiseEventMap.get(this.count)) == null || r.resolve(t);
-    });
+      this._events.push(i), this._count++, (r = this._promiseEventMap.get(this.count)) == null || r.resolve(i);
+    }, this._options ?? void 0);
   }
 }
-const p = (i, e, t) => {
-  if (i)
-    return Mocha.describe(e, t);
-}, g = (i, e, t) => {
-  if (i)
-    return Mocha.test(e, t);
+const v = (t, e, i) => {
+  if (t)
+    return Mocha.describe(e, i);
+}, g = (t, e, i) => {
+  if (t)
+    return Mocha.test(e, i);
 };
-function w(i) {
-  window.scrollTo(i), document.dispatchEvent(new Event("scroll"));
+function w(t) {
+  window.scrollTo(t), document.dispatchEvent(new Event("scroll"));
 }
-async function f(i, e = 30, t = 2 * 1e3) {
+async function f(t, e = 30, i = 2 * 1e3) {
   const r = /* @__PURE__ */ new Date();
   let s = 0;
-  function n() {
-    return s++, i();
+  function o() {
+    return s++, t();
   }
-  for (; !await n() && r.getTime() + t >= (/* @__PURE__ */ new Date()).getTime(); )
-    await new Promise((o) => setTimeout(o, e));
-  return r.getTime() + t < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(`waitForCondition timeout: ${i.toString()}, attempts: ${s}, start: ${r.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`) : Promise.resolve(!0);
-}
-function E(i, e, t = 1e3) {
-  return new Promise((r, s) => {
-    const n = AbortSignal.timeout(t), o = () => s(`Timeout of ${t} reached`);
-    n.addEventListener("abort", o), i.addEventListener(e, () => {
-      n.removeEventListener("abort", o), r();
-    }, { passive: !0, signal: n });
-  });
+  for (; !await o() && r.getTime() + i >= (/* @__PURE__ */ new Date()).getTime(); )
+    await new Promise((n) => setTimeout(n, e));
+  return r.getTime() + i < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(`waitForCondition timeout: ${t.toString()}, attempts: ${s}, start: ${r.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`) : Promise.resolve(!0);
 }
-async function _(i, e = 2 * 1e3) {
+async function _(t, e = 2 * 1e3) {
   var r;
-  const t = i.localName === "sbb-image" ? ((r = i.shadowRoot) == null ? void 0 : r.querySelector(".sbb-image__img")) ?? null : i;
-  if (!t)
+  const i = t.localName === "sbb-image" ? ((r = t.shadowRoot) == null ? void 0 : r.querySelector(".sbb-image__img")) ?? null : t;
+  if (!i)
     throw new Error("img tag not found");
-  i.complete ? await t.decode() : await new Promise((s, n) => {
-    const o = setTimeout(() => n("image loading timeout"), e);
-    i.addEventListener("load", () => {
-      clearTimeout(o), t.decode().then(() => {
-        l && i.localName === "sbb-image" ? setTimeout(s, 100) : s();
+  t.complete ? await i.decode() : await new Promise((s, o) => {
+    const n = setTimeout(() => o("image loading timeout"), e);
+    t.addEventListener("load", () => {
+      clearTimeout(n), i.decode().then(() => {
+        m && t.localName === "sbb-image" ? setTimeout(s, 100) : s();
       });
-    }), i.addEventListener("error", () => {
-      clearTimeout(o), n("image error");
+    }), t.addEventListener("error", () => {
+      clearTimeout(n), o("image error");
     });
   });
 }
-const c = (i) => !!i.updateComplete, u = Promise.resolve(), h = async (i) => {
+const c = (t) => !!t.updateComplete, u = Promise.resolve(), h = async (t) => {
   var r, s;
-  const e = await i;
-  (s = (r = e.parentElement ?? e).querySelectorAll) == null || s.call(r, "[defer-hydration]").forEach((n) => n.removeAttribute("defer-hydration"));
-  const t = [e, ...e.querySelectorAll("*")].filter(c).map((n) => [
-    n.updateComplete,
-    n.hydrationComplete ?? u,
-    h(n.renderRoot)
+  const e = await t;
+  (s = (r = e.parentElement ?? e).querySelectorAll) == null || s.call(r, "[defer-hydration]").forEach((o) => o.removeAttribute("defer-hydration"));
+  const i = [e, ...e.querySelectorAll("*")].filter(c).map((o) => [
+    o.updateComplete,
+    o.hydrationComplete ?? u,
+    h(o.renderRoot)
   ]).flat(1 / 0);
-  return await Promise.all(t), e;
+  return await Promise.all(i), e;
 };
 export {
-  v as EventSpy,
-  p as describeIf,
+  p as EventSpy,
+  v as describeIf,
   c as isReactiveElement,
   w as mockScrollTo,
   g as testIf,
   f as waitForCondition,
-  E as waitForEvent,
   _ as waitForImageReady,
   h as waitForLitRender
 };

package/core.css

@@ -1296,4 +1296,117 @@ input[data-sbb-time-input] {
 }
 sbb-form-field[size=s] input[data-sbb-time-input] {
   max-width: var(--sbb-time-input-s-max-width);
+}
+
+img {
+  aspect-ratio: var(--sbb-image-aspect-ratio);
+  object-fit: var(--sbb-image-object-fit);
+  object-position: var(--sbb-image-object-position);
+}
+
+sbb-container > [slot=image]:is(sbb-image, img),
+sbb-container > [slot=image] :is(sbb-image, img) {
+  --sbb-image-object-fit: cover;
+  border-radius: var(--sbb-container-background-border-radius);
+  height: 100%;
+  position: absolute;
+}
+
+sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
+sbb-flip-card-summary > [slot=image] :is(sbb-image, img) {
+  --sbb-image-aspect-ratio: auto;
+  --sbb-image-object-fit: cover;
+  border-radius: 0;
+  display: block;
+  height: 100%;
+}
+
+sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
+sbb-lead-container > [slot=image] :is(sbb-image, img, picture) {
+  --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
+  --sbb-image-object-fit: cover;
+  border-radius: var(--sbb-lead-container-image-border-radius);
+}
+
+sbb-message > [slot=image]:is(sbb-image, img),
+sbb-message > [slot=image] :is(sbb-image, img) {
+  border-radius: var(--sbb-message-image-border-radius);
+}
+
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
+  --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
+  --sbb-teaser-image-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
+}
+@media (any-hover: hover) {
+  :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product):hover {
+    --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
+  }
+}
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img) {
+  will-change: filter;
+  filter: brightness(var(--sbb-teaser-image-brightness, 1));
+  transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
+}
+
+:is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img) {
+  border-radius: 0;
+  --sbb-image-object-fit: cover;
+  --sbb-image-aspect-ratio: 16 / 9;
+}
+:is(sbb-teaser-product, sbb-teaser-product-static) img {
+  place-self: stretch;
+}
+
+sbb-teaser :is(sbb-image, img) {
+  --sbb-image-object-fit: cover;
+  --sbb-image-aspect-ratio: 4 / 3;
+  transition-property: filter, scale;
+  will-change: filter, scale;
+  scale: var(--sbb-teaser-scale, 1);
+}
+
+:is(sbb-teaser-hero) :is(sbb-image, img) {
+  --sbb-image-aspect-ratio: 1 / 1;
+  border-radius: 0;
+}
+@media (min-width: calc(37.5rem)) {
+  :is(sbb-teaser-hero) :is(sbb-image, img) {
+    --sbb-image-aspect-ratio: 16 / 9;
+  }
+}
+:is(sbb-teaser-hero) img {
+  width: 100%;
+  display: block;
+}
+
+sbb-train-formation:has(sbb-train[direction-label]) {
+  --sbb-train-formation-reserve-spacing-display: block;
+}
+
+sbb-train-formation:has(sbb-train-wagon[sector]) {
+  --sbb-train-formation-show-sectors-gap: 1;
+}
+
+sbb-train-formation:not(:has(sbb-train-wagon[label])) {
+  --sbb-train-formation-wagon-label-display: none;
+}
+
+sbb-train-formation[view=side] sbb-train-wagon {
+  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M12.5,0.5 h55 a12,12 0 0 1 12,12 v15 a12,12 0 0 1 -12,12 h-55 a12,12 0 0 1 -12,-12 v-15 a12,12 0 0 1 12,-12 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
+  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='11.5' stroke='%23000000'/%3E%3Cpath d='M76 4L4 36' stroke='%23000000'/%3E%3Cpath d='M76 36L4 4' stroke='%23000000'/%3E%3C/svg%3E");
+  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H68C74.3513 0.5 79.5 5.64873 79.5 12V28C79.5 34.3513 74.3513 39.5 68 39.5H11.922C2.93614 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
+  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0639 39.5 68.078 39.5H11.922C2.93615 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
+  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0638 39.5 68.0779 39.5H12C5.64873 39.5 0.5 34.3513 0.5 28V12Z' stroke='%23000000'/%3E%3C/svg%3E");
+}
+
+sbb-train-formation[view=top] sbb-train-wagon {
+  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h63 a8,8 0 0 1 8,8 v23 a8,8 0 0 1 -8,8 h-63 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
+  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='7.5' stroke='%23000000'/%3E%3Cpath d='M77.5 2.5L2.5 37.5' stroke='%23000000'/%3E%3Cpath d='M77.5 37.5L2.5 2.5' stroke='%23000000'/%3E%3C/svg%3E");
+  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath transform='translate(80,40) rotate(180)' d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
+  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
+  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
 }