@kdcloudjs/shoelace 1.0.50 → 1.0.51

package/dist/chunks/chunk.ZLU7T27V.js

@@ -1,918 +0,0 @@
-import {
-  upload_styles_default
-} from "./chunk.HNBZKHP4.js";
-import {
-  SlProgressBar
-} from "./chunk.IKXWIDK6.js";
-import {
-  SlButton
-} from "./chunk.64O3HKQJ.js";
-import {
-  SlSpinner
-} from "./chunk.XKZ5ZR62.js";
-import {
-  SlTooltip
-} from "./chunk.JRT6S3K4.js";
-import {
-  SlIconButton
-} from "./chunk.KSZ5KN3W.js";
-import {
-  LocalizeController
-} from "./chunk.YO2LOYG6.js";
-import {
-  SlIcon
-} from "./chunk.WRA2N5YD.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.6LSM36Q2.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 { ifDefined } from "lit/directives/if-defined.js";
-import { property, query, state } from "lit/decorators.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.localize = new LocalizeController(this);
-    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>${this.localize.term("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">${this.localize.term("uploadDragText")}</slot>
-          </div>
-          <div class="upload--drag-hint">
-            <slot name="drag-hint">${this.localize.term("uploadDragHint")}</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);">${this.localize.term("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">${this.localize.term("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=${this.localize.term("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=${this.localize.term("preview")}
-                  @click=${() => this._handlePreview(file)}
-                ></sl-icon-button>
-              ` : nothing}
-          ${canDownload ? html`
-                <sl-icon-button
-                  name=${this._resolveIcon(downloadIcon, file)}
-                  label=${this.localize.term("download")}
-                  @click=${() => this._handleDownload(file)}
-                ></sl-icon-button>
-              ` : nothing}
-          ${canRemove ? html`
-                <sl-icon-button
-                  name=${this._resolveIcon(rmIcon, file)}
-                  label=${this.localize.term("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) || this.localize.term("uploadError");
-    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=${this.localize.term("download")}
-                  @click=${() => this._handleDownload(file)}
-                ></sl-icon-button>
-              ` : nothing}
-          ${canRemove ? html`
-                <sl-icon-button
-                  name=${this._resolveIcon(removeIcon, file)}
-                  label=${this.localize.term("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
-};