@alfalab/core-components 23.6.1 → 23.7.0

package/calendar/esm/components/days-table/Component.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-5b1fc8c5.js';
+import { _ as __assign } from '../../tslib.es6-1e65e31a.js';
 import React, { useRef, useCallback } from 'react';
 import cn from 'classnames';
 import { startOfMonth, isToday, isEqual, isSameDay, isWithinInterval, isLastDayOfMonth } from 'date-fns';
@@ -7,7 +7,7 @@ import { Button } from '../../../../button/esm';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { getSelectionRange, WEEKDAYS } from '../../utils.js';
 
-var styles = {"daysTable":"calendar__daysTable_9awmm","transitLeft":"calendar__transitLeft_9awmm","transitRight":"calendar__transitRight_9awmm","dayName":"calendar__dayName_9awmm","day":"calendar__day_9awmm","event":"calendar__event_9awmm","today":"calendar__today_9awmm","highlighted":"calendar__highlighted_9awmm","disabled":"calendar__disabled_9awmm","range":"calendar__range_9awmm","selected":"calendar__selected_9awmm","rangeStart":"calendar__rangeStart_9awmm","firstDay":"calendar__firstDay_9awmm","lastDay":"calendar__lastDay_9awmm","left":"calendar__left_9awmm","daysEnter":"calendar__daysEnter_9awmm","daysEnterActive":"calendar__daysEnterActive_9awmm","daysExit":"calendar__daysExit_9awmm","daysExitActive":"calendar__daysExitActive_9awmm","right":"calendar__right_9awmm"};
+var styles = {"daysTable":"calendar__daysTable_1is5n","transitLeft":"calendar__transitLeft_1is5n","transitRight":"calendar__transitRight_1is5n","dayName":"calendar__dayName_1is5n","day":"calendar__day_1is5n","event":"calendar__event_1is5n","today":"calendar__today_1is5n","highlighted":"calendar__highlighted_1is5n","disabled":"calendar__disabled_1is5n","range":"calendar__range_1is5n","selected":"calendar__selected_1is5n","rangeStart":"calendar__rangeStart_1is5n","firstDay":"calendar__firstDay_1is5n","lastDay":"calendar__lastDay_1is5n","left":"calendar__left_1is5n","daysEnter":"calendar__daysEnter_1is5n","daysEnterActive":"calendar__daysEnterActive_1is5n","daysExit":"calendar__daysExit_1is5n","daysExitActive":"calendar__daysExitActive_1is5n","right":"calendar__right_1is5n"};
 require('./index.css');
 
 var DaysTable = function (_a) {

package/calendar/esm/components/days-table/index.css

@@ -60,38 +60,38 @@
     /* marker */
     --calendar-marker-background: var(--color-light-graphic-tertiary);
 }
-.calendar__daysTable_9awmm {
+.calendar__daysTable_1is5n {
     border-collapse: separate;
     border-spacing: 0;
     position: relative
 }
-.calendar__daysTable_9awmm th {
+.calendar__daysTable_1is5n th {
         padding: 0;
     }
-.calendar__daysTable_9awmm td {
+.calendar__daysTable_1is5n td {
         padding: var(--gap-2xs) 0 0
     }
-.calendar__daysTable_9awmm td:first-child .calendar__transitLeft_9awmm {
+.calendar__daysTable_1is5n td:first-child .calendar__transitLeft_1is5n {
             background: linear-gradient(
                 270deg,
                 var(--calendar-range-background) 0%,
                 var(--color-light-specialbg-nulled) 100%
             )
         }
-.calendar__daysTable_9awmm td:first-child .calendar__transitLeft_9awmm:after {
+.calendar__daysTable_1is5n td:first-child .calendar__transitLeft_1is5n:after {
                 display: none;
             }
-.calendar__daysTable_9awmm td:last-child .calendar__transitRight_9awmm {
+.calendar__daysTable_1is5n td:last-child .calendar__transitRight_1is5n {
             background: linear-gradient(
                 270deg,
                 var(--color-light-specialbg-nulled) 0%,
                 var(--calendar-range-background) 100%
             )
         }
-.calendar__daysTable_9awmm td:last-child .calendar__transitRight_9awmm:after {
+.calendar__daysTable_1is5n td:last-child .calendar__transitRight_1is5n:after {
                 display: none;
             }
-.calendar__dayName_9awmm {
+.calendar__dayName_1is5n {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -100,11 +100,11 @@
     color: var(--color-light-text-secondary)
 }
 @media (max-width: 374px) {
-.calendar__dayName_9awmm {
+.calendar__dayName_1is5n {
         height: 36px
 }
     }
-.calendar__day_9awmm {
+.calendar__day_1is5n {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -121,12 +121,12 @@
     color: var(--color-light-text-primary)
 }
 @media (max-width: 374px) {
-.calendar__day_9awmm {
+.calendar__day_1is5n {
         width: 36px;
         height: 36px
 }
     }
-.calendar__day_9awmm.calendar__event_9awmm:before {
+.calendar__day_1is5n.calendar__event_1is5n:before {
             content: '';
             display: block;
             position: absolute;
@@ -136,10 +136,10 @@
             border-radius: var(--border-radius-circle);
             background: var(--calendar-marker-background);
         }
-.calendar__day_9awmm.calendar__today_9awmm {
+.calendar__day_1is5n.calendar__today_1is5n {
         font-weight: bold
     }
-.calendar__day_9awmm.calendar__today_9awmm span:after {
+.calendar__day_1is5n.calendar__today_1is5n span:after {
             content: '';
             border: 1px solid var(--calendar-today-border-color);
             position: absolute;
@@ -150,32 +150,32 @@
             border-radius: var(--calendar-day-border-radius);
             box-sizing: border-box;
         }
-.calendar__day_9awmm.calendar__highlighted_9awmm {
+.calendar__day_1is5n.calendar__highlighted_1is5n {
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
     }
-.calendar__day_9awmm.calendar__disabled_9awmm {
+.calendar__day_1is5n.calendar__disabled_1is5n {
         pointer-events: none;
         color: var(--calendar-disabled-color);
 
         background: var(--calendar-disabled-background);
         cursor: default;
     }
-.calendar__day_9awmm.calendar__range_9awmm {
+.calendar__day_1is5n.calendar__range_1is5n {
         color: var(--calendar-range-color);
         background: var(--calendar-range-background);
         border-radius: 0;
     }
-.calendar__day_9awmm.calendar__selected_9awmm,
-    .calendar__day_9awmm.calendar__disabled_9awmm.calendar__selected_9awmm {
+.calendar__day_1is5n.calendar__selected_1is5n,
+    .calendar__day_1is5n.calendar__disabled_1is5n.calendar__selected_1is5n {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
         cursor: default;
     }
-.calendar__day_9awmm.calendar__rangeStart_9awmm {
+.calendar__day_1is5n.calendar__rangeStart_1is5n {
         cursor: pointer;
     }
-.calendar__day_9awmm.calendar__firstDay_9awmm:after, .calendar__day_9awmm.calendar__lastDay_9awmm:after {
+.calendar__day_1is5n.calendar__firstDay_1is5n:after, .calendar__day_1is5n.calendar__lastDay_1is5n:after {
             transition: opacity 0.2s ease;
             content: '';
             position: absolute;
@@ -185,7 +185,7 @@
             opacity: 0;
             pointer-events: none;
         }
-.calendar__day_9awmm.calendar__firstDay_9awmm:after {
+.calendar__day_1is5n.calendar__firstDay_1is5n:after {
             right: 100%;
             background: linear-gradient(
                 270deg,
@@ -193,7 +193,7 @@
                 var(--color-light-specialbg-nulled) 100%
             );
         }
-.calendar__day_9awmm.calendar__lastDay_9awmm:after {
+.calendar__day_1is5n.calendar__lastDay_1is5n:after {
             left: 100%;
             background: linear-gradient(
                 270deg,
@@ -201,52 +201,52 @@
                 var(--calendar-range-background) 100%
             );
         }
-.calendar__day_9awmm.calendar__transitLeft_9awmm:after, .calendar__day_9awmm.calendar__transitRight_9awmm:after {
+.calendar__day_1is5n.calendar__transitLeft_1is5n:after, .calendar__day_1is5n.calendar__transitRight_1is5n:after {
             opacity: 1;
         }
-.calendar__day_9awmm:focus {
+.calendar__day_1is5n:focus {
         z-index: 1;
     }
-.calendar__left_9awmm .calendar__daysEnter_9awmm {
+.calendar__left_1is5n .calendar__daysEnter_1is5n {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__left_9awmm .calendar__daysEnterActive_9awmm {
+.calendar__left_1is5n .calendar__daysEnterActive_1is5n {
         transform: translateX(0%);
     }
-.calendar__left_9awmm .calendar__daysExit_9awmm {
+.calendar__left_1is5n .calendar__daysExit_1is5n {
         transform: translateX(0%);
     }
-.calendar__left_9awmm .calendar__daysExitActive_9awmm {
+.calendar__left_1is5n .calendar__daysExitActive_1is5n {
         transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
-.calendar__right_9awmm .calendar__daysEnter_9awmm {
+.calendar__right_1is5n .calendar__daysEnter_1is5n {
         transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
-.calendar__right_9awmm .calendar__daysEnterActive_9awmm {
+.calendar__right_1is5n .calendar__daysEnterActive_1is5n {
         transform: translateX(0%);
     }
-.calendar__right_9awmm .calendar__daysExit_9awmm {
+.calendar__right_1is5n .calendar__daysExit_1is5n {
         transform: translateX(0%);
     }
-.calendar__right_9awmm .calendar__daysExitActive_9awmm {
+.calendar__right_1is5n .calendar__daysExitActive_1is5n {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__daysEnter_9awmm {
+.calendar__daysEnter_1is5n {
     opacity: 0;
     position: absolute;
     left: 0;
 }
-.calendar__daysEnterActive_9awmm {
+.calendar__daysEnterActive_1is5n {
     opacity: 1;
 }
-.calendar__daysExit_9awmm {
+.calendar__daysExit_1is5n {
     pointer-events: none;
     opacity: 1;
 }
-.calendar__daysExitActive_9awmm {
+.calendar__daysExitActive_1is5n {
     opacity: 0;
 }
-.calendar__daysEnterActive_9awmm,
-.calendar__daysExitActive_9awmm {
+.calendar__daysEnterActive_1is5n,
+.calendar__daysExitActive_1is5n {
     transition: opacity 300ms, transform 300ms;
 }

package/calendar/esm/components/days-table/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-5b1fc8c5.js';
+import '../../tslib.es6-1e65e31a.js';
 import 'react';
 import 'classnames';
 import 'date-fns';

package/calendar/esm/components/header/Component.d.ts

@@ -1,14 +1,6 @@
-import { FC, MouseEvent } from 'react';
+import { FC } from 'react';
 import { SelectorView } from "../../typings";
 type HeaderProps = {
-    /**
-     * Выбранный месяц
-     */
-    month?: string;
-    /**
-     * Выбранный год
-     */
-    year?: string;
     /**
      * Вид шапки — месяц и год или только месяц
      */
@@ -17,30 +9,6 @@ type HeaderProps = {
      * Отображать тень? (нужна при прокрутке)
      */
     withShadow?: boolean;
-    /**
-     * Показывать кнопку переключения на пред. месяц?
-     */
-    prevArrowVisible?: boolean;
-    /**
-     * Показывать кнопку переключения на след. месяц?
-     */
-    nextArrowVisible?: boolean;
-    /**
-     * Обработчик нажатия кнопки переключения на пред. месяц
-     */
-    onPrevArrowClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия кнопки переключения на след. месяц
-     */
-    onNextArrowClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на кнопку месяца
-     */
-    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на кнопку года
-     */
-    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 declare const Header: FC<HeaderProps>;
 export { HeaderProps, Header };

package/calendar/esm/components/header/Component.js

@@ -1,31 +1,16 @@
-import '../../tslib.es6-5b1fc8c5.js';
 import React from 'react';
 import cn from 'classnames';
-import { Button } from '../../../../button/esm';
-import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"header":"calendar__header_2ulw4","withShadow":"calendar__withShadow_2ulw4","inner":"calendar__inner_2ulw4","month":"calendar__month_2ulw4","year":"calendar__year_2ulw4","buttonContent":"calendar__buttonContent_2ulw4","monthOnly":"calendar__monthOnly_2ulw4","upDownIcon":"calendar__upDownIcon_2ulw4","arrow":"calendar__arrow_2ulw4"};
+var styles = {"header":"calendar__header_y9puk","withShadow":"calendar__withShadow_y9puk","monthOnly":"calendar__monthOnly_y9puk"};
 require('./index.css');
 
 var Header = function (_a) {
     var _b;
-    var month = _a.month, year = _a.year, _c = _a.view, view = _c === void 0 ? 'full' : _c, withShadow = _a.withShadow, _d = _a.prevArrowVisible, prevArrowVisible = _d === void 0 ? true : _d, _e = _a.nextArrowVisible, nextArrowVisible = _e === void 0 ? true : _e, onPrevArrowClick = _a.onPrevArrowClick, onNextArrowClick = _a.onNextArrowClick, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick;
+    var _c = _a.view, view = _c === void 0 ? 'full' : _c, withShadow = _a.withShadow, children = _a.children;
     return (React.createElement("div", { className: cn(styles.header, (_b = {},
             _b[styles.monthOnly] = view === 'month-only',
             _b[styles.withShadow] = withShadow,
-            _b)), "aria-live": 'polite' },
-        React.createElement("div", { className: styles.inner },
-            prevArrowVisible && (React.createElement(Button, { view: 'ghost', className: styles.arrow, onClick: onPrevArrowClick, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446' })),
-            view === 'full' ? (React.createElement(React.Fragment, null,
-                React.createElement(SelectButton, { view: 'filled', className: cn(styles.button, styles.month), onClick: onMonthClick },
-                    React.createElement("span", { className: styles.buttonContent },
-                        month,
-                        React.createElement("span", { className: styles.upDownIcon }))),
-                React.createElement(SelectButton, { view: 'filled', className: cn(styles.button, styles.year), onClick: onYearClick },
-                    React.createElement("span", { className: styles.buttonContent },
-                        year,
-                        React.createElement("span", { className: styles.upDownIcon }))))) : (React.createElement("span", { className: cn(styles.button, styles.month) }, month)),
-            nextArrowVisible && (React.createElement(Button, { view: 'ghost', className: styles.arrow, onClick: onNextArrowClick, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446' })))));
+            _b)), "aria-live": 'polite' }, children));
 };
 
 export { Header };

package/calendar/esm/components/header/index.css

@@ -9,27 +9,17 @@
     /* Hard up */
 }
 :root {
-    --gap-xs: 8px;
     --gap-s: 12px;
     --gap-m: 16px;
     --gap-2xl: 32px;
 }
-:root {
-    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
-}
 :root {
 
     /* Кнопки выбора месяцев и годов */
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
-    --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
     --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
     --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
-    --calendar-month-only-header-font-family: var(--font-family-system);
-    --calendar-month-only-header-font-size: 16px;
-    --calendar-month-only-header-font-weight: 400;
 
     /* День */
 
@@ -45,93 +35,15 @@
 
     /* marker */
 }
-.calendar__header_2ulw4 {
+.calendar__header_y9puk {
     width: 100%;
     box-sizing: border-box;
     padding: var(--calendar-header-paddings);
     transition: box-shadow 0.2s ease;
 }
-.calendar__withShadow_2ulw4 {
+.calendar__withShadow_y9puk {
     box-shadow: var(--shadow-s);
 }
-.calendar__inner_2ulw4 {
-    position: relative;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center
-}
-@media (max-width: 374px) {
-.calendar__inner_2ulw4 {
-        justify-content: space-between;
-        width: 256px;
-        margin: 0 auto
-}
-    }
-.calendar__month_2ulw4 {
-    width: 131px
-}
-@media (max-width: 374px) {
-.calendar__month_2ulw4 {
-        width: auto;
-        flex-grow: 1
-}
-    }
-.calendar__year_2ulw4 {
-    width: 105px;
-
-    margin-left: var(--gap-xs)
-}
-@media (max-width: 374px) {
-.calendar__year_2ulw4 {
-        width: 90px
-}
-    }
-.calendar__buttonContent_2ulw4 {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.calendar__monthOnly_2ulw4 {
-    padding: var(--calendar-month-only-header-paddings)
-}
-.calendar__monthOnly_2ulw4 .calendar__month_2ulw4 {
-        font-family: var(--calendar-month-only-header-font-family);
-        font-size: var(--calendar-month-only-header-font-size);
-        font-weight: var(--calendar-month-only-header-font-weight);
-        line-height: 24px;
-
-        width: auto;
-    }
-.calendar__upDownIcon_2ulw4 {
-    display: block;
-    background: var(--calendar-select-icon-background);
-    width: 24px;
-    height: 24px;
-    margin-left: var(--gap-xs)
-}
-@media (max-width: 374px) {
-.calendar__upDownIcon_2ulw4 {
-        margin-left: auto
-}
-    }
-.calendar__arrow_2ulw4 {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 8px;
-    background: var(--calendar-arrow-background)
-}
-.calendar__arrow_2ulw4:first-child {
-        left: 0;
-    }
-.calendar__arrow_2ulw4:last-child {
-        right: 0;
-        transform: rotateY(180deg);
-    }
-@media (max-width: 374px) {
-.calendar__arrow_2ulw4 {
-        display: none
+.calendar__monthOnly_y9puk {
+    padding: var(--calendar-month-only-header-paddings);
 }
-    }

package/calendar/esm/components/header/index.js

@@ -1,6 +1,3 @@
-import '../../tslib.es6-5b1fc8c5.js';
 import 'react';
 import 'classnames';
-import '../../../../button/esm';
-import '../select-button/Component.js';
 export { Header } from './Component.js';

package/calendar/esm/components/months-table/Component.js

@@ -1,12 +1,12 @@
-import { _ as __assign } from '../../tslib.es6-5b1fc8c5.js';
+import { _ as __assign } from '../../tslib.es6-1e65e31a.js';
 import React, { useCallback } from 'react';
 import 'classnames';
 import { isSameMonth, isThisMonth } from 'date-fns';
 import '../../../../button/esm';
-import { SelectButton } from '../select-button/Component.js';
 import { monthName } from '../../utils.js';
+import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"monthsTable":"calendar__monthsTable_izmcd","button":"calendar__button_izmcd"};
+var styles = {"monthsTable":"calendar__monthsTable_1sgvd","button":"calendar__button_1sgvd"};
 require('./index.css');
 
 var MonthsTable = function (_a) {

package/calendar/esm/components/months-table/index.css

@@ -32,7 +32,7 @@
 
     /* marker */
 }
-.calendar__monthsTable_izmcd {
+.calendar__monthsTable_1sgvd {
     display: flex;
     flex-wrap: wrap;
     width: 318px;
@@ -40,20 +40,20 @@
     justify-content: flex-start
 }
 @media (max-width: 374px) {
-.calendar__monthsTable_izmcd {
+.calendar__monthsTable_1sgvd {
         /* 2 кнопки по 125px + 2 отступа по 6px */
         width: 262px
 }
     }
-.calendar__button_izmcd {
+.calendar__button_1sgvd {
     width: var(--calendar-selector-button-width);
     margin: 0 3px var(--gap-xs)
 }
-.calendar__button_izmcd:nth-last-child(-n + 3) {
+.calendar__button_1sgvd:nth-last-child(-n + 3) {
         margin-bottom: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_izmcd {
+.calendar__button_1sgvd {
         margin: 0 3px var(--gap-2xs);
         width: 125px;
         height: 36px

package/calendar/esm/components/months-table/index.js

@@ -1,8 +1,8 @@
-import '../../tslib.es6-5b1fc8c5.js';
+import '../../tslib.es6-1e65e31a.js';
 import 'react';
 import 'classnames';
 import 'date-fns';
 import '../../../../button/esm';
-import '../select-button/Component.js';
 import '../../utils.js';
+import '../select-button/Component.js';
 export { MonthsTable } from './Component.js';

package/calendar/esm/components/period-slider/Component.d.ts

@@ -0,0 +1,68 @@
+import { FC, MouseEvent } from 'react';
+type PeriodType = 'range' | 'day' | 'week' | 'month' | 'quarter' | 'year';
+type PeriodSliderProps = {
+    /**
+     * Активная дата или период
+     */
+    value: Date | [Date, Date];
+    /**
+     * Вид шапки — с кнопками выбора года и месяца или только период
+     */
+    view?: 'full' | 'period';
+    /**
+     * Тип периода
+     */
+    periodType?: PeriodType;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Отключает кнопку назад
+     */
+    prevArrowDisabled?: boolean;
+    /**
+     * Отключает кнопку вперед
+     */
+    nextArrowDisabled?: boolean;
+    /**
+     * Скрывает заблокированные кнопки
+     */
+    hideDisabledArrows?: boolean;
+    /**
+     * Функция для форматирование выбранного периода
+     */
+    periodFormatter?: (valueFrom: Date, valueTo: Date, periodType: PeriodType) => string;
+    /**
+     * Обработчик нажатия кнопки переключения на назад
+     */
+    onPrevArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
+        value: Date;
+        valueFrom: Date;
+        valueTo: Date;
+        periodType: PeriodType;
+    }) => void;
+    /**
+     * Обработчик нажатия кнопки переключения на вперед
+     */
+    onNextArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
+        value: Date;
+        valueFrom: Date;
+        valueTo: Date;
+        periodType: PeriodType;
+    }) => void;
+    /**
+     * Обработчик нажатия на кнопку месяца
+     */
+    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на кнопку года
+     */
+    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const PeriodSlider: FC<PeriodSliderProps>;
+export { PeriodType, PeriodSliderProps, PeriodSlider };

package/calendar/esm/components/period-slider/Component.js

@@ -0,0 +1,66 @@
+import '../../tslib.es6-1e65e31a.js';
+import React from 'react';
+import cn from 'classnames';
+import { startOfWeek, endOfWeek } from 'date-fns';
+import { Button } from '../../../../button/esm';
+import { monthName } from '../../utils.js';
+import { SelectButton } from '../select-button/Component.js';
+import { formatPeriod, shiftValues } from './utils.js';
+
+var styles = {"component":"calendar__component_i2y0p","month":"calendar__month_i2y0p","year":"calendar__year_i2y0p","buttonContent":"calendar__buttonContent_i2y0p","period":"calendar__period_i2y0p","upDownIcon":"calendar__upDownIcon_i2y0p","arrow":"calendar__arrow_i2y0p","full":"calendar__full_i2y0p"};
+require('./index.css');
+
+var PeriodSlider = function (_a) {
+    var _b, _c;
+    var value = _a.value, _d = _a.view, view = _d === void 0 ? 'month-only' : _d, _e = _a.periodType, periodType = _e === void 0 ? 'month' : _e, className = _a.className, _f = _a.periodFormatter, periodFormatter = _f === void 0 ? formatPeriod : _f, _g = _a.prevArrowDisabled, prevArrowDisabled = _g === void 0 ? false : _g, _h = _a.nextArrowDisabled, nextArrowDisabled = _h === void 0 ? false : _h, _j = _a.hideDisabledArrows, hideDisabledArrows = _j === void 0 ? false : _j, _k = _a.onPrevArrowClick, onPrevArrowClick = _k === void 0 ? function () { return null; } : _k, _l = _a.onNextArrowClick, onNextArrowClick = _l === void 0 ? function () { return null; } : _l, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
+    var valueFrom;
+    var valueTo;
+    if (Array.isArray(value)) {
+        valueFrom = value[0], valueTo = value[1];
+    }
+    else {
+        _b = [value, value], valueFrom = _b[0], valueTo = _b[1];
+        if (periodType === 'week') {
+            valueFrom = startOfWeek(valueFrom, { weekStartsOn: 1 });
+            valueTo = endOfWeek(valueFrom, { weekStartsOn: 1 });
+        }
+    }
+    var month = monthName(valueFrom);
+    var year = valueFrom.getFullYear().toString();
+    var showPrevButton = !(hideDisabledArrows && prevArrowDisabled);
+    var showNextButton = !(hideDisabledArrows && nextArrowDisabled);
+    var handleNextArrowClick = function (event) {
+        var newValues = shiftValues(valueFrom, valueTo, periodType, 'next');
+        onNextArrowClick(event, {
+            value: newValues.valueFrom,
+            valueFrom: newValues.valueFrom,
+            valueTo: newValues.valueTo,
+            periodType: periodType,
+        });
+    };
+    var handlePrevArrowClick = function (event) {
+        var newValues = shiftValues(valueFrom, valueTo, periodType, 'prev');
+        onPrevArrowClick(event, {
+            value: newValues.valueFrom,
+            valueFrom: newValues.valueFrom,
+            valueTo: newValues.valueTo,
+            periodType: periodType,
+        });
+    };
+    return (React.createElement("div", { className: cn(styles.component, className, (_c = {},
+            _c[styles.full] = view === 'full',
+            _c)), "aria-live": 'polite', "data-test-id": dataTestId },
+        showPrevButton && (React.createElement(Button, { view: 'ghost', className: styles.arrow, onClick: handlePrevArrowClick, disabled: prevArrowDisabled, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
+        view === 'full' ? (React.createElement(React.Fragment, null,
+            React.createElement(SelectButton, { view: 'filled', className: styles.month, onClick: onMonthClick },
+                React.createElement("span", { className: styles.buttonContent },
+                    month,
+                    React.createElement("span", { className: styles.upDownIcon }))),
+            React.createElement(SelectButton, { view: 'filled', className: styles.year, onClick: onYearClick },
+                React.createElement("span", { className: styles.buttonContent },
+                    year,
+                    React.createElement("span", { className: styles.upDownIcon }))))) : (React.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType))),
+        showNextButton && (React.createElement(Button, { view: 'ghost', className: styles.arrow, onClick: handleNextArrowClick, disabled: nextArrowDisabled, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
+};
+
+export { PeriodSlider };