npm - @gravity-ui/page-constructor - Versions diffs - 6.9.1 → 6.10.0 - Mend

@gravity-ui/page-constructor 6.9.1 → 6.10.0

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 (35) hide show

package/build/cjs/blocks/CardLayout/schema.d.ts CHANGED Viewed

@@ -52,6 +52,25 @@ export declare const CardLayoutProps: {
                         type: string;
                         enum: string[];
                     };
+                    hide: {
+                        oneOf: ({
+                            type: string;
+                            properties?: undefined;
+                        } | {
+                            type: string;
+                            properties: {
+                                mobile: {
+                                    type: string;
+                                };
+                                tablet: {
+                                    type: string;
+                                };
+                                desktop: {
+                                    type: string;
+                                };
+                            };
+                        })[];
+                    };
                 };
                 optionName: string;
                 type: string;
@@ -89,6 +108,25 @@ export declare const CardLayoutProps: {
                         type: string;
                         enum: string[];
                     };
+                    hide: {
+                        oneOf: ({
+                            type: string;
+                            properties?: undefined;
+                        } | {
+                            type: string;
+                            properties: {
+                                mobile: {
+                                    type: string;
+                                };
+                                tablet: {
+                                    type: string;
+                                };
+                                desktop: {
+                                    type: string;
+                                };
+                            };
+                        })[];
+                    };
                 };
                 optionName: string;
                 type: string;
@@ -240,6 +278,25 @@ export declare const CardLayoutBlock: {
                             type: string;
                             enum: string[];
                         };
+                        hide: {
+                            oneOf: ({
+                                type: string;
+                                properties?: undefined;
+                            } | {
+                                type: string;
+                                properties: {
+                                    mobile: {
+                                        type: string;
+                                    };
+                                    tablet: {
+                                        type: string;
+                                    };
+                                    desktop: {
+                                        type: string;
+                                    };
+                                };
+                            })[];
+                        };
                     };
                     optionName: string;
                     type: string;
@@ -277,6 +334,25 @@ export declare const CardLayoutBlock: {
                             type: string;
                             enum: string[];
                         };
+                        hide: {
+                            oneOf: ({
+                                type: string;
+                                properties?: undefined;
+                            } | {
+                                type: string;
+                                properties: {
+                                    mobile: {
+                                        type: string;
+                                    };
+                                    tablet: {
+                                        type: string;
+                                    };
+                                    desktop: {
+                                        type: string;
+                                    };
+                                };
+                            })[];
+                        };
                     };
                     optionName: string;
                     type: string;

package/build/cjs/blocks/ContentLayout/schema.d.ts CHANGED Viewed

@@ -50,6 +50,25 @@ export declare const ContentLayoutBlock: {
                             type: string;
                             enum: string[];
                         };
+                        hide: {
+                            oneOf: ({
+                                type: string;
+                                properties?: undefined;
+                            } | {
+                                type: string;
+                                properties: {
+                                    mobile: {
+                                        type: string;
+                                    };
+                                    tablet: {
+                                        type: string;
+                                    };
+                                    desktop: {
+                                        type: string;
+                                    };
+                                };
+                            })[];
+                        };
                     };
                 } | {
                     optionName: string;
@@ -84,6 +103,25 @@ export declare const ContentLayoutBlock: {
                             type: string;
                             enum: string[];
                         };
+                        hide: {
+                            oneOf: ({
+                                type: string;
+                                properties?: undefined;
+                            } | {
+                                type: string;
+                                properties: {
+                                    mobile: {
+                                        type: string;
+                                    };
+                                    tablet: {
+                                        type: string;
+                                    };
+                                    desktop: {
+                                        type: string;
+                                    };
+                                };
+                            })[];
+                        };
                     };
                 })[];
             };
@@ -256,6 +294,25 @@ export declare const ContentLayoutBlock: {
                                 type: string;
                                 enum: string[];
                             };
+                            hide: {
+                                oneOf: ({
+                                    type: string;
+                                    properties?: undefined;
+                                } | {
+                                    type: string;
+                                    properties: {
+                                        mobile: {
+                                            type: string;
+                                        };
+                                        tablet: {
+                                            type: string;
+                                        };
+                                        desktop: {
+                                            type: string;
+                                        };
+                                    };
+                                })[];
+                            };
                         };
                     } | {
                         optionName: string;
@@ -290,6 +347,25 @@ export declare const ContentLayoutBlock: {
                                 type: string;
                                 enum: string[];
                             };
+                            hide: {
+                                oneOf: ({
+                                    type: string;
+                                    properties?: undefined;
+                                } | {
+                                    type: string;
+                                    properties: {
+                                        mobile: {
+                                            type: string;
+                                        };
+                                        tablet: {
+                                            type: string;
+                                        };
+                                        desktop: {
+                                            type: string;
+                                        };
+                                    };
+                                })[];
+                            };
                         };
                     })[];
                 };

package/build/cjs/components/BackgroundImage/BackgroundImage.js CHANGED Viewed

@@ -8,9 +8,9 @@ const Image_1 = tslib_1.__importDefault(require("../Image/Image.js"));
 exports.qaIdByDefault = 'background-image';
 const b = (0, utils_1.block)('storage-background-image');
 const BackgroundImage = (props) => {
-    const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
+    const { children, src, desktop, className, imageClassName, style, qa } = props;
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa || exports.qaIdByDefault);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), style: style, "data-qa": qa || exports.qaIdByDefault, children: [(src || desktop) && !hide && ((0, jsx_runtime_1.jsx)(Image_1.default, { ...props, className: b('img', imageClassName), qa: qaAttributes.image })), children && (0, jsx_runtime_1.jsx)("div", { className: b('container'), children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), style: style, "data-qa": qa || exports.qaIdByDefault, children: [(src || desktop) && ((0, jsx_runtime_1.jsx)(Image_1.default, { ...props, className: b('img', imageClassName), qa: qaAttributes.image })), children && (0, jsx_runtime_1.jsx)("div", { className: b('container'), children: children })] }));
 };
 exports.default = BackgroundImage;
 //# sourceMappingURL=BackgroundImage.js.map

package/build/cjs/components/BackgroundImage/BackgroundImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BackgroundImage.js","sourceRoot":"../../../../src","sources":["components/BackgroundImage/BackgroundImage.tsx"],"names":[],"mappings":";;;;;AAGA,gDAAmD;AACnD,sEAAmC;AAItB,QAAA,aAAa,GAAG,kBAAkB,CAAC;AAEhD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,0BAA0B,CAAC,CAAC;AAE5C,MAAM,eAAe,GAAG,CAAC,KAAoD,EAAE,EAAE;IAC7E,MAAM,EAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,~~IAAI,~~EAAE,~~EAAE,~~EAAC,GAAG,KAAK,CAAC;~~IACnF~~,MAAM,YAAY,GAAG,IAAA,uBAAe,EAAC,EAAE,IAAI,qBAAa,CAAC,CAAC;IAE1D,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aAAW,EAAE,IAAI,qBAAa,aACzE,CAAC,GAAG,IAAI,OAAO,CAAC,IAAI,~~CAAC~~,~~IAAI,IAAI,CAC1B,~~uBAAC,eAAK,OAAK,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,CACpF,EACA,QAAQ,IAAI,gCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAAG,QAAQ,GAAO,IAC3D,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImageProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport Image from '../Image/Image';\n\nimport './BackgroundImage.scss';\n\nexport const qaIdByDefault = 'background-image';\n\nconst b = block('storage-background-image');\n\nconst BackgroundImage = (props: React.PropsWithChildren<BackgroundImageProps>) => {\n const {children, src, desktop, className, imageClassName, style, ~~hide,~~ qa} = props;\n const qaAttributes = getQaAttrubutes(qa \|\| qaIdByDefault);\n\n return (\n <div className={b(null, className)} style={style} data-qa={qa \|\| qaIdByDefault}>\n {(src \|\| desktop) && ~~!hide &&~~ (\n <Image {...props} className={b('img', imageClassName)} qa={qaAttributes.image} />\n )}\n {children && <div className={b('container')}>{children}</div>}\n </div>\n );\n};\n\nexport default BackgroundImage;\n"]}
1	+ {"version":3,"file":"BackgroundImage.js","sourceRoot":"../../../../src","sources":["components/BackgroundImage/BackgroundImage.tsx"],"names":[],"mappings":";;;;;AAGA,gDAAmD;AACnD,sEAAmC;AAItB,QAAA,aAAa,GAAG,kBAAkB,CAAC;AAEhD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,0BAA0B,CAAC,CAAC;AAE5C,MAAM,eAAe,GAAG,CAAC,KAAoD,EAAE,EAAE;IAC7E,MAAM,EAAC,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAC,GAAG,KAAK,CAAC;IAC7E,MAAM,YAAY,GAAG,IAAA,uBAAe,EAAC,EAAE,IAAI,qBAAa,CAAC,CAAC;IAE1D,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aAAW,EAAE,IAAI,qBAAa,aACzE,CAAC,GAAG,IAAI,OAAO,CAAC,IAAI,CACjB,uBAAC,eAAK,OAAK,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,CACpF,EACA,QAAQ,IAAI,gCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAAG,QAAQ,GAAO,IAC3D,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImageProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport Image from '../Image/Image';\n\nimport './BackgroundImage.scss';\n\nexport const qaIdByDefault = 'background-image';\n\nconst b = block('storage-background-image');\n\nconst BackgroundImage = (props: React.PropsWithChildren<BackgroundImageProps>) => {\n const {children, src, desktop, className, imageClassName, style, qa} = props;\n const qaAttributes = getQaAttrubutes(qa \|\| qaIdByDefault);\n\n return (\n <div className={b(null, className)} style={style} data-qa={qa \|\| qaIdByDefault}>\n {(src \|\| desktop) && (\n <Image {...props} className={b('img', imageClassName)} qa={qaAttributes.image} />\n )}\n {children && <div className={b('container')}>{children}</div>}\n </div>\n );\n};\n\nexport default BackgroundImage;\n"]}

package/build/cjs/components/Image/Image.d.ts CHANGED Viewed

@@ -10,7 +10,9 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
 export interface DeviceSpecificFragmentProps extends QAProps {
     disableWebp: boolean;
     src: string;
-    breakpoint: number;
+    maxBreakpoint?: number;
+    minBreakpoint?: number;
 }
-declare const Image: (props: ImageProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const EMPTY_IMG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==";
+declare const Image: (props: ImageProps) => import("react/jsx-runtime").JSX.Element;
 export default Image;

package/build/cjs/components/Image/Image.js CHANGED Viewed

@@ -1,31 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.EMPTY_IMG = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const constants_1 = require("../../constants.js");
 const projectSettingsContext_1 = require("../../context/projectSettingsContext/index.js");
+const models_1 = require("../../models/index.js");
 const utils_1 = require("../../utils/index.js");
 const imageCompress_1 = require("../../utils/imageCompress.js");
 const ImageBase_1 = tslib_1.__importDefault(require("../ImageBase/ImageBase.js"));
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
-const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [!disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", media: `(max-width: ${breakpoint}px)`, "data-qa": `${qa}-compressed` })), (0, jsx_runtime_1.jsx)("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })] }));
+exports.EMPTY_IMG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';
+const DeviceSpecificFragment = ({ disableWebp, src, maxBreakpoint, minBreakpoint, qa, }) => {
+    const media = [];
+    if (maxBreakpoint) {
+        media.push(`(max-width: ${maxBreakpoint}px)`);
+    }
+    if (minBreakpoint) {
+        media.push(`(min-width: ${minBreakpoint}px)`);
+    }
+    const mediaString = media.join(' and ');
+    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [!disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", media: mediaString, "data-qa": `${qa}-compressed` })), (0, jsx_runtime_1.jsx)("source", { srcSet: src, media: mediaString, "data-qa": qa })] }));
+};
 const Image = (props) => {
     const projectSettings = React.useContext(projectSettingsContext_1.ProjectSettingsContext);
-    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, } = props;
+    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, hide, } = props;
     const [imgLoadingError, setImgLoadingError] = React.useState(false);
     const src = imageSrc || desktop;
-    if (!src) {
-        return null;
-    }
-    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source-compressed');
-    const disableWebp = projectSettings.disableCompress ||
+    const hideDevices = typeof hide === 'boolean' || !hide
+        ? Object.values(models_1.Device).reduce((acc, device) => ({ ...acc, [device]: Boolean(hide) }), {})
+        : hide;
+    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source', 'desktop-source-compressed');
+    const disableWebp = !src ||
+        projectSettings.disableCompress ||
         disableCompress ||
         !(0, imageCompress_1.isCompressible)(src) ||
         imgLoadingError;
-    return ((0, jsx_runtime_1.jsxs)("picture", { className: containerClassName, "data-qa": qa, children: [mobile && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), tablet && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.md, qa: qaAttributes.tabletSource })), src && !disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), (0, jsx_runtime_1.jsx)(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
+    return ((0, jsx_runtime_1.jsxs)("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: mobile || exports.EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.mobile), maxBreakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: tablet || exports.EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.tablet), maxBreakpoint: constants_1.BREAKPOINTS.md, minBreakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: exports.EMPTY_IMG, disableWebp: true, minBreakpoint: constants_1.BREAKPOINTS.md, qa: qaAttributes.desktopSource })), src && !disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), (0, jsx_runtime_1.jsx)(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
 };
 exports.default = Image;
 //# sourceMappingURL=Image.js.map

package/build/cjs/components/Image/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","sourceRoot":"../../../../src","sources":["components/Image/Image.tsx"],"names":[],"mappings":"~~;;;;~~AAAA,qDAA+B;AAE/B,kDAA4C;AAC5C,0FAA4E;~~AAE5E~~,gDAA4C;AAC5C,gEAAyD;AACzD,kFAA+C;~~AAgB~~/C,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC;AACvD,CAAC,CAAC;~~AAEF~~,MAAM,sBAAsB,GAAG,CAAC,EAC5B,WAAW,EACX,GAAG,EACH,~~UAAU~~,~~EACV~~,EAAE,GACwB,EAAE,EAAE,CAAC,~~CAC/B~~,wBAAC,KAAK,CAAC,QAAQ,eACV,CAAC,WAAW,IAAI,CACb,mCACI,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,EACtB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,~~eAAe~~,~~UAAU~~,~~KAAK,aAC5B,~~GAAG,EAAE,aAAa,GAC7B,CACL,EACD,mCAAQ,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,~~eAAe~~,~~UAAU,KAAK,~~aAAW,EAAE,GAAI,~~IAC9D~~,CACpB,CAAC;AAEF,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IAChC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,+CAAsB,CAAC,CAAC;IACjE,MAAM,EACF,GAAG,EAAE,QAAQ,EACb,GAAG,EACH,eAAe,EACf,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,EAAE,EACF,aAAa,EACb,OAAO,~~GACV~~,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpE,MAAM,GAAG,GAAG,QAAQ,IAAI,OAAO,CAAC;IAEhC,IAAI,CAAC,GAAG,EAAE,CAAC~~;QACP~~,OAAO,IAAI,CAAC;~~IAChB~~,CAAC;~~IAED~~,MAAM,YAAY,GAAG,IAAA,uBAAe,EAChC,EAAE,EACF,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,2BAA2B,CAC9B,CAAC;IAEF,MAAM,WAAW,GACb,eAAe,CAAC,eAAe;QAC/B,eAAe;QACf,CAAC,IAAA,8BAAc,EAAC,GAAG,CAAC;QACpB,eAAe,CAAC;IAEpB,OAAO,CACH,qCAAS,SAAS,EAAE,kBAAkB,aAAW,EAAE,aAC9C,MAAM,IAAI,~~CACP~~,uBAAC,sBAAsB,IACnB,GAAG,EAAE,MAAM,~~EACX~~,WAAW,EAAE,WAAW,~~EACxB~~,~~UAAU~~,EAAE,uBAAW,CAAC,EAAE,~~EAC1B~~,EAAE,EAAE,YAAY,CAAC,YAAY,GAC/B,CACL,EACA,MAAM,IAAI,~~CACP~~,uBAAC,sBAAsB,IACnB,GAAG,EAAE,MAAM,~~EACX~~,WAAW,EAAE,WAAW,~~EACxB~~,~~UAAU~~,EAAE,uBAAW,CAAC,EAAE,~~EAC1B~~,EAAE,EAAE,YAAY,CAAC,YAAY,GAC/B,CACL,EACA,GAAG,IAAI,CAAC,WAAW,IAAI,CACpB,mCACI,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,EACtB,IAAI,EAAC,YAAY,aACR,YAAY,CAAC,uBAAuB,GAC/C,CACL,EACD,uBAAC,mBAAS,IACN,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EACvC,MAAM,EAAE,MAAM,GAChB,IACI,CACb,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';\nimport {getQaAttrubutes} from '../../utils';\nimport {isCompressible} from '../../utils/imageCompress';\nimport ImageBase from '../ImageBase/ImageBase';\n\nexport interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {\n style?: React.CSSProperties;\n className?: string;\n onClick?: React.MouseEventHandler;\n onLoad?: React.ReactEventHandler<HTMLDivElement>;\n containerClassName?: string;\n}\n\nexport interface DeviceSpecificFragmentProps extends QAProps {\n disableWebp: boolean;\n src: string;\n ~~breakpoint:~~ number;\n}\n\nconst checkWebP = (src: string) => {\n return src.endsWith('.webp') ? src : src + '.webp';\n};\n\nconst DeviceSpecificFragment = ({\n disableWebp,\n src,\n ~~breakpoint~~,\n qa,\n}: DeviceSpecificFragmentProps) => (\n <React.Fragment>\n {!disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n media={~~`(max-width: ${breakpoint~~}~~px)`}~~\n data-qa={`${qa}-compressed`}\n />\n )}\n <source srcSet={src} media={~~`(max-width: ${breakpoint~~}~~px)`}~~ data-qa={qa} />\n </React.Fragment>\n);\n\nconst Image = (props: ImageProps) => {\n const projectSettings = React.useContext(ProjectSettingsContext);\n const {\n src: imageSrc,\n alt,\n disableCompress,\n tablet,\n desktop,\n mobile,\n style,\n className,\n onClick,\n onLoad,\n containerClassName,\n qa,\n fetchPriority,\n loading,\n } = props;\n const [imgLoadingError, setImgLoadingError] = React.useState(false);\n\n const src = imageSrc \|\| desktop;\n\n if (~~!src~~) {\n ~~return~~ ~~null~~;\n }\n\n const qaAttributes = getQaAttrubutes(\n qa,\n 'mobile-webp-source',\n 'mobile-source',\n 'tablet-webp-source',\n 'tablet-source',\n 'desktop-source-compressed',\n );\n\n const disableWebp =\n projectSettings.disableCompress \|\|\n disableCompress \|\|\n !isCompressible(src) \|\|\n imgLoadingError;\n\n return (\n <picture className={containerClassName} data-qa={qa}>\n {mobile && (\n <DeviceSpecificFragment\n src={mobile}\n disableWebp={disableWebp}\n ~~breakpoint~~={BREAKPOINTS.sm}\n qa={qaAttributes.mobileSource}\n />\n )}\n {tablet && (\n <DeviceSpecificFragment\n src={tablet}\n disableWebp={disableWebp}\n ~~breakpoint~~={BREAKPOINTS.md}\n qa={qaAttributes.tabletSource}\n />\n )}\n {src && !disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n data-qa={qaAttributes.desktopSourceCompressed}\n />\n )}\n <ImageBase\n className={className}\n alt={alt}\n src={src}\n style={style}\n fetchPriority={fetchPriority}\n loading={loading}\n onClick={onClick}\n onError={() => setImgLoadingError(true)}\n onLoad={onLoad}\n />\n </picture>\n );\n};\n\nexport default Image;\n"]}
1	+ {"version":3,"file":"Image.js","sourceRoot":"../../../../src","sources":["components/Image/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {Device, ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';\nimport {getQaAttrubutes} from '../../utils';\nimport {isCompressible} from '../../utils/imageCompress';\nimport ImageBase from '../ImageBase/ImageBase';\n\nexport interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {\n style?: React.CSSProperties;\n className?: string;\n onClick?: React.MouseEventHandler;\n onLoad?: React.ReactEventHandler<HTMLDivElement>;\n containerClassName?: string;\n}\n\nexport interface DeviceSpecificFragmentProps extends QAProps {\n disableWebp: boolean;\n src: string;\n maxBreakpoint?: number;\n minBreakpoint?: number;\n}\n\nconst checkWebP = (src: string) => {\n return src.endsWith('.webp') ? src : src + '.webp';\n};\n\nexport const EMPTY_IMG =\n 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';\n\nconst DeviceSpecificFragment = ({\n disableWebp,\n src,\n maxBreakpoint,\n minBreakpoint,\n qa,\n}: DeviceSpecificFragmentProps) => {\n const media: string[] = [];\n\n if (maxBreakpoint) {\n media.push(`(max-width: ${maxBreakpoint}px)`);\n }\n\n if (minBreakpoint) {\n media.push(`(min-width: ${minBreakpoint}px)`);\n }\n\n const mediaString = media.join(' and ');\n\n return (\n <React.Fragment>\n {!disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n media={mediaString}\n data-qa={`${qa}-compressed`}\n />\n )}\n <source srcSet={src} media={mediaString} data-qa={qa} />\n </React.Fragment>\n );\n};\n\nconst Image = (props: ImageProps) => {\n const projectSettings = React.useContext(ProjectSettingsContext);\n const {\n src: imageSrc,\n alt,\n disableCompress,\n tablet,\n desktop,\n mobile,\n style,\n className,\n onClick,\n onLoad,\n containerClassName,\n qa,\n fetchPriority,\n loading,\n hide,\n } = props;\n const [imgLoadingError, setImgLoadingError] = React.useState(false);\n\n const src = imageSrc \|\| desktop;\n\n const hideDevices =\n typeof hide === 'boolean' \|\| !hide\n ? Object.values(Device).reduce(\n (acc, device) => ({...acc, [device]: Boolean(hide)}),\n {} as Record<Device, boolean>,\n )\n : hide;\n\n const qaAttributes = getQaAttrubutes(\n qa,\n 'mobile-webp-source',\n 'mobile-source',\n 'tablet-webp-source',\n 'tablet-source',\n 'desktop-source',\n 'desktop-source-compressed',\n );\n\n const disableWebp =\n !src \|\|\n projectSettings.disableCompress \|\|\n disableCompress \|\|\n !isCompressible(src) \|\|\n imgLoadingError;\n\n return (\n <picture className={containerClassName} data-qa={qa}>\n {(mobile \|\| hideDevices.mobile) && (\n <DeviceSpecificFragment\n src={mobile \|\| EMPTY_IMG}\n disableWebp={disableWebp \|\| Boolean(hideDevices.mobile)}\n maxBreakpoint={BREAKPOINTS.sm}\n qa={qaAttributes.mobileSource}\n />\n )}\n {(tablet \|\| hideDevices.tablet) && (\n <DeviceSpecificFragment\n src={tablet \|\| EMPTY_IMG}\n disableWebp={disableWebp \|\| Boolean(hideDevices.tablet)}\n maxBreakpoint={BREAKPOINTS.md}\n minBreakpoint={BREAKPOINTS.sm}\n qa={qaAttributes.tabletSource}\n />\n )}\n {hideDevices.desktop && (\n <DeviceSpecificFragment\n src={EMPTY_IMG}\n disableWebp\n minBreakpoint={BREAKPOINTS.md}\n qa={qaAttributes.desktopSource}\n />\n )}\n {src && !disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n data-qa={qaAttributes.desktopSourceCompressed}\n />\n )}\n <ImageBase\n className={className}\n alt={alt}\n src={src}\n style={style}\n fetchPriority={fetchPriority}\n loading={loading}\n onClick={onClick}\n onError={() => setImgLoadingError(true)}\n onLoad={onLoad}\n />\n </picture>\n );\n};\n\nexport default Image;\n"]}

package/build/cjs/components/Image/schema.d.ts CHANGED Viewed

@@ -31,6 +31,25 @@ export declare const ImageDeviceProps: {
             type: string;
             enum: string[];
         };
+        hide: {
+            oneOf: ({
+                type: string;
+                properties?: undefined;
+            } | {
+                type: string;
+                properties: {
+                    mobile: {
+                        type: string;
+                    };
+                    tablet: {
+                        type: string;
+                    };
+                    desktop: {
+                        type: string;
+                    };
+                };
+            })[];
+        };
     };
 };
 export declare const ImageBaseObjectProps: {
@@ -75,6 +94,25 @@ export declare const ImageBaseObjectProps: {
             type: string;
             enum: string[];
         };
+        hide: {
+            oneOf: ({
+                type: string;
+                properties?: undefined;
+            } | {
+                type: string;
+                properties: {
+                    mobile: {
+                        type: string;
+                    };
+                    tablet: {
+                        type: string;
+                    };
+                    desktop: {
+                        type: string;
+                    };
+                };
+            })[];
+        };
     };
 };
 export declare const ImageObjectProps: {
@@ -120,6 +158,25 @@ export declare const ImageObjectProps: {
             type: string;
             enum: string[];
         };
+        hide: {
+            oneOf: ({
+                type: string;
+                properties?: undefined;
+            } | {
+                type: string;
+                properties: {
+                    mobile: {
+                        type: string;
+                    };
+                    tablet: {
+                        type: string;
+                    };
+                    desktop: {
+                        type: string;
+                    };
+                };
+            })[];
+        };
     };
 };
 export declare const ImageProps: {
@@ -193,6 +250,25 @@ export declare const BackgroundImageProps: {
                 type: string;
                 enum: string[];
             };
+            hide: {
+                oneOf: ({
+                    type: string;
+                    properties?: undefined;
+                } | {
+                    type: string;
+                    properties: {
+                        mobile: {
+                            type: string;
+                        };
+                        tablet: {
+                            type: string;
+                        };
+                        desktop: {
+                            type: string;
+                        };
+                    };
+                })[];
+            };
         };
     } | {
         optionName: string;
@@ -227,6 +303,25 @@ export declare const BackgroundImageProps: {
                 type: string;
                 enum: string[];
             };
+            hide: {
+                oneOf: ({
+                    type: string;
+                    properties?: undefined;
+                } | {
+                    type: string;
+                    properties: {
+                        mobile: {
+                            type: string;
+                        };
+                        tablet: {
+                            type: string;
+                        };
+                        desktop: {
+                            type: string;
+                        };
+                    };
+                })[];
+            };
         };
     })[];
 };

package/build/cjs/components/Image/schema.js CHANGED Viewed

@@ -19,6 +19,21 @@ const ImageBase = {
         type: 'string',
         enum: ['high', 'low', 'auto'],
     },
+    hide: {
+        oneOf: [
+            {
+                type: 'boolean',
+            },
+            {
+                type: 'object',
+                properties: {
+                    mobile: { type: 'boolean' },
+                    tablet: { type: 'boolean' },
+                    desktop: { type: 'boolean' },
+                },
+            },
+        ],
+    },
 };
 const StyleBase = {
     type: 'object',

package/build/cjs/components/Image/schema.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["components/Image/schema.ts"],"names":[],"mappings":";;;AAAA,4DAA2D;AAE9C,QAAA,eAAe,GACxB,kGAAkG,CAAC;AAEvG,MAAM,SAAS,GAAG;IACd,GAAG,EAAE;QACD,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,MAAM;KACtB;IACD,eAAe,EAAE;QACb,IAAI,EAAE,SAAS;KAClB;IACD,OAAO,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;KAC1B;IACD,aAAa,EAAE;QACX,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;KAChC;CACJ,CAAC;AAEF,MAAM,SAAS,GAAG;IACd,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACR,eAAe,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;QACjC,MAAM,EAAE,EAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAC;QACpC,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAC;QACnC,KAAK,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;KAC1B;CACJ,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC5B,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;IAC/B,UAAU,EAAE;QACR,GAAG,SAAS;QACZ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,uBAAe,EAAC;QACnD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,uBAAe;SAC3B;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,uBAAe;SAC3B;KACJ;CACJ,CAAC;AAEW,QAAA,oBAAoB,GAAG;IAChC,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,UAAU,EAAE;QACR,GAAG,SAAS;QACZ,GAAG,EAAE;YACD,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,uBAAe;SAC3B;QACD,KAAK,EAAE,SAAS;KACnB;CACJ,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC5B,GAAG,4BAAoB;IACvB,QAAQ,EAAE,CAAC,KAAK,CAAC;CACpB,CAAC;AAEW,QAAA,UAAU,GAAG;IACtB,KAAK,EAAE;QACH;YACI,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,uBAAe;YACxB,UAAU,EAAE,KAAK;SACpB;QACD,IAAA,oBAAY,EAAC;YACT,GAAG,wBAAgB;YACnB,UAAU,EAAE,SAAS;SACxB,CAAC;QACF,IAAA,oBAAY,EAAC;YACT,GAAG,wBAAgB;YACnB,UAAU,EAAE,gBAAgB;SAC/B,CAAC;QACF;YACI,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,IAAA,oBAAY,EAAC;gBAChB,GAAG,wBAAgB;aACtB,CAAC;YACF,UAAU,EAAE,cAAc;SAC7B;QACD;YACI,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,IAAA,oBAAY,EAAC;gBAChB,GAAG,wBAAgB;aACtB,CAAC;YACF,UAAU,EAAE,qBAAqB;SACpC;KACJ;CACJ,CAAC;AAEW,QAAA,oBAAoB,GAAG;IAChC,KAAK,EAAE;QACH;YACI,GAAG,4BAAoB;YACvB,UAAU,EAAE,SAAS;SACxB;QACD;YACI,GAAG,wBAAgB;YACnB,UAAU,EAAE,gBAAgB;SAC/B;KACJ;CACJ,CAAC","sourcesContent":["import {filteredItem} from '../../schema/validators/utils';\n\nexport const imageUrlPattern =\n '^((http[s]?\|ftp):\\\\/)?\\\\/?([^:\\\\/\\\\s]+)((\\\\/\\\\w+)\\\\/)([\\\\w\\\\-\\\\.]+[^#?\\\\s]+)(.)?(#[\\\\w\\\\-]+)?$';\n\nconst ImageBase = {\n alt: {\n type: 'string',\n contentType: 'text',\n },\n disableCompress: {\n type: 'boolean',\n },\n loading: {\n type: 'string',\n enum: ['eager', 'lazy'],\n },\n fetchPriority: {\n type: 'string',\n enum: ['high', 'low', 'auto'],\n },\n};\n\nconst StyleBase = {\n type: 'object',\n additionalProperties: false,\n required: [],\n properties: {\n backgroundColor: {type: 'string'},\n height: {type: ['string', 'number']},\n width: {type: ['string', 'number']},\n color: {type: 'string'},\n },\n};\n\nexport const ImageDeviceProps = {\n type: 'object',\n additionalProperties: false,\n required: ['desktop', 'mobile'],\n properties: {\n ...ImageBase,\n desktop: {type: 'string', pattern: imageUrlPattern},\n tablet: {\n type: 'string',\n pattern: imageUrlPattern,\n },\n mobile: {\n type: 'string',\n pattern: imageUrlPattern,\n },\n },\n};\n\nexport const ImageBaseObjectProps = {\n type: 'object',\n additionalProperties: false,\n properties: {\n ...ImageBase,\n src: {\n type: 'string',\n pattern: imageUrlPattern,\n },\n style: StyleBase,\n },\n};\n\nexport const ImageObjectProps = {\n ...ImageBaseObjectProps,\n required: ['src'],\n};\n\nexport const ImageProps = {\n oneOf: [\n {\n type: 'string',\n pattern: imageUrlPattern,\n optionName: 'url',\n },\n filteredItem({\n ...ImageObjectProps,\n optionName: 'options',\n }),\n filteredItem({\n ...ImageDeviceProps,\n optionName: 'device options',\n }),\n {\n type: 'array',\n items: filteredItem({\n ...ImageObjectProps,\n }),\n optionName: 'options list',\n },\n {\n type: 'array',\n items: filteredItem({\n ...ImageDeviceProps,\n }),\n optionName: 'device options list',\n },\n ],\n};\n\nexport const BackgroundImageProps = {\n anyOf: [\n {\n ...ImageBaseObjectProps,\n optionName: 'options',\n },\n {\n ...ImageDeviceProps,\n optionName: 'device options',\n },\n ],\n};\n"]}
1	+ {"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["components/Image/schema.ts"],"names":[],"mappings":"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","sourcesContent":["import {filteredItem} from '../../schema/validators/utils';\n\nexport const imageUrlPattern =\n '^((http[s]?\|ftp):\\\\/)?\\\\/?([^:\\\\/\\\\s]+)((\\\\/\\\\w+)\\\\/)([\\\\w\\\\-\\\\.]+[^#?\\\\s]+)(.)?(#[\\\\w\\\\-]+)?$';\n\nconst ImageBase = {\n alt: {\n type: 'string',\n contentType: 'text',\n },\n disableCompress: {\n type: 'boolean',\n },\n loading: {\n type: 'string',\n enum: ['eager', 'lazy'],\n },\n fetchPriority: {\n type: 'string',\n enum: ['high', 'low', 'auto'],\n },\n hide: {\n oneOf: [\n {\n type: 'boolean',\n },\n {\n type: 'object',\n properties: {\n mobile: {type: 'boolean'},\n tablet: {type: 'boolean'},\n desktop: {type: 'boolean'},\n },\n },\n ],\n },\n};\n\nconst StyleBase = {\n type: 'object',\n additionalProperties: false,\n required: [],\n properties: {\n backgroundColor: {type: 'string'},\n height: {type: ['string', 'number']},\n width: {type: ['string', 'number']},\n color: {type: 'string'},\n },\n};\n\nexport const ImageDeviceProps = {\n type: 'object',\n additionalProperties: false,\n required: ['desktop', 'mobile'],\n properties: {\n ...ImageBase,\n desktop: {type: 'string', pattern: imageUrlPattern},\n tablet: {\n type: 'string',\n pattern: imageUrlPattern,\n },\n mobile: {\n type: 'string',\n pattern: imageUrlPattern,\n },\n },\n};\n\nexport const ImageBaseObjectProps = {\n type: 'object',\n additionalProperties: false,\n properties: {\n ...ImageBase,\n src: {\n type: 'string',\n pattern: imageUrlPattern,\n },\n style: StyleBase,\n },\n};\n\nexport const ImageObjectProps = {\n ...ImageBaseObjectProps,\n required: ['src'],\n};\n\nexport const ImageProps = {\n oneOf: [\n {\n type: 'string',\n pattern: imageUrlPattern,\n optionName: 'url',\n },\n filteredItem({\n ...ImageObjectProps,\n optionName: 'options',\n }),\n filteredItem({\n ...ImageDeviceProps,\n optionName: 'device options',\n }),\n {\n type: 'array',\n items: filteredItem({\n ...ImageObjectProps,\n }),\n optionName: 'options list',\n },\n {\n type: 'array',\n items: filteredItem({\n ...ImageDeviceProps,\n }),\n optionName: 'device options list',\n },\n ],\n};\n\nexport const BackgroundImageProps = {\n anyOf: [\n {\n ...ImageBaseObjectProps,\n optionName: 'options',\n },\n {\n ...ImageDeviceProps,\n optionName: 'device options',\n },\n ],\n};\n"]}

package/build/cjs/models/constructor-items/common.d.ts CHANGED Viewed

@@ -100,7 +100,12 @@ interface LoopProps {
     start: number;
     end?: number;
 }
-export interface ImageInfoProps extends Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'> {
+export declare enum Device {
+    Desktop = "desktop",
+    Mobile = "mobile",
+    Tablet = "tablet"
+}
+export interface ImageInfoProps extends Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'>, ImageDevicesVisibleProps {
     alt?: string;
     fetchPriority?: 'high' | 'low' | 'auto';
     disableCompress?: boolean;
@@ -109,16 +114,18 @@ export interface ImageObjectProps extends ImageInfoProps {
     src: string;
 }
 export interface ImageDeviceProps extends ImageInfoProps {
-    desktop: string;
-    mobile: string;
-    tablet?: string;
+    [Device.Desktop]: string;
+    [Device.Mobile]: string;
+    [Device.Tablet]?: string;
+}
+export interface ImageDevicesVisibleProps {
+    hide?: boolean | Partial<Record<Device, boolean>>;
 }
 export type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export type ThemedImage = ThemeSupporting<ImageProps>;
-export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps {
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps, ImageDevicesVisibleProps {
     style?: React.CSSProperties;
     imageClassName?: string;
-    hide?: boolean;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];

package/build/cjs/models/constructor-items/common.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuoteType = exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
+exports.Device = exports.QuoteType = exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
 // enums
 var AuthorType;
 (function (AuthorType) {
@@ -56,4 +56,11 @@ var QuoteType;
     QuoteType["Chevron"] = "chevron";
     QuoteType["EnglishDouble"] = "english-double";
 })(QuoteType || (exports.QuoteType = QuoteType = {}));
+// images
+var Device;
+(function (Device) {
+    Device["Desktop"] = "desktop";
+    Device["Mobile"] = "mobile";
+    Device["Tablet"] = "tablet";
+})(Device || (exports.Device = Device = {}));
 //# sourceMappingURL=common.js.map