@kdcloudjs/shoelace 1.0.43 → 1.0.45

package/dist/chunks/chunk.J5RICP5L.js

@@ -1,771 +0,0 @@
-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
-};