import { r as b, c as s, h as i, H as h } from "./index.e6beb8d9.js";
import { c } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const m = () => ':host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;padding:0.0625rem;border-radius:var(--s-border-radius-s)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem}.thumbnail--size-xl{--swirl-thumbnail-size:5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--size-xl .thumbnail__buttons{transform:scale(0.75)}.thumbnail--size-2xl{--swirl-thumbnail-size:7.5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--has-progress .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail--interactive .thumbnail__image-wrapper{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer}.thumbnail--interactive .thumbnail__image-wrapper:hover:after{position:absolute;background-color:rgba(0, 0, 0, 0.15);content:"";inset:0}.thumbnail--interactive .thumbnail__image-wrapper:active:after{position:absolute;background-color:rgba(0, 0, 0, 0.3);content:"";inset:0}.thumbnail__image-wrapper{overflow:hidden;width:100%;height:100%;border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnail__progress-indicator{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__buttons{position:absolute;z-index:1;top:var(--s-space-4);right:var(--s-space-4)}@media (hover: hover){.thumbnail__buttons{opacity:0}.thumbnail:hover .thumbnail__buttons{opacity:1}}.thumbnail__timestamp{position:absolute;z-index:1;bottom:var(--s-space-4);left:var(--s-space-4);display:block;overflow:hidden;max-width:calc(100% - 2 * var(--s-space-4));height:1.5rem;padding-right:var(--s-space-8);padding-left:var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-size:var(--s-font-size-sm);line-height:1.5rem;white-space:nowrap;text-overflow:ellipsis}', d = class {
  constructor(t) {
    b(this, t), this.edit = s(this, "edit", 7), this.remove = s(this, "remove", 7), this.thumbnailClick = s(this, "thumbnailClick", 7), this.editButtonIcon = "<swirl-icon-crop></swirl-icon-crop>", this.editButtonLabel = "Edit", this.format = "landscape", this.progressLabel = "Loading progress", this.removeButtonLabel = "Remove", this.size = "m";
  }
  render() {
    const t = (this.size === "xl" || this.size === "2xl") && this.format === "square", e = this.showRemoveButton && t, a = this.showEditButton && t && !(this.size === "xl" && e), r = a || e, o = Boolean(this.timestamp) && t, n = this.interactive ? "button" : "span", l = c("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
      "thumbnail--interactive": this.interactive,
      "thumbnail--has-progress": this.progress !== void 0
    });
    return i(h, { key: "5bc10ca0eb14a06dc7c6a72cede93d36c613214c" }, i("span", { key: "4523056916a2132b7c2b964fbe6e7e337590f63c", class: l, role: "group" }, i(n, { key: "efa9b35d3151d6948ce7bc66314b5da4e55f5f85", class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : void 0 }, i("img", { key: "63a56765433c59dee5499c5b28de2bfffde1c7ad", alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== void 0 && i("span", { key: "fcabdab3221ead6e7c12e6b1586c6d68c0779c17", class: "thumbnail__progress-indicator" }, i("swirl-progress-indicator", { key: "c9c31ce168b9427a94cbd0593a31e26e3c0bb5c8", label: this.progressLabel, value: this.progress })), r && i("swirl-button-group", { key: "5c0b3d9a2393bef230d61ddfa219de99146dd087", class: "thumbnail__buttons", segmented: a && e }, a && i("span", { key: "1c2b15b0a651247bdcccc76576d62f2c7ab51207" }, i("swirl-button", { key: "2aab8450f7b3a1216ec20a950eeffd6f7cdc8b5b", hideLabel: !0, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" })), e && i("span", { key: "e8f4b28fd68dddf920d9d7af96110c87832eb8cb" }, i("swirl-button", { key: "4459e8f2c4931dcd0abb009ebeed4d64b06323f4", hideLabel: !0, icon: "<swirl-icon-delete></swirl-icon-delete>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))), o && i("span", { key: "2e754460a8b4df69c027b281882b3169dabb363a", class: "thumbnail__timestamp" }, this.timestamp)));
  }
};
d.style = m();
export {
  d as swirl_thumbnail
};
