@gravity-ui/page-constructor 4.43.2-alpha.0 → 4.44.0

package/build/cjs/blocks/CardLayout/CardLayout.css

@@ -3,6 +3,25 @@ unpredictable css rules order in build */
 .pc-card-layout-block__item {
   margin-top: 24px;
 }
+.pc-card-layout-block__content {
+  position: relative;
+}
+.pc-card-layout-block__content_with-background {
+  padding: 8px 32px 48px;
+  margin-top: 24px;
+}
+.pc-card-layout-block__image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 40px;
+}
+.pc-card-layout-block__image img {
+  object-fit: cover;
+  object-position: left;
+}
 @media (min-width: 769px) {
   .pc-card-layout-block.pc-AnimateBlock .pc-card-layout-block__item, .pc-AnimateBlock .pc-card-layout-block .pc-card-layout-block__item {
     position: relative;

package/build/cjs/blocks/CardLayout/CardLayout.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
 const components_1 = require("../../components");
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
@@ -11,7 +12,13 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 const b = (0, utils_1.block)('card-layout-block');
-const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, }) => (react_1.default.createElement(components_1.AnimateBlock, { className: b(null, className), animate: animated },
-    (title || description) && (react_1.default.createElement(components_1.Title, { title: title, subtitle: description, className: titleClassName })),
-    react_1.default.createElement(grid_1.Row, null, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(grid_1.Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
+const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, }) => {
+    return (react_1.default.createElement(components_1.AnimateBlock, { className: b(null, className), animate: animated },
+        (title || description) && (react_1.default.createElement(components_1.Title, { title: title, subtitle: description, className: titleClassName })),
+        react_1.default.createElement("div", { className: b('content', {
+                'with-background': !(0, isEmpty_1.default)(background),
+            }) },
+            react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image') }, background)),
+            react_1.default.createElement(grid_1.Row, null, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(grid_1.Col, { key: index, sizes: colSizes, className: b('item') }, child)))))));
+};
 exports.default = CardLayout;

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

@@ -7,6 +7,43 @@ export declare const CardLayoutProps: {
             additionalProperties: boolean;
             properties: {};
         };
+        background: {
+            type: string;
+            additionalProperties: boolean;
+            required: string[];
+            properties: {
+                src: {
+                    type: string;
+                    pattern: string;
+                };
+                style: {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: never[];
+                    properties: {
+                        backgroundColor: {
+                            type: string;
+                        };
+                        height: {
+                            type: string[];
+                        };
+                        width: {
+                            type: string[];
+                        };
+                        color: {
+                            type: string;
+                        };
+                    };
+                };
+                alt: {
+                    type: string;
+                    contentType: string;
+                };
+                disableCompress: {
+                    type: string;
+                };
+            };
+        };
         children: {
             type: string;
             items: {
@@ -106,6 +143,43 @@ export declare const CardLayoutBlock: {
                 additionalProperties: boolean;
                 properties: {};
             };
+            background: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    src: {
+                        type: string;
+                        pattern: string;
+                    };
+                    style: {
+                        type: string;
+                        additionalProperties: boolean;
+                        required: never[];
+                        properties: {
+                            backgroundColor: {
+                                type: string;
+                            };
+                            height: {
+                                type: string[];
+                            };
+                            width: {
+                                type: string[];
+                            };
+                            color: {
+                                type: string;
+                            };
+                        };
+                    };
+                    alt: {
+                        type: string;
+                        contentType: string;
+                    };
+                    disableCompress: {
+                        type: string;
+                    };
+                };
+            };
             children: {
                 type: string;
                 items: {

package/build/cjs/blocks/CardLayout/schema.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardLayoutBlock = exports.CardLayoutProps = void 0;
+const schema_1 = require("../../components/Image/schema");
 const common_1 = require("../../schema/validators/common");
 exports.CardLayoutProps = {
     additionalProperties: false,
     required: [],
-    properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), common_1.BlockHeaderProps), { colSizes: common_1.containerSizesObject, children: common_1.ChildrenCardsProps }),
+    properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), common_1.BlockHeaderProps), { colSizes: common_1.containerSizesObject, background: schema_1.ImageObjectProps, children: common_1.ChildrenCardsProps }),
 };
 exports.CardLayoutBlock = {
     'card-layout-block': exports.CardLayoutProps,

package/build/cjs/blocks/Header/schema.d.ts

@@ -266,20 +266,10 @@ export declare const HeaderBackgroundProps: {
                     type: string;
                 };
                 height: {
-                    oneOf: ({
-                        type: string;
-                        enum?: undefined;
-                    } | {
-                        type: string;
-                        enum: string[];
-                    })[];
-                };
-                width: {
                     type: string;
                 };
-                justifyContent: {
+                width: {
                     type: string;
-                    enum: string[];
                 };
             };
         };
@@ -736,20 +726,10 @@ export declare const HeaderProperties: {
                             type: string;
                         };
                         height: {
-                            oneOf: ({
-                                type: string;
-                                enum?: undefined;
-                            } | {
-                                type: string;
-                                enum: string[];
-                            })[];
-                        };
-                        width: {
                             type: string;
                         };
-                        justifyContent: {
+                        width: {
                             type: string;
-                            enum: string[];
                         };
                     };
                 };
@@ -1255,20 +1235,10 @@ export declare const HeaderBlock: {
                                     type: string;
                                 };
                                 height: {
-                                    oneOf: ({
-                                        type: string;
-                                        enum?: undefined;
-                                    } | {
-                                        type: string;
-                                        enum: string[];
-                                    })[];
-                                };
-                                width: {
                                     type: string;
                                 };
-                                justifyContent: {
+                                width: {
                                     type: string;
-                                    enum: string[];
                                 };
                             };
                         };

package/build/cjs/blocks/HeaderSlider/schema.d.ts

@@ -457,20 +457,10 @@ export declare const HeaderSliderBlock: {
                                                 type: string;
                                             };
                                             height: {
-                                                oneOf: ({
-                                                    type: string;
-                                                    enum?: undefined;
-                                                } | {
-                                                    type: string;
-                                                    enum: string[];
-                                                })[];
-                                            };
-                                            width: {
                                                 type: string;
                                             };
-                                            justifyContent: {
+                                            width: {
                                                 type: string;
-                                                enum: string[];
                                             };
                                         };
                                     };

package/build/cjs/blocks/Media/schema.d.ts

@@ -260,20 +260,10 @@ export declare const Media: {
                     type: string;
                 };
                 height: {
-                    oneOf: ({
-                        type: string;
-                        enum?: undefined;
-                    } | {
-                        type: string;
-                        enum: string[];
-                    })[];
-                };
-                width: {
                     type: string;
                 };
-                justifyContent: {
+                width: {
                     type: string;
-                    enum: string[];
                 };
             };
         };
@@ -941,20 +931,10 @@ export declare const MediaBlock: {
                                     type: string;
                                 };
                                 height: {
-                                    oneOf: ({
-                                        type: string;
-                                        enum?: undefined;
-                                    } | {
-                                        type: string;
-                                        enum: string[];
-                                    })[];
-                                };
-                                width: {
                                     type: string;
                                 };
-                                justifyContent: {
+                                width: {
                                     type: string;
-                                    enum: string[];
                                 };
                             };
                         };

package/build/cjs/blocks/PromoFeaturesBlock/schema.d.ts

@@ -276,20 +276,10 @@ export declare const PromoFeaturesItem: {
                             type: string;
                         };
                         height: {
-                            oneOf: ({
-                                type: string;
-                                enum?: undefined;
-                            } | {
-                                type: string;
-                                enum: string[];
-                            })[];
-                        };
-                        width: {
                             type: string;
                         };
-                        justifyContent: {
+                        width: {
                             type: string;
-                            enum: string[];
                         };
                     };
                 };

package/build/cjs/blocks/Tabs/schema.d.ts

@@ -271,20 +271,10 @@ export declare const tabsItem: {
                                 type: string;
                             };
                             height: {
-                                oneOf: ({
-                                    type: string;
-                                    enum?: undefined;
-                                } | {
-                                    type: string;
-                                    enum: string[];
-                                })[];
-                            };
-                            width: {
                                 type: string;
                             };
-                            justifyContent: {
+                            width: {
                                 type: string;
-                                enum: string[];
                             };
                         };
                     };

package/build/cjs/components/Media/Iframe/Iframe.css

@@ -11,4 +11,8 @@ unpredictable css rules order in build */
 }
 .pc-media-component-iframe .pc-media-component-iframe__iframe {
   border-radius: 0;
+}
+.pc-media-component-iframe__item {
+  width: 100%;
+  height: 100%;
 }

package/build/cjs/components/Media/Iframe/Iframe.js

@@ -1,74 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const uuid_1 = require("uuid");
+const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../../utils");
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, utils_1.block)('media-component-iframe');
 const Iframe = (props) => {
     const { iframe, margins = true } = props;
-    const { height = 400, src, width = '100%', name, title, justifyContent = 'center' } = iframe;
-    const formContainerRef = (0, react_1.useRef)(null);
-    const iframeRef = (0, react_1.useRef)();
-    const [iframeId] = (0, react_1.useState)((0, uuid_1.v4)());
-    const updateFormIframe = (0, react_1.useCallback)((container) => {
-        if (iframeRef.current) {
-            iframeRef.current.src = src;
-        }
-        else {
-            const iframeWidth = typeof width === 'number' ? `${width}px` : width;
-            let iframeHeight = typeof height === 'number' ? `${height}px` : height;
-            if (height === 'auto') {
-                iframeHeight = undefined;
-            }
-            iframeRef.current = document.createElement('iframe');
-            iframeRef.current.src = src;
-            iframeRef.current.id = iframeId;
-            iframeRef.current.name = name || iframeId;
-            iframeRef.current.setAttribute('loading', 'lazy');
-            iframeRef.current.setAttribute('title', title || (0, i18n_1.default)('iframe-title'));
-            iframeRef.current.frameBorder = '0';
-            iframeRef.current.scrolling = 'no';
-            iframeRef.current.width = iframeWidth;
-            iframeRef.current.style.width = iframeWidth;
-            if (iframeHeight) {
-                iframeRef.current.style.height = iframeHeight;
-            }
-            container.appendChild(iframeRef.current);
-        }
-    }, [src, width, iframeId, name, title, height]);
-    const handleMessage = (0, react_1.useCallback)(({ data }) => {
-        if (height !== 'auto' && typeof height === 'number' && iframeRef.current) {
-            iframeRef.current.height = `${height}px`;
-            return;
-        }
-        try {
-            const parsed = JSON.parse(data);
-            const iframeHeight = parsed['iframe-height'];
-            const { message, name: iframeName } = parsed;
-            if (iframeName !== name && iframeName !== iframeId) {
-                return;
-            }
-            if (iframeRef.current && iframeHeight && !message) {
-                iframeRef.current.height = `${iframeHeight}px`;
-            }
-        }
-        catch (error) {
-            return;
-        }
-    }, [height, iframeId, name]);
-    const addIframe = (0, react_1.useCallback)(() => {
-        const container = formContainerRef.current;
-        if (container) {
-            updateFormIframe(container);
-            window.addEventListener('message', handleMessage, { passive: true });
-        }
-    }, [updateFormIframe, handleMessage]);
-    (0, react_1.useEffect)(() => {
-        addIframe();
-        return () => window.removeEventListener('message', handleMessage);
-    }, [addIframe, handleMessage]);
-    return iframe ? (react_1.default.createElement("div", { className: b({ margins }), ref: formContainerRef, style: { height, textAlign: justifyContent } })) : null;
+    const { height = 400, src, width, name, title } = iframe;
+    return iframe ? (react_1.default.createElement("div", { className: b({ margins }), style: { height } },
+        react_1.default.createElement("iframe", { className: b('item'), loading: "lazy", title: title || (0, i18n_1.default)('iframe-title'), frameBorder: 0, src: src, width: width, height: height, name: name }))) : null;
 };
 exports.default = Iframe;

package/build/cjs/grid/Col/Col.d.ts

@@ -5,4 +5,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     style?: CSSProperties;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "justifyContent" | "offsets" | "orders" | "alignSelf"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -234,6 +234,7 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
     titleClassName?: string;
     description?: string;
     colSizes?: GridColumnSizesType;
+    background?: BackgroundImageProps;
 }
 export type FilterTag = {
     id: string;

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

@@ -257,14 +257,12 @@ export interface DataLensObjectProps {
     id: string;
     theme: 'dark' | 'light';
 }
-export type JustifyValues = 'left' | 'right' | 'center';
 export interface IframeProps {
     src: string;
-    width?: number | string;
-    height?: number | string;
+    width?: number;
+    height?: number;
     title?: string;
     name?: string;
-    justifyContent?: JustifyValues;
 }
 export type DataLensProps = string | DataLensObjectProps;
 export interface AuthorItem {

package/build/cjs/schema/constants.d.ts

@@ -1530,20 +1530,10 @@ export declare const cardSchemas: {
                         type: string;
                     };
                     height: {
-                        oneOf: ({
-                            type: string;
-                            enum?: undefined;
-                        } | {
-                            type: string;
-                            enum: string[];
-                        })[];
-                    };
-                    width: {
                         type: string;
                     };
-                    justifyContent: {
+                    width: {
                         type: string;
-                        enum: string[];
                     };
                 };
             };

package/build/cjs/schema/validators/common.d.ts

@@ -1388,20 +1388,10 @@ export declare const MediaProps: {
                 type: string;
             };
             height: {
-                oneOf: ({
-                    type: string;
-                    enum?: undefined;
-                } | {
-                    type: string;
-                    enum: string[];
-                })[];
-            };
-            width: {
                 type: string;
             };
-            justifyContent: {
+            width: {
                 type: string;
-                enum: string[];
             };
         };
     };

package/build/cjs/schema/validators/common.js

@@ -526,15 +526,11 @@ const IframeProps = {
             type: 'string',
         },
         height: {
-            oneOf: [{ type: 'number' }, { type: 'string', enum: ['auto'] }],
+            type: 'number',
         },
         width: {
             type: 'number',
         },
-        justifyContent: {
-            type: 'string',
-            enum: ['left', 'right', 'center'],
-        },
     },
 };
 exports.MediaProps = {

package/build/cjs/sub-blocks/LayoutItem/schema.d.ts

@@ -261,20 +261,10 @@ export declare const LayoutItem: {
                         type: string;
                     };
                     height: {
-                        oneOf: ({
-                            type: string;
-                            enum?: undefined;
-                        } | {
-                            type: string;
-                            enum: string[];
-                        })[];
-                    };
-                    width: {
                         type: string;
                     };
-                    justifyContent: {
+                    width: {
                         type: string;
-                        enum: string[];
                     };
                 };
             };

package/build/cjs/sub-blocks/MediaCard/schema.d.ts

@@ -266,20 +266,10 @@ export declare const MediaCardBlock: {
                         type: string;
                     };
                     height: {
-                        oneOf: ({
-                            type: string;
-                            enum?: undefined;
-                        } | {
-                            type: string;
-                            enum: string[];
-                        })[];
-                    };
-                    width: {
                         type: string;
                     };
-                    justifyContent: {
+                    width: {
                         type: string;
-                        enum: string[];
                     };
                 };
             };

package/build/esm/blocks/CardLayout/CardLayout.css

@@ -3,6 +3,25 @@ unpredictable css rules order in build */
 .pc-card-layout-block__item {
   margin-top: 24px;
 }
+.pc-card-layout-block__content {
+  position: relative;
+}
+.pc-card-layout-block__content_with-background {
+  padding: 8px 32px 48px;
+  margin-top: 24px;
+}
+.pc-card-layout-block__image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 40px;
+}
+.pc-card-layout-block__image img {
+  object-fit: cover;
+  object-position: left;
+}
 @media (min-width: 769px) {
   .pc-card-layout-block.pc-AnimateBlock .pc-card-layout-block__item, .pc-AnimateBlock .pc-card-layout-block .pc-card-layout-block__item {
     position: relative;

package/build/esm/blocks/CardLayout/CardLayout.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { AnimateBlock, Title } from '../../components';
+import isEmpty from 'lodash/isEmpty';
+import { AnimateBlock, BackgroundImage, Title } from '../../components';
 import { Col, Row } from '../../grid';
 import { block } from '../../utils';
 import './CardLayout.css';
@@ -9,7 +10,13 @@ const DEFAULT_SIZES = {
     md: 4,
 };
 const b = block('card-layout-block');
-const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, }) => (React.createElement(AnimateBlock, { className: b(null, className), animate: animated },
-    (title || description) && (React.createElement(Title, { title: title, subtitle: description, className: titleClassName })),
-    React.createElement(Row, null, React.Children.map(children, (child, index) => (React.createElement(Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
+const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, }) => {
+    return (React.createElement(AnimateBlock, { className: b(null, className), animate: animated },
+        (title || description) && (React.createElement(Title, { title: title, subtitle: description, className: titleClassName })),
+        React.createElement("div", { className: b('content', {
+                'with-background': !isEmpty(background),
+            }) },
+            React.createElement(BackgroundImage, Object.assign({ className: b('image') }, background)),
+            React.createElement(Row, null, React.Children.map(children, (child, index) => (React.createElement(Col, { key: index, sizes: colSizes, className: b('item') }, child)))))));
+};
 export default CardLayout;