@reliability-design/web 1.4.6 → 1.4.8

package/dist/components/rel-upload/rel-upload-actions.ts

@@ -1,163 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import "@reliability-design/icons/rel-icon";
-import "../rel-button/rel-button";
-import type { RelUpload, UploadState } from "./rel-upload";
-
-const EMPTY_STATE: UploadState = {
-  phase: "empty",
-  total: 0,
-  failed: 0,
-  canUpload: false,
-  primaryLabel: "Upload",
-};
-
-/**
- * `<rel-upload-actions>` — the Cancel / Upload footer for `<rel-upload>`.
- *
- * Lives outside `<rel-upload>` so it can sit in `<rel-modal>`'s footer slot and
- * stay pinned while the upload body scrolls. It mirrors the sibling
- * `<rel-upload>`'s derived state, so the button label follows the design:
- * "Upload" → "Upload 3 files" → spinner → "Retry upload".
- *
- * ```html
- * <rel-modal open side="center" title="Upload documents">
- *   <rel-upload multiple .uploader=${fn}></rel-upload>
- *   <rel-upload-actions slot="footer"></rel-upload-actions>
- * </rel-modal>
- * ```
- *
- * The target is found automatically among its siblings. Use `for` to point at a
- * specific `<rel-upload>` by id when a container holds more than one.
- *
- * @element rel-upload-actions
- */
-@customElement("rel-upload-actions")
-export class RelUploadActions extends LitElement {
-  /** Id of the `<rel-upload>` to control. Omit to auto-discover a sibling. */
-  @property({ type: String }) for = "";
-
-  /** Cancel button label. */
-  @property({ type: String, attribute: "cancel-label" }) cancelLabel = "Cancel";
-
-  /** Hides Cancel for flows that only ever move forward. */
-  @property({ type: Boolean, attribute: "no-cancel" }) noCancel = false;
-
-  @state() private snapshot: UploadState = EMPTY_STATE;
-
-  private target: RelUpload | null = null;
-
-  static styles = css`
-    :host {
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    .actions {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: var(--rel-spacing-xs, 8px);
-    }
-
-    rel-button rel-icon {
-      margin-inline-end: var(--rel-spacing-xs, 8px);
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    // Siblings may not be upgraded yet when the footer slot connects first.
-    queueMicrotask(() => this.resolveTarget());
-    this.root.addEventListener("rel-state", this.onState as EventListener);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.root.removeEventListener("rel-state", this.onState as EventListener);
-    this.target = null;
-  }
-
-  updated(changed: Map<string, unknown>) {
-    if (changed.has("for")) this.resolveTarget();
-  }
-
-  /**
-   * Listen on our own root rather than `document`: a shared root means no
-   * shadow boundary sits between us and the sibling `<rel-upload>`, so
-   * `event.target` is never retargeted away from it.
-   */
-  private get root(): Document | ShadowRoot {
-    const node = this.getRootNode();
-    return node instanceof ShadowRoot ? node : this.ownerDocument;
-  }
-
-  private resolveTarget() {
-    const root = this.getRootNode() as ParentNode;
-    let found: RelUpload | null = null;
-
-    if (this.for) {
-      found = root.querySelector<RelUpload>(`#${CSS.escape(this.for)}`);
-    } else {
-      found =
-        this.parentElement?.querySelector<RelUpload>("rel-upload") ??
-        root.querySelector<RelUpload>("rel-upload");
-    }
-
-    this.target = found;
-    if (found) this.snapshot = found.state;
-  }
-
-  private onState = (e: CustomEvent<UploadState>) => {
-    if (!this.target) this.resolveTarget();
-    if (e.target !== this.target) return;
-    this.snapshot = e.detail;
-  };
-
-  private onCancel = () => {
-    this.target?.cancel();
-    this.dispatchEvent(new CustomEvent("rel-cancel", { bubbles: true, composed: true }));
-  };
-
-  private onPrimary = () => {
-    if (!this.target) return;
-    if (this.snapshot.phase === "failed") this.target.retry();
-    else this.target.upload();
-  };
-
-  render() {
-    const { phase, canUpload, primaryLabel } = this.snapshot;
-    const busy = phase === "uploading" || phase === "delayed";
-
-    return html`
-      <div class="actions" part="base">
-        ${this.noCancel
-          ? nothing
-          : html`<rel-button part="cancel" variant="secondary" @click=${this.onCancel}>
-              ${this.cancelLabel}
-            </rel-button>`}
-
-        <rel-button
-          part="primary"
-          variant="primary"
-          ?loading=${busy}
-          ?disabled=${!canUpload}
-          aria-label=${busy ? "Uploading" : primaryLabel}
-          @click=${this.onPrimary}
-        >
-          ${busy
-            ? nothing
-            : html`${phase === "failed"
-                  ? html`<rel-icon name="refresh" size="sm"></rel-icon>`
-                  : nothing}${primaryLabel}`}
-        </rel-button>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-upload-actions": RelUploadActions;
-  }
-}