@kdcloudjs/shoelace 1.0.41 → 1.0.43

package/dist/chunks/chunk.J5RICP5L.js

@@ -0,0 +1,771 @@
+import {
+  iconClose,
+  iconEye,
+  iconFlipX,
+  iconFlipY,
+  iconRotateLeft,
+  iconRotateRight,
+  iconZoomIn,
+  iconZoomOut
+} from "./chunk.TV4R3EUM.js";
+import {
+  image_preview_styles_default
+} from "./chunk.ZZ3GQLJQ.js";
+import {
+  image_styles_default
+} from "./chunk.HHHUIVIP.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.JROVVA7L.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/image/image.component.ts
+import { html, nothing, render as litRender } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var SlImage = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.alt = "";
+    this.noPreview = false;
+    this.inGroup = false;
+    this._status = "loading";
+    this._previewOpen = false;
+    this._previewClosing = false;
+    this._transform = { scale: 1, rotate: 0, flipX: 1, flipY: 1, x: 0, y: 0 };
+    this._isDragging = false;
+    this._dragStart = { x: 0, y: 0, tx: 0, ty: 0 };
+    // 绑定的事件处理器引用
+    this._boundMouseMove = null;
+    this._boundMouseUp = null;
+    this._boundKeyDown = null;
+    this._boundWheel = null;
+    // 触摸事件处理器引用
+    this._boundTouchMove = null;
+    this._boundTouchEnd = null;
+    /** 上一次受控模式的 open 值，用于检测外部变化 */
+    this._prevControlledOpen = void 0;
+    /** raf 帧 ID，用于合并同一帧内的多次变换更新 */
+    this._rafId = null;
+    /** raf 队列中待合并的变换 */
+    this._pendingTransform = null;
+    /** 预览弹层的 portal 容器，挂载到 document.body，使得宿主 display:none 时预览仍可渲染 */
+    this._portalContainer = null;
+    /** 标记 portal 样式是否已注入 */
+    this._portalStyleInjected = false;
+  }
+  willUpdate(changedProperties) {
+    var _a;
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("src") && changedProperties.get("src") !== void 0) {
+      this._status = "loading";
+    }
+    if (changedProperties.has("preview")) {
+      const controlledOpen = (_a = this.preview) == null ? void 0 : _a.open;
+      if (controlledOpen !== void 0 && controlledOpen !== this._prevControlledOpen) {
+        if (controlledOpen && !this._prevControlledOpen) {
+          this._resetTransform();
+          this._addPreviewListeners();
+        } else if (!controlledOpen && this._prevControlledOpen) {
+          this._isDragging = false;
+          this._previewClosing = false;
+          this._removePreviewListeners();
+        }
+        this._prevControlledOpen = controlledOpen;
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._removePreviewListeners();
+    this._cancelRaf();
+    this._removePortal();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this._syncPortal();
+  }
+  // ======================== Portal 管理 ========================
+  /** 确保 portal 容器存在并挂载到 document.body */
+  _ensurePortal() {
+    if (!this._portalContainer) {
+      this._portalContainer = document.createElement("div");
+      this._portalContainer.className = "sl-image-preview-portal";
+      document.body.appendChild(this._portalContainer);
+    }
+    if (!this._portalStyleInjected) {
+      const styleId = "sl-image-preview-portal-styles";
+      if (!document.getElementById(styleId)) {
+        const styleEl = document.createElement("style");
+        styleEl.id = styleId;
+        styleEl.textContent = image_preview_styles_default.cssText;
+        document.head.appendChild(styleEl);
+      }
+      this._portalStyleInjected = true;
+    }
+    return this._portalContainer;
+  }
+  /** 将预览内容同步渲染到 portal 容器 */
+  _syncPortal() {
+    if (this.previewOpen || this._previewClosing) {
+      const container = this._ensurePortal();
+      litRender(this._renderPreview(), container);
+    } else if (this._portalContainer) {
+      litRender(nothing, this._portalContainer);
+    }
+  }
+  /** 移除 portal 容器 */
+  _removePortal() {
+    if (this._portalContainer) {
+      litRender(nothing, this._portalContainer);
+      this._portalContainer.remove();
+      this._portalContainer = null;
+    }
+  }
+  // ======================== 尺寸解析工具 ========================
+  /** 解析尺寸值，支持各种 CSS 单位；纯数字默认加 px */
+  _parseDimension(value) {
+    return /[a-z%]$/i.test(value) ? value : `${value}px`;
+  }
+  /** 取消待执行的 raf */
+  _cancelRaf() {
+    if (this._rafId !== null) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+      this._pendingTransform = null;
+    }
+  }
+  // ======================== 图片加载 ========================
+  _handleLoad() {
+    this._status = "loaded";
+    this.emit("sl-load");
+  }
+  _handleError() {
+    this._status = "error";
+    this.emit("sl-error");
+  }
+  // ======================== 预览控制 ========================
+  get previewOpen() {
+    var _a, _b;
+    return (_b = (_a = this.preview) == null ? void 0 : _a.open) != null ? _b : this._previewOpen;
+  }
+  _openPreview() {
+    var _a, _b;
+    if (this.noPreview || this._status === "error") return;
+    if (this.inGroup) {
+      this.emit("sl-image-click", { detail: { src: this.src } });
+      return;
+    }
+    this._previewOpen = true;
+    this._resetTransform();
+    this._addPreviewListeners();
+    this.emit("sl-preview-open");
+    (_b = (_a = this.preview) == null ? void 0 : _a.onOpenChange) == null ? void 0 : _b.call(_a, true);
+  }
+  _closePreview() {
+    var _a;
+    if (this._previewClosing) return;
+    this._previewClosing = true;
+    this._syncPortal();
+    const overlay = (_a = this._portalContainer) == null ? void 0 : _a.querySelector(".preview-overlay");
+    if (overlay) {
+      const onAnimationEnd = () => {
+        overlay.removeEventListener("animationend", onAnimationEnd);
+        this._finishClose();
+      };
+      overlay.addEventListener("animationend", onAnimationEnd);
+      setTimeout(() => {
+        overlay.removeEventListener("animationend", onAnimationEnd);
+        if (this._previewClosing) {
+          this._finishClose();
+        }
+      }, 400);
+    } else {
+      this._finishClose();
+    }
+  }
+  _finishClose() {
+    var _a, _b;
+    this._previewOpen = false;
+    this._previewClosing = false;
+    this._isDragging = false;
+    this._cancelRaf();
+    this._removePreviewListeners();
+    this._syncPortal();
+    this.emit("sl-preview-close");
+    (_b = (_a = this.preview) == null ? void 0 : _a.onOpenChange) == null ? void 0 : _b.call(_a, false);
+  }
+  _resetTransform() {
+    this._updateTransform({ scale: 1, rotate: 0, flipX: 1, flipY: 1, x: 0, y: 0 }, "reset");
+  }
+  /** 统一更新 transform 并触发 onTransform 回调 */
+  _updateTransform(next, action) {
+    var _a, _b;
+    this._transform = __spreadValues(__spreadValues({}, this._transform), next);
+    (_b = (_a = this.preview) == null ? void 0 : _a.onTransform) == null ? void 0 : _b.call(_a, { transform: __spreadValues({}, this._transform), action });
+  }
+  // ======================== 变换操作 ========================
+  get _scaleStep() {
+    var _a, _b;
+    return (_b = (_a = this.preview) == null ? void 0 : _a.scaleStep) != null ? _b : 0.5;
+  }
+  get _minScale() {
+    var _a, _b;
+    return (_b = (_a = this.preview) == null ? void 0 : _a.minScale) != null ? _b : 1;
+  }
+  get _maxScale() {
+    var _a, _b;
+    return (_b = (_a = this.preview) == null ? void 0 : _a.maxScale) != null ? _b : 50;
+  }
+  _zoomIn(clientX, clientY) {
+    const next = Math.min(this._transform.scale + this._scaleStep, this._maxScale);
+    this._applyZoom(next, clientX, clientY);
+  }
+  _zoomOut(clientX, clientY) {
+    const next = Math.max(this._transform.scale - this._scaleStep, this._minScale);
+    this._applyZoom(next, clientX, clientY);
+  }
+  /** 以指定屏幕坐标为中心进行缩放；未传坐标时以图片中心缩放 */
+  _applyZoom(nextScale, clientX, clientY) {
+    const { scale: prevScale, x, y } = this._transform;
+    if (nextScale === prevScale) return;
+    if (clientX !== void 0 && clientY !== void 0) {
+      const viewCenterX = window.innerWidth / 2;
+      const viewCenterY = window.innerHeight / 2;
+      const mouseOffsetX = clientX - viewCenterX - x;
+      const mouseOffsetY = clientY - viewCenterY - y;
+      const ratio = 1 - nextScale / prevScale;
+      this._updateTransform({
+        scale: nextScale,
+        x: x + mouseOffsetX * ratio,
+        y: y + mouseOffsetY * ratio
+      }, "zoomIn");
+    } else {
+      this._updateTransform({ scale: nextScale }, nextScale > prevScale ? "zoomIn" : "zoomOut");
+    }
+  }
+  _rotateLeft() {
+    this._updateTransform({ rotate: this._transform.rotate - 90 }, "rotateLeft");
+  }
+  _rotateRight() {
+    this._updateTransform({ rotate: this._transform.rotate + 90 }, "rotateRight");
+  }
+  _flipX() {
+    this._updateTransform({ flipX: this._transform.flipX * -1 }, "flipX");
+  }
+  _flipY() {
+    this._updateTransform({ flipY: this._transform.flipY * -1 }, "flipY");
+  }
+  // ======================== 拖拽（鼠标 + 触摸） ========================
+  _startDrag(clientX, clientY) {
+    var _a;
+    if (((_a = this.preview) == null ? void 0 : _a.movable) === false) return;
+    this._isDragging = true;
+    this._dragStart = {
+      x: clientX,
+      y: clientY,
+      tx: this._transform.x,
+      ty: this._transform.y
+    };
+  }
+  _moveDrag(clientX, clientY) {
+    if (!this._isDragging) return;
+    const dx = clientX - this._dragStart.x;
+    const dy = clientY - this._dragStart.y;
+    const newX = this._dragStart.tx + dx;
+    const newY = this._dragStart.ty + dy;
+    this._pendingTransform = __spreadProps(__spreadValues({}, this._pendingTransform), {
+      x: newX,
+      y: newY
+    });
+    if (this._rafId === null) {
+      this._rafId = requestAnimationFrame(() => {
+        if (this._pendingTransform) {
+          this._updateTransform(this._pendingTransform, "move");
+          this._pendingTransform = null;
+        }
+        this._rafId = null;
+      });
+    }
+  }
+  _endDrag() {
+    this._isDragging = false;
+  }
+  _handleMouseDown(e) {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    this._startDrag(e.clientX, e.clientY);
+  }
+  _handleMouseMove(e) {
+    this._moveDrag(e.clientX, e.clientY);
+  }
+  _handleMouseUp() {
+    this._endDrag();
+  }
+  _handleTouchStart(e) {
+    if (e.touches.length !== 1) return;
+    e.preventDefault();
+    const touch = e.touches[0];
+    this._startDrag(touch.clientX, touch.clientY);
+  }
+  _handleTouchMove(e) {
+    if (e.touches.length !== 1) return;
+    const touch = e.touches[0];
+    this._moveDrag(touch.clientX, touch.clientY);
+  }
+  _handleTouchEnd() {
+    this._endDrag();
+  }
+  /** 双击预览图片恢复默认缩放 */
+  _handlePreviewDblClick() {
+    this._updateTransform({ scale: 1, x: 0, y: 0 }, "doubleClick");
+  }
+  // ======================== 键盘 & 滚轮 ========================
+  _handleKeyDown(e) {
+    if (e.key === "Escape") {
+      this._closePreview();
+    }
+  }
+  _handleWheel(e) {
+    e.preventDefault();
+    if (e.deltaY === 0) return;
+    const scaleRatio = Math.min(Math.abs(e.deltaY / 100), 1);
+    let ratio = 1 + scaleRatio * this._scaleStep;
+    if (e.deltaY > 0) {
+      ratio = 1 / ratio;
+    }
+    this._dispatchZoom(ratio, e.clientX, e.clientY);
+  }
+  /**
+   * 以乘法比率进行缩放，使用 raf 合并同一帧内的多次更新。
+   * 参考 Ant Design rc-component/image 的 dispatchZoomChange 实现。
+   */
+  _dispatchZoom(ratio, clientX, clientY) {
+    const { scale: prevScale, x, y } = this._transform;
+    let newScale = prevScale * ratio;
+    if (newScale > this._maxScale) {
+      newScale = this._maxScale;
+      ratio = this._maxScale / prevScale;
+    } else if (newScale < this._minScale) {
+      newScale = this._minScale;
+      ratio = newScale / prevScale;
+    }
+    if (newScale === prevScale) return;
+    let newX = x;
+    let newY = y;
+    if (clientX !== void 0 && clientY !== void 0) {
+      const viewCenterX = window.innerWidth / 2;
+      const viewCenterY = window.innerHeight / 2;
+      const diffRatio = ratio - 1;
+      const diffOffsetX = diffRatio * (clientX - viewCenterX - x);
+      const diffOffsetY = diffRatio * (clientY - viewCenterY - y);
+      newX = x - diffOffsetX;
+      newY = y - diffOffsetY;
+      if (ratio < 1 && newScale === this._minScale) {
+        newX = 0;
+        newY = 0;
+      }
+    }
+    this._pendingTransform = __spreadProps(__spreadValues({}, this._pendingTransform), {
+      scale: newScale,
+      x: newX,
+      y: newY
+    });
+    if (this._rafId === null) {
+      this._rafId = requestAnimationFrame(() => {
+        if (this._pendingTransform) {
+          this._updateTransform(this._pendingTransform, "wheel");
+          this._pendingTransform = null;
+        }
+        this._rafId = null;
+      });
+    }
+  }
+  _addPreviewListeners() {
+    this._removePreviewListeners();
+    this._boundMouseMove = this._handleMouseMove.bind(this);
+    this._boundMouseUp = this._handleMouseUp.bind(this);
+    this._boundKeyDown = this._handleKeyDown.bind(this);
+    this._boundWheel = this._handleWheel.bind(this);
+    this._boundTouchMove = this._handleTouchMove.bind(this);
+    this._boundTouchEnd = this._handleTouchEnd.bind(this);
+    document.addEventListener("mousemove", this._boundMouseMove);
+    document.addEventListener("mouseup", this._boundMouseUp);
+    document.addEventListener("keydown", this._boundKeyDown);
+    document.addEventListener("wheel", this._boundWheel, { passive: false });
+    document.addEventListener("touchmove", this._boundTouchMove, { passive: false });
+    document.addEventListener("touchend", this._boundTouchEnd);
+  }
+  _removePreviewListeners() {
+    if (this._boundMouseMove) document.removeEventListener("mousemove", this._boundMouseMove);
+    if (this._boundMouseUp) document.removeEventListener("mouseup", this._boundMouseUp);
+    if (this._boundKeyDown) document.removeEventListener("keydown", this._boundKeyDown);
+    if (this._boundWheel) document.removeEventListener("wheel", this._boundWheel);
+    if (this._boundTouchMove) document.removeEventListener("touchmove", this._boundTouchMove);
+    if (this._boundTouchEnd) document.removeEventListener("touchend", this._boundTouchEnd);
+    this._boundMouseMove = null;
+    this._boundMouseUp = null;
+    this._boundKeyDown = null;
+    this._boundWheel = null;
+    this._boundTouchMove = null;
+    this._boundTouchEnd = null;
+  }
+  _handleMaskClick(e) {
+    if (e.target.classList.contains("preview__mask")) {
+      this._closePreview();
+    }
+  }
+  _handleBodyClick(e) {
+    if (e.target === e.currentTarget) {
+      this._closePreview();
+    }
+  }
+  // ======================== 预览图片变换样式 ========================
+  get _previewImgStyle() {
+    const { scale, rotate, flipX, flipY, x, y } = this._transform;
+    return {
+      transform: `translate3d(${x}px, ${y}px, 0) scale3d(${flipX * scale}, ${flipY * scale}, 1) rotate(${rotate}deg)`
+    };
+  }
+  // ======================== Mask 配置 ========================
+  get _maskConfig() {
+    const preview = this.preview;
+    if (!preview) return { show: true, blur: false };
+    if (preview.mask === false) return { show: false, blur: false };
+    if (preview.mask === true || preview.mask === void 0) return { show: true, blur: false };
+    return { show: true, blur: !!preview.mask.blur };
+  }
+  // ======================== 预览 src ========================
+  get _previewSrc() {
+    var _a;
+    return ((_a = this.preview) == null ? void 0 : _a.src) || this.src;
+  }
+  // ======================== Cover ========================
+  get _coverPlacement() {
+    var _a;
+    return ((_a = this.preview) == null ? void 0 : _a.coverPlacement) || "center";
+  }
+  // ======================== 渲染 ========================
+  _renderImage() {
+    const imgStyles = {};
+    if (this.width) imgStyles.width = this._parseDimension(this.width);
+    if (this.height) imgStyles.height = this._parseDimension(this.height);
+    if (this._status === "error") {
+      if (this.fallback) {
+        return html`<img
+          part="img"
+          class="image__img image__img--error"
+          src=${this.fallback}
+          alt=${this.alt}
+          style=${styleMap(imgStyles)}
+        />`;
+      }
+      return html`
+        <div class="image__error" style=${styleMap(imgStyles)}>
+          <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+            <rect x="8" y="8" width="48" height="48" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
+            <circle cx="24" cy="26" r="4" fill="currentColor"/>
+            <path d="M12 44l12-16 8 10 6-6 14 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      `;
+    }
+    return html`
+      <img
+        part="img"
+        class=${classMap({
+      "image__img": true,
+      "image__img--disabled": this.noPreview
+    })}
+        src=${this.src}
+        alt=${this.alt}
+        style=${styleMap(imgStyles)}
+        @load=${this._handleLoad}
+        @error=${this._handleError}
+        @click=${this._openPreview}
+      />
+    `;
+  }
+  _renderPlaceholder() {
+    const hasPlaceholderProp = this.placeholder !== void 0 && this.placeholder !== false;
+    const isLoading = this._status === "loading";
+    if (!hasPlaceholderProp) {
+      if (!isLoading) return nothing;
+      return html`
+        <div class="image__placeholder" part="placeholder">
+          <slot name="placeholder"></slot>
+        </div>
+      `;
+    }
+    if (this._status === "error") return nothing;
+    const isString = typeof this.placeholder === "string";
+    return html`
+      <div
+        class=${classMap({
+      "image__placeholder": true,
+      "image__placeholder--default": !isString,
+      "image__placeholder--loaded": this._status === "loaded"
+    })}
+        part="placeholder"
+      >
+        <slot name="placeholder">
+          ${isString ? html`<img class="image__placeholder-img" src=${this.placeholder} alt="" />` : nothing}
+        </slot>
+      </div>
+    `;
+  }
+  _renderCover() {
+    var _a;
+    if (this.noPreview || this._status === "error") return nothing;
+    const placement = this._coverPlacement;
+    const coverClasses = {
+      "image__cover": true,
+      "image__cover--top": placement === "top",
+      "image__cover--bottom": placement === "bottom"
+    };
+    return html`
+      <div
+        class=${classMap(coverClasses)}
+        part="cover"
+        @click=${this._openPreview}
+      >
+        <slot name="cover">
+          ${((_a = this.preview) == null ? void 0 : _a.cover) ? html`<span>${this.preview.cover}</span>` : html`
+              <span class="image__cover-default">
+                ${iconEye}
+                <span>预览</span>
+              </span>
+            `}
+        </slot>
+      </div>
+    `;
+  }
+  _renderPreview() {
+    var _a, _b, _c, _d;
+    if (!this.previewOpen) return nothing;
+    const maskConfig = this._maskConfig;
+    const isMinScale = this._transform.scale <= this._minScale;
+    const isMaxScale = this._transform.scale >= this._maxScale;
+    const defaultActions = html`
+      <div part="preview-actions" class="preview__actions">
+        <button
+          class=${classMap({ "preview__action": true })}
+          @click=${() => this._flipX()}
+          aria-label="Flip horizontal"
+        >${iconFlipX}</button>
+        <button
+          class=${classMap({ "preview__action": true })}
+          @click=${() => this._flipY()}
+          aria-label="Flip vertical"
+        >${iconFlipY}</button>
+        <button
+          class="preview__action"
+          @click=${() => this._rotateLeft()}
+          aria-label="Rotate left"
+        >${iconRotateLeft}</button>
+        <button
+          class="preview__action"
+          @click=${() => this._rotateRight()}
+          aria-label="Rotate right"
+        >${iconRotateRight}</button>
+        <button
+          class=${classMap({
+      "preview__action": true,
+      "preview__action--disabled": isMinScale
+    })}
+          @click=${() => !isMinScale && this._zoomOut()}
+          aria-label="Zoom out"
+        >${iconZoomOut}</button>
+        <button
+          class=${classMap({
+      "preview__action": true,
+      "preview__action--disabled": isMaxScale
+    })}
+          @click=${() => !isMaxScale && this._zoomIn()}
+          aria-label="Zoom in"
+        >${iconZoomIn}</button>
+      </div>
+    `;
+    const actionsRender = (_a = this.preview) == null ? void 0 : _a.actionsRender;
+    let actionsContent = defaultActions;
+    if (typeof actionsRender === "function") {
+      const info = {
+        icons: {
+          flipXIcon: iconFlipX,
+          flipYIcon: iconFlipY,
+          rotateLeftIcon: iconRotateLeft,
+          rotateRightIcon: iconRotateRight,
+          zoomOutIcon: iconZoomOut,
+          zoomInIcon: iconZoomIn
+        },
+        actions: {
+          onFlipX: () => this._flipX(),
+          onFlipY: () => this._flipY(),
+          onRotateLeft: () => this._rotateLeft(),
+          onRotateRight: () => this._rotateRight(),
+          onZoomOut: () => this._zoomOut(),
+          onZoomIn: () => this._zoomIn(),
+          onReset: () => this._resetTransform(),
+          onClose: () => this._closePreview()
+        },
+        transform: __spreadValues({}, this._transform),
+        image: {
+          url: this._previewSrc,
+          alt: this.alt,
+          width: this.width,
+          height: this.height
+        }
+      };
+      actionsContent = actionsRender(defaultActions, info);
+    }
+    const defaultImage = html`
+      <img
+        part="preview-img"
+        class="preview__img"
+        src=${this._previewSrc}
+        alt=${ifDefined(this.alt || void 0)}
+        style=${styleMap(this._previewImgStyle)}
+        @mousedown=${(e) => this._handleMouseDown(e)}
+        @touchstart=${(e) => this._handleTouchStart(e)}
+        @dblclick=${() => this._handlePreviewDblClick()}
+      />
+    `;
+    const imageRender = (_b = this.preview) == null ? void 0 : _b.imageRender;
+    let imageContent = defaultImage;
+    if (typeof imageRender === "function") {
+      const imageInfo = {
+        transform: __spreadValues({}, this._transform),
+        image: {
+          url: this._previewSrc,
+          alt: this.alt,
+          width: this.width,
+          height: this.height
+        }
+      };
+      imageContent = imageRender(defaultImage, imageInfo);
+    }
+    return html`
+      <div
+        class=${classMap({
+      "preview-overlay": true,
+      "preview-overlay--moving": this._isDragging,
+      "preview-overlay--closing": this._previewClosing
+    })}
+      >
+        <!-- Mask -->
+        <div
+          part="preview-mask"
+          class=${classMap({
+      "preview__mask": true,
+      "preview__mask--blur": maskConfig.blur,
+      "preview__mask--hidden": !maskConfig.show
+    })}
+          @click=${(e) => this._handleMaskClick(e)}
+        ></div>
+
+        <!-- Body -->
+        <div
+          part="preview-body"
+          class="preview__body"
+          @click=${(e) => this._handleBodyClick(e)}
+        >
+          ${imageContent}
+        </div>
+
+        <!-- Close -->
+        <button
+          part="preview-close"
+          class="preview__close"
+          @click=${() => this._closePreview()}
+          aria-label="Close preview"
+        >
+          ${(_d = (_c = this.preview) == null ? void 0 : _c.closeIcon) != null ? _d : iconClose}
+        </button>
+
+        <!-- Footer -->
+        <div class="preview__footer">
+          ${actionsContent}
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    const wrapperStyles = {};
+    if (this.width) wrapperStyles.width = this._parseDimension(this.width);
+    if (this.height) wrapperStyles.height = this._parseDimension(this.height);
+    return html`
+      <div part="base" class="image" style=${styleMap(wrapperStyles)}>
+        ${this._renderImage()}
+        ${this._renderPlaceholder()}
+        ${this._renderCover()}
+      </div>
+    `;
+  }
+};
+SlImage.styles = [component_styles_default, image_styles_default, image_preview_styles_default];
+__decorateClass([
+  property({ type: String })
+], SlImage.prototype, "src", 2);
+__decorateClass([
+  property({ type: String })
+], SlImage.prototype, "alt", 2);
+__decorateClass([
+  property({ type: String })
+], SlImage.prototype, "width", 2);
+__decorateClass([
+  property({ type: String })
+], SlImage.prototype, "height", 2);
+__decorateClass([
+  property({ type: String })
+], SlImage.prototype, "fallback", 2);
+__decorateClass([
+  property({
+    attribute: "placeholder",
+    converter: {
+      fromAttribute(value) {
+        if (value === null) return void 0;
+        if (value === "" || value === "true") return true;
+        if (value === "false") return false;
+        return value;
+      }
+    }
+  })
+], SlImage.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-preview" })
+], SlImage.prototype, "noPreview", 2);
+__decorateClass([
+  property({ type: Object })
+], SlImage.prototype, "preview", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "in-group", reflect: true })
+], SlImage.prototype, "inGroup", 2);
+__decorateClass([
+  state()
+], SlImage.prototype, "_status", 2);
+__decorateClass([
+  state()
+], SlImage.prototype, "_previewOpen", 2);
+__decorateClass([
+  state()
+], SlImage.prototype, "_previewClosing", 2);
+__decorateClass([
+  state()
+], SlImage.prototype, "_transform", 2);
+__decorateClass([
+  state()
+], SlImage.prototype, "_isDragging", 2);
+
+export {
+  SlImage
+};