@redneckz/wildless-cms-uni-blocks 0.6.35 → 0.6.37

package/mobile/src/utils/minBy.ts

@@ -0,0 +1,5 @@
+import { defaultDiscriminator, maxBy } from './maxBy';
+
+export const minBy = <Item, Value = Item>(
+  discriminator: (item: Item) => Value = defaultDiscriminator,
+) => maxBy((_: Item) => -discriminator(_));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.35",
+  "version": "0.6.37",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -185,7 +185,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "41 kB",
+      "limit": "43 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/common.css

@@ -73,13 +73,6 @@ html {
     scroll-snap-type: x mandatory;
   }
 
-  .horizontal-list-item {
-    flex-shrink: 0;
-    scroll-snap-align: start;
-    scroll-snap-stop: always;
-    width: 100%;
-  }
-
   .gradient-color-text {
     background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
     -webkit-background-clip: text;

package/src/components/Blocks.ts

@@ -10,6 +10,7 @@ import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
+import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
@@ -21,8 +22,8 @@ import { Gallery } from './Gallery/Gallery';
 import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { ImgBlock } from './ImgBlock/ImgBlock';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
-import { InvestmentGallery } from './InvestmentGallery/InvestmentGallery';
 import { InvestmentInfo } from './InvestmentInfo/InvestmentInfo';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
@@ -31,6 +32,7 @@ import { OfficeMap } from './OfficeMap/OfficeMap';
 import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
 import { OtherProducts } from './OtherProducts/OtherProducts';
 import { OtherProductsItem } from './OtherProductsItem/OtherProductsItem';
+import { ParagraphBlock } from './ParagraphBlock/ParagraphBlock';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
@@ -47,11 +49,11 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 import { Video } from './Video/Video';
+import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestmentCard';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
-  CarouselLinks,
   BenefitsBlock,
   BusinessBlock,
   Bonus,
@@ -60,6 +62,8 @@ export const Blocks: BlocksRegistry = {
   Calculator,
   Carousel,
   CarouselCard,
+  CarouselLinks,
+  CarouselProgramsCard,
   CarouselTariffsCard,
   Catalog,
   ContactsBlock,
@@ -71,12 +75,13 @@ export const Blocks: BlocksRegistry = {
   GracePeriod,
   Header,
   Headline,
+  ImgBlock,
   InsuranceAmountBlock,
   InvestmentInfo,
-  InvestmentGallery,
   LinkDocs,
   MiniGallery,
   MobileAppTile,
+  ParagraphBlock,
   PictureText,
   Placeholder,
   ProductBlock,
@@ -97,4 +102,5 @@ export const Blocks: BlocksRegistry = {
   Tile,
   VerticalLayout,
   Video,
+  CarouselInvestmentCard,
 };

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';
@@ -16,7 +16,9 @@ export interface BonusCalculatorProps extends CommonCalculatorProps {
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
   ({ className = '', sourceBookDir = '', buttons, footnote }) => {
     const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
+    const handleTravelExpenseValue = useCallback((_: number) => setTravelExpenseValue(_), []);
     const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
+    const handleRestExpenseValue = useCallback((_: number) => setRestExpenseValue(_), []);
     const userInputParams = {
       travelExpenseValue,
       restExpenseValue,
@@ -36,7 +38,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
               step: 500,
               isShowItems: false,
             },
-            setTravelExpenseValue,
+            handleTravelExpenseValue,
           )}
           {renderWantedSumInput(
             'Сумма покупок в остальных категориях, ₽',
@@ -48,7 +50,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
               step: 500,
               isShowItems: false,
             },
-            setRestExpenseValue,
+            handleRestExpenseValue,
           )}
         </div>
         <div>

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps } from './CalculatorContent';
@@ -37,7 +37,9 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     const [isSalaryClient, toggleIsSalaryClient] = useState(false);
     const [isStateEmployee, toggleIsStateEmployee] = useState(false);
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
+    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
+    const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
     const userInputParams = {
       isAnnuity,
       isInsurance,
@@ -54,9 +56,9 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
           {renderWantedSumInput(
             'Сумма кредита, ₽',
             { ...calculatorParams, step: 500 },
-            setMoneyValue,
+            handleMoneyValue,
           )}
-          {renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue)}
+          {renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue)}
           <div className="mt-7">
             <Checkbox
               text="Получаю зарплату на счёт в Россельхозбанке"

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -1,7 +1,7 @@
 // TEMP
 
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
@@ -34,6 +34,7 @@ const depositTypeItems = [
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
   ({ className = '', sourceBookDir, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
+    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
     const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
     const userInputParams = {
@@ -41,6 +42,8 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       monthsValue,
       isMonthlyInterestPayment,
     };
+    const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
+    const [isEveryMonth, toggleIsEveryMonth] = useState(false);
 
     const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
     const { income, finalSum, rate } = calculatorParams;
@@ -53,14 +56,14 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             {
               ...calculatorParams,
             },
-            setMoneyValue,
+            handleMoneyValue,
           )}
           {renderMonthsInput(
             'Срок вклада, месяцев',
             {
               ...calculatorParams,
             },
-            setMonthsValue,
+            handleMonthsValue,
           )}
         </div>
         <Rate rate={rate || 1} rateBlockClassName="tracking-[-25px]" unit="%" />

package/src/components/Carousel/Carousel.fixture.tsx

@@ -1,9 +1,11 @@
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
+import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import { Carousel } from './Carousel';
+import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 
 const options = {
   blocksRegistry: Blocks,
@@ -66,4 +68,41 @@ export default {
       />
     </div>
   ),
+  program: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={2}
+        isBlur={false}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6)
+            .fill({
+              type: 'CarouselProgramsCard',
+              content: BUSINESS_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: BUSINESS_CARD } : _)),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+  investment: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={true}
+        isCyclic={false}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6).fill({
+            type: 'CarouselInvestmentCard',
+            content: INVESTMENT_CARD_WITH_SINGLE_COLUMN,
+            style: ['col-span-2'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/Carousel/Carousel.tsx

@@ -1,58 +1,77 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { CarouselContainer } from './CarouselContainer';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import {
+  SwipeListScroll,
+  useSwipeListScroll,
+} from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import type { CarouselContent } from './CarouselContent';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
 }
 
+const ITEMS_GAP = 4;
+
 const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
+const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
 
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
     const { blocks: childBlocks } = rest.block || {};
     const count = itemCount || childBlocks?.length || 0;
 
-    const containerRef = useRef<HTMLDivElement | null>(null);
-
-    const [activeIndex, controls] = useCarouselControls({
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
       itemCount: count,
-      visibleItemCount,
       isCyclic,
-      container: containerRef.current,
     });
-    const { isScrollAvailable } = controls;
 
     return (
-      <BlockWrapper className={`relative font-sans overflow-hidden ${className}`} {...rest}>
-        <CarouselContainer
-          activeIndex={activeIndex}
-          itemCount={count}
-          visibleItemCount={visibleItemCount}
+      <BlockWrapper className={`relative font-sans ${className}`} {...rest}>
+        <SwipeListContainer
           containerRef={containerRef}
+          visibleItemCount={visibleItemCount}
+          snapAlign="snap-start"
+          gap={ITEMS_GAP}
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
         >
           {renderChildren(rest)}
-        </CarouselContainer>
-        {isScrollAvailable && isBlur ? (
+        </SwipeListContainer>
+        {(scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
           <div>
             <div className={`${blurBaseStyle} left-0 bg-opacity-from-white`} />
             <div className={`${blurBaseStyle} right-0 bg-opacity-to-white`} />
           </div>
         ) : null}
-        {renderArrows({
-          ...controls,
-          btnClass: ['left-8', 'right-8'],
-          className: 'top-1/2',
-        })}
+        {renderScrollButtons(scroll)}
       </BlockWrapper>
     );
   },
 );
 
-Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];
+Carousel.childrenTypes = [
+  'CarouselCard',
+  'CarouselTariffsCard',
+  'CarouselLinks',
+  'CarouselProgramsCard',
+  'CarouselInvestmentCard',
+];
+
+const renderScrollButtons = ({
+  scrollLeft,
+  scrollRight,
+  canScrollLeft,
+  canScrollRight,
+}: SwipeListScroll) => (
+  <div>
+    {canScrollLeft ? (
+      <ScrollLeftButton className={`${scrollButtonStyle} left-8`} onClick={scrollLeft} />
+    ) : null}
+    {canScrollRight ? (
+      <ScrollRightButton className={`${scrollButtonStyle} right-8`} onClick={scrollRight} />
+    ) : null}
+  </div>
+);

package/src/components/CarouselCard/CarouselCard.fixture.tsx

@@ -42,7 +42,7 @@ export default {
     </div>
   ),
   mini: (
-    <div className="container flex">
+    <div className="container grid grid-cols-12">
       <CarouselCard {...CARD_MINI} />
     </div>
   ),

package/src/components/CarouselCard/CarouselCard.tsx

@@ -10,8 +10,8 @@ export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
-  normal: `w-[${1007 + 48}px]`,
-  mini: `w-[${350 + 48}px]`,
+  normal: 'min-w-[1007px]',
+  mini: 'min-w-[355px]',
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.example.json

@@ -0,0 +1,28 @@
+{
+  "image": {
+    "format": "webp",
+      "size": {
+        "width": 180,
+        "height": 180
+      }
+    },
+  "title": "Заголовок",
+  "description": "Описание",
+  "additionalDescription": "Описание 1-2",
+  "columnsMode": "1",
+  "cardsList":[
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    },
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    },
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    }
+  ],
+  "version": "primary"
+}

package/src/components/{InvestmentGallery/InvestmentGallery.fixture.tsx → CarouselInvestmentCard/CarouselInvestmentCard.fixture.tsx}

@@ -1,6 +1,7 @@
 import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
-import { InvestmentGallery, InvestmentGalleryProps } from './InvestmentGallery';
+import { CarouselInvestmentCard } from './CarouselInvestmentCard';
+import type { CarouselInvestmentCardContent } from './CarouselInvestmentCardContent';
 
 const five: Picture = {
   src: '5.svg',
@@ -12,7 +13,7 @@ const five: Picture = {
   title: 'five',
 };
 
-const cardListExample = [
+const cardsList = [
   {
     parameter: 'IR',
     parameterDesccription: 'cтрана эмитента',
@@ -39,40 +40,33 @@ const cardListExample = [
   },
 ];
 
-const cardCoomonProps = {
+export const INVESTMENT_CARD_WITH_SINGLE_COLUMN: CarouselInvestmentCardContent = {
   title: 'Borets Finance DAC 17/09/26',
   description: 'BRTS-26 XS2230649225',
   additionalDescription: 'Краткосрочная',
+  cardsList,
+  columnsMode: 1,
+  image: five,
 };
 
-export const shortProps: InvestmentGalleryProps = {
-  title: 'Примеры еврооблигаций (Московская Биржа)',
-  cards: [
-    {
-      ...cardCoomonProps,
-      columnsMode: 'double',
-      cardList: cardListExample,
-      image: five,
-    },
-    {
-      ...cardCoomonProps,
-      columnsMode: 'single',
-      cardList: cardListExample,
-      image: five,
-    },
-    {
-      ...cardCoomonProps,
-      columnsMode: 'double',
-      cardList: cardListExample,
-      image: five,
-    },
-  ],
+export const INVESTMENT_CARD_WITH_DOUBLE_COLUMN: CarouselInvestmentCardContent = {
+  title: 'Borets Finance DAC 17/09/26',
+  description: 'BRTS-26 XS2230649225',
+  additionalDescription: 'Краткосрочная',
+  cardsList,
+  columnsMode: 2,
+  image: five,
 };
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 mb-1">
-      <InvestmentGallery className="col-span-12" {...shortProps} />
+    <div className="container grid grid-cols-12">
+      <CarouselInvestmentCard className="col-span-4" {...INVESTMENT_CARD_WITH_SINGLE_COLUMN} />
+    </div>
+  ),
+  'with-double-columns': (
+    <div className="container grid grid-cols-12">
+      <CarouselInvestmentCard className="col-span-4" {...INVESTMENT_CARD_WITH_DOUBLE_COLUMN} />
     </div>
   ),
 };

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -0,0 +1,83 @@
+import { BaseTile } from '../BaseTile/BaseTile';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import type {
+  CardColumnsMode,
+  CardsListItem,
+  CarouselInvestmentCardContent,
+} from './CarouselInvestmentCardContent';
+import { JSX } from '@redneckz/uni-jsx';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type { UniBlockProps } from '../../model/JSXBlock';
+
+export interface CarouselInvestmentCardProps extends CarouselInvestmentCardContent, UniBlockProps {}
+
+const getItemListFontSize = (colValue?: number) => (colValue === 1 ? 'text-h6' : 'text-l');
+
+const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
+  1: 'flex gap-y-2 flex-col',
+  2: 'flex gap-y-2 gap-x-10 flex-wrap',
+};
+
+export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
+  ({
+    additionalDescription,
+    cardsList = [],
+    className = '',
+    columnsMode = 1,
+    description,
+    image,
+    title,
+    version = 'primary',
+    ...rest
+  }) => {
+    const tileTitle = title ? (
+      <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} />
+    ) : null;
+
+    const tileImage = image?.src ? (
+      <Img className="absolute bottom-0 right-0 m-0" image={image} />
+    ) : null;
+
+    return (
+      <BlockWrapper
+        className={`relative text-left border border-solid box-border
+        p-9 w-[697px]
+        ${BorderVersionStyleMap[version]}
+        ${className}`}
+        {...rest}
+      >
+        <BaseTile title={tileTitle} image={tileImage}>
+          <div className="flex justify-between mb-4">
+            {description ? <span className="text-h6 w-1/3">{description}</span> : null}
+            {additionalDescription ? (
+              <span className="text-m-light text-secondary-text">{additionalDescription}</span>
+            ) : null}
+          </div>
+          {cardsList.length ? (
+            <ul className={`list-none m-0 p-0 ${cardColumnsModeStyleMap[columnsMode]}`}>
+              {renderCardList(cardsList, columnsMode)}
+            </ul>
+          ) : null}
+        </BaseTile>
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {
+  const CARDS_COUNT_MAP = [4, 9];
+  const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
+
+  return visibleCardsList.map((item, i) => (
+    <li key={String(i)} className={columnsMode === 2 ? 'basis-[calc(50%-20px)]' : ''}>
+      {item?.parameter ? (
+        <span className={`pr-2.5 ${getItemListFontSize(columnsMode)}`}>{item.parameter}</span>
+      ) : null}
+      {item?.parameterDescription ? (
+        <span className="text-m-light text-secondary-text">{item.parameterDescription}</span>
+      ) : null}
+    </li>
+  ));
+};

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.ui.json

@@ -0,0 +1,9 @@
+{
+  "content": {
+    "items": {
+      "image": {
+        "ui:field": "picture"
+      }
+    }
+  }
+}

package/src/components/{InvestmentGallery/InvestmentGalleryContent.ts → CarouselInvestmentCard/CarouselInvestmentCardContent.ts}

@@ -1,22 +1,35 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
-import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
- * @title Количество колонок в списке
+ * @title Карточка галереи инвестиций
+ */
+
+/**
+ * @title Количество колонок
  * @enumNames [
  *   "1 колонка",
  *   "2 колонки",
  *  ]
  */
-export type CardColumnsMode = 'single' | 'double';
+export type CardColumnsMode = 1 | 2;
 
-/**
- * @title Карточка
- */
-export interface InvestmentGalleryCardTypes extends HeadlineCommonProps {
+export interface CardsListItem {
+  /** @title Параметр */
+  parameter?: string;
+  /** @title Описание */
+  parameterDescription?: string;
+}
+export interface CarouselInvestmentCardContent extends HeadlineCommonProps {
   /** @title Доп. описание карточки  */
   additionalDescription?: string;
+  /** @default 1 */
+  columnsMode?: CardColumnsMode;
+  /**
+   * @title Список
+   */
+  cardsList?: CardsListItem[];
   /**
    * @default {
    *   "format": "webp",
@@ -32,23 +45,5 @@ export interface InvestmentGalleryCardTypes extends HeadlineCommonProps {
    * }
    */
   image?: Picture;
-  columnsMode?: CardColumnsMode;
-  /** @title Описание пункта */
-  cardList?: CardListItem[];
-}
-
-export interface CardListItem {
-  /** @title Параметр */
-  parameter?: string;
-  /** @title Описание */
-  parameterDesccription?: string;
-}
-
-/**
- * @title Карточка
- */
-export interface InvestmentGalleryContent extends TitleProps {
-  /** @title Карточки */
-  cards?: InvestmentGalleryCardTypes[];
   version?: BlockVersion;
 }