@sbb-esta/lyne-elements 1.13.0 → 1.14.0

package/autocomplete-grid/autocomplete-grid.js

@@ -1,138 +1,117 @@
-import { customElement as b } from "lit/decorators.js";
-import { SbbAutocompleteBaseElement as u } from "../autocomplete.js";
-import { getNextElementIndex as l } from "../core/a11y.js";
-import { hostAttributes as m } from "../core/decorators.js";
-import { isSafari as h } from "../core/dom.js";
-import { setAriaComboBoxAttributes as p } from "../core/overlay.js";
-import { SbbAutocompleteGridOptionElement as n } from "./autocomplete-grid-option.js";
-var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, f = (t, e, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? v(e, i) : e, r = t.length - 1, a; r >= 0; r--)
-    (a = t[r]) && (s = (o ? a(e, i, s) : a(s)) || s);
-  return o && s && g(e, i, s), s;
-};
-let A = 0;
-const d = h;
-let c = class extends u {
-  constructor() {
-    super(...arguments), this.overlayId = `sbb-autocomplete-grid-${++A}`, this.panelRole = "grid", this._activeItemIndex = -1, this._activeColumnIndex = 0;
-  }
-  get options() {
-    var t;
-    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-option")) ?? []);
-  }
-  get _row() {
-    var t;
-    return Array.from((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-row")).filter(
-      (e) => !e.hasAttribute("data-disabled")
-    ) ?? [];
-  }
-  onOptionClick(t) {
-    t.target.localName !== "sbb-autocomplete-grid-option" || t.target.disabled || this.close();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const t = this.abort.signal;
-    this.addEventListener(
-      "autocompleteOptionSelectionChange",
-      (e) => this.onOptionSelected(e),
-      { signal: t }
-    );
-  }
-  syncNegative() {
-    var t, e;
-    (t = this.querySelectorAll) == null || t.call(
-      this,
-      "sbb-divider, sbb-autocomplete-grid-button"
-    ).forEach((i) => i.negative = this.negative), (e = this.querySelectorAll) == null || e.call(
-      this,
-      "sbb-autocomplete-grid-row, sbb-autocomplete-grid-option, sbb-autocomplete-grid-optgroup"
-    ).forEach((i) => i.toggleAttribute("data-negative", this.negative));
-  }
-  openedPanelKeyboardInteraction(t) {
-    if (this.state === "opened")
-      switch (t.key) {
-        case "Escape":
-        case "Tab":
-          this.close();
-          break;
-        case "Enter":
-          this.selectByKeyboard();
-          break;
-        case "ArrowDown":
-        case "ArrowUp":
-          this.setNextActiveOption(t);
-          break;
-        case "ArrowRight":
-        case "ArrowLeft":
-          this._setNextHorizontalActiveElement(t);
-          break;
+import { __esDecorate as g, __runInitializers as v } from "tslib";
+import { customElement as f } from "lit/decorators.js";
+import { SbbAutocompleteBaseElement as A } from "../autocomplete.js";
+import { getNextElementIndex as b } from "../core/a11y.js";
+import { hostAttributes as I } from "../core/decorators.js";
+import { isSafari as _ } from "../core/dom.js";
+import { setAriaComboBoxAttributes as x } from "../core/overlay.js";
+import { SbbAutocompleteGridOptionElement as m } from "./autocomplete-grid-option.js";
+let y = 0;
+const h = _;
+let z = (() => {
+  var r;
+  let p = [f("sbb-autocomplete-grid"), I({
+    role: h ? "grid" : null
+  })], n, c = [], a, d = A;
+  return r = class extends d {
+    constructor() {
+      super(...arguments), this.overlayId = `sbb-autocomplete-grid-${++y}`, this.panelRole = "grid", this._activeItemIndex = -1, this._activeColumnIndex = 0;
+    }
+    get options() {
+      var t;
+      return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-option")) ?? []);
+    }
+    get _row() {
+      var t;
+      return Array.from((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-row")).filter((e) => !e.hasAttribute("data-disabled")) ?? [];
+    }
+    onOptionClick(t) {
+      t.target.localName !== "sbb-autocomplete-grid-option" || t.target.disabled || this.close();
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      const t = this.abort.signal;
+      this.addEventListener("autocompleteOptionSelectionChange", (e) => this.onOptionSelected(e), { signal: t });
+    }
+    syncNegative() {
+      var t, e;
+      (t = this.querySelectorAll) == null || t.call(this, "sbb-divider, sbb-autocomplete-grid-button").forEach((i) => i.negative = this.negative), (e = this.querySelectorAll) == null || e.call(this, "sbb-autocomplete-grid-row, sbb-autocomplete-grid-option, sbb-autocomplete-grid-optgroup").forEach((i) => i.toggleAttribute("data-negative", this.negative));
+    }
+    openedPanelKeyboardInteraction(t) {
+      if (this.state === "opened")
+        switch (t.key) {
+          case "Escape":
+          case "Tab":
+            this.close();
+            break;
+          case "Enter":
+            this.selectByKeyboard();
+            break;
+          case "ArrowDown":
+          case "ArrowUp":
+            this.setNextActiveOption(t);
+            break;
+          case "ArrowRight":
+          case "ArrowLeft":
+            this._setNextHorizontalActiveElement(t);
+            break;
+        }
+    }
+    /**
+     * Select an element on 'Enter' keypress.
+     *
+     * Due to keyboard navigation code, the `_activeColumnIndex` is zero when an option is 'focused'
+     * and greater than zero when a button is 'focused', so asking for `querySelectorAll(...)[this._activeColumnIndex]`
+     * would always return a `SbbAutocompleteGridButtonElement`.
+     */
+    selectByKeyboard() {
+      var t;
+      this._activeColumnIndex !== 0 ? this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button")[this._activeColumnIndex].click() : (t = this.options[this._activeItemIndex]) == null || t.setSelectedViaUserInteraction(!0);
+    }
+    setNextActiveOption(t) {
+      var l;
+      const e = this.options.filter((o) => !o.disabled && !o.hasAttribute("data-group-disabled")), i = b(t, this._activeItemIndex, e.length);
+      if (isNaN(i))
+        return;
+      const s = e[i];
+      if (s.setActive(!0), (l = this.triggerElement) == null || l.setAttribute("aria-activedescendant", s.id), s.scrollIntoView({ block: "nearest" }), this._activeColumnIndex !== 0)
+        this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((o) => o.toggleAttribute("data-focus-visible", !1));
+      else {
+        const o = e[this._activeItemIndex];
+        o && o.setActive(!1);
       }
-  }
-  /**
-   * Select an element on 'Enter' keypress.
-   *
-   * Due to keyboard navigation code, the `_activeColumnIndex` is zero when an option is 'focused'
-   * and greater than zero when a button is 'focused', so asking for `querySelectorAll(...)[this._activeColumnIndex]`
-   * would always return a `SbbAutocompleteGridButtonElement`.
-   */
-  selectByKeyboard() {
-    var t;
-    this._activeColumnIndex !== 0 ? this._row[this._activeItemIndex].querySelectorAll(
-      "sbb-autocomplete-grid-option, sbb-autocomplete-grid-button"
-    )[this._activeColumnIndex].click() : (t = this.options[this._activeItemIndex]) == null || t.setSelectedViaUserInteraction(!0);
-  }
-  setNextActiveOption(t) {
-    var s;
-    const e = this.options.filter(
-      (r) => !r.disabled && !r.hasAttribute("data-group-disabled")
-    ), i = l(t, this._activeItemIndex, e.length);
-    if (isNaN(i))
-      return;
-    const o = e[i];
-    if (o.setActive(!0), (s = this.triggerElement) == null || s.setAttribute("aria-activedescendant", o.id), o.scrollIntoView({ block: "nearest" }), this._activeColumnIndex !== 0)
-      this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((r) => r.toggleAttribute("data-focus-visible", !1));
-    else {
-      const r = e[this._activeItemIndex];
-      r && r.setActive(!1);
+      this._activeItemIndex = i, this._activeColumnIndex = 0;
     }
-    this._activeItemIndex = i, this._activeColumnIndex = 0;
-  }
-  _setNextHorizontalActiveElement(t) {
-    var r;
-    if (this._activeItemIndex < 0)
-      return;
-    const e = Array.from(
-      this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button")
-    ).filter((a) => !a.disabled && !a.hasAttribute("data-group-disabled")), i = l(t, this._activeColumnIndex, e.length);
-    if (isNaN(i))
-      return;
-    const o = e[i];
-    o instanceof n ? o.setActive(!0) : o.toggleAttribute("data-focus-visible", !0);
-    const s = e[this._activeColumnIndex];
-    s instanceof n ? s.setActive(!1) : s.toggleAttribute("data-focus-visible", !1), (r = this.triggerElement) == null || r.setAttribute("aria-activedescendant", o.id), o.scrollIntoView({ block: "nearest" }), this._activeColumnIndex = i;
-  }
-  resetActiveElement() {
-    var t;
-    if (this._activeColumnIndex !== 0)
-      this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((e) => e.toggleAttribute("data-focus-visible", !1));
-    else {
-      const e = this.options.filter(
-        (i) => !i.disabled && !i.hasAttribute("data-group-disabled")
-      )[this._activeItemIndex];
-      e && e.setActive(!1);
+    _setNextHorizontalActiveElement(t) {
+      var o;
+      if (this._activeItemIndex < 0)
+        return;
+      const e = Array.from(this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button")).filter((u) => !u.disabled && !u.hasAttribute("data-group-disabled")), i = b(t, this._activeColumnIndex, e.length);
+      if (isNaN(i))
+        return;
+      const s = e[i];
+      s instanceof m ? s.setActive(!0) : s.toggleAttribute("data-focus-visible", !0);
+      const l = e[this._activeColumnIndex];
+      l instanceof m ? l.setActive(!1) : l.toggleAttribute("data-focus-visible", !1), (o = this.triggerElement) == null || o.setAttribute("aria-activedescendant", s.id), s.scrollIntoView({ block: "nearest" }), this._activeColumnIndex = i;
     }
-    this._activeItemIndex = -1, this._activeColumnIndex = 0, (t = this.triggerElement) == null || t.removeAttribute("aria-activedescendant");
-  }
-  setTriggerAttributes(t) {
-    p(t, d ? this.id : this.overlayId, !1, "grid");
-  }
-};
-c = f([
-  b("sbb-autocomplete-grid"),
-  m({
-    role: d ? "grid" : null
-  })
-], c);
+    resetActiveElement() {
+      var t;
+      if (this._activeColumnIndex !== 0)
+        this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((e) => e.toggleAttribute("data-focus-visible", !1));
+      else {
+        const e = this.options.filter((i) => !i.disabled && !i.hasAttribute("data-group-disabled"))[this._activeItemIndex];
+        e && e.setActive(!1);
+      }
+      this._activeItemIndex = -1, this._activeColumnIndex = 0, (t = this.triggerElement) == null || t.removeAttribute("aria-activedescendant");
+    }
+    setTriggerAttributes(t) {
+      x(t, h ? this.id : this.overlayId, !1, "grid");
+    }
+  }, a = r, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+    g(null, n = { value: a }, p, { kind: "class", name: a.name, metadata: t }, null, c), a = n.value, t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), v(a, c);
+  })(), a;
+})();
 export {
-  c as SbbAutocompleteGridElement
+  z as SbbAutocompleteGridElement
 };