@wix/auto-patterns 1.49.0 → 1.51.0

package/dist/esm/cms-fields/components/exclamation/exclamation.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/cms-fields/components/exclamation/exclamation.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"exclamation1902386010\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"exclamation1902386010__root\",\"exclamation\":\"exclamation1902386010__exclamation\",\"actions\":\"exclamation1902386010__actions\",\"action\":\"exclamation1902386010__action\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-fill-warning-primary\":\"--wds-color-fill-warning-primary\",\"wds-color-fill-destructive-primary\":\"--wds-color-fill-destructive-primary\",\"wds-color-blue-100\":\"--wds-color-blue-100\",\"wds-color-blue-200\":\"--wds-color-blue-200\"}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,kCAAkC;AAIhF,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC,6BAA6B;EAAC,aAAa,EAAC,oCAAoC;EAAC,SAAS,EAAC,gCAAgC;EAAC,QAAQ,EAAC;AAA+B,CAAC;AAClM,OAAO,IAAIC,SAAS,GAAG,CAAC,CAAC;AACzB,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG;EAAC,gCAAgC,EAAC,kCAAkC;EAAC,oCAAoC,EAAC,sCAAsC;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,oBAAoB,EAAC;AAAsB,CAAC","ignoreList":[]}
+{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/cms-fields/components/exclamation/exclamation.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"exclamation2449597688\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"exclamation2449597688__root\",\"exclamation\":\"exclamation2449597688__exclamation\",\"actions\":\"exclamation2449597688__actions\",\"action\":\"exclamation2449597688__action\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-fill-warning-primary\":\"--wds-color-fill-warning-primary\",\"wds-color-fill-destructive-primary\":\"--wds-color-fill-destructive-primary\",\"wds-color-blue-100\":\"--wds-color-blue-100\",\"wds-color-blue-200\":\"--wds-color-blue-200\"}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,kCAAkC;AAIhF,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC,6BAA6B;EAAC,aAAa,EAAC,oCAAoC;EAAC,SAAS,EAAC,gCAAgC;EAAC,QAAQ,EAAC;AAA+B,CAAC;AAClM,OAAO,IAAIC,SAAS,GAAG,CAAC,CAAC;AACzB,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG;EAAC,gCAAgC,EAAC,kCAAkC;EAAC,oCAAoC,EAAC,sCAAsC;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,oBAAoB,EAAC;AAAsB,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/highlighted-text/highlighted-text.st.css.js

@@ -1,19 +1,19 @@
 // @ts-nocheck
 
 import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
-var _namespace_ = "highlightedtext3602929742";
+var _namespace_ = "highlightedtext1910413818";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
 export var classes = {
-  "root": "highlightedtext3602929742__root",
-  "substring": "highlightedtext3602929742__substring"
+  "root": "highlightedtext1910413818__root",
+  "substring": "highlightedtext1910413818__substring"
 };
 export var keyframes = {
-  "highlighted": "highlightedtext3602929742__highlighted",
-  "highlighted-match": "highlightedtext3602929742__highlighted-match"
+  "highlighted": "highlightedtext1910413818__highlighted",
+  "highlighted-match": "highlightedtext1910413818__highlighted-match"
 };
 export var layers = {};
 export var containers = {};

package/dist/esm/cms-fields/components/highlighted-text/highlighted-text.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/cms-fields/components/highlighted-text/highlighted-text.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"highlightedtext3602929742\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"highlightedtext3602929742__root\",\"substring\":\"highlightedtext3602929742__substring\"};\nexport var keyframes = {\"highlighted\":\"highlightedtext3602929742__highlighted\",\"highlighted-match\":\"highlightedtext3602929742__highlighted-match\"}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-yellow-200\":\"--wds-color-yellow-200\",\"wds-color-yellow-400\":\"--wds-color-yellow-400\",\"wsr-color-Y20\":\"--wsr-color-Y20\",\"wsr-color-Y40\":\"--wsr-color-Y40\"}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,kCAAkC;AAIhF,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC,iCAAiC;EAAC,WAAW,EAAC;AAAsC,CAAC;AAClH,OAAO,IAAIC,SAAS,GAAG;EAAC,aAAa,EAAC,wCAAwC;EAAC,mBAAmB,EAAC;AAA8C,CAAC;AAClJ,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/cms-fields/components/highlighted-text/highlighted-text.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"highlightedtext1910413818\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"highlightedtext1910413818__root\",\"substring\":\"highlightedtext1910413818__substring\"};\nexport var keyframes = {\"highlighted\":\"highlightedtext1910413818__highlighted\",\"highlighted-match\":\"highlightedtext1910413818__highlighted-match\"}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-yellow-200\":\"--wds-color-yellow-200\",\"wds-color-yellow-400\":\"--wds-color-yellow-400\",\"wsr-color-Y20\":\"--wsr-color-Y20\",\"wsr-color-Y40\":\"--wsr-color-Y40\"}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,kCAAkC;AAIhF,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC,iCAAiC;EAAC,WAAW,EAAC;AAAsC,CAAC;AAClH,OAAO,IAAIC,SAAS,GAAG;EAAC,aAAa,EAAC,wCAAwC;EAAC,mBAAmB,EAAC;AAA8C,CAAC;AAClJ,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/media-control/paste-url-button.st.css.js

@@ -1,16 +1,16 @@
 // @ts-nocheck
 
 import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
-var _namespace_ = "pasteurlbutton1695425721";
+var _namespace_ = "pasteurlbutton2355558468";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
 export var classes = {
-  "root": "pasteurlbutton1695425721__root",
-  "iconButtonTooltip": "pasteurlbutton1695425721__iconButtonTooltip",
-  "iconButton": "pasteurlbutton1695425721__iconButton"
+  "root": "pasteurlbutton2355558468__root",
+  "iconButtonTooltip": "pasteurlbutton2355558468__iconButtonTooltip",
+  "iconButton": "pasteurlbutton2355558468__iconButton"
 };
 export var keyframes = {};
 export var layers = {};

package/dist/esm/cms-fields/components/media-control/paste-url-button.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/cms-fields/components/media-control/paste-url-button.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"pasteurlbutton1695425721\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"pasteurlbutton1695425721__root\",\"iconButtonTooltip\":\"pasteurlbutton1695425721__iconButtonTooltip\",\"iconButton\":\"pasteurlbutton1695425721__iconButton\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,kCAAkC;AAIhF,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC,gCAAgC;EAAC,mBAAmB,EAAC,6CAA6C;EAAC,YAAY,EAAC;AAAsC,CAAC;AACpL,OAAO,IAAIC,SAAS,GAAG,CAAC,CAAC;AACzB,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/cms-fields/components/media-control/paste-url-button.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"pasteurlbutton2355558468\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"pasteurlbutton2355558468__root\",\"iconButtonTooltip\":\"pasteurlbutton2355558468__iconButtonTooltip\",\"iconButton\":\"pasteurlbutton2355558468__iconButton\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,kCAAkC;AAIhF,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC,gCAAgC;EAAC,mBAAmB,EAAC,6CAA6C;EAAC,YAAY,EAAC;AAAsC,CAAC;AACpL,OAAO,IAAIC,SAAS,GAAG,CAAC,CAAC;AACzB,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/media-gallery/form-media-gallery-field.js

@@ -0,0 +1,164 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { AddItem, Box, Button, IconButton, MediaOverlay, Tooltip } from '@wix/design-system';
+import { Refresh as RefreshIcon, Delete as DeleteIcon, Maximize as MaximizeIcon } from '@wix/wix-ui-icons-common';
+import { useTranslations } from '../../hooks';
+import { executeDownloading } from '../../utils/media-utils';
+import { getMediaURL } from '../../auto-cms-field-types';
+import { files } from '@wix/media';
+import { style, classes } from './form-media-gallery-field.st.css.js';
+import { FormMediaGalleryItemsPreview } from './form-media-gallery-items-preview';
+import { MediaPreviewModal } from './media-preview-modal';
+import { useMediaGalleryDialog } from './media-gallery-dialog/hooks';
+import { MediaGalleryDialog } from './media-gallery-dialog/media-gallery-dialog';
+const mediaGalleryPreviewTextKeys = {
+  replace: 'CMS.mediaGallery.preview.replace',
+  download: 'CMS.mediaGallery.preview.download',
+  delete: 'CMS.mediaGallery.preview.delete'
+};
+export const FormMediaGalleryField = _ref => {
+  let {
+    data,
+    onChange,
+    onClear,
+    readOnly,
+    invalid,
+    autoFocus,
+    dataHook
+  } = _ref;
+  const {
+    t
+  } = useTranslations();
+  const boxRef = useRef(null);
+  const inputRef = useRef(null);
+  const [boxWidth, setBoxWidth] = useState(0);
+  const [hovered, setHovered] = useState(false);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const hasValue = Boolean(data == null ? void 0 : data.length);
+
+  // autoFocus support
+  useEffect(() => {
+    var _boxRef$current, _inputRef$current;
+    if (!autoFocus) {
+      return;
+    }
+    (_boxRef$current = boxRef.current) == null || _boxRef$current.focus();
+    (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+  }, [autoFocus]);
+
+  // Responsive width tracking
+  useEffect(() => {
+    const el = boxRef.current;
+    if (!el) {
+      return;
+    }
+    setBoxWidth(el.clientWidth);
+    const ro = new ResizeObserver(_ref2 => {
+      let [entry] = _ref2;
+      return setBoxWidth(entry.contentRect.width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const {
+    openMediaGalleryDialog,
+    ...mediaGalleryDialogProps
+  } = useMediaGalleryDialog({
+    initialOpen: false,
+    items: data,
+    onChange
+  });
+  const onMouseEnter = useCallback(() => hasValue && setHovered(true), [hasValue]);
+  const onMouseLeave = useCallback(() => hasValue && setHovered(false), [hasValue]);
+
+  // Download using Wix media API (consistent with useMediaControl)
+  const onDownloadMedia = useCallback(async mediaUri => {
+    if (!mediaUri) {
+      return;
+    }
+    try {
+      var _result$downloadUrls;
+      const result = await files.generateFileDownloadUrl(mediaUri);
+      const downloadUrl = (_result$downloadUrls = result.downloadUrls) == null || (_result$downloadUrls = _result$downloadUrls[0]) == null ? void 0 : _result$downloadUrls.url;
+      if (!downloadUrl) {
+        throw new Error('No download URL returned');
+      }
+      executeDownloading(downloadUrl);
+    } catch (error) {
+      // Fallback: open the static URL in a new tab
+      console.error('Media download error, falling back to static URL:', error);
+      executeDownloading(getMediaURL(mediaUri));
+    }
+  }, []);
+  const onRequestMedia = useCallback(() => {
+    openMediaGalleryDialog();
+    setIsPreviewOpen(false);
+    setHovered(false);
+  }, [openMediaGalleryDialog]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-hook": dataHook,
+    ref: boxRef,
+    tabIndex: hasValue ? 0 : -1,
+    className: classes.container,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onFocus: onMouseEnter,
+    onBlur: onMouseLeave
+  }, !hasValue ? /*#__PURE__*/React.createElement("div", {
+    className: classes.addItemWrapper
+  }, /*#__PURE__*/React.createElement(AddItem, {
+    ref: inputRef,
+    className: style(classes.addItem, {
+      error: invalid
+    }),
+    size: "tiny",
+    theme: "dashes",
+    onClick: onRequestMedia,
+    disabled: readOnly,
+    dataHook: `${dataHook}-add`,
+    subtitle: t('CMS.mediaGallery.emptyHint')
+  }, t('CMS.mediaGallery.addGallery'))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaOverlay, {
+    hovered: hovered,
+    className: classes.overlay,
+    hoverSkin: "dark",
+    borderRadius: 0,
+    media: /*#__PURE__*/React.createElement(FormMediaGalleryItemsPreview, {
+      width: boxWidth,
+      value: data
+    })
+  }, /*#__PURE__*/React.createElement(MediaOverlay.Content, {
+    visible: "hover"
+  }, /*#__PURE__*/React.createElement(Box, {
+    gap: "SP2",
+    align: "center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    skin: "inverted",
+    prefixIcon: /*#__PURE__*/React.createElement(RefreshIcon, null),
+    onClick: onRequestMedia,
+    disabled: readOnly,
+    dataHook: `${dataHook}-manage`
+  }, t('CMS.mediaGallery.manageGallery')), /*#__PURE__*/React.createElement(Tooltip, {
+    content: t('CMS.mediaGallery.preview')
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    skin: "inverted",
+    onClick: () => setIsPreviewOpen(true),
+    dataHook: `${dataHook}-preview`
+  }, /*#__PURE__*/React.createElement(MaximizeIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
+    content: t('CMS.mediaGallery.clear')
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    skin: "inverted",
+    onClick: onClear,
+    disabled: readOnly,
+    dataHook: `${dataHook}-clear`
+  }, /*#__PURE__*/React.createElement(DeleteIcon, null)))))), /*#__PURE__*/React.createElement(MediaPreviewModal, {
+    isOpen: isPreviewOpen,
+    onClose: () => setIsPreviewOpen(false),
+    value: data == null ? void 0 : data.map(d => d.src),
+    onRequestMedia: onRequestMedia,
+    onClearMedia: onClear,
+    onDownloadMedia: onDownloadMedia,
+    textKeys: mediaGalleryPreviewTextKeys,
+    readOnly: readOnly
+  })), mediaGalleryDialogProps.isOpen && /*#__PURE__*/React.createElement(MediaGalleryDialog, mediaGalleryDialogProps));
+};
+FormMediaGalleryField.displayName = 'FormMediaGalleryField';
+//# sourceMappingURL=form-media-gallery-field.js.map

package/dist/esm/cms-fields/components/media-gallery/form-media-gallery-field.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","useState","useCallback","useEffect","AddItem","Box","Button","IconButton","MediaOverlay","Tooltip","Refresh","RefreshIcon","Delete","DeleteIcon","Maximize","MaximizeIcon","useTranslations","executeDownloading","getMediaURL","files","style","classes","FormMediaGalleryItemsPreview","MediaPreviewModal","useMediaGalleryDialog","MediaGalleryDialog","mediaGalleryPreviewTextKeys","replace","download","delete","FormMediaGalleryField","_ref","data","onChange","onClear","readOnly","invalid","autoFocus","dataHook","t","boxRef","inputRef","boxWidth","setBoxWidth","hovered","setHovered","isPreviewOpen","setIsPreviewOpen","hasValue","Boolean","length","_boxRef$current","_inputRef$current","current","focus","el","clientWidth","ro","ResizeObserver","_ref2","entry","contentRect","width","observe","disconnect","openMediaGalleryDialog","mediaGalleryDialogProps","initialOpen","items","onMouseEnter","onMouseLeave","onDownloadMedia","mediaUri","_result$downloadUrls","result","generateFileDownloadUrl","downloadUrl","downloadUrls","url","Error","error","console","onRequestMedia","createElement","ref","tabIndex","className","container","onFocus","onBlur","addItemWrapper","addItem","size","theme","onClick","disabled","subtitle","Fragment","overlay","hoverSkin","borderRadius","media","value","Content","visible","gap","align","skin","prefixIcon","content","isOpen","onClose","map","d","src","onClearMedia","textKeys","displayName"],"sources":["../../../../../src/cms-fields/components/media-gallery/form-media-gallery-field.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback, useEffect } from 'react';\nimport type { AddItemActions } from '@wix/design-system';\nimport {\n  AddItem,\n  Box,\n  Button,\n  IconButton,\n  MediaOverlay,\n  Tooltip,\n} from '@wix/design-system';\nimport {\n  Refresh as RefreshIcon,\n  Delete as DeleteIcon,\n  Maximize as MaximizeIcon,\n} from '@wix/wix-ui-icons-common';\nimport type { WixCodeGalleryItem } from '../../auto-cms-field-types';\nimport { useTranslations } from '../../hooks';\nimport { executeDownloading } from '../../utils/media-utils';\nimport { getMediaURL } from '../../auto-cms-field-types';\nimport { files } from '@wix/media';\n\nimport { style, classes } from './form-media-gallery-field.st.css.js';\nimport { FormMediaGalleryItemsPreview } from './form-media-gallery-items-preview';\nimport { MediaPreviewModal } from './media-preview-modal';\nimport { useMediaGalleryDialog } from './media-gallery-dialog/hooks';\nimport { MediaGalleryDialog } from './media-gallery-dialog/media-gallery-dialog';\n\nexport interface FormMediaGalleryFieldProps {\n  data?: WixCodeGalleryItem[];\n  onChange: (value: WixCodeGalleryItem[]) => void;\n  onClear?: () => void;\n  readOnly?: boolean;\n  invalid?: boolean;\n  autoFocus?: boolean;\n  dataHook?: string;\n}\n\nconst mediaGalleryPreviewTextKeys = {\n  replace: 'CMS.mediaGallery.preview.replace',\n  download: 'CMS.mediaGallery.preview.download',\n  delete: 'CMS.mediaGallery.preview.delete',\n} as const;\n\nexport const FormMediaGalleryField: React.FC<FormMediaGalleryFieldProps> = ({\n  data,\n  onChange,\n  onClear,\n  readOnly,\n  invalid,\n  autoFocus,\n  dataHook,\n}) => {\n  const { t } = useTranslations();\n  const boxRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<AddItemActions>(null);\n  const [boxWidth, setBoxWidth] = useState(0);\n  const [hovered, setHovered] = useState(false);\n  const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n\n  const hasValue = Boolean(data?.length);\n\n  // autoFocus support\n  useEffect(() => {\n    if (!autoFocus) {\n      return;\n    }\n    boxRef.current?.focus();\n    inputRef.current?.focus();\n  }, [autoFocus]);\n\n  // Responsive width tracking\n  useEffect(() => {\n    const el = boxRef.current;\n    if (!el) {\n      return;\n    }\n    setBoxWidth(el.clientWidth);\n    const ro = new ResizeObserver(([entry]) =>\n      setBoxWidth(entry.contentRect.width),\n    );\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const { openMediaGalleryDialog, ...mediaGalleryDialogProps } =\n    useMediaGalleryDialog({\n      initialOpen: false,\n      items: data,\n      onChange,\n    });\n\n  const onMouseEnter = useCallback(\n    () => hasValue && setHovered(true),\n    [hasValue],\n  );\n  const onMouseLeave = useCallback(\n    () => hasValue && setHovered(false),\n    [hasValue],\n  );\n\n  // Download using Wix media API (consistent with useMediaControl)\n  const onDownloadMedia = useCallback(async (mediaUri?: string) => {\n    if (!mediaUri) {\n      return;\n    }\n    try {\n      const result = await files.generateFileDownloadUrl(mediaUri);\n      const downloadUrl = result.downloadUrls?.[0]?.url;\n      if (!downloadUrl) {\n        throw new Error('No download URL returned');\n      }\n      executeDownloading(downloadUrl);\n    } catch (error) {\n      // Fallback: open the static URL in a new tab\n      console.error('Media download error, falling back to static URL:', error);\n      executeDownloading(getMediaURL(mediaUri));\n    }\n  }, []);\n\n  const onRequestMedia = useCallback(() => {\n    openMediaGalleryDialog();\n    setIsPreviewOpen(false);\n    setHovered(false);\n  }, [openMediaGalleryDialog]);\n\n  return (\n    <div\n      data-hook={dataHook}\n      ref={boxRef}\n      tabIndex={hasValue ? 0 : -1}\n      className={classes.container}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      onFocus={onMouseEnter}\n      onBlur={onMouseLeave}\n    >\n      {!hasValue ? (\n        <div className={classes.addItemWrapper}>\n          <AddItem\n            ref={inputRef}\n            className={style(classes.addItem, { error: invalid })}\n            size=\"tiny\"\n            theme=\"dashes\"\n            onClick={onRequestMedia}\n            disabled={readOnly}\n            dataHook={`${dataHook}-add`}\n            subtitle={t('CMS.mediaGallery.emptyHint')}\n          >\n            {t('CMS.mediaGallery.addGallery')}\n          </AddItem>\n        </div>\n      ) : (\n        <>\n          <MediaOverlay\n            hovered={hovered}\n            className={classes.overlay}\n            hoverSkin=\"dark\"\n            borderRadius={0}\n            media={\n              <FormMediaGalleryItemsPreview width={boxWidth} value={data} />\n            }\n          >\n            <MediaOverlay.Content visible=\"hover\">\n              <Box gap=\"SP2\" align=\"center\">\n                <Button\n                  skin=\"inverted\"\n                  prefixIcon={<RefreshIcon />}\n                  onClick={onRequestMedia}\n                  disabled={readOnly}\n                  dataHook={`${dataHook}-manage`}\n                >\n                  {t('CMS.mediaGallery.manageGallery')}\n                </Button>\n                <Tooltip content={t('CMS.mediaGallery.preview')}>\n                  <IconButton\n                    skin=\"inverted\"\n                    onClick={() => setIsPreviewOpen(true)}\n                    dataHook={`${dataHook}-preview`}\n                  >\n                    <MaximizeIcon />\n                  </IconButton>\n                </Tooltip>\n                <Tooltip content={t('CMS.mediaGallery.clear')}>\n                  <IconButton\n                    skin=\"inverted\"\n                    onClick={onClear}\n                    disabled={readOnly}\n                    dataHook={`${dataHook}-clear`}\n                  >\n                    <DeleteIcon />\n                  </IconButton>\n                </Tooltip>\n              </Box>\n            </MediaOverlay.Content>\n          </MediaOverlay>\n          <MediaPreviewModal\n            isOpen={isPreviewOpen}\n            onClose={() => setIsPreviewOpen(false)}\n            value={data?.map((d) => d.src)}\n            onRequestMedia={onRequestMedia}\n            onClearMedia={onClear}\n            onDownloadMedia={onDownloadMedia}\n            textKeys={mediaGalleryPreviewTextKeys}\n            readOnly={readOnly}\n          />\n        </>\n      )}\n\n      {mediaGalleryDialogProps.isOpen && (\n        <MediaGalleryDialog {...mediaGalleryDialogProps} />\n      )}\n    </div>\n  );\n};\n\nFormMediaGalleryField.displayName = 'FormMediaGalleryField';\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/cms-fields/components/media-gallery/form-media-gallery-field.st.css

@@ -0,0 +1,51 @@
+.container {
+  display: flex;
+  min-height: 128px;
+  max-height: 259px;
+}
+
+.viewBox {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.addItemWrapper {
+  height: 128px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.addItem {
+  -st-states: error;
+  box-sizing: border-box;
+}
+
+.overlay {
+  width: initial !important;
+  min-width: 382px !important;
+}
+
+.image {
+  -st-states: withMarginRight, withMarginTop;
+}
+
+.image:withMarginRight {
+  margin-right: 3px;
+}
+
+.image:withMarginTop {
+  margin-top: 3px;
+}
+
+/* Preview modal styles */
+.previewImage {
+  max-height: calc(100% - 12px) !important;
+}
+
+.previewVideo {
+  border-radius: 8px;
+  max-width: 100%;
+  max-height: calc(100% - 12px) !important;
+}

package/dist/esm/cms-fields/components/media-gallery/form-media-gallery-field.st.css.js

@@ -0,0 +1,26 @@
+// @ts-nocheck
+
+import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
+var _namespace_ = "formmediagalleryfield4276779609";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = {
+  "root": "formmediagalleryfield4276779609__root",
+  "container": "formmediagalleryfield4276779609__container",
+  "viewBox": "formmediagalleryfield4276779609__viewBox",
+  "addItemWrapper": "formmediagalleryfield4276779609__addItemWrapper",
+  "addItem": "formmediagalleryfield4276779609__addItem",
+  "overlay": "formmediagalleryfield4276779609__overlay",
+  "image": "formmediagalleryfield4276779609__image",
+  "previewImage": "formmediagalleryfield4276779609__previewImage",
+  "previewVideo": "formmediagalleryfield4276779609__previewVideo"
+};
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = {};
+//# sourceMappingURL=form-media-gallery-field.st.css.js.map

package/dist/esm/cms-fields/components/media-gallery/form-media-gallery-field.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/cms-fields/components/media-gallery/form-media-gallery-field.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"formmediagalleryfield4276779609\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"formmediagalleryfield4276779609__root\",\"container\":\"formmediagalleryfield4276779609__container\",\"viewBox\":\"formmediagalleryfield4276779609__viewBox\",\"addItemWrapper\":\"formmediagalleryfield4276779609__addItemWrapper\",\"addItem\":\"formmediagalleryfield4276779609__addItem\",\"overlay\":\"formmediagalleryfield4276779609__overlay\",\"image\":\"formmediagalleryfield4276779609__image\",\"previewImage\":\"formmediagalleryfield4276779609__previewImage\",\"previewVideo\":\"formmediagalleryfield4276779609__previewVideo\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,kCAAkC;AAIhF,IAAIC,WAAW,GAAG,iCAAiC;AACnD,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC,uCAAuC;EAAC,WAAW,EAAC,4CAA4C;EAAC,SAAS,EAAC,0CAA0C;EAAC,gBAAgB,EAAC,iDAAiD;EAAC,SAAS,EAAC,0CAA0C;EAAC,SAAS,EAAC,0CAA0C;EAAC,OAAO,EAAC,wCAAwC;EAAC,cAAc,EAAC,+CAA+C;EAAC,cAAc,EAAC;AAA+C,CAAC;AAC/gB,OAAO,IAAIC,SAAS,GAAG,CAAC,CAAC;AACzB,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/media-gallery/form-media-gallery-field.uni.driver.js

@@ -0,0 +1,10 @@
+export function FormMediaGalleryFieldUniDriver(base, dataHook) {
+  return {
+    exists: () => base.exists(),
+    getAddButton: () => base.$(`[data-hook="${dataHook}-add"]`),
+    getManageButton: () => base.$(`[data-hook="${dataHook}-manage"]`),
+    getPreviewButton: () => base.$(`[data-hook="${dataHook}-preview"]`),
+    getClearButton: () => base.$(`[data-hook="${dataHook}-clear"]`)
+  };
+}
+//# sourceMappingURL=form-media-gallery-field.uni.driver.js.map

package/dist/esm/cms-fields/components/media-gallery/form-media-gallery-field.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FormMediaGalleryFieldUniDriver","base","dataHook","exists","getAddButton","$","getManageButton","getPreviewButton","getClearButton"],"sources":["../../../../../src/cms-fields/components/media-gallery/form-media-gallery-field.uni.driver.ts"],"sourcesContent":["import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\n\nexport function FormMediaGalleryFieldUniDriver(\n  base: UniDriver,\n  dataHook: string,\n) {\n  return {\n    exists: () => base.exists(),\n    getAddButton: () => base.$(`[data-hook=\"${dataHook}-add\"]`),\n    getManageButton: () => base.$(`[data-hook=\"${dataHook}-manage\"]`),\n    getPreviewButton: () => base.$(`[data-hook=\"${dataHook}-preview\"]`),\n    getClearButton: () => base.$(`[data-hook=\"${dataHook}-clear\"]`),\n  };\n}\n"],"mappings":"AAEA,OAAO,SAASA,8BAA8BA,CAC5CC,IAAe,EACfC,QAAgB,EAChB;EACA,OAAO;IACLC,MAAM,EAAEA,CAAA,KAAMF,IAAI,CAACE,MAAM,CAAC,CAAC;IAC3BC,YAAY,EAAEA,CAAA,KAAMH,IAAI,CAACI,CAAC,CAAC,eAAeH,QAAQ,QAAQ,CAAC;IAC3DI,eAAe,EAAEA,CAAA,KAAML,IAAI,CAACI,CAAC,CAAC,eAAeH,QAAQ,WAAW,CAAC;IACjEK,gBAAgB,EAAEA,CAAA,KAAMN,IAAI,CAACI,CAAC,CAAC,eAAeH,QAAQ,YAAY,CAAC;IACnEM,cAAc,EAAEA,CAAA,KAAMP,IAAI,CAACI,CAAC,CAAC,eAAeH,QAAQ,UAAU;EAChE,CAAC;AACH","ignoreList":[]}

package/dist/esm/cms-fields/components/media-gallery/form-media-gallery-items-preview.js

@@ -0,0 +1,110 @@
+import React, { useMemo } from 'react';
+import { getImageDimensions, ThumbnailSize } from '../../auto-cms-field-types';
+import { Box, Text } from '@wix/design-system';
+import { MediaImage } from '../media-image';
+import { style, classes } from './form-media-gallery-field.st.css.js';
+
+// --- Layout types and constants ---
+
+const IMAGE_HEIGHT = ThumbnailSize.M;
+const GAP = 3;
+const PLACEHOLDER_WIDTH = 69;
+
+// --- Layout hook ---
+
+const useFormMediaGalleryItems = function (value, boxWidth) {
+  if (boxWidth === void 0) {
+    boxWidth = 0;
+  }
+  return useMemo(() => {
+    if (!(value != null && value.length && boxWidth)) {
+      return [];
+    }
+    const result = [];
+    for (let i = 0, usedWidth = 0; i < value.length; i++) {
+      const item = value[i];
+      if (!item) continue;
+      const {
+        width,
+        height
+      } = getImageDimensions(item.src);
+      const actualWidth = width * IMAGE_HEIGHT / height;
+      const offsetLeft = usedWidth % boxWidth;
+      let totalWidth = offsetLeft + actualWidth;
+
+      // Check if the image wraps to the second row
+      if (usedWidth < boxWidth && totalWidth > boxWidth) {
+        usedWidth = boxWidth;
+        totalWidth = actualWidth;
+      }
+      const isSecondRow = usedWidth / boxWidth >= 1;
+      const withMarginRight = totalWidth <= boxWidth - GAP && i !== value.length - 1;
+      const withMarginTop = isSecondRow;
+      usedWidth += actualWidth + (withMarginRight ? GAP : 0);
+
+      // Terminate if the image doesn't fit — show "+N" placeholder
+      if (usedWidth > boxWidth * 2 - PLACEHOLDER_WIDTH) {
+        result.push({
+          actualWidth: PLACEHOLDER_WIDTH,
+          morePlaceholder: value.length - i
+        });
+        return result;
+      }
+      result.push({
+        src: item.src,
+        actualWidth,
+        withMarginRight,
+        withMarginTop
+      });
+    }
+    return result;
+  }, [value, boxWidth]);
+};
+
+// --- Component ---
+
+export const FormMediaGalleryItemsPreview = _ref => {
+  let {
+    width,
+    value
+  } = _ref;
+  const images = useFormMediaGalleryItems(value, width);
+  if (!(images != null && images.length)) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.viewBox
+  }, images.map((item, index) => {
+    if (item.src) {
+      const {
+        src,
+        actualWidth,
+        withMarginTop = false,
+        withMarginRight = false
+      } = item;
+      return /*#__PURE__*/React.createElement(MediaImage, {
+        key: index,
+        className: style(classes.image, {
+          withMarginTop,
+          withMarginRight
+        }),
+        borderRadius: 0,
+        transparent: true,
+        src: src,
+        size: MediaImage.Size.M,
+        width: `${actualWidth}px`,
+        height: IMAGE_HEIGHT
+      });
+    }
+    return /*#__PURE__*/React.createElement(Box, {
+      key: "placeholder",
+      width: item.actualWidth,
+      height: IMAGE_HEIGHT,
+      marginTop: `${GAP}px`,
+      align: "center",
+      verticalAlign: "middle"
+    }, /*#__PURE__*/React.createElement(Text, {
+      size: "small"
+    }, "+", item.morePlaceholder));
+  }));
+};
+FormMediaGalleryItemsPreview.displayName = 'FormMediaGalleryItemsPreview';
+//# sourceMappingURL=form-media-gallery-items-preview.js.map

package/dist/esm/cms-fields/components/media-gallery/form-media-gallery-items-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","getImageDimensions","ThumbnailSize","Box","Text","MediaImage","style","classes","IMAGE_HEIGHT","M","GAP","PLACEHOLDER_WIDTH","useFormMediaGalleryItems","value","boxWidth","length","result","i","usedWidth","item","width","height","src","actualWidth","offsetLeft","totalWidth","isSecondRow","withMarginRight","withMarginTop","push","morePlaceholder","FormMediaGalleryItemsPreview","_ref","images","createElement","className","viewBox","map","index","key","image","borderRadius","transparent","size","Size","marginTop","align","verticalAlign","displayName"],"sources":["../../../../../src/cms-fields/components/media-gallery/form-media-gallery-items-preview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { WixCodeGalleryItem } from '../../auto-cms-field-types';\nimport { getImageDimensions, ThumbnailSize } from '../../auto-cms-field-types';\nimport { Box, Text } from '@wix/design-system';\nimport { MediaImage } from '../media-image';\nimport { style, classes } from './form-media-gallery-field.st.css.js';\n\n// --- Layout types and constants ---\n\ntype GalleryImageItem = {\n  src: string;\n  actualWidth: number;\n  withMarginRight?: boolean;\n  withMarginTop?: boolean;\n  morePlaceholder?: never;\n};\n\ntype GalleryPlaceholderItem = {\n  src?: undefined;\n  actualWidth: number;\n  morePlaceholder: number;\n};\n\ntype GalleryItem = GalleryImageItem | GalleryPlaceholderItem;\n\nconst IMAGE_HEIGHT = ThumbnailSize.M;\nconst GAP = 3;\nconst PLACEHOLDER_WIDTH = 69;\n\n// --- Layout hook ---\n\nconst useFormMediaGalleryItems = (\n  value?: WixCodeGalleryItem[],\n  boxWidth = 0,\n): GalleryItem[] =>\n  useMemo(() => {\n    if (!(value?.length && boxWidth)) {\n      return [];\n    }\n\n    const result: GalleryItem[] = [];\n\n    for (let i = 0, usedWidth = 0; i < value.length; i++) {\n      const item = value[i];\n      if (!item) continue;\n\n      const { width, height } = getImageDimensions(item.src);\n      const actualWidth = (width * IMAGE_HEIGHT) / height;\n\n      const offsetLeft = usedWidth % boxWidth;\n      let totalWidth = offsetLeft + actualWidth;\n\n      // Check if the image wraps to the second row\n      if (usedWidth < boxWidth && totalWidth > boxWidth) {\n        usedWidth = boxWidth;\n        totalWidth = actualWidth;\n      }\n\n      const isSecondRow = usedWidth / boxWidth >= 1;\n      const withMarginRight =\n        totalWidth <= boxWidth - GAP && i !== value.length - 1;\n      const withMarginTop = isSecondRow;\n\n      usedWidth += actualWidth + (withMarginRight ? GAP : 0);\n\n      // Terminate if the image doesn't fit — show \"+N\" placeholder\n      if (usedWidth > boxWidth * 2 - PLACEHOLDER_WIDTH) {\n        result.push({\n          actualWidth: PLACEHOLDER_WIDTH,\n          morePlaceholder: value.length - i,\n        });\n        return result;\n      }\n\n      result.push({\n        src: item.src,\n        actualWidth,\n        withMarginRight,\n        withMarginTop,\n      });\n    }\n\n    return result;\n  }, [value, boxWidth]);\n\n// --- Component ---\n\nexport interface FormMediaGalleryViewProps {\n  width: number;\n  value?: WixCodeGalleryItem[];\n}\n\nexport const FormMediaGalleryItemsPreview: React.FC<\n  FormMediaGalleryViewProps\n> = ({ width, value }) => {\n  const images = useFormMediaGalleryItems(value, width);\n\n  if (!images?.length) return null;\n\n  return (\n    <div className={classes.viewBox}>\n      {images.map((item: GalleryItem, index: number) => {\n        if (item.src) {\n          const {\n            src,\n            actualWidth,\n            withMarginTop = false,\n            withMarginRight = false,\n          } = item;\n          return (\n            <MediaImage\n              key={index}\n              className={style(classes.image, {\n                withMarginTop,\n                withMarginRight,\n              })}\n              borderRadius={0}\n              transparent\n              src={src}\n              size={MediaImage.Size.M}\n              width={`${actualWidth}px`}\n              height={IMAGE_HEIGHT}\n            />\n          );\n        }\n\n        return (\n          <Box\n            key=\"placeholder\"\n            width={item.actualWidth}\n            height={IMAGE_HEIGHT}\n            marginTop={`${GAP}px`}\n            align=\"center\"\n            verticalAlign=\"middle\"\n          >\n            <Text size=\"small\">+{item.morePlaceholder}</Text>\n          </Box>\n        );\n      })}\n    </div>\n  );\n};\n\nFormMediaGalleryItemsPreview.displayName = 'FormMediaGalleryItemsPreview';\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/cms-fields/components/media-gallery/media-gallery-dialog/add-link-modal.js

@@ -0,0 +1,106 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Modal, CustomModalLayout, BounceAnimation, Box, FormField, Input, RadioGroup } from '@wix/design-system';
+import { useTranslations } from '../../../hooks';
+var LinkTarget = /*#__PURE__*/function (LinkTarget) {
+  LinkTarget["newTab"] = "_blank";
+  LinkTarget["currentTab"] = "_self";
+  return LinkTarget;
+}(LinkTarget || {});
+export const AddLinkModal = _ref => {
+  let {
+    isOpen,
+    onClose,
+    link,
+    onSave,
+    mediaType
+  } = _ref;
+  const {
+    t
+  } = useTranslations();
+  const [url, setUrl] = useState((link == null ? void 0 : link.url) ?? '');
+  const [target, setTarget] = useState((link == null ? void 0 : link.target) ?? '_blank');
+  const [error, setError] = useState(false);
+  const [animateUrlError, setAnimateUrlError] = useState(false);
+  useEffect(() => {
+    setUrl((link == null ? void 0 : link.url) ?? '');
+    setTarget((link == null ? void 0 : link.target) ?? '_blank');
+    setError(false);
+    setAnimateUrlError(false);
+  }, [link, isOpen]);
+  const handleOnSave = useCallback(() => {
+    const normalizedUrl = normalizeUrl(url);
+    if (normalizedUrl && !isValidUrl(normalizedUrl)) {
+      setError(true);
+      setAnimateUrlError(true);
+      return;
+    }
+    onSave(normalizedUrl ? {
+      url: normalizedUrl,
+      text: normalizedUrl,
+      target: target
+    } : undefined);
+    onClose();
+  }, [url, target, onSave, onClose]);
+  const onEndAnimateUrlError = useCallback(() => setAnimateUrlError(false), []);
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: isOpen,
+    onRequestClose: onClose,
+    screen: "desktop"
+  }, /*#__PURE__*/React.createElement(CustomModalLayout, {
+    title: mediaType === 'Video' ? t('CMS.mediaGallery.addLink.titleVideo') : t('CMS.mediaGallery.addLink.titleImage'),
+    subtitle: mediaType === 'Video' ? t('CMS.mediaGallery.addLink.subtitleVideo') : t('CMS.mediaGallery.addLink.subtitleImage'),
+    onCloseButtonClick: onClose,
+    primaryButtonText: t('CMS.mediaGallery.addLink.save'),
+    primaryButtonOnClick: handleOnSave,
+    secondaryButtonText: t('CMS.mediaGallery.addLink.cancel'),
+    secondaryButtonOnClick: onClose,
+    width: "600px",
+    content: /*#__PURE__*/React.createElement(Box, {
+      direction: "vertical",
+      gap: "SP2"
+    }, /*#__PURE__*/React.createElement(BounceAnimation, {
+      active: animateUrlError,
+      onEnd: onEndAnimateUrlError
+    }, /*#__PURE__*/React.createElement(FormField, {
+      required: true,
+      label: t('CMS.mediaGallery.addLink.urlLabel'),
+      status: error ? 'error' : undefined,
+      statusMessage: error ? t('CMS.mediaGallery.addLink.invalidUrl') : undefined
+    }, /*#__PURE__*/React.createElement(Input, {
+      value: url,
+      onChange: e => {
+        setUrl(e.target.value);
+        setError(false);
+      },
+      placeholder: "https://"
+    }))), /*#__PURE__*/React.createElement(FormField, {
+      label: t('CMS.mediaGallery.addLink.targetLabel')
+    }, /*#__PURE__*/React.createElement(RadioGroup, {
+      value: target,
+      onChange: value => setTarget(value)
+    }, /*#__PURE__*/React.createElement(RadioGroup.Radio, {
+      value: LinkTarget.newTab
+    }, t('CMS.mediaGallery.addLink.newTab')), /*#__PURE__*/React.createElement(RadioGroup.Radio, {
+      value: LinkTarget.currentTab
+    }, t('CMS.mediaGallery.addLink.currentTab')))))
+  }));
+};
+function normalizeUrl(url) {
+  const trimmed = url.trim();
+  if (!trimmed) {
+    return '';
+  }
+  if (/^https?:\/\//i.test(trimmed)) {
+    return trimmed;
+  }
+  return `https://${trimmed}`;
+}
+function isValidUrl(url) {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+//# sourceMappingURL=add-link-modal.js.map