@viasat/beam-web-components 2.0.0

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

@@ -0,0 +1,203 @@
+import { consume as B } from "@lit/context";
+import { unsafeCSS as T, LitElement as L, html as r, nothing as u } from "lit";
+import { property as p } from "lit/decorators.js";
+import { createRef as _, ref as C } from "lit/directives/ref.js";
+import { unsafeSVG as y } from "lit/directives/unsafe-svg.js";
+import M from "clsx";
+import { C as R, E as W } from "../../chunks/HelperText.CcVVOtA3.js";
+import { g as D } from "../../chunks/classNames.Cq_tbDRp.js";
+import { t as H, p as U } from "../../chunks/constants.jOWREYQE.js";
+import { f as O } from "../../chunks/fileUpload.module.kN6o64aL.js";
+import { a as V, c as k } from "../../chunks/tokens.CTW8Tt94.js";
+import { c as A } from "../../chunks/register-custom-element.DHGKOhmA.js";
+import { fileUploadListContext as G } from "./FileUploadListContext.js";
+import "../../Icon/Icon.js";
+import "../../Tooltip/Tooltip.js";
+import "../../CloseButton/CloseButton.js";
+import "../../ProgressBar/ProgressBar.js";
+const Z = `<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 l = m > 1 ? void 0 : m ? J(e, s) : e, $ = t.length - 1, v; $ >= 0; $--)
+    (v = t[$]) && (l = (m ? v(e, s, l) : v(l)) || l);
+  return m && l && q(e, s, l), l;
+}, 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), c = (t, e, s) => (S(t, e, "access private method"), s), f, a, z, E, N, w, I, P, F, d;
+const { baseClassNamePrefix: K, subElementClassPrefix: n, classModifierPrefix: b } = D("file-upload-list-item"), Q = {
+  error: { customIconColor: k, icon: W },
+  success: {
+    customIconColor: V,
+    icon: R
+  }
+};
+let i = class extends L {
+  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 = M(
+      K,
+      this.theme && H(this.theme),
+      `${b}${h(this, d).call(this)}`,
+      `${b}${this.state}`,
+      h(this, f).call(this) && `${b}disabled`
+    );
+    return r`
+      <div class=${s}>
+        ${c(this, a, z).call(this, e)}
+        <div class=${`${n}content`}>
+          <div class=${`${n}content-start`}>
+            ${c(this, a, E).call(this)} ${c(this, a, N).call(this)} ${c(this, a, w).call(this)}
+          </div>
+          <div class=${`${n}content-end`}>
+            ${c(this, a, I).call(this)} ${c(this, a, P).call(this)}
+          </div>
+        </div>
+        ${c(this, a, F).call(this)}
+      </div>
+    `;
+  }
+};
+f = /* @__PURE__ */ new WeakMap();
+a = /* @__PURE__ */ new WeakSet();
+z = function(t) {
+  return t ? r`
+      <div class=${`${n}thumbnail`}>
+        ${t === !0 ? r`<bm-icon
+              color="secondary"
+              icon="image"
+              size="${h(this, d).call(this) === "md" ? "sm" : "md"}"
+            >
+              ${y(Z)}
+            </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: l } = e;
+    l <= m && (s.open = !1);
+  }} ${C(this.tooltipRef)}>
+        <span slot="text">${this.fileName}</span>
+        <span
+          slot="trigger"
+          class=${`${n}filename`}
+          ${C(this.fileNameRef)}
+        >
+          ${this.fileName}
+        </span>
+      </bm-tooltip>
+    `;
+};
+N = function() {
+  return r`<p class=${`${n}size`}>${this.fileSize}</p>`;
+};
+w = function() {
+  return !this.error || this.state !== "error" ? u : r` <bm-helper-text
+      hideIcon
+      appearance="negative"
+      size="sm"
+      class=${`${n}error`}
+      text=${this.error}
+    ></bm-helper-text>`;
+};
+I = function() {
+  const t = Q[this.state];
+  return t ? r`<div class=${`${n}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(`${U}dismiss`, {
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(s);
+  };
+  return r`<bm-close-button
+      size="sm"
+      ?disabled=${h(this, f).call(this)}
+      class=${`${n}remove`}
+      @click=${t}
+    ></bm-button>`;
+};
+F = function() {
+  return this.state === "uploading" ? r`<bm-progress-bar
+        size="sm"
+        value=${this.progress}
+        state="active"
+        fullWidth
+        class=${`${n}progress-bar`}
+        progressbarAriaLabel="File upload progress"
+      ></bm-progress-bar>` : u;
+};
+d = /* @__PURE__ */ new WeakMap();
+i.styles = T(O);
+o([
+  p({ type: String })
+], i.prototype, "error", 2);
+o([
+  p({ type: String })
+], i.prototype, "fileName", 2);
+o([
+  p({ type: String })
+], i.prototype, "fileSize", 2);
+o([
+  p({ type: String })
+], i.prototype, "size", 2);
+o([
+  p({
+    type: String,
+    converter(t) {
+      return t === "true" || t === "" ? !0 : t === "false" ? !1 : t;
+    }
+  })
+], i.prototype, "thumbnail", 2);
+o([
+  p({ type: String })
+], i.prototype, "state", 2);
+o([
+  p({ type: Number })
+], i.prototype, "progress", 2);
+o([
+  p({ type: String })
+], i.prototype, "theme", 2);
+o([
+  p({ type: Boolean })
+], i.prototype, "disabled", 2);
+o([
+  B({ context: G, subscribe: !0 })
+], i.prototype, "listContext", 2);
+i = o([
+  A("bm-file-upload-list-item")
+], i);
+export {
+  i as BmFileUploadListItem
+};

package/wip/FileUpload/FileUpload.List.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import { FileItem, FileUploadListSize } from '@viasat/beam-shared/components/fileUpload';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+/**
+ * `bm-file-upload-list`
+ *
+ * @slot default - Specify the list items
+ */
+export declare class BmFileUploadList extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /**
+     * Specify if the all items displays with a default thumbnail or a preview of the image being uploaded. Image only displays for size lg.
+     * @default false
+     */
+    thumbnail?: boolean;
+    /**
+     * Specify FileUpload List size
+     * @default 'md'
+     */
+    size?: FileUploadListSize;
+    /**
+     * Specify the theme of the FileUpload. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify if the FileUpload is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a render function for the list item
+     */
+    renderItem?: (fileItem: FileItem, dismissFile: () => void) => void;
+    private listContext?;
+    private fileUploadContext?;
+    willUpdate(): void;
+    private internalRenderItem;
+    private handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-file-upload-list': BmFileUploadList;
+    }
+}
+//# sourceMappingURL=FileUpload.List.d.ts.map

package/wip/FileUpload/FileUpload.List.js

@@ -0,0 +1,106 @@
+import { provide as c, consume as u } from "@lit/context";
+import { unsafeCSS as x, LitElement as C, html as m } from "lit";
+import { property as n } from "lit/decorators.js";
+import v from "clsx";
+import { g as b } from "../../chunks/classNames.Cq_tbDRp.js";
+import { t as g } from "../../chunks/constants.jOWREYQE.js";
+import { f as y } from "../../chunks/fileUpload.module.kN6o64aL.js";
+import { c as _ } from "../../chunks/register-custom-element.DHGKOhmA.js";
+import { fileUploadContext as S } from "./FileUploadContext.js";
+import { fileUploadListContext as $ } from "./FileUploadListContext.js";
+import "./FileUpload.List.Item.js";
+var U = Object.defineProperty, w = Object.getOwnPropertyDescriptor, h = (t) => {
+  throw TypeError(t);
+}, a = (t, e, s, r) => {
+  for (var o = r > 1 ? void 0 : r ? w(e, s) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (o = (r ? p(e, s, o) : p(o)) || o);
+  return r && o && U(e, s, o), o;
+}, 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: f } = b("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: r } = this.fileUploadContext ?? {};
+    r && (s.length > 0 && console.warn(
+      "Ignoring assigned elements in <bm-file-upload-list> when used inside a <bm-file-upload> component"
+    ), s.forEach((o) => o.remove()));
+  }
+  render() {
+    const { ctxSize: t = "md", ctxDisabled: e } = this.listContext ?? {}, s = v(
+      P,
+      this.theme && g(this.theme),
+      `${f}${t || "md"}`,
+      e && `${f}disabled`
+    ), { ctxFileItems: r, ctxDismissFile: o } = this.fileUploadContext ?? {};
+    return m`
+      <div class=${s}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        ${r == null ? void 0 : r.map(
+      (l) => (this.renderItem ?? this.internalRenderItem)(
+        l,
+        () => o == null ? void 0 : o(l)
+      )
+    )}
+      </div>
+    `;
+  }
+};
+d = /* @__PURE__ */ new WeakMap();
+i.styles = x(y);
+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([
+  c({ context: $ })
+], i.prototype, "listContext", 2);
+a([
+  u({ context: S, subscribe: !0 })
+], i.prototype, "fileUploadContext", 2);
+i = a([
+  _("bm-file-upload-list")
+], i);
+export {
+  i as BmFileUploadList
+};

package/wip/FileUpload/FileUpload.d.ts

@@ -0,0 +1,101 @@
+import { FileActions } from '@viasat/beam-shared/components/fileUpload';
+import { FormValidator } from '@viasat/beam-shared/components/form';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { BmFormContext } from '../Form/Form.context';
+import { FormField } from '../Form/Form.decorator';
+import { BmFileUploadButton } from './FileUpload.Button';
+import { BmFileUploadDropzone } from './FileUpload.Dropzone';
+export declare class BmFileUploadFileSelectedEvent extends CustomEvent<{
+    file: File;
+    actions: FileActions;
+    abortSignal: AbortSignal;
+}> {
+    constructor(file: File, actions: FileActions, abortSignal: AbortSignal);
+}
+/**
+ * `bm-file-upload`
+ *
+ * @fires bm-selected - Dispatched when a file is uploaded. Preventing default on this event will make upload asynchronous
+ * @slot label - Specify Label for for FileUpload
+ * @slot helper-text - Specify HelperText for FileUpload
+ */
+export declare class BmFileUpload extends FormField {
+    #private;
+    static styles: import('lit').CSSResult;
+    /**
+     * Specify what types of files can be uploaded
+     */
+    accept?: string;
+    /**
+     * Specify error text and display error state of FileUpload
+     */
+    error?: string | boolean;
+    /**
+     * Specify if FileUpload is in disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Specify if more than one file can be can be uploaded
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Specify how many files can be uploaded
+     */
+    fileLimit?: number;
+    /**
+     * Specify the maximum file size that can be uploaded
+     */
+    maxFileSize?: number;
+    /**
+     * Specify if FileUpload is a required input
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Specify if FileUpload is in read-only state
+     */
+    readOnly?: boolean;
+    /**
+     * Specify if FileUpload displays with an asterisk
+     * @default false
+     */
+    hideRequiredMarker?: boolean;
+    /**
+     * Specify form validation rules for FileUpload
+     */
+    validationRules: Array<FormValidator>;
+    /**
+     * Specify if FileUpload is fluid
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Specify the width of FileUpload
+     */
+    width?: string;
+    /**
+     * Specify the theme of the FileUpload. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    formContext: BmFormContext;
+    private fileUploadContext;
+    pickerRef: import('lit-html/directives/ref').Ref<BmFileUploadButton | BmFileUploadDropzone>;
+    private _textFieldLabel;
+    private _textFieldHelperText;
+    private filesState;
+    willUpdate(): void;
+    firstUpdated(): void;
+    updated(changedProps: Map<string, unknown>): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    private _hasPickerSlot;
+    private _hasFilesListSlot;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-file-upload': BmFileUpload;
+    }
+}
+//# sourceMappingURL=FileUpload.d.ts.map