@jetshop/ui 5.13.10-0 → 5.14.0-alpha.49df897e

package/Image/B2BImage.d.ts

@@ -1,50 +1,50 @@
-import React, { PropsWithChildren } from 'react';
-import { ProductImageSize } from '@jetshop/core/types';
-export declare type ImageSrcType = string | ProductImageSize[];
-export declare type BreakpointValues = string[];
-export declare type ImageBreakpointSize = number | string;
-export declare type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
-export declare type AspectRatio = string | number;
-export declare type Gravity = 'north' | 'south' | 'west' | 'east' | 'centre' | 'smart';
-export declare const transparentDataImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
-interface ImageParameters {
-    /** The image src
-     * Also accepts an array of objects with `url` keys (deprecated image field)
-     */
-    src: ImageSrcType;
-    /**
-     * Whether to crop the image instead of resizing it when aspect ratio is provided
-     * @default false
-     */
-    crop?: boolean;
-    gravity?: Gravity;
-    quality?: number;
-    /** An array of image sizes, will be mapped against breakpoints.
-     * @see https://docs.dev.jetshop.se/ui/image#the-sizes-prop
-     */
-    sizes: ImageBreakpointSizes;
-    /**
-     * The aspect ratio of the image
-     * If unknown, use null to preserve original aspect ratio
-     */
-    aspect?: string;
-    critical?: boolean;
-    modifiedDate?: string;
-}
-interface ImageProps extends ImageParameters {
-    /** Whether or not to use `background-size: cover` */
-    cover?: boolean;
-    error?: (args: any) => React.ReactElement<any>;
-    alt?: string;
-    title?: string;
-    /**
-     * Useful for banner images. Sets the following CSS automatically:
-     * object-fit: cover
-     * padding-top: 0;
-     */
-    fillAvailableSpace?: boolean;
-    className?: string;
-    badges?: React.ReactElement<any>;
-}
-declare function B2BImage({ modifiedDate, ...props }: PropsWithChildren<ImageProps>): JSX.Element;
-export default B2BImage;
+import React, { PropsWithChildren } from 'react';
+import { ProductImageSize } from '@jetshop/core/types';
+export declare type ImageSrcType = string | ProductImageSize[];
+export declare type BreakpointValues = string[];
+export declare type ImageBreakpointSize = number | string;
+export declare type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
+export declare type AspectRatio = string | number;
+export declare type Gravity = 'north' | 'south' | 'west' | 'east' | 'centre' | 'smart';
+export declare const transparentDataImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+interface ImageParameters {
+    /** The image src
+     * Also accepts an array of objects with `url` keys (deprecated image field)
+     */
+    src: ImageSrcType;
+    /**
+     * Whether to crop the image instead of resizing it when aspect ratio is provided
+     * @default false
+     */
+    crop?: boolean;
+    gravity?: Gravity;
+    quality?: number;
+    /** An array of image sizes, will be mapped against breakpoints.
+     * @see https://docs.dev.jetshop.se/ui/image#the-sizes-prop
+     */
+    sizes: ImageBreakpointSizes;
+    /**
+     * The aspect ratio of the image
+     * If unknown, use null to preserve original aspect ratio
+     */
+    aspect?: string;
+    critical?: boolean;
+    modifiedDate?: string;
+}
+interface ImageProps extends ImageParameters {
+    /** Whether or not to use `background-size: cover` */
+    cover?: boolean;
+    error?: (args: any) => React.ReactElement<any>;
+    alt?: string;
+    title?: string;
+    /**
+     * Useful for banner images. Sets the following CSS automatically:
+     * object-fit: cover
+     * padding-top: 0;
+     */
+    fillAvailableSpace?: boolean;
+    className?: string;
+    badges?: React.ReactElement<any>;
+}
+declare function B2BImage({ modifiedDate, ...props }: PropsWithChildren<ImageProps>): JSX.Element;
+export default B2BImage;

package/Image/B2BImage.js

@@ -1,53 +1,53 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import Image from './BaseImage';
-import React from 'react';
-import { useConstructImage } from './useConstructImage';
-export const transparentDataImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
-function Error() {
-    return (React.createElement("div", { style: {
-            background: '#e2e2e2',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: `absolute`,
-            top: 0,
-            left: 0,
-            width: `100%`,
-            height: `100%`
-        } }, "Image not found"));
-}
-function B2BImage(_a) {
-    var { modifiedDate } = _a, props = __rest(_a, ["modifiedDate"]);
-    const { gravity, crop, src: originalSrc, sizes: sizesArray = [1], aspect, quality, critical } = props;
-    const { src, hasFalsySrc, lqip, sizes, srcset, webpSrcset } = useConstructImage({
-        gravity,
-        crop,
-        src: originalSrc,
-        sizes: sizesArray,
-        aspect,
-        quality,
-        critical,
-        modifiedDate,
-        breakpoints: {
-            xs: '20rem',
-            sm: '40rem',
-            md: '50rem',
-            lg: '64rem',
-            xl: '80rem'
-        },
-        baseUrl: ''
-    });
-    return (React.createElement(Image, Object.assign({}, props, { src: src, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: sizes, srcset: srcset, webpSrcset: webpSrcset, error: Error })));
-}
-export default B2BImage;
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import Image from './BaseImage';
+import React from 'react';
+import { useConstructImage } from './useConstructImage';
+export const transparentDataImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+function Error() {
+    return (React.createElement("div", { style: {
+            background: '#e2e2e2',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: `absolute`,
+            top: 0,
+            left: 0,
+            width: `100%`,
+            height: `100%`
+        } }, "Image not found"));
+}
+function B2BImage(_a) {
+    var { modifiedDate } = _a, props = __rest(_a, ["modifiedDate"]);
+    const { gravity, crop, src: originalSrc, sizes: sizesArray = [1], aspect, quality, critical } = props;
+    const { src, hasFalsySrc, lqip, sizes, srcset, webpSrcset } = useConstructImage({
+        gravity,
+        crop,
+        src: originalSrc,
+        sizes: sizesArray,
+        aspect,
+        quality,
+        critical,
+        modifiedDate,
+        breakpoints: {
+            xs: '20rem',
+            sm: '40rem',
+            md: '50rem',
+            lg: '64rem',
+            xl: '80rem'
+        },
+        baseUrl: ''
+    });
+    return (React.createElement(Image, Object.assign({}, props, { src: src, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: sizes, srcset: srcset, webpSrcset: webpSrcset, error: Error })));
+}
+export default B2BImage;
 //# sourceMappingURL=B2BImage.js.map

package/Image/BaseImage.d.ts

@@ -1,39 +1,39 @@
-import * as React from 'react';
-import { ProductImageSize } from '@jetshop/core/types';
-export declare type ImageSrcType = string | ProductImageSize[];
-export declare type BreakpointValues = string[];
-export declare type ImageBreakpointSize = number | string;
-export declare type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
-export declare type AspectRatio = string | number;
-export declare const transparentDataImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
-export interface ImageParameters {
-    src: string | boolean;
-    sizes: string;
-    hasFalsySrc: boolean;
-    srcset: string;
-    webpSrcset: string;
-    lqip: string;
-    /**
-     * The aspect ratio of the image
-     * If unknown, use null to preserve original aspect ratio
-     */
-    aspect?: string;
-    critical?: boolean;
-}
-export interface ImageProps extends ImageParameters {
-    /** Whether or not to use `background-size: cover` */
-    cover?: boolean;
-    error?: (args: any) => React.ReactElement<any>;
-    alt?: string;
-    title?: string;
-    /**
-     * Useful for banner images. Sets the following CSS automatically:
-     * object-fit: cover
-     * padding-top: 0;
-     */
-    fillAvailableSpace?: boolean;
-    className?: string;
-    badges?: React.ReactElement<any>;
-}
-declare const Image: React.FC<ImageProps>;
-export default Image;
+import * as React from 'react';
+import { ProductImageSize } from '@jetshop/core/types';
+export declare type ImageSrcType = string | ProductImageSize[];
+export declare type BreakpointValues = string[];
+export declare type ImageBreakpointSize = number | string;
+export declare type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
+export declare type AspectRatio = string | number;
+export declare const transparentDataImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+export interface ImageParameters {
+    src: string | boolean;
+    sizes: string;
+    hasFalsySrc: boolean;
+    srcset: string;
+    webpSrcset: string;
+    lqip: string;
+    /**
+     * The aspect ratio of the image
+     * If unknown, use null to preserve original aspect ratio
+     */
+    aspect?: string;
+    critical?: boolean;
+}
+export interface ImageProps extends ImageParameters {
+    /** Whether or not to use `background-size: cover` */
+    cover?: boolean;
+    error?: (args: any) => React.ReactElement<any>;
+    alt?: string;
+    title?: string;
+    /**
+     * Useful for banner images. Sets the following CSS automatically:
+     * object-fit: cover
+     * padding-top: 0;
+     */
+    fillAvailableSpace?: boolean;
+    className?: string;
+    badges?: React.ReactElement<any>;
+}
+declare const Image: React.FC<ImageProps>;
+export default Image;