@sbb-esta/lyne-elements 1.3.0 → 1.4.0

package/autocomplete-grid/autocomplete-grid-option.js

@@ -0,0 +1,67 @@
+import { customElement as l } from "lit/decorators.js";
+import { hostAttributes as d } from "../core/decorators.js";
+import { EventEmitter as r } from "../core/eventing.js";
+import { SbbOptionBaseElement as p } from "../option.js";
+import { css as c } from "lit";
+const h = c`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));display:block}:host([active]){--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x))}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}.sbb-option{--sbb-text-font-size: var(--sbb-font-size-text-s);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);display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;padding-block:var(--sbb-option-padding-block);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}:host([active]) .sbb-option{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-option-border-radius)}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors: active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}`;
+var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, m = (o, t, e, b) => {
+  for (var i = b > 1 ? void 0 : b ? u(t, e) : t, a = o.length - 1, n; a >= 0; a--)
+    (n = o[a]) && (i = (b ? n(t, e, i) : n(i)) || i);
+  return b && i && g(t, e, i), i;
+};
+const v = "sbb-autocomplete-grid-option";
+let s = class extends p {
+  constructor() {
+    super(...arguments), this.optionId = v, this.selectionChange = new r(
+      this,
+      s.events.selectionChange
+    ), this.optionSelected = new r(
+      this,
+      s.events.optionSelected
+    );
+  }
+  onOptionAttributesChange(o) {
+    var t, e;
+    super.onOptionAttributesChange(o), (e = (t = this.closest) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-row")) == null || e.toggleAttribute(
+      "data-disabled",
+      this.disabled || this.disabledFromGroup
+    );
+  }
+  willUpdate(o) {
+    var t, e;
+    super.willUpdate(o), o.has("disabled") && ((e = (t = this.closest) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-row")) == null || e.toggleAttribute(
+      "data-disabled",
+      this.disabled || this.disabledFromGroup
+    ), this.updateAriaDisabled());
+  }
+  setAttributeFromParent() {
+    var t;
+    const o = this.closest("sbb-autocomplete-grid-optgroup");
+    o && (this.disabledFromGroup = o.disabled, this.updateAriaDisabled()), (t = this.closest("sbb-autocomplete-grid-row")) == null || t.toggleAttribute(
+      "data-disabled",
+      this.disabled || this.disabledFromGroup
+    ), this.negative = !!this.closest(":is(sbb-autocomplete-grid[negative],sbb-form-field[negative])"), this.toggleAttribute("data-negative", this.negative);
+  }
+  selectByClick(o) {
+    if (this.disabled || this.disabledFromGroup) {
+      o.stopPropagation();
+      return;
+    }
+    this.setSelectedViaUserInteraction(!0);
+  }
+};
+s.styles = h;
+s.events = {
+  selectionChange: "autocompleteOptionSelectionChange",
+  optionSelected: "autocompleteOptionSelected"
+};
+s = m([
+  l("sbb-autocomplete-grid-option"),
+  d({
+    role: "gridcell"
+  })
+], s);
+export {
+  s as SbbAutocompleteGridOptionElement,
+  v as autocompleteGridOptionId
+};

package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.d.ts

@@ -0,0 +1,18 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+
+/**
+ * The component is used as a wrapper for options and action buttons.
+ *
+ * @slot - Use the unnamed slot to add a `sbb-autocomplete-grid-option` and a `sbb-autocomplete-grid-cell` with one or more `sbb-autocomplete-grid-button`.
+ */
+export declare class SbbAutocompleteGridRowElement extends LitElement {
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-autocomplete-grid-row': SbbAutocompleteGridRowElement;
+    }
+}
+//# sourceMappingURL=autocomplete-grid-row.d.ts.map

package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-grid-row.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AASjF;;;;GAIG;AACH,qBAIa,6BAA8B,SAAQ,UAAU;IAC3D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtC,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,2BAA2B,EAAE,6BAA6B,CAAC;KAC5D;CACF"}

package/autocomplete-grid/autocomplete-grid-row.d.ts

@@ -0,0 +1,2 @@
+export * from './autocomplete-grid-row/autocomplete-grid-row.js';
+//# sourceMappingURL=autocomplete-grid-row.d.ts.map

package/autocomplete-grid/autocomplete-grid-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-grid-row.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete-grid/autocomplete-grid-row.ts"],"names":[],"mappings":"AAAA,cAAc,kDAAkD,CAAC"}

package/autocomplete-grid/autocomplete-grid-row.js

@@ -0,0 +1,31 @@
+import { css as s, LitElement as d, html as i } from "lit";
+import { customElement as u } from "lit/decorators.js";
+import { hostAttributes as n } from "../core/decorators.js";
+const p = s`*,:before,:after{box-sizing:border-box}:host{--sbb-autocomplete-grid-row-color: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color: inherit;--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-milk);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-cloud);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);--sbb-autocomplete-grid-row-justify-content: space-between;--sbb-autocomplete-grid-row-min-height: var(--sbb-size-button-m-min-height);--sbb-autocomplete-grid-row-cursor: pointer;--sbb-autocomplete-grid-row-border-radius: var(--sbb-border-radius-4x);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-metal);display:block}:host([data-negative]){--sbb-autocomplete-grid-row-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-iron);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media (any-hover: hover){:host(:hover:not([data-disabled])){--sbb-autocomplete-grid-row-background-color: var( --sbb-autocomplete-grid-row-background-color-hover )}}:host([data-disabled]){--sbb-autocomplete-grid-row-cursor: default}@media (forced-colors: active){:host([data-disabled]){--sbb-autocomplete-grid-row-color: GrayText}}::slotted(sbb-autocomplete-grid-option){flex:1 1 auto;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x))}.sbb-autocomplete-grid-row{display:flex;align-items:center;padding-inline-end:var(--sbb-autocomplete-grid-row-padding-inline-end);justify-content:var(--sbb-autocomplete-grid-row-justify-content);gap:var(--sbb-spacing-fixed-6x);color:var(--sbb-autocomplete-grid-row-color);background-color:var(--sbb-autocomplete-grid-row-background-color);cursor:var(--sbb-autocomplete-grid-row-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-autocomplete-grid-row-color)}:host([data-disabled]) .sbb-autocomplete-grid-row{position:relative;z-index:0}:host([data-disabled]) .sbb-autocomplete-grid-row:before{content:"";display:block;position:absolute;top:.375rem;right:.375rem;bottom:.375rem;left:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-autocomplete-grid-row-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-autocomplete-grid-row-disabled-background-color);z-index:-1}@media (forced-colors: active){:host([data-disabled]) .sbb-autocomplete-grid-row:before{border-color:GrayText}}`;
+var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, v = (c, r, t, e) => {
+  for (var o = e > 1 ? void 0 : e ? g(r, t) : r, b = c.length - 1, a; b >= 0; b--)
+    (a = c[b]) && (o = (e ? a(r, t, o) : a(o)) || o);
+  return e && o && m(r, t, o), o;
+};
+let w = 0, l = class extends d {
+  connectedCallback() {
+    super.connectedCallback(), this.id || (this.id = `sbb-autocomplete-grid-row-${++w}`);
+  }
+  render() {
+    return i`
+      <span class="sbb-autocomplete-grid-row">
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+l.styles = p;
+l = v([
+  u("sbb-autocomplete-grid-row"),
+  n({
+    role: "row"
+  })
+], l);
+export {
+  l as SbbAutocompleteGridRowElement
+};

package/autocomplete-grid/autocomplete-grid.d.ts

@@ -0,0 +1,2 @@
+export * from './autocomplete-grid/autocomplete-grid.js';
+//# sourceMappingURL=autocomplete-grid.d.ts.map

package/autocomplete-grid/autocomplete-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-grid.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete-grid/autocomplete-grid.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC"}

package/autocomplete-grid/autocomplete-grid.js

@@ -0,0 +1,139 @@
+import { customElement as b } from "lit/decorators.js";
+import { SbbAutocompleteBaseElement as u } from "../autocomplete.js";
+import { getNextElementIndex as n } from "../core/a11y.js";
+import { hostAttributes as m } from "../core/decorators.js";
+import { getDocumentWritingMode as h, isSafari as p } from "../core/dom.js";
+import { setAriaComboBoxAttributes as g } from "../core/overlay.js";
+import { SbbAutocompleteGridOptionElement as l } from "./autocomplete-grid-option.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, I = (t, e, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? f(e, i) : e, s = t.length - 1, a; s >= 0; s--)
+    (a = t[s]) && (r = (o ? a(e, i, r) : a(r)) || r);
+  return o && r && v(e, i, r), r;
+};
+let A = 0;
+const d = p;
+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;
+      }
+  }
+  /**
+   * 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 r;
+    const e = this.options.filter(
+      (s) => !s.disabled && !s.hasAttribute("data-group-disabled")
+    ), i = n(t, this._activeItemIndex, e.length);
+    if (isNaN(i))
+      return;
+    const o = e[i];
+    if (o.active = !0, (r = this.triggerElement) == null || r.setAttribute("aria-activedescendant", o.id), o.scrollIntoView({ block: "nearest" }), this._activeColumnIndex !== 0)
+      this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((s) => s.toggleAttribute("data-focus-visible", !1));
+    else {
+      const s = e[this._activeItemIndex];
+      s && (s.active = !1);
+    }
+    this._activeItemIndex = i, this._activeColumnIndex = 0;
+  }
+  _setNextHorizontalActiveElement(t) {
+    var s;
+    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 = n(t, this._activeColumnIndex, e.length);
+    if (isNaN(i))
+      return;
+    const o = e[i];
+    o instanceof l ? o.active = !0 : o.toggleAttribute("data-focus-visible", !0);
+    const r = e[this._activeColumnIndex];
+    r instanceof l ? r.active = !1 : r.toggleAttribute("data-focus-visible", !1), (s = this.triggerElement) == null || s.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.active = !1);
+    }
+    this._activeItemIndex = -1, this._activeColumnIndex = 0, (t = this.triggerElement) == null || t.removeAttribute("aria-activedescendant");
+  }
+  setTriggerAttributes(t) {
+    g(t, d ? this.id : this.overlayId, !1, "grid");
+  }
+};
+c = I([
+  b("sbb-autocomplete-grid"),
+  m({
+    dir: h(),
+    role: d ? "grid" : null
+  })
+], c);
+export {
+  c as SbbAutocompleteGridElement
+};

package/autocomplete-grid.d.ts

@@ -0,0 +1,7 @@
+export * from './autocomplete-grid/autocomplete-grid.js';
+export * from './autocomplete-grid/autocomplete-grid-button.js';
+export * from './autocomplete-grid/autocomplete-grid-cell.js';
+export * from './autocomplete-grid/autocomplete-grid-optgroup.js';
+export * from './autocomplete-grid/autocomplete-grid-option.js';
+export * from './autocomplete-grid/autocomplete-grid-row.js';
+//# sourceMappingURL=autocomplete-grid.d.ts.map

package/autocomplete-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-grid.d.ts","sourceRoot":"","sources":["../../src/elements/autocomplete-grid.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC;AACzD,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mDAAmD,CAAC;AAClE,cAAc,iDAAiD,CAAC;AAChE,cAAc,8CAA8C,CAAC"}

package/autocomplete-grid.js

@@ -0,0 +1,6 @@
+export * from "./autocomplete-grid/autocomplete-grid.js";
+export * from "./autocomplete-grid/autocomplete-grid-button.js";
+export * from "./autocomplete-grid/autocomplete-grid-cell.js";
+export * from "./autocomplete-grid/autocomplete-grid-optgroup.js";
+export * from "./autocomplete-grid/autocomplete-grid-option.js";
+export * from "./autocomplete-grid/autocomplete-grid-row.js";

package/autocomplete.d.ts

@@ -1,2 +1,3 @@
 export * from './autocomplete/autocomplete.js';
+export * from './autocomplete/autocomplete-base-element.js';
 //# sourceMappingURL=autocomplete.d.ts.map

package/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/elements/autocomplete.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/elements/autocomplete.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6CAA6C,CAAC"}