@strapi/upload 5.12.1 → 5.12.3

package/dist/admin/components/AssetCard/AssetCard.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var constants = require('../../constants.js');
+var createAssetUrl = require('../../utils/createAssetUrl.js');
+require('byte-size');
+require('date-fns');
+require('qs');
+var getFileExtension = require('../../utils/getFileExtension.js');
+var prefixFileUrlWithBackendUrl = require('../../utils/prefixFileUrlWithBackendUrl.js');
+require('../../utils/urlYupSchema.js');
+var AudioAssetCard = require('./AudioAssetCard.js');
+var DocAssetCard = require('./DocAssetCard.js');
+var ImageAssetCard = require('./ImageAssetCard.js');
+var VideoAssetCard = require('./VideoAssetCard.js');
+
+const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false })=>{
+    const handleSelect = onSelect ? ()=>onSelect(asset) : undefined;
+    const commonAssetCardProps = {
+        id: asset.id,
+        isSelectable: asset.isSelectable,
+        extension: getFileExtension.getFileExtension(asset.ext),
+        name: asset.name,
+        url: local ? asset.url : createAssetUrl.createAssetUrl(asset, true),
+        mime: asset.mime,
+        onEdit: onEdit ? ()=>onEdit(asset) : undefined,
+        onSelect: handleSelect,
+        onRemove: onRemove ? ()=>onRemove(asset) : undefined,
+        selected: isSelected,
+        size
+    };
+    if (asset.mime?.includes(constants.AssetType.Video)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(VideoAssetCard.VideoAssetCard, {
+            ...commonAssetCardProps
+        });
+    }
+    if (asset.mime?.includes(constants.AssetType.Image)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ImageAssetCard.ImageAssetCard, {
+            alt: asset.alternativeText || asset.name,
+            height: asset.height,
+            thumbnail: prefixFileUrlWithBackendUrl.prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url),
+            width: asset.width,
+            updatedAt: asset.updatedAt,
+            isUrlSigned: asset?.isUrlSigned || false,
+            ...commonAssetCardProps
+        });
+    }
+    if (asset.mime?.includes(constants.AssetType.Audio)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(AudioAssetCard.AudioAssetCard, {
+            ...commonAssetCardProps
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(DocAssetCard.DocAssetCard, {
+        ...commonAssetCardProps
+    });
+};
+
+exports.AssetCard = AssetCard;
+//# sourceMappingURL=AssetCard.js.map

package/dist/admin/components/AssetCard/AssetCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCard.js","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n  asset: FileSelectable;\n  local?: boolean;\n  onSelect?: (asset: FileSelectable) => void;\n  onEdit?: (asset: FileSelectable) => void;\n  onRemove?: (asset: FileSelectable) => void;\n  isSelected?: boolean;\n  size?: 'S' | 'M';\n  allowedTypes?: AllowedTypes[];\n  alt?: string;\n}\n\nexport const AssetCard = ({\n  asset,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onRemove,\n  size = 'M',\n  local = false,\n}: AssetCardProps) => {\n  const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n  const commonAssetCardProps = {\n    id: asset.id,\n    isSelectable: asset.isSelectable,\n    extension: getFileExtension(asset.ext)!,\n    name: asset.name,\n    url: local ? asset.url! : createAssetUrl(asset, true)!,\n    mime: asset.mime!,\n    onEdit: onEdit ? () => onEdit(asset) : undefined,\n    onSelect: handleSelect,\n    onRemove: onRemove ? () => onRemove(asset) : undefined,\n    selected: isSelected,\n    size,\n  };\n\n  if (asset.mime?.includes(AssetType.Video)) {\n    return <VideoAssetCard {...commonAssetCardProps} />;\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <ImageAssetCard\n        alt={asset.alternativeText || asset.name}\n        height={asset.height!}\n        thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n        width={asset.width!}\n        updatedAt={asset.updatedAt}\n        isUrlSigned={asset?.isUrlSigned || false}\n        {...commonAssetCardProps}\n      />\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return <AudioAssetCard {...commonAssetCardProps} />;\n  }\n\n  return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;;;AA0BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAAA,GAAO,GAAG,EACVC,KAAAA,GAAQ,KAAK,EACE,GAAA;AACf,IAAA,MAAMC,YAAeL,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASQ,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIV,MAAMU,EAAE;AACZC,QAAAA,YAAAA,EAAcX,MAAMW,YAAY;QAChCC,SAAWC,EAAAA,iCAAAA,CAAiBb,MAAMc,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMf,MAAMe,IAAI;AAChBC,QAAAA,GAAAA,EAAKV,KAAQN,GAAAA,KAAAA,CAAMgB,GAAG,GAAIC,8BAAejB,KAAO,EAAA,IAAA,CAAA;AAChDkB,QAAAA,IAAAA,EAAMlB,MAAMkB,IAAI;QAChBf,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASQ,CAAAA,GAAAA,SAAAA;QACvCN,QAAUK,EAAAA,YAAAA;QACVH,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASQ,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUlB,EAAAA,UAAAA;AACVI,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIL,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,cAACC,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,cAACG,CAAAA,6BAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK3B,KAAM4B,CAAAA,eAAe,IAAI5B,KAAAA,CAAMe,IAAI;AACxCc,YAAAA,MAAAA,EAAQ7B,MAAM6B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,wDAA4B/B,KAAOgC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOhB,MAAMgB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOjC,MAAMiC,KAAK;AAClBC,YAAAA,SAAAA,EAAWlC,MAAMkC,SAAS;AAC1BC,YAAAA,WAAAA,EAAanC,OAAOmC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,cAACc,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,cAACe,CAAAA,yBAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}

package/dist/admin/components/AssetCard/AssetCard.mjs

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { AssetType } from '../../constants.mjs';
+import { createAssetUrl } from '../../utils/createAssetUrl.mjs';
+import 'byte-size';
+import 'date-fns';
+import 'qs';
+import { getFileExtension } from '../../utils/getFileExtension.mjs';
+import { prefixFileUrlWithBackendUrl } from '../../utils/prefixFileUrlWithBackendUrl.mjs';
+import '../../utils/urlYupSchema.mjs';
+import { AudioAssetCard } from './AudioAssetCard.mjs';
+import { DocAssetCard } from './DocAssetCard.mjs';
+import { ImageAssetCard } from './ImageAssetCard.mjs';
+import { VideoAssetCard } from './VideoAssetCard.mjs';
+
+const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false })=>{
+    const handleSelect = onSelect ? ()=>onSelect(asset) : undefined;
+    const commonAssetCardProps = {
+        id: asset.id,
+        isSelectable: asset.isSelectable,
+        extension: getFileExtension(asset.ext),
+        name: asset.name,
+        url: local ? asset.url : createAssetUrl(asset, true),
+        mime: asset.mime,
+        onEdit: onEdit ? ()=>onEdit(asset) : undefined,
+        onSelect: handleSelect,
+        onRemove: onRemove ? ()=>onRemove(asset) : undefined,
+        selected: isSelected,
+        size
+    };
+    if (asset.mime?.includes(AssetType.Video)) {
+        return /*#__PURE__*/ jsx(VideoAssetCard, {
+            ...commonAssetCardProps
+        });
+    }
+    if (asset.mime?.includes(AssetType.Image)) {
+        return /*#__PURE__*/ jsx(ImageAssetCard, {
+            alt: asset.alternativeText || asset.name,
+            height: asset.height,
+            thumbnail: prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url),
+            width: asset.width,
+            updatedAt: asset.updatedAt,
+            isUrlSigned: asset?.isUrlSigned || false,
+            ...commonAssetCardProps
+        });
+    }
+    if (asset.mime?.includes(AssetType.Audio)) {
+        return /*#__PURE__*/ jsx(AudioAssetCard, {
+            ...commonAssetCardProps
+        });
+    }
+    return /*#__PURE__*/ jsx(DocAssetCard, {
+        ...commonAssetCardProps
+    });
+};
+
+export { AssetCard };
+//# sourceMappingURL=AssetCard.mjs.map

package/dist/admin/components/AssetCard/AssetCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n  asset: FileSelectable;\n  local?: boolean;\n  onSelect?: (asset: FileSelectable) => void;\n  onEdit?: (asset: FileSelectable) => void;\n  onRemove?: (asset: FileSelectable) => void;\n  isSelected?: boolean;\n  size?: 'S' | 'M';\n  allowedTypes?: AllowedTypes[];\n  alt?: string;\n}\n\nexport const AssetCard = ({\n  asset,\n  isSelected = false,\n  onSelect,\n  onEdit,\n  onRemove,\n  size = 'M',\n  local = false,\n}: AssetCardProps) => {\n  const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n  const commonAssetCardProps = {\n    id: asset.id,\n    isSelectable: asset.isSelectable,\n    extension: getFileExtension(asset.ext)!,\n    name: asset.name,\n    url: local ? asset.url! : createAssetUrl(asset, true)!,\n    mime: asset.mime!,\n    onEdit: onEdit ? () => onEdit(asset) : undefined,\n    onSelect: handleSelect,\n    onRemove: onRemove ? () => onRemove(asset) : undefined,\n    selected: isSelected,\n    size,\n  };\n\n  if (asset.mime?.includes(AssetType.Video)) {\n    return <VideoAssetCard {...commonAssetCardProps} />;\n  }\n\n  if (asset.mime?.includes(AssetType.Image)) {\n    return (\n      <ImageAssetCard\n        alt={asset.alternativeText || asset.name}\n        height={asset.height!}\n        thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n        width={asset.width!}\n        updatedAt={asset.updatedAt}\n        isUrlSigned={asset?.isUrlSigned || false}\n        {...commonAssetCardProps}\n      />\n    );\n  }\n\n  if (asset.mime?.includes(AssetType.Audio)) {\n    return <AudioAssetCard {...commonAssetCardProps} />;\n  }\n\n  return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAAA,GAAO,GAAG,EACVC,KAAAA,GAAQ,KAAK,EACE,GAAA;AACf,IAAA,MAAMC,YAAeL,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASQ,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIV,MAAMU,EAAE;AACZC,QAAAA,YAAAA,EAAcX,MAAMW,YAAY;QAChCC,SAAWC,EAAAA,gBAAAA,CAAiBb,MAAMc,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMf,MAAMe,IAAI;AAChBC,QAAAA,GAAAA,EAAKV,KAAQN,GAAAA,KAAAA,CAAMgB,GAAG,GAAIC,eAAejB,KAAO,EAAA,IAAA,CAAA;AAChDkB,QAAAA,IAAAA,EAAMlB,MAAMkB,IAAI;QAChBf,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASQ,CAAAA,GAAAA,SAAAA;QACvCN,QAAUK,EAAAA,YAAAA;QACVH,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASQ,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUlB,EAAAA,UAAAA;AACVI,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIL,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,GAACC,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,GAACG,CAAAA,cAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK3B,KAAM4B,CAAAA,eAAe,IAAI5B,KAAAA,CAAMe,IAAI;AACxCc,YAAAA,MAAAA,EAAQ7B,MAAM6B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,4BAA4B/B,KAAOgC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOhB,MAAMgB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOjC,MAAMiC,KAAK;AAClBC,YAAAA,SAAAA,EAAWlC,MAAMkC,SAAS;AAC1BC,YAAAA,WAAAA,EAAanC,OAAOmC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,GAACc,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,GAACe,CAAAA,YAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}

package/dist/admin/components/AssetCard/AssetCardBase.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+require('byte-size');
+require('date-fns');
+var getTrad = require('../../utils/getTrad.js');
+require('qs');
+require('../../constants.js');
+require('../../utils/urlYupSchema.js');
+
+const Extension = styledComponents.styled.span`
+  text-transform: uppercase;
+`;
+const CardActionsContainer = styledComponents.styled(designSystem.CardAction)`
+  opacity: 0;
+
+  &:focus-within {
+    opacity: 1;
+  }
+`;
+const CardContainer = styledComponents.styled(designSystem.Card)`
+  cursor: pointer;
+
+  &:hover {
+    ${CardActionsContainer} {
+      opacity: 1;
+    }
+  }
+`;
+const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image' })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const handleClick = (e)=>{
+        if (onEdit) {
+            onEdit(e);
+        }
+    };
+    /**
+   * This is required because we need to stop the propagation of the event
+   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns
+   * the `boolean` value as opposed to the event itself.
+   */ const handlePropagationClick = (e)=>{
+        e.stopPropagation();
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(CardContainer, {
+        role: "button",
+        height: "100%",
+        tabIndex: -1,
+        onClick: handleClick,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardHeader, {
+                children: [
+                    isSelectable && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        onClick: handlePropagationClick,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardCheckbox, {
+                            checked: selected,
+                            onCheckedChange: onSelect
+                        })
+                    }),
+                    (onRemove || onEdit) && /*#__PURE__*/ jsxRuntime.jsxs(CardActionsContainer, {
+                        onClick: handlePropagationClick,
+                        position: "end",
+                        children: [
+                            onRemove && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                label: formatMessage({
+                                    id: getTrad.getTrad('control-card.remove-selection'),
+                                    defaultMessage: 'Remove from selection'
+                                }),
+                                onClick: onRemove,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
+                            }),
+                            onEdit && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                label: formatMessage({
+                                    id: getTrad.getTrad('control-card.edit'),
+                                    defaultMessage: 'Edit'
+                                }),
+                                onClick: onEdit,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {})
+                            })
+                        ]
+                    }),
+                    children
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardBody, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardContent, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                paddingTop: 1,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    tag: "h2",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardTitle, {
+                                        tag: "span",
+                                        children: name
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardSubtitle, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(Extension, {
+                                        children: extension
+                                    }),
+                                    subtitle
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                        paddingTop: 1,
+                        grow: 1,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardBadge, {
+                            children: formatMessage({
+                                id: getTrad.getTrad(`settings.section.${variant.toLowerCase()}.label`),
+                                defaultMessage: variant
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.AssetCardBase = AssetCardBase;
+//# sourceMappingURL=AssetCardBase.js.map

package/dist/admin/components/AssetCard/AssetCardBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCardBase.js","sources":["../../../../admin/src/components/AssetCard/AssetCardBase.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardAction,\n  CardBadge,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\nconst CardActionsContainer = styled(CardAction)`\n  opacity: 0;\n\n  &:focus-within {\n    opacity: 1;\n  }\n`;\n\nconst CardContainer = styled(Card)`\n  cursor: pointer;\n\n  &:hover {\n    ${CardActionsContainer} {\n      opacity: 1;\n    }\n  }\n`;\n\nexport interface AssetCardBaseProps {\n  children?: React.ReactNode;\n  extension: string;\n  isSelectable?: boolean;\n  name: string;\n  onSelect?: () => void;\n  onRemove?: () => void;\n  onEdit?: (\n    event:\n      | React.MouseEvent<HTMLButtonElement, MouseEvent>\n      | React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => void;\n  selected?: boolean;\n  subtitle?: string;\n  variant: 'Image' | 'Video' | 'Audio' | 'Doc';\n}\n\nexport const AssetCardBase = ({\n  children,\n  extension,\n  isSelectable = false,\n  name,\n  onSelect,\n  onRemove,\n  onEdit,\n  selected = false,\n  subtitle = '',\n  variant = 'Image',\n}: AssetCardBaseProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (onEdit) {\n      onEdit(e);\n    }\n  };\n\n  /**\n   * This is required because we need to stop the propagation of the event\n   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns\n   * the `boolean` value as opposed to the event itself.\n   */\n  const handlePropagationClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <CardContainer role=\"button\" height=\"100%\" tabIndex={-1} onClick={handleClick}>\n      <CardHeader>\n        {isSelectable && (\n          <div onClick={handlePropagationClick}>\n            <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          </div>\n        )}\n        {(onRemove || onEdit) && (\n          <CardActionsContainer onClick={handlePropagationClick} position=\"end\">\n            {onRemove && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.remove-selection'),\n                  defaultMessage: 'Remove from selection',\n                })}\n                onClick={onRemove}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {onEdit && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}\n                onClick={onEdit}\n              >\n                <Pencil />\n              </IconButton>\n            )}\n          </CardActionsContainer>\n        )}\n        {children}\n      </CardHeader>\n      <CardBody>\n        <CardContent>\n          <Box paddingTop={1}>\n            <Typography tag=\"h2\">\n              <CardTitle tag=\"span\">{name}</CardTitle>\n            </Typography>\n          </Box>\n          <CardSubtitle>\n            <Extension>{extension}</Extension>\n            {subtitle}\n          </CardSubtitle>\n        </CardContent>\n        <Flex paddingTop={1} grow={1}>\n          <CardBadge>\n            {formatMessage({\n              id: getTrad(`settings.section.${variant.toLowerCase()}.label`),\n              defaultMessage: variant,\n            })}\n          </CardBadge>\n        </Flex>\n      </CardBody>\n    </CardContainer>\n  );\n};\n"],"names":["Extension","styled","span","CardActionsContainer","CardAction","CardContainer","Card","AssetCardBase","children","extension","isSelectable","name","onSelect","onRemove","onEdit","selected","subtitle","variant","formatMessage","useIntl","handleClick","e","handlePropagationClick","stopPropagation","_jsxs","role","height","tabIndex","onClick","CardHeader","_jsx","div","CardCheckbox","checked","onCheckedChange","position","IconButton","label","id","getTrad","defaultMessage","Trash","Pencil","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","CardSubtitle","Flex","grow","CardBadge","toLowerCase"],"mappings":"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"}

package/dist/admin/components/AssetCard/AssetCardBase.mjs

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { CardAction, Card, CardHeader, CardCheckbox, IconButton, CardBody, CardContent, Box, Typography, CardTitle, CardSubtitle, Flex, CardBadge } from '@strapi/design-system';
+import { Trash, Pencil } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import 'byte-size';
+import 'date-fns';
+import { getTrad } from '../../utils/getTrad.mjs';
+import 'qs';
+import '../../constants.mjs';
+import '../../utils/urlYupSchema.mjs';
+
+const Extension = styled.span`
+  text-transform: uppercase;
+`;
+const CardActionsContainer = styled(CardAction)`
+  opacity: 0;
+
+  &:focus-within {
+    opacity: 1;
+  }
+`;
+const CardContainer = styled(Card)`
+  cursor: pointer;
+
+  &:hover {
+    ${CardActionsContainer} {
+      opacity: 1;
+    }
+  }
+`;
+const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image' })=>{
+    const { formatMessage } = useIntl();
+    const handleClick = (e)=>{
+        if (onEdit) {
+            onEdit(e);
+        }
+    };
+    /**
+   * This is required because we need to stop the propagation of the event
+   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns
+   * the `boolean` value as opposed to the event itself.
+   */ const handlePropagationClick = (e)=>{
+        e.stopPropagation();
+    };
+    return /*#__PURE__*/ jsxs(CardContainer, {
+        role: "button",
+        height: "100%",
+        tabIndex: -1,
+        onClick: handleClick,
+        children: [
+            /*#__PURE__*/ jsxs(CardHeader, {
+                children: [
+                    isSelectable && /*#__PURE__*/ jsx("div", {
+                        onClick: handlePropagationClick,
+                        children: /*#__PURE__*/ jsx(CardCheckbox, {
+                            checked: selected,
+                            onCheckedChange: onSelect
+                        })
+                    }),
+                    (onRemove || onEdit) && /*#__PURE__*/ jsxs(CardActionsContainer, {
+                        onClick: handlePropagationClick,
+                        position: "end",
+                        children: [
+                            onRemove && /*#__PURE__*/ jsx(IconButton, {
+                                label: formatMessage({
+                                    id: getTrad('control-card.remove-selection'),
+                                    defaultMessage: 'Remove from selection'
+                                }),
+                                onClick: onRemove,
+                                children: /*#__PURE__*/ jsx(Trash, {})
+                            }),
+                            onEdit && /*#__PURE__*/ jsx(IconButton, {
+                                label: formatMessage({
+                                    id: getTrad('control-card.edit'),
+                                    defaultMessage: 'Edit'
+                                }),
+                                onClick: onEdit,
+                                children: /*#__PURE__*/ jsx(Pencil, {})
+                            })
+                        ]
+                    }),
+                    children
+                ]
+            }),
+            /*#__PURE__*/ jsxs(CardBody, {
+                children: [
+                    /*#__PURE__*/ jsxs(CardContent, {
+                        children: [
+                            /*#__PURE__*/ jsx(Box, {
+                                paddingTop: 1,
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    tag: "h2",
+                                    children: /*#__PURE__*/ jsx(CardTitle, {
+                                        tag: "span",
+                                        children: name
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs(CardSubtitle, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Extension, {
+                                        children: extension
+                                    }),
+                                    subtitle
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Flex, {
+                        paddingTop: 1,
+                        grow: 1,
+                        children: /*#__PURE__*/ jsx(CardBadge, {
+                            children: formatMessage({
+                                id: getTrad(`settings.section.${variant.toLowerCase()}.label`),
+                                defaultMessage: variant
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { AssetCardBase };
+//# sourceMappingURL=AssetCardBase.mjs.map

package/dist/admin/components/AssetCard/AssetCardBase.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCardBase.mjs","sources":["../../../../admin/src/components/AssetCard/AssetCardBase.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Card,\n  CardAction,\n  CardBadge,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardSubtitle,\n  CardTitle,\n  Flex,\n  IconButton,\n  Typography,\n} from '@strapi/design-system';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../../utils';\n\nconst Extension = styled.span`\n  text-transform: uppercase;\n`;\n\nconst CardActionsContainer = styled(CardAction)`\n  opacity: 0;\n\n  &:focus-within {\n    opacity: 1;\n  }\n`;\n\nconst CardContainer = styled(Card)`\n  cursor: pointer;\n\n  &:hover {\n    ${CardActionsContainer} {\n      opacity: 1;\n    }\n  }\n`;\n\nexport interface AssetCardBaseProps {\n  children?: React.ReactNode;\n  extension: string;\n  isSelectable?: boolean;\n  name: string;\n  onSelect?: () => void;\n  onRemove?: () => void;\n  onEdit?: (\n    event:\n      | React.MouseEvent<HTMLButtonElement, MouseEvent>\n      | React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => void;\n  selected?: boolean;\n  subtitle?: string;\n  variant: 'Image' | 'Video' | 'Audio' | 'Doc';\n}\n\nexport const AssetCardBase = ({\n  children,\n  extension,\n  isSelectable = false,\n  name,\n  onSelect,\n  onRemove,\n  onEdit,\n  selected = false,\n  subtitle = '',\n  variant = 'Image',\n}: AssetCardBaseProps) => {\n  const { formatMessage } = useIntl();\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (onEdit) {\n      onEdit(e);\n    }\n  };\n\n  /**\n   * This is required because we need to stop the propagation of the event\n   * bubbling to the `CardContainer`, however the `CardCheckbox` only returns\n   * the `boolean` value as opposed to the event itself.\n   */\n  const handlePropagationClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <CardContainer role=\"button\" height=\"100%\" tabIndex={-1} onClick={handleClick}>\n      <CardHeader>\n        {isSelectable && (\n          <div onClick={handlePropagationClick}>\n            <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          </div>\n        )}\n        {(onRemove || onEdit) && (\n          <CardActionsContainer onClick={handlePropagationClick} position=\"end\">\n            {onRemove && (\n              <IconButton\n                label={formatMessage({\n                  id: getTrad('control-card.remove-selection'),\n                  defaultMessage: 'Remove from selection',\n                })}\n                onClick={onRemove}\n              >\n                <Trash />\n              </IconButton>\n            )}\n\n            {onEdit && (\n              <IconButton\n                label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}\n                onClick={onEdit}\n              >\n                <Pencil />\n              </IconButton>\n            )}\n          </CardActionsContainer>\n        )}\n        {children}\n      </CardHeader>\n      <CardBody>\n        <CardContent>\n          <Box paddingTop={1}>\n            <Typography tag=\"h2\">\n              <CardTitle tag=\"span\">{name}</CardTitle>\n            </Typography>\n          </Box>\n          <CardSubtitle>\n            <Extension>{extension}</Extension>\n            {subtitle}\n          </CardSubtitle>\n        </CardContent>\n        <Flex paddingTop={1} grow={1}>\n          <CardBadge>\n            {formatMessage({\n              id: getTrad(`settings.section.${variant.toLowerCase()}.label`),\n              defaultMessage: variant,\n            })}\n          </CardBadge>\n        </Flex>\n      </CardBody>\n    </CardContainer>\n  );\n};\n"],"names":["Extension","styled","span","CardActionsContainer","CardAction","CardContainer","Card","AssetCardBase","children","extension","isSelectable","name","onSelect","onRemove","onEdit","selected","subtitle","variant","formatMessage","useIntl","handleClick","e","handlePropagationClick","stopPropagation","_jsxs","role","height","tabIndex","onClick","CardHeader","_jsx","div","CardCheckbox","checked","onCheckedChange","position","IconButton","label","id","getTrad","defaultMessage","Trash","Pencil","CardBody","CardContent","Box","paddingTop","Typography","tag","CardTitle","CardSubtitle","Flex","grow","CardBadge","toLowerCase"],"mappings":";;;;;;;;;;;;;AAuBA,MAAMA,SAAAA,GAAYC,MAAOC,CAAAA,IAAI;;AAE7B,CAAC;AAED,MAAMC,oBAAAA,GAAuBF,MAAOG,CAAAA,UAAAA,CAAW;;;;;;AAM/C,CAAC;AAED,MAAMC,aAAAA,GAAgBJ,MAAOK,CAAAA,IAAAA,CAAK;;;;AAI9B,IAAA,EAAEH,oBAAqB,CAAA;;;;AAI3B,CAAC;AAmBM,MAAMI,aAAgB,GAAA,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,YAAAA,GAAe,KAAK,EACpBC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,QAAW,GAAA,KAAK,EAChBC,QAAAA,GAAW,EAAE,EACbC,OAAU,GAAA,OAAO,EACE,GAAA;IACnB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,cAAc,CAACC,CAAAA,GAAAA;AACnB,QAAA,IAAIP,MAAQ,EAAA;YACVA,MAAOO,CAAAA,CAAAA,CAAAA;AACT;AACF,KAAA;AAEA;;;;MAKA,MAAMC,yBAAyB,CAACD,CAAAA,GAAAA;AAC9BA,QAAAA,CAAAA,CAAEE,eAAe,EAAA;AACnB,KAAA;AAEA,IAAA,qBACEC,IAACnB,CAAAA,aAAAA,EAAAA;QAAcoB,IAAK,EAAA,QAAA;QAASC,MAAO,EAAA,MAAA;AAAOC,QAAAA,QAAAA,EAAU,CAAC,CAAA;QAAGC,OAASR,EAAAA,WAAAA;;0BAChEI,IAACK,CAAAA,UAAAA,EAAAA;;AACEnB,oBAAAA,YAAAA,kBACCoB,GAACC,CAAAA,KAAAA,EAAAA;wBAAIH,OAASN,EAAAA,sBAAAA;AACZ,wBAAA,QAAA,gBAAAQ,GAACE,CAAAA,YAAAA,EAAAA;4BAAaC,OAASlB,EAAAA,QAAAA;4BAAUmB,eAAiBtB,EAAAA;;;oBAGpDC,CAAAA,QAAAA,IAAYC,MAAK,mBACjBU,IAACrB,CAAAA,oBAAAA,EAAAA;wBAAqByB,OAASN,EAAAA,sBAAAA;wBAAwBa,QAAS,EAAA,KAAA;;AAC7DtB,4BAAAA,QAAAA,kBACCiB,GAACM,CAAAA,UAAAA,EAAAA;AACCC,gCAAAA,KAAAA,EAAOnB,aAAc,CAAA;AACnBoB,oCAAAA,EAAAA,EAAIC,OAAQ,CAAA,+BAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;gCACAZ,OAASf,EAAAA,QAAAA;AAET,gCAAA,QAAA,gBAAAiB,GAACW,CAAAA,KAAAA,EAAAA,EAAAA;;AAIJ3B,4BAAAA,MAAAA,kBACCgB,GAACM,CAAAA,UAAAA,EAAAA;AACCC,gCAAAA,KAAAA,EAAOnB,aAAc,CAAA;AAAEoB,oCAAAA,EAAAA,EAAIC,OAAQ,CAAA,mBAAA,CAAA;oCAAsBC,cAAgB,EAAA;AAAO,iCAAA,CAAA;gCAChFZ,OAASd,EAAAA,MAAAA;AAET,gCAAA,QAAA,gBAAAgB,GAACY,CAAAA,MAAAA,EAAAA,EAAAA;;;;AAKRlC,oBAAAA;;;0BAEHgB,IAACmB,CAAAA,QAAAA,EAAAA;;kCACCnB,IAACoB,CAAAA,WAAAA,EAAAA;;0CACCd,GAACe,CAAAA,GAAAA,EAAAA;gCAAIC,UAAY,EAAA,CAAA;AACf,gCAAA,QAAA,gBAAAhB,GAACiB,CAAAA,UAAAA,EAAAA;oCAAWC,GAAI,EAAA,IAAA;AACd,oCAAA,QAAA,gBAAAlB,GAACmB,CAAAA,SAAAA,EAAAA;wCAAUD,GAAI,EAAA,MAAA;AAAQrC,wCAAAA,QAAAA,EAAAA;;;;0CAG3Ba,IAAC0B,CAAAA,YAAAA,EAAAA;;kDACCpB,GAAC9B,CAAAA,SAAAA,EAAAA;AAAWS,wCAAAA,QAAAA,EAAAA;;AACXO,oCAAAA;;;;;kCAGLc,GAACqB,CAAAA,IAAAA,EAAAA;wBAAKL,UAAY,EAAA,CAAA;wBAAGM,IAAM,EAAA,CAAA;AACzB,wBAAA,QAAA,gBAAAtB,GAACuB,CAAAA,SAAAA,EAAAA;sCACEnC,aAAc,CAAA;gCACboB,EAAIC,EAAAA,OAAAA,CAAQ,CAAC,iBAAiB,EAAEtB,QAAQqC,WAAW,EAAA,CAAG,MAAM,CAAC,CAAA;gCAC7Dd,cAAgBvB,EAAAA;AAClB,6BAAA;;;;;;;AAMZ;;;;"}

package/dist/admin/components/AssetCard/AudioAssetCard.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+var AssetCardBase = require('./AssetCardBase.js');
+var AudioPreview = require('./AudioPreview.js');
+
+const AudioPreviewWrapper = styledComponents.styled(designSystem.Box)`
+  canvas,
+  audio {
+    display: block;
+    max-width: 100%;
+    max-height: ${({ size })=>size === 'M' ? 16.4 : 8.8}rem;
+  }
+`;
+const AudioAssetCard = ({ name, url, size = 'M', selected = false, ...restProps })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(AssetCardBase.AssetCardBase, {
+        name: name,
+        selected: selected,
+        ...restProps,
+        variant: "Audio",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardAsset, {
+            size: size,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                alignItems: "center",
+                children: /*#__PURE__*/ jsxRuntime.jsx(AudioPreviewWrapper, {
+                    size: size,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(AudioPreview.AudioPreview, {
+                        url: url,
+                        alt: name
+                    })
+                })
+            })
+        })
+    });
+};
+
+exports.AudioAssetCard = AudioAssetCard;
+//# sourceMappingURL=AudioAssetCard.js.map

package/dist/admin/components/AssetCard/AudioAssetCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioAssetCard.js","sources":["../../../../admin/src/components/AssetCard/AudioAssetCard.tsx"],"sourcesContent":["import { Box, CardAsset, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\nimport { AudioPreview } from './AudioPreview';\n\nconst AudioPreviewWrapper = styled(Box)`\n  canvas,\n  audio {\n    display: block;\n    max-width: 100%;\n    max-height: ${({ size }) => (size === 'M' ? 16.4 : 8.8)}rem;\n  }\n`;\n\ninterface AudioAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n  size?: 'S' | 'M';\n  url: string;\n}\n\nexport const AudioAssetCard = ({\n  name,\n  url,\n  size = 'M',\n  selected = false,\n  ...restProps\n}: AudioAssetCardProps) => {\n  return (\n    <AssetCardBase name={name} selected={selected} {...restProps} variant=\"Audio\">\n      <CardAsset size={size}>\n        <Flex alignItems=\"center\">\n          <AudioPreviewWrapper size={size}>\n            <AudioPreview url={url} alt={name} />\n          </AudioPreviewWrapper>\n        </Flex>\n      </CardAsset>\n    </AssetCardBase>\n  );\n};\n"],"names":["AudioPreviewWrapper","styled","Box","size","AudioAssetCard","name","url","selected","restProps","_jsx","AssetCardBase","variant","CardAsset","Flex","alignItems","AudioPreview","alt"],"mappings":";;;;;;;;AAMA,MAAMA,mBAAAA,GAAsBC,uBAAOC,CAAAA,gBAAAA,CAAI;;;;;gBAKvB,EAAE,CAAC,EAAEC,IAAI,EAAE,GAAMA,IAAS,KAAA,GAAA,GAAM,OAAO,GAAK,CAAA;;AAE5D,CAAC;AAOYC,MAAAA,cAAAA,GAAiB,CAAC,EAC7BC,IAAI,EACJC,GAAG,EACHH,IAAAA,GAAO,GAAG,EACVI,QAAAA,GAAW,KAAK,EAChB,GAAGC,SACiB,EAAA,GAAA;AACpB,IAAA,qBACEC,cAACC,CAAAA,2BAAAA,EAAAA;QAAcL,IAAMA,EAAAA,IAAAA;QAAME,QAAUA,EAAAA,QAAAA;AAAW,QAAA,GAAGC,SAAS;QAAEG,OAAQ,EAAA,OAAA;AACpE,QAAA,QAAA,gBAAAF,cAACG,CAAAA,sBAAAA,EAAAA;YAAUT,IAAMA,EAAAA,IAAAA;AACf,YAAA,QAAA,gBAAAM,cAACI,CAAAA,iBAAAA,EAAAA;gBAAKC,UAAW,EAAA,QAAA;AACf,gBAAA,QAAA,gBAAAL,cAACT,CAAAA,mBAAAA,EAAAA;oBAAoBG,IAAMA,EAAAA,IAAAA;AACzB,oBAAA,QAAA,gBAAAM,cAACM,CAAAA,yBAAAA,EAAAA;wBAAaT,GAAKA,EAAAA,GAAAA;wBAAKU,GAAKX,EAAAA;;;;;;AAMzC;;;;"}

package/dist/admin/components/AssetCard/AudioAssetCard.mjs

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box, CardAsset, Flex } from '@strapi/design-system';
+import { styled } from 'styled-components';
+import { AssetCardBase } from './AssetCardBase.mjs';
+import { AudioPreview } from './AudioPreview.mjs';
+
+const AudioPreviewWrapper = styled(Box)`
+  canvas,
+  audio {
+    display: block;
+    max-width: 100%;
+    max-height: ${({ size })=>size === 'M' ? 16.4 : 8.8}rem;
+  }
+`;
+const AudioAssetCard = ({ name, url, size = 'M', selected = false, ...restProps })=>{
+    return /*#__PURE__*/ jsx(AssetCardBase, {
+        name: name,
+        selected: selected,
+        ...restProps,
+        variant: "Audio",
+        children: /*#__PURE__*/ jsx(CardAsset, {
+            size: size,
+            children: /*#__PURE__*/ jsx(Flex, {
+                alignItems: "center",
+                children: /*#__PURE__*/ jsx(AudioPreviewWrapper, {
+                    size: size,
+                    children: /*#__PURE__*/ jsx(AudioPreview, {
+                        url: url,
+                        alt: name
+                    })
+                })
+            })
+        })
+    });
+};
+
+export { AudioAssetCard };
+//# sourceMappingURL=AudioAssetCard.mjs.map

package/dist/admin/components/AssetCard/AudioAssetCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioAssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/AudioAssetCard.tsx"],"sourcesContent":["import { Box, CardAsset, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\nimport { AudioPreview } from './AudioPreview';\n\nconst AudioPreviewWrapper = styled(Box)`\n  canvas,\n  audio {\n    display: block;\n    max-width: 100%;\n    max-height: ${({ size }) => (size === 'M' ? 16.4 : 8.8)}rem;\n  }\n`;\n\ninterface AudioAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n  size?: 'S' | 'M';\n  url: string;\n}\n\nexport const AudioAssetCard = ({\n  name,\n  url,\n  size = 'M',\n  selected = false,\n  ...restProps\n}: AudioAssetCardProps) => {\n  return (\n    <AssetCardBase name={name} selected={selected} {...restProps} variant=\"Audio\">\n      <CardAsset size={size}>\n        <Flex alignItems=\"center\">\n          <AudioPreviewWrapper size={size}>\n            <AudioPreview url={url} alt={name} />\n          </AudioPreviewWrapper>\n        </Flex>\n      </CardAsset>\n    </AssetCardBase>\n  );\n};\n"],"names":["AudioPreviewWrapper","styled","Box","size","AudioAssetCard","name","url","selected","restProps","_jsx","AssetCardBase","variant","CardAsset","Flex","alignItems","AudioPreview","alt"],"mappings":";;;;;;AAMA,MAAMA,mBAAAA,GAAsBC,MAAOC,CAAAA,GAAAA,CAAI;;;;;gBAKvB,EAAE,CAAC,EAAEC,IAAI,EAAE,GAAMA,IAAS,KAAA,GAAA,GAAM,OAAO,GAAK,CAAA;;AAE5D,CAAC;AAOYC,MAAAA,cAAAA,GAAiB,CAAC,EAC7BC,IAAI,EACJC,GAAG,EACHH,IAAAA,GAAO,GAAG,EACVI,QAAAA,GAAW,KAAK,EAChB,GAAGC,SACiB,EAAA,GAAA;AACpB,IAAA,qBACEC,GAACC,CAAAA,aAAAA,EAAAA;QAAcL,IAAMA,EAAAA,IAAAA;QAAME,QAAUA,EAAAA,QAAAA;AAAW,QAAA,GAAGC,SAAS;QAAEG,OAAQ,EAAA,OAAA;AACpE,QAAA,QAAA,gBAAAF,GAACG,CAAAA,SAAAA,EAAAA;YAAUT,IAAMA,EAAAA,IAAAA;AACf,YAAA,QAAA,gBAAAM,GAACI,CAAAA,IAAAA,EAAAA;gBAAKC,UAAW,EAAA,QAAA;AACf,gBAAA,QAAA,gBAAAL,GAACT,CAAAA,mBAAAA,EAAAA;oBAAoBG,IAAMA,EAAAA,IAAAA;AACzB,oBAAA,QAAA,gBAAAM,GAACM,CAAAA,YAAAA,EAAAA;wBAAaT,GAAKA,EAAAA,GAAAA;wBAAKU,GAAKX,EAAAA;;;;;;AAMzC;;;;"}

package/dist/admin/components/AssetCard/AudioPreview.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+
+const AudioPreview = ({ url, alt })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("audio", {
+            controls: true,
+            src: url,
+            children: alt
+        })
+    });
+};
+
+exports.AudioPreview = AudioPreview;
+//# sourceMappingURL=AudioPreview.js.map

package/dist/admin/components/AssetCard/AudioPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPreview.js","sources":["../../../../admin/src/components/AssetCard/AudioPreview.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/media-has-caption */\nimport { Box } from '@strapi/design-system';\n\ninterface AudioPreviewProps {\n  alt: string;\n  url: string;\n}\n\nexport const AudioPreview = ({ url, alt }: AudioPreviewProps) => {\n  return (\n    <Box>\n      <audio controls src={url}>\n        {alt}\n      </audio>\n    </Box>\n  );\n};\n"],"names":["AudioPreview","url","alt","_jsx","Box","audio","controls","src"],"mappings":";;;;;MAQaA,YAAe,GAAA,CAAC,EAAEC,GAAG,EAAEC,GAAG,EAAqB,GAAA;AAC1D,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,cAACE,CAAAA,OAAAA,EAAAA;YAAMC,QAAQ,EAAA,IAAA;YAACC,GAAKN,EAAAA,GAAAA;AAClBC,YAAAA,QAAAA,EAAAA;;;AAIT;;;;"}

package/dist/admin/components/AssetCard/AudioPreview.mjs

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '@strapi/design-system';
+
+const AudioPreview = ({ url, alt })=>{
+    return /*#__PURE__*/ jsx(Box, {
+        children: /*#__PURE__*/ jsx("audio", {
+            controls: true,
+            src: url,
+            children: alt
+        })
+    });
+};
+
+export { AudioPreview };
+//# sourceMappingURL=AudioPreview.mjs.map

package/dist/admin/components/AssetCard/AudioPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPreview.mjs","sources":["../../../../admin/src/components/AssetCard/AudioPreview.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/media-has-caption */\nimport { Box } from '@strapi/design-system';\n\ninterface AudioPreviewProps {\n  alt: string;\n  url: string;\n}\n\nexport const AudioPreview = ({ url, alt }: AudioPreviewProps) => {\n  return (\n    <Box>\n      <audio controls src={url}>\n        {alt}\n      </audio>\n    </Box>\n  );\n};\n"],"names":["AudioPreview","url","alt","_jsx","Box","audio","controls","src"],"mappings":";;;MAQaA,YAAe,GAAA,CAAC,EAAEC,GAAG,EAAEC,GAAG,EAAqB,GAAA;AAC1D,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,GAACE,CAAAA,OAAAA,EAAAA;YAAMC,QAAQ,EAAA,IAAA;YAACC,GAAKN,EAAAA,GAAAA;AAClBC,YAAAA,QAAAA,EAAAA;;;AAIT;;;;"}

package/dist/admin/components/AssetCard/DocAssetCard.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var AssetCardBase = require('./AssetCardBase.js');
+
+const CardAsset = styledComponents.styled(designSystem.Flex)`
+  border-radius: ${({ theme })=>theme.borderRadius} ${({ theme })=>theme.borderRadius} 0 0;
+  background: linear-gradient(
+    180deg,
+    ${({ theme })=>theme.colors.neutral0} 0%,
+    ${({ theme })=>theme.colors.neutral100} 121.48%
+  );
+`;
+const DocAssetCard = ({ name, extension, size = 'M', selected = false, ...restProps })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsx(AssetCardBase.AssetCardBase, {
+        name: name,
+        extension: extension,
+        selected: selected,
+        ...restProps,
+        variant: "Doc",
+        children: /*#__PURE__*/ jsxRuntime.jsx(CardAsset, {
+            width: "100%",
+            height: size === 'S' ? `8.8rem` : `16.4rem`,
+            justifyContent: "center",
+            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                gap: 2,
+                direction: "column",
+                alignItems: "center",
+                children: [
+                    extension === 'pdf' ? /*#__PURE__*/ jsxRuntime.jsx(icons.FilePdf, {
+                        "aria-label": name,
+                        fill: "neutral500",
+                        width: 24,
+                        height: 24
+                    }) : /*#__PURE__*/ jsxRuntime.jsx(icons.File, {
+                        "aria-label": name,
+                        fill: "neutral500",
+                        width: 24,
+                        height: 24
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        textColor: "neutral500",
+                        variant: "pi",
+                        children: formatMessage({
+                            id: 'noPreview',
+                            defaultMessage: 'No preview available'
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+
+exports.DocAssetCard = DocAssetCard;
+//# sourceMappingURL=DocAssetCard.js.map