@viasat/beam-web-components 2.0.0

package/local/wip/FileUpload/FileUpload.Dropzone.js

@@ -0,0 +1,149 @@
+import { c as $ } from "../../chunks/consume.Ce9k1-wN.js";
+import { r as D, a as v, E as y, x } from "../../chunks/lit-element.CJtt9wj5.js";
+import { n as p, c as C } from "../../chunks/register-custom-element.vod7zfGv.js";
+import { r as b } from "../../chunks/state.CqiuSzAl.js";
+import { e as g, n as u } from "../../chunks/ref.B7e1Hu4F.js";
+import { o as E } from "../../chunks/unsafe-svg.HSGf1NCU.js";
+import { c as _, g as R } from "../../chunks/classNames.C6fNrXWF.js";
+import { U as I } from "../../chunks/Upload.B9YEyp7b.js";
+import { t as U } from "../../chunks/constants.jOWREYQE.js";
+import { f as w } from "../../chunks/fileUpload.module.kN6o64aL.js";
+import { stateLayerStyles as P, stateLayerClassName as k } from "../../StateLayer/StateLayer.js";
+import { fileUploadContext as S } from "./FileUploadContext.js";
+import "../../Icon/Icon.js";
+var T = Object.defineProperty, B = Object.getOwnPropertyDescriptor, m = (e) => {
+  throw TypeError(e);
+}, o = (e, t, a, n) => {
+  for (var i = n > 1 ? void 0 : n ? B(t, a) : t, h = e.length - 1, d; h >= 0; h--)
+    (d = e[h]) && (i = (n ? d(t, a, i) : d(i)) || i);
+  return n && i && T(t, a, i), i;
+}, O = (e, t, a) => t.has(e) || m("Cannot " + a), l = (e, t, a) => (O(e, t, "read from private field"), a ? a.call(e) : t.get(e)), N = (e, t, a) => t.has(e) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), r;
+const { baseClassNamePrefix: A, classModifierPrefix: c, subElementClassPrefix: f } = R("file-upload-dropzone");
+let s = class extends v {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.fileUploadContext = {}, this.isDragging = !1, this.fileInputRef = g(), N(this, r, () => {
+      var e;
+      return !!(this.disabled || (e = this.fileUploadContext) != null && e.ctxDisabled);
+    }), this.rootDivRef = g();
+  }
+  handleInputChange(e) {
+    var t, a;
+    e.target.files && ((a = (t = this.fileUploadContext) == null ? void 0 : t.ctxAddFiles) == null || a.call(t, e.target.files));
+  }
+  handleDropFiles(e) {
+    var a;
+    if (e.preventDefault(), e.stopPropagation(), this.isDragging = !1, l(this, r).call(this) || !this.fileInputRef.value)
+      return;
+    this.fileInputRef.value.value = "", this.fileInputRef.value.files = ((a = e.dataTransfer) == null ? void 0 : a.files) ?? null;
+    const t = new Event("change", {
+      bubbles: !0
+    });
+    this.fileInputRef.value.dispatchEvent(t);
+  }
+  handleKeyDown(e) {
+    var t;
+    l(this, r).call(this) || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), (t = this.fileInputRef.value) == null || t.click());
+  }
+  focus() {
+    var e;
+    (e = this.rootDivRef.value) == null || e.focus();
+  }
+  handleClick(e) {
+    var t;
+    l(this, r).call(this) ? (e.preventDefault(), e.stopPropagation()) : (t = this.fileInputRef.value) == null || t.click();
+  }
+  handleDragStart(e) {
+    e.dataTransfer && (e.dataTransfer.effectAllowed = "copy");
+  }
+  handleDragEnter(e) {
+    this.isDragging = !0, e.dataTransfer && (e.dataTransfer.dropEffect = l(this, r).call(this) ? "none" : "copy");
+  }
+  handleDragLeave() {
+    this.isDragging && (this.isDragging = !1);
+  }
+  handleDragOver(e) {
+    e.preventDefault(), this.isDragging = !0, e.dataTransfer && (e.dataTransfer.dropEffect = l(this, r).call(this) ? "none" : "copy");
+  }
+  render() {
+    const { ctxAccept: e, ctxMultiple: t, ctxError: a } = this.fileUploadContext ?? {}, n = this.accept || e, i = this.multiple || t, h = _(
+      A,
+      this.theme && U(this.theme),
+      l(this, r).call(this) && `${c}disabled`,
+      (this.error ?? a) && `${c}error`,
+      this.isDragging && `${c}dragging`
+    );
+    return x`
+      <div
+        ${u(this.rootDivRef)}
+        class=${h}
+        role="button"
+        ?aria-disabled=${l(this, r).call(this)}
+        tabindex=${l(this, r).call(this) ? y : 0}
+        @click=${this.handleClick}
+        @dragstart=${this.handleDragStart}
+        @dragenter=${this.handleDragEnter}
+        @dragleave=${this.handleDragLeave}
+        @dragover=${this.handleDragOver}
+        @drop=${this.handleDropFiles}
+        @keydown=${this.handleKeyDown}
+      >
+        <input
+          ${u(this.fileInputRef)}
+          name=${this.name}
+          type="file"
+          hidden
+          accept=${n}
+          ?multiple=${i}
+          @change="${this.handleInputChange}"
+          ?disabled=${l(this, r).call(this)}
+        />
+        <span
+          aria-hidden="true"
+          class=${`${k()} ${f}state-layer`}
+        ></span>
+        <bm-icon class=${`${f}icon`}
+          >${E(I)}</bm-icon
+        >
+        <slot>
+          <span class=${`${f}text`}
+            >Drag and drop or
+            <span class=${`${f}link`}>click</span> to
+            upload</span
+          >
+        </slot>
+      </div>
+    `;
+  }
+};
+r = /* @__PURE__ */ new WeakMap();
+s.styles = [D(w), P];
+o([
+  p({ type: Boolean })
+], s.prototype, "error", 2);
+o([
+  p({ type: String })
+], s.prototype, "theme", 2);
+o([
+  p({ type: Boolean })
+], s.prototype, "disabled", 2);
+o([
+  p({ type: String })
+], s.prototype, "accept", 2);
+o([
+  p({ type: String })
+], s.prototype, "name", 2);
+o([
+  p({ type: Boolean })
+], s.prototype, "multiple", 2);
+o([
+  $({ context: S, subscribe: !0 })
+], s.prototype, "fileUploadContext", 2);
+o([
+  b()
+], s.prototype, "isDragging", 2);
+s = o([
+  C("bm-file-upload-dropzone")
+], s);
+export {
+  s as BmFileUploadDropzone
+};

package/local/wip/FileUpload/FileUpload.List.Item.js

@@ -0,0 +1,201 @@
+import { c as B } from "../../chunks/consume.Ce9k1-wN.js";
+import { r as T, a as M, x as r, E as u } from "../../chunks/lit-element.CJtt9wj5.js";
+import { n as c, c as W } from "../../chunks/register-custom-element.vod7zfGv.js";
+import { e as _, n as C } from "../../chunks/ref.B7e1Hu4F.js";
+import { o as y } from "../../chunks/unsafe-svg.HSGf1NCU.js";
+import { c as D, g as H } from "../../chunks/classNames.C6fNrXWF.js";
+import { C as L, E as R } from "../../chunks/index.Bz1Jq4c2.js";
+import { t as U, p as O } from "../../chunks/constants.jOWREYQE.js";
+import { f as V } from "../../chunks/fileUpload.module.kN6o64aL.js";
+import { a as k, c as A } from "../../chunks/tokens.CTW8Tt94.js";
+import { fileUploadListContext as Z } from "./FileUploadListContext.js";
+import "../../Icon/Icon.js";
+import "../../Tooltip/Tooltip.js";
+import "../../CloseButton/CloseButton.js";
+import "../../ProgressBar/ProgressBar.js";
+const G = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_501_2445)">
+    <path
+      d="M14 2H6C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_501_2445">
+      <rect width="24" height="24" fill="none" />
+    </clipPath>
+  </defs>
+</svg>
+`;
+var q = Object.defineProperty, J = Object.getOwnPropertyDescriptor, x = (t) => {
+  throw TypeError(t);
+}, o = (t, e, s, m) => {
+  for (var n = m > 1 ? void 0 : m ? J(e, s) : e, $ = t.length - 1, v; $ >= 0; $--)
+    (v = t[$]) && (n = (m ? v(e, s, n) : v(n)) || n);
+  return m && n && q(e, s, n), n;
+}, S = (t, e, s) => e.has(t) || x("Cannot " + s), h = (t, e, s) => (S(t, e, "read from private field"), s ? s.call(t) : e.get(t)), g = (t, e, s) => e.has(t) ? x("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), p = (t, e, s) => (S(t, e, "access private method"), s), f, a, z, E, N, w, I, P, F, d;
+const { baseClassNamePrefix: K, subElementClassPrefix: l, classModifierPrefix: b } = H("file-upload-list-item"), Q = {
+  error: { customIconColor: A, icon: R },
+  success: {
+    customIconColor: k,
+    icon: L
+  }
+};
+let i = class extends M {
+  constructor() {
+    super(...arguments), g(this, a), this.error = "", this.size = "md", this.state = "uploaded", this.progress = 0, g(this, f, () => {
+      var t;
+      return !!(this.disabled || (t = this.listContext) != null && t.ctxDisabled);
+    }), this.tooltipRef = _(), this.fileNameRef = _(), g(this, d, () => {
+      var t;
+      return ((t = this.listContext) == null ? void 0 : t.ctxSize) ?? this.size ?? "md";
+    });
+  }
+  render() {
+    const { ctxThumbnail: t } = this.listContext ?? {}, e = t === !1 ? !1 : this.thumbnail ?? t ?? !1, s = D(
+      K,
+      this.theme && U(this.theme),
+      `${b}${h(this, d).call(this)}`,
+      `${b}${this.state}`,
+      h(this, f).call(this) && `${b}disabled`
+    );
+    return r`
+      <div class=${s}>
+        ${p(this, a, z).call(this, e)}
+        <div class=${`${l}content`}>
+          <div class=${`${l}content-start`}>
+            ${p(this, a, E).call(this)} ${p(this, a, N).call(this)} ${p(this, a, w).call(this)}
+          </div>
+          <div class=${`${l}content-end`}>
+            ${p(this, a, I).call(this)} ${p(this, a, P).call(this)}
+          </div>
+        </div>
+        ${p(this, a, F).call(this)}
+      </div>
+    `;
+  }
+};
+f = /* @__PURE__ */ new WeakMap();
+a = /* @__PURE__ */ new WeakSet();
+z = function(t) {
+  return t ? r`
+      <div class=${`${l}thumbnail`}>
+        ${t === !0 ? r`<bm-icon
+              color="secondary"
+              icon="image"
+              size="${h(this, d).call(this) === "md" ? "sm" : "md"}"
+            >
+              ${y(G)}
+            </bm-icon>` : r`<img src=${t} alt=${this.fileName} />`}
+      </div>
+    ` : u;
+};
+E = function() {
+  return r`
+      <bm-tooltip @bm-toggle=${() => {
+    const e = this.fileNameRef.value, s = this.tooltipRef.value;
+    if (!e || !s)
+      return;
+    const { offsetWidth: m, scrollWidth: n } = e;
+    n <= m && (s.open = !1);
+  }} ${C(this.tooltipRef)}>
+        <span slot="text">${this.fileName}</span>
+        <span
+          slot="trigger"
+          class=${`${l}filename`}
+          ${C(this.fileNameRef)}
+        >
+          ${this.fileName}
+        </span>
+      </bm-tooltip>
+    `;
+};
+N = function() {
+  return r`<p class=${`${l}size`}>${this.fileSize}</p>`;
+};
+w = function() {
+  return !this.error || this.state !== "error" ? u : r` <bm-helper-text
+      hideIcon
+      appearance="negative"
+      size="sm"
+      class=${`${l}error`}
+      text=${this.error}
+    ></bm-helper-text>`;
+};
+I = function() {
+  const t = Q[this.state];
+  return t ? r`<div class=${`${l}status`}>
+      <bm-icon customIconColor=${t.customIconColor} size="sm"
+        >${y(t.icon)}</bm-icon
+      >
+    </div>` : u;
+};
+P = function() {
+  const t = (e) => {
+    e.stopPropagation();
+    const s = new CustomEvent(`${O}dismiss`, {
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(s);
+  };
+  return r`<bm-close-button
+      size="sm"
+      ?disabled=${h(this, f).call(this)}
+      class=${`${l}remove`}
+      @click=${t}
+    ></bm-button>`;
+};
+F = function() {
+  return this.state === "uploading" ? r`<bm-progress-bar
+        size="sm"
+        value=${this.progress}
+        state="active"
+        fullWidth
+        class=${`${l}progress-bar`}
+        progressbarAriaLabel="File upload progress"
+      ></bm-progress-bar>` : u;
+};
+d = /* @__PURE__ */ new WeakMap();
+i.styles = T(V);
+o([
+  c({ type: String })
+], i.prototype, "error", 2);
+o([
+  c({ type: String })
+], i.prototype, "fileName", 2);
+o([
+  c({ type: String })
+], i.prototype, "fileSize", 2);
+o([
+  c({ type: String })
+], i.prototype, "size", 2);
+o([
+  c({
+    type: String,
+    converter(t) {
+      return t === "true" || t === "" ? !0 : t === "false" ? !1 : t;
+    }
+  })
+], i.prototype, "thumbnail", 2);
+o([
+  c({ type: String })
+], i.prototype, "state", 2);
+o([
+  c({ type: Number })
+], i.prototype, "progress", 2);
+o([
+  c({ type: String })
+], i.prototype, "theme", 2);
+o([
+  c({ type: Boolean })
+], i.prototype, "disabled", 2);
+o([
+  B({ context: Z, subscribe: !0 })
+], i.prototype, "listContext", 2);
+i = o([
+  W("bm-file-upload-list-item")
+], i);
+export {
+  i as BmFileUploadListItem
+};

package/local/wip/FileUpload/FileUpload.List.js

@@ -0,0 +1,105 @@
+import { e as f } from "../../chunks/provide.i2FlUkOu.js";
+import { c as u } from "../../chunks/consume.Ce9k1-wN.js";
+import { r as x, a as C, x as m } from "../../chunks/lit-element.CJtt9wj5.js";
+import { n, c as b } from "../../chunks/register-custom-element.vod7zfGv.js";
+import { c as g, g as v } from "../../chunks/classNames.C6fNrXWF.js";
+import { t as y } from "../../chunks/constants.jOWREYQE.js";
+import { f as _ } from "../../chunks/fileUpload.module.kN6o64aL.js";
+import { fileUploadContext as $ } from "./FileUploadContext.js";
+import { fileUploadListContext as S } from "./FileUploadListContext.js";
+import "./FileUpload.List.Item.js";
+var U = Object.defineProperty, w = Object.getOwnPropertyDescriptor, h = (t) => {
+  throw TypeError(t);
+}, a = (t, e, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? w(e, s) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (r = (o ? p(e, s, r) : p(r)) || r);
+  return o && r && U(e, s, r), r;
+}, z = (t, e, s) => e.has(t) || h("Cannot " + s), E = (t, e, s) => (z(t, e, "read from private field"), s ? s.call(t) : e.get(t)), N = (t, e, s) => e.has(t) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), d;
+const { baseClassNamePrefix: P, classModifierPrefix: c } = v("file-upload-list");
+let i = class extends C {
+  constructor() {
+    super(...arguments), this.fileUploadContext = {}, N(this, d, () => {
+      var t;
+      return !!(this.disabled || (t = this.fileUploadContext) != null && t.ctxDisabled);
+    });
+  }
+  willUpdate() {
+    this.listContext = {
+      ctxSize: this.size ?? "md",
+      ctxThumbnail: this.thumbnail,
+      ctxDisabled: E(this, d).call(this)
+    };
+  }
+  internalRenderItem(t, e) {
+    return m`
+      <bm-file-upload-list-item
+        fileName=${t.fileName}
+        fileSize=${t.fileSize}
+        error=${t.error}
+        thumbnail=${t.thumbnail}
+        state=${t.state}
+        progress=${t.progress}
+        @bm-dismiss=${e}
+      ></bm-file-upload-list-item>
+    `;
+  }
+  handleSlotChange(t) {
+    const s = t.target.assignedElements(), { ctxFileItems: o } = this.fileUploadContext ?? {};
+    o && (s.length > 0 && console.warn(
+      "Ignoring assigned elements in <bm-file-upload-list> when used inside a <bm-file-upload> component"
+    ), s.forEach((r) => r.remove()));
+  }
+  render() {
+    const { ctxSize: t = "md", ctxDisabled: e } = this.listContext ?? {}, s = g(
+      P,
+      this.theme && y(this.theme),
+      `${c}${t || "md"}`,
+      e && `${c}disabled`
+    ), { ctxFileItems: o, ctxDismissFile: r } = this.fileUploadContext ?? {};
+    return m`
+      <div class=${s}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        ${o == null ? void 0 : o.map(
+      (l) => (this.renderItem ?? this.internalRenderItem)(
+        l,
+        () => r == null ? void 0 : r(l)
+      )
+    )}
+      </div>
+    `;
+  }
+};
+d = /* @__PURE__ */ new WeakMap();
+i.styles = x(_);
+a([
+  n({
+    type: String,
+    converter(t) {
+      return t === "true" ? !0 : t === "false" ? !1 : t;
+    }
+  })
+], i.prototype, "thumbnail", 2);
+a([
+  n({ type: String })
+], i.prototype, "size", 2);
+a([
+  n({ type: String })
+], i.prototype, "theme", 2);
+a([
+  n({ type: Boolean })
+], i.prototype, "disabled", 2);
+a([
+  n({ type: Function })
+], i.prototype, "renderItem", 2);
+a([
+  f({ context: S })
+], i.prototype, "listContext", 2);
+a([
+  u({ context: $, subscribe: !0 })
+], i.prototype, "fileUploadContext", 2);
+i = a([
+  b("bm-file-upload-list")
+], i);
+export {
+  i as BmFileUploadList
+};