@gravity-ui/page-constructor 5.16.1 → 5.17.0

package/build/cjs/editor/data/templates/slider-new-block.json

@@ -0,0 +1,46 @@
+{
+  "template": {
+    "type": "slider-new-block",
+    "title": {
+      "text": "Slider new",
+      "url": "https://example.com"
+    },
+    "children": [
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAyN0MyMi4wNzUxIDI3IDI3IDIyLjA3NTEgMjcgMTZDMjcgOS45MjQ4NyAyMi4wNzUxIDUgMTYgNUM5LjkyNDg3IDUgNSA5LjkyNDg3IDUgMTZDNSAyMi4wNzUxIDkuOTI0ODcgMjcgMTYgMjdaTTE2IDMwQzIzLjczMiAzMCAzMCAyMy43MzIgMzAgMTZDMzAgOC4yNjgwMSAyMy43MzIgMiAxNiAyQzguMjY4MDEgMiAyIDguMjY4MDEgMiAxNkMyIDIzLjczMiA4LjI2ODAxIDMwIDE2IDMwWiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4K"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAyN0MyMi4wNzUxIDI3IDI3IDIyLjA3NTEgMjcgMTZDMjcgOS45MjQ4NyAyMi4wNzUxIDUgMTYgNUM5LjkyNDg3IDUgNSA5LjkyNDg3IDUgMTZDNSAyMi4wNzUxIDkuOTI0ODcgMjcgMTYgMjdaTTE2IDMwQzIzLjczMiAzMCAzMCAyMy43MzIgMzAgMTZDMzAgOC4yNjgwMSAyMy43MzIgMiAxNiAyQzguMjY4MDEgMiAyIDguMjY4MDEgMiAxNkMyIDIzLjczMiA4LjI2ODAxIDMwIDE2IDMwWiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4K"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAyN0MyMi4wNzUxIDI3IDI3IDIyLjA3NTEgMjcgMTZDMjcgOS45MjQ4NyAyMi4wNzUxIDUgMTYgNUM5LjkyNDg3IDUgNSA5LjkyNDg3IDUgMTZDNSAyMi4wNzUxIDkuOTI0ODcgMjcgMTYgMjdaTTE2IDMwQzIzLjczMiAzMCAzMCAyMy43MzIgMzAgMTZDMzAgOC4yNjgwMSAyMy43MzIgMiAxNiAyQzguMjY4MDEgMiAyIDguMjY4MDEgMiAxNkMyIDIzLjczMiA4LjI2ODAxIDMwIDE2IDMwWiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4K"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAyN0MyMi4wNzUxIDI3IDI3IDIyLjA3NTEgMjcgMTZDMjcgOS45MjQ4NyAyMi4wNzUxIDUgMTYgNUM5LjkyNDg3IDUgNSA5LjkyNDg3IDUgMTZDNSAyMi4wNzUxIDkuOTI0ODcgMjcgMTYgMjdaTTE2IDMwQzIzLjczMiAzMCAzMCAyMy43MzIgMzAgMTZDMzAgOC4yNjgwMSAyMy43MzIgMiAxNiAyQzguMjY4MDEgMiAyIDguMjY4MDEgMiAxNkMyIDIzLjczMiA4LjI2ODAxIDMwIDE2IDMwWiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4K"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAyN0MyMi4wNzUxIDI3IDI3IDIyLjA3NTEgMjcgMTZDMjcgOS45MjQ4NyAyMi4wNzUxIDUgMTYgNUM5LjkyNDg3IDUgNSA5LjkyNDg3IDUgMTZDNSAyMi4wNzUxIDkuOTI0ODcgMjcgMTYgMjdaTTE2IDMwQzIzLjczMiAzMCAzMCAyMy43MzIgMzAgMTZDMzAgOC4yNjgwMSAyMy43MzIgMiAxNiAyQzguMjY4MDEgMiAyIDguMjY4MDEgMiAxNkMyIDIzLjczMiA4LjI2ODAxIDMwIDE2IDMwWiIgZmlsbD0iIzI2MjYyNiIvPgo8L3N2Zz4K"
+      }
+    ]
+  }
+}

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

@@ -24,7 +24,8 @@ export declare enum BlockType {
     ShareBlock = "share-block",
     MapBlock = "map-block",
     FilterBlock = "filter-block",
-    FormBlock = "form-block"
+    FormBlock = "form-block",
+    SliderNewBlock = "slider-new-block"
 }
 export declare const BlockTypes: BlockType[];
 export declare const HeaderBlockTypes: BlockType[];
@@ -79,6 +80,19 @@ export interface SliderProps extends Childable, Animatable, LoadableChildren {
     randomOrder?: boolean;
     adaptive?: boolean;
 }
+export interface SliderNewProps extends Childable, Animatable, LoadableChildren {
+    dots?: boolean;
+    arrows?: boolean;
+    slidesToShow?: SlidesToShow;
+    disclaimer?: {
+        text: string;
+        size?: TextSize;
+    };
+    title?: TitleItemBaseProps;
+    description?: string;
+    autoplay?: number;
+    randomOrder?: boolean;
+}
 export interface HeaderSliderBlockProps extends Omit<SliderProps, 'title' | 'description'> {
     items: HeaderBlockProps[];
 }
@@ -395,6 +409,10 @@ export type ShareBLockModel = {
 export type FormBlockModel = {
     type: BlockType.FormBlock;
 } & FormBlockProps;
+export type SliderNewBlockModel = {
+    type: BlockType.SliderNewBlock;
+} & SliderNewProps;
 type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | TableBlockModel | TabsBlockModel | HeaderBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel | FormBlockModel;
-export type Block = BlockModels & BlockBaseProps;
+type UnstableBlockModels = SliderNewBlockModel;
+export type Block = (BlockModels | UnstableBlockModels) & BlockBaseProps;
 export {};

package/build/cjs/models/constructor-items/blocks.js

@@ -22,6 +22,8 @@ var BlockType;
     BlockType["MapBlock"] = "map-block";
     BlockType["FilterBlock"] = "filter-block";
     BlockType["FormBlock"] = "form-block";
+    // unstable
+    BlockType["SliderNewBlock"] = "slider-new-block";
 })(BlockType = exports.BlockType || (exports.BlockType = {}));
 exports.BlockTypes = Object.values(BlockType);
 exports.HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];

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

@@ -132,7 +132,7 @@ export declare const cardSchemas: {
                 };
             } | undefined;
             controlPosition: {
-                type: string; /** @deprecated */
+                type: string;
                 enum: string[];
             };
             border: {
@@ -1012,6 +1012,7 @@ export declare const cardSchemas: {
                     };
                     descriptionSize: {
                         type: string;
+                        /** @deprecated */
                         enum: string[];
                     };
                     titleColor: {

package/build/cjs/schema/constants.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.constructorCardSchemaNames = exports.constructorBlockSchemaNames = exports.cardSchemas = exports.blockSchemas = void 0;
 const blocks_1 = require("./validators/blocks");
 const sub_blocks_1 = require("./validators/sub-blocks");
-exports.blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.BannerBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.MapBlock), blocks_1.InfoBlock), blocks_1.TableBlock), blocks_1.TabsBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), blocks_1.ShareBlock), blocks_1.FilterBlock), blocks_1.FormBlock);
+exports.blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.BannerBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.MapBlock), blocks_1.InfoBlock), blocks_1.TableBlock), blocks_1.TabsBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), blocks_1.ShareBlock), blocks_1.FilterBlock), blocks_1.FormBlock), blocks_1.SliderNewBlock);
 exports.cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.MediaCardBlock), blocks_1.BannerCard), sub_blocks_1.PriceDetailedBlock), sub_blocks_1.BackgroundCard), sub_blocks_1.Quote), sub_blocks_1.BasicCard), sub_blocks_1.PriceCardBlock), sub_blocks_1.ImageCard);
 exports.constructorBlockSchemaNames = [
     'divider',

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

@@ -17,3 +17,4 @@ export * from '../../blocks/ContentLayout/schema';
 export * from '../../blocks/Share/schema';
 export * from '../../blocks/FilterBlock/schema';
 export * from '../../blocks/Form/schema';
+export * from '../../blocks/SliderNew/schema';

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

@@ -20,3 +20,4 @@ tslib_1.__exportStar(require("../../blocks/ContentLayout/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/Share/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/FilterBlock/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/Form/schema"), exports);
+tslib_1.__exportStar(require("../../blocks/SliderNew/schema"), exports);

package/build/cjs/sub-blocks/Quote/Quote.css

@@ -35,6 +35,9 @@ unpredictable css rules order in build */
   .slick-slide:not(.slick-active) .pc-quote {
     box-shadow: none;
   }
+  .swiper-slide:not(.swiper-slide-visible) .pc-quote {
+    box-shadow: none;
+  }
 }
 .pc-quote__logo {
   height: 48px;

package/build/esm/blocks/SliderNew/Arrow/Arrow.css

@@ -0,0 +1,62 @@
+.pc-slider-new-block-arrow__button {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+.pc-slider-new-block-arrow__button:hover {
+  box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
+  cursor: pointer;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-slider-new-block-arrow__icon-wrapper, .pc-slider-new-block-arrow__button, .pc-slider-new-block-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pc-slider-new-block-arrow {
+  width: 42px;
+  height: 42px;
+  cursor: pointer;
+}
+@media (max-width: 576px) {
+  .pc-slider-new-block-arrow {
+    display: none;
+  }
+}
+.pc-slider-new-block-arrow_type_left .pc-slider-new-block-arrow__icon-wrapper {
+  transform: rotate(180deg);
+}
+.pc-slider-new-block-arrow__button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  width: 42px;
+  height: 42px;
+  color: var(--g-color-text-secondary);
+  border-radius: 100%;
+  background-color: var(--g-color-base-background);
+  box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
+  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.pc-slider-new-block-arrow__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-slider-new-block-arrow__button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-slider-new-block-arrow:hover .pc-slider-new-block-arrow__button {
+  color: var(--g-color-text-primary);
+  box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
+}
+.pc-slider-new-block-arrow__icon {
+  position: relative;
+}

package/build/esm/blocks/SliderNew/Arrow/Arrow.d.ts

@@ -0,0 +1,10 @@
+import { ClassNameProps } from '../../../models';
+import './Arrow.css';
+export type ArrowType = 'left' | 'right';
+export interface ArrowProps {
+    type: ArrowType;
+    onClick?: () => void;
+    size?: number;
+}
+declare const Arrow: ({ type, onClick, className, size }: ArrowProps & ClassNameProps) => JSX.Element;
+export default Arrow;

package/build/esm/blocks/SliderNew/Arrow/Arrow.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';
+import { block } from '../../../utils';
+import { i18n } from '../i18n';
+import './Arrow.css';
+const b = block('slider-new-block-arrow');
+const Arrow = ({ type, onClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className) },
+    React.createElement("button", { className: b('button'), onClick: onClick, "aria-label": i18n(`arrow-${type}`) },
+        React.createElement("span", { className: b('icon-wrapper') },
+            React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
+export default Arrow;