import { r as l, c as a, h as i, H as c } from "./index.e6beb8d9.js";
import { c as n } from "./index-orsBiyT_.fc4357c3.js";
import { F as r } from "./FileSaver.min-DISpcNDq.9430eab9.js";
import { a as h, b as p, c as d, e as f, f as u, h as w } from "./utils-CCck-DTo.e4e43b6a.js";
import "react";
import "react-dom";
const b = () => ":host{display:inline-block;max-width:100%;overflow:hidden;background-color:var(--s-background-default);border-radius:var(--s-border-radius-sm);outline:1px solid var(--s-border-strong);outline-offset:-1px}.file-chip{display:flex;position:relative;align-items:center;max-width:100%;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);background-color:transparent;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);gap:var(--s-space-12)}@media (hover: hover){.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action{background-color:var(--s-state-hovered);cursor:pointer}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description{opacity:0;pointer-events:none}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions{opacity:1;pointer-events:auto}}.file-chip__icon{display:flex;flex-shrink:0;padding:var(--s-space-4);background-color:var(--s-decorative-blueberry-surface-subdued);border-radius:50%;color:var(--s-decorative-blueberry-text)}.file-chip__info{display:flex;align-items:center;gap:var(--s-space-12);flex-grow:1;min-width:0}.file-chip__name{color:var(--s-text-default);font-weight:var(--s-font-weight-semibold)}.file-chip__suffix{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--s-space-12);flex-grow:1;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}@media (hover: hover){.file-chip__suffix{display:inline-grid;justify-items:end;gap:0}}.file-chip__suffix swirl-button{display:inline-flex}@media (hover: hover){.file-chip__description,.file-chip__actions{grid-area:1 / 1}}.file-chip__description{color:var(--s-text-subdued);font-size:var(--s-font-size-xs)}.file-chip__name,.file-chip__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-chip__actions{display:flex;align-items:center;gap:var(--s-space-8)}@media (hover: hover){.file-chip__actions{opacity:0;pointer-events:none}}.file-chip--no-suffix .file-chip__suffix{display:none}.file-chip--has-description .file-chip__info{align-items:baseline}.file-chip--type-image .file-chip__icon{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.file-chip--type-video .file-chip__icon{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.file-chip--type-audio .file-chip__icon{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.file-chip--type-pdf .file-chip__icon{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.file-chip--type-compressed .file-chip__icon{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.file-chip--type-document .file-chip__icon{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.file-chip--type-unknown .file-chip__icon{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.file-chip--loading .file-chip__icon{padding:var(--s-space-2)}.file-chip--loading .file-chip__icon{background-color:transparent}", v = class {
  constructor(t) {
    l(this, t), this.delete = a(this, "delete", 7), this.download = a(this, "download", 7), this.preview = a(this, "preview", 7), this.deleteButtonLabel = "Delete", this.downloadButtonLabel = "Download", this.loadingLabel = "Loading \u2026", this.previewButtonLabel = "Preview", this.fileType = "unknown", this.isHovered = !1, this.fileIconMap = {
      image: i("swirl-icon-image", { size: 20 }),
      video: i("swirl-icon-video-player", { size: 20 }),
      audio: i("swirl-icon-audio-file", { size: 20 }),
      pdf: i("swirl-icon-picture-as-pdf", { size: 20 }),
      compressed: i("swirl-icon-folder", { size: 20 }),
      document: i("swirl-icon-file", { size: 20 }),
      unknown: i("swirl-icon-attachment", { size: 20 })
    }, this.handleClick = () => {
      this.loading || (this.showPreviewButton ? this.handlePreviewClick() : this.showDownloadButton && this.handleDownloadClick());
    }, this.handleDownloadClick = (e) => {
      if (e == null || e.stopPropagation(), this.download.emit(), this.skipNativeDownload)
        return;
      const s = this.name || this.url.split("/").pop();
      fetch(this.url).then((o) => o.blob()).then((o) => {
        r.saveAs(o, s);
      });
    }, this.handlePreviewClick = (e) => {
      e == null || e.stopPropagation(), this.preview.emit();
    }, this.handleDeleteClick = (e) => {
      e == null || e.stopPropagation(), this.delete.emit();
    };
  }
  componentWillLoad() {
    this.setFileType();
  }
  watchType() {
    this.setFileType();
  }
  getFileIcon() {
    return this.loading ? i("swirl-spinner", { size: "s", label: this.loadingLabel }) : this.fileIconMap[this.fileType];
  }
  setFileType() {
    h(this.type) ? this.fileType = "image" : p(this.type) ? this.fileType = "video" : d(this.type) ? this.fileType = "audio" : f(this.type) ? this.fileType = "pdf" : u(this.type) ? this.fileType = "compressed" : w(this.type) ? this.fileType = "document" : this.fileType = "unknown";
  }
  render() {
    const t = this.showPreviewButton || this.showDownloadButton || this.showDeleteButton, e = !this.description && !this.showPreviewButton && !this.showDownloadButton && !this.showDeleteButton, s = this.description || this.loading, o = n("file-chip", `file-chip--type-${this.fileType}`, {
      "file-chip--loading": this.loading,
      "file-chip--has-description": s,
      "file-chip--has-download-action": this.showDownloadButton,
      "file-chip--has-preview-action": this.showPreviewButton,
      "file-chip--no-actions": !t,
      "file-chip--no-suffix": e
    });
    return i(c, { key: "313de20490e5dcbc11edf8def10ba35334b48d25" }, i("span", { key: "c32e419be3a302cf4057a15f236022fe2088dd63", "aria-label": this.name, class: o, onClick: this.handleClick, role: "group" }, i("span", { key: "4518d1f0d2b910ab924fba87e823c9742cc94884", class: "file-chip__icon" }, this.getFileIcon()), i("span", { key: "bdacb6734b239e5356b21c5d45c37a6b85addc20", class: "file-chip__info" }, i("span", { key: "0c6c2e4bad9e93516c4dcae74b5a6ba27c2eb16e", class: "file-chip__name", title: this.name }, this.name), i("span", { key: "339e0cd14817e5e2837ccba858155b42545387a9", class: "file-chip__suffix" }, (this.description || this.loading) && i("span", { key: "9ef8c2c3b97fea7fbec346325f8ffa215ec7fbe5", class: "file-chip__description" }, this.loading ? this.loadingLabel : this.description), t && !this.loading && i("span", { key: "92598d232a32b10dd52750044f7992a3db4b5831", class: "file-chip__actions" }, this.showPreviewButton && i("swirl-button", { key: "93b88e5ea5cb94e1648fcad1ead4208e2552720b", hideLabel: !0, icon: "<swirl-icon-preview></swirl-icon-preview>", label: this.previewButtonLabel, onClick: this.handlePreviewClick, part: "file-chip__preview", variant: "plain" }), this.showDownloadButton && i("swirl-button", { key: "3ceb2f52e305dcf51a869bb93573297fe748e3f4", hideLabel: !0, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.handleDownloadClick, part: "file-chip__download", variant: "plain" }), this.showDeleteButton && i("swirl-button", { key: "14b11323cfa106626dc63df82d213b3844f81d39", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.deleteButtonLabel, onClick: this.handleDeleteClick, part: "file-chip__delete", variant: "plain" }))))));
  }
  static get watchers() {
    return {
      type: [{
        watchType: 0
      }]
    };
  }
};
v.style = b();
export {
  v as swirl_file_chip
};
