@helixui/library 0.1.0

package/dist/shared/hx-file-upload-Px6kRzAZ.js

@@ -0,0 +1,614 @@
+import { css as b, LitElement as g, nothing as c, html as p } from "lit";
+import { property as l, state as x, query as _, customElement as y } from "lit/decorators.js";
+import { classMap as w } from "lit/directives/class-map.js";
+import { ifDefined as v } from "lit/directives/if-defined.js";
+import { repeat as $ } from "lit/directives/repeat.js";
+import { t as z } from "./lit-Dpo7RLp4.js";
+const F = b`
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2, 0.5rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  /* ─── Label ─── */
+
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-color-neutral-700, #343a40);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Dropzone ─── */
+
+  .dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+    min-height: var(--hx-size-32, 8rem);
+    padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
+    border: var(--hx-border-width-thin, 1px) dashed
+      var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #ced4da));
+    border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));
+    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8f9fa));
+    cursor: pointer;
+    text-align: center;
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      background-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    user-select: none;
+    color: var(--hx-color-neutral-600, #495057);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .dropzone:focus-visible {
+    outline: none;
+    border-color: var(--hx-focus-ring-color, #2563eb);
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-focus-ring-color, #2563eb) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  .dropzone--drag-over {
+    border-color: var(--hx-color-primary-500, #2563eb);
+    background-color: var(
+      --hx-file-upload-dropzone-active-bg,
+      color-mix(
+        in srgb,
+        var(--hx-color-primary-500, #2563eb) 8%,
+        var(--hx-color-neutral-0, #ffffff)
+      )
+    );
+    border-style: solid;
+  }
+
+  .dropzone--error {
+    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc3545));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dropzone {
+      transition: none;
+    }
+  }
+
+  /* ─── Hidden file input ─── */
+
+  .file-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ─── File list ─── */
+
+  .file-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2, 0.5rem);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .file-list:empty {
+    display: none;
+  }
+
+  /* ─── File item ─── */
+
+  .file-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e9ecef);
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background-color: var(--hx-color-neutral-0, #ffffff);
+  }
+
+  .file-item__row {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  .file-item__name {
+    flex: 1;
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-color-neutral-800, #212529);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-item__size {
+    flex-shrink: 0;
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-500, #6c757d);
+  }
+
+  .file-item__remove {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--hx-space-1, 0.25rem);
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--hx-color-neutral-500, #6c757d);
+    cursor: pointer;
+    line-height: 1;
+    transition:
+      color var(--hx-transition-fast, 150ms ease),
+      background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .file-item__remove:hover {
+    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
+    background-color: color-mix(in srgb, var(--hx-color-error-500, #dc3545) 8%, transparent);
+  }
+
+  .file-item__remove:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .file-item__remove {
+      transition: none;
+    }
+  }
+
+  /* ─── Progress bar ─── */
+
+  .progress-track {
+    width: 100%;
+    height: 4px;
+    background-color: var(--hx-color-neutral-200, #e9ecef);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    overflow: hidden;
+  }
+
+  .progress-bar {
+    height: 100%;
+    background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #2563eb));
+    border-radius: inherit;
+    transition: width var(--hx-transition-fast, 150ms ease);
+    width: 0%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-bar {
+      transition: none;
+    }
+  }
+
+  /* ─── Screen-reader only utility ─── */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ─── Error message ─── */
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+`;
+var k = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (e, r, i, t) => {
+  for (var o = t > 1 ? void 0 : t ? D(r, i) : r, h = e.length - 1, n; h >= 0; h--)
+    (n = e[h]) && (o = (t ? n(r, i, o) : n(o)) || o);
+  return t && o && k(r, i, o), o;
+};
+let I = 0, s = class extends g {
+  constructor() {
+    super(), this.name = "", this.accept = "", this.maxSize = 0, this.maxFiles = 0, this.multiple = !1, this.label = "", this.disabled = !1, this.error = "", this._files = [], this._dragOver = !1, this._hasFileListSlot = !1, this._baseId = `hx-file-upload-${++I}`, this._labelId = `${this._baseId}-label`, this._errorId = `${this._baseId}-error`, this._dropzoneId = `${this._baseId}-dropzone`, this._liveId = `${this._baseId}-live`, this._internals = this.attachInternals();
+  }
+  // ─── Slot Handling ───
+  _handleFileListSlotChange(e) {
+    const r = e.target;
+    this._hasFileListSlot = r.assignedElements({ flatten: !0 }).length > 0;
+  }
+  // ─── Lifecycle ───
+  updated(e) {
+    super.updated(e), (e.has("_files") || e.has("name")) && this._syncFormValue();
+  }
+  // ─── Form Integration ───
+  /** Returns the associated form element, if any. */
+  get form() {
+    return this._internals.form;
+  }
+  /** Returns the validation message. */
+  get validationMessage() {
+    return this._internals.validationMessage;
+  }
+  /** Returns the ValidityState object. */
+  get validity() {
+    return this._internals.validity;
+  }
+  /** Checks whether the component satisfies its constraints. */
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  /** Reports validity and shows the browser's constraint validation UI. */
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+  /** Called by the form when it resets. */
+  formResetCallback() {
+    this._files = [], this._internals.setFormValue(null);
+  }
+  _syncFormValue() {
+    if (this._files.length === 0) {
+      this._internals.setFormValue(null);
+      return;
+    }
+    if (this._files.length === 1) {
+      const r = this._files[0];
+      r && this._internals.setFormValue(r.file);
+      return;
+    }
+    const e = new FormData();
+    for (const r of this._files)
+      e.append(this.name, r.file, r.file.name);
+    this._internals.setFormValue(e);
+  }
+  // ─── Validation ───
+  /**
+   * Validates a file against `accept` and `maxSize` constraints.
+   * Returns null on success, or an error message string on failure.
+   */
+  _validateFile(e) {
+    if (this.accept && !this._isAccepted(e))
+      return `"${e.name}" has an unsupported file type. Accepted types: ${this.accept}`;
+    if (this.maxSize > 0 && e.size > this.maxSize) {
+      const r = (this.maxSize / 1048576).toFixed(1);
+      return `"${e.name}" exceeds the maximum size of ${r} MB.`;
+    }
+    return null;
+  }
+  /**
+   * Checks whether a file is accepted given the `accept` attribute value.
+   * Handles MIME types (e.g. "image/png"), wildcard MIME types (e.g. "image/*"),
+   * and extensions (e.g. ".pdf").
+   */
+  _isAccepted(e) {
+    const r = this.accept.split(",").map((i) => i.trim().toLowerCase());
+    for (const i of r)
+      if (i.startsWith(".")) {
+        if (e.name.toLowerCase().endsWith(i)) return !0;
+      } else if (i.endsWith("/*")) {
+        const t = i.slice(0, -2);
+        if (e.type.toLowerCase().startsWith(t)) return !0;
+      } else if (e.type.toLowerCase() === i) return !0;
+    return !1;
+  }
+  // ─── File Processing ───
+  _processFiles(e) {
+    if (this.disabled) return;
+    const r = this.multiple ? e : e.slice(0, 1), i = [], t = [], o = [];
+    for (const d of r) {
+      const m = this._validateFile(d);
+      m ? (t.push(d), o.push(m)) : i.push(d);
+    }
+    if (t.length > 0 && this.dispatchEvent(
+      new CustomEvent("hx-error", {
+        bubbles: !0,
+        composed: !0,
+        detail: { message: o.join(" "), files: t }
+      })
+    ), i.length === 0) return;
+    const h = this.multiple ? this._files.length : 0, n = this.maxFiles > 0 ? Math.max(0, this.maxFiles - h) : i.length, f = i.slice(0, n);
+    if (f.length === 0 && this.maxFiles > 0) {
+      this.dispatchEvent(
+        new CustomEvent("hx-error", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? "" : "s"} allowed.`,
+            files: i
+          }
+        })
+      );
+      return;
+    }
+    if (f.length > 0) {
+      const d = f.map((m) => ({ file: m, progress: 0 }));
+      this.multiple ? this._files = [...this._files, ...d] : this._files = d, this.dispatchEvent(
+        new CustomEvent("hx-upload", {
+          bubbles: !0,
+          composed: !0,
+          detail: { files: f }
+        })
+      );
+    }
+    const u = i.slice(n);
+    u.length > 0 && this.maxFiles > 0 && this.dispatchEvent(
+      new CustomEvent("hx-error", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? "" : "s"} allowed. ${u.length} file${u.length === 1 ? " was" : "s were"} not added.`,
+          files: u
+        }
+      })
+    );
+  }
+  // ─── Public Methods ───
+  /**
+   * Sets the upload progress for a file at the given index.
+   * @param index - Zero-based index into the current file list.
+   * @param percent - Progress percentage from 0 to 100.
+   */
+  setProgress(e, r) {
+    if (e < 0 || e >= this._files.length) return;
+    const i = Math.max(0, Math.min(100, r));
+    this._files = this._files.map(
+      (t, o) => o === e ? { ...t, progress: i } : t
+    );
+  }
+  /**
+   * Returns a read-only copy of the currently selected files.
+   */
+  get files() {
+    return this._files.map((e) => e.file);
+  }
+  // ─── Drag and Drop Handlers ───
+  _handleDragOver(e) {
+    e.preventDefault(), !this.disabled && (this._dragOver = !0);
+  }
+  _handleDragLeave(e) {
+    var t;
+    const r = e.relatedTarget;
+    if (r && this.contains(r)) return;
+    const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".dropzone");
+    i && i.contains(r) || (this._dragOver = !1);
+  }
+  _handleDrop(e) {
+    if (e.preventDefault(), this._dragOver = !1, this.disabled) return;
+    const r = e.dataTransfer;
+    if (!r) return;
+    const i = Array.from(r.files);
+    i.length !== 0 && this._processFiles(i);
+  }
+  // ─── Click / Keyboard Handlers ───
+  _handleDropzoneClick() {
+    var e;
+    this.disabled || (e = this._fileInput) == null || e.click();
+  }
+  _handleDropzoneKeyDown(e) {
+    var r;
+    this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), (r = this._fileInput) == null || r.click());
+  }
+  _handleFileInputChange(e) {
+    const r = e.target;
+    if (!r.files || r.files.length === 0) return;
+    const i = Array.from(r.files);
+    r.value = "", this._processFiles(i);
+  }
+  // ─── Remove Handler ───
+  _handleRemove(e) {
+    if (this.disabled) return;
+    const r = this._files[e];
+    if (!r) return;
+    const i = r.file;
+    this._files = this._files.filter((t, o) => o !== e), this.dispatchEvent(
+      new CustomEvent("hx-remove", {
+        bubbles: !0,
+        composed: !0,
+        detail: { file: i, index: e }
+      })
+    );
+  }
+  // ─── Formatters ───
+  _formatSize(e) {
+    return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
+  }
+  // ─── Render Helpers ───
+  _renderFileList() {
+    return this._hasFileListSlot ? c : this._files.length === 0 ? c : p`
+      <ul part="file-list" class="file-list" aria-label="Selected files">
+        ${$(
+      this._files,
+      (e) => e.file.name + e.file.size,
+      (e, r) => p`
+            <li part="file-item" class="file-item">
+              <div class="file-item__row">
+                <span class="file-item__name" title=${e.file.name}> ${e.file.name} </span>
+                <span class="file-item__size">${this._formatSize(e.file.size)}</span>
+                <button
+                  type="button"
+                  class="file-item__remove"
+                  aria-label=${`Remove ${e.file.name}`}
+                  @click=${() => this._handleRemove(r)}
+                >
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 14 14"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                    focusable="false"
+                  >
+                    <path
+                      d="M1 1L13 13M13 1L1 13"
+                      stroke="currentColor"
+                      stroke-width="1.75"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
+              </div>
+              <div
+                part="progress"
+                class="progress-track"
+                role="progressbar"
+                aria-valuenow=${e.progress}
+                aria-valuemin="0"
+                aria-valuemax="100"
+                aria-label=${`Upload progress for ${e.file.name}: ${e.progress}%`}
+              >
+                <div class="progress-bar" style="width: ${e.progress}%"></div>
+              </div>
+            </li>
+          `
+    )}
+      </ul>
+    `;
+  }
+  // ─── Render ───
+  render() {
+    const e = !!this.error, r = {
+      dropzone: !0,
+      "dropzone--drag-over": this._dragOver,
+      "dropzone--error": e
+    }, i = this.label ? `${this.label} — Drag files here or click to browse` : "Drag files here or click to browse";
+    return p`
+      <div class="field">
+        ${this.label ? p`
+              <label part="label" class="field__label" id=${this._labelId} for=${this._dropzoneId}>
+                ${this.label}
+              </label>
+            ` : c}
+
+        <div
+          part="dropzone"
+          class=${w(r)}
+          id=${this._dropzoneId}
+          role="button"
+          tabindex=${this.disabled ? "-1" : "0"}
+          aria-label=${i}
+          aria-labelledby=${v(this.label ? this._labelId : void 0)}
+          aria-disabled=${this.disabled ? "true" : c}
+          aria-describedby=${v(e ? this._errorId : void 0)}
+          @click=${this._handleDropzoneClick}
+          @keydown=${this._handleDropzoneKeyDown}
+          @dragover=${this._handleDragOver}
+          @dragleave=${this._handleDragLeave}
+          @drop=${this._handleDrop}
+        >
+          <slot>Drag files here or click to browse</slot>
+        </div>
+
+        <input
+          class="file-input"
+          type="file"
+          tabindex="-1"
+          aria-hidden="true"
+          accept=${v(this.accept || void 0)}
+          ?multiple=${this.multiple}
+          ?disabled=${this.disabled}
+          @change=${this._handleFileInputChange}
+        />
+
+        <slot name="file-list" @slotchange=${this._handleFileListSlotChange}></slot>
+
+        ${this._renderFileList()}
+        ${e ? p`
+              <div
+                part="error"
+                class="field__error"
+                id=${this._errorId}
+                role="alert"
+                aria-live="polite"
+              >
+                ${this.error}
+              </div>
+            ` : c}
+
+        <div id=${this._liveId} class="sr-only" aria-live="assertive" aria-atomic="true">
+          ${this._dragOver ? "File detected. Release to upload." : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = [z, F];
+s.formAssociated = !0;
+a([
+  l({ type: String })
+], s.prototype, "name", 2);
+a([
+  l({ type: String })
+], s.prototype, "accept", 2);
+a([
+  l({ type: Number, attribute: "max-size" })
+], s.prototype, "maxSize", 2);
+a([
+  l({ type: Number, attribute: "max-files" })
+], s.prototype, "maxFiles", 2);
+a([
+  l({ type: Boolean })
+], s.prototype, "multiple", 2);
+a([
+  l({ type: String })
+], s.prototype, "label", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+a([
+  l({ type: String })
+], s.prototype, "error", 2);
+a([
+  x()
+], s.prototype, "_files", 2);
+a([
+  x()
+], s.prototype, "_dragOver", 2);
+a([
+  x()
+], s.prototype, "_hasFileListSlot", 2);
+a([
+  _(".file-input")
+], s.prototype, "_fileInput", 2);
+s = a([
+  y("hx-file-upload")
+], s);
+export {
+  s as H
+};
+//# sourceMappingURL=hx-file-upload-Px6kRzAZ.js.map