import { r as b, c as s, h as i, H as h } from "./index.61732cef.js";
import { c as m } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const c = () => ':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 = m("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
      "thumbnail--interactive": this.interactive,
      "thumbnail--has-progress": this.progress !== void 0
    });
    return i(h, { key: "60fd36e9353a9a86a70d1b35b745a32151a09bfa" }, i("span", { key: "b9f3c84e30a8c03bfa2c6ce15698938af3b900be", class: l, role: "group" }, i(n, { key: "ddc9b7af21b039f28885dc1bf41ff5d60606c4f8", class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : void 0 }, i("img", { key: "f0fa51d8a133fd468f869e87fd47d0774ba6ecbe", alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== void 0 && i("span", { key: "ffc442f88d1275a776599903c92ef409b793f70c", class: "thumbnail__progress-indicator" }, i("swirl-progress-indicator", { key: "1c48d20c34404dde48a155c19dad06fe663e75ab", label: this.progressLabel, value: this.progress })), r && i("swirl-button-group", { key: "4a95ec501ba7044a5412a587f409b9e7f0ac43ee", class: "thumbnail__buttons", segmented: a && e }, a && i("span", { key: "044a398b54e024274fe3f221ac547385247ba1be" }, i("swirl-button", { key: "a36fe962cfe305b2a72d4e9d830b36699f506ef8", hideLabel: !0, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" })), e && i("span", { key: "3703ecf16bc15af27753e91ec1a44b850d2273a5" }, i("swirl-button", { key: "034d623775210846466ae6b233e3b3fb101ed001", 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: "b38746e0e4ff3d9e1505c16da8393b24cd8a4d6d", class: "thumbnail__timestamp" }, this.timestamp)));
  }
};
d.style = c();
export {
  d as swirl_thumbnail
};
