@sbb-esta/lyne-elements 0.52.0 → 0.52.1

package/core/testing.js

@@ -1,12 +1,12 @@
 class u {
-  constructor(n, e = null) {
-    this._event = n, this._target = e, this._count = 0, this._events = [], this._target || (this._target = document), this._listenForEvent();
+  constructor(i, e = null) {
+    this.e = i, this.a = e, this.b = 0, this.c = [], this.a || (this.a = document), this.d();
   }
   get count() {
-    return this._count;
+    return this.b;
   }
   get events() {
-    return this._events;
+    return this.c;
   }
   get firstEvent() {
     return this.events.length ? this.events[0] : null;
@@ -14,49 +14,60 @@ class u {
   get lastEvent() {
     return this.events.length ? this.events[this.events.length - 1] : null;
   }
-  _listenForEvent() {
-    var n;
-    (n = this._target) == null || n.addEventListener(this._event, (e) => {
-      this._events.push(e), this._count++;
+  d() {
+    var i;
+    (i = this.a) == null || i.addEventListener(this.e, (e) => {
+      this.c.push(e), this.b++;
     });
   }
 }
-const h = (t, n, e) => {
+const m = (t, i, e) => {
   if (t)
-    return Mocha.describe(n, e);
-}, m = (t, n, e) => {
+    return Mocha.describe(i, e);
+}, h = (t, i, e) => {
   if (t)
-    return Mocha.test(n, e);
+    return Mocha.test(i, e);
 };
-function v(t) {
+function d(t) {
   window.scrollTo(t), document.dispatchEvent(new Event("scroll"));
 }
-async function g(t, n = 30, e = 2 * 1e3) {
-  const s = /* @__PURE__ */ new Date();
-  let i = 0;
-  function r() {
-    return i++, t();
+async function g(t, i = 30, e = 2 * 1e3) {
+  const n = /* @__PURE__ */ new Date();
+  let o = 0;
+  function s() {
+    return o++, t();
   }
-  for (; !await r() && s.getTime() + e >= (/* @__PURE__ */ new Date()).getTime(); )
-    await new Promise((o) => setTimeout(o, n));
-  return s.getTime() + e < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(
-    `waitForCondition timeout: ${t.toString()}, attempts: ${i}, start: ${s.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`
+  for (; !await s() && n.getTime() + e >= (/* @__PURE__ */ new Date()).getTime(); )
+    await new Promise((r) => setTimeout(r, i));
+  return n.getTime() + e < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(
+    `waitForCondition timeout: ${t.toString()}, attempts: ${o}, start: ${n.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`
   ) : Promise.resolve(!0);
 }
-const a = (t) => !!t.updateComplete, l = Promise.resolve(), c = async (t) => {
-  const n = [t, ...t.querySelectorAll("*")].filter(a).map((e) => [
+async function w(t, i = 2 * 1e3) {
+  t.complete || await new Promise((e, n) => {
+    const o = setTimeout(() => n("image loading timeout"), i);
+    t.addEventListener("load", () => {
+      clearTimeout(o), e();
+    }), t.addEventListener("error", () => {
+      clearTimeout(o), n("image error");
+    });
+  });
+}
+const a = (t) => !!t.updateComplete, c = Promise.resolve(), l = async (t) => {
+  const i = [t, ...t.querySelectorAll("*")].filter(a).map((e) => [
     e.updateComplete,
-    e.hydrationComplete ?? l,
-    c(e.renderRoot)
+    e.hydrationComplete ?? c,
+    l(e.renderRoot)
   ]).flat(1 / 0);
-  await Promise.all(n);
+  await Promise.all(i);
 };
 export {
   u as EventSpy,
-  h as describeIf,
+  m as describeIf,
   a as isReactiveElement,
-  v as mockScrollTo,
-  m as testIf,
+  d as mockScrollTo,
+  h as testIf,
   g as waitForCondition,
-  c as waitForLitRender
+  w as waitForImageReady,
+  l as waitForLitRender
 };

package/custom-elements.json

@@ -5059,6 +5059,17 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "events",
+              "privacy": "public",
+              "static": true,
+              "readonly": true,
+              "default": "{ error: 'error', load: 'load', }",
+              "type": {
+                "text": "{\n    error: 'error',\n    load: 'load',\n  }"
+              }
+            },
             {
               "kind": "field",
               "name": "_captionElement",
@@ -5267,6 +5278,16 @@
               "attribute": "aspect-ratio",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "complete",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "description": "Whether the image is finished loading or failed to load.",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "_logPerformanceMarks",
@@ -5366,6 +5387,22 @@
               }
             }
           ],
+          "events": [
+            {
+              "name": "load",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits when the image has been loaded."
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits when the image loading ended in an error."
+            }
+          ],
           "attributes": [
             {
               "name": "alt",
@@ -29897,7 +29934,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "This class exists to facilitate the E2E test migration from stencil to lit.\nIt mimics the API that stencil provided to test events.\n\nTODO: Document me",
+          "description": "This class exists to facilitate the test migration from stencil to lit.\nIt mimics the API that stencil provided to test events.\n\nTODO: Document me",
           "name": "EventSpy",
           "members": [
             {
@@ -30073,6 +30110,27 @@
             }
           ]
         },
+        {
+          "kind": "function",
+          "name": "waitForImageReady",
+          "return": {
+            "type": {
+              "text": "Promise<void>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "HTMLImageElement | SbbImageElement"
+              }
+            },
+            {
+              "name": "timeoutInMilliseconds",
+              "default": "2 * 1000"
+            }
+          ]
+        },
         {
           "kind": "function",
           "name": "isReactiveElement",
@@ -30153,6 +30211,14 @@
             "module": "core/testing.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "waitForImageReady",
+          "declaration": {
+            "name": "waitForImageReady",
+            "module": "core/testing.js"
+          }
+        },
         {
           "kind": "js",
           "name": "isReactiveElement",
@@ -47749,11 +47815,11 @@
             {
               "kind": "field",
               "name": "horizontalFrom",
+              "privacy": "public",
+              "description": "Overrides the behaviour of `orientation` property.",
               "type": {
                 "text": "SbbHorizontalFrom | undefined"
               },
-              "privacy": "public",
-              "description": "Overrides the behaviour of `orientation` property.",
               "attribute": "horizontal-from",
               "reflects": true
             },
@@ -48009,10 +48075,10 @@
             },
             {
               "name": "horizontal-from",
+              "description": "Overrides the behaviour of `orientation` property.",
               "type": {
                 "text": "SbbHorizontalFrom | undefined"
               },
-              "description": "Overrides the behaviour of `orientation` property.",
               "fieldName": "horizontalFrom"
             },
             {

package/datepicker/common.js

@@ -1,122 +1,122 @@
-import { html as o } from "lit";
-import { property as h, state as b } from "lit/decorators.js";
-import { SbbButtonBaseElement as u } from "../core/base-elements.js";
-import { SbbConnectedAbortController as c, SbbLanguageController as _ } from "../core/controllers.js";
-import { defaultDateAdapter as m } from "../core/datetime.js";
-import { i18nToday as p } from "../core/i18n.js";
-import { SbbNegativeMixin as A } from "../core/mixins.js";
-import { getDatePicker as g, datepickerControlRegisteredEventFactory as f } from "./datepicker.js";
+import { html as d } from "lit";
+import { property as o, state as b } from "lit/decorators.js";
+import { SbbButtonBaseElement as c } from "../core/base-elements.js";
+import { SbbConnectedAbortController as u, SbbLanguageController as m } from "../core/controllers.js";
+import { defaultDateAdapter as f } from "../core/datetime.js";
+import { i18nToday as g } from "../core/i18n.js";
+import { SbbNegativeMixin as p } from "../core/mixins.js";
+import { getDatePicker as E, datepickerControlRegisteredEventFactory as D } from "./datepicker.js";
 import "../icon.js";
-var D = Object.defineProperty, l = (r, t, i, a) => {
-  for (var e = void 0, s = r.length - 1, n; s >= 0; s--)
-    (n = r[s]) && (e = n(t, i, e) || e);
-  return e && D(t, i, e), e;
+var A = Object.defineProperty, l = (r, t, i, s) => {
+  for (var e = void 0, a = r.length - 1, n; a >= 0; a--)
+    (n = r[a]) && (e = n(t, i, e) || e);
+  return e && A(t, i, e), e;
 };
-class d extends A(u) {
+class h extends p(c) {
   constructor() {
-    super(...arguments), this.boundary = null, this._disabled = !1, this._inputDisabled = !1, this.datePickerElement = null, this._dateAdapter = m, this._abort = new c(this), this._language = new _(this).withHandler(() => this._setAriaLabel());
+    super(...arguments), this.boundary = null, this.e = !1, this.f = !1, this.datePickerElement = null, this.b = f, this.i = new u(this), this.g = new m(this).withHandler(() => this.c());
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("click", () => this._handleClick(), { signal: this._abort.signal }), this._syncUpstreamProperties(), this.datePicker || this._init();
+    super.connectedCallback(), this.addEventListener("click", () => this.j(), { signal: this.i.signal }), this.k(), this.datePicker || this.h();
   }
   willUpdate(t) {
-    super.willUpdate(t), t.has("datePicker") && this._init(this.datePicker);
+    super.willUpdate(t), t.has("datePicker") && this.h(this.datePicker);
   }
   disconnectedCallback() {
     var t;
-    super.disconnectedCallback(), (t = this._datePickerController) == null || t.abort();
+    super.disconnectedCallback(), (t = this.a) == null || t.abort();
   }
   setDisabledState(t) {
     var e;
     const i = (e = t == null ? void 0 : t.getValueAsDate) == null ? void 0 : e.call(t);
     if (!i) {
-      this._disabled = !0, this._setDisabledRenderAttributes(!0);
+      this.e = !0, this.d(!0);
       return;
     }
-    const a = this.findAvailableDate(
+    const s = this.findAvailableDate(
       i,
       (t == null ? void 0 : t.dateFilter) || null,
-      this._dateAdapter,
+      this.b,
       this.boundary
     );
-    this._disabled = this._dateAdapter.compareDate(a, i) === 0, this._setDisabledRenderAttributes();
+    this.e = this.b.compareDate(s, i) === 0, this.d();
   }
-  _handleClick() {
+  j() {
     if (!this.datePickerElement || this.hasAttribute("data-disabled"))
       return;
     const t = this.datePickerElement.getValueAsDate() ?? this.datePickerElement.now, i = this.findAvailableDate(
       t,
       this.datePickerElement.dateFilter,
-      this._dateAdapter,
+      this.b,
       this.boundary
     );
-    this._dateAdapter.compareDate(i, t) !== 0 && this.datePickerElement.setValueAsDate(i);
+    this.b.compareDate(i, t) !== 0 && this.datePickerElement.setValueAsDate(i);
   }
-  _syncUpstreamProperties() {
-    var i, a;
-    const t = ((i = this.closest) == null ? void 0 : i.call(this, "sbb-form-field")) ?? ((a = this.closest) == null ? void 0 : a.call(this, "[data-form-field]"));
+  k() {
+    var i, s;
+    const t = ((i = this.closest) == null ? void 0 : i.call(this, "sbb-form-field")) ?? ((s = this.closest) == null ? void 0 : s.call(this, "[data-form-field]"));
     if (t) {
       this.negative = t.hasAttribute("negative");
       const e = t.querySelector("input");
-      e && (this._inputDisabled = e.hasAttribute("disabled") || e.hasAttribute("readonly"), this._setDisabledRenderAttributes());
+      e && (this.f = e.hasAttribute("disabled") || e.hasAttribute("readonly"), this.d());
     }
   }
-  _init(t) {
-    var i, a;
-    if ((i = this._datePickerController) == null || i.abort(), this._datePickerController = new AbortController(), this.datePickerElement = g(this, t), this.setDisabledState(this.datePickerElement), !this.datePickerElement) {
-      (a = this.parentElement) == null || a.addEventListener(
+  h(t) {
+    var i, s;
+    if ((i = this.a) == null || i.abort(), this.a = new AbortController(), this.datePickerElement = E(this, t), this.setDisabledState(this.datePickerElement), !this.datePickerElement) {
+      (s = this.parentElement) == null || s.addEventListener(
         "inputUpdated",
-        (e) => this._init(e.target),
-        { once: !0, signal: this._datePickerController.signal }
+        (e) => this.h(e.target),
+        { once: !0, signal: this.a.signal }
       );
       return;
     }
-    this._setAriaLabel(), this.datePickerElement.addEventListener(
+    this.c(), this.datePickerElement.addEventListener(
       "change",
       (e) => {
-        this.setDisabledState(e.target), this._setAriaLabel();
+        this.setDisabledState(e.target), this.c();
       },
-      { signal: this._datePickerController.signal }
+      { signal: this.a.signal }
     ), this.datePickerElement.addEventListener(
       "datePickerUpdated",
       (e) => {
-        this.setDisabledState(e.target), this._setAriaLabel();
+        this.setDisabledState(e.target), this.c();
       },
-      { signal: this._datePickerController.signal }
+      { signal: this.a.signal }
     ), this.datePickerElement.addEventListener(
       "inputUpdated",
       (e) => {
-        this._inputDisabled = !!(e.detail.disabled || e.detail.readonly), this._setDisabledRenderAttributes(), this._setAriaLabel(), this.onInputUpdated(e);
+        this.f = !!(e.detail.disabled || e.detail.readonly), this.d(), this.c(), this.onInputUpdated(e);
       },
-      { signal: this._datePickerController.signal }
-    ), this.datePickerElement.dispatchEvent(f());
+      { signal: this.a.signal }
+    ), this.datePickerElement.dispatchEvent(D());
   }
-  _setAriaLabel() {
-    var a, e, s;
-    const t = (e = (a = this.datePickerElement) == null ? void 0 : a.getValueAsDate) == null ? void 0 : e.call(a);
-    if (!t || !this._dateAdapter.isValid(t)) {
-      this.setAttribute("aria-label", this.i18nOffBoundaryDay[this._language.current]);
+  c() {
+    var s, e, a;
+    const t = (e = (s = this.datePickerElement) == null ? void 0 : s.getValueAsDate) == null ? void 0 : e.call(s);
+    if (!t || !this.b.isValid(t)) {
+      this.setAttribute("aria-label", this.i18nOffBoundaryDay[this.g.current]);
       return;
     }
-    const i = ((s = this.datePickerElement) == null ? void 0 : s.now.toDateString()) === t.toDateString() ? p[this._language.current].toLowerCase() : this._dateAdapter.getAccessibilityFormatDate(t);
+    const i = ((a = this.datePickerElement) == null ? void 0 : a.now.toDateString()) === t.toDateString() ? g[this.g.current].toLowerCase() : this.b.getAccessibilityFormatDate(t);
     this.setAttribute(
       "aria-label",
-      this.i18nSelectOffBoundaryDay(i)[this._language.current]
+      this.i18nSelectOffBoundaryDay(i)[this.g.current]
     );
   }
-  _setDisabledRenderAttributes(t = this._disabled || this._inputDisabled) {
+  d(t = this.e || this.f) {
     this.toggleAttribute("data-disabled", t), t ? (this.setAttribute("aria-disabled", "true"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0"));
   }
   renderTemplate() {
-    return o` <sbb-icon name=${this.iconName}></sbb-icon> `;
+    return d` <sbb-icon name=${this.iconName}></sbb-icon> `;
   }
 }
 l([
-  h({ attribute: "date-picker" })
-], d.prototype, "datePicker");
+  o({ attribute: "date-picker" })
+], h.prototype, "datePicker");
 l([
   b()
-], d.prototype, "boundary");
+], h.prototype, "boundary");
 export {
-  d as SbbDatepickerButton
+  h as SbbDatepickerButton
 };