@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/core/mixins/form-associated-radio-button-mixin.js

@@ -0,0 +1,159 @@
+import { __esDecorate as l, __runInitializers as u } from "tslib";
+import { isServer as p } from "lit";
+import { property as m } from "lit/decorators.js";
+import { interactivityChecker as b, isArrowKeyPressed as f, getNextElementIndex as _ } from "../a11y.js";
+import { SbbConnectedAbortController as R, SbbLanguageController as y } from "../controllers.js";
+import { i18nSelectionRequired as k } from "../i18n.js";
+import { SbbDisabledMixin as g } from "./disabled-mixin.js";
+import { SbbFormAssociatedMixin as B } from "./form-associated-mixin.js";
+import { SbbRequiredMixin as v } from "./required-mixin.js";
+const c = /* @__PURE__ */ new WeakMap(), D = (h) => (() => {
+  var a;
+  let o = g(v(B(h))), r = [], d;
+  return a = class extends o {
+    /**
+     * Whether the radio button is checked.
+     */
+    set checked(e) {
+      this._checked = !!e, this.toggleAttribute("data-checked", this.checked), this.internals.ariaChecked = this.checked.toString(), this.updateFormValue(), this._synchronizeGroupState();
+    }
+    get checked() {
+      return this._checked;
+    }
+    set name(e) {
+      super.name = e, this._disconnectFromRegistry(), this._connectToRegistry(), this._synchronizeGroupState();
+    }
+    get name() {
+      return super.name;
+    }
+    /**
+     * Form type of element.
+     * @default 'radio'
+     */
+    get type() {
+      return "radio";
+    }
+    constructor() {
+      var e;
+      super(), this._checked = (u(this, r), !1), this.abort = new R(this), this._languageController = new y(this), this.internals.role = "radio", (e = this.addEventListener) == null || e.call(this, "keydown", (t) => this._handleArrowKeyDown(t));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._connectToRegistry(), this._synchronizeGroupState();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this._disconnectFromRegistry();
+    }
+    /**
+     * Is called whenever the form is being reset.
+     * @internal
+     */
+    formResetCallback() {
+      this.checked = this.hasAttribute("checked");
+    }
+    /**
+     *  Called when the browser is trying to restore element’s state to state in which case
+     *  reason is "restore", or when the browser is trying to fulfill autofill on behalf of
+     *  user in which case reason is "autocomplete".
+     * @internal
+     */
+    formStateRestoreCallback(e, t) {
+      e && (this.checked = e === this.value);
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("disabled") && this.updateFocusableRadios();
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this.updateFocusableRadios();
+    }
+    /**
+     * Called on `value` change
+     * If 'checked', update the value. Otherwise, do nothing.
+     */
+    updateFormValue() {
+      this.checked ? this.internals.setFormValue(this.value, this.value) : this.internals.setFormValue(null);
+    }
+    shouldValidate(e) {
+      return super.shouldValidate(e) || e === "checked" || e === "required";
+    }
+    /**
+     * Sets the validity of all associated radio buttons.
+     * If any radio button is required, all associated are required as well.
+     */
+    validate() {
+      if (super.validate(), !this.associatedRadioButtons)
+        return;
+      let e = !1, t = !1;
+      for (const i of this.associatedRadioButtons)
+        e || (e = i.required), t || (t = i.checked);
+      e && !t ? this.associatedRadioButtons.forEach((i) => i.setValidityFlag("valueMissing", k[this._languageController.current])) : this.associatedRadioButtons.forEach((i) => i.removeValidityFlag("valueMissing"));
+    }
+    /**
+     * Only a single radio should be focusable in the group. Defined as:
+     * - the checked radio;
+     * - the first non-disabled radio in DOM order;
+     */
+    updateFocusableRadios() {
+      if (!this.hasUpdated)
+        return;
+      const e = this._interactableGroupedRadios(), t = e.findIndex((s) => s.checked && !s.disabled && !s.formDisabled), i = t !== -1 ? t : e.findIndex((s) => !s.disabled && !s.formDisabled);
+      i !== -1 && (e[i].tabIndex = 0, e.splice(i, 1)), e.forEach((s) => s.removeAttribute("tabindex"));
+    }
+    async navigateByKeyboard(e) {
+      e.checked = !0, this.emitChangeEvents(), await e.updateComplete, e.focus();
+    }
+    emitChangeEvents() {
+      this.dispatchEvent(new InputEvent("input", { bubbles: !0, cancelable: !0, composed: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }
+    _synchronizeGroupState() {
+      this.checked && this._deselectGroupedRadios(), this.updateFocusableRadios();
+    }
+    /**
+     * Add `this` to the radioButton registry
+     */
+    _connectToRegistry() {
+      if (!this.name || p)
+        return;
+      const e = this.form ?? this.getRootNode();
+      this._radioButtonGroupsMap = c.get(e), this._radioButtonGroupsMap || (this._radioButtonGroupsMap = /* @__PURE__ */ new Map(), c.set(e, this._radioButtonGroupsMap)), this.associatedRadioButtons = this._radioButtonGroupsMap.get(this.name), this.associatedRadioButtons || (this.associatedRadioButtons = /* @__PURE__ */ new Set(), this._radioButtonGroupsMap.set(this.name, this.associatedRadioButtons));
+      const t = Array.from(this.associatedRadioButtons);
+      this.associatedRadioButtons.clear();
+      const i = t.findIndex((s) => this.compareDocumentPosition(s) & Node.DOCUMENT_POSITION_FOLLOWING);
+      i !== -1 ? t.splice(i, 0, this) : t.push(this), t.forEach((s) => this.associatedRadioButtons.add(s)), this.validate();
+    }
+    /**
+     * Remove `this` from the radioButton registry and, if the group is empty, delete the entry from the groups Map
+     */
+    _disconnectFromRegistry() {
+      var e, t, i;
+      (e = this.associatedRadioButtons) == null || e.delete(this), ((t = this.associatedRadioButtons) == null ? void 0 : t.size) === 0 ? (i = this._radioButtonGroupsMap) == null || i.delete(this.name) : this.validate(), this.associatedRadioButtons = void 0, this._radioButtonGroupsMap = void 0;
+    }
+    /**
+     * Return a list of 'interactable' grouped radios, ordered in DOM order
+     */
+    _interactableGroupedRadios() {
+      return Array.from(this.associatedRadioButtons ?? []).filter((e) => b.isVisible(e));
+    }
+    /**
+     * Deselect other radio of the same group
+     */
+    _deselectGroupedRadios() {
+      Array.from(this.associatedRadioButtons ?? []).filter((e) => e !== this).forEach((e) => e.checked = !1);
+    }
+    async _handleArrowKeyDown(e) {
+      if (!f(e))
+        return;
+      e.preventDefault();
+      const t = this._interactableGroupedRadios().filter((n) => !n.disabled && !n.formDisabled), i = t.indexOf(this), s = _(e, i, t.length);
+      await this.navigateByKeyboard(t[s]);
+    }
+  }, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    d = [m({ type: Boolean })], l(a, null, d, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (t) => "checked" in t, set: (t, i) => {
+      t.checked = i;
+    } }, metadata: e }, null, r), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a;
+})();
+export {
+  D as SbbFormAssociatedRadioButtonMixin,
+  c as radioButtonRegistry
+};

package/core/mixins/hydration-mixin.js

@@ -0,0 +1,39 @@
+const d = (s) => {
+  class a extends s {
+    /**
+     * Returns a Promise that resolves when the element has completed hydration.
+     * The Promise value is a boolean that is `true` if the element required hydration
+     * and `false` if not.
+     *
+     * @return A promise of a boolean that resolves to true once the hydration completed.
+     * @internal
+     */
+    get hydrationComplete() {
+      return this._hydrationComplete;
+    }
+    /** Returns whether hydration is required and not completed. */
+    get hydrationRequired() {
+      return this._hydrationRequired;
+    }
+    constructor(...r) {
+      var o;
+      if (super(...r), this._hydrationComplete = new Promise((i) => this._resolveHydration = i), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
+        this._resolveHydration(!1);
+      else {
+        const i = (e) => {
+          this._hydrationRequired && e.stopImmediatePropagation();
+        }, n = { capture: !0 }, t = (o = this.shadowRoot) == null ? void 0 : o.querySelectorAll("slot");
+        t != null && t.length && (t.forEach((e) => e.addEventListener("slotchange", i, n)), this.hydrationComplete.then(() => t.forEach((e) => {
+          e.removeEventListener("slotchange", i, n), e.assignedNodes().length && e.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
+        })));
+      }
+    }
+    update(r) {
+      super.update(r), this._hydrationRequired && (this._hydrationRequired = !1, this._resolveHydration(!0));
+    }
+  }
+  return a;
+};
+export {
+  d as SbbHydrationMixin
+};

package/core/mixins/named-slot-list-mixin.js

@@ -0,0 +1,107 @@
+var p = (l) => {
+  throw TypeError(l);
+};
+var S = (l, i, s) => i.has(l) || p("Cannot " + s);
+var f = (l, i, s) => (S(l, i, "read from private field"), s ? s.call(l) : i.get(l)), _ = (l, i, s) => i.has(l) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(l) : i.set(l, s), c = (l, i, s, o) => (S(l, i, "write to private field"), o ? o.call(l, s) : i.set(l, s), s);
+import { __runInitializers as g, __esDecorate as L } from "tslib";
+import { nothing as m, html as h } from "lit";
+import { state as N } from "lit/decorators.js";
+import { SbbHydrationMixin as v } from "./hydration-mixin.js";
+import "../../screen-reader-only.js";
+const y = "data-ssr-child-count", $ = "li", A = (l) => (() => {
+  var r, a;
+  let s = v(l), o, u = [], C = [];
+  return a = class extends s {
+    constructor() {
+      super(...arguments);
+      _(this, r);
+      c(this, r, g(this, u, [])), this._handleSlotchange = (g(this, C), () => {
+        const e = Array.from(this.children ?? []).filter((t) => this.listChildLocalNames.includes(t.localName));
+        e.length === this.listChildren.length && this.listChildren.every((t, n) => e[n] === t) || (this.listChildren.filter((t) => !e.includes(t)).forEach((t) => t.removeAttribute("slot")), this.listChildren = e, this.listChildren.forEach((t, n) => t.setAttribute("slot", `${$}-${n}`)), this.removeAttribute(y));
+      });
+    }
+    /**
+     * A list of children with the defined tag names.
+     * This array is only updated if there is an actual change
+     * to the child elements.
+     */
+    get listChildren() {
+      return f(this, r);
+    }
+    set listChildren(e) {
+      c(this, r, e);
+    }
+    connectedCallback() {
+      var e;
+      super.connectedCallback(), (e = this.shadowRoot) == null || e.addEventListener("slotchange", this._handleSlotchange, { passive: !0 });
+    }
+    disconnectedCallback() {
+      var e;
+      super.disconnectedCallback(), (e = this.shadowRoot) == null || e.removeEventListener("slotchange", this._handleSlotchange);
+    }
+    /**
+     * Renders list and list slots for slotted children or a number of list slots
+     * corresponding to the `data-ssr-child-count` attribute value.
+     *
+     * This is a possible optimization for SSR, as in an SSR Lit environment
+     * other elements are not available, but might be available in the meta
+     * framework wrapper (like e.g. React). This allows to provide the number of
+     * children to be passed via the `data-ssr-child-count` attribute value.
+     */
+    renderList(e = {}, t = {}) {
+      const n = this.listSlotEntries(t);
+      return n.length >= 2 ? h`
+          <ul
+            class=${e.class || this.localName}
+            aria-label=${e.ariaLabel || m}
+            aria-labelledby=${e.ariaLabelledby || m}
+          >
+            ${n.map((d) => h`
+                <li aria-hidden=${d.ariaHidden || m}>
+                  <slot name=${d.name}></slot>
+                </li>
+              `)}
+          </ul>
+          ${this.renderHiddenSlot()}
+        ` : n.length === 1 ? h`<sbb-screen-reader-only>${e.ariaLabel}</sbb-screen-reader-only>
+          <span class=${e.class || this.localName}>
+            <span><slot name=${n[0].name}></slot></span>
+          </span>
+          ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
+    }
+    /**
+     * Returns an array of SbbNamedSlotProperties, which holds the list slot names and the hidden property;
+     * its length corresponds to the number of matched children or the `data-ssr-child-count` attribute value.
+     *
+     * This is a possible optimization for SSR, as in an SSR Lit environment
+     * other elements are not available, but might be available in the meta
+     * framework wrapper (like e.g. React). This allows to provide the number of
+     * children to be passed via the `data-ssr-child-count` attribute value.
+     */
+    listSlotEntries(e) {
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(y) ?? 0) })).map((n, d) => {
+        var b;
+        return {
+          name: `${$}-${d}`,
+          ariaHidden: ((b = e == null ? void 0 : e.localNameVisualOnly) == null ? void 0 : b.includes(n.localName)) ?? !1
+        };
+      });
+    }
+    /**
+     * Returns a hidden slot, which is intended as the children change detection.
+     * When an element without a slot attribute is slotted to the element, it triggers
+     * the slotchange event, which can be used to assign it to the appropriate named slot.
+     */
+    renderHiddenSlot() {
+      return h`<span hidden><slot></slot></span>`;
+    }
+  }, r = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    o = [N()], L(a, null, o, { kind: "accessor", name: "listChildren", static: !1, private: !1, access: { has: (t) => "listChildren" in t, get: (t) => t.listChildren, set: (t, n) => {
+      t.listChildren = n;
+    } }, metadata: e }, u, C), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a;
+})();
+export {
+  A as SbbNamedSlotListMixin
+};

package/core/mixins/negative-mixin.js

@@ -0,0 +1,34 @@
+var m = (e) => {
+  throw TypeError(e);
+};
+var u = (e, t, a) => t.has(e) || m("Cannot " + a);
+var g = (e, t, a) => (u(e, t, "read from private field"), a ? a.call(e) : t.get(e)), v = (e, t, a) => t.has(e) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), b = (e, t, a, r) => (u(e, t, "write to private field"), r ? r.call(e, a) : t.set(e, a), a);
+import { __esDecorate as _, __runInitializers as f } from "tslib";
+import { property as d } from "lit/decorators.js";
+import { forceType as y } from "../decorators.js";
+const I = (e) => (() => {
+  var s, i;
+  let a = e, r, l = [], c = [];
+  return i = class extends a {
+    constructor() {
+      super(...arguments);
+      v(this, s, f(this, l, !1));
+      f(this, c);
+    }
+    /** Negative coloring variant flag. */
+    get negative() {
+      return g(this, s);
+    }
+    set negative(n) {
+      b(this, s, n);
+    }
+  }, s = new WeakMap(), (() => {
+    const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    r = [y(), d({ reflect: !0, type: Boolean })], _(i, null, r, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (o) => "negative" in o, get: (o) => o.negative, set: (o, p) => {
+      o.negative = p;
+    } }, metadata: n }, l, c), n && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
+  })(), i;
+})();
+export {
+  I as SbbNegativeMixin
+};

package/core/mixins/panel-mixin.js

@@ -0,0 +1,61 @@
+var k = (t) => {
+  throw TypeError(t);
+};
+var I = (t, a, r) => a.has(t) || k("Cannot " + r);
+var h = (t, a, r) => (I(t, a, "read from private field"), r ? r.call(t) : a.get(t)), b = (t, a, r) => a.has(t) ? k("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, r), i = (t, a, r, p) => (I(t, a, "write to private field"), p ? p.call(t, r) : a.set(t, r), r);
+import { __runInitializers as d, __esDecorate as _ } from "tslib";
+import { property as m } from "lit/decorators.js";
+import { forceType as w } from "../decorators.js";
+import { EventEmitter as j } from "../eventing.js";
+const q = (t) => (() => {
+  var n, l, c, o;
+  let r = t, p, f = [], x = [], g, S = [], y = [], v, z = [], C = [];
+  return o = class extends r {
+    constructor() {
+      super(...arguments);
+      b(this, n);
+      b(this, l);
+      b(this, c);
+      i(this, n, d(this, f, "white")), i(this, l, (d(this, x), d(this, S, !1))), i(this, c, (d(this, y), d(this, z, ""))), this._panelConnected = (d(this, C), new j(this, o.events.panelConnected, { bubbles: !0 }));
+    }
+    /** The background color of the panel. */
+    get color() {
+      return h(this, n);
+    }
+    set color(s) {
+      i(this, n, s);
+    }
+    /** Whether the unselected panel has a border. */
+    get borderless() {
+      return h(this, l);
+    }
+    set borderless(s) {
+      i(this, l, s);
+    }
+    /** @internal used for accessibility label when in expansion panel */
+    get expansionState() {
+      return h(this, c);
+    }
+    set expansionState(s) {
+      i(this, c, s);
+    }
+    connectedCallback() {
+      var s, e;
+      super.connectedCallback(), this._panelConnected.emit(), (e = (s = this.closest) == null ? void 0 : s.call(this, "sbb-radio-button-group, sbb-checkbox-group")) == null || e.toggleAttribute("data-has-panel", !0);
+    }
+  }, n = new WeakMap(), l = new WeakMap(), c = new WeakMap(), (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    p = [m({ reflect: !0 })], g = [w(), m({ reflect: !0, type: Boolean })], v = [w(), m()], _(o, null, p, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, u) => {
+      e.color = u;
+    } }, metadata: s }, f, x), _(o, null, g, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (e) => "borderless" in e, get: (e) => e.borderless, set: (e, u) => {
+      e.borderless = u;
+    } }, metadata: s }, S, y), _(o, null, v, { kind: "accessor", name: "expansionState", static: !1, private: !1, access: { has: (e) => "expansionState" in e, get: (e) => e.expansionState, set: (e, u) => {
+      e.expansionState = u;
+    } }, metadata: s }, z, C), s && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), o.events = {
+    panelConnected: "panelConnected"
+  }, o;
+})();
+export {
+  q as SbbPanelMixin
+};

package/core/mixins/required-mixin.js

@@ -0,0 +1,36 @@
+import { __runInitializers as n, __esDecorate as d } from "tslib";
+import { property as o } from "lit/decorators.js";
+const b = (l) => (() => {
+  var t;
+  let i = l, a = [], s;
+  return t = class extends i {
+    constructor() {
+      super(...arguments), this._required = (n(this, a), !1);
+    }
+    /** Whether the component is required. */
+    set required(e) {
+      this._required = !!e;
+    }
+    get required() {
+      return this._required || this.isRequiredExternally();
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("required") && (this.internals.ariaRequired = `${this.required}`);
+    }
+    /**
+     * Will be used as 'or' check to the current required state.
+     * Can e.g. be used to read required state of a group.
+     */
+    isRequiredExternally() {
+      return !1;
+    }
+  }, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    s = [o({ reflect: !0, type: Boolean })], d(t, null, s, { kind: "setter", name: "required", static: !1, private: !1, access: { has: (r) => "required" in r, set: (r, u) => {
+      r.required = u;
+    } }, metadata: e }, null, a), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), t;
+})();
+export {
+  b as SbbRequiredMixin
+};

package/core/mixins/update-scheduler-mixin.js

@@ -0,0 +1,22 @@
+const r = (t) => {
+  class s extends t {
+    constructor() {
+      super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
+      };
+    }
+    startUpdate() {
+      this._updatePromise = new Promise((e) => this._updateResolve = e);
+    }
+    completeUpdate() {
+      this._updateResolve();
+    }
+    async getUpdateComplete() {
+      const e = await super.getUpdateComplete();
+      return await this._updatePromise, e;
+    }
+  }
+  return s;
+};
+export {
+  r as SbbUpdateSchedulerMixin
+};

package/core/mixins.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './mixins/animation-complete-mixin.js';
 export * from './mixins/constructor.js';
 export * from './mixins/disabled-mixin.js';

package/core/mixins.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../../src/elements/core/mixins.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../../src/elements/core/mixins.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC"}