@kdcloudjs/shoelace 1.0.42 → 1.0.44

package/dist/chunks/chunk.3Q5WG4CC.js

@@ -0,0 +1,914 @@
+import {
+  upload_styles_default
+} from "./chunk.HURXD5JM.js";
+import {
+  SlProgressBar
+} from "./chunk.E5INWCHG.js";
+import {
+  SlButton
+} from "./chunk.55LZILII.js";
+import {
+  SlSpinner
+} from "./chunk.FT6K7F5U.js";
+import {
+  SlTooltip
+} from "./chunk.2S6DIFBX.js";
+import {
+  SlIconButton
+} from "./chunk.PXZ3NAVW.js";
+import {
+  SlIcon
+} from "./chunk.POLPBXD2.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.T3WRENOY.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/upload/upload.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var fileUidCounter = 0;
+function getUid() {
+  return `sl-upload-${Date.now()}-${++fileUidCounter}`;
+}
+function file2UploadFile(file) {
+  return {
+    uid: getUid(),
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    percent: 0,
+    status: "uploading",
+    originFileObj: file,
+    lastModified: file.lastModified
+  };
+}
+function updateFileList(file, fileList) {
+  const next = [...fileList];
+  const idx = next.findIndex((f) => f.uid === file.uid);
+  if (idx === -1) {
+    next.push(file);
+  } else {
+    next[idx] = file;
+  }
+  return next;
+}
+function removeFileItem(file, fileList) {
+  const removed = fileList.filter((f) => f.uid !== file.uid);
+  return removed.length === fileList.length ? null : removed;
+}
+var isImageFileType = (type) => type.indexOf("image/") === 0;
+function isImageUrl(file) {
+  var _a, _b;
+  if (file.type && !file.thumbUrl) {
+    return isImageFileType(file.type);
+  }
+  const url = file.thumbUrl || file.url || "";
+  if (/^data:image\//.test(url)) return true;
+  const ext = (((_b = (_a = url.split("/").pop()) == null ? void 0 : _a.split(/[#?]/)[0]) == null ? void 0 : _b.match(/\.[^.]*$/)) || [""])[0];
+  if (/(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico|heic|heif)$/i.test(ext)) return true;
+  if (/^data:/.test(url)) return false;
+  if (ext) return false;
+  return true;
+}
+function previewImage(file) {
+  return new Promise((resolve) => {
+    if (!file.type || !isImageFileType(file.type)) {
+      resolve("");
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result || "");
+    reader.readAsDataURL(file);
+  });
+}
+function filterByAccept(files, accept) {
+  if (!accept) return files;
+  const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+  if (tokens.length === 0) return files;
+  return files.filter((file) => {
+    const fileName = file.name.toLowerCase();
+    const fileType = (file.type || "").toLowerCase();
+    return tokens.some((token) => {
+      if (token.startsWith(".")) {
+        return fileName.endsWith(token);
+      }
+      if (token.endsWith("/*")) {
+        const prefix = token.slice(0, -1);
+        return fileType.startsWith(prefix);
+      }
+      return fileType === token;
+    });
+  });
+}
+function defaultRequest(options) {
+  const xhr = new XMLHttpRequest();
+  if (options.onProgress && xhr.upload) {
+    xhr.upload.addEventListener("progress", (e) => {
+      if (e.total > 0) {
+        options.onProgress({ percent: e.loaded / e.total * 100 });
+      }
+    });
+  }
+  xhr.addEventListener("load", () => {
+    if (xhr.status < 200 || xhr.status >= 300) {
+      options.onError(new Error(`Upload failed with status ${xhr.status}`), xhr.responseText);
+      return;
+    }
+    let response;
+    try {
+      response = JSON.parse(xhr.responseText);
+    } catch (e) {
+      response = xhr.responseText;
+    }
+    options.onSuccess(response, xhr);
+  });
+  xhr.addEventListener("error", () => {
+    options.onError(new Error("Upload request failed"));
+  });
+  xhr.open(options.method, options.action, true);
+  if (options.withCredentials) {
+    xhr.withCredentials = true;
+  }
+  const headers = options.headers || {};
+  Object.keys(headers).forEach((key) => {
+    xhr.setRequestHeader(key, headers[key]);
+  });
+  const formData = new FormData();
+  if (options.data) {
+    Object.keys(options.data).forEach((key) => {
+      formData.append(key, options.data[key]);
+    });
+  }
+  formData.append(options.filename, options.file);
+  xhr.send(formData);
+  return {
+    abort() {
+      xhr.abort();
+    }
+  };
+}
+var SlUpload = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.action = "";
+    this.method = "POST";
+    this.name = "file";
+    this.accept = "";
+    this.multiple = false;
+    this.directory = false;
+    this.disabled = false;
+    this.type = "select";
+    this.listType = "text";
+    this.showUploadList = true;
+    this.openFileDialogOnClick = true;
+    this.pastable = false;
+    this.withCredentials = false;
+    this.headers = {};
+    this.data = {};
+    this.defaultFileList = [];
+    this._fileList = [];
+    this._dragState = "drop";
+    this._hasSlottedContent = false;
+    this._xhrMap = /* @__PURE__ */ new Map();
+    this._handlePasteBound = this._handlePaste.bind(this);
+  }
+  // ==================== 生命周期 ====================
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.pastable) {
+      document.addEventListener("paste", this._handlePasteBound);
+    }
+  }
+  willUpdate(changedProps) {
+    if (changedProps.has("fileList") && this.fileList !== void 0) {
+      this._fileList = [...this.fileList];
+    }
+    if (changedProps.has("defaultFileList") && this.fileList === void 0 && this.defaultFileList.length > 0) {
+      this._fileList = [...this.defaultFileList];
+    }
+    if (changedProps.has("pastable")) {
+      if (this.pastable) {
+        document.addEventListener("paste", this._handlePasteBound);
+      } else {
+        document.removeEventListener("paste", this._handlePasteBound);
+      }
+    }
+  }
+  updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("_fileList") && this.listType.startsWith("picture")) {
+      this._generateThumbnails();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._xhrMap.forEach((req) => req.abort());
+    this._xhrMap.clear();
+    document.removeEventListener("paste", this._handlePasteBound);
+  }
+  // ==================== 计算属性 ====================
+  get mergedFileList() {
+    return this._fileList;
+  }
+  get isPictureCard() {
+    return this.listType === "picture-card" || this.listType === "picture-circle";
+  }
+  /** 将 showUploadList 解析为各个独立标志。 */
+  get _showUploadListConfig() {
+    var _a, _b, _c, _d, _e, _f;
+    if (typeof this.showUploadList === "boolean") {
+      return {
+        show: this.showUploadList,
+        showPreviewIcon: true,
+        showRemoveIcon: true,
+        showDownloadIcon: false,
+        removeIcon: "trash",
+        downloadIcon: "download",
+        previewIcon: "eye"
+      };
+    }
+    return {
+      show: true,
+      showPreviewIcon: (_a = this.showUploadList.showPreviewIcon) != null ? _a : true,
+      showRemoveIcon: (_b = this.showUploadList.showRemoveIcon) != null ? _b : true,
+      showDownloadIcon: (_c = this.showUploadList.showDownloadIcon) != null ? _c : false,
+      removeIcon: (_d = this.showUploadList.removeIcon) != null ? _d : "trash",
+      downloadIcon: (_e = this.showUploadList.downloadIcon) != null ? _e : "download",
+      previewIcon: (_f = this.showUploadList.previewIcon) != null ? _f : "eye",
+      extra: this.showUploadList.extra
+    };
+  }
+  // ==================== 公共方法 ====================
+  /** 以编程方式打开文件选择对话框。 */
+  openFileDialog() {
+    var _a;
+    (_a = this.fileInput) == null ? void 0 : _a.click();
+  }
+  /** 以编程方式触发文件上传。 */
+  upload(file) {
+    this._processFiles([file]);
+  }
+  /** 根据 uid 中止指定文件的上传。 */
+  abort(uid) {
+    if (uid) {
+      const req = this._xhrMap.get(uid);
+      if (req) {
+        req.abort();
+        this._xhrMap.delete(uid);
+      }
+    } else {
+      this._xhrMap.forEach((req) => req.abort());
+      this._xhrMap.clear();
+    }
+  }
+  // ==================== 私有方法 ====================
+  async _generateThumbnails() {
+    let hasNew = false;
+    const updatedList = this.mergedFileList.map((file) => {
+      if (file.originFileObj && file.thumbUrl === void 0) {
+        hasNew = true;
+        return __spreadProps(__spreadValues({}, file), { thumbUrl: "" });
+      }
+      return file;
+    });
+    if (hasNew) {
+      this._fileList = updatedList;
+      for (let i = 0; i < this._fileList.length; i++) {
+        const file = this._fileList[i];
+        if (file.originFileObj && file.thumbUrl === "") {
+          const thumb = await previewImage(file.originFileObj);
+          this._fileList = this._fileList.map((f) => f.uid === file.uid ? __spreadProps(__spreadValues({}, f), { thumbUrl: thumb }) : f);
+        }
+      }
+    }
+  }
+  _isImage(file) {
+    if (this.isImageUrl) return this.isImageUrl(file);
+    return isImageUrl(file);
+  }
+  _onTriggerClick() {
+    var _a;
+    if (this.disabled || !this.openFileDialogOnClick) return;
+    (_a = this.fileInput) == null ? void 0 : _a.click();
+  }
+  _onInputChange(e) {
+    const input = e.target;
+    const files = filterByAccept(Array.from(input.files || []), this.accept);
+    if (files.length > 0) {
+      this._processFiles(files);
+    }
+    input.value = "";
+  }
+  async _processFiles(files) {
+    if (this.maxCount === 1) {
+      const file = files[0];
+      if (this.beforeUpload) {
+        try {
+          const result = await this.beforeUpload(file, files);
+          if (result === false) return;
+          if (result instanceof File || result instanceof Blob) {
+            const transformed = result instanceof File ? result : new File([result], file.name, { type: result.type });
+            this._fileList = [];
+            this._uploadFile(transformed);
+            return;
+          }
+        } catch (e) {
+          return;
+        }
+      }
+      this._fileList = [];
+      this._uploadFile(file);
+      return;
+    }
+    if (this.maxCount !== void 0) {
+      const remaining = this.maxCount - this.mergedFileList.length;
+      if (files.length > remaining) {
+        this.emit("sl-exceed", { detail: { files: files.slice(remaining), maxCount: this.maxCount } });
+        files = files.slice(0, remaining);
+        if (files.length === 0) return;
+      }
+    }
+    for (const file of files) {
+      if (this.beforeUpload) {
+        try {
+          const result = await this.beforeUpload(file, files);
+          if (result === false) continue;
+          if (result instanceof File || result instanceof Blob) {
+            const transformed = result instanceof File ? result : new File([result], file.name, { type: result.type });
+            this._uploadFile(transformed);
+            continue;
+          }
+        } catch (e) {
+          continue;
+        }
+      }
+      this._uploadFile(file);
+    }
+  }
+  _uploadFile(file) {
+    let uploadFile = file2UploadFile(file);
+    const newFileList = updateFileList(uploadFile, this.mergedFileList);
+    this._updateFileList(uploadFile, newFileList);
+    if (!this.action && !this.customRequest) {
+      uploadFile = __spreadProps(__spreadValues({}, uploadFile), { status: "done", percent: 100 });
+      const doneList = updateFileList(uploadFile, newFileList);
+      this._updateFileList(uploadFile, doneList);
+      return;
+    }
+    const uid = uploadFile.uid;
+    const options = {
+      action: this.action,
+      method: this.method,
+      data: this.data,
+      file,
+      filename: this.name,
+      headers: this.headers,
+      withCredentials: this.withCredentials,
+      onProgress: (e) => {
+        if (!this.mergedFileList.some((f) => f.uid === uid)) return;
+        uploadFile = __spreadProps(__spreadValues({}, uploadFile), { status: "uploading", percent: e.percent });
+        const progressList = updateFileList(uploadFile, this.mergedFileList);
+        this._updateFileList(uploadFile, progressList, e);
+      },
+      onSuccess: (response, xhr) => {
+        this._xhrMap.delete(uid);
+        if (!this.mergedFileList.some((f) => f.uid === uid)) return;
+        uploadFile = __spreadProps(__spreadValues({}, uploadFile), { status: "done", percent: 100, response });
+        const successList = updateFileList(uploadFile, this.mergedFileList);
+        this._updateFileList(uploadFile, successList);
+      },
+      onError: (error, response) => {
+        this._xhrMap.delete(uid);
+        if (!this.mergedFileList.some((f) => f.uid === uid)) return;
+        uploadFile = __spreadProps(__spreadValues({}, uploadFile), { status: "error", error, response });
+        const errorList = updateFileList(uploadFile, this.mergedFileList);
+        this._updateFileList(uploadFile, errorList);
+      }
+    };
+    const req = this.customRequest ? this.customRequest(options) : defaultRequest(options);
+    if (req && typeof req.abort === "function") {
+      this._xhrMap.set(uid, req);
+    }
+  }
+  _updateFileList(file, fileList, event) {
+    this._fileList = fileList;
+    this.emit("sl-change", {
+      detail: __spreadValues({
+        file,
+        fileList
+      }, event ? { event } : {})
+    });
+  }
+  _handleRemove(file) {
+    const removeEvent = this.emit("sl-remove", {
+      detail: { file },
+      cancelable: true
+    });
+    if (removeEvent.defaultPrevented) return;
+    const req = this._xhrMap.get(file.uid);
+    if (req) {
+      req.abort();
+      this._xhrMap.delete(file.uid);
+    }
+    const removedList = removeFileItem(file, this.mergedFileList);
+    if (removedList) {
+      const removedFile = __spreadProps(__spreadValues({}, file), { status: "removed" });
+      this._updateFileList(removedFile, removedList);
+    }
+  }
+  _handlePreview(file) {
+    this.emit("sl-preview", { detail: { file } });
+  }
+  _handleDownload(file) {
+    const downloadEvent = this.emit("sl-download", { detail: { file }, cancelable: true });
+    if (!downloadEvent.defaultPrevented && file.url) {
+      window.open(file.url);
+    }
+  }
+  _onSlotChange(e) {
+    const slot = e.target;
+    const nodes = slot.assignedNodes({ flatten: true });
+    this._hasSlottedContent = nodes.some(
+      (node) => node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== ""
+    );
+  }
+  _resolveIcon(icon, file) {
+    return typeof icon === "function" ? icon(file) : icon;
+  }
+  // ---- 粘贴处理 ----
+  _handlePaste(e) {
+    var _a;
+    if (this.disabled) return;
+    const files = filterByAccept(Array.from(((_a = e.clipboardData) == null ? void 0 : _a.files) || []), this.accept);
+    if (files.length > 0) {
+      this._processFiles(files);
+    }
+  }
+  // ---- 拖拽处理 ----
+  _onDragOver(e) {
+    e.preventDefault();
+    if (this.disabled) return;
+    this._dragState = "dragover";
+  }
+  _onDragLeave(e) {
+    e.preventDefault();
+    this._dragState = "drop";
+  }
+  _onDrop(e) {
+    var _a;
+    e.preventDefault();
+    if (this.disabled) return;
+    this._dragState = "drop";
+    this.emit("sl-drop", { detail: { event: e } });
+    const files = filterByAccept(Array.from(((_a = e.dataTransfer) == null ? void 0 : _a.files) || []), this.accept);
+    if (files.length > 0) {
+      this._processFiles(files);
+    }
+  }
+  // ==================== 渲染 ====================
+  render() {
+    const hideUploadButton = this.maxCount !== void 0 && this.mergedFileList.length >= this.maxCount;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      upload: true,
+      "upload--disabled": this.disabled
+    })}
+      >
+        ${this.type === "drag" ? this._renderDrag() : this._renderSelect(hideUploadButton)}
+        <slot name="tip"></slot>
+      </div>
+    `;
+  }
+  _renderSelect(hideUploadButton) {
+    if (this.isPictureCard) {
+      return this._renderPictureCardMode(hideUploadButton);
+    }
+    return html`
+      ${this._renderTrigger(false)}
+      ${this._showUploadListConfig.show ? this._renderFileList() : nothing}
+    `;
+  }
+  _renderTrigger(hidden) {
+    return html`
+      <div
+        part="trigger"
+        class=${classMap({
+      upload__trigger: true,
+      "upload__trigger--disabled": this.disabled,
+      "upload__trigger--hidden": hidden
+    })}
+        @click=${this._onTriggerClick}
+      >
+        <slot @slotchange=${this._onSlotChange}></slot>
+        ${!this._hasSlottedContent ? html`<sl-button><sl-icon slot="prefix" name="upload"></sl-icon>Upload</sl-button>` : nothing}
+      </div>
+      ${this._renderInput()}
+    `;
+  }
+  _renderInput() {
+    return html`
+      <input
+        class="upload__input"
+        type="file"
+        accept=${ifDefined(this.accept || void 0)}
+        ?multiple=${this.multiple}
+        ?disabled=${this.disabled}
+        ?webkitdirectory=${this.directory}
+        @change=${this._onInputChange}
+      />
+    `;
+  }
+  _renderDrag() {
+    return html`
+      <div
+        part="drag-area"
+        class=${classMap({
+      "upload--drag": true,
+      "upload--drag-over": this._dragState === "dragover",
+      "upload--drag-disabled": this.disabled
+    })}
+        @click=${this._onTriggerClick}
+        @dragover=${this._onDragOver}
+        @dragleave=${this._onDragLeave}
+        @drop=${this._onDrop}
+      >
+        <div class="upload--drag-container">
+          <div class="upload--drag-icon">
+            <slot name="drag-icon">
+              <sl-icon name="cloud-arrow-up"></sl-icon>
+            </slot>
+          </div>
+          <div class="upload--drag-text">
+            <slot name="drag-text">Click or drag file to this area to upload</slot>
+          </div>
+          <div class="upload--drag-hint">
+            <slot name="drag-hint">Support for a single or bulk upload</slot>
+          </div>
+        </div>
+      </div>
+      ${this._renderInput()}
+      ${this._showUploadListConfig.show ? this._renderFileList() : nothing}
+    `;
+  }
+  _renderPictureCardMode(hideUploadButton) {
+    const isCircle = this.listType === "picture-circle";
+    const { show } = this._showUploadListConfig;
+    return html`
+      <div
+        part="list"
+        class=${classMap({
+      upload__list: true,
+      "upload__list--picture-card": !isCircle,
+      "upload__list--picture-circle": isCircle
+    })}
+      >
+        ${show ? this.mergedFileList.map((file) => this._renderPictureCardItem(file)) : nothing}
+        ${!hideUploadButton ? html`
+              <div
+                part="trigger"
+                class=${classMap({
+      "upload__trigger--card": true,
+      "upload__trigger--circle": isCircle,
+      "upload__trigger--card-disabled": this.disabled
+    })}
+                @click=${this._onTriggerClick}
+              >
+                <slot @slotchange=${this._onSlotChange}></slot>
+                ${!this._hasSlottedContent ? html`
+                      <sl-icon name="plus-lg" style="font-size: 24px;"></sl-icon>
+                      <span style="font-size: var(--sl-font-size-small);">Upload</span>
+                    ` : nothing}
+              </div>
+            ` : nothing}
+      </div>
+      ${this._renderInput()}
+    `;
+  }
+  _renderPictureCardItem(file) {
+    if (this.itemRender) {
+      return this.itemRender(file, this.mergedFileList, {
+        download: () => this._handleDownload(file),
+        preview: () => this._handlePreview(file),
+        remove: () => this._handleRemove(file)
+      });
+    }
+    if (file.status === "uploading") {
+      return html`
+        <div
+          part="list-item"
+          class="upload__list-item upload__list-item--uploading"
+        >
+          ${this.iconRender ? html`<div class="upload__list-item-thumbnail">${this.iconRender(file, this.listType)}</div>` : html`
+                <span class="upload__list-item-uploading-text">Uploading</span>
+                <div part="list-item-progress" class="upload__list-item-card-progress">
+                  <sl-progress-bar value=${file.percent || 0}></sl-progress-bar>
+                </div>
+              `}
+        </div>
+      `;
+    }
+    if (file.status === "error") {
+      const { showRemoveIcon: showRemoveIcon2, removeIcon } = this._showUploadListConfig;
+      const canRemove2 = !this.disabled && (typeof showRemoveIcon2 === "function" ? showRemoveIcon2(file) : showRemoveIcon2);
+      return html`
+        <div
+          part="list-item"
+          class="upload__list-item upload__list-item--error"
+        >
+          <div class="upload__list-item-error-content">
+            <sl-icon name="image" style="font-size: 32px;"></sl-icon>
+            <span class="upload__list-item-error-name">${file.name}</span>
+          </div>
+          <div class="upload__list-item-overlay">
+            ${canRemove2 ? html`
+                  <sl-icon-button
+                    name=${this._resolveIcon(removeIcon, file)}
+                    label="Delete"
+                    @click=${() => this._handleRemove(file)}
+                  ></sl-icon-button>
+                ` : nothing}
+          </div>
+        </div>
+      `;
+    }
+    const isImg = this._isImage(file);
+    const thumbSrc = file.thumbUrl || file.url;
+    const { showPreviewIcon, showRemoveIcon, showDownloadIcon, previewIcon, removeIcon: rmIcon, downloadIcon } = this._showUploadListConfig;
+    const canPreview = (typeof showPreviewIcon === "function" ? showPreviewIcon(file) : showPreviewIcon) && (file.url || file.thumbUrl);
+    const canRemove = !this.disabled && (typeof showRemoveIcon === "function" ? showRemoveIcon(file) : showRemoveIcon);
+    const canDownload = file.status === "done" && (typeof showDownloadIcon === "function" ? showDownloadIcon(file) : showDownloadIcon);
+    return html`
+      <div
+        part="list-item"
+        class=${classMap({
+      "upload__list-item": true,
+      "upload__list-item--done": file.status === "done"
+    })}
+      >
+        <div class="upload__list-item-thumbnail">
+          ${this.iconRender ? this.iconRender(file, this.listType) : isImg && thumbSrc ? html`<img src=${thumbSrc} alt=${file.name} />` : html`<sl-icon name="file-earmark" style="font-size: 24px; color: var(--sl-color-neutral-400);"></sl-icon>`}
+        </div>
+        <div class="upload__list-item-overlay">
+          ${canPreview ? html`
+                <sl-icon-button
+                  name=${this._resolveIcon(previewIcon, file)}
+                  label="Preview"
+                  @click=${() => this._handlePreview(file)}
+                ></sl-icon-button>
+              ` : nothing}
+          ${canDownload ? html`
+                <sl-icon-button
+                  name=${this._resolveIcon(downloadIcon, file)}
+                  label="Download"
+                  @click=${() => this._handleDownload(file)}
+                ></sl-icon-button>
+              ` : nothing}
+          ${canRemove ? html`
+                <sl-icon-button
+                  name=${this._resolveIcon(rmIcon, file)}
+                  label="Delete"
+                  @click=${() => this._handleRemove(file)}
+                ></sl-icon-button>
+              ` : nothing}
+        </div>
+      </div>
+    `;
+  }
+  _renderFileList() {
+    if (this.mergedFileList.length === 0) return nothing;
+    const isPicture = this.listType === "picture";
+    return html`
+      <div
+        part="list"
+        class=${classMap({
+      upload__list: true,
+      "upload__list--text": this.listType === "text",
+      "upload__list--picture": isPicture
+    })}
+      >
+        ${this.mergedFileList.map((file) => this._renderListItem(file, isPicture))}
+      </div>
+    `;
+  }
+  _renderListItem(file, isPicture) {
+    var _a;
+    if (this.itemRender) {
+      return this.itemRender(file, this.mergedFileList, {
+        download: () => this._handleDownload(file),
+        preview: () => this._handlePreview(file),
+        remove: () => this._handleRemove(file)
+      });
+    }
+    const isUploading = file.status === "uploading";
+    const isError = file.status === "error";
+    const { showRemoveIcon, showDownloadIcon, removeIcon, downloadIcon, extra } = this._showUploadListConfig;
+    const canRemove = !this.disabled && (typeof showRemoveIcon === "function" ? showRemoveIcon(file) : showRemoveIcon);
+    const canDownload = file.status === "done" && (typeof showDownloadIcon === "function" ? showDownloadIcon(file) : showDownloadIcon);
+    const extraContent = extra ? typeof extra === "function" ? extra(file) : extra : null;
+    const errorMessage = ((_a = file.error) == null ? void 0 : _a.message) || (typeof file.response === "string" ? file.response : null) || "Upload error";
+    const itemContent = html`
+      <div
+        part="list-item"
+        class=${classMap({
+      "upload__list-item": true,
+      "upload__list-item--uploading": isUploading,
+      "upload__list-item--done": file.status === "done",
+      "upload__list-item--error": isError
+    })}
+      >
+        ${isPicture ? this._renderThumbnail(file) : this._renderFileIcon(file)}
+        <span
+          part="list-item-name"
+          class="upload__list-item-name"
+          @click=${() => this._handlePreview(file)}
+        >
+          ${file.url ? html`<a href=${file.url} target="_blank" rel="noopener noreferrer">${file.name}</a>` : file.name}${extraContent ? html`<span part="list-item-extra" class="upload__list-item-extra">${extraContent}</span>` : nothing}
+        </span>
+        <span part="list-item-actions" class="upload__list-item-actions">
+          ${canDownload ? html`
+                <sl-icon-button
+                  name=${this._resolveIcon(downloadIcon, file)}
+                  label="Download"
+                  @click=${() => this._handleDownload(file)}
+                ></sl-icon-button>
+              ` : nothing}
+          ${canRemove ? html`
+                <sl-icon-button
+                  name=${this._resolveIcon(removeIcon, file)}
+                  label="Remove"
+                  @click=${() => this._handleRemove(file)}
+                ></sl-icon-button>
+              ` : nothing}
+        </span>
+        ${isUploading ? html`
+              <div part="list-item-progress" class="upload__list-item-progress">
+                <sl-progress-bar value=${file.percent || 0}></sl-progress-bar>
+              </div>
+            ` : nothing}
+      </div>
+    `;
+    if (isError) {
+      return html`
+        <sl-tooltip content=${errorMessage}>
+          ${itemContent}
+        </sl-tooltip>
+      `;
+    }
+    return itemContent;
+  }
+  _renderFileIcon(file) {
+    if (this.iconRender) {
+      return html`<span class="upload__list-item-icon">${this.iconRender(file, this.listType)}</span>`;
+    }
+    if (file.status === "uploading") {
+      return html`
+        <span class="upload__list-item-icon">
+          <sl-spinner style="font-size: var(--sl-font-size-medium);"></sl-spinner>
+        </span>
+      `;
+    }
+    return html`
+      <span class="upload__list-item-icon">
+        <sl-icon name="paperclip"></sl-icon>
+      </span>
+    `;
+  }
+  _renderThumbnail(file) {
+    if (this.iconRender) {
+      return html`<div class="upload__list-item-thumbnail">${this.iconRender(file, this.listType)}</div>`;
+    }
+    if (file.status === "uploading") {
+      return html`
+        <div class="upload__list-item-thumbnail">
+          <sl-spinner style="font-size: 20px;"></sl-spinner>
+        </div>
+      `;
+    }
+    const isImg = this._isImage(file);
+    const thumbSrc = file.thumbUrl || file.url;
+    return html`
+      <div class="upload__list-item-thumbnail" @click=${() => this._handlePreview(file)}>
+        ${isImg && thumbSrc ? html`<img src=${thumbSrc} alt=${file.name} />` : html`<sl-icon name="file-earmark" style="font-size: 24px; color: var(--sl-color-neutral-400);"></sl-icon>`}
+      </div>
+    `;
+  }
+};
+SlUpload.styles = [component_styles_default, upload_styles_default];
+SlUpload.dependencies = {
+  "sl-button": SlButton,
+  "sl-icon": SlIcon,
+  "sl-icon-button": SlIconButton,
+  "sl-progress-bar": SlProgressBar,
+  "sl-spinner": SlSpinner,
+  "sl-tooltip": SlTooltip
+};
+__decorateClass([
+  query(".upload__input")
+], SlUpload.prototype, "fileInput", 2);
+__decorateClass([
+  property()
+], SlUpload.prototype, "action", 2);
+__decorateClass([
+  property()
+], SlUpload.prototype, "method", 2);
+__decorateClass([
+  property()
+], SlUpload.prototype, "name", 2);
+__decorateClass([
+  property()
+], SlUpload.prototype, "accept", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlUpload.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlUpload.prototype, "directory", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlUpload.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlUpload.prototype, "type", 2);
+__decorateClass([
+  property({ attribute: "list-type" })
+], SlUpload.prototype, "listType", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-count" })
+], SlUpload.prototype, "maxCount", 2);
+__decorateClass([
+  property({
+    attribute: "show-upload-list",
+    converter: {
+      fromAttribute(value) {
+        if (value === null || value === "false") return false;
+        return true;
+      },
+      toAttribute(value) {
+        if (typeof value === "boolean") return value ? "" : null;
+        return "";
+      }
+    },
+    reflect: true
+  })
+], SlUpload.prototype, "showUploadList", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "open-file-dialog-on-click" })
+], SlUpload.prototype, "openFileDialogOnClick", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlUpload.prototype, "pastable", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "with-credentials" })
+], SlUpload.prototype, "withCredentials", 2);
+__decorateClass([
+  property({ type: Object })
+], SlUpload.prototype, "headers", 2);
+__decorateClass([
+  property({ type: Object })
+], SlUpload.prototype, "data", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], SlUpload.prototype, "fileList", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], SlUpload.prototype, "defaultFileList", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlUpload.prototype, "beforeUpload", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlUpload.prototype, "customRequest", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlUpload.prototype, "isImageUrl", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlUpload.prototype, "itemRender", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlUpload.prototype, "iconRender", 2);
+__decorateClass([
+  state()
+], SlUpload.prototype, "_fileList", 2);
+__decorateClass([
+  state()
+], SlUpload.prototype, "_dragState", 2);
+__decorateClass([
+  state()
+], SlUpload.prototype, "_hasSlottedContent", 2);
+
+export {
+  SlUpload
+};