@kdcloudjs/shoelace 1.0.48 → 1.0.50

package/cdn/chunks/chunk.47MON6OX.js

@@ -0,0 +1,692 @@
+import {
+  image_preview_group_styles_default
+} from "./chunk.IPCTPYUI.js";
+import {
+  iconClose,
+  iconFlipX,
+  iconFlipY,
+  iconLeft,
+  iconRight,
+  iconRotateLeft,
+  iconRotateRight,
+  iconZoomIn,
+  iconZoomOut
+} from "./chunk.CONCVRCO.js";
+import {
+  image_preview_styles_default
+} from "./chunk.LIG4F42T.js";
+import {
+  o as o2
+} from "./chunk.TNQRIWXJ.js";
+import {
+  o
+} from "./chunk.OJXBTTLD.js";
+import {
+  e
+} from "./chunk.ZLKEMKLZ.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.LDOWFQPY.js";
+import {
+  A,
+  D,
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/image-preview-group/image-preview-group.component.ts
+var SlImagePreviewGroup = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this._previewOpen = false;
+    this._previewClosing = false;
+    this._currentIndex = 0;
+    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;
+    /** 上一次受控 current 值 */
+    this._prevControlledCurrent = void 0;
+    /** raf 帧 ID */
+    this._rafId = null;
+    /** raf 待合并变换 */
+    this._pendingTransform = null;
+    /** 预览弹层的 portal 容器 */
+    this._portalContainer = null;
+    /** 标记 portal 样式是否已注入 */
+    this._portalStyleInjected = false;
+    // ======================== 事件处理 ========================
+    this._handleImageClick = (e2) => {
+      if (this._disabled) return;
+      const target = e2.target;
+      const images = this._getSlottedImages();
+      const index = images.indexOf(target);
+      if (index >= 0) {
+        this._openPreview(index);
+      }
+      e2.stopPropagation();
+    };
+  }
+  // ======================== 预览配置快捷访问 ========================
+  /** 获取有效的预览配置（preview=false 时返回 null） */
+  get _config() {
+    var _a;
+    if (this.preview === false) return null;
+    return (_a = this.preview) != null ? _a : {};
+  }
+  /** 预览是否被禁用 */
+  get _disabled() {
+    return this.preview === false;
+  }
+  // ======================== 生命周期 ========================
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("sl-image-click", this._handleImageClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("sl-image-click", this._handleImageClick);
+    this._removePreviewListeners();
+    this._cancelRaf();
+    this._removePortal();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this._syncPortal();
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (!changedProperties.has("preview")) return;
+    this._syncSlottedImagesState();
+    const config = this._config;
+    if (!config) return;
+    const controlledOpen = config.open;
+    if (controlledOpen !== void 0 && controlledOpen !== this._prevControlledOpen) {
+      if (controlledOpen && !this._prevControlledOpen) {
+        this._previewOpen = true;
+        this._resetTransform();
+        this._addPreviewListeners();
+      } else if (!controlledOpen && this._prevControlledOpen) {
+        this._previewOpen = false;
+        this._previewClosing = false;
+        this._isDragging = false;
+        this._cancelRaf();
+        this._removePreviewListeners();
+      }
+      this._prevControlledOpen = controlledOpen;
+    }
+    const controlledCurrent = config.current;
+    if (controlledCurrent !== void 0 && controlledCurrent !== this._prevControlledCurrent) {
+      const sources = this._getImageSources();
+      if (controlledCurrent >= 0 && controlledCurrent < sources.length) {
+        const prev = this._currentIndex;
+        this._currentIndex = controlledCurrent;
+        if (prev !== controlledCurrent) this._resetTransform();
+      }
+      this._prevControlledCurrent = controlledCurrent;
+    }
+  }
+  _cancelRaf() {
+    if (this._rafId !== null) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+      this._pendingTransform = null;
+    }
+  }
+  // ======================== Portal 管理 ========================
+  _ensurePortal() {
+    if (!this._portalContainer) {
+      this._portalContainer = document.createElement("div");
+      this._portalContainer.className = "sl-image-preview-group-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;
+  }
+  _syncPortal() {
+    if (this.previewOpen || this._previewClosing) {
+      const container = this._ensurePortal();
+      D(this._renderPreview(), container);
+    } else if (this._portalContainer) {
+      D(A, this._portalContainer);
+    }
+  }
+  _removePortal() {
+    if (this._portalContainer) {
+      D(A, this._portalContainer);
+      this._portalContainer.remove();
+      this._portalContainer = null;
+    }
+  }
+  // ======================== 预览状态 ========================
+  get previewOpen() {
+    var _a;
+    const config = this._config;
+    return (_a = config == null ? void 0 : config.open) != null ? _a : this._previewOpen;
+  }
+  // ======================== 收集图片 ========================
+  _getImageSources() {
+    var _a;
+    if (this.items && this.items.length > 0) {
+      return this.items.map((item) => typeof item === "string" ? item : item.src);
+    }
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("slot");
+    if (!slot) return [];
+    return slot.assignedElements({ flatten: true }).filter((el) => el.tagName.toLowerCase() === "sl-image").map((img) => img.getAttribute("src") || "");
+  }
+  _getSlottedImages() {
+    var _a;
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("slot");
+    if (!slot) return [];
+    return slot.assignedElements({ flatten: true }).filter((el) => el.tagName.toLowerCase() === "sl-image");
+  }
+  /** 获取当前预览图片的信息 */
+  _getCurrentImageInfo() {
+    const sources = this._getImageSources();
+    const idx = this._currentIndex;
+    const url = sources[idx] || "";
+    if (this.items && this.items.length > 0) {
+      const item = this.items[idx];
+      if (item && typeof item === "object") {
+        return { url: item.src, alt: item.alt || "" };
+      }
+      return { url, alt: "" };
+    }
+    const images = this._getSlottedImages();
+    const img = images[idx];
+    return {
+      url,
+      alt: (img == null ? void 0 : img.getAttribute("alt")) || "",
+      width: (img == null ? void 0 : img.getAttribute("width")) || void 0,
+      height: (img == null ? void 0 : img.getAttribute("height")) || void 0
+    };
+  }
+  _handleSlotChange() {
+    this._syncSlottedImagesState();
+  }
+  /** 同步子图片的 in-group 和 no-preview 状态 */
+  _syncSlottedImagesState() {
+    const images = this._getSlottedImages();
+    images.forEach((img) => {
+      img.setAttribute("in-group", "");
+      if (this._disabled) {
+        img.setAttribute("no-preview", "");
+      } else {
+        img.removeAttribute("no-preview");
+      }
+    });
+  }
+  // ======================== 预览控制 ========================
+  _openPreview(index) {
+    var _a, _b;
+    this._currentIndex = index;
+    this._previewOpen = true;
+    this._resetTransform();
+    this._addPreviewListeners();
+    this.emit("sl-preview-open");
+    (_b = (_a = this._config) == null ? void 0 : _a.onOpenChange) == null ? void 0 : _b.call(_a, true, { current: index });
+  }
+  _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 onEnd = () => {
+        overlay.removeEventListener("animationend", onEnd);
+        this._finishClose();
+      };
+      overlay.addEventListener("animationend", onEnd);
+      setTimeout(() => {
+        overlay.removeEventListener("animationend", onEnd);
+        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._config) == null ? void 0 : _a.onOpenChange) == null ? void 0 : _b.call(_a, false, { current: this._currentIndex });
+  }
+  _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._config) == null ? void 0 : _a.onTransform) == null ? void 0 : _b.call(_a, { transform: __spreadValues({}, this._transform), action });
+  }
+  // ======================== 切换图片 ========================
+  /** 按偏移量切换图片（delta=1 下一张，delta=-1 上一张） */
+  _switchImage(delta) {
+    var _a, _b;
+    const sources = this._getImageSources();
+    const prev = this._currentIndex;
+    const next = this._currentIndex + delta;
+    if (next < 0 || next >= sources.length) return;
+    this._currentIndex = next;
+    this._resetTransform();
+    (_b = (_a = this._config) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, next, prev);
+    this.emit("sl-preview-change", { detail: { current: next, prev } });
+  }
+  // ======================== 变换操作 ========================
+  get _scaleStep() {
+    var _a, _b;
+    return (_b = (_a = this._config) == null ? void 0 : _a.scaleStep) != null ? _b : 0.5;
+  }
+  get _minScale() {
+    var _a, _b;
+    return (_b = (_a = this._config) == null ? void 0 : _a.minScale) != null ? _b : 1;
+  }
+  get _maxScale() {
+    var _a, _b;
+    return (_b = (_a = this._config) == null ? void 0 : _a.maxScale) != null ? _b : 50;
+  }
+  _zoomIn() {
+    const next = Math.min(this._transform.scale + this._scaleStep, this._maxScale);
+    if (next !== this._transform.scale) this._updateTransform({ scale: next }, "zoomIn");
+  }
+  _zoomOut() {
+    const next = Math.max(this._transform.scale - this._scaleStep, this._minScale);
+    if (next !== this._transform.scale) this._updateTransform({ scale: next }, "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._config) == 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 newX = this._dragStart.tx + (clientX - this._dragStart.x);
+    const newY = this._dragStart.ty + (clientY - this._dragStart.y);
+    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(e2) {
+    if (e2.button !== 0) return;
+    e2.preventDefault();
+    this._startDrag(e2.clientX, e2.clientY);
+  }
+  _handleMouseMove(e2) {
+    this._moveDrag(e2.clientX, e2.clientY);
+  }
+  _handleMouseUp() {
+    this._endDrag();
+  }
+  _handleTouchStart(e2) {
+    if (e2.touches.length !== 1) return;
+    e2.preventDefault();
+    this._startDrag(e2.touches[0].clientX, e2.touches[0].clientY);
+  }
+  _handleTouchMove(e2) {
+    if (e2.touches.length !== 1) return;
+    this._moveDrag(e2.touches[0].clientX, e2.touches[0].clientY);
+  }
+  _handleTouchEnd() {
+    this._endDrag();
+  }
+  /** 双击恢复默认缩放 */
+  _handlePreviewDblClick() {
+    this._updateTransform({ scale: 1, x: 0, y: 0 }, "doubleClick");
+  }
+  // ======================== 键盘 & 滚轮 ========================
+  _handleKeyDown(e2) {
+    if (e2.key === "Escape") this._closePreview();
+    if (e2.key === "ArrowLeft") this._switchImage(-1);
+    if (e2.key === "ArrowRight") this._switchImage(1);
+  }
+  _handleWheel(e2) {
+    e2.preventDefault();
+    if (e2.deltaY === 0) return;
+    const scaleRatio = Math.min(Math.abs(e2.deltaY / 100), 1);
+    let ratio = 1 + scaleRatio * this._scaleStep;
+    if (e2.deltaY > 0) ratio = 1 / ratio;
+    this._dispatchZoom(ratio, e2.clientX, e2.clientY);
+  }
+  /** 以乘法比率缩放，raf 合并 */
+  _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, newY = y;
+    if (clientX !== void 0 && clientY !== void 0) {
+      const vcx = window.innerWidth / 2, vcy = window.innerHeight / 2;
+      const dr = ratio - 1;
+      newX = x - dr * (clientX - vcx - x);
+      newY = y - dr * (clientY - vcy - y);
+      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(e2) {
+    if (e2.target.classList.contains("preview__mask")) {
+      this._closePreview();
+    }
+  }
+  _handleBodyClick(e2) {
+    if (e2.target === e2.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)`
+    };
+  }
+  get _maskConfig() {
+    const config = this._config;
+    if (!config) return { show: true, blur: false };
+    const mask = config.mask;
+    if (mask === false) return { show: false, blur: false };
+    if (mask === true || mask === void 0) return { show: true, blur: false };
+    return { show: mask.enabled !== false, blur: !!mask.blur };
+  }
+  /** 获取当前图片的 crossOrigin 属性 */
+  _getCurrentCrossOrigin() {
+    if (this.items && this.items.length > 0) {
+      const item = this.items[this._currentIndex];
+      if (item && typeof item === "object") return item.crossOrigin;
+    }
+    return void 0;
+  }
+  // ======================== 渲染 ========================
+  _renderPreview() {
+    var _a;
+    if (!this.previewOpen) return A;
+    const config = this._config;
+    const sources = this._getImageSources();
+    const total = sources.length;
+    const current = this._currentIndex;
+    const currentSrc = sources[current] || "";
+    const imageInfo = this._getCurrentImageInfo();
+    const crossOrigin = this._getCurrentCrossOrigin();
+    const maskConfig = this._maskConfig;
+    const isMinScale = this._transform.scale <= this._minScale;
+    const isMaxScale = this._transform.scale >= this._maxScale;
+    const isFirst = current <= 0;
+    const isLast = current >= total - 1;
+    const counterContent = (config == null ? void 0 : config.countRender) ? config.countRender(current + 1, total) : `${current + 1} / ${total}`;
+    const defaultImage = b`
+      <img
+        part="preview-img"
+        class="preview__img"
+        src=${currentSrc}
+        alt=${o(imageInfo.alt || void 0)}
+        crossorigin=${o(crossOrigin)}
+        style=${o2(this._previewImgStyle)}
+        @mousedown=${(e2) => this._handleMouseDown(e2)}
+        @touchstart=${(e2) => this._handleTouchStart(e2)}
+        @dblclick=${() => this._handlePreviewDblClick()}
+      />
+    `;
+    let imageContent = defaultImage;
+    if (typeof (config == null ? void 0 : config.imageRender) === "function") {
+      imageContent = config.imageRender(defaultImage, {
+        transform: __spreadValues({}, this._transform),
+        image: imageInfo,
+        current
+      });
+    }
+    const defaultActions = b`
+      <div part="preview-actions" class="preview__actions">
+        <button class="preview__action" @click=${() => this._flipX()} aria-label="Flip horizontal">${iconFlipX}</button>
+        <button class="preview__action" @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=${e({ "preview__action": true, "preview__action--disabled": isMinScale })}
+          @click=${() => !isMinScale && this._zoomOut()}
+          aria-label="Zoom out"
+        >${iconZoomOut}</button>
+        <button
+          class=${e({ "preview__action": true, "preview__action--disabled": isMaxScale })}
+          @click=${() => !isMaxScale && this._zoomIn()}
+          aria-label="Zoom in"
+        >${iconZoomIn}</button>
+      </div>
+    `;
+    let actionsContent = defaultActions;
+    if (typeof (config == null ? void 0 : config.actionsRender) === "function") {
+      const info = {
+        icons: {
+          flipXIcon: iconFlipX,
+          flipYIcon: iconFlipY,
+          rotateLeftIcon: iconRotateLeft,
+          rotateRightIcon: iconRotateRight,
+          zoomOutIcon: iconZoomOut,
+          zoomInIcon: iconZoomIn
+        },
+        actions: {
+          onActive: (offset) => this._switchImage(offset),
+          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),
+        current,
+        total,
+        image: imageInfo
+      };
+      actionsContent = config.actionsRender(defaultActions, info);
+    }
+    return b`
+      <div
+        class=${e({
+      "preview-overlay": true,
+      "preview-overlay--moving": this._isDragging,
+      "preview-overlay--closing": this._previewClosing
+    })}
+      >
+        <div
+          part="preview-mask"
+          class=${e({
+      "preview__mask": true,
+      "preview__mask--blur": maskConfig.blur,
+      "preview__mask--hidden": !maskConfig.show
+    })}
+          @click=${(e2) => this._handleMaskClick(e2)}
+        ></div>
+
+        <div part="preview-body" class="preview__body" @click=${(e2) => this._handleBodyClick(e2)}>
+          ${imageContent}
+        </div>
+
+        <button
+          part="preview-close"
+          class="preview__close"
+          @click=${() => this._closePreview()}
+          aria-label="Close preview"
+        >${(_a = config == null ? void 0 : config.closeIcon) != null ? _a : iconClose}</button>
+
+        ${total > 1 ? b`
+          <button
+            class=${e({
+      "preview__switch": true,
+      "preview__switch--prev": true,
+      "preview__switch--disabled": isFirst
+    })}
+            @click=${() => !isFirst && this._switchImage(-1)}
+            aria-label="Previous image"
+          >${iconLeft}</button>
+          <button
+            class=${e({
+      "preview__switch": true,
+      "preview__switch--next": true,
+      "preview__switch--disabled": isLast
+    })}
+            @click=${() => !isLast && this._switchImage(1)}
+            aria-label="Next image"
+          >${iconRight}</button>
+        ` : A}
+
+        <div class="preview__footer">
+          ${total > 1 ? b`
+            <div part="preview-counter" class="preview__counter">${counterContent}</div>
+          ` : A}
+          ${actionsContent}
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    return b`
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    `;
+  }
+};
+SlImagePreviewGroup.styles = [component_styles_default, image_preview_group_styles_default, image_preview_styles_default];
+__decorateClass([
+  n({
+    attribute: "preview",
+    converter: {
+      fromAttribute(value) {
+        if (value === "false") return false;
+        if (value === null || value === "" || value === "true") return void 0;
+        try {
+          return JSON.parse(value);
+        } catch (e2) {
+          return void 0;
+        }
+      }
+    }
+  })
+], SlImagePreviewGroup.prototype, "preview", 2);
+__decorateClass([
+  n({ type: Array })
+], SlImagePreviewGroup.prototype, "items", 2);
+__decorateClass([
+  n({ type: String })
+], SlImagePreviewGroup.prototype, "fallback", 2);
+__decorateClass([
+  r()
+], SlImagePreviewGroup.prototype, "_previewOpen", 2);
+__decorateClass([
+  r()
+], SlImagePreviewGroup.prototype, "_previewClosing", 2);
+__decorateClass([
+  r()
+], SlImagePreviewGroup.prototype, "_currentIndex", 2);
+__decorateClass([
+  r()
+], SlImagePreviewGroup.prototype, "_transform", 2);
+__decorateClass([
+  r()
+], SlImagePreviewGroup.prototype, "_isDragging", 2);
+
+export {
+  SlImagePreviewGroup
+};