@wix/auto-patterns 1.55.0 → 1.56.0

package/dist/esm/cms-fields/validations/video.js

@@ -0,0 +1,17 @@
+import { isMediaVideoURI } from '../auto-cms-field-types';
+export const isValid = data => {
+  if (data === null || data === undefined || data === '') {
+    return true;
+  }
+  if (typeof data !== 'string') {
+    return false;
+  }
+  return isMediaVideoURI(data);
+};
+export const hardConvert = data => {
+  if (isValid(data)) {
+    return data;
+  }
+  throw new Error(`Cannot convert "${data}" into a video URI`);
+};
+//# sourceMappingURL=video.js.map

package/dist/esm/cms-fields/validations/video.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isMediaVideoURI","isValid","data","undefined","hardConvert","Error"],"sources":["../../../../src/cms-fields/validations/video.ts"],"sourcesContent":["import { isMediaVideoURI } from '../auto-cms-field-types';\n\nexport const isValid = (data: unknown): data is string => {\n  if (data === null || data === undefined || data === '') {\n    return true;\n  }\n  if (typeof data !== 'string') {\n    return false;\n  }\n  return isMediaVideoURI(data);\n};\n\nexport const hardConvert = (data: unknown): string | null => {\n  if (isValid(data)) {\n    return data as string;\n  }\n  throw new Error(`Cannot convert \"${data}\" into a video URI`);\n};\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AAEzD,OAAO,MAAMC,OAAO,GAAIC,IAAa,IAAqB;EACxD,IAAIA,IAAI,KAAK,IAAI,IAAIA,IAAI,KAAKC,SAAS,IAAID,IAAI,KAAK,EAAE,EAAE;IACtD,OAAO,IAAI;EACb;EACA,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IAC5B,OAAO,KAAK;EACd;EACA,OAAOF,eAAe,CAACE,IAAI,CAAC;AAC9B,CAAC;AAED,OAAO,MAAME,WAAW,GAAIF,IAAa,IAAoB;EAC3D,IAAID,OAAO,CAACC,IAAI,CAAC,EAAE;IACjB,OAAOA,IAAI;EACb;EACA,MAAM,IAAIG,KAAK,CAAC,mBAAmBH,IAAI,oBAAoB,CAAC;AAC9D,CAAC","ignoreList":[]}

package/dist/esm/components/fields/DateInput.js

@@ -49,6 +49,7 @@ export const DateInput = props => {
   return /*#__PURE__*/React.createElement(FormField, {
     label: field.displayName,
     required: (_field$validation = field.validation) == null ? void 0 : _field$validation.required,
+    statusMessage: errorMessage,
     dataHook: dataHook
   }, /*#__PURE__*/React.createElement(DatePicker, {
     ref: internalRef => {

package/dist/esm/components/fields/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useRef","FormField","DatePicker","getDateWithoutTimezone","getISODateStringWithFixedTimezone","useSelector","useWixPatternsContainer","useController","validateDateField","value","validation","t","format","validationType","required","undefined","dateFormat","DateInput","props","_field$validation","field","dataHook","inputRef","formControl","data","translate","container","initTask","status","controller","name","id","control","defaultValue","rules","validate","error","date","setDate","ref","errorMessage","setErrorMessage","createElement","label","displayName","internalRef","current","focus","_internalRef$state","state","width","onChange","newValue","formattedDate","split","onValidate","_ref","invalid","statusMessage"],"sources":["../../../../src/components/fields/DateInput.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\nimport { FormField, DatePicker } from '@wix/design-system';\nimport {\n  getDateWithoutTimezone,\n  getISODateStringWithFixedTimezone,\n} from './utils/dates';\nimport { BaseInputProps, BaseInputRef } from './types';\nimport { useSelector, useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { Translate } from '@wix/patterns/core';\n\nexport interface DateProps extends BaseInputProps<string | null> {}\n\nfunction validateDateField(\n  value: string | null | undefined,\n  validation: DateProps['field']['validation'],\n  t: Translate,\n  format?: string,\n  validationType?: 'outOfBoundsError' | 'formatError' | 'valid',\n) {\n  if (\n    validation?.required &&\n    (value === null || value === undefined || value === '')\n  ) {\n    return t('cairo.fieldValidation.requiredField');\n  } else if (validationType === 'formatError' && format) {\n    return t('cairo.customFields.fieldType.date.invalid.value', {\n      dateFormat: format,\n    });\n  }\n\n  return '';\n}\n\nexport const DateInput = (props: DateProps) => {\n  const { field, dataHook, inputRef, formControl, data } = props;\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        const error = validateDateField(value, field.validation, t);\n        return error || true;\n      },\n    },\n  });\n\n  const [date, setDate] = useState<Date | undefined>(() => {\n    if (controller.field.value) {\n      return getDateWithoutTimezone(\n        getISODateStringWithFixedTimezone(controller.field.value),\n      );\n    }\n    return undefined;\n  });\n\n  const ref = useRef<BaseInputRef>({});\n  const [errorMessage, setErrorMessage] = useState<string>('');\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n    >\n      <DatePicker\n        ref={(internalRef) => {\n          inputRef?.(ref.current);\n          // @ts-expect-error: WSR internal API hack for focusing\n          ref.current.focus = () => internalRef?.state?.inputRef?.focus?.();\n        }}\n        dataHook={`date-${field.id}`}\n        width=\"100%\"\n        value={date}\n        onChange={(newValue: Date) => {\n          setDate(newValue);\n          if (newValue) {\n            const formattedDate = getISODateStringWithFixedTimezone(newValue);\n            controller.field.onChange(formattedDate.split('T')[0]);\n          } else {\n            controller.field.onChange(null);\n          }\n        }}\n        onValidate={({ validationType, value: newValue, format }) => {\n          const error = validateDateField(\n            newValue,\n            field.validation,\n            t,\n            format,\n            validationType,\n          );\n          setErrorMessage(error);\n          ref.current.invalid = !!error;\n\n          if (validationType === 'formatError' && newValue === '') {\n            setDate(undefined);\n            controller.field.onChange(null);\n          }\n        }}\n        status={errorMessage ? 'error' : undefined}\n        statusMessage={errorMessage}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useRef","FormField","DatePicker","getDateWithoutTimezone","getISODateStringWithFixedTimezone","useSelector","useWixPatternsContainer","useController","validateDateField","value","validation","t","format","validationType","required","undefined","dateFormat","DateInput","props","_field$validation","field","dataHook","inputRef","formControl","data","translate","container","initTask","status","controller","name","id","control","defaultValue","rules","validate","error","date","setDate","ref","errorMessage","setErrorMessage","createElement","label","displayName","statusMessage","internalRef","current","focus","_internalRef$state","state","width","onChange","newValue","formattedDate","split","onValidate","_ref","invalid"],"sources":["../../../../src/components/fields/DateInput.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\nimport { FormField, DatePicker } from '@wix/design-system';\nimport {\n  getDateWithoutTimezone,\n  getISODateStringWithFixedTimezone,\n} from './utils/dates';\nimport { BaseInputProps, BaseInputRef } from './types';\nimport { useSelector, useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { Translate } from '@wix/patterns/core';\n\nexport interface DateProps extends BaseInputProps<string | null> {}\n\nfunction validateDateField(\n  value: string | null | undefined,\n  validation: DateProps['field']['validation'],\n  t: Translate,\n  format?: string,\n  validationType?: 'outOfBoundsError' | 'formatError' | 'valid',\n) {\n  if (\n    validation?.required &&\n    (value === null || value === undefined || value === '')\n  ) {\n    return t('cairo.fieldValidation.requiredField');\n  } else if (validationType === 'formatError' && format) {\n    return t('cairo.customFields.fieldType.date.invalid.value', {\n      dateFormat: format,\n    });\n  }\n\n  return '';\n}\n\nexport const DateInput = (props: DateProps) => {\n  const { field, dataHook, inputRef, formControl, data } = props;\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        const error = validateDateField(value, field.validation, t);\n        return error || true;\n      },\n    },\n  });\n\n  const [date, setDate] = useState<Date | undefined>(() => {\n    if (controller.field.value) {\n      return getDateWithoutTimezone(\n        getISODateStringWithFixedTimezone(controller.field.value),\n      );\n    }\n    return undefined;\n  });\n\n  const ref = useRef<BaseInputRef>({});\n  const [errorMessage, setErrorMessage] = useState<string>('');\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      statusMessage={errorMessage}\n      dataHook={dataHook}\n    >\n      <DatePicker\n        ref={(internalRef) => {\n          inputRef?.(ref.current);\n          // @ts-expect-error: WSR internal API hack for focusing\n          ref.current.focus = () => internalRef?.state?.inputRef?.focus?.();\n        }}\n        dataHook={`date-${field.id}`}\n        width=\"100%\"\n        value={date}\n        onChange={(newValue: Date) => {\n          setDate(newValue);\n          if (newValue) {\n            const formattedDate = getISODateStringWithFixedTimezone(newValue);\n            controller.field.onChange(formattedDate.split('T')[0]);\n          } else {\n            controller.field.onChange(null);\n          }\n        }}\n        onValidate={({ validationType, value: newValue, format }) => {\n          const error = validateDateField(\n            newValue,\n            field.validation,\n            t,\n            format,\n            validationType,\n          );\n          setErrorMessage(error);\n          ref.current.invalid = !!error;\n\n          if (validationType === 'formatError' && newValue === '') {\n            setDate(undefined);\n            controller.field.onChange(null);\n          }\n        }}\n        status={errorMessage ? 'error' : undefined}\n        statusMessage={errorMessage}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/ImageInput.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { FormField, ImageViewer } from '@wix/design-system';
+import { Box, FormField, ImageViewer } from '@wix/design-system';
 import { dashboard } from '@wix/dashboard';
 import { useIsMobile, useSelector, useWixPatternsContainer } from '@wix/patterns';
 import { useController } from '@wix/patterns/form';
 import { getImageUrl } from '../../utils/media/getImageUrl';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from './mediaConstants';
 export const ImageInput = props => {
   var _field$validation2, _controller$fieldStat;
   const {
@@ -52,6 +53,9 @@ export const ImageInput = props => {
     status: controller.fieldState.error ? 'error' : undefined,
     statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
     dataHook: dataHook
+  }, /*#__PURE__*/React.createElement(Box, {
+    width: "100%",
+    maxWidth: MEDIA_MAX_WIDTH
   }, /*#__PURE__*/React.createElement(ImageViewer, {
     imageUrl: imageUrl,
     dataHook: `image-${field.id}`,
@@ -60,10 +64,10 @@ export const ImageInput = props => {
     updateImageInfo: t('cairo.replace-image.tooltip'),
     removeImageInfo: t('cairo.remove-image.tooltip'),
     addImageInfo: t('cairo.add-image.tooltip'),
-    height: "120px",
-    width: "25%",
+    height: MEDIA_HEIGHT,
+    width: "100%",
     fit: "cover",
     onRemoveImage: () => controller.field.onChange(null)
-  }));
+  })));
 };
 //# sourceMappingURL=ImageInput.js.map

package/dist/esm/components/fields/ImageInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FormField","ImageViewer","dashboard","useIsMobile","useSelector","useWixPatternsContainer","useController","getImageUrl","ImageInput","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","container","initTask","status","isMobile","openMedia","_chosenMediaItems$ite","chosenMediaItems","openMediaManager","multiSelect","category","newImage","items","media","image","controller","onChange","error","console","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","imageUrl","createElement","label","displayName","fieldState","statusMessage","message","onAddImage","onUpdateImage","updateImageInfo","removeImageInfo","addImageInfo","height","width","fit","onRemoveImage"],"sources":["../../../../src/components/fields/ImageInput.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, ImageViewer } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\nimport {\n  useIsMobile,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { getImageUrl } from '../../utils/media/getImageUrl';\nimport { BaseInputProps } from './types';\n\nexport interface ImageInputProps extends BaseInputProps<string> {}\n\nexport const ImageInput = (props: ImageInputProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n  const isMobile = useIsMobile();\n\n  async function openMedia() {\n    try {\n      const chosenMediaItems = await dashboard.openMediaManager({\n        multiSelect: false,\n        category: 'IMAGE',\n      });\n\n      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;\n\n      controller.field.onChange(newImage);\n    } catch (error) {\n      console.error('Error opening Media Manager or no files selected:', error);\n    }\n  }\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const imageUrl =\n    controller.field.value && getImageUrl(controller.field.value);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <ImageViewer\n        imageUrl={imageUrl}\n        dataHook={`image-${field.id}`}\n        onAddImage={isMobile ? undefined : () => openMedia()}\n        onUpdateImage={isMobile ? undefined : () => openMedia()}\n        updateImageInfo={t('cairo.replace-image.tooltip')}\n        removeImageInfo={t('cairo.remove-image.tooltip')}\n        addImageInfo={t('cairo.add-image.tooltip')}\n        height=\"120px\"\n        width=\"25%\"\n        fit=\"cover\"\n        onRemoveImage={() => controller.field.onChange(null)}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Box","FormField","ImageViewer","dashboard","useIsMobile","useSelector","useWixPatternsContainer","useController","getImageUrl","MEDIA_HEIGHT","MEDIA_MAX_WIDTH","ImageInput","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","container","initTask","status","isMobile","openMedia","_chosenMediaItems$ite","chosenMediaItems","openMediaManager","multiSelect","category","newImage","items","media","image","controller","onChange","error","console","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","imageUrl","createElement","label","displayName","fieldState","statusMessage","message","width","maxWidth","onAddImage","onUpdateImage","updateImageInfo","removeImageInfo","addImageInfo","height","fit","onRemoveImage"],"sources":["../../../../src/components/fields/ImageInput.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, FormField, ImageViewer } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\nimport {\n  useIsMobile,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { getImageUrl } from '../../utils/media/getImageUrl';\nimport { BaseInputProps } from './types';\nimport { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from './mediaConstants';\n\nexport interface ImageInputProps extends BaseInputProps<string> {}\n\nexport const ImageInput = (props: ImageInputProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n  const isMobile = useIsMobile();\n\n  async function openMedia() {\n    try {\n      const chosenMediaItems = await dashboard.openMediaManager({\n        multiSelect: false,\n        category: 'IMAGE',\n      });\n\n      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;\n\n      controller.field.onChange(newImage);\n    } catch (error) {\n      console.error('Error opening Media Manager or no files selected:', error);\n    }\n  }\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const imageUrl =\n    controller.field.value && getImageUrl(controller.field.value);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <Box width=\"100%\" maxWidth={MEDIA_MAX_WIDTH}>\n        <ImageViewer\n          imageUrl={imageUrl}\n          dataHook={`image-${field.id}`}\n          onAddImage={isMobile ? undefined : () => openMedia()}\n          onUpdateImage={isMobile ? undefined : () => openMedia()}\n          updateImageInfo={t('cairo.replace-image.tooltip')}\n          removeImageInfo={t('cairo.remove-image.tooltip')}\n          addImageInfo={t('cairo.add-image.tooltip')}\n          height={MEDIA_HEIGHT}\n          width=\"100%\"\n          fit=\"cover\"\n          onRemoveImage={() => controller.field.onChange(null)}\n        />\n      </Box>\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/ImageViewField.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box, Text } from '@wix/design-system';
+import { getImageUrl } from '../../utils/media/getImageUrl';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH, MEDIA_BORDER_RADIUS } from './mediaConstants';
+export const ImageViewField = _ref => {
+  let {
+    value,
+    displayName,
+    id
+  } = _ref;
+  const imageValue = typeof value === 'string' ? value : undefined;
+  const imageUrl = getImageUrl(imageValue);
+  if (!imageUrl) {
+    return /*#__PURE__*/React.createElement(Text, null, "-");
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    height: MEDIA_HEIGHT,
+    width: "100%",
+    maxWidth: MEDIA_MAX_WIDTH,
+    borderRadius: MEDIA_BORDER_RADIUS,
+    overflow: "hidden"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: imageUrl,
+    alt: displayName || id,
+    style: {
+      height: '100%',
+      width: '100%',
+      objectFit: 'cover',
+      display: 'block'
+    }
+  }));
+};
+//# sourceMappingURL=ImageViewField.js.map

package/dist/esm/components/fields/ImageViewField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","Text","getImageUrl","MEDIA_HEIGHT","MEDIA_MAX_WIDTH","MEDIA_BORDER_RADIUS","ImageViewField","_ref","value","displayName","id","imageValue","undefined","imageUrl","createElement","height","width","maxWidth","borderRadius","overflow","src","alt","style","objectFit","display"],"sources":["../../../../src/components/fields/ImageViewField.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text } from '@wix/design-system';\nimport { getImageUrl } from '../../utils/media/getImageUrl';\nimport {\n  MEDIA_HEIGHT,\n  MEDIA_MAX_WIDTH,\n  MEDIA_BORDER_RADIUS,\n} from './mediaConstants';\n\nexport interface ImageViewFieldProps {\n  value: unknown;\n  displayName: string;\n  id: string;\n}\n\nexport const ImageViewField: React.FC<ImageViewFieldProps> = ({\n  value,\n  displayName,\n  id,\n}) => {\n  const imageValue = typeof value === 'string' ? value : undefined;\n  const imageUrl = getImageUrl(imageValue);\n\n  if (!imageUrl) {\n    return <Text>-</Text>;\n  }\n\n  return (\n    <Box\n      height={MEDIA_HEIGHT}\n      width=\"100%\"\n      maxWidth={MEDIA_MAX_WIDTH}\n      borderRadius={MEDIA_BORDER_RADIUS}\n      overflow=\"hidden\"\n    >\n      <img\n        src={imageUrl}\n        alt={displayName || id}\n        style={{\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n          display: 'block',\n        }}\n      />\n    </Box>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAEC,IAAI,QAAQ,oBAAoB;AAC9C,SAASC,WAAW,QAAQ,+BAA+B;AAC3D,SACEC,YAAY,EACZC,eAAe,EACfC,mBAAmB,QACd,kBAAkB;AAQzB,OAAO,MAAMC,cAA6C,GAAGC,IAAA,IAIvD;EAAA,IAJwD;IAC5DC,KAAK;IACLC,WAAW;IACXC;EACF,CAAC,GAAAH,IAAA;EACC,MAAMI,UAAU,GAAG,OAAOH,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGI,SAAS;EAChE,MAAMC,QAAQ,GAAGX,WAAW,CAACS,UAAU,CAAC;EAExC,IAAI,CAACE,QAAQ,EAAE;IACb,oBAAOd,KAAA,CAAAe,aAAA,CAACb,IAAI,QAAC,GAAO,CAAC;EACvB;EAEA,oBACEF,KAAA,CAAAe,aAAA,CAACd,GAAG;IACFe,MAAM,EAAEZ,YAAa;IACrBa,KAAK,EAAC,MAAM;IACZC,QAAQ,EAAEb,eAAgB;IAC1Bc,YAAY,EAAEb,mBAAoB;IAClCc,QAAQ,EAAC;EAAQ,gBAEjBpB,KAAA,CAAAe,aAAA;IACEM,GAAG,EAAEP,QAAS;IACdQ,GAAG,EAAEZ,WAAW,IAAIC,EAAG;IACvBY,KAAK,EAAE;MACLP,MAAM,EAAE,MAAM;MACdC,KAAK,EAAE,MAAM;MACbO,SAAS,EAAE,OAAO;MAClBC,OAAO,EAAE;IACX;EAAE,CACH,CACE,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/components/fields/Video.js

@@ -0,0 +1,189 @@
+import React from 'react';
+import { FormField, ImageViewer, Modal, CustomModalLayout, MediaOverlay, Box, Tooltip, IconButton, PopoverMenu, Image } from '@wix/design-system';
+import { Replace, More, Download, Delete, Maximize } from '@wix/wix-ui-icons-common';
+import { dashboard } from '@wix/dashboard';
+import { useIsMobile, useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from './mediaConstants';
+import { useVideoPreview } from './useVideoPreview';
+import { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';
+import { isDataValidOrNotSet } from '../../cms-fields/validations/validations';
+import { TypeMismatchExclamation } from '../../cms-fields';
+import * as videoValidation from '../../cms-fields/validations/video';
+
+/** Media descriptor from Wix Media Manager for video files */
+
+/** Media item returned from openMediaManager for video category */
+
+export const Video = props => {
+  var _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t
+  } = useAutoPatternsAppContainer();
+  const {
+    translate: pt,
+    ...container
+  } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+  const isMobile = useIsMobile();
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: formControl,
+    defaultValue: data == null ? void 0 : data[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (value === null || value === undefined || value === '')) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  async function openMedia() {
+    try {
+      var _chosenMediaItems$ite, _mediaItem$media;
+      const chosenMediaItems = await dashboard.openMediaManager({
+        multiSelect: false,
+        category: 'VIDEO'
+      });
+      const mediaItem = chosenMediaItems == null || (_chosenMediaItems$ite = chosenMediaItems.items) == null ? void 0 : _chosenMediaItems$ite[0];
+      const newVideo = mediaItem == null || (_mediaItem$media = mediaItem.media) == null ? void 0 : _mediaItem$media.video;
+      if (newVideo) {
+        controller.field.onChange(newVideo);
+      }
+    } catch (error) {
+      console.error('Error opening Media Manager or no files selected:', error);
+    }
+  }
+  const {
+    videoUrl,
+    posterUrl: imageUrl,
+    isPreviewOpen,
+    openPreview: handlePreview,
+    closePreview: handleClosePreview,
+    handleDownload
+  } = useVideoPreview({
+    videoUri: controller.field.value
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook,
+    suffix: isDataValidOrNotSet(controller.field.value, videoValidation) ? undefined : /*#__PURE__*/React.createElement(TypeMismatchExclamation, {
+      typeName: t('auto-patterns.fields.field_type_video_title'),
+      clearButtonText: t('auto-patterns.fields.type_mismatch_clear'),
+      convertButtonText: t('auto-patterns.fields.type_mismatch_convert'),
+      onClear: () => controller.field.onChange(undefined),
+      onChange: value => controller.field.onChange(value),
+      convertDisabledText: t('auto-patterns.fields.type_mismatch_convert_disabled'),
+      fieldName: field.displayName,
+      isConverted: false,
+      isConverting: false,
+      convertedValue: null,
+      tooltipText: t('auto-patterns.fields.type_mismatch_tip', {
+        typeName: 'Video'
+      })
+    })
+  }, controller.field.value ? /*#__PURE__*/React.createElement(Box, {
+    width: "100%",
+    maxWidth: MEDIA_MAX_WIDTH,
+    height: MEDIA_HEIGHT
+  }, /*#__PURE__*/React.createElement(MediaOverlay, {
+    dataHook: `video-${field.id}`,
+    hoverSkin: "dark",
+    media: /*#__PURE__*/React.createElement(Image, {
+      src: imageUrl,
+      width: "100%",
+      height: MEDIA_HEIGHT,
+      fit: "cover"
+    })
+  }, /*#__PURE__*/React.createElement(MediaOverlay.Content, {
+    placement: "middle",
+    visible: "hover"
+  }, /*#__PURE__*/React.createElement(Box, {
+    gap: "SP2"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: t('auto-patterns.fields.replace_video_tooltip')
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: () => openMedia(),
+    skin: "light",
+    priority: "secondary",
+    disabled: isMobile,
+    ariaLabel: t('auto-patterns.fields.replace_video_tooltip'),
+    dataHook: `video-replace-${field.id}`
+  }, /*#__PURE__*/React.createElement(Replace, null))), /*#__PURE__*/React.createElement(PopoverMenu, {
+    triggerElement: _ref => {
+      let {
+        toggle
+      } = _ref;
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        content: t('auto-patterns.fields.more_actions_tooltip')
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        priority: "secondary",
+        onClick: toggle,
+        skin: "light",
+        ariaLabel: t('auto-patterns.fields.more_actions_tooltip'),
+        dataHook: `video-more-${field.id}`
+      }, /*#__PURE__*/React.createElement(More, null)));
+    }
+  }, /*#__PURE__*/React.createElement(PopoverMenu.MenuItem, {
+    prefixIcon: /*#__PURE__*/React.createElement(Maximize, null),
+    text: t('auto-patterns.fields.preview_video'),
+    onClick: handlePreview,
+    disabled: !videoUrl,
+    dataHook: `video-preview-${field.id}`
+  }), /*#__PURE__*/React.createElement(PopoverMenu.MenuItem, {
+    prefixIcon: /*#__PURE__*/React.createElement(Download, null),
+    text: t('auto-patterns.fields.download_video'),
+    onClick: handleDownload,
+    dataHook: `video-download-${field.id}`
+  }), /*#__PURE__*/React.createElement(PopoverMenu.Divider, null), /*#__PURE__*/React.createElement(PopoverMenu.MenuItem, {
+    prefixIcon: /*#__PURE__*/React.createElement(Delete, null),
+    text: t('auto-patterns.fields.remove_video'),
+    onClick: () => controller.field.onChange(null),
+    dataHook: `video-delete-${field.id}`
+  })))))) : /*#__PURE__*/React.createElement(Box, {
+    width: "100%",
+    maxWidth: MEDIA_MAX_WIDTH
+  }, /*#__PURE__*/React.createElement(ImageViewer, {
+    dataHook: `video-${field.id}`,
+    onAddImage: isMobile ? undefined : () => openMedia(),
+    addImageInfo: t('auto-patterns.fields.add_video_tooltip'),
+    height: MEDIA_HEIGHT,
+    width: "100%"
+  })), isPreviewOpen && /*#__PURE__*/React.createElement(Modal, {
+    isOpen: isPreviewOpen,
+    onRequestClose: handleClosePreview
+  }, /*#__PURE__*/React.createElement(CustomModalLayout, {
+    title: field.displayName,
+    onCloseButtonClick: handleClosePreview,
+    content: /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("video", {
+      controls: true,
+      autoPlay: true,
+      style: {
+        maxWidth: '100%',
+        maxHeight: '70vh'
+      },
+      poster: imageUrl
+    }, videoUrl && /*#__PURE__*/React.createElement("source", {
+      src: videoUrl,
+      type: "video/mp4"
+    }), "Your browser does not support the video tag."))
+  })));
+};
+//# sourceMappingURL=Video.js.map

package/dist/esm/components/fields/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","ImageViewer","Modal","CustomModalLayout","MediaOverlay","Box","Tooltip","IconButton","PopoverMenu","Image","Replace","More","Download","Delete","Maximize","dashboard","useIsMobile","useSelector","useWixPatternsContainer","useController","MEDIA_HEIGHT","MEDIA_MAX_WIDTH","useVideoPreview","useAutoPatternsAppContainer","isDataValidOrNotSet","TypeMismatchExclamation","videoValidation","Video","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","pt","container","initTask","status","isMobile","controller","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","openMedia","_chosenMediaItems$ite","_mediaItem$media","chosenMediaItems","openMediaManager","multiSelect","category","mediaItem","items","newVideo","media","video","onChange","error","console","videoUrl","posterUrl","imageUrl","isPreviewOpen","openPreview","handlePreview","closePreview","handleClosePreview","handleDownload","videoUri","createElement","label","displayName","fieldState","statusMessage","message","suffix","typeName","clearButtonText","convertButtonText","onClear","convertDisabledText","fieldName","isConverted","isConverting","convertedValue","tooltipText","width","maxWidth","height","hoverSkin","src","fit","Content","placement","visible","gap","content","onClick","skin","priority","disabled","ariaLabel","triggerElement","_ref","toggle","MenuItem","prefixIcon","text","Divider","onAddImage","addImageInfo","isOpen","onRequestClose","title","onCloseButtonClick","style","display","justifyContent","padding","controls","autoPlay","maxHeight","poster","type"],"sources":["../../../../src/components/fields/Video.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  FormField,\n  ImageViewer,\n  Modal,\n  CustomModalLayout,\n  MediaOverlay,\n  Box,\n  Tooltip,\n  IconButton,\n  PopoverMenu,\n  Image,\n} from '@wix/design-system';\nimport {\n  Replace,\n  More,\n  Download,\n  Delete,\n  Maximize,\n} from '@wix/wix-ui-icons-common';\nimport { dashboard } from '@wix/dashboard';\nimport {\n  useIsMobile,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { BaseInputProps } from './types';\nimport { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from './mediaConstants';\nimport { useVideoPreview } from './useVideoPreview';\nimport { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';\nimport { isDataValidOrNotSet } from '../../cms-fields/validations/validations';\nimport { TypeMismatchExclamation } from '../../cms-fields';\nimport * as videoValidation from '../../cms-fields/validations/video';\n\n/** Media descriptor from Wix Media Manager for video files */\ninterface VideoMediaDescriptor {\n  video?: string;\n}\n\n/** Media item returned from openMediaManager for video category */\ninterface MediaManagerVideoItem {\n  _id?: string;\n  displayName?: string;\n  mediaType?: string;\n  media?: VideoMediaDescriptor;\n}\n\nexport interface VideoProps extends BaseInputProps<string> {}\n\nexport const Video = (props: VideoProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t } = useAutoPatternsAppContainer();\n  const { translate: pt, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n  const isMobile = useIsMobile();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return pt('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  async function openMedia() {\n    try {\n      const chosenMediaItems = await dashboard.openMediaManager({\n        multiSelect: false,\n        category: 'VIDEO',\n      });\n\n      const mediaItem = chosenMediaItems?.items?.[0] as MediaManagerVideoItem | undefined;\n      const newVideo = mediaItem?.media?.video;\n      if (newVideo) {\n        controller.field.onChange(newVideo);\n      }\n    } catch (error) {\n      console.error('Error opening Media Manager or no files selected:', error);\n    }\n  }\n\n  const {\n    videoUrl,\n    posterUrl: imageUrl,\n    isPreviewOpen,\n    openPreview: handlePreview,\n    closePreview: handleClosePreview,\n    handleDownload,\n  } = useVideoPreview({ videoUri: controller.field.value });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n      suffix={\n        isDataValidOrNotSet(\n          controller.field.value,\n          videoValidation,\n        ) ? undefined : (\n          <TypeMismatchExclamation\n            typeName={t('auto-patterns.fields.field_type_video_title')}\n            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}\n            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}\n            onClear={() => controller.field.onChange(undefined)}\n            onChange={(value) => controller.field.onChange(value)}\n            convertDisabledText={t(\n              'auto-patterns.fields.type_mismatch_convert_disabled',\n            )}\n            fieldName={field.displayName}\n            isConverted={false}\n            isConverting={false}\n            convertedValue={null}\n            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {\n              typeName: 'Video',\n            })}\n          />\n        )\n      }\n    >\n      {controller.field.value ? (\n        <Box width=\"100%\" maxWidth={MEDIA_MAX_WIDTH} height={MEDIA_HEIGHT}>\n          <MediaOverlay\n            dataHook={`video-${field.id}`}\n            hoverSkin=\"dark\"\n            media={\n              <Image\n                src={imageUrl}\n                width=\"100%\"\n                height={MEDIA_HEIGHT}\n                fit=\"cover\"\n              />\n            }\n          >\n            <MediaOverlay.Content placement=\"middle\" visible=\"hover\">\n              <Box gap=\"SP2\">\n                <Tooltip content={t('auto-patterns.fields.replace_video_tooltip')}>\n                  <IconButton\n                    onClick={() => openMedia()}\n                    skin=\"light\"\n                    priority=\"secondary\"\n                    disabled={isMobile}\n                    ariaLabel={t('auto-patterns.fields.replace_video_tooltip')}\n                    dataHook={`video-replace-${field.id}`}\n                  >\n                    <Replace />\n                  </IconButton>\n                </Tooltip>\n                <PopoverMenu\n                  triggerElement={({ toggle }) => (\n                    <Tooltip content={t('auto-patterns.fields.more_actions_tooltip')}>\n                      <IconButton\n                        priority=\"secondary\"\n                        onClick={toggle}\n                        skin=\"light\"\n                        ariaLabel={t('auto-patterns.fields.more_actions_tooltip')}\n                        dataHook={`video-more-${field.id}`}\n                      >\n                        <More />\n                      </IconButton>\n                    </Tooltip>\n                  )}\n                >\n                  <PopoverMenu.MenuItem\n                    prefixIcon={<Maximize />}\n                    text={t('auto-patterns.fields.preview_video')}\n                    onClick={handlePreview}\n                    disabled={!videoUrl}\n                    dataHook={`video-preview-${field.id}`}\n                  />\n                  <PopoverMenu.MenuItem\n                    prefixIcon={<Download />}\n                    text={t('auto-patterns.fields.download_video')}\n                    onClick={handleDownload}\n                    dataHook={`video-download-${field.id}`}\n                  />\n                  <PopoverMenu.Divider />\n                  <PopoverMenu.MenuItem\n                    prefixIcon={<Delete />}\n                    text={t('auto-patterns.fields.remove_video')}\n                    onClick={() => controller.field.onChange(null)}\n                    dataHook={`video-delete-${field.id}`}\n                  />\n                </PopoverMenu>\n              </Box>\n            </MediaOverlay.Content>\n          </MediaOverlay>\n        </Box>\n      ) : (\n        <Box width=\"100%\" maxWidth={MEDIA_MAX_WIDTH}>\n          <ImageViewer\n            dataHook={`video-${field.id}`}\n            onAddImage={isMobile ? undefined : () => openMedia()}\n            addImageInfo={t('auto-patterns.fields.add_video_tooltip')}\n            height={MEDIA_HEIGHT}\n            width=\"100%\"\n          />\n        </Box>\n      )}\n      {isPreviewOpen && (\n        <Modal isOpen={isPreviewOpen} onRequestClose={handleClosePreview}>\n          <CustomModalLayout\n            title={field.displayName}\n            onCloseButtonClick={handleClosePreview}\n            content={\n              <div\n                style={{\n                  display: 'flex',\n                  justifyContent: 'center',\n                  padding: '24px',\n                }}\n              >\n                <video\n                  controls\n                  autoPlay\n                  style={{ maxWidth: '100%', maxHeight: '70vh' }}\n                  poster={imageUrl}\n                >\n                  {videoUrl && <source src={videoUrl} type=\"video/mp4\" />}\n                  Your browser does not support the video tag.\n                </video>\n              </div>\n            }\n          />\n        </Modal>\n      )}\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/VideoViewField.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Box, CustomModalLayout, IconButton, MediaOverlay, Modal, Text, Tooltip } from '@wix/design-system';
+import { Download, Maximize } from '@wix/wix-ui-icons-common';
+import { VideoView } from '../../cms-fields';
+import { useVideoPreview } from './useVideoPreview';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH, MEDIA_BORDER_RADIUS } from './mediaConstants';
+import { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';
+export const VideoViewField = _ref => {
+  let {
+    value,
+    displayName,
+    id
+  } = _ref;
+  const {
+    translate: t
+  } = useAutoPatternsAppContainer();
+  const videoUri = typeof value === 'string' ? value : undefined;
+  const {
+    videoUrl,
+    posterUrl,
+    isPreviewOpen,
+    openPreview,
+    closePreview,
+    handleDownload
+  } = useVideoPreview({
+    videoUri
+  });
+  if (value === null || value === undefined) {
+    return /*#__PURE__*/React.createElement(Text, null, "-");
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    height: MEDIA_HEIGHT,
+    width: "100%",
+    maxWidth: MEDIA_MAX_WIDTH,
+    borderRadius: MEDIA_BORDER_RADIUS,
+    overflow: "hidden"
+  }, /*#__PURE__*/React.createElement(MediaOverlay, {
+    hoverSkin: "dark",
+    media: /*#__PURE__*/React.createElement(VideoView, {
+      data: videoUri,
+      height: "100%",
+      width: "100%",
+      borderRadius: MEDIA_BORDER_RADIUS
+    })
+  }, /*#__PURE__*/React.createElement(MediaOverlay.Content, {
+    placement: "middle",
+    visible: "hover"
+  }, /*#__PURE__*/React.createElement(Box, {
+    gap: "12px"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: t('auto-patterns.fields.preview_video')
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    priority: "secondary",
+    skin: "light",
+    ariaLabel: t('auto-patterns.fields.preview_video'),
+    dataHook: `view-video-preview-${id}`,
+    onClick: openPreview,
+    disabled: !videoUrl
+  }, /*#__PURE__*/React.createElement(Maximize, null))), /*#__PURE__*/React.createElement(Tooltip, {
+    content: t('auto-patterns.fields.download_video')
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    priority: "secondary",
+    skin: "light",
+    ariaLabel: t('auto-patterns.fields.download_video'),
+    dataHook: `view-video-download-${id}`,
+    onClick: handleDownload,
+    disabled: !videoUrl
+  }, /*#__PURE__*/React.createElement(Download, null))))))), isPreviewOpen && /*#__PURE__*/React.createElement(Modal, {
+    isOpen: isPreviewOpen,
+    onRequestClose: closePreview
+  }, /*#__PURE__*/React.createElement(CustomModalLayout, {
+    title: displayName || id,
+    onCloseButtonClick: closePreview,
+    content: /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("video", {
+      controls: true,
+      autoPlay: true,
+      style: {
+        maxWidth: '100%',
+        maxHeight: '70vh'
+      },
+      poster: posterUrl
+    }, videoUrl && /*#__PURE__*/React.createElement("source", {
+      src: videoUrl,
+      type: "video/mp4"
+    }), "Your browser does not support the video tag."))
+  })));
+};
+//# sourceMappingURL=VideoViewField.js.map

package/dist/esm/components/fields/VideoViewField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","CustomModalLayout","IconButton","MediaOverlay","Modal","Text","Tooltip","Download","Maximize","VideoView","useVideoPreview","MEDIA_HEIGHT","MEDIA_MAX_WIDTH","MEDIA_BORDER_RADIUS","useAutoPatternsAppContainer","VideoViewField","_ref","value","displayName","id","translate","t","videoUri","undefined","videoUrl","posterUrl","isPreviewOpen","openPreview","closePreview","handleDownload","createElement","Fragment","height","width","maxWidth","borderRadius","overflow","hoverSkin","media","data","Content","placement","visible","gap","content","priority","skin","ariaLabel","dataHook","onClick","disabled","isOpen","onRequestClose","title","onCloseButtonClick","style","display","justifyContent","padding","controls","autoPlay","maxHeight","poster","src","type"],"sources":["../../../../src/components/fields/VideoViewField.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  CustomModalLayout,\n  IconButton,\n  MediaOverlay,\n  Modal,\n  Text,\n  Tooltip,\n} from '@wix/design-system';\nimport { Download, Maximize } from '@wix/wix-ui-icons-common';\nimport { VideoView } from '../../cms-fields';\nimport { useVideoPreview } from './useVideoPreview';\nimport { MEDIA_HEIGHT, MEDIA_MAX_WIDTH, MEDIA_BORDER_RADIUS } from './mediaConstants';\nimport { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';\n\nexport interface VideoViewFieldProps {\n  value: unknown;\n  displayName: string;\n  id: string;\n}\n\nexport const VideoViewField: React.FC<VideoViewFieldProps> = ({\n  value,\n  displayName,\n  id,\n}) => {\n  const { translate: t } = useAutoPatternsAppContainer();\n  const videoUri = typeof value === 'string' ? value : undefined;\n\n  const {\n    videoUrl,\n    posterUrl,\n    isPreviewOpen,\n    openPreview,\n    closePreview,\n    handleDownload,\n  } = useVideoPreview({ videoUri });\n\n  if (value === null || value === undefined) {\n    return <Text>-</Text>;\n  }\n\n  return (\n    <>\n      <Box\n        height={MEDIA_HEIGHT}\n        width=\"100%\"\n        maxWidth={MEDIA_MAX_WIDTH}\n        borderRadius={MEDIA_BORDER_RADIUS}\n        overflow=\"hidden\"\n      >\n        <MediaOverlay\n          hoverSkin=\"dark\"\n          media={\n            <VideoView\n              data={videoUri}\n              height=\"100%\"\n              width=\"100%\"\n              borderRadius={MEDIA_BORDER_RADIUS}\n            />\n          }\n        >\n          <MediaOverlay.Content placement=\"middle\" visible=\"hover\">\n            <Box gap=\"12px\">\n              <Tooltip content={t('auto-patterns.fields.preview_video')}>\n                <IconButton\n                  priority=\"secondary\"\n                  skin=\"light\"\n                  ariaLabel={t('auto-patterns.fields.preview_video')}\n                  dataHook={`view-video-preview-${id}`}\n                  onClick={openPreview}\n                  disabled={!videoUrl}\n                >\n                  <Maximize />\n                </IconButton>\n              </Tooltip>\n              <Tooltip content={t('auto-patterns.fields.download_video')}>\n                <IconButton\n                  priority=\"secondary\"\n                  skin=\"light\"\n                  ariaLabel={t('auto-patterns.fields.download_video')}\n                  dataHook={`view-video-download-${id}`}\n                  onClick={handleDownload}\n                  disabled={!videoUrl}\n                >\n                  <Download />\n                </IconButton>\n              </Tooltip>\n            </Box>\n          </MediaOverlay.Content>\n        </MediaOverlay>\n      </Box>\n      {isPreviewOpen && (\n        <Modal isOpen={isPreviewOpen} onRequestClose={closePreview}>\n          <CustomModalLayout\n            title={displayName || id}\n            onCloseButtonClick={closePreview}\n            content={\n              <div\n                style={{\n                  display: 'flex',\n                  justifyContent: 'center',\n                  padding: '24px',\n                }}\n              >\n                <video\n                  controls\n                  autoPlay\n                  style={{ maxWidth: '100%', maxHeight: '70vh' }}\n                  poster={posterUrl}\n                >\n                  {videoUrl && <source src={videoUrl} type=\"video/mp4\" />}\n                  Your browser does not support the video tag.\n                </video>\n              </div>\n            }\n          />\n        </Modal>\n      )}\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/index.js

@@ -18,7 +18,10 @@ export { Object } from './Object';
 export { Address } from './Address';
 export { RichContent } from './RichContent';
 export { RichText } from './RichText';
+export { Video } from './Video';
 export { MediaGallery } from './MediaGallery';
+export { ImageViewField } from './ImageViewField';
+export { VideoViewField } from './VideoViewField';
 export { Array } from './Array';
 export * from './types';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/fields/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Audio","Checkbox","Color","Email","DateInput","DateTime","Document","MultiDocument","ImageInput","LongText","Number","Reference","MultiReference","ShortText","Time","Url","Object","Address","RichContent","RichText","MediaGallery","Array"],"sources":["../../../../src/components/fields/index.ts"],"sourcesContent":["export { Audio } from './Audio';\nexport { Checkbox } from './Checkbox';\nexport { Color } from './Color';\nexport { Email } from './Email';\nexport { DateInput } from './DateInput';\nexport { DateTime } from './DateTime';\nexport { Document } from './Document';\nexport { MultiDocument } from './MultiDocument';\nexport { ImageInput } from './ImageInput';\nexport { LongText } from './LongText';\nexport { Number } from './Number';\nexport { Reference } from './Reference';\nexport { MultiReference } from './MultiReference';\nexport { ShortText } from './ShortText';\nexport { Time } from './Time';\nexport { Url } from './Url';\nexport { Object } from './Object';\nexport { Address } from './Address';\nexport { RichContent } from './RichContent';\nexport { RichText } from './RichText';\nexport { MediaGallery } from './MediaGallery';\nexport { Array } from './Array';\nexport * from './types';\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,SAAS;AAC/B,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,GAAG,QAAQ,OAAO;AAC3B,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,KAAK,QAAQ,SAAS;AAC/B,cAAc,SAAS","ignoreList":[]}
+{"version":3,"names":["Audio","Checkbox","Color","Email","DateInput","DateTime","Document","MultiDocument","ImageInput","LongText","Number","Reference","MultiReference","ShortText","Time","Url","Object","Address","RichContent","RichText","Video","MediaGallery","ImageViewField","VideoViewField","Array"],"sources":["../../../../src/components/fields/index.ts"],"sourcesContent":["export { Audio } from './Audio';\nexport { Checkbox } from './Checkbox';\nexport { Color } from './Color';\nexport { Email } from './Email';\nexport { DateInput } from './DateInput';\nexport { DateTime } from './DateTime';\nexport { Document } from './Document';\nexport { MultiDocument } from './MultiDocument';\nexport { ImageInput } from './ImageInput';\nexport { LongText } from './LongText';\nexport { Number } from './Number';\nexport { Reference } from './Reference';\nexport { MultiReference } from './MultiReference';\nexport { ShortText } from './ShortText';\nexport { Time } from './Time';\nexport { Url } from './Url';\nexport { Object } from './Object';\nexport { Address } from './Address';\nexport { RichContent } from './RichContent';\nexport { RichText } from './RichText';\nexport { Video } from './Video';\nexport { MediaGallery } from './MediaGallery';\nexport { ImageViewField } from './ImageViewField';\nexport { VideoViewField } from './VideoViewField';\nexport { Array } from './Array';\nexport * from './types';\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,SAAS;AAC/B,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,GAAG,QAAQ,OAAO;AAC3B,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,KAAK,QAAQ,SAAS;AAC/B,cAAc,SAAS","ignoreList":[]}

package/dist/esm/components/fields/mediaConstants.js

@@ -0,0 +1,15 @@
+/**
+ * Shared media dimension constants for consistent sizing across form fields.
+ * These values ensure media thumbnails maintain a consistent appearance
+ * in entity page forms, matching CMS-WEB behavior.
+ */
+
+/** Height for media thumbnails in form fields */
+export const MEDIA_HEIGHT = '120px';
+
+/** Maximum width for media thumbnails to prevent oversized display */
+export const MEDIA_MAX_WIDTH = '240px';
+
+/** Border radius for media thumbnails in view mode */
+export const MEDIA_BORDER_RADIUS = '8px';
+//# sourceMappingURL=mediaConstants.js.map

package/dist/esm/components/fields/mediaConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MEDIA_HEIGHT","MEDIA_MAX_WIDTH","MEDIA_BORDER_RADIUS"],"sources":["../../../../src/components/fields/mediaConstants.ts"],"sourcesContent":["/**\n * Shared media dimension constants for consistent sizing across form fields.\n * These values ensure media thumbnails maintain a consistent appearance\n * in entity page forms, matching CMS-WEB behavior.\n */\n\n/** Height for media thumbnails in form fields */\nexport const MEDIA_HEIGHT = '120px';\n\n/** Maximum width for media thumbnails to prevent oversized display */\nexport const MEDIA_MAX_WIDTH = '240px';\n\n/** Border radius for media thumbnails in view mode */\nexport const MEDIA_BORDER_RADIUS = '8px';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,MAAMA,YAAY,GAAG,OAAO;;AAEnC;AACA,OAAO,MAAMC,eAAe,GAAG,OAAO;;AAEtC;AACA,OAAO,MAAMC,mBAAmB,GAAG,KAAK","ignoreList":[]}