@viasat/beam-web-components 2.0.0

package/List/List.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+import { ListKind, ListSize, ListDensity } from '@viasat/beam-shared/components/list';
+import { ListContext } from './List.context';
+/**
+ * @slot default - Add list items to create a List
+ */
+export declare class BmList extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    private listeners;
+    listContext: ListContext;
+    parentListContext: ListContext | undefined;
+    /**
+     * Specify the kind of List
+     * @default 'ordered'
+     */
+    kind?: ListKind;
+    /**
+     * Specify the size of List
+     * @default 'md'
+     */
+    size?: ListSize;
+    /**
+     * Specify the density of the List
+     * @default 'md'
+     */
+    density?: ListDensity;
+    /**
+     * Specify if the List has an indentation.
+     * Valid only for `unstyled` and `withIcons` List kinds.
+     * @default true
+     */
+    indent?: boolean;
+    updated(): void;
+    nested: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-list': BmList;
+    }
+}
+//# sourceMappingURL=List.d.ts.map

package/List/List.js

@@ -0,0 +1,101 @@
+import { provide as w, consume as S } from "@lit/context";
+import { unsafeCSS as P, LitElement as z, html as m } from "lit";
+import { property as d, state as E } from "lit/decorators.js";
+import c from "clsx";
+import { g as M } from "../chunks/classNames.Cq_tbDRp.js";
+import "../chunks/constants.jOWREYQE.js";
+import { l as W } from "../chunks/list.module.CZRPBLzy.js";
+import { c as B } from "../chunks/register-custom-element.DHGKOhmA.js";
+import { ListContext as v } from "./List.context.js";
+var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, _ = (t) => {
+  throw TypeError(t);
+}, n = (t, e, s, a) => {
+  for (var o = a > 1 ? void 0 : a ? O(e, s) : e, h = t.length - 1, p; h >= 0; h--)
+    (p = t[h]) && (o = (a ? p(e, s, o) : p(o)) || o);
+  return a && o && N(e, s, o), o;
+}, k = (t, e, s) => e.has(t) || _("Cannot " + s), y = (t, e, s) => (k(t, e, "read from private field"), s ? s.call(t) : e.get(t)), C = (t, e, s) => e.has(t) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), f = (t, e, s) => (k(t, e, "access private method"), s), x, u, l, L, $, g;
+const { baseClassNamePrefix: I, classModifierPrefix: r } = M("list");
+let i = class extends z {
+  constructor() {
+    super(...arguments), C(this, l), this.listeners = /* @__PURE__ */ new Set(), this.listContext = {
+      kind: void 0,
+      size: void 0,
+      density: void 0,
+      indent: void 0,
+      nestCount: 0,
+      register: (t) => y(this, x).call(this, t),
+      unregister: (t) => y(this, u).call(this, t)
+    }, this.indent = !0, C(this, x, (t) => {
+      this.listeners.add(t);
+    }), C(this, u, (t) => {
+      this.listeners.delete(t);
+    }), this.nested = !1;
+  }
+  updated() {
+    f(this, l, L).call(this);
+  }
+  render() {
+    f(this, l, $).call(this), f(this, l, g).call(this);
+    let t = c(
+      I,
+      `${r}${this.listContext.kind}`,
+      `${r}${this.listContext.size}`,
+      `${r}density-${this.listContext.density}`,
+      this.nested && `${r}density-${this.listContext.density}--nested`
+    );
+    if (this.listContext.kind === "ordered")
+      return m`
+        <ol class=${t}>
+          <slot></slot>
+        </ol>
+      `;
+    const e = this.listContext.kind === "unstyled" || this.listContext.kind === "withIcons" ? this.listContext.indent : !1;
+    return t = c(t, e && `${r}indent`), this.listContext.nestCount > 0 && this.listContext.kind === "withIcons" && (t = c(t, `${r}wcWithIcons`)), m`
+      <ul class=${t}>
+        <slot></slot>
+      </ul>
+    `;
+  }
+};
+x = /* @__PURE__ */ new WeakMap();
+u = /* @__PURE__ */ new WeakMap();
+l = /* @__PURE__ */ new WeakSet();
+L = function() {
+  for (const t of this.listeners)
+    t.requestUpdate();
+};
+$ = function() {
+  var t, e, s;
+  this.listContext.kind = this.kind || ((t = this.parentListContext) == null ? void 0 : t.kind) || "ordered", this.listContext.size = this.size || ((e = this.parentListContext) == null ? void 0 : e.size) || "md", this.listContext.density = this.density || ((s = this.parentListContext) == null ? void 0 : s.density) || "md", this.listContext.indent = this.indent ?? !0;
+};
+g = function() {
+  this.parentListContext ? (this.listContext.kind === this.parentListContext.kind && (this.listContext.nestCount = this.parentListContext.nestCount + 1), this.nested = !0) : this.listContext.nestCount = 0;
+};
+i.styles = P(W);
+n([
+  w({ context: v })
+], i.prototype, "listContext", 2);
+n([
+  S({ context: v, subscribe: !0 })
+], i.prototype, "parentListContext", 2);
+n([
+  d({ type: String })
+], i.prototype, "kind", 2);
+n([
+  d({ type: String })
+], i.prototype, "size", 2);
+n([
+  d({ type: String })
+], i.prototype, "density", 2);
+n([
+  d({ type: Boolean })
+], i.prototype, "indent", 2);
+n([
+  E()
+], i.prototype, "nested", 2);
+i = n([
+  B("bm-list")
+], i);
+export {
+  i as BmList
+};

package/List/ListItem.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import { ListContext } from './List.context';
+/**
+ * @slot icon - Specify an Icon for the List.Item
+ * @slot default - Specify the text for List.Item
+ */
+export declare class BmListItem extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    listContext: ListContext | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _listComponents;
+    private _hasList;
+    updated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-list-item': BmListItem;
+    }
+}
+//# sourceMappingURL=ListItem.d.ts.map

package/List/ListItem.js

@@ -0,0 +1,90 @@
+import { consume as _ } from "@lit/context";
+import { unsafeCSS as v, LitElement as x, html as m, nothing as $ } from "lit";
+import { queryAssignedElements as g, state as y } from "lit/decorators.js";
+import { unsafeSVG as L } from "lit/directives/unsafe-svg.js";
+import c from "clsx";
+import "../chunks/constants.jOWREYQE.js";
+import { g as w } from "../chunks/classNames.Cq_tbDRp.js";
+import { l as S } from "../chunks/list.module.CZRPBLzy.js";
+import { c as b } from "../chunks/register-custom-element.DHGKOhmA.js";
+import { ListContext as E } from "./List.context.js";
+const I = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM5 4.99H8C8 6.65 6.66 8 5 8V4.99ZM5 12V10C7.76 10 10 7.75 10 4.99H12C12 8.86 8.87 12 5 12ZM5 18L8.5 13.5L11 16.51L14.5 12L19 18H5Z"
+    fill="currentColor"
+  />
+</svg>
+`, d = ["decimal", "lower-alpha", "lower-roman"], p = ["disc", "circle"];
+var M = Object.defineProperty, k = Object.getOwnPropertyDescriptor, C = (t) => {
+  throw TypeError(t);
+}, a = (t, s, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? k(s, e) : s, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (i = (n ? o(s, e, i) : o(i)) || i);
+  return n && i && M(s, e, i), i;
+}, B = (t, s, e) => s.has(t) || C("Cannot " + e), H = (t, s, e) => s.has(t) ? C("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), P = (t, s, e) => (B(t, s, "access private method"), e), h, u;
+const { subElementClassPrefix: f } = w("list");
+let r = class extends x {
+  constructor() {
+    super(...arguments), H(this, h), this._hasList = !1;
+  }
+  connectedCallback() {
+    var t, s;
+    super.connectedCallback(), (s = (t = this.listContext) == null ? void 0 : t.register) == null || s.call(t, this);
+  }
+  disconnectedCallback() {
+    var t, s;
+    super.disconnectedCallback(), (s = (t = this.listContext) == null ? void 0 : t.unregister) == null || s.call(t, this);
+  }
+  updated() {
+    this._hasList = this._listComponents.length > 0;
+  }
+  render() {
+    var e, n, i, l;
+    const t = `${f}item`;
+    let s = c(
+      t,
+      `${t}--${(e = this.listContext) == null ? void 0 : e.size}`,
+      !this._hasList && `${t}--density-${(n = this.listContext) == null ? void 0 : n.density}`
+    );
+    if (((i = this.listContext) == null ? void 0 : i.kind) === "ordered") {
+      const o = d[this.listContext.nestCount % d.length];
+      s = c(s, `${t}--${o}`);
+    }
+    if (((l = this.listContext) == null ? void 0 : l.kind) === "unordered") {
+      const o = p[this.listContext.nestCount % p.length];
+      s = c(s, `${t}--${o}`);
+    }
+    return m` <li class=${s}>
+      <span class=${`${t}__content`}>
+        ${P(this, h, u).call(this)}
+        <div>
+          <slot></slot>
+        </div>
+      </span>
+    </li>`;
+  }
+};
+h = /* @__PURE__ */ new WeakSet();
+u = function() {
+  var e, n;
+  const t = L(I), s = `${f}item--${(e = this.listContext) == null ? void 0 : e.size}__icon`;
+  return m`${((n = this.listContext) == null ? void 0 : n.kind) === "withIcons" ? m`<slot name="icon" class=${s}>${t}</slot>` : $}`;
+};
+r.styles = v(S);
+a([
+  _({ context: E, subscribe: !0 })
+], r.prototype, "listContext", 2);
+a([
+  g({ selector: "bm-list" })
+], r.prototype, "_listComponents", 2);
+a([
+  y()
+], r.prototype, "_hasList", 2);
+r = a([
+  b("bm-list-item")
+], r);
+export {
+  r as BmListItem
+};

package/List/index.d.ts

@@ -0,0 +1,3 @@
+export * from './List';
+export * from './ListItem';
+//# sourceMappingURL=index.d.ts.map

package/List/index.js

@@ -0,0 +1,6 @@
+import { BmList as o } from "./List.js";
+import { BmListItem as e } from "./ListItem.js";
+export {
+  o as BmList,
+  e as BmListItem
+};

package/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+import { ProgressBarSize, ProgressBarState } from '@viasat/beam-shared/components/progressBar';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+/**
+ * `bm-progress-bar`
+ */
+export declare class BmProgressBar extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    /**
+     * Specify the ProgressBar state
+     * @default 'active'
+     */
+    state: ProgressBarState;
+    /**
+     * Specify the size of the ProgressBar
+     * @default 'md'
+     */
+    size: ProgressBarSize;
+    /**
+     * Provide text for the ProgressBar label
+     */
+    label?: string | undefined;
+    /**
+     * Specify helperText for ProgressBar. helperText is required for the Error state.
+     */
+    helperText?: string | undefined;
+    /**
+     * Specify if the ProgressBar has no corner radius
+     * @default false
+     */
+    fullWidth: boolean;
+    /**
+     * Specify the theme of the ProgressBar. By default it inherits the theme from the parent
+     */
+    theme: ThemeTypes | undefined;
+    /**
+     * Specify if a ProgressBar is determinate by setting a value between 0 and 100.
+     */
+    value?: number;
+    /**
+     * Specify the aria-label for the ProgressBar
+     */
+    progressbarAriaLabel?: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-progress-bar': BmProgressBar;
+    }
+}
+//# sourceMappingURL=ProgressBar.d.ts.map

package/ProgressBar/ProgressBar.js

@@ -0,0 +1,128 @@
+import { unsafeCSS as k, LitElement as y, html as m, nothing as p } from "lit";
+import { property as o } from "lit/decorators.js";
+import $ from "clsx";
+import { t as x } from "../chunks/constants.jOWREYQE.js";
+import { g as w } from "../chunks/classNames.Cq_tbDRp.js";
+import { r as z } from "../chunks/delegate.baxDQosr.js";
+import { c as S } from "../chunks/register-custom-element.DHGKOhmA.js";
+function P(r, e) {
+  if (r === "error")
+    return Math.max(4, e ?? 4);
+  if (r === "success")
+    return 100;
+  if (e !== void 0)
+    return Math.max(0, Math.min(100, e));
+}
+function C(r) {
+  return r === "success" ? {
+    appearance: "positive",
+    hideIcon: !1
+  } : r === "error" ? {
+    appearance: "negative",
+    hideIcon: !1
+  } : {
+    appearance: "info",
+    hideIcon: !0
+  };
+}
+const T = ':root,:host,.bm-light,.bm-dark .bm-inverse,[data-bm-theme~=bm-light]{--bm-comp-progress-bar-color-indicator-default: var( --bm-utility-color-accent-default, #00768f );--bm-comp-progress-bar-color-indicator-success: var( --bm-sem-color-surface-positive-strong, #187c36 );--bm-comp-progress-bar-color-indicator-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-progress-bar-color-track: var(--bm-sem-color-border-02, #d1dae0);--bm-comp-progress-bar-color-label: var(--bm-sem-color-text-primary, #141d24);--bm-comp-progress-bar-radius: var(--bm-sem-radius-round, 624.938rem);--bm-comp-progress-bar-space-label-bottom: var(--bm-sem-space-50, .5rem);--bm-comp-progress-bar-space-status-top: var(--bm-sem-space-25, .25rem);--bm-comp-progress-bar-size-sm-height: var( --bm-primitive-dimension-25, .25rem );--bm-comp-progress-bar-size-md-height: var( --bm-primitive-dimension-50, .5rem );--bm-comp-progress-bar-size-lg-height: var( --bm-primitive-dimension-75, .75rem );--bm-comp-progress-bar-typo-label: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" )}:host,.bm-dark,.bm-light .bm-inverse,[data-bm-theme~=bm-dark]{--bm-comp-progress-bar-color-indicator-default: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-progress-bar-color-indicator-success: var( --bm-sem-color-surface-positive-strong, #b3eb9e );--bm-comp-progress-bar-color-indicator-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-progress-bar-color-track: var(--bm-sem-color-border-02, #465967);--bm-comp-progress-bar-color-label: var(--bm-sem-color-text-primary, #ffffff);--bm-comp-progress-bar-radius: var(--bm-sem-radius-round, 624.938rem);--bm-comp-progress-bar-space-label-bottom: var(--bm-sem-space-50, .5rem);--bm-comp-progress-bar-space-status-top: var(--bm-sem-space-25, .25rem);--bm-comp-progress-bar-size-sm-height: var( --bm-primitive-dimension-25, .25rem );--bm-comp-progress-bar-size-md-height: var( --bm-primitive-dimension-50, .5rem );--bm-comp-progress-bar-size-lg-height: var( --bm-primitive-dimension-75, .75rem );--bm-comp-progress-bar-typo-label: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" )}.bm-progress-bar{display:flex;align-items:stretch;flex-direction:column}.bm-progress-bar .bm-progress-bar__label{margin-bottom:var(--bm-comp-progress-bar-space-label-bottom);font:var(--bm-comp-progress-bar-typo-label);color:var(--bm-comp-progress-bar-color-label)}.bm-progress-bar .bm-progress-bar__track{height:var(--bm-comp-progress-bar-size-md-height);border-radius:var(--bm-comp-progress-bar-radius);background-color:var(--bm-comp-progress-bar-color-track);display:flex;overflow:hidden}.bm-progress-bar .bm-progress-bar__status{margin-top:var(--bm-comp-progress-bar-space-status-top)}.bm-progress-bar--sm .bm-progress-bar__track{height:var(--bm-comp-progress-bar-size-sm-height)}.bm-progress-bar--lg .bm-progress-bar__track{height:var(--bm-comp-progress-bar-size-lg-height)}.bm-progress-bar--full-width .bm-progress-bar__track{border-radius:0}.bm-progress-bar--active .bm-progress-bar__indicator{background-color:var(--bm-comp-progress-bar-color-indicator-default)}.bm-progress-bar--success .bm-progress-bar__indicator{background-color:var(--bm-comp-progress-bar-color-indicator-success)}.bm-progress-bar--error .bm-progress-bar__indicator{background-color:var(--bm-comp-progress-bar-color-indicator-error)}.bm-progress-bar--determinate .bm-progress-bar__indicator{transition-property:width;transition-duration:.3s;transition-timing-function:ease-out}.bm-progress-bar--indeterminate.bm-progress-bar--active .bm-progress-bar__indicator{width:100%;-webkit-mask-image:linear-gradient(to right,transparent 43.0555555556%,black 50%,transparent 56.9444444444%);mask-image:linear-gradient(to right,transparent 43.0555555556%,black 50%,transparent 56.9444444444%);-webkit-mask-size:240%;mask-size:240%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;animation:2s linear infinite bm-progress-bar-indeterminate-indicator-animation}.bm-progress-bar--indeterminate.bm-progress-bar--active .bm-progress-bar__indicator:dir(rtl){animation-direction:reverse}@keyframes bm-progress-bar-indeterminate-indicator-animation{0%{-webkit-mask-position:right;mask-position:right}to{-webkit-mask-position:left;mask-position:left}}';
+var W = Object.defineProperty, M = Object.getOwnPropertyDescriptor, _ = (r) => {
+  throw TypeError(r);
+}, t = (r, e, s, c) => {
+  for (var i = c > 1 ? void 0 : c ? M(e, s) : e, l = r.length - 1, g; l >= 0; l--)
+    (g = r[l]) && (i = (c ? g(e, s, i) : g(i)) || i);
+  return c && i && W(e, s, i), i;
+}, E = (r, e, s) => e.has(r) || _("Cannot " + s), d = (r, e, s) => (E(r, e, "read from private field"), s ? s.call(r) : e.get(r)), h = (r, e, s) => e.has(r) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, s), v, u, f;
+const { baseClassNamePrefix: N, subElementClassPrefix: b, classModifierPrefix: n } = w("progress-bar");
+let a = class extends y {
+  constructor() {
+    super(...arguments), this.state = "active", this.size = "md", this.fullWidth = !1, h(this, v, () => this.label ? m`<label
+      id="label"
+      for="progress"
+      class=${`${b}label`}
+      >${this.label}</label
+    >` : ""), h(this, u, (r) => {
+      const { progressbarAriaLabel: e } = this, s = P(this.state, this.value);
+      return m`<div
+      id="progress"
+      role="progressbar"
+      aria-label=${e ?? p}
+      aria-labelledby=${this.label ? "label" : p}
+      aria-describedby=${this.helperText ? "status" : p}
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-valuenow=${this.value ?? p}
+      class=${`${b}track`}
+    >
+      ${r === "determinate" ? m`<div
+            class=${`${b}indicator`}
+            style=${s !== void 0 ? `width: ${s}%` : p}
+          ></div>` : m`<div class=${`${b}indicator`}></div>`}
+    </div>`;
+    }), h(this, f, () => {
+      if (!this.helperText)
+        return "";
+      const r = C(this.state);
+      return m`
+      <bm-helper-text
+        id="status"
+        class=${`${b}status`}
+        .hideIcon=${r.hideIcon}
+        appearance=${r.appearance}
+        text=${this.helperText}
+      ></bm-helper-text>
+    `;
+    });
+  }
+  render() {
+    const r = this.state !== "success" && this.value === void 0 ? "indeterminate" : "determinate", e = $(
+      N,
+      this.theme && x(this.theme),
+      `${n}${r}`,
+      `${n}${this.state}`,
+      this.size && `${n}${this.size}`,
+      this.fullWidth && `${n}full-width`,
+      this.className
+    );
+    return m`
+      <div class=${e}>
+        ${d(this, v).call(this)} ${d(this, u).call(this, r)} ${d(this, f).call(this)}
+      </div>
+    `;
+  }
+};
+v = /* @__PURE__ */ new WeakMap();
+u = /* @__PURE__ */ new WeakMap();
+f = /* @__PURE__ */ new WeakMap();
+z(a);
+a.styles = [k(T)];
+t([
+  o({ type: String })
+], a.prototype, "state", 2);
+t([
+  o({ type: String })
+], a.prototype, "size", 2);
+t([
+  o({ type: String })
+], a.prototype, "label", 2);
+t([
+  o({ type: String })
+], a.prototype, "helperText", 2);
+t([
+  o({ type: Boolean })
+], a.prototype, "fullWidth", 2);
+t([
+  o({ type: String })
+], a.prototype, "theme", 2);
+t([
+  o({ type: Number })
+], a.prototype, "value", 2);
+t([
+  o({ type: String })
+], a.prototype, "progressbarAriaLabel", 2);
+a = t([
+  S("bm-progress-bar")
+], a);
+export {
+  a as BmProgressBar
+};

package/ProgressBar/index.d.ts

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

package/ProgressBar/index.js

@@ -0,0 +1,4 @@
+import { BmProgressBar as e } from "./ProgressBar.js";
+export {
+  e as BmProgressBar
+};