@doyourjob/gravity-ui-page-constructor 5.31.263 → 5.31.265

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

@@ -9,7 +9,6 @@ const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('logo-rotator-block');
-const defaultColSizes = { all: 3 };
 const getLayerClassName = (layer, swapAnimation, link = false) => `${link ? `${b('item-link')} ` : ''}${b('logo-layer', (0, utils_2.getLayerModifiers)(layer, swapAnimation))}`;
 const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }) => {
     const renderLayer = (layerSrc, layer, layerUrl) => {
@@ -20,7 +19,7 @@ const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onM
         return react_1.default.createElement("div", { className: getLayerClassName(layer, swapAnimation) }, image);
     };
     const isSwapping = Boolean(previousSrc);
-    return (react_1.default.createElement(grid_1.Col, { sizes: colSizes || defaultColSizes },
+    return (react_1.default.createElement(grid_1.Col, { sizes: (0, utils_2.getLogoRotatorColSizes)(colSizes) },
         react_1.default.createElement("div", { className: b('item', { swapping: isSwapping }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
             previousSrc && renderLayer(previousSrc, 'from', previousUrl),
             renderLayer(src, previousSrc ? 'to' : 'current', url))));

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

@@ -132,6 +132,13 @@ unpredictable css rules order in build */
   flex: 1;
   overflow: hidden;
 }
+@media (max-width: 769px) {
+  .pc-logo-rotator-block__row-item {
+    min-width: 0;
+    max-width: calc(50% - 8px);
+    flex: 0 0 calc(50% - 8px);
+  }
+}
 
 @keyframes logo-rotator-fade-out {
   from {

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

@@ -15,6 +15,10 @@ const utils_2 = require("./utils");
 const b = (0, utils_1.block)('logo-rotator-block');
 const DEFAULT_MIN_ROTATE_COUNT = 2;
 const DEFAULT_MAX_ROTATE_COUNT = 4;
+const GRID_COLUMNS_COUNT = 12;
+const MIN_COLUMN_COUNT = 2;
+const MAX_COLUMN_COUNT = 7;
+const ROW_MODE_ITEM_MIN_WIDTH = 160;
 const emptyTransitions = (count) => Array(count).fill(undefined);
 const pickRandomSlots = (slotIndices, count) => {
     const shuffled = [...slotIndices];
@@ -24,10 +28,58 @@ const pickRandomSlots = (slotIndices, count) => {
     }
     return shuffled.slice(0, count);
 };
+const getFiniteCssValue = (value) => {
+    const result = Number.parseFloat(value);
+    return Number.isFinite(result) ? result : 0;
+};
+const getSupportedColumnCount = (columns) => {
+    const columnCount = Math.min(Math.max(Math.floor(columns), MIN_COLUMN_COUNT), MAX_COLUMN_COUNT);
+    return String(columnCount);
+};
+const getActiveGridColumnCount = (colSizes, breakpoint) => {
+    const activeColSize = (0, utils_2.getActiveBreakpointValue)((0, utils_2.getLogoRotatorColSizes)(colSizes), breakpoint);
+    return getSupportedColumnCount(GRID_COLUMNS_COUNT / activeColSize);
+};
+const getRowModeColumnCount = (width, gap) => {
+    const columns = Math.floor((width + gap) / (ROW_MODE_ITEM_MIN_WIDTH + gap));
+    return getSupportedColumnCount(columns);
+};
+const getActiveCount = (count, columnCount) => count[columnCount];
+const noop = () => { };
+const useRowModeColumnCount = (rowMode, breakpoint, rowItemsRef) => {
+    const [columnCount, setColumnCount] = (0, react_1.useState)(getSupportedColumnCount(MIN_COLUMN_COUNT));
+    (0, react_1.useEffect)(() => {
+        if (!rowMode) {
+            setColumnCount(getSupportedColumnCount(MIN_COLUMN_COUNT));
+            return noop;
+        }
+        const rowItems = rowItemsRef.current;
+        if (!rowItems)
+            return noop;
+        const updateColumnCount = (width) => {
+            const nextColumnCount = breakpoint <= constants_1.BREAKPOINTS.md
+                ? getSupportedColumnCount(MIN_COLUMN_COUNT)
+                : getRowModeColumnCount(width, getFiniteCssValue(window.getComputedStyle(rowItems).columnGap));
+            setColumnCount((currentColumnCount) => currentColumnCount === nextColumnCount ? currentColumnCount : nextColumnCount);
+        };
+        updateColumnCount(rowItems.clientWidth);
+        if (typeof ResizeObserver === 'undefined')
+            return noop;
+        const observer = new ResizeObserver(([entry]) => {
+            updateColumnCount(entry.contentRect.width);
+        });
+        observer.observe(rowItems);
+        return () => observer.disconnect();
+    }, [breakpoint, rowItemsRef, rowMode]);
+    return columnCount;
+};
 const LogoRotatorBlock = (props) => {
-    const { animated, title, text, theme, items, countMobile, countDesktop, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, swapAnimation = utils_2.DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
+    const { animated, title, text, theme, items, count, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, swapAnimation = utils_2.DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
     const breakpoint = (0, useWindowBreakpoint_1.default)();
-    const activeCount = countDesktop !== undefined && breakpoint >= constants_1.BREAKPOINTS.md ? countDesktop : countMobile;
+    const rowItemsRef = (0, react_1.useRef)(null);
+    const rowModeColumnCount = useRowModeColumnCount(rowMode, breakpoint, rowItemsRef);
+    const gridColumnCount = (0, react_1.useMemo)(() => getActiveGridColumnCount(colSizes, breakpoint), [breakpoint, colSizes]);
+    const activeCount = getActiveCount(count, rowMode ? rowModeColumnCount : gridColumnCount);
     // Индексы логотипов, которые участвуют в ротации (не статичные)
     const rotatableIndices = (0, react_1.useMemo)(() => items.map((item, i) => (item.isStatic ? -1 : i)).filter((i) => i !== -1), [items]);
     // Инициализация слотов: статичные вставляются в начало, остальные по порядку
@@ -151,7 +203,7 @@ const LogoRotatorBlock = (props) => {
             title || text ? (react_1.default.createElement("div", { className: b('head') },
                 title && react_1.default.createElement("h2", { className: b('title') }, title),
                 text && react_1.default.createElement("div", { className: b('text') }, text))) : null,
-            rowMode ? (react_1.default.createElement("div", { className: b('row-items') }, slots.map((slot, index) => {
+            rowMode ? (react_1.default.createElement("div", { className: b('row-items'), ref: rowItemsRef }, slots.map((slot, index) => {
                 var _a;
                 const transition = transitions[index];
                 const item = items[(_a = transition === null || transition === void 0 ? void 0 : transition.to) !== null && _a !== void 0 ? _a : slot];

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

@@ -32,11 +32,13 @@ export declare const LogoRotatorBlock: {
                     };
                 };
             };
-            countMobile: {
-                type: string;
-            };
-            countDesktop: {
+            count: {
                 type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: Record<string, {
+                    type: 'number';
+                }>;
             };
             minRotateCount: {
                 type: string;

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

@@ -2,10 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LogoRotatorBlock = void 0;
 const common_1 = require("../../schema/validators/common");
+const countColumns = ['2', '3', '4', '5', '6', '7'];
+const countByColumnsProperties = countColumns.reduce((acc, columns) => (Object.assign(Object.assign({}, acc), { [columns]: { type: 'number' } })), {});
+const countByColumns = {
+    type: 'object',
+    additionalProperties: false,
+    required: countColumns,
+    properties: countByColumnsProperties,
+};
 exports.LogoRotatorBlock = {
     'logo-rotator-block': {
         additionalProperties: false,
-        required: ['items', 'countMobile'],
+        required: ['items', 'count'],
         properties: Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.AnimatableProps), { title: {
                 type: 'string',
             }, text: {
@@ -22,11 +30,7 @@ exports.LogoRotatorBlock = {
                         isStatic: { type: 'boolean' },
                     },
                 },
-            }, countMobile: {
-                type: 'number',
-            }, countDesktop: {
-                type: 'number',
-            }, minRotateCount: {
+            }, count: countByColumns, minRotateCount: {
                 type: 'number',
             }, maxRotateCount: {
                 type: 'number',

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

@@ -1,7 +1,14 @@
+import { GridColumnSize, GridColumnSizesType } from '../../grid';
 import { LogoRotatorBlockProps } from '../../models';
 export type LogoRotatorLayer = 'current' | 'from' | 'to';
 export type LogoRotatorSwapAnimation = NonNullable<LogoRotatorBlockProps['swapAnimation']>;
 export declare const DEFAULT_SWAP_ANIMATION: LogoRotatorSwapAnimation;
 export declare const SWAP_ANIMATION_DURATIONS: Record<LogoRotatorSwapAnimation, number>;
+export declare const getActiveBreakpointValue: <T>(values: Partial<Record<GridColumnSize, T>> & {
+    all: T;
+}, breakpoint: number) => T | (undefined & T);
+export declare const getLogoRotatorColSizes: (colSizes: LogoRotatorBlockProps['colSizes']) => GridColumnSizesType & {
+    all: number;
+};
 export declare const getLayerModifiers: (layer: LogoRotatorLayer, swapAnimation: LogoRotatorSwapAnimation) => Record<string, boolean>;
 export declare const getInitialSlots: (items: LogoRotatorBlockProps['items'], count: number) => number[];

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

@@ -1,11 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInitialSlots = exports.getLayerModifiers = exports.SWAP_ANIMATION_DURATIONS = exports.DEFAULT_SWAP_ANIMATION = void 0;
+exports.getInitialSlots = exports.getLayerModifiers = exports.getLogoRotatorColSizes = exports.getActiveBreakpointValue = exports.SWAP_ANIMATION_DURATIONS = exports.DEFAULT_SWAP_ANIMATION = void 0;
+const constants_1 = require("../../constants");
+const grid_1 = require("../../grid");
 exports.DEFAULT_SWAP_ANIMATION = 'fade';
 exports.SWAP_ANIMATION_DURATIONS = {
     fade: 1100,
     morph: 500,
 };
+const defaultColSizes = { all: 3 };
+const maxMobileColSize = 6;
+const gridBreakpoints = [
+    [grid_1.GridColumnSize.All, constants_1.BREAKPOINTS.xs],
+    [grid_1.GridColumnSize.Sm, constants_1.BREAKPOINTS.sm],
+    [grid_1.GridColumnSize.Md, constants_1.BREAKPOINTS.md],
+    [grid_1.GridColumnSize.Lg, constants_1.BREAKPOINTS.lg],
+    [grid_1.GridColumnSize.Xl, constants_1.BREAKPOINTS.xl],
+];
+const getActiveBreakpointValue = (values, breakpoint) => {
+    let result = values.all;
+    gridBreakpoints.forEach(([size, minWidth]) => {
+        const value = values[size];
+        if (breakpoint >= minWidth && value !== undefined) {
+            result = value;
+        }
+    });
+    return result;
+};
+exports.getActiveBreakpointValue = getActiveBreakpointValue;
+const getLogoRotatorColSizes = (colSizes) => {
+    const sizes = Object.assign(Object.assign({}, defaultColSizes), colSizes);
+    [grid_1.GridColumnSize.All, grid_1.GridColumnSize.Sm].forEach((size) => {
+        const colSize = sizes[size];
+        if (colSize !== undefined) {
+            sizes[size] = Math.min(colSize, maxMobileColSize);
+        }
+    });
+    return sizes;
+};
+exports.getLogoRotatorColSizes = getLogoRotatorColSizes;
 const getLayerModifiers = (layer, swapAnimation) => {
     const animationModifier = layer === 'current' ? undefined : `${swapAnimation}-${layer}`;
     const modifiers = { [layer]: true };

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

@@ -301,6 +301,8 @@ export interface QuestionBlockItemProps extends QuestionItem {
 }
 export interface BannerBlockProps extends BannerCardProps, Animatable {
 }
+export type LogoRotatorColumnCount = '2' | '3' | '4' | '5' | '6' | '7';
+export type LogoRotatorCountConfig = Record<LogoRotatorColumnCount, number>;
 export interface LogoRotatorBlockProps extends Animatable {
     title?: string;
     text?: string;
@@ -309,8 +311,7 @@ export interface LogoRotatorBlockProps extends Animatable {
         src: string;
         isStatic?: boolean;
     }[];
-    countMobile: number;
-    countDesktop?: number;
+    count: LogoRotatorCountConfig;
     minRotateCount?: number;
     maxRotateCount?: number;
     swapAnimation?: 'fade' | 'morph';

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

@@ -3,10 +3,9 @@ import { Link } from '@gravity-ui/uikit';
 import { Image } from '../../components';
 import { Col } from '../../grid';
 import { block } from '../../utils';
-import { getLayerModifiers } from './utils';
+import { getLayerModifiers, getLogoRotatorColSizes } from './utils';
 import './LogoRotator.css';
 const b = block('logo-rotator-block');
-const defaultColSizes = { all: 3 };
 const getLayerClassName = (layer, swapAnimation, link = false) => `${link ? `${b('item-link')} ` : ''}${b('logo-layer', getLayerModifiers(layer, swapAnimation))}`;
 export const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSizes, onMouseEnter, onMouseLeave, }) => {
     const renderLayer = (layerSrc, layer, layerUrl) => {
@@ -17,7 +16,7 @@ export const Item = ({ url, src, previousSrc, previousUrl, swapAnimation, colSiz
         return React.createElement("div", { className: getLayerClassName(layer, swapAnimation) }, image);
     };
     const isSwapping = Boolean(previousSrc);
-    return (React.createElement(Col, { sizes: colSizes || defaultColSizes },
+    return (React.createElement(Col, { sizes: getLogoRotatorColSizes(colSizes) },
         React.createElement("div", { className: b('item', { swapping: isSwapping }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
             previousSrc && renderLayer(previousSrc, 'from', previousUrl),
             renderLayer(src, previousSrc ? 'to' : 'current', url))));

package/build/esm/blocks/LogoRotator/LogoRotator.css

@@ -132,6 +132,13 @@ unpredictable css rules order in build */
   flex: 1;
   overflow: hidden;
 }
+@media (max-width: 769px) {
+  .pc-logo-rotator-block__row-item {
+    min-width: 0;
+    max-width: calc(50% - 8px);
+    flex: 0 0 calc(50% - 8px);
+  }
+}
 
 @keyframes logo-rotator-fade-out {
   from {

package/build/esm/blocks/LogoRotator/LogoRotator.js

@@ -7,11 +7,15 @@ import { Grid, Row } from '../../grid';
 import useWindowBreakpoint from '../../hooks/useWindowBreakpoint';
 import { block } from '../../utils';
 import Item from './Item';
-import { DEFAULT_SWAP_ANIMATION, SWAP_ANIMATION_DURATIONS, getInitialSlots, getLayerModifiers, } from './utils';
+import { DEFAULT_SWAP_ANIMATION, SWAP_ANIMATION_DURATIONS, getActiveBreakpointValue, getInitialSlots, getLayerModifiers, getLogoRotatorColSizes, } from './utils';
 import './LogoRotator.css';
 const b = block('logo-rotator-block');
 const DEFAULT_MIN_ROTATE_COUNT = 2;
 const DEFAULT_MAX_ROTATE_COUNT = 4;
+const GRID_COLUMNS_COUNT = 12;
+const MIN_COLUMN_COUNT = 2;
+const MAX_COLUMN_COUNT = 7;
+const ROW_MODE_ITEM_MIN_WIDTH = 160;
 const emptyTransitions = (count) => Array(count).fill(undefined);
 const pickRandomSlots = (slotIndices, count) => {
     const shuffled = [...slotIndices];
@@ -21,10 +25,58 @@ const pickRandomSlots = (slotIndices, count) => {
     }
     return shuffled.slice(0, count);
 };
+const getFiniteCssValue = (value) => {
+    const result = Number.parseFloat(value);
+    return Number.isFinite(result) ? result : 0;
+};
+const getSupportedColumnCount = (columns) => {
+    const columnCount = Math.min(Math.max(Math.floor(columns), MIN_COLUMN_COUNT), MAX_COLUMN_COUNT);
+    return String(columnCount);
+};
+const getActiveGridColumnCount = (colSizes, breakpoint) => {
+    const activeColSize = getActiveBreakpointValue(getLogoRotatorColSizes(colSizes), breakpoint);
+    return getSupportedColumnCount(GRID_COLUMNS_COUNT / activeColSize);
+};
+const getRowModeColumnCount = (width, gap) => {
+    const columns = Math.floor((width + gap) / (ROW_MODE_ITEM_MIN_WIDTH + gap));
+    return getSupportedColumnCount(columns);
+};
+const getActiveCount = (count, columnCount) => count[columnCount];
+const noop = () => { };
+const useRowModeColumnCount = (rowMode, breakpoint, rowItemsRef) => {
+    const [columnCount, setColumnCount] = useState(getSupportedColumnCount(MIN_COLUMN_COUNT));
+    useEffect(() => {
+        if (!rowMode) {
+            setColumnCount(getSupportedColumnCount(MIN_COLUMN_COUNT));
+            return noop;
+        }
+        const rowItems = rowItemsRef.current;
+        if (!rowItems)
+            return noop;
+        const updateColumnCount = (width) => {
+            const nextColumnCount = breakpoint <= BREAKPOINTS.md
+                ? getSupportedColumnCount(MIN_COLUMN_COUNT)
+                : getRowModeColumnCount(width, getFiniteCssValue(window.getComputedStyle(rowItems).columnGap));
+            setColumnCount((currentColumnCount) => currentColumnCount === nextColumnCount ? currentColumnCount : nextColumnCount);
+        };
+        updateColumnCount(rowItems.clientWidth);
+        if (typeof ResizeObserver === 'undefined')
+            return noop;
+        const observer = new ResizeObserver(([entry]) => {
+            updateColumnCount(entry.contentRect.width);
+        });
+        observer.observe(rowItems);
+        return () => observer.disconnect();
+    }, [breakpoint, rowItemsRef, rowMode]);
+    return columnCount;
+};
 export const LogoRotatorBlock = (props) => {
-    const { animated, title, text, theme, items, countMobile, countDesktop, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, swapAnimation = DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
+    const { animated, title, text, theme, items, count, minRotateCount = DEFAULT_MIN_ROTATE_COUNT, maxRotateCount = DEFAULT_MAX_ROTATE_COUNT, swapAnimation = DEFAULT_SWAP_ANIMATION, colSizes, rowMode, } = props;
     const breakpoint = useWindowBreakpoint();
-    const activeCount = countDesktop !== undefined && breakpoint >= BREAKPOINTS.md ? countDesktop : countMobile;
+    const rowItemsRef = useRef(null);
+    const rowModeColumnCount = useRowModeColumnCount(rowMode, breakpoint, rowItemsRef);
+    const gridColumnCount = useMemo(() => getActiveGridColumnCount(colSizes, breakpoint), [breakpoint, colSizes]);
+    const activeCount = getActiveCount(count, rowMode ? rowModeColumnCount : gridColumnCount);
     // Индексы логотипов, которые участвуют в ротации (не статичные)
     const rotatableIndices = useMemo(() => items.map((item, i) => (item.isStatic ? -1 : i)).filter((i) => i !== -1), [items]);
     // Инициализация слотов: статичные вставляются в начало, остальные по порядку
@@ -148,7 +200,7 @@ export const LogoRotatorBlock = (props) => {
             title || text ? (React.createElement("div", { className: b('head') },
                 title && React.createElement("h2", { className: b('title') }, title),
                 text && React.createElement("div", { className: b('text') }, text))) : null,
-            rowMode ? (React.createElement("div", { className: b('row-items') }, slots.map((slot, index) => {
+            rowMode ? (React.createElement("div", { className: b('row-items'), ref: rowItemsRef }, slots.map((slot, index) => {
                 var _a;
                 const transition = transitions[index];
                 const item = items[(_a = transition === null || transition === void 0 ? void 0 : transition.to) !== null && _a !== void 0 ? _a : slot];

package/build/esm/blocks/LogoRotator/schema.d.ts

@@ -32,11 +32,13 @@ export declare const LogoRotatorBlock: {
                     };
                 };
             };
-            countMobile: {
-                type: string;
-            };
-            countDesktop: {
+            count: {
                 type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: Record<string, {
+                    type: 'number';
+                }>;
             };
             minRotateCount: {
                 type: string;

package/build/esm/blocks/LogoRotator/schema.js

@@ -1,8 +1,16 @@
 import { AnimatableProps, BaseProps, ThemeProps, containerSizesObject, } from '../../schema/validators/common';
+const countColumns = ['2', '3', '4', '5', '6', '7'];
+const countByColumnsProperties = countColumns.reduce((acc, columns) => (Object.assign(Object.assign({}, acc), { [columns]: { type: 'number' } })), {});
+const countByColumns = {
+    type: 'object',
+    additionalProperties: false,
+    required: countColumns,
+    properties: countByColumnsProperties,
+};
 export const LogoRotatorBlock = {
     'logo-rotator-block': {
         additionalProperties: false,
-        required: ['items', 'countMobile'],
+        required: ['items', 'count'],
         properties: Object.assign(Object.assign(Object.assign({}, BaseProps), AnimatableProps), { title: {
                 type: 'string',
             }, text: {
@@ -19,11 +27,7 @@ export const LogoRotatorBlock = {
                         isStatic: { type: 'boolean' },
                     },
                 },
-            }, countMobile: {
-                type: 'number',
-            }, countDesktop: {
-                type: 'number',
-            }, minRotateCount: {
+            }, count: countByColumns, minRotateCount: {
                 type: 'number',
             }, maxRotateCount: {
                 type: 'number',

package/build/esm/blocks/LogoRotator/utils.d.ts

@@ -1,7 +1,14 @@
+import { GridColumnSize, GridColumnSizesType } from '../../grid';
 import { LogoRotatorBlockProps } from '../../models';
 export type LogoRotatorLayer = 'current' | 'from' | 'to';
 export type LogoRotatorSwapAnimation = NonNullable<LogoRotatorBlockProps['swapAnimation']>;
 export declare const DEFAULT_SWAP_ANIMATION: LogoRotatorSwapAnimation;
 export declare const SWAP_ANIMATION_DURATIONS: Record<LogoRotatorSwapAnimation, number>;
+export declare const getActiveBreakpointValue: <T>(values: Partial<Record<GridColumnSize, T>> & {
+    all: T;
+}, breakpoint: number) => T | (undefined & T);
+export declare const getLogoRotatorColSizes: (colSizes: LogoRotatorBlockProps['colSizes']) => GridColumnSizesType & {
+    all: number;
+};
 export declare const getLayerModifiers: (layer: LogoRotatorLayer, swapAnimation: LogoRotatorSwapAnimation) => Record<string, boolean>;
 export declare const getInitialSlots: (items: LogoRotatorBlockProps['items'], count: number) => number[];

package/build/esm/blocks/LogoRotator/utils.js

@@ -1,8 +1,39 @@
+import { BREAKPOINTS } from '../../constants';
+import { GridColumnSize } from '../../grid';
 export const DEFAULT_SWAP_ANIMATION = 'fade';
 export const SWAP_ANIMATION_DURATIONS = {
     fade: 1100,
     morph: 500,
 };
+const defaultColSizes = { all: 3 };
+const maxMobileColSize = 6;
+const gridBreakpoints = [
+    [GridColumnSize.All, BREAKPOINTS.xs],
+    [GridColumnSize.Sm, BREAKPOINTS.sm],
+    [GridColumnSize.Md, BREAKPOINTS.md],
+    [GridColumnSize.Lg, BREAKPOINTS.lg],
+    [GridColumnSize.Xl, BREAKPOINTS.xl],
+];
+export const getActiveBreakpointValue = (values, breakpoint) => {
+    let result = values.all;
+    gridBreakpoints.forEach(([size, minWidth]) => {
+        const value = values[size];
+        if (breakpoint >= minWidth && value !== undefined) {
+            result = value;
+        }
+    });
+    return result;
+};
+export const getLogoRotatorColSizes = (colSizes) => {
+    const sizes = Object.assign(Object.assign({}, defaultColSizes), colSizes);
+    [GridColumnSize.All, GridColumnSize.Sm].forEach((size) => {
+        const colSize = sizes[size];
+        if (colSize !== undefined) {
+            sizes[size] = Math.min(colSize, maxMobileColSize);
+        }
+    });
+    return sizes;
+};
 export const getLayerModifiers = (layer, swapAnimation) => {
     const animationModifier = layer === 'current' ? undefined : `${swapAnimation}-${layer}`;
     const modifiers = { [layer]: true };

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

@@ -301,6 +301,8 @@ export interface QuestionBlockItemProps extends QuestionItem {
 }
 export interface BannerBlockProps extends BannerCardProps, Animatable {
 }
+export type LogoRotatorColumnCount = '2' | '3' | '4' | '5' | '6' | '7';
+export type LogoRotatorCountConfig = Record<LogoRotatorColumnCount, number>;
 export interface LogoRotatorBlockProps extends Animatable {
     title?: string;
     text?: string;
@@ -309,8 +311,7 @@ export interface LogoRotatorBlockProps extends Animatable {
         src: string;
         isStatic?: boolean;
     }[];
-    countMobile: number;
-    countDesktop?: number;
+    count: LogoRotatorCountConfig;
     minRotateCount?: number;
     maxRotateCount?: number;
     swapAnimation?: 'fade' | 'morph';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor",
-  "version": "5.31.263",
+  "version": "5.31.265",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {