npm - @chayns-components/core - Versions diffs - 5.4.17 → 5.4.19 - Mend

@chayns-components/core 5.4.17 → 5.4.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/lib/cjs/components/grouped-image/GroupedImage.js CHANGED Viewed

@@ -11,7 +11,7 @@ var _uuid = require("../../hooks/uuid");
 var _SecondImageClipPath = _interopRequireDefault(require("./clip-paths/SecondImageClipPath"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';
-const IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale|crop|shortedgescale)|[whsbd]\d+)$/i;
+const IMAGE_SERVICE_PARAM_PATTERN = /^(?:[whsbd]\d+|f(?:webp|avif|json|none)|c(?:c|f)|m(?:cr|sd|ct|pd|cv))$/i;
 const getGroupedImageDisplayUrl = (url, size) => {
   try {
     const urlObject = new URL(url);
@@ -26,11 +26,17 @@ const getGroupedImageDisplayUrl = (url, size) => {
     const extensionIndex = fileName.lastIndexOf('.');
     const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';
     const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;
-    const parameterSegment = fileBaseName.split('_').pop();
+    const parameterSegment = fileBaseName.split('_').pop() ?? '';
     const hasImageServiceParameters = Boolean(parameterSegment && parameterSegment !== fileBaseName && parameterSegment.split('-').every(parameter => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)));
-    const normalizedFileBaseName = hasImageServiceParameters ? fileBaseName.slice(0, fileBaseName.lastIndexOf('_')) : fileBaseName;
     const normalizedSize = Math.max(1, Math.round(size));
-    pathSegments.push(`${normalizedFileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`);
+    if (hasImageServiceParameters) {
+      const fileBaseNameWithoutParams = fileBaseName.slice(0, fileBaseName.lastIndexOf('_'));
+      const preservedParams = parameterSegment.split('-').filter(p => !/^[whs]\d+$/i.test(p));
+      const newParams = [...preservedParams, `w${normalizedSize}`, `h${normalizedSize}`];
+      pathSegments.push(`${fileBaseNameWithoutParams}_${newParams.join('-')}${extension}`);
+    } else {
+      pathSegments.push(`${fileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`);
+    }
     urlObject.pathname = pathSegments.join('/');
     return urlObject.toString();
   } catch {

package/lib/cjs/components/grouped-image/GroupedImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireDefault","require","_GroupedImage","_CareOfClipPath","_uuid","_SecondImageClipPath","e","__esModule","default","GROUPED_IMAGE_SERVICE_ORIGIN","IMAGE_SERVICE_PARAM_PATTERN","getGroupedImageDisplayUrl","url","size","urlObject","URL","origin","pathSegments","pathname","split","fileName","pop","extensionIndex","lastIndexOf","extension","slice","fileBaseName","parameterSegment","hasImageServiceParameters","Boolean","every","parameter","test","normalizedFileBaseName","normalizedSize","Math","max","round","push","join","toString","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","hasCornerElement","hasMultipleImages","length","uuid","useUuid","cornerImageDisplayUrl","undefined","imageElements","map","src","index","createElement","StyledGroupImageElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","key","width","viewBox","xmlns","preserveAspectRatio","alt","onError","event","StyledGroupedImage","$height","imageFactors","StyledCornerImage","StyledCornerElement","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent } from 'react';\nimport {\n StyledCornerElement,\n StyledCornerImage,\n StyledGroupedImage,\n StyledGroupImageElement,\n} from './GroupedImage.styles';\nimport CareOfClipPath from './clip-paths/CareOfClipPath';\nimport { useUuid } from '../../hooks/uuid';\nimport SecondImageClipPath from './clip-paths/SecondImageClipPath';\n\nconst GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';\nconst IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale\|crop\|shortedgescale)\|[whsbd]\\d+)$/i;\n\ninterface GroupedImageProps {\n /*\n Optional image to display in the bottom right corner of the grouped image.\n /\n cornerImage?: string;\n /\n Height of the grouped image container.\n /\n height?: number;\n /\n Background for the single images.\n /\n imageBackground?: CSSProperties['background'];\n /\n Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n /\n images: string[];\n /\n Optional click handler for the grouped image.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Whether to prevent the background of the images from being set.\n /\n shouldPreventBackground?: boolean;\n /\n Whether to show the images in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Optional Element to display in the right corner of the image\n /\n cornerElement?: ReactNode;\n /\n Optional handler for image load errors.\n */\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n}\n\nconst getGroupedImageDisplayUrl = (url: string, size: number): string => {\n try {\n const urlObject = new URL(url);\n\n if (urlObject.origin !== GROUPED_IMAGE_SERVICE_ORIGIN) {\n return url;\n }\n\n const pathSegments = urlObject.pathname.split('/');\n const fileName = pathSegments.pop();\n\n if (!fileName) {\n return url;\n }\n\n const extensionIndex = fileName.lastIndexOf('.');\n const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n const parameterSegment = fileBaseName.split('_').pop();\n const hasImageServiceParameters = Boolean(\n parameterSegment &&\n parameterSegment !== fileBaseName &&\n parameterSegment\n .split('-')\n .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)),\n );\n const normalizedFileBaseName = hasImageServiceParameters\n ? fileBaseName.slice(0, fileBaseName.lastIndexOf('_'))\n : fileBaseName;\n const normalizedSize = Math.max(1, Math.round(size));\n\n pathSegments.push(\n `${normalizedFileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`,\n );\n urlObject.pathname = pathSegments.join('/');\n\n return urlObject.toString();\n } catch {\n return url;\n }\n};\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n cornerImage,\n height = 40,\n imageBackground,\n images,\n onClick,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n cornerElement,\n onImageError,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasCornerElement = Boolean(cornerElement);\n const hasMultipleImages = images.length > 1;\n const uuid = useUuid();\n const cornerImageDisplayUrl = cornerImage\n ? getGroupedImageDisplayUrl(cornerImage, height)\n : undefined;\n\n const imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\n $isSecondImage={index === 1}\n $hasCornerImage={hasCornerImage}\n $hasMultipleImages={hasMultipleImages}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n $uuid={uuid}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 40 40\"\n xmlns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid slice\"\n >\n <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={getGroupedImageDisplayUrl(src, height)}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage onClick={onClick} $height={height}>\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\n src={cornerImageDisplayUrl}\n key=\"corner-image\"\n />\n )}\n {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n </StyledGroupedImage>\n );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"GroupedImage.js","names":["_react","_interopRequireDefault","require","_GroupedImage","_CareOfClipPath","_uuid","_SecondImageClipPath","e","__esModule","default","GROUPED_IMAGE_SERVICE_ORIGIN","IMAGE_SERVICE_PARAM_PATTERN","getGroupedImageDisplayUrl","url","size","urlObject","URL","origin","pathSegments","pathname","split","fileName","pop","extensionIndex","lastIndexOf","extension","slice","fileBaseName","parameterSegment","hasImageServiceParameters","Boolean","every","parameter","test","normalizedSize","Math","max","round","fileBaseNameWithoutParams","preservedParams","filter","p","newParams","push","join","toString","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","hasCornerElement","hasMultipleImages","length","uuid","useUuid","cornerImageDisplayUrl","undefined","imageElements","map","src","index","createElement","StyledGroupImageElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","key","width","viewBox","xmlns","preserveAspectRatio","alt","onError","event","StyledGroupedImage","$height","imageFactors","StyledCornerImage","StyledCornerElement","displayName","_default","exports"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent } from 'react';\nimport {\n StyledCornerElement,\n StyledCornerImage,\n StyledGroupedImage,\n StyledGroupImageElement,\n} from './GroupedImage.styles';\nimport CareOfClipPath from './clip-paths/CareOfClipPath';\nimport { useUuid } from '../../hooks/uuid';\nimport SecondImageClipPath from './clip-paths/SecondImageClipPath';\n\nconst GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';\nconst IMAGE_SERVICE_PARAM_PATTERN =\n /^(?:[whsbd]\\d+\|f(?:webp\|avif\|json\|none)\|c(?:c\|f)\|m(?:cr\|sd\|ct\|pd\|cv))$/i;\n\ninterface GroupedImageProps {\n /*\n Optional image to display in the bottom right corner of the grouped image.\n /\n cornerImage?: string;\n /\n Height of the grouped image container.\n /\n height?: number;\n /\n Background for the single images.\n /\n imageBackground?: CSSProperties['background'];\n /\n Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n /\n images: string[];\n /\n Optional click handler for the grouped image.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Whether to prevent the background of the images from being set.\n /\n shouldPreventBackground?: boolean;\n /\n Whether to show the images in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Optional Element to display in the right corner of the image\n /\n cornerElement?: ReactNode;\n /\n Optional handler for image load errors.\n */\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n}\n\nconst getGroupedImageDisplayUrl = (url: string, size: number): string => {\n try {\n const urlObject = new URL(url);\n\n if (urlObject.origin !== GROUPED_IMAGE_SERVICE_ORIGIN) {\n return url;\n }\n\n const pathSegments = urlObject.pathname.split('/');\n const fileName = pathSegments.pop();\n\n if (!fileName) {\n return url;\n }\n\n const extensionIndex = fileName.lastIndexOf('.');\n const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n const parameterSegment = fileBaseName.split('_').pop() ?? '';\n const hasImageServiceParameters = Boolean(\n parameterSegment &&\n parameterSegment !== fileBaseName &&\n parameterSegment\n .split('-')\n .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)),\n );\n const normalizedSize = Math.max(1, Math.round(size));\n\n if (hasImageServiceParameters) {\n const fileBaseNameWithoutParams = fileBaseName.slice(0, fileBaseName.lastIndexOf('_'));\n const preservedParams = parameterSegment\n .split('-')\n .filter((p) => !/^[whs]\\d+$/i.test(p));\n const newParams = [...preservedParams, `w${normalizedSize}`, `h${normalizedSize}`];\n pathSegments.push(`${fileBaseNameWithoutParams}_${newParams.join('-')}${extension}`);\n } else {\n pathSegments.push(`${fileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`);\n }\n urlObject.pathname = pathSegments.join('/');\n\n return urlObject.toString();\n } catch {\n return url;\n }\n};\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n cornerImage,\n height = 40,\n imageBackground,\n images,\n onClick,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n cornerElement,\n onImageError,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasCornerElement = Boolean(cornerElement);\n const hasMultipleImages = images.length > 1;\n const uuid = useUuid();\n const cornerImageDisplayUrl = cornerImage\n ? getGroupedImageDisplayUrl(cornerImage, height)\n : undefined;\n\n const imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\n $isSecondImage={index === 1}\n $hasCornerImage={hasCornerImage}\n $hasMultipleImages={hasMultipleImages}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n $uuid={uuid}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 40 40\"\n xmlns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid slice\"\n >\n <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={getGroupedImageDisplayUrl(src, height)}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage onClick={onClick} $height={height}>\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\n src={cornerImageDisplayUrl}\n key=\"corner-image\"\n />\n )}\n {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n </StyledGroupedImage>\n );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/grouped-image/GroupedImage.js CHANGED Viewed

@@ -4,7 +4,7 @@ import CareOfClipPath from './clip-paths/CareOfClipPath';
 import { useUuid } from '../../hooks/uuid';
 import SecondImageClipPath from './clip-paths/SecondImageClipPath';
 const GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';
-const IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale|crop|shortedgescale)|[whsbd]\d+)$/i;
+const IMAGE_SERVICE_PARAM_PATTERN = /^(?:[whsbd]\d+|f(?:webp|avif|json|none)|c(?:c|f)|m(?:cr|sd|ct|pd|cv))$/i;
 const getGroupedImageDisplayUrl = (url, size) => {
   try {
     const urlObject = new URL(url);
@@ -19,11 +19,17 @@ const getGroupedImageDisplayUrl = (url, size) => {
     const extensionIndex = fileName.lastIndexOf('.');
     const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';
     const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;
-    const parameterSegment = fileBaseName.split('_').pop();
+    const parameterSegment = fileBaseName.split('_').pop() ?? '';
     const hasImageServiceParameters = Boolean(parameterSegment && parameterSegment !== fileBaseName && parameterSegment.split('-').every(parameter => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)));
-    const normalizedFileBaseName = hasImageServiceParameters ? fileBaseName.slice(0, fileBaseName.lastIndexOf('_')) : fileBaseName;
     const normalizedSize = Math.max(1, Math.round(size));
-    pathSegments.push(`${normalizedFileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`);
+    if (hasImageServiceParameters) {
+      const fileBaseNameWithoutParams = fileBaseName.slice(0, fileBaseName.lastIndexOf('_'));
+      const preservedParams = parameterSegment.split('-').filter(p => !/^[whs]\d+$/i.test(p));
+      const newParams = [...preservedParams, `w${normalizedSize}`, `h${normalizedSize}`];
+      pathSegments.push(`${fileBaseNameWithoutParams}_${newParams.join('-')}${extension}`);
+    } else {
+      pathSegments.push(`${fileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`);
+    }
     urlObject.pathname = pathSegments.join('/');
     return urlObject.toString();
   } catch {

package/lib/esm/components/grouped-image/GroupedImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupedImage.js","names":["React","StyledCornerElement","StyledCornerImage","StyledGroupedImage","StyledGroupImageElement","CareOfClipPath","useUuid","SecondImageClipPath","GROUPED_IMAGE_SERVICE_ORIGIN","IMAGE_SERVICE_PARAM_PATTERN","getGroupedImageDisplayUrl","url","size","urlObject","URL","origin","pathSegments","pathname","split","fileName","pop","extensionIndex","lastIndexOf","extension","slice","fileBaseName","parameterSegment","hasImageServiceParameters","Boolean","every","parameter","test","normalizedFileBaseName","normalizedSize","Math","max","round","push","join","toString","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","hasCornerElement","hasMultipleImages","length","uuid","cornerImageDisplayUrl","undefined","imageElements","map","src","index","createElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","key","width","viewBox","xmlns","preserveAspectRatio","alt","onError","event","$height","imageFactors","displayName"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent } from 'react';\nimport {\n StyledCornerElement,\n StyledCornerImage,\n StyledGroupedImage,\n StyledGroupImageElement,\n} from './GroupedImage.styles';\nimport CareOfClipPath from './clip-paths/CareOfClipPath';\nimport { useUuid } from '../../hooks/uuid';\nimport SecondImageClipPath from './clip-paths/SecondImageClipPath';\n\nconst GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';\nconst IMAGE_SERVICE_PARAM_PATTERN = /^(?:m(?:scale\|crop\|shortedgescale)\|[whsbd]\\d+)$/i;\n\ninterface GroupedImageProps {\n /*\n Optional image to display in the bottom right corner of the grouped image.\n /\n cornerImage?: string;\n /\n Height of the grouped image container.\n /\n height?: number;\n /\n Background for the single images.\n /\n imageBackground?: CSSProperties['background'];\n /\n Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n /\n images: string[];\n /\n Optional click handler for the grouped image.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Whether to prevent the background of the images from being set.\n /\n shouldPreventBackground?: boolean;\n /\n Whether to show the images in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Optional Element to display in the right corner of the image\n /\n cornerElement?: ReactNode;\n /\n Optional handler for image load errors.\n */\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n}\n\nconst getGroupedImageDisplayUrl = (url: string, size: number): string => {\n try {\n const urlObject = new URL(url);\n\n if (urlObject.origin !== GROUPED_IMAGE_SERVICE_ORIGIN) {\n return url;\n }\n\n const pathSegments = urlObject.pathname.split('/');\n const fileName = pathSegments.pop();\n\n if (!fileName) {\n return url;\n }\n\n const extensionIndex = fileName.lastIndexOf('.');\n const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n const parameterSegment = fileBaseName.split('_').pop();\n const hasImageServiceParameters = Boolean(\n parameterSegment &&\n parameterSegment !== fileBaseName &&\n parameterSegment\n .split('-')\n .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)),\n );\n const normalizedFileBaseName = hasImageServiceParameters\n ? fileBaseName.slice(0, fileBaseName.lastIndexOf('_'))\n : fileBaseName;\n const normalizedSize = Math.max(1, Math.round(size));\n\n pathSegments.push(\n `${normalizedFileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`,\n );\n urlObject.pathname = pathSegments.join('/');\n\n return urlObject.toString();\n } catch {\n return url;\n }\n};\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n cornerImage,\n height = 40,\n imageBackground,\n images,\n onClick,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n cornerElement,\n onImageError,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasCornerElement = Boolean(cornerElement);\n const hasMultipleImages = images.length > 1;\n const uuid = useUuid();\n const cornerImageDisplayUrl = cornerImage\n ? getGroupedImageDisplayUrl(cornerImage, height)\n : undefined;\n\n const imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\n $isSecondImage={index === 1}\n $hasCornerImage={hasCornerImage}\n $hasMultipleImages={hasMultipleImages}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n $uuid={uuid}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 40 40\"\n xmlns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid slice\"\n >\n <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={getGroupedImageDisplayUrl(src, height)}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage onClick={onClick} $height={height}>\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\n src={cornerImageDisplayUrl}\n key=\"corner-image\"\n />\n )}\n {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n </StyledGroupedImage>\n );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"GroupedImage.js","names":["React","StyledCornerElement","StyledCornerImage","StyledGroupedImage","StyledGroupImageElement","CareOfClipPath","useUuid","SecondImageClipPath","GROUPED_IMAGE_SERVICE_ORIGIN","IMAGE_SERVICE_PARAM_PATTERN","getGroupedImageDisplayUrl","url","size","urlObject","URL","origin","pathSegments","pathname","split","fileName","pop","extensionIndex","lastIndexOf","extension","slice","fileBaseName","parameterSegment","hasImageServiceParameters","Boolean","every","parameter","test","normalizedSize","Math","max","round","fileBaseNameWithoutParams","preservedParams","filter","p","newParams","push","join","toString","GroupedImage","cornerImage","height","imageBackground","images","onClick","shouldPreventBackground","shouldShowRoundImage","cornerElement","onImageError","hasCornerImage","hasCornerElement","hasMultipleImages","length","uuid","cornerImageDisplayUrl","undefined","imageElements","map","src","index","createElement","$background","$isSecondImage","$hasCornerImage","$hasMultipleImages","$shouldPreventBackground","$shouldShowRoundImage","$uuid","key","width","viewBox","xmlns","preserveAspectRatio","alt","onError","event","$height","imageFactors","displayName"],"sources":["../../../../src/components/grouped-image/GroupedImage.tsx"],"sourcesContent":["import React, { CSSProperties, FC, MouseEventHandler, ReactNode, SyntheticEvent } from 'react';\nimport {\n StyledCornerElement,\n StyledCornerImage,\n StyledGroupedImage,\n StyledGroupImageElement,\n} from './GroupedImage.styles';\nimport CareOfClipPath from './clip-paths/CareOfClipPath';\nimport { useUuid } from '../../hooks/uuid';\nimport SecondImageClipPath from './clip-paths/SecondImageClipPath';\n\nconst GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';\nconst IMAGE_SERVICE_PARAM_PATTERN =\n /^(?:[whsbd]\\d+\|f(?:webp\|avif\|json\|none)\|c(?:c\|f)\|m(?:cr\|sd\|ct\|pd\|cv))$/i;\n\ninterface GroupedImageProps {\n /*\n Optional image to display in the bottom right corner of the grouped image.\n /\n cornerImage?: string;\n /\n Height of the grouped image container.\n /\n height?: number;\n /\n Background for the single images.\n /\n imageBackground?: CSSProperties['background'];\n /\n Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.\n /\n images: string[];\n /\n Optional click handler for the grouped image.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Whether to prevent the background of the images from being set.\n /\n shouldPreventBackground?: boolean;\n /\n Whether to show the images in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Optional Element to display in the right corner of the image\n /\n cornerElement?: ReactNode;\n /\n Optional handler for image load errors.\n */\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n}\n\nconst getGroupedImageDisplayUrl = (url: string, size: number): string => {\n try {\n const urlObject = new URL(url);\n\n if (urlObject.origin !== GROUPED_IMAGE_SERVICE_ORIGIN) {\n return url;\n }\n\n const pathSegments = urlObject.pathname.split('/');\n const fileName = pathSegments.pop();\n\n if (!fileName) {\n return url;\n }\n\n const extensionIndex = fileName.lastIndexOf('.');\n const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';\n const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;\n const parameterSegment = fileBaseName.split('_').pop() ?? '';\n const hasImageServiceParameters = Boolean(\n parameterSegment &&\n parameterSegment !== fileBaseName &&\n parameterSegment\n .split('-')\n .every((parameter) => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)),\n );\n const normalizedSize = Math.max(1, Math.round(size));\n\n if (hasImageServiceParameters) {\n const fileBaseNameWithoutParams = fileBaseName.slice(0, fileBaseName.lastIndexOf('_'));\n const preservedParams = parameterSegment\n .split('-')\n .filter((p) => !/^[whs]\\d+$/i.test(p));\n const newParams = [...preservedParams, `w${normalizedSize}`, `h${normalizedSize}`];\n pathSegments.push(`${fileBaseNameWithoutParams}_${newParams.join('-')}${extension}`);\n } else {\n pathSegments.push(`${fileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`);\n }\n urlObject.pathname = pathSegments.join('/');\n\n return urlObject.toString();\n } catch {\n return url;\n }\n};\n\nconst GroupedImage: FC<GroupedImageProps> = ({\n cornerImage,\n height = 40,\n imageBackground,\n images,\n onClick,\n shouldPreventBackground = false,\n shouldShowRoundImage = false,\n cornerElement,\n onImageError,\n}) => {\n const hasCornerImage = Boolean(cornerImage);\n const hasCornerElement = Boolean(cornerElement);\n const hasMultipleImages = images.length > 1;\n const uuid = useUuid();\n const cornerImageDisplayUrl = cornerImage\n ? getGroupedImageDisplayUrl(cornerImage, height)\n : undefined;\n\n const imageElements = images.slice(0, 2).map((src, index) => (\n <StyledGroupImageElement\n $background={imageBackground}\n $isSecondImage={index === 1}\n $hasCornerImage={hasCornerImage}\n $hasMultipleImages={hasMultipleImages}\n $shouldPreventBackground={shouldPreventBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n $uuid={uuid}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 40 40\"\n xmlns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid slice\"\n >\n <foreignObject width=\"40\" height=\"40\">\n <img\n alt={`image--${index}`}\n src={getGroupedImageDisplayUrl(src, height)}\n onError={(event) =>\n typeof onImageError === 'function' && onImageError(event, index)\n }\n />\n </foreignObject>\n </svg>\n </StyledGroupImageElement>\n ));\n\n return (\n <StyledGroupedImage onClick={onClick} $height={height}>\n {hasCornerImage && (\n <CareOfClipPath\n height={height}\n uuid={uuid}\n imageFactors={hasMultipleImages ? [0.76, 0.8] : [1]}\n />\n )}\n {hasMultipleImages && (\n <SecondImageClipPath\n height={height}\n uuid={uuid}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n\n {imageElements}\n\n {hasCornerImage && (\n <StyledCornerImage\n $background={imageBackground}\n $shouldPreventBackground={shouldPreventBackground}\n $hasMultipleImages={hasMultipleImages}\n src={cornerImageDisplayUrl}\n key=\"corner-image\"\n />\n )}\n {hasCornerElement && <StyledCornerElement>{cornerElement}</StyledCornerElement>}\n </StyledGroupedImage>\n );\n};\n\nGroupedImage.displayName = 'GroupedImage';\n\nexport default GroupedImage;\n"],"mappings":"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","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.4.17",
+    "version": "5.4.19",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -52,26 +52,26 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.28.6",
-        "@babel/core": "^7.29.0",
-        "@babel/preset-env": "^7.29.5",
-        "@babel/preset-react": "^7.28.5",
-        "@babel/preset-typescript": "^7.28.5",
-        "@types/react": "^18.3.28",
+        "@babel/cli": "^7.29.7",
+        "@babel/core": "^7.29.7",
+        "@babel/preset-env": "^7.29.7",
+        "@babel/preset-react": "^7.29.7",
+        "@babel/preset-typescript": "^7.29.7",
+        "@types/react": "^18.3.31",
         "@types/react-dom": "^18.3.7",
         "@types/styled-components": "^5.1.36",
         "@types/uuid": "^10.0.0",
         "babel-loader": "^9.2.1",
-        "chayns-api": "^2.6.14",
+        "chayns-api": "^2.6.19",
         "cross-env": "^7.0.3",
         "lerna": "^8.2.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "styled-components": "^6.3.9",
+        "styled-components": "^6.4.3",
         "typescript": "^5.9.3"
     },
     "dependencies": {
-        "@chayns-components/textstring": "^5.4.17",
+        "@chayns-components/textstring": "^5.4.19",
         "@chayns/colors": "^2.0.2",
         "@chayns/uac-service": "~0.0.62",
         "clsx": "^2.1.1",
@@ -88,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "888dd9f3f391c7b61b239825421f1163bcccf423"
+    "gitHead": "0bf50412384ee8d636c9d7192c8fc6fef2c1d578"
 }