@viasat/beam-web-components 2.0.0

package/local/SegmentedControl/SegmentedControl.context.js

@@ -0,0 +1,8 @@
+import { n as o } from "../chunks/create-context.DS1OG3vJ.js";
+import { p as t } from "../chunks/constants.jOWREYQE.js";
+const n = o(
+  Symbol(`${t}segmented-control-group-context`)
+);
+export {
+  n as segmentedControlContext
+};

package/local/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,103 @@
+import { e as S } from "../chunks/provide.i2FlUkOu.js";
+import { r as x, a as b, x as w } from "../chunks/lit-element.CJtt9wj5.js";
+import { n as c, c as E } from "../chunks/register-custom-element.vod7zfGv.js";
+import { r as z } from "../chunks/state.CqiuSzAl.js";
+import { g as B } from "../chunks/classNames.C6fNrXWF.js";
+import "../chunks/constants.jOWREYQE.js";
+import { s as I } from "../chunks/segmentedControl.module.BPXEWodj.js";
+import { segmentedControlContext as O } from "./SegmentedControl.context.js";
+import "./SegmentedControlItem.js";
+import "./SegmentedControlList.js";
+import "./SegmentedControlPanel.js";
+var V = Object.defineProperty, A = Object.getOwnPropertyDescriptor, C = (e) => {
+  throw TypeError(e);
+}, a = (e, t, i, h) => {
+  for (var n = h > 1 ? void 0 : h ? A(t, i) : t, p = e.length - 1, f; p >= 0; p--)
+    (f = e[p]) && (n = (h ? f(t, i, n) : f(n)) || n);
+  return h && n && V(t, i, n), n;
+}, _ = (e, t, i) => t.has(e) || C("Cannot " + i), m = (e, t, i) => (_(e, t, "read from private field"), t.get(e)), g = (e, t, i) => t.has(e) ? C("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), o = (e, t, i) => (_(e, t, "access private method"), i), l, s, y, u, v, d;
+const { baseClassNamePrefix: M } = B("segmented-control");
+let r = class extends b {
+  constructor() {
+    super(), g(this, s), g(this, l, /* @__PURE__ */ new Set()), this.segmentedControlContext = {
+      disabled: void 0,
+      size: void 0,
+      selectedValue: void 0,
+      initialSelection: void 0,
+      fluid: void 0,
+      register: (e) => o(this, s, u).call(this, e),
+      unregister: (e) => o(this, s, v).call(this, e),
+      registeredItems: Array.from(m(this, l))
+    }, this.addEventListener("bm-selected", o(this, s, y));
+  }
+  firstUpdated() {
+    o(this, s, d).call(this);
+  }
+  willUpdate(e) {
+    (e.has("disabled") || e.has("size") || e.has("initialSelection") || e.has("fluid")) && o(this, s, d).call(this);
+  }
+  render() {
+    return w`
+      <div class=${M}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+l = /* @__PURE__ */ new WeakMap();
+s = /* @__PURE__ */ new WeakSet();
+y = function(e) {
+  const { value: t } = e.detail;
+  e.target.focus(), this.segmentedControlContext = {
+    ...this.segmentedControlContext,
+    selectedValue: t
+  }, this.dispatchEvent(
+    new CustomEvent("bm-change", {
+      detail: { value: t },
+      bubbles: !0,
+      composed: !0
+    })
+  );
+};
+u = function(e) {
+  m(this, l).add(e), o(this, s, d).call(this);
+};
+v = function(e) {
+  m(this, l).delete(e), o(this, s, d).call(this);
+};
+d = function() {
+  var e;
+  this.segmentedControlContext = {
+    disabled: this.disabled || !1,
+    size: this.size || "md",
+    selectedValue: ((e = this.segmentedControlContext) == null ? void 0 : e.selectedValue) ?? this.initialSelection,
+    initialSelection: this.initialSelection,
+    fluid: this.fluid || !1,
+    register: (t) => o(this, s, u).call(this, t),
+    unregister: (t) => o(this, s, v).call(this, t),
+    registeredItems: Array.from(m(this, l))
+  };
+};
+r.styles = x(I);
+a([
+  c({ type: Boolean })
+], r.prototype, "disabled", 2);
+a([
+  c({ type: String })
+], r.prototype, "size", 2);
+a([
+  c({ type: String })
+], r.prototype, "initialSelection", 2);
+a([
+  c({ type: Boolean })
+], r.prototype, "fluid", 2);
+a([
+  S({ context: O }),
+  z()
+], r.prototype, "segmentedControlContext", 2);
+r = a([
+  E("bm-segmented-control")
+], r);
+export {
+  r as BmSegmentedControl
+};

package/local/SegmentedControl/SegmentedControlItem.js

@@ -0,0 +1,284 @@
+import { c as v } from "../chunks/consume.Ce9k1-wN.js";
+import { r as w, i as x, E as p, x as u, a as _ } from "../chunks/lit-element.CJtt9wj5.js";
+import { n as m, c as y } from "../chunks/register-custom-element.vod7zfGv.js";
+import { r as C } from "../chunks/state.CqiuSzAl.js";
+import { e as O } from "../chunks/query.lbpOn5CD.js";
+import { b as T, c as b, g as $ } from "../chunks/classNames.C6fNrXWF.js";
+import { a as E } from "../chunks/constants.jOWREYQE.js";
+import { r as S } from "../chunks/dom.C98AFbJh.js";
+import { s as A } from "../chunks/segmentedControl.module.BPXEWodj.js";
+import { g as I } from "../chunks/helpers.BWcXAteC.js";
+import "../Tooltip/Tooltip.js";
+import { stateLayerStyles as D, stateLayerClassName as N } from "../StateLayer/StateLayer.js";
+import { segmentedControlContext as k } from "./SegmentedControl.context.js";
+const L = (t) => {
+  class e extends t {
+    getTooltipElement() {
+      var s;
+      return (s = this.shadowRoot) == null ? void 0 : s.querySelector("bm-tooltip");
+    }
+    handleTooltipFocus() {
+      const s = this.getTooltipElement(), o = this.hasAttribute("disabled");
+      s && !o && this.shouldShowTooltip() && s.setAttribute("open", "");
+    }
+    handleTooltipBlur() {
+      const s = this.getTooltipElement();
+      s && s.removeAttribute("open");
+    }
+    handleTooltipMouseEnter() {
+      const s = this.getTooltipElement(), o = this.hasAttribute("disabled");
+      s && !o && this.shouldShowTooltip() && s.setAttribute("open", "");
+    }
+    handleTooltipMouseLeave() {
+      const s = this.getTooltipElement();
+      s && s.removeAttribute("open");
+    }
+    updateTooltipForItem(s, o) {
+      var l;
+      if (!s || s.hasAttribute("disabled")) return;
+      const i = (l = s.shadowRoot) == null ? void 0 : l.querySelector("bm-tooltip");
+      i && (o ? i.setAttribute("open", "") : i.removeAttribute("open"));
+    }
+    shouldShowTooltip() {
+      return !this.hasAttribute("disabled");
+    }
+    getTooltipText() {
+      return this.getAttribute("aria-label") || "";
+    }
+  }
+  return e;
+};
+class R {
+  constructor(e, n) {
+    this._element = e, this._callback = n, this.setup();
+  }
+  setup() {
+    this._element && (this._debouncedCheckOverflow = T(() => {
+      if (this._element) {
+        const e = this._element.scrollWidth > this._element.clientWidth;
+        this._callback(e);
+      }
+    }, E), this._observer = new ResizeObserver(this._debouncedCheckOverflow), this._observer.observe(this._element), this._debouncedCheckOverflow());
+  }
+  disconnect() {
+    this._observer && this._observer.disconnect(), this._debouncedCheckOverflow && this._debouncedCheckOverflow.cancel();
+  }
+}
+var V = Object.defineProperty, q = Object.getOwnPropertyDescriptor, c = (t, e, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? q(e, n) : e, i = t.length - 1, l; i >= 0; i--)
+    (l = t[i]) && (o = (s ? l(e, n, o) : l(o)) || o);
+  return s && o && V(e, n, o), o;
+};
+const { subElementClassPrefix: P } = $("segmented-control"), r = `${P}item`;
+let h = class extends L(_) {
+  constructor() {
+    super(...arguments), this.value = "", this.disabled = !1, this.isDisabled = () => {
+      var t;
+      return this.disabled || ((t = this.segmentedControlContext) == null ? void 0 : t.disabled) === !0;
+    }, this.hasDefaultSlotContent = () => Array.from(this.childNodes).some(
+      (t) => t.nodeType === Node.ELEMENT_NODE && !t.hasAttribute("slot")
+    ), this.getDefaultSlotElement = () => Array.from(this.childNodes).find(
+      (t) => t.nodeType === Node.ELEMENT_NODE && !t.hasAttribute("slot")
+    ), this.selected = !1, this.isContentOverflowing = !1, this.hasIcon = !1, this.hasContent = !1;
+  }
+  firstUpdated() {
+    this.setupOverflowObserver();
+  }
+  connectedCallback() {
+    var t, e;
+    super.connectedCallback(), (e = (t = this.segmentedControlContext) == null ? void 0 : t.register) == null || e.call(t, this);
+  }
+  disconnectedCallback() {
+    var t, e;
+    super.disconnectedCallback(), this.cleanupOverflowObserver(), (e = (t = this.segmentedControlContext) == null ? void 0 : t.unregister) == null || e.call(t, this);
+  }
+  willUpdate(t) {
+    var e, n, s;
+    if (t.has("segmentedControlContext")) {
+      const o = this.selected, i = ((e = this.segmentedControlContext) == null ? void 0 : e.selectedValue) === this.value;
+      this.selected = i, !o && i && ((n = this.segmentedControlContext) != null && n.selectedValue) && ((s = t.get("segmentedControlContext")) == null ? void 0 : s.selectedValue) !== void 0 && this.updateComplete.then(() => {
+        var a, d;
+        (d = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || d.focus();
+      });
+    }
+  }
+  // Override only the methods that need custom behavior
+  shouldShowTooltip() {
+    const t = this.querySelector('[slot="icon"]') !== null, e = this.hasDefaultSlotContent();
+    return !this.isDisabled() && (t && !e || e && this.isContentOverflowing);
+  }
+  getTooltipText() {
+    const t = S(this, "aria-label"), e = this.getDefaultSlotElement();
+    return (e == null ? void 0 : e.textContent) || t || "";
+  }
+  handleKeyDown(t) {
+    var l;
+    const e = (l = this.segmentedControlContext) == null ? void 0 : l.registeredItems.map(
+      (a) => a.value
+    );
+    if (!e)
+      return;
+    const n = e.indexOf(this.value);
+    let s = this.value;
+    const o = I(this);
+    let i = t.key;
+    switch (o === "rtl" && (i === "ArrowLeft" ? i = "ArrowRight" : i === "ArrowRight" && (i = "ArrowLeft")), i) {
+      case "ArrowDown":
+      case "ArrowRight":
+        s = this.findNextEnabledItem(e, n, 1);
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        s = this.findNextEnabledItem(e, n, -1);
+        break;
+      case " ":
+      case "Enter":
+        this.isDisabled() || (this.dispatchItemSelectedEvent(this.value), t.preventDefault());
+        return;
+      default:
+        return;
+    }
+    s !== this.value && (t.preventDefault(), this.focusItemWithValue(s));
+  }
+  focusItemWithValue(t) {
+    var n, s;
+    const e = (n = this.segmentedControlContext) == null ? void 0 : n.registeredItems.find(
+      (o) => o.value === t
+    );
+    if (e) {
+      const o = (s = e.shadowRoot) == null ? void 0 : s.querySelector("button");
+      o && o.focus();
+    }
+  }
+  handleClick() {
+    !this.isDisabled() && this.segmentedControlContext && this.dispatchItemSelectedEvent(this.value);
+  }
+  setupOverflowObserver() {
+    this._contentRef && (this._overflowObserver = new R(
+      this._contentRef,
+      (t) => {
+        this.isContentOverflowing = t;
+      }
+    ));
+  }
+  cleanupOverflowObserver() {
+    var t;
+    (t = this._overflowObserver) == null || t.disconnect();
+  }
+  findNextEnabledItem(t, e, n) {
+    var l;
+    const s = Array.from(((l = this.segmentedControlContext) == null ? void 0 : l.registeredItems) || []);
+    if (!s.length) return this.value;
+    const o = t.length;
+    let i = (e + n + o) % o;
+    for (; i !== e; ) {
+      const a = s.find((d) => d.value === t[i]);
+      if (a && !a.disabled)
+        return t[i];
+      i = (i + n + o) % o;
+    }
+    return this.value;
+  }
+  dispatchItemSelectedEvent(t) {
+    this.dispatchEvent(
+      new CustomEvent("bm-selected", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  getClassName() {
+    var f;
+    const { fluid: t, selectedValue: e, size: n = "md" } = this.segmentedControlContext || {}, s = this.isDisabled(), o = e === this.value, i = (((f = this.segmentedControlContext) == null ? void 0 : f.registeredItems) || []).map(
+      (g) => g.value
+    ), l = i.indexOf(this.value), a = l === 0, d = i.length > 0 && l === i.length - 1;
+    return b(
+      r,
+      n && `${r}--${n}`,
+      s && `${r}--disabled`,
+      o && `${r}--selected`,
+      t && `${r}--fluid`,
+      a && `${r}--first`,
+      d && !a && `${r}--last`,
+      this.hasIcon && !this.hasContent && `${r}--iconOnly`
+    );
+  }
+  render() {
+    const { selectedValue: t } = this.segmentedControlContext || {}, e = this.isDisabled(), n = t === this.value;
+    this.hasIcon = this.querySelector('[slot="icon"]') !== null, this.hasContent = this.hasDefaultSlotContent();
+    const s = this.getClassName(), o = b(
+      N(),
+      `${r}__state-layer`
+    );
+    return u`
+      <bm-tooltip
+        placement="top"
+        .disabled=${e || !this.shouldShowTooltip()}
+        .defaultOpen=${!1}
+      >
+        <span slot="text">${this.getTooltipText()}</span>
+        <button
+          slot="trigger"
+          class=${s}
+          data-floating-anchor
+          tabindex=${n ? "0" : "-1"}
+          aria-label=${this.getTooltipText()}
+          @keydown=${this.handleKeyDown}
+          @click=${this.handleClick}
+        >
+          <span class=${`${r}__content`}>
+            ${this.hasIcon ? u`<span class=${`${r}__icon`}>
+                  <slot name="icon"></slot>
+                </span>` : p}
+            ${this.hasContent ? u`<span class="${r}__controlText">
+                  <slot></slot>
+                </span>` : p}
+          </span>
+          ${e ? p : u`<span id="stateLayer" class=${o}></span>`}
+        </button>
+      </bm-tooltip>
+    `;
+  }
+};
+h.styles = [
+  w(A),
+  D,
+  /**
+   * In order to ensure the overflow observer works with wrappers we need to
+   * mount these styles to the host element. This ensures we lock the width of
+   * the item to the content width.
+   */
+  x`
+      :host {
+        flex-shrink: 1;
+        min-width: 0;
+        display: flex;
+      }
+    `
+];
+c([
+  m({ type: String })
+], h.prototype, "value", 2);
+c([
+  m({ type: Boolean })
+], h.prototype, "disabled", 2);
+c([
+  C()
+], h.prototype, "selected", 2);
+c([
+  C()
+], h.prototype, "isContentOverflowing", 2);
+c([
+  v({ context: k, subscribe: !0 }),
+  m({ attribute: !1 })
+], h.prototype, "segmentedControlContext", 2);
+c([
+  O(`.${r}__controlText`)
+], h.prototype, "_contentRef", 2);
+h = c([
+  y("bm-segmented-control-item")
+], h);
+export {
+  h as BmSegmentedControlItem
+};

package/local/SegmentedControl/SegmentedControlList.js

@@ -0,0 +1,59 @@
+import { c as d } from "../chunks/consume.Ce9k1-wN.js";
+import { r as c, a as C, x as p } from "../chunks/lit-element.CJtt9wj5.js";
+import { n as u, c as f } from "../chunks/register-custom-element.vod7zfGv.js";
+import { c as g, g as h } from "../chunks/classNames.C6fNrXWF.js";
+import "../chunks/constants.jOWREYQE.js";
+import { s as x } from "../chunks/segmentedControl.module.BPXEWodj.js";
+import { segmentedControlContext as b } from "./SegmentedControl.context.js";
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (s, t, o, n) => {
+  for (var e = n > 1 ? void 0 : n ? _(t, o) : t, l = s.length - 1, m; l >= 0; l--)
+    (m = s[l]) && (e = (n ? m(t, o, e) : m(e)) || e);
+  return n && e && v(t, o, e), e;
+};
+const { subElementClassPrefix: i } = h("segmented-control");
+let r = class extends C {
+  /**
+   * Necessary for initializing the controlItems array and setting the initial selected value
+   */
+  _handleSlotChange() {
+    var s;
+    if (this.segmentedControlContext && !((s = this.segmentedControlContext) != null && s.selectedValue)) {
+      const o = (this.segmentedControlContext.registeredItems || []).find(
+        (e) => {
+          var l;
+          return !e.disabled && !((l = this.segmentedControlContext) != null && l.disabled);
+        }
+      ), n = (o == null ? void 0 : o.value) || "";
+      n && this.dispatchEvent(
+        new CustomEvent("bm-selected", {
+          detail: { value: n },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  render() {
+    var t;
+    const s = g(
+      `${i}list`,
+      ((t = this.segmentedControlContext) == null ? void 0 : t.fluid) && `${i}list--fluid`
+    );
+    return p`
+      <div class=${s} part="list">
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+r.styles = c(x);
+a([
+  d({ context: b, subscribe: !0 }),
+  u({ attribute: !1 })
+], r.prototype, "segmentedControlContext", 2);
+r = a([
+  f("bm-segmented-control-list")
+], r);
+export {
+  r as BmSegmentedControlList
+};

package/local/SegmentedControl/SegmentedControlPanel.js

@@ -0,0 +1,41 @@
+import { c as p } from "../chunks/consume.Ce9k1-wN.js";
+import { r as i, a as u, x as d } from "../chunks/lit-element.CJtt9wj5.js";
+import { n as c, c as f } from "../chunks/register-custom-element.vod7zfGv.js";
+import { c as C, g } from "../chunks/classNames.C6fNrXWF.js";
+import "../chunks/constants.jOWREYQE.js";
+import { s as v } from "../chunks/segmentedControl.module.BPXEWodj.js";
+import { segmentedControlContext as b } from "./SegmentedControl.context.js";
+var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (r, e, o, t) => {
+  for (var s = t > 1 ? void 0 : t ? _(e, o) : e, n = r.length - 1, a; n >= 0; n--)
+    (a = r[n]) && (s = (t ? a(e, o, s) : a(s)) || s);
+  return t && s && x(e, o, s), s;
+};
+const { subElementClassPrefix: P } = g("segmented-control");
+let l = class extends u {
+  constructor() {
+    super(...arguments), this.value = "";
+  }
+  render() {
+    var t;
+    const r = ((t = this.segmentedControlContext) == null ? void 0 : t.selectedValue) === this.value, e = `${P}panel`, o = C(e, r && `${e}--selected`);
+    return d`
+      <div class=${o} part="panel" aria-disabled=${!r}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+l.styles = i(v);
+m([
+  c({ type: String })
+], l.prototype, "value", 2);
+m([
+  p({ context: b, subscribe: !0 }),
+  c({ attribute: !1 })
+], l.prototype, "segmentedControlContext", 2);
+l = m([
+  f("bm-segmented-control-panel")
+], l);
+export {
+  l as BmSegmentedControlPanel
+};

package/local/SegmentedControl/index.js

@@ -0,0 +1,10 @@
+import { BmSegmentedControl as t } from "./SegmentedControl.js";
+import { BmSegmentedControlItem as r } from "./SegmentedControlItem.js";
+import { BmSegmentedControlList as l } from "./SegmentedControlList.js";
+import { BmSegmentedControlPanel as f } from "./SegmentedControlPanel.js";
+export {
+  t as BmSegmentedControl,
+  r as BmSegmentedControlItem,
+  l as BmSegmentedControlList,
+  f as BmSegmentedControlPanel
+};