@jetshop/ui 0.0.11

package/Image/FlightImage.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ProductImageSize } from '@jetshop/flyght-core/types';
+export type ImageSrcType = string | ProductImageSize[];
+export type ImageBreakpointSize = number | string;
+export type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
+export type AspectRatio = string | number;
+export 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;
+    focalPointX?: number;
+    focalPointY?: number;
+}
+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 FlightImage(props: ImageProps): React.JSX.Element;
+export default FlightImage;

package/Image/FlightImage.js

@@ -0,0 +1,59 @@
+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 { useShopConfig } from '@jetshop/flyght-core/hooks/useShopConfig';
+import Image from './BaseImage';
+import React from 'react';
+import t from '@jetshop/flyght-intl';
+import { useConstructImage } from './useConstructImage';
+import ChannelContext from '@jetshop/flyght-core/components/ChannelContext';
+import { Below } from '../Breakpoints';
+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%`
+        } }, t('Image Not Found')));
+}
+function FlightImage(props) {
+    const { gravity, crop, src: originalSrc, sizes: sizesArray = [1], aspect, quality, critical, modifiedDate, error: ErrorComp = Error, focalPointX, focalPointY } = props, rest = __rest(props, ["gravity", "crop", "src", "sizes", "aspect", "quality", "critical", "modifiedDate", "error", "focalPointX", "focalPointY"]);
+    const { theme: { breakpoints }, useMobileImageSizes = false } = useShopConfig();
+    // The baseUrl will change based on the currently-selected channel.
+    // We need it to correctly construct the image url
+    const { selectedChannel } = React.useContext(ChannelContext);
+    const baseUrl = (selectedChannel === null || selectedChannel === void 0 ? void 0 : selectedChannel.imageUrl)
+        ? String(selectedChannel.imageUrl)
+        : null;
+    const { src, hasFalsySrc, lqip, sizes, sizesMobile, srcset, webpSrcset, srcsetMobile, webpSrcsetMobile } = useConstructImage({
+        gravity,
+        crop,
+        src: originalSrc,
+        sizes: sizesArray,
+        aspect,
+        quality,
+        critical,
+        modifiedDate,
+        breakpoints,
+        baseUrl,
+        focalPointX,
+        focalPointY
+    });
+    return (React.createElement(Below, { breakpoint: 'sm' }, (matches) => (React.createElement(Image, Object.assign({}, rest, { critical: critical, aspect: aspect, src: hasFalsySrc && typeof originalSrc === 'boolean' ? false : src, hasFalsySrc: hasFalsySrc, lqip: lqip, sizes: matches && useMobileImageSizes ? sizesMobile : sizes, srcset: matches && useMobileImageSizes ? srcsetMobile : srcset, webpSrcset: matches && useMobileImageSizes ? webpSrcsetMobile : webpSrcset, error: ErrorComp })))));
+}
+export default FlightImage;
+//# sourceMappingURL=FlightImage.js.map

package/Image/FlightImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlightImage.js","sourceRoot":"","sources":["FlightImage.tsx"],"names":[],"mappings":"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"}

package/Image/FlightImage.test.js

@@ -0,0 +1,277 @@
+import { ChannelProvider } from '@jetshop/flyght-core/components/ChannelContext';
+import t from '@jetshop/flyght-intl';
+import testImage from '@jetshop/flyght-ui/test-utils/fixtures/test-image.png';
+import { fireEvent, queryByText, render } from '@testing-library/react';
+import React from 'react';
+import { useInView } from 'react-intersection-observer';
+import Image from './FlightImage';
+import { ChannelHandler } from '@jetshop/flyght-core/ChannelHandler/ChannelHandler';
+import { selectedChannel, channels } from '@jetshop/flyght-core/test-utils/variables';
+import { ConfigProvider } from '@jetshop/flyght-core/components/ConfigProvider';
+import mockShopConfig from '@jetshop/flyght-core/test-utils/mockShopConfig';
+
+// Mock intersection observer so we can always return true/false
+jest.mock('react-intersection-observer');
+// Suppress warnings from translations
+jest.mock('@jetshop/flyght-intl');
+t.mockImplementation((t) => t);
+
+// browser mocks
+global.IntersectionObserver = jest.fn(function () {
+  this.observe = jest.fn();
+  this.unobserve = jest.fn();
+  this.disconnect = jest.fn();
+});
+
+const transparent =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+
+global.__IN_SERVER__ = false;
+
+describe('Hooks image component', () => {
+  describe('on initial load', () => {
+    beforeAll(() => {
+      useInView.mockImplementation(() => [null, false]);
+    });
+    it('renders a lqip version of the image by default', () => {
+      const { placeholderImage } = setup();
+
+      const src = placeholderImage.getAttribute('src');
+
+      expect(src).toEqual(expect.stringContaining('sigma=2.5'));
+      expect(src).toEqual(expect.stringContaining('minampl=0.5'));
+    });
+
+    it('sets the lqip to the smallest of the calculated sizes', () => {
+      const { placeholderImage } = setup({ sizes: [0.5, 0.85, 1] });
+      // Should be 160
+      // The smallest breakpoint is 20rem, which is 360px.
+      // 0.5 x 360 = 160
+
+      const src = placeholderImage.getAttribute('src');
+
+      expect(src).toEqual(expect.stringContaining('width=160'));
+    });
+
+    it('does not render an lqip if critical is true', () => {
+      const { placeholderImage } = setup({ critical: true });
+
+      const src = placeholderImage.getAttribute('src');
+
+      // Sets the src to transaprent data image instead
+      expect(src).toEqual(expect.stringContaining('data:image'));
+    });
+
+    it('accepts sizes as pixel values', () => {
+      const { placeholderImage } = setup({ sizes: [123] });
+
+      const src = placeholderImage.getAttribute('src');
+
+      expect(src).toEqual(expect.stringContaining('width=123'));
+    });
+
+    it('sets opacity to 0.6 while image has not loaded', () => {
+      const { placeholderImage } = setup();
+
+      expect(placeholderImage).toHaveStyle('opacity: 0.6');
+    });
+  });
+
+  describe('sets the sizing method', () => {
+    it('to thumbnail if no aspect ratio is provided', () => {
+      const { placeholderImage } = setup();
+    });
+    it('to fit if an aspect ratio is provided', () => {
+      const { placeholderImage } = setup({ aspect: '1:1' });
+
+      expect(placeholderImage.getAttribute('src')).toEqual(
+        expect.stringContaining('&height=320')
+      );
+      expect(placeholderImage.getAttribute('src')).toEqual(
+        expect.stringContaining('&width=320')
+      );
+    });
+    it('to crop if crop prop is true', () => {
+      const { placeholderImage } = setup({ aspect: '1:1', crop: true });
+
+      expect(placeholderImage.getAttribute('src')).toEqual(
+        expect.stringContaining('&method=crop')
+      );
+    });
+    it('warns if gravity is provided without crop', () => {
+      console.warn = jest.fn();
+      setup({ aspect: '1:1', crop: false, gravity: 'north' });
+      expect(console.warn).toHaveBeenCalled();
+    });
+  });
+
+  describe('when image is in view', () => {
+    beforeAll(() => {
+      useInView.mockImplementation(() => [null, true]);
+    });
+
+    it('renders full image', () => {
+      const { image } = setup({
+        imageSrc: testImage
+      });
+
+      expect(image).toHaveAttribute('src', 'test-image.png');
+    });
+
+    it('applies the given alt as an aria-label', () => {
+      const { image } = setup({
+        alt: 'test alt'
+      });
+
+      expect(image).toHaveAttribute('alt', 'test alt');
+    });
+
+    it('defaults aspect to 1:1', () => {
+      const { imageContainer } = setup();
+
+      expect(imageContainer).toHaveStyle('padding-bottom : 100%');
+    });
+
+    it('sets aspect ratio using padding if aspect is passed', () => {
+      const { imageContainer } = setup({ aspect: '3:2' });
+
+      expect(imageContainer).toHaveStyle('padding-bottom : 66.6667%');
+    });
+
+    it('defaults to background-size contain', () => {
+      const { image } = setup();
+
+      expect(image).toHaveStyle('object-fit : contain');
+    });
+
+    it('sets background-size to cover if `cover` is passed', () => {
+      const { image } = setup({ cover: true });
+
+      expect(image).toHaveStyle('object-fit : cover');
+    });
+
+    it('sets up image to fill available space if `fillAvailableSpace` is passed', () => {
+      const { image } = setup({ fillAvailableSpace: true });
+
+      expect(image).toHaveStyle('object-fit : cover');
+      expect(image).toHaveStyle('padding-top : 0');
+    });
+
+    it('sets opacity to 1 when image loads', () => {
+      const { image } = setup();
+      fireEvent.load(image);
+
+      expect(image).toHaveStyle('opacity: 1');
+    });
+
+    it('fades lqip when image loads', () => {
+      const { image, placeholderImage } = setup();
+      fireEvent.load(image);
+
+      expect(placeholderImage).toHaveStyle('opacity: 0');
+    });
+
+    test('sets quality to quality prop', () => {
+      const { image } = setup({ quality: 1 });
+
+      expect(image.getAttribute('srcSet')).toEqual(
+        expect.stringContaining('&quality=1')
+      );
+    });
+  });
+
+  describe('when there is an image error', () => {
+    beforeAll(() => {
+      useInView.mockImplementation(() => [null, true]);
+    });
+
+    it('renders default error', () => {
+      const { image, getByText } = setup();
+      fireEvent.error(image);
+
+      expect(getByText('Image Not Found'));
+    });
+
+    it('renders error component', () => {
+      const { image, getByText, container } = setup({
+        error: () => <div>some error found</div>
+      });
+      fireEvent.error(image);
+
+      expect(getByText('some error found'));
+      expect(queryByText(container, 'Image Not Found')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when image url is falsy', () => {
+    it('renders a transparent background image when null', () => {
+      const { image } = setup({ falsySrc: true, imageSrc: null });
+
+      expect(image).toHaveAttribute(`src`, transparent);
+      expect(image).toHaveStyle('opacity : 1');
+    });
+    it('renders a transparent background image when undefined', () => {
+      const { image } = setup({ falsySrc: true, imageSrc: undefined });
+
+      expect(image).toHaveAttribute(`src`, transparent);
+      expect(image).toHaveStyle('opacity: 1');
+    });
+    it('renders nothing and warns if false', () => {
+      console.warn = jest.fn();
+      const { image } = setup({ falsySrc: true, imageSrc: false });
+
+      expect(image).not.toBeInTheDocument();
+      expect(console.warn).toHaveBeenCalled();
+    });
+  });
+
+  it('renders a webp and jpeg source', () => {
+    const { imageContainer } = setup();
+
+    const sources = imageContainer.querySelectorAll('source');
+    expect(sources.length).toBe(2);
+    expect(sources[0]).toHaveAttribute('type', 'image/webp');
+  });
+});
+
+function setup({
+  imageSrc,
+  falsySrc = false,
+  error,
+  alt,
+  sizes,
+  aspect,
+  cover,
+  ...rest
+} = {}) {
+  const channelHandler = new ChannelHandler({
+    selectedChannel,
+    channels
+  });
+  const utils = render(
+    <ChannelProvider channelHandler={channelHandler}>
+      <ConfigProvider config={mockShopConfig}>
+        <Image
+          src={falsySrc ? imageSrc : imageSrc || 'default.png'}
+          error={error}
+          alt={alt}
+          sizes={sizes}
+          aspect={aspect}
+          cover={cover}
+          {...rest}
+        />
+      </ConfigProvider>
+    </ChannelProvider>
+  );
+
+  return {
+    ...utils,
+    image: utils.container.querySelector('[data-flight-image] img'),
+    placeholderImage: utils.container.querySelector(
+      '[data-flight-image-placeholder] img'
+    ),
+    imageContainer: utils.container.querySelector(
+      '[data-flight-image-container]'
+    )
+  };
+}

package/Image/Image.d.ts

@@ -0,0 +1,2 @@
+export * from './FlightImage';
+export { default } from './FlightImage';

package/Image/Image.js

@@ -0,0 +1,3 @@
+export * from './FlightImage';
+export { default } from './FlightImage';
+//# sourceMappingURL=Image.js.map

package/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["Image.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/Image/index.d.ts

@@ -0,0 +1 @@
+export { default } from './FlightImage';

package/Image/index.js

@@ -0,0 +1,2 @@
+export { default } from './FlightImage';
+//# sourceMappingURL=index.js.map

package/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/Image/useConstructImage.d.ts

@@ -0,0 +1,49 @@
+import { ImageValue, ProductImageSize } from '@jetshop/flyght-core/types';
+type ImageSrcType = string | ProductImageSize[] | ImageValue;
+export type Gravity = 'north' | 'south' | 'west' | 'east' | 'centre' | 'smart';
+export type ImageBreakpointSize = number | string;
+export type ImageBreakpointSizes = ImageBreakpointSize | ImageBreakpointSize[];
+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;
+    breakpoints: Record<string, string>;
+    baseUrl: string;
+    focalPointX?: number;
+    focalPointY?: number;
+}
+/**
+ * Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
+ * Also generates a LQIP using query parameters, to display while the full image loads.
+ */
+export declare function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }: ImageParameters): {
+    srcset: string;
+    webpSrcset: string;
+    sizes: string;
+    sizesMobile: string;
+    lqip: string;
+    src: string;
+    hasFalsySrc: boolean;
+    srcsetMobile: string;
+    webpSrcsetMobile: string;
+};
+export {};

package/Image/useConstructImage.js

@@ -0,0 +1,122 @@
+import useWarningInDev from '@jetshop/flyght-core/hooks/useWarningInDev';
+import { getFullUrl } from './utils/getFullUrl';
+import { getImageWidths } from './utils/getImageWidths';
+import { getLargestSize } from './utils/getLargestSize';
+import { getLQIP } from './utils/getLQIP';
+import { getSizesMap } from './utils/getSizesMap';
+import { getSrcSetFromWidths } from './utils/getSrcSetFromWidths';
+import React from 'react';
+/**
+ * Dynamically constructs the query parameters used by ImageMagick to size the image appropriately.
+ * Also generates a LQIP using query parameters, to display while the full image loads.
+ */
+export function useConstructImage({ gravity, crop, src, sizes, aspect, critical, quality, modifiedDate, breakpoints, baseUrl, focalPointX, focalPointY }) {
+    // Warn if gravity was provided but crop was not
+    useWarningInDev(gravity && !crop, 'You have provided a gravity without setting crop to true. Your image will not be cropped, and the `gravity` prop will do nothing. Please remove the `gravity` prop.');
+    // Warn if the src is a falsy value
+    useWarningInDev(!!!src, 'You have provided a falsy value to the Image component. If you intentionally want to display a blank Image component, you may import `transparentDataImg` and use it for the src. Otherwise, this is probably a bug.');
+    /*
+      For backwards-compatibility (and dev convenience) reasons, we accept a
+      falsy `src` prop on Image. undefined | null will act just like the normal
+      Image component does, except that it will show a transparent image where
+      the image would normally load. This may be useful in cases where the end
+      user is lazy and wants to do this:
+  
+      const { imageSrc } = someDataRequest();
+      <Image src={imageSrc} />
+  
+      Where imageSrc may be undefined | null while the request is occurring. The
+      preferred method is to be more explicit:
+  
+      const {imageSrc, loading} = someDataRequest();
+      <Image src={loading ? transparentDataImg : imageSrc } />
+  
+      Therefore, whilst we will handle a null | undefined src, we will warn
+      against its usage in dev.
+    */
+    let hasFalsySrc = true;
+    let imageSrc = '';
+    if (Array.isArray(src)) {
+        // maintain support for deprecated image sizes array
+        hasFalsySrc = false;
+        imageSrc = getFullUrl(getLargestSize(src), baseUrl);
+    }
+    // When we have a string for the src
+    if (!!src && typeof src === 'string') {
+        hasFalsySrc = false;
+        imageSrc = getFullUrl(src, baseUrl);
+    }
+    if (!!src && typeof src === 'object' && src.value) {
+        hasFalsySrc = false;
+        imageSrc = getFullUrl(src.value, baseUrl);
+    }
+    // useMemo so this runs only if the image props change. It calculates the
+    // strings used for `sizes`, `srcset`, and the `lqip`
+    const { sizesMap, sizesMapMobile, srcset, lqip, webpSrcset, srcsetMobile, webpSrcsetMobile } = React.useMemo(() => {
+        if (hasFalsySrc) {
+            return {};
+        }
+        const widths = getImageWidths(breakpoints, sizes);
+        const mobileWidths = getImageWidths(breakpoints, sizes, true);
+        const srcSetFromWidths = ({ webp }) => getSrcSetFromWidths(imageSrc, widths, aspect, {
+            crop,
+            gravity,
+            quality,
+            webp,
+            focalPointX,
+            focalPointY
+        }, modifiedDate);
+        const mobileSrcSetFromWidths = ({ webp }) => getSrcSetFromWidths(imageSrc, mobileWidths, aspect, {
+            crop,
+            gravity,
+            quality,
+            webp,
+            focalPointX,
+            focalPointY
+        }, modifiedDate);
+        const srcset = srcSetFromWidths({ webp: false });
+        const webpSrcset = srcSetFromWidths({ webp: true });
+        const srcsetMobile = mobileSrcSetFromWidths({ webp: false });
+        const webpSrcsetMobile = mobileSrcSetFromWidths({ webp: true });
+        // If this is a critical image, don't calculate LQIP
+        const lqip = critical
+            ? null
+            : getLQIP(imageSrc, widths, aspect, crop, modifiedDate);
+        const sizesMap = getSizesMap(breakpoints, sizes);
+        const sizesMapMobile = getSizesMap(breakpoints, sizes, true);
+        return {
+            sizesMap,
+            sizesMapMobile,
+            srcset,
+            lqip,
+            webpSrcset,
+            srcsetMobile,
+            webpSrcsetMobile
+        };
+    }, [
+        aspect,
+        breakpoints,
+        crop,
+        gravity,
+        hasFalsySrc,
+        imageSrc,
+        quality,
+        sizes,
+        critical,
+        modifiedDate,
+        focalPointX,
+        focalPointY
+    ]);
+    return {
+        srcset,
+        webpSrcset,
+        sizes: sizesMap,
+        sizesMobile: sizesMapMobile,
+        lqip,
+        src: imageSrc,
+        hasFalsySrc,
+        srcsetMobile,
+        webpSrcsetMobile
+    };
+}
+//# sourceMappingURL=useConstructImage.js.map

package/Image/useConstructImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConstructImage.js","sourceRoot":"","sources":["useConstructImage.tsx"],"names":[],"mappings":"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"}

package/Image/utils/aspectRatioToFraction.d.ts

@@ -0,0 +1,2 @@
+import { AspectRatio } from '../Image';
+export declare const aspectRatioToFraction: (aspect: AspectRatio) => number;

package/Image/utils/aspectRatioToFraction.js

@@ -0,0 +1,11 @@
+export const aspectRatioToFraction = (aspect) => {
+    if (typeof aspect === 'string' && aspect.indexOf(':') > 0) {
+        const [a, b] = aspect.split(':');
+        return b / a;
+    }
+    else if (typeof aspect === 'number') {
+        return aspect;
+    }
+    throw new TypeError('Aspect ratio is not a Number or String with the format n:m');
+};
+//# sourceMappingURL=aspectRatioToFraction.js.map

package/Image/utils/aspectRatioToFraction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspectRatioToFraction.js","sourceRoot":"","sources":["aspectRatioToFraction.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,MAAmB,EAAE,EAAE;IAC3D,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QACzD,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAI,MAAM,CAAC,KAAK,CAAC,GAAG,CAAyB,CAAC;QAC1D,OAAO,CAAC,GAAG,CAAC,CAAC;KACd;SAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QACrC,OAAO,MAAM,CAAC;KACf;IACD,MAAM,IAAI,SAAS,CACjB,4DAA4D,CAC7D,CAAC;AACJ,CAAC,CAAC"}

package/Image/utils/getFullUrl.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Constructs the image url by combining the passed-in url with the selected channel
+ * @param url The image url
+ * @param baseUrl The baseUrl from the currently-selected channel
+ */
+export declare const getFullUrl: (url: string, baseUrl: string) => string;

package/Image/utils/getFullUrl.js

@@ -0,0 +1,18 @@
+/**
+ * Constructs the image url by combining the passed-in url with the selected channel
+ * @param url The image url
+ * @param baseUrl The baseUrl from the currently-selected channel
+ */
+export const getFullUrl = (url, baseUrl) => {
+    if (!baseUrl || !url) {
+        return url;
+    }
+    url = url.trim();
+    if (url.indexOf('/') === 0 &&
+        url.indexOf('//:') === -1 &&
+        url.indexOf('static/media') === -1) {
+        return baseUrl + url;
+    }
+    return url;
+};
+//# sourceMappingURL=getFullUrl.js.map

package/Image/utils/getFullUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFullUrl.js","sourceRoot":"","sources":["getFullUrl.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,OAAe,EAAE,EAAE;IACzD,IAAI,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE;QACpB,OAAO,GAAG,CAAC;KACZ;IACD,GAAG,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC;IACjB,IACE,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;QACtB,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACzB,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAClC;QACA,OAAO,OAAO,GAAG,GAAG,CAAC;KACtB;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC"}

package/Image/utils/getImageWidth.d.ts

@@ -0,0 +1 @@
+export declare const getImageWidth: (size: number | string, vw: number, pixelRatio: number) => number;

package/Image/utils/getImageWidth.js

@@ -0,0 +1,12 @@
+import { sizeToNumber } from './sizeToNumber';
+export const getImageWidth = (size = 1, vw, pixelRatio) => {
+    // Convert input size to fraction or px value
+    size = sizeToNumber(size);
+    // Size is in px
+    if (size > 2) {
+        return Math.round(size * pixelRatio);
+    }
+    // Size is a fraction
+    return Math.round(vw * size * pixelRatio);
+};
+//# sourceMappingURL=getImageWidth.js.map

package/Image/utils/getImageWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getImageWidth.js","sourceRoot":"","sources":["getImageWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,OAAwB,CAAC,EACzB,EAAU,EACV,UAAkB,EAClB,EAAE;IACF,6CAA6C;IAC7C,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAC1B,gBAAgB;IAChB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC;KACtC;IACD,qBAAqB;IACrB,OAAO,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,GAAG,UAAU,CAAC,CAAC;AAC5C,CAAC,CAAC"}