@krollins/blueprint 0.1.11 → 0.1.13

package/dist/components/file-upload.js

@@ -0,0 +1,669 @@
+import { css as u, LitElement as h, html as p, nothing as c } from "lit";
+import { property as s, state as f, query as b, customElement as v } from "lit/decorators.js";
+import { classMap as g } from "lit/directives/class-map.js";
+import { b as _ } from "../shared/boolean-converter-XDGfS9LC.js";
+const m = u`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .file-upload {
+    font-family: var(--bp-font-family);
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-md);
+  }
+
+  /* Hidden file input - standard sr-only pattern */
+  input[type='file'] {
+    position: absolute;
+    width: var(--bp-spacing-0-5);
+    height: var(--bp-spacing-0-5);
+    padding: var(--bp-spacing-0);
+    margin: calc(var(--bp-spacing-0-5) * -1);
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Visually hidden but accessible - standard sr-only pattern */
+  .visually-hidden {
+    position: absolute;
+    width: var(--bp-spacing-0-5);
+    height: var(--bp-spacing-0-5);
+    padding: var(--bp-spacing-0);
+    margin: calc(var(--bp-spacing-0-5) * -1);
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Dropzone */
+  .file-upload__dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--bp-spacing-sm);
+    padding: var(--bp-spacing-xl);
+    border: var(--bp-focus-width) dashed var(--bp-color-border);
+    border-radius: var(--bp-border-radius-lg);
+    background-color: var(--bp-color-surface);
+    cursor: pointer;
+    transition:
+      border-color var(--bp-transition-fast),
+      background-color var(--bp-transition-fast);
+    text-align: center;
+  }
+
+  .file-upload__dropzone:hover:not(.file-upload__dropzone--disabled) {
+    border-color: var(--bp-color-primary);
+    background-color: var(--bp-color-surface-elevated);
+  }
+
+  .file-upload__dropzone:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+    border-color: var(--bp-color-primary);
+  }
+
+  .file-upload__dropzone:active:not(.file-upload__dropzone--disabled) {
+    transform: scale(0.995);
+  }
+
+  /* Drag over state */
+  .file-upload__dropzone--drag-over {
+    border-color: var(--bp-color-primary);
+    background-color: var(--bp-color-surface-elevated);
+    border-style: solid;
+  }
+
+  /* Disabled state */
+  .file-upload__dropzone--disabled {
+    opacity: var(--bp-opacity-disabled);
+    cursor: not-allowed;
+    background-color: var(--bp-color-surface-subdued);
+  }
+
+  /* Icon */
+  .file-upload__icon {
+    width: var(--bp-spacing-2xl);
+    height: var(--bp-spacing-2xl);
+    color: var(--bp-color-text-muted);
+    transition: color var(--bp-transition-fast);
+  }
+
+  .file-upload__dropzone:hover:not(.file-upload__dropzone--disabled)
+    .file-upload__icon,
+  .file-upload__dropzone--drag-over .file-upload__icon {
+    color: var(--bp-color-primary);
+  }
+
+  /* Label */
+  .file-upload__label {
+    font-size: var(--bp-font-size-base);
+    font-weight: var(--bp-font-weight-medium);
+    color: var(--bp-color-text);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* Description */
+  .file-upload__description {
+    font-size: var(--bp-font-size-sm);
+    color: var(--bp-color-text-muted);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* Variants */
+  .file-upload__dropzone--success {
+    border-color: var(--bp-color-success);
+  }
+
+  .file-upload__dropzone--success:hover:not(.file-upload__dropzone--disabled) {
+    border-color: var(--bp-color-success);
+  }
+
+  .file-upload__dropzone--error {
+    border-color: var(--bp-color-error);
+  }
+
+  .file-upload__dropzone--error:hover:not(.file-upload__dropzone--disabled) {
+    border-color: var(--bp-color-error);
+  }
+
+  .file-upload__dropzone--warning {
+    border-color: var(--bp-color-warning);
+  }
+
+  .file-upload__dropzone--warning:hover:not(.file-upload__dropzone--disabled) {
+    border-color: var(--bp-color-warning);
+  }
+
+  /* Size variants */
+  .file-upload__dropzone--sm {
+    padding: var(--bp-spacing-lg);
+    gap: var(--bp-spacing-xs);
+  }
+
+  .file-upload__dropzone--sm .file-upload__icon {
+    width: var(--bp-spacing-xl);
+    height: var(--bp-spacing-xl);
+  }
+
+  .file-upload__dropzone--sm .file-upload__label {
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .file-upload__dropzone--sm .file-upload__description {
+    font-size: var(--bp-font-size-xs);
+  }
+
+  .file-upload__dropzone--md {
+    padding: var(--bp-spacing-xl);
+  }
+
+  .file-upload__dropzone--lg {
+    padding: var(--bp-spacing-2xl);
+    gap: var(--bp-spacing-md);
+  }
+
+  .file-upload__dropzone--lg .file-upload__icon {
+    width: var(--bp-spacing-10);
+    height: var(--bp-spacing-10);
+  }
+
+  .file-upload__dropzone--lg .file-upload__label {
+    font-size: var(--bp-font-size-lg);
+  }
+
+  /* File list */
+  .file-upload__file-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-sm);
+  }
+
+  .file-upload__file-item {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-spacing-md);
+    padding: var(--bp-spacing-md);
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    transition:
+      background-color var(--bp-transition-fast),
+      border-color var(--bp-transition-fast),
+      transform var(--bp-transition-fast);
+  }
+
+  .file-upload__file-item:hover {
+    background-color: var(--bp-color-surface-elevated);
+    border-color: var(--bp-color-border-strong);
+  }
+
+  .file-upload__file-item:active {
+    transform: scale(0.99);
+  }
+
+  /* File preview */
+  .file-upload__preview {
+    width: var(--bp-spacing-10);
+    height: var(--bp-spacing-10);
+    object-fit: cover;
+    border-radius: var(--bp-border-radius-sm);
+    flex-shrink: 0;
+  }
+
+  .file-upload__file-icon {
+    width: var(--bp-spacing-10);
+    height: var(--bp-spacing-10);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--bp-color-text-muted);
+    transition: color var(--bp-transition-fast);
+  }
+
+  .file-upload__file-icon svg {
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+  }
+
+  /* File info */
+  .file-upload__file-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-2xs);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .file-upload__file-name {
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    color: var(--bp-color-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: var(--bp-line-height-normal);
+  }
+
+  .file-upload__file-size {
+    font-size: var(--bp-font-size-xs);
+    color: var(--bp-color-text-muted);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* Remove button */
+  .file-upload__remove-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+    padding: 0;
+    border: none;
+    background: transparent;
+    border-radius: var(--bp-border-radius-sm);
+    color: var(--bp-color-text-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--bp-transition-fast),
+      color var(--bp-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .file-upload__remove-button:hover:not(:disabled) {
+    background-color: var(--bp-color-error);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .file-upload__remove-button:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .file-upload__remove-button:disabled {
+    cursor: not-allowed;
+    opacity: var(--bp-opacity-disabled);
+  }
+
+  .file-upload__remove-button svg {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+  }
+
+  /* Message */
+  .file-upload__message {
+    font-size: var(--bp-font-size-sm);
+    color: var(--bp-color-text-muted);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  .file-upload__message--success {
+    color: var(--bp-color-success);
+  }
+
+  .file-upload__message--error {
+    color: var(--bp-color-error);
+  }
+
+  .file-upload__message--warning {
+    color: var(--bp-color-warning);
+  }
+`;
+var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, t = (e, i, r, l) => {
+  for (var a = l > 1 ? void 0 : l ? z(i, r) : i, n = e.length - 1, d; n >= 0; n--)
+    (d = e[n]) && (a = (l ? d(i, r, a) : d(a)) || a);
+  return l && a && y(i, r, a), a;
+};
+let o = class extends h {
+  constructor() {
+    super(), this.isDragOver = !1, this.files = [], this.name = "", this.label = "Drop files here or click to upload", this.description = "", this.accept = "", this.multiple = !1, this.maxSize = 0, this.maxFiles = 0, this.disabled = !1, this.required = !1, this.variant = "default", this.message = "", this.size = "md", this.showPreviews = !0;
+  }
+  /**
+   * Get the list of selected files
+   */
+  getFiles() {
+    return [...this.files];
+  }
+  /**
+   * Clear all selected files
+   */
+  clearFiles() {
+    this.files.forEach((e) => {
+      e.previewUrl && URL.revokeObjectURL(e.previewUrl);
+    }), this.files = [], this.fileInput && (this.fileInput.value = ""), this.dispatchChangeEvent();
+  }
+  /**
+   * Remove a specific file by ID
+   */
+  removeFile(e) {
+    const i = this.files.findIndex((r) => r.id === e);
+    if (i !== -1) {
+      const r = this.files[i];
+      r.previewUrl && URL.revokeObjectURL(r.previewUrl), this.files = this.files.filter((l) => l.id !== e), this.dispatchEvent(
+        new CustomEvent("bp-file-removed", {
+          detail: { file: r },
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.dispatchChangeEvent();
+    }
+  }
+  handleClick() {
+    this.disabled || this.fileInput?.click();
+  }
+  handleKeyDown(e) {
+    this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.fileInput?.click());
+  }
+  handleInputChange(e) {
+    const i = e.target;
+    i.files && this.processFiles(Array.from(i.files));
+  }
+  handleDragEnter(e) {
+    e.preventDefault(), e.stopPropagation(), this.disabled || (this.isDragOver = !0);
+  }
+  handleDragOver(e) {
+    e.preventDefault(), e.stopPropagation(), !this.disabled && e.dataTransfer && (e.dataTransfer.dropEffect = "copy");
+  }
+  handleDragLeave(e) {
+    e.preventDefault(), e.stopPropagation();
+    const i = e.relatedTarget;
+    this.contains(i) || (this.isDragOver = !1);
+  }
+  handleDrop(e) {
+    if (e.preventDefault(), e.stopPropagation(), this.isDragOver = !1, this.disabled) return;
+    const i = e.dataTransfer;
+    i?.files && this.processFiles(Array.from(i.files));
+  }
+  processFiles(e) {
+    const i = [];
+    for (const r of e) {
+      if (this.maxFiles > 0 && this.files.length + i.length >= this.maxFiles) {
+        this.dispatchRejectEvent(r, "Maximum number of files exceeded");
+        continue;
+      }
+      if (this.accept && !this.isFileTypeAccepted(r)) {
+        this.dispatchRejectEvent(r, "File type not accepted");
+        continue;
+      }
+      if (this.maxSize > 0 && r.size > this.maxSize) {
+        this.dispatchRejectEvent(r, "File size exceeds limit");
+        continue;
+      }
+      const l = {
+        file: r,
+        name: r.name,
+        size: r.size,
+        type: r.type,
+        id: this.generateFileId(),
+        status: "pending",
+        progress: 0
+      };
+      this.showPreviews && r.type.startsWith("image/") && (l.previewUrl = URL.createObjectURL(r)), i.push(l), this.dispatchEvent(
+        new CustomEvent("bp-file-added", {
+          detail: { file: l },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+    i.length > 0 && (this.multiple ? this.files = [...this.files, ...i] : (this.files.forEach((r) => {
+      r.previewUrl && URL.revokeObjectURL(r.previewUrl);
+    }), this.files = i.slice(0, 1)), this.dispatchChangeEvent());
+  }
+  isFileTypeAccepted(e) {
+    if (!this.accept) return !0;
+    const i = this.accept.split(",").map((a) => a.trim().toLowerCase()), r = e.type.toLowerCase(), l = "." + e.name.split(".").pop()?.toLowerCase();
+    return i.some((a) => {
+      if (a === r || a === l) return !0;
+      if (a.endsWith("/*")) {
+        const n = a.slice(0, -2);
+        return r.startsWith(n + "/");
+      }
+      return !1;
+    });
+  }
+  dispatchChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent("bp-change", {
+        detail: { files: this.getFiles() },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  dispatchRejectEvent(e, i) {
+    this.dispatchEvent(
+      new CustomEvent("bp-file-rejected", {
+        detail: { file: e, reason: i },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  generateFileId() {
+    return `file-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+  }
+  formatFileSize(e) {
+    if (e === 0) return "0 B";
+    const i = ["B", "KB", "MB", "GB"], r = Math.min(
+      Math.floor(Math.log(e) / Math.log(1024)),
+      i.length - 1
+    );
+    return `${(e / Math.pow(1024, r)).toFixed(r > 0 ? 1 : 0)} ${i[r]}`;
+  }
+  handleRemoveFile(e, i) {
+    e.stopPropagation(), this.removeFile(i);
+  }
+  renderUploadIcon() {
+    return p`
+      <svg
+        class="file-upload__icon"
+        part="icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+        <polyline points="17 8 12 3 7 8" />
+        <line x1="12" y1="3" x2="12" y2="15" />
+      </svg>
+    `;
+  }
+  renderFileList() {
+    return this.files.length === 0 ? c : p`
+      <div
+        class="file-upload__file-list"
+        part="file-list"
+        role="list"
+        aria-label="Selected files"
+      >
+        ${this.files.map(
+      (e) => p`
+            <div
+              class="file-upload__file-item"
+              part="file-item"
+              role="listitem"
+            >
+              ${e.previewUrl ? p`
+                    <img
+                      class="file-upload__preview"
+                      src="${e.previewUrl}"
+                      alt="Preview of ${e.name}"
+                    />
+                  ` : p`
+                    <div class="file-upload__file-icon" aria-hidden="true">
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <path
+                          d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                        />
+                        <polyline points="14 2 14 8 20 8" />
+                      </svg>
+                    </div>
+                  `}
+              <div class="file-upload__file-info">
+                <span class="file-upload__file-name" part="file-name"
+                  >${e.name}</span
+                >
+                <span class="file-upload__file-size" part="file-size"
+                  >${this.formatFileSize(e.size)}</span
+                >
+              </div>
+              <button
+                type="button"
+                class="file-upload__remove-button"
+                part="file-remove"
+                @click=${(i) => this.handleRemoveFile(i, e.id)}
+                aria-label="Remove ${e.name}"
+                ?disabled=${this.disabled}
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  render() {
+    const e = {
+      "file-upload__dropzone": !0,
+      "file-upload__dropzone--drag-over": this.isDragOver,
+      "file-upload__dropzone--disabled": this.disabled,
+      "file-upload__dropzone--has-files": this.files.length > 0,
+      [`file-upload__dropzone--${this.variant}`]: this.variant !== "default",
+      [`file-upload__dropzone--${this.size}`]: !0
+    }, i = this.accept ? `Accepted file types: ${this.accept}` : "", r = this.maxSize > 0 ? `Maximum file size: ${this.formatFileSize(this.maxSize)}` : "";
+    return p`
+      <div class="file-upload">
+        <div
+          class=${g(e)}
+          part="dropzone"
+          role="button"
+          tabindex=${this.disabled ? -1 : 0}
+          aria-disabled=${this.disabled}
+          aria-describedby="file-upload-description"
+          @click=${this.handleClick}
+          @keydown=${this.handleKeyDown}
+          @dragenter=${this.handleDragEnter}
+          @dragover=${this.handleDragOver}
+          @dragleave=${this.handleDragLeave}
+          @drop=${this.handleDrop}
+        >
+          <input
+            type="file"
+            part="input"
+            .name=${this.name}
+            .accept=${this.accept}
+            ?multiple=${this.multiple}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            @change=${this.handleInputChange}
+            aria-hidden="true"
+            tabindex="-1"
+          />
+
+          ${this.renderUploadIcon()}
+
+          <span class="file-upload__label" part="label">${this.label}</span>
+
+          ${this.description ? p`<span class="file-upload__description" part="description"
+                >${this.description}</span
+              >` : c}
+        </div>
+
+        <span id="file-upload-description" class="visually-hidden">
+          ${i} ${r}
+        </span>
+
+        ${this.renderFileList()}
+        ${this.message ? p`<div
+              class="file-upload__message file-upload__message--${this.variant}"
+              part="message"
+            >
+              ${this.message}
+            </div>` : c}
+      </div>
+    `;
+  }
+};
+o.styles = [m];
+t([
+  s({ type: String })
+], o.prototype, "name", 2);
+t([
+  s({ type: String })
+], o.prototype, "label", 2);
+t([
+  s({ type: String })
+], o.prototype, "description", 2);
+t([
+  s({ type: String })
+], o.prototype, "accept", 2);
+t([
+  s({ type: Boolean })
+], o.prototype, "multiple", 2);
+t([
+  s({ type: Number })
+], o.prototype, "maxSize", 2);
+t([
+  s({ type: Number })
+], o.prototype, "maxFiles", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+t([
+  s({ type: Boolean })
+], o.prototype, "required", 2);
+t([
+  s({ type: String })
+], o.prototype, "variant", 2);
+t([
+  s({ type: String })
+], o.prototype, "message", 2);
+t([
+  s({ type: String })
+], o.prototype, "size", 2);
+t([
+  s({ converter: _, reflect: !0 })
+], o.prototype, "showPreviews", 2);
+t([
+  f()
+], o.prototype, "isDragOver", 2);
+t([
+  f()
+], o.prototype, "files", 2);
+t([
+  b('input[type="file"]')
+], o.prototype, "fileInput", 2);
+o = t([
+  v("bp-file-upload")
+], o);
+export {
+  o as BpFileUpload
+};
+//# sourceMappingURL=file-upload.js.map