@wix/patterns-fields 1.0.0

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

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+var _namespace_ = "pasteurlbutton4171484403";
+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": "pasteurlbutton4171484403__root", "iconButtonTooltip": "pasteurlbutton4171484403__iconButtonTooltip", "iconButton": "pasteurlbutton4171484403__iconButton" };
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = {};
+//# sourceMappingURL=paste-url-button.st.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paste-url-button.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-control/paste-url-button.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,0BAA0B,CAAC;AAC7C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,gCAAgC,EAAC,mBAAmB,EAAC,6CAA6C,EAAC,YAAY,EAAC,sCAAsC,EAAC,CAAC;AACrL,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/media-control/paste-url-form.js

@@ -0,0 +1,21 @@
+import React, { useCallback, useMemo } from 'react';
+import { isDataValidOrNotSet } from '../../utils/media-utils';
+import { useTranslations } from '../../hooks';
+import { PasteURLModal } from './paste-url-modal';
+export var MediaFieldType;
+(function (MediaFieldType) {
+    MediaFieldType["image"] = "image";
+    MediaFieldType["document"] = "document";
+})(MediaFieldType || (MediaFieldType = {}));
+export const PasteURLForm = ({ show, closeModal, onSave, value, title, fieldType = MediaFieldType.document, }) => {
+    const { t } = useTranslations();
+    const onSaveURL = useCallback((url) => url && onSave(url), [onSave]);
+    const urlValidator = useMemo(() => (inputValue) => isDataValidOrNotSet(inputValue || undefined, fieldType), [fieldType]);
+    return (React.createElement(PasteURLModal, { dataHook: "paste-url-form", show: show, value: value, onSave: onSaveURL, onClose: closeModal, validator: urlValidator, title: title, primaryButtonText: t('CMS.mediaControl.pasteUrl.button.save'), secondaryButtonText: t('CMS.mediaControl.pasteUrl.button.cancel'), inputPlaceholder: fieldType === MediaFieldType.document
+            ? t('CMS.mediaControl.pasteUrl.placeholder.document')
+            : t('CMS.mediaControl.pasteUrl.placeholder.image'), errorStatusMessage: fieldType === MediaFieldType.document
+            ? t('CMS.mediaControl.pasteUrl.error.document')
+            : t('CMS.mediaControl.pasteUrl.error.image') }));
+};
+PasteURLForm.displayName = 'PasteURLForm';
+//# sourceMappingURL=paste-url-form.js.map

package/dist/esm/components/media-control/paste-url-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paste-url-form.js","sourceRoot":"","sources":["../../../../src/components/media-control/paste-url-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACxB,iCAAe,CAAA;IACf,uCAAqB,CAAA;AACvB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAWD,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,IAAI,EACJ,UAAU,EACV,MAAM,EACN,KAAK,EACL,KAAK,EACL,SAAS,GAAG,cAAc,CAAC,QAAQ,GACpC,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,eAAe,EAAE,CAAC;IAEhC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,GAAY,EAAE,EAAE,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9E,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,UAAmB,EAAE,EAAE,CAC5B,mBAAmB,CAAC,UAAU,IAAI,SAAS,EAAE,SAAS,CAAC,EACzD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IACZ,QAAQ,EAAC,gBAAgB,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,CAAC,CAAC,uCAAuC,CAAC,EAC7D,mBAAmB,EAAE,CAAC,CAAC,yCAAyC,CAAC,EACjE,gBAAgB,EACd,SAAS,KAAK,cAAc,CAAC,QAAQ;YACnC,CAAC,CAAC,CAAC,CAAC,gDAAgD,CAAC;YACrD,CAAC,CAAC,CAAC,CAAC,6CAA6C,CAAC,EAEtD,kBAAkB,EAChB,SAAS,KAAK,cAAc,CAAC,QAAQ;YACnC,CAAC,CAAC,CAAC,CAAC,0CAA0C,CAAC;YAC/C,CAAC,CAAC,CAAC,CAAC,uCAAuC,CAAC,GAEhD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/esm/components/media-control/paste-url-modal.js

@@ -0,0 +1,32 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Modal, CustomModalLayout, Input } from '@wix/design-system';
+export const PasteURLModal = ({ show, onClose, onSave, value = '', title = 'Insert Link', inputPlaceholder = 'Enter URL', primaryButtonText = 'Save', secondaryButtonText = 'Cancel', dataHook = 'paste-url-modal', validator, errorStatusMessage, }) => {
+    const [url, setUrl] = useState(value);
+    const [touched, setTouched] = useState(false);
+    useEffect(() => {
+        setUrl(value);
+        setTouched(false);
+    }, [value, show]);
+    const isValid = useMemo(() => {
+        if (!validator) {
+            return true;
+        }
+        return validator(url || undefined);
+    }, [url, validator]);
+    const showError = touched && !isValid && url !== '';
+    const handleConfirm = () => {
+        if (!isValid) {
+            setTouched(true);
+            return;
+        }
+        onSave(url);
+        onClose();
+    };
+    const handleChange = (e) => {
+        setUrl(e.target.value);
+        setTouched(true);
+    };
+    return (React.createElement(Modal, { isOpen: show, onRequestClose: onClose, screen: "desktop", dataHook: dataHook },
+        React.createElement(CustomModalLayout, { dataHook: `${dataHook}.layout`, title: title, closeButtonProps: { onClick: onClose }, primaryButtonOnClick: handleConfirm, secondaryButtonOnClick: onClose, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, overflowY: "none", width: "600px", content: React.createElement(Input, { dataHook: `${dataHook}.urlInput`, placeholder: inputPlaceholder, value: url, onChange: handleChange, autoFocus: true, status: showError ? 'error' : undefined, statusMessage: showError ? errorStatusMessage : undefined }) })));
+};
+//# sourceMappingURL=paste-url-modal.js.map

package/dist/esm/components/media-control/paste-url-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paste-url-modal.js","sourceRoot":"","sources":["../../../../src/components/media-control/paste-url-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAiBrE,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,IAAI,EACJ,OAAO,EACP,MAAM,EACN,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,aAAa,EACrB,gBAAgB,GAAG,WAAW,EAC9B,iBAAiB,GAAG,MAAM,EAC1B,mBAAmB,GAAG,QAAQ,EAC9B,QAAQ,GAAG,iBAAiB,EAC5B,SAAS,EACT,kBAAkB,GACnB,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,KAAK,CAAC,CAAC;QACd,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAElB,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,CAAC,SAAS,EAAE;YACd,OAAO,IAAI,CAAC;SACb;QACD,OAAO,SAAS,CAAC,GAAG,IAAI,SAAS,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC;IAErB,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC,OAAO,IAAI,GAAG,KAAK,EAAE,CAAC;IAEpD,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,OAAO,EAAE;YACZ,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,OAAO;SACR;QACD,MAAM,CAAC,GAAG,CAAC,CAAC;QACZ,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvB,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IACJ,MAAM,EAAE,IAAI,EACZ,cAAc,EAAE,OAAO,EACvB,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAE,QAAQ;QAElB,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,GAAG,QAAQ,SAAS,EAC9B,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EACtC,oBAAoB,EAAE,aAAa,EACnC,sBAAsB,EAAE,OAAO,EAC/B,iBAAiB,EAAE,iBAAiB,EACpC,mBAAmB,EAAE,mBAAmB,EACxC,SAAS,EAAC,MAAM,EAChB,KAAK,EAAC,OAAO,EACb,OAAO,EACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,GAAG,QAAQ,WAAW,EAChC,WAAW,EAAE,gBAAgB,EAC7B,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,YAAY,EACtB,SAAS,QACT,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACvC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,GACzD,GAEJ,CACI,CACT,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/media-control/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/components/media-control/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/media-control/types.ts"],"names":[],"mappings":""}

package/dist/esm/components/media-control/use-document-delete.js

@@ -0,0 +1,28 @@
+import { useCallback, useState } from 'react';
+import { useTranslations } from '../../hooks';
+import { getMediaTitle } from '../../utils/media-utils';
+export const useDocumentDelete = ({ data = [], onChange, }) => {
+    const { t } = useTranslations();
+    const [indexToDelete, setIndexToDelete] = useState(null);
+    const onDelete = useCallback((index) => () => setIndexToDelete(index), []);
+    const onDeleteCancel = useCallback(() => setIndexToDelete(null), []);
+    const onDeleteConfirm = useCallback(() => {
+        if (indexToDelete === null) {
+            return;
+        }
+        const updatedData = [...(data ?? [])];
+        updatedData.splice(indexToDelete, 1);
+        onChange(updatedData);
+        setIndexToDelete(null);
+    }, [indexToDelete, onChange, data]);
+    const filename = indexToDelete !== null ? getMediaTitle(data[indexToDelete]) : '';
+    return {
+        isOpen: indexToDelete !== null,
+        onDelete,
+        onDeleteCancel,
+        onDeleteConfirm,
+        title: t('CMS.document.delete.title', { filename }),
+        text: t('CMS.document.delete.message', { filename }),
+    };
+};
+//# sourceMappingURL=use-document-delete.js.map

package/dist/esm/components/media-control/use-document-delete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-document-delete.js","sourceRoot":"","sources":["../../../../src/components/media-control/use-document-delete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,GAAG,EAAE,EACT,QAAQ,GACgB,EAAE,EAAE;IAC5B,MAAM,EAAE,CAAC,EAAE,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAExE,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAChD,EAAE,CACH,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAErE,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,aAAa,KAAK,IAAI,EAAE;YAC1B,OAAO;SACR;QAED,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC;QACtC,WAAW,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QACrC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAEtB,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpC,MAAM,QAAQ,GACZ,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnE,OAAO;QACL,MAAM,EAAE,aAAa,KAAK,IAAI;QAC9B,QAAQ;QACR,cAAc;QACd,eAAe;QACf,KAAK,EAAE,CAAC,CAAC,2BAA2B,EAAE,EAAE,QAAQ,EAAE,CAAC;QACnD,IAAI,EAAE,CAAC,CAAC,6BAA6B,EAAE,EAAE,QAAQ,EAAE,CAAC;KACrD,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/media-control/use-media-control.js

@@ -0,0 +1,159 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { dashboard } from '@wix/dashboard';
+import { files } from '@wix/media';
+import { executeDownloading } from '../../utils/media-utils';
+import { getMediaURL } from '../../auto-field-types';
+const MEDIA_TYPE_TO_CATEGORY = {
+    IMAGE: 'IMAGE',
+    VIDEO: 'VIDEO',
+    MUSIC: 'MUSIC',
+    DOCUMENT: 'DOCUMENT',
+    ALL_MEDIA: undefined,
+};
+/**
+ * Extracts a playable URL from media.audio, which may be:
+ *   - a string (wix:audio:// URI or direct URL)
+ *   - an object with { audio: string } (nested URI)
+ *   - an object with { assets: [{ url }] } or { assets: [string] }
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const extractAudioUrl = (audio) => {
+    if (audio) {
+        if (typeof audio === 'string') {
+            return audio;
+        }
+        if (typeof audio.audio === 'string') {
+            return audio.audio;
+        }
+        const firstAsset = audio.assets?.[0];
+        if (typeof firstAsset === 'string') {
+            return firstAsset;
+        }
+        if (typeof firstAsset?.url === 'string') {
+            return firstAsset.url;
+        }
+    }
+    return undefined;
+};
+/**
+ * Extracts the Wix media URI from media manager result.
+ * Media manager returns different structures for different media types.
+ */
+const extractMediaUri = (mediaItem) => {
+    const { media } = mediaItem || {};
+    if (media) {
+        return (
+        // Try each media type: the URI is nested under media.[type].[type], fallback for direct string values
+        media.image?.image ||
+            (typeof media.image === 'string' && media.image) ||
+            media.video?.video ||
+            (typeof media.video === 'string' && media.video) ||
+            media.document?.document ||
+            (typeof media.document === 'string' && media.document) ||
+            extractAudioUrl(media.audio) ||
+            '');
+    }
+    return '';
+};
+export function useMediaControl({ mediaType, readOnly, autoFocus, initialLoading, inputRef, viewRef, onFocus, onBlur, ...params }) {
+    const { value, multiSelect } = params;
+    const [loading, setLoading] = useState(Boolean(initialLoading && value));
+    const mediaRequested = useRef(false);
+    const setActive = useCallback(() => {
+        if (!autoFocus) {
+            return;
+        }
+        if (value) {
+            viewRef && viewRef?.current?.focus();
+            !viewRef && inputRef?.current?.focus();
+        }
+        else {
+            inputRef?.current?.focus();
+        }
+    }, [autoFocus, value, inputRef, viewRef]);
+    useEffect(() => setActive(), [setActive]);
+    const onMediaLoad = useCallback(() => setLoading(false), []);
+    const callMedia = useCallback(async (index) => {
+        if (mediaRequested.current || readOnly) {
+            return;
+        }
+        if (!params.onChange) {
+            return;
+        }
+        mediaRequested.current = true;
+        onFocus?.();
+        setLoading(true);
+        try {
+            const category = MEDIA_TYPE_TO_CATEGORY[mediaType];
+            const mediaManagerData = await dashboard.openMediaManager({
+                multiSelect: Boolean(multiSelect),
+                ...(category && { category }),
+            });
+            onBlur?.();
+            setLoading(false);
+            setActive();
+            mediaRequested.current = false;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const items = mediaManagerData?.items || mediaManagerData?.files;
+            if (!items?.length) {
+                return;
+            }
+            if (params.multiSelect) {
+                const newURIs = items.map(extractMediaUri);
+                if (!newURIs.length) {
+                    throw new Error(`Media Control Error: Media Manager returns not-covered Multi-Document data.`);
+                }
+                if (typeof index === 'number') {
+                    const newValue = value ? [...value] : [];
+                    newValue.splice(index, 1, ...newURIs);
+                    params.onChange(newValue);
+                }
+                else {
+                    params.onChange([...(value ?? []), ...newURIs]);
+                }
+            }
+            else {
+                params.onChange(extractMediaUri(items[0]));
+            }
+        }
+        catch (e) {
+            setLoading(false);
+            mediaRequested.current = false;
+            console.error(`Media Control Error:`, e);
+        }
+    }, [
+        mediaType,
+        multiSelect,
+        onBlur,
+        onFocus,
+        params,
+        readOnly,
+        setActive,
+        value,
+    ]);
+    const downloadMedia = useCallback(async (mediaUri) => {
+        if (!mediaUri) {
+            return;
+        }
+        try {
+            const result = await files.generateFileDownloadUrl(mediaUri);
+            const downloadUrl = result.downloadUrls?.[0]?.url;
+            if (!downloadUrl) {
+                throw new Error('No download URL returned');
+            }
+            return executeDownloading(downloadUrl);
+        }
+        catch (error) {
+            // Fallback: open the static URL in a new tab
+            console.error('Media download error, falling back to static URL:', error);
+            return executeDownloading(getMediaURL(mediaUri));
+        }
+    }, []);
+    return {
+        loading,
+        callMedia,
+        downloadMedia,
+        onMediaLoad,
+    };
+}
+//# sourceMappingURL=use-media-control.js.map

package/dist/esm/components/media-control/use-media-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-control.js","sourceRoot":"","sources":["../../../../src/components/media-control/use-media-control.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/media-control/use-paste-url-form.js

@@ -0,0 +1,26 @@
+import { useState, useCallback } from 'react';
+import { useOpenState } from '../../hooks';
+export const usePasteURLForm = ({ onChange }) => {
+    const { isOpen, onOpen: onOpenModal, onClose } = useOpenState(false);
+    const [title, setTitle] = useState('');
+    const [value, setValue] = useState('');
+    const [indexToReplace, setIndexToReplace] = useState(undefined);
+    const onOpen = useCallback(({ title, value, index }) => () => {
+        setTitle(title);
+        setValue(value ?? '');
+        onOpenModal();
+        setIndexToReplace(index);
+    }, [onOpenModal]);
+    const onSave = useCallback((value) => {
+        onChange(value, indexToReplace);
+    }, [onChange, indexToReplace]);
+    return {
+        isOpen,
+        title,
+        onOpen,
+        onClose,
+        onSave,
+        value,
+    };
+};
+//# sourceMappingURL=use-paste-url-form.js.map

package/dist/esm/components/media-control/use-paste-url-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-paste-url-form.js","sourceRoot":"","sources":["../../../../src/components/media-control/use-paste-url-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAqB3C,MAAM,CAAC,MAAM,eAAe,GAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,SAAS,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAA0B,EAAE,EAAE,CAClD,GAAG,EAAE;QACH,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;QACtB,WAAW,EAAE,CAAC;QACd,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EACH,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,KAAa,EAAE,EAAE;QAChB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC3B,CAAC;IAEF,OAAO;QACL,MAAM;QACN,KAAK;QACL,MAAM;QACN,OAAO;QACP,MAAM;QACN,KAAK;KACN,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,93 @@
+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-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 = ({ data, onChange, onClear, readOnly, invalid, autoFocus, dataHook, }) => {
+    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?.length);
+    // autoFocus support
+    useEffect(() => {
+        if (!autoFocus) {
+            return;
+        }
+        boxRef.current?.focus();
+        inputRef.current?.focus();
+    }, [autoFocus]);
+    // Responsive width tracking
+    useEffect(() => {
+        const el = boxRef.current;
+        if (!el) {
+            return;
+        }
+        setBoxWidth(el.clientWidth);
+        const ro = new ResizeObserver(([entry]) => 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 {
+            const result = await files.generateFileDownloadUrl(mediaUri);
+            const downloadUrl = result.downloadUrls?.[0]?.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 (React.createElement("div", { "data-hook": dataHook, ref: boxRef, tabIndex: hasValue ? 0 : -1, className: classes.container, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onMouseEnter, onBlur: onMouseLeave },
+        !hasValue ? (React.createElement("div", { className: classes.addItemWrapper },
+            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')))) : (React.createElement(React.Fragment, null,
+            React.createElement(MediaOverlay, { hovered: hovered, className: classes.overlay, hoverSkin: "dark", borderRadius: 0, media: React.createElement(FormMediaGalleryItemsPreview, { width: boxWidth, value: data }) },
+                React.createElement(MediaOverlay.Content, { visible: "hover" },
+                    React.createElement(Box, { gap: "SP2", align: "center" },
+                        React.createElement(Button, { skin: "inverted", prefixIcon: React.createElement(RefreshIcon, null), onClick: onRequestMedia, disabled: readOnly, dataHook: `${dataHook}-manage` }, t('CMS.mediaGallery.manageGallery')),
+                        React.createElement(Tooltip, { content: t('CMS.mediaGallery.preview') },
+                            React.createElement(IconButton, { skin: "inverted", onClick: () => setIsPreviewOpen(true), dataHook: `${dataHook}-preview` },
+                                React.createElement(MaximizeIcon, null))),
+                        React.createElement(Tooltip, { content: t('CMS.mediaGallery.clear') },
+                            React.createElement(IconButton, { skin: "inverted", onClick: onClear, disabled: readOnly, dataHook: `${dataHook}-clear` },
+                                React.createElement(DeleteIcon, null)))))),
+            React.createElement(MediaPreviewModal, { isOpen: isPreviewOpen, onClose: () => setIsPreviewOpen(false), value: data?.map((d) => d.src), onRequestMedia: onRequestMedia, onClearMedia: onClear, onDownloadMedia: onDownloadMedia, textKeys: mediaGalleryPreviewTextKeys, readOnly: readOnly }))),
+        mediaGalleryDialogProps.isOpen && (React.createElement(MediaGalleryDialog, { ...mediaGalleryDialogProps }))));
+};
+FormMediaGalleryField.displayName = 'FormMediaGalleryField';
+//# sourceMappingURL=form-media-gallery-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-media-gallery-field.js","sourceRoot":"","sources":["../../../../src/components/media-gallery/form-media-gallery-field.tsx"],"names":[],"mappings":"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"}

package/dist/esm/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/components/media-gallery/form-media-gallery-field.st.css.js

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+var _namespace_ = "formmediagalleryfield2735002816";
+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": "formmediagalleryfield2735002816__root", "container": "formmediagalleryfield2735002816__container", "viewBox": "formmediagalleryfield2735002816__viewBox", "addItemWrapper": "formmediagalleryfield2735002816__addItemWrapper", "addItem": "formmediagalleryfield2735002816__addItem", "overlay": "formmediagalleryfield2735002816__overlay", "image": "formmediagalleryfield2735002816__image", "previewImage": "formmediagalleryfield2735002816__previewImage", "previewVideo": "formmediagalleryfield2735002816__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/components/media-gallery/form-media-gallery-field.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-media-gallery-field.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-gallery/form-media-gallery-field.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,iCAAiC,CAAC;AACpD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,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,+CAA+C,EAAC,CAAC;AAChhB,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/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/components/media-gallery/form-media-gallery-field.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-media-gallery-field.uni.driver.js","sourceRoot":"","sources":["../../../../src/components/media-gallery/form-media-gallery-field.uni.driver.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,8BAA8B,CAC5C,IAAe,EACf,QAAgB;IAEhB,OAAO;QACL,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;QAC3B,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,QAAQ,QAAQ,CAAC;QAC3D,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,QAAQ,WAAW,CAAC;QACjE,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,QAAQ,YAAY,CAAC;QACnE,cAAc,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,QAAQ,UAAU,CAAC;KAChE,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { getImageDimensions, ThumbnailSize } from '../../auto-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';
+const IMAGE_HEIGHT = ThumbnailSize.M;
+const GAP = 3;
+const PLACEHOLDER_WIDTH = 69;
+// --- Layout hook ---
+const useFormMediaGalleryItems = (value, boxWidth = 0) => useMemo(() => {
+    if (!(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]);
+export const FormMediaGalleryItemsPreview = ({ width, value }) => {
+    const images = useFormMediaGalleryItems(value, width);
+    if (!images?.length)
+        return null;
+    return (React.createElement("div", { className: classes.viewBox }, images.map((item, index) => {
+        if (item.src) {
+            const { src, actualWidth, withMarginTop = false, withMarginRight = false, } = item;
+            return (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 (React.createElement(Box, { key: "placeholder", width: item.actualWidth, height: IMAGE_HEIGHT, marginTop: `${GAP}px`, align: "center", verticalAlign: "middle" },
+            React.createElement(Text, { size: "small" },
+                "+",
+                item.morePlaceholder)));
+    })));
+};
+FormMediaGalleryItemsPreview.displayName = 'FormMediaGalleryItemsPreview';
+//# sourceMappingURL=form-media-gallery-items-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-media-gallery-items-preview.js","sourceRoot":"","sources":["../../../../src/components/media-gallery/form-media-gallery-items-preview.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/media-gallery/index.js

@@ -0,0 +1,2 @@
+export * from './media-gallery-view';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/media-gallery/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/media-gallery/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}