@kdcloudjs/shoelace 1.0.40 → 1.0.42

package/cdn/chunks/chunk.HA4UE2YH.js

@@ -1,647 +0,0 @@
-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.BSV73YK3.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.GHZEUHFY.js";
-import {
-  A,
-  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;
-    // ======================== 事件处理 ========================
-    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();
-  }
-  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;
-    }
-  }
-  // ======================== 预览状态 ========================
-  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;
-    const overlay = (_a = this.shadowRoot) == 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.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=${this._handleMouseDown}
-        @touchstart=${this._handleTouchStart}
-        @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=${this._handleMaskClick}
-        ></div>
-
-        <div part="preview-body" class="preview__body" @click=${this._handleBodyClick}>
-          ${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>
-      ${this._renderPreview()}
-    `;
-  }
-};
-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
-};