@doyourjob/gravity-ui-page-constructor 5.31.121 → 5.31.122

package/build/cjs/blocks/Header/BackgroundEffect/BackgroundEffect.css

@@ -0,0 +1,24 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-background-effect {
+  position: absolute;
+  inset: 0;
+}
+.pc-background-effect__left {
+  width: 100%;
+  height: 100%;
+}
+.pc-background-effect__right {
+  position: absolute;
+  inset: 0;
+  clip-path: inset(0 0 0 99.99%);
+  transition: clip-path 1.5s ease;
+}
+.pc-header-block:hover .pc-background-effect__right {
+  clip-path: inset(0 0 0 0.01%);
+}
+.pc-background-effect__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

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

@@ -0,0 +1,6 @@
+type BackgroundEffectProps = {
+    firstSrc: string;
+    secondSrc: string;
+};
+export declare const BackgroundEffect: ({ firstSrc, secondSrc }: BackgroundEffectProps) => JSX.Element | null;
+export default BackgroundEffect;

package/build/cjs/blocks/Header/BackgroundEffect/BackgroundEffect.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundEffect = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../components/Media/Video/utils");
+const utils_2 = require("../../../utils");
+const b = (0, utils_2.block)('background-effect');
+const SYNC_THRESHOLD = 0.03;
+const MAX_DESYNC = 0.5;
+const FAST_RATE = 1.05;
+const SLOW_RATE = 0.95;
+const BackgroundEffect = ({ firstSrc, secondSrc }) => {
+    const master = (0, react_1.useRef)(null);
+    const driven = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const m = master.current;
+        const d = driven.current;
+        let rafId;
+        if (m && d) {
+            const syncMaster = () => {
+                if (m.paused) {
+                    m.play().catch(() => { });
+                }
+                const delta = m.currentTime - d.currentTime;
+                if (d.paused) {
+                    d.play().catch(() => { });
+                }
+                if (Math.abs(delta) > MAX_DESYNC) {
+                    d.currentTime = m.currentTime;
+                    d.playbackRate = 1;
+                }
+                else if (Math.abs(delta) > SYNC_THRESHOLD) {
+                    d.playbackRate = delta > 0 ? FAST_RATE : SLOW_RATE;
+                }
+                else {
+                    d.playbackRate = 1;
+                }
+                rafId = m.requestVideoFrameCallback(syncMaster);
+            };
+            rafId = m.requestVideoFrameCallback(syncMaster);
+        }
+        const handleVisibility = () => {
+            if (!document.hidden && m && d) {
+                m.play().catch(() => { });
+                d.play().catch(() => { });
+            }
+        };
+        document.addEventListener('visibilitychange', handleVisibility);
+        return () => {
+            var _a;
+            document.removeEventListener('visibilitychange', handleVisibility);
+            if (rafId && m) {
+                (_a = m.cancelVideoFrameCallback) === null || _a === void 0 ? void 0 : _a.call(m, rafId);
+            }
+        };
+    }, []);
+    if (!firstSrc || !secondSrc) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('left') },
+            react_1.default.createElement("video", { ref: master, disablePictureInPicture: true, playsInline: true, 
+                // @ts-ignore
+                // eslint-disable-next-line react/no-unknown-property
+                pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
+                react_1.default.createElement("source", { src: firstSrc, type: (0, utils_1.parseVideoType)(firstSrc) }))),
+        react_1.default.createElement("div", { className: b('right') },
+            react_1.default.createElement("video", { ref: driven, disablePictureInPicture: true, playsInline: true, 
+                // @ts-ignore
+                // eslint-disable-next-line react/no-unknown-property
+                pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
+                react_1.default.createElement("source", { src: secondSrc, type: (0, utils_1.parseVideoType)(secondSrc) })))));
+};
+exports.BackgroundEffect = BackgroundEffect;
+exports.default = exports.BackgroundEffect;

package/build/cjs/blocks/Header/Header.css

@@ -13,6 +13,10 @@ unpredictable css rules order in build */
   padding: 16px 0;
   margin: 0 0 16px;
 }
+.pc-header-block_header-space {
+  padding-top: var(--header-height);
+  margin-top: calc(var(--header-height) * -1);
+}
 .pc-header-block__content-wrapper {
   margin: 0 8px;
   height: 100%;

package/build/cjs/blocks/Header/Header.js

@@ -12,6 +12,7 @@ const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const utils_2 = require("../../utils");
 const BackButton_1 = tslib_1.__importDefault(require("./BackButton/BackButton"));
+const BackgroundEffect_1 = tslib_1.__importDefault(require("./BackgroundEffect/BackgroundEffect"));
 const Breadcrumbs_1 = tslib_1.__importDefault(require("./Breadcrumbs/Breadcrumbs"));
 const HeaderButtons_1 = tslib_1.__importDefault(require("./HeaderButtons/HeaderButtons"));
 const HeaderDescription_1 = tslib_1.__importDefault(require("./HeaderDescription/HeaderDescription"));
@@ -30,7 +31,7 @@ const Background = ({ background, isMobile }) => {
 const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 // eslint-disable-next-line complexity
 const HeaderBlock = (props) => {
-    const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', } = props;
+    const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, } = props;
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { backButton, blockTag } = (0, react_1.useContext)(headerContext_1.HeaderContext);
     const theme = (0, theme_1.useTheme)();
@@ -48,9 +49,11 @@ const HeaderBlock = (props) => {
             ['full-width']: fullWidth,
             ['media-view']: mediaView,
             ['controls-view']: textTheme,
+            ['header-space']: headerSpace,
         }, className) },
         backgroundThemed && fullWidth && react_1.default.createElement(FullWidthBackground, { background: backgroundThemed }),
         backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
+        backgroundEffect && backgroundEffect.firstSrc && backgroundEffect.secondSrc && (react_1.default.createElement(BackgroundEffect_1.default, Object.assign({}, backgroundEffect))),
         react_1.default.createElement(grid_1.Grid, { containerClass: b('container-fluid') },
             react_1.default.createElement(Breadcrumbs_1.default, { breadcrumbs: breadcrumbs, theme: textTheme }),
             react_1.default.createElement(BackButton_1.default, { backButton: verticalOffset !== '0' && !breadcrumbs ? backButton : undefined, theme: textTheme }),

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

@@ -979,6 +979,22 @@ export declare const HeaderProperties: {
             };
         };
     };
+    backgroundEffect: {
+        type: string;
+        additionalProperties: boolean;
+        required: boolean;
+        properties: {
+            firstSrc: {
+                type: string;
+            };
+            secondSrc: {
+                type: string;
+            };
+        };
+    };
+    headerSpace: {
+        type: string;
+    };
 };
 export declare const HeaderBlock: {
     'header-block': {
@@ -1648,6 +1664,22 @@ export declare const HeaderBlock: {
                     };
                 };
             };
+            backgroundEffect: {
+                type: string;
+                additionalProperties: boolean;
+                required: boolean;
+                properties: {
+                    firstSrc: {
+                        type: string;
+                    };
+                    secondSrc: {
+                        type: string;
+                    };
+                };
+            };
+            headerSpace: {
+                type: string;
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -190,6 +190,18 @@ exports.HeaderProperties = {
             },
         },
     },
+    backgroundEffect: {
+        type: 'object',
+        additionalProperties: false,
+        required: true,
+        properties: {
+            firstSrc: { type: 'string' },
+            secondSrc: { type: 'string' },
+        },
+    },
+    headerSpace: {
+        type: 'boolean',
+    },
 };
 exports.HeaderBlock = {
     'header-block': {

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

@@ -673,6 +673,22 @@ export declare const HeaderSliderBlock: {
                                 };
                             };
                         };
+                        backgroundEffect: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: boolean;
+                            properties: {
+                                firstSrc: {
+                                    type: string;
+                                };
+                                secondSrc: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        headerSpace: {
+                            type: string;
+                        };
                     };
                 };
             };

package/build/cjs/blocks/HighlightTable/Cell.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HighlightTableCell } from '../../models';
+type Props = {
+    cell: HighlightTableCell | string;
+    justify?: 'left' | 'center' | 'right';
+    columnWidth?: number;
+};
+export declare const Cell: ({ cell, justify, columnWidth }: Props) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ cell, justify, columnWidth }: Props) => JSX.Element>;
+export default _default;

package/build/cjs/blocks/HighlightTable/Cell.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cell = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('highlight-table-block');
+const justifyMap = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end',
+};
+const Cell = ({ cell, justify, columnWidth }) => {
+    const style = (0, react_1.useMemo)(() => ({
+        textAlign: justify !== null && justify !== void 0 ? justify : 'left',
+        alignItems: justify ? justifyMap[justify] : 'flex-start',
+        width: `calc(var(--block-width) * ${1 / (12 / ((typeof cell === 'object' && cell.columnWidth) || columnWidth || 2))})`,
+    }), [cell, columnWidth, justify]);
+    return (react_1.default.createElement("div", { className: b('cell'), style: style },
+        react_1.default.createElement(components_1.HTML, null, typeof cell === 'object' ? cell.cell : cell),
+        typeof cell === 'object' && cell.buttonText && (react_1.default.createElement(components_1.Button, { url: cell.buttonUrl, text: cell.buttonText, theme: "action", className: b('button') }))));
+};
+exports.Cell = Cell;
+exports.default = react_1.default.memo(exports.Cell);

package/build/cjs/blocks/HighlightTable/HighlightTable.css

@@ -68,11 +68,29 @@ unpredictable css rules order in build */
 .pc-highlight-table-block__row {
   display: flex;
   padding: 12px;
+  transition: padding 0.8s ease 0.5s, background-color 0.5s ease;
+  background-color: var(--ps-ht-color);
 }
 .pc-highlight-table-block__row + .pc-highlight-table-block__row {
   border-top: 1px solid var(--g-color-private-black-100);
 }
+.pc-highlight-table-block__body .pc-highlight-table-block__row:hover {
+  transition: padding 0.8s ease, background-color 0.5s ease;
+  background-color: var(--ps-ht-hover-color, var(--ps-ht-color));
+}
+.pc-highlight-table-block__body .pc-highlight-table-block__row:hover .pc-highlight-table-block__button {
+  opacity: 1;
+  transform: translateY(4px);
+  max-height: 100px;
+  transition: transform 0.5s ease, max-height 0.5s ease, opacity 0.3s ease 0.5s;
+}
+.pc-highlight-table-block__body .pc-highlight-table-block__row_increase:hover {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
 .pc-highlight-table-block__cell {
+  display: flex;
+  flex-direction: column;
   padding-right: 8px;
   padding-left: 8px;
 }
@@ -103,4 +121,11 @@ unpredictable css rules order in build */
     background-color: var(--g-color-private-black-400);
     transition: transform ease 50ms;
   }
+}
+.pc-highlight-table-block__button {
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  display: block;
+  transition: transform 0.5s ease 0.3s, max-height 0.5s ease 0.3s, opacity 0.3s ease;
 }

package/build/cjs/blocks/HighlightTable/HighlightTable.d.ts

@@ -1,3 +1,3 @@
 import { HighlightTableBlockProps } from '../../models';
-export declare const HighlightTableBlock: ({ title, description, table, legend, contentSize, legendPosition, legendAlign, }: HighlightTableBlockProps) => JSX.Element;
+export declare const HighlightTableBlock: ({ title, description, table, legend, contentSize, legendPosition, legendAlign, rowHoverColor, rowHoverIncrease, }: HighlightTableBlockProps) => JSX.Element;
 export default HighlightTableBlock;

package/build/cjs/blocks/HighlightTable/HighlightTable.js

@@ -7,6 +7,8 @@ const uikit_1 = require("@gravity-ui/uikit");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
+const Cell_1 = tslib_1.__importDefault(require("./Cell"));
+const Row_1 = tslib_1.__importDefault(require("./Row"));
 const b = (0, utils_1.block)('highlight-table-block');
 const getTextStyles = (contentSize) => {
     switch (contentSize) {
@@ -16,7 +18,7 @@ const getTextStyles = (contentSize) => {
             return 'body-1';
     }
 };
-const HighlightTableBlock = ({ title, description, table, legend = [], contentSize = 's', legendPosition = 'top', legendAlign = 'center', }) => {
+const HighlightTableBlock = ({ title, description, table, legend = [], contentSize = 's', legendPosition = 'top', legendAlign = 'center', rowHoverColor, rowHoverIncrease, }) => {
     const firstRow = table.content[0] || [];
     const otherRows = table.content.slice(1);
     const customColumnWidth = table.customColumnWidth || [];
@@ -74,30 +76,29 @@ const HighlightTableBlock = ({ title, description, table, legend = [], contentSi
             window.removeEventListener('resize', updateProgress);
         };
     }, []);
-    const renderRow = (0, react_1.useCallback)((row, index) => {
-        var _a, _b;
-        return (react_1.default.createElement("div", { key: index, className: b('row'), style: { backgroundColor: (_b = (_a = table.highlighter) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '' } }, row.map((cell, cellIndex) => {
-            var _a, _b, _c;
-            return (react_1.default.createElement("div", { key: cellIndex, className: b('cell'), style: {
-                    textAlign: (_b = (_a = table.justify) === null || _a === void 0 ? void 0 : _a[cellIndex]) !== null && _b !== void 0 ? _b : 'left',
-                    width: `calc(var(--block-width) * ${1 / (12 / (((_c = table.customColumnWidth) === null || _c === void 0 ? void 0 : _c[cellIndex]) || 2))})`,
-                } },
-                react_1.default.createElement(components_1.HTML, null, cell)));
-        })));
-    }, [table.customColumnWidth, table.highlighter, table.justify]);
     const renderLegend = (0, react_1.useMemo)(() => Boolean(legend.length) && (react_1.default.createElement("div", { className: `${b('legend', {
             left: legendAlign === 'left',
             right: legendAlign === 'right',
             'position-top': legendPosition === 'top',
             'position-bottom': legendPosition === 'bottom',
         })} ${textStyles}` }, legend.map((item, index) => (react_1.default.createElement(components_1.HTML, { className: b('legend-item'), block: true, key: String(index) }, item))))), [legend, legendAlign, legendPosition, textStyles]);
-    return (react_1.default.createElement("div", { ref: blockRef, className: b() },
+    const rootStyle = (0, react_1.useMemo)(() => ({
+        ['--ps-ht-hover-color']: rowHoverColor,
+    }), [rowHoverColor]);
+    return (react_1.default.createElement("div", { ref: blockRef, className: b(), style: rootStyle },
         (title || description) && (react_1.default.createElement(components_1.Title, { className: b('title'), title: title, subtitle: description })),
         legendPosition === 'top' && renderLegend,
         react_1.default.createElement("div", { ref: tableRef, className: `${b('table')} ${textStyles}` },
             react_1.default.createElement("div", { ref: tableContentRef, className: b('content') },
-                react_1.default.createElement("div", { className: b('head') }, renderRow(firstRow, 0)),
-                react_1.default.createElement("div", { className: b('body') }, otherRows.map(renderRow)))),
+                react_1.default.createElement("div", { className: b('head') },
+                    react_1.default.createElement("div", { className: b('row') }, firstRow.map((cell, index) => {
+                        var _a, _b;
+                        return (react_1.default.createElement(Cell_1.default, { key: index, cell: cell, justify: (_a = table.justify) === null || _a === void 0 ? void 0 : _a[index], columnWidth: (_b = table.customColumnWidth) === null || _b === void 0 ? void 0 : _b[index] }));
+                    }))),
+                react_1.default.createElement("div", { className: b('body') }, otherRows.map((row, index) => {
+                    var _a;
+                    return (react_1.default.createElement(Row_1.default, { key: index, row: row, rowHoverIncrease: rowHoverIncrease, color: (_a = table.highlighter) === null || _a === void 0 ? void 0 : _a[index], justify: table.justify, customColumnWidth: table.customColumnWidth }));
+                })))),
         react_1.default.createElement("div", { ref: scrollBarRef, className: b('scrollbar') },
             react_1.default.createElement("div", { ref: scrollThumbRef })),
         legendPosition === 'bottom' && renderLegend));

package/build/cjs/blocks/HighlightTable/Row.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { HighlightTableCell } from '../../models';
+type Props = {
+    row: HighlightTableCell[];
+    rowHoverIncrease?: boolean;
+    color?: string;
+    justify?: ('left' | 'center' | 'right')[];
+    customColumnWidth?: number[];
+};
+export declare const Row: ({ row, rowHoverIncrease, color, justify, customColumnWidth }: Props) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ row, rowHoverIncrease, color, justify, customColumnWidth }: Props) => JSX.Element>;
+export default _default;

package/build/cjs/blocks/HighlightTable/Row.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../utils");
+const Cell_1 = tslib_1.__importDefault(require("./Cell"));
+const b = (0, utils_1.block)('highlight-table-block');
+const Row = ({ row, rowHoverIncrease, color, justify, customColumnWidth }) => {
+    const style = (0, react_1.useMemo)(() => color
+        ? {
+            ['--ps-ht-color']: color,
+        }
+        : {}, [color]);
+    return (react_1.default.createElement("div", { className: b('row', { increase: rowHoverIncrease }), style: style }, row.map((cell, cellIndex) => (react_1.default.createElement(Cell_1.default, { key: cellIndex, cell: cell, justify: justify === null || justify === void 0 ? void 0 : justify[cellIndex], columnWidth: customColumnWidth === null || customColumnWidth === void 0 ? void 0 : customColumnWidth[cellIndex] })))));
+};
+exports.Row = Row;
+exports.default = react_1.default.memo(exports.Row);

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

@@ -32,7 +32,31 @@ export declare const HighlightTable: {
                 items: {
                     type: string;
                     items: {
-                        type: string;
+                        oneOf: ({
+                            type: string;
+                            additionalProperties: boolean;
+                            required: string[];
+                            properties: {
+                                cell: {
+                                    type: string;
+                                };
+                                buttonText: {
+                                    type: string;
+                                };
+                                buttonUrl: {
+                                    type: string;
+                                };
+                                columnWidth: {
+                                    type: string;
+                                    enum: number[];
+                                };
+                            };
+                        } | {
+                            type: string;
+                            additionalProperties?: undefined;
+                            required?: undefined;
+                            properties?: undefined;
+                        })[];
                     };
                 };
             };
@@ -56,6 +80,12 @@ export declare const HighlightTable: {
                     enum: number[];
                 };
             };
+            rowHoverColor: {
+                type: string;
+            };
+            rowHoverIncrease: {
+                type: string;
+            };
             type: {};
             when: {
                 type: string;
@@ -101,7 +131,31 @@ export declare const HighlightTableBlock: {
                         items: {
                             type: string;
                             items: {
-                                type: string;
+                                oneOf: ({
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: string[];
+                                    properties: {
+                                        cell: {
+                                            type: string;
+                                        };
+                                        buttonText: {
+                                            type: string;
+                                        };
+                                        buttonUrl: {
+                                            type: string;
+                                        };
+                                        columnWidth: {
+                                            type: string;
+                                            enum: number[];
+                                        };
+                                    };
+                                } | {
+                                    type: string;
+                                    additionalProperties?: undefined;
+                                    required?: undefined;
+                                    properties?: undefined;
+                                })[];
                             };
                         };
                     };
@@ -125,6 +179,12 @@ export declare const HighlightTableBlock: {
                             enum: number[];
                         };
                     };
+                    rowHoverColor: {
+                        type: string;
+                    };
+                    rowHoverIncrease: {
+                        type: string;
+                    };
                     type: {};
                     when: {
                         type: string;

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

@@ -35,7 +35,31 @@ exports.HighlightTable = {
                 items: {
                     type: 'array',
                     items: {
-                        type: 'string',
+                        oneOf: [
+                            {
+                                type: 'object',
+                                additionalProperties: false,
+                                required: ['cell'],
+                                properties: {
+                                    cell: {
+                                        type: 'string',
+                                    },
+                                    buttonText: {
+                                        type: 'string',
+                                    },
+                                    buttonUrl: {
+                                        type: 'string',
+                                    },
+                                    columnWidth: {
+                                        type: 'number',
+                                        enum: [12, 6, 4, 3, 2],
+                                    },
+                                },
+                            },
+                            {
+                                type: 'string',
+                            },
+                        ],
                     },
                 },
             }, justify: {
@@ -55,6 +79,10 @@ exports.HighlightTable = {
                     type: 'string',
                     enum: [12, 6, 4, 3, 2],
                 },
+            }, rowHoverColor: {
+                type: 'string',
+            }, rowHoverIncrease: {
+                type: 'boolean',
             } }),
     },
 };

package/build/cjs/blocks/LogoRotator/Item.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LogoRotatorBlockProps } from '../../models';
+type Props = {
+    src: string;
+    url: string;
+    hidden: boolean;
+    colSizes: LogoRotatorBlockProps['colSizes'];
+};
+export declare const Item: ({ url, src, hidden, colSizes }: Props) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ url, src, hidden, colSizes }: Props) => JSX.Element>;
+export default _default;

package/build/cjs/blocks/LogoRotator/Item.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../components");
+const grid_1 = require("../../grid");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('logo-rotator-block');
+const defaultColSizes = { all: 3 };
+const Item = ({ url, src, hidden, colSizes }) => {
+    const renderItem = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Link, { href: url, className: b('item', { hidden }) },
+        react_1.default.createElement(components_1.Image, { src: src, className: b('image'), alt: "", "aria-hidden": "true" }))), [hidden, src, url]);
+    return react_1.default.createElement(grid_1.Col, { sizes: colSizes || defaultColSizes }, renderItem);
+};
+exports.Item = Item;
+exports.default = react_1.default.memo(exports.Item);

package/build/cjs/blocks/LogoRotator/LogoRotator.css

@@ -0,0 +1,44 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+@media (min-width: 769px) {
+  .pc-logo-rotator-block.pc-AnimateBlock, .pc-AnimateBlock .pc-logo-rotator-block {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-logo-rotator-block.pc-AnimateBlock.animate, .pc-AnimateBlock .pc-logo-rotator-block.animate {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
+.pc-logo-rotator-block__row {
+  justify-content: center;
+}
+.pc-logo-rotator-block__items {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  gap: 16px;
+}
+.pc-logo-rotator-block__item {
+  display: block;
+  height: 100px;
+  transition: opacity 0.5s ease 0.1s;
+  opacity: 1;
+}
+.pc-logo-rotator-block__item_hidden {
+  opacity: 0;
+}
+@media (max-width: 769px) {
+  .pc-logo-rotator-block__item {
+    height: 80px;
+  }
+}
+.pc-logo-rotator-block__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

package/build/cjs/blocks/LogoRotator/LogoRotator.d.ts

@@ -0,0 +1,3 @@
+import { LogoRotatorBlockProps } from '../../models';
+export declare const LogoRotatorBlock: (props: LogoRotatorBlockProps) => JSX.Element;
+export default LogoRotatorBlock;