@viasat/beam-web-components 2.0.0

package/SegmentedControl/SegmentedControlItem.js

@@ -0,0 +1,284 @@
+import { consume as v } from "@lit/context";
+import { unsafeCSS as w, css as x, nothing as m, html as u, LitElement as _ } from "lit";
+import { property as p, state as C, query as y } from "lit/decorators.js";
+import b from "clsx";
+import { c as O, g as T } from "../chunks/classNames.Cq_tbDRp.js";
+import { a as E } from "../chunks/constants.jOWREYQE.js";
+import { r as $ } from "../chunks/dom.C98AFbJh.js";
+import { s as S } from "../chunks/segmentedControl.module.BPXEWodj.js";
+import { c as A } from "../chunks/register-custom-element.DHGKOhmA.js";
+import { a as I } from "../chunks/helpers.AwJwaZvv.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 = O(() => {
+      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 } = T("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 = $(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>` : m}
+            ${this.hasContent ? u`<span class="${r}__controlText">
+                  <slot></slot>
+                </span>` : m}
+          </span>
+          ${e ? m : u`<span id="stateLayer" class=${o}></span>`}
+        </button>
+      </bm-tooltip>
+    `;
+  }
+};
+h.styles = [
+  w(S),
+  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([
+  p({ type: String })
+], h.prototype, "value", 2);
+c([
+  p({ type: Boolean })
+], h.prototype, "disabled", 2);
+c([
+  C()
+], h.prototype, "selected", 2);
+c([
+  C()
+], h.prototype, "isContentOverflowing", 2);
+c([
+  v({ context: k, subscribe: !0 }),
+  p({ attribute: !1 })
+], h.prototype, "segmentedControlContext", 2);
+c([
+  y(`.${r}__controlText`)
+], h.prototype, "_contentRef", 2);
+h = c([
+  A("bm-segmented-control-item")
+], h);
+export {
+  h as BmSegmentedControlItem
+};

package/SegmentedControl/SegmentedControlList.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import { SegmentedControlContext } from './SegmentedControl.context';
+/**
+ *
+ * @fires bm-selected - Dispatched when an item is selected
+ *
+ * @slot default - Specify the items of the list
+ */
+export declare class BmSegmentedControlList extends LitElement {
+    static styles: import('lit').CSSResult;
+    segmentedControlContext: SegmentedControlContext | undefined;
+    /**
+     * Necessary for initializing the controlItems array and setting the initial selected value
+     */
+    private _handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-segmented-control-list': BmSegmentedControlList;
+    }
+}
+//# sourceMappingURL=SegmentedControlList.d.ts.map

package/SegmentedControl/SegmentedControlList.js

@@ -0,0 +1,61 @@
+import { consume as a } from "@lit/context";
+import { unsafeCSS as c, LitElement as C, html as p } from "lit";
+import { property as f } from "lit/decorators.js";
+import u from "clsx";
+import { g } from "../chunks/classNames.Cq_tbDRp.js";
+import "../chunks/constants.jOWREYQE.js";
+import { s as h } from "../chunks/segmentedControl.module.BPXEWodj.js";
+import { c as b } from "../chunks/register-custom-element.DHGKOhmA.js";
+import { segmentedControlContext as v } from "./SegmentedControl.context.js";
+var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, d = (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 && x(t, o, e), e;
+};
+const { subElementClassPrefix: i } = g("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 = u(
+      `${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(h);
+d([
+  a({ context: v, subscribe: !0 }),
+  f({ attribute: !1 })
+], r.prototype, "segmentedControlContext", 2);
+r = d([
+  b("bm-segmented-control-list")
+], r);
+export {
+  r as BmSegmentedControlList
+};

package/SegmentedControl/SegmentedControlPanel.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import { SegmentedControlContext } from './SegmentedControl.context';
+/**
+ * @slot default - Specify the content of the panel
+ */
+export declare class BmSegmentedControlPanel extends LitElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Specify the value of the panel
+     * @default ''
+     */
+    value: string;
+    segmentedControlContext: SegmentedControlContext | undefined;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-segmented-control-panel': BmSegmentedControlPanel;
+    }
+}
+//# sourceMappingURL=SegmentedControlPanel.d.ts.map

package/SegmentedControl/SegmentedControlPanel.js

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

package/SegmentedControl/index.d.ts

@@ -0,0 +1,5 @@
+export * from './SegmentedControl';
+export * from './SegmentedControlItem';
+export * from './SegmentedControlList';
+export * from './SegmentedControlPanel';
+//# sourceMappingURL=index.d.ts.map

package/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
+};

package/Spinner/Spinner.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+import { SpinnerSizes, SpinnerValues } from '@viasat/beam-shared/components/spinner';
+import { ThemeTypes } from '@viasat/beam-shared/utils';
+/**
+ * `bm-spinner`
+ *
+ * @slot body - Specify the body text for Spinner. Falls back to `body` prop if not provided.
+ * @slot heading - Specify the heading text for Spinner. Falls back to `heading` prop if not provided.
+ */
+export declare class BmSpinner extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /**
+     * Specify the size of the spinner
+     * @default 'md'
+     */
+    size: SpinnerSizes;
+    /**
+     * Specify if a spinner is determinate by setting a value
+     */
+    value?: SpinnerValues;
+    /**
+     * Specify if a percentage displays with the Spinner
+     * @default undefined
+     */
+    showPercentage?: boolean;
+    /**
+     * Specify the heading text for Spinner (used if no heading slot is provided).
+     * @default undefined
+     */
+    heading?: string;
+    /**
+     * Specify the body text for Spinner (used if no body slot is provided).
+     * @default undefined
+     */
+    body?: string;
+    /**
+     * Specify the theme of the Spinner. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    private headingSlot;
+    private bodySlot;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-spinner': BmSpinner;
+    }
+}
+//# sourceMappingURL=Spinner.d.ts.map