@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-eab52adf66

package/cjs/components/Calendar/MonthView.js

@@ -0,0 +1,128 @@
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.MonthView = MonthView;exports.getMinMonth = exports.getMaxMonth = void 0;var _react = _interopRequireWildcard(require("react"));
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));
+var _Emotion = require("../../lib/theming/Emotion");
+var _ResponsiveLayout = require("../../components/ResponsiveLayout");
+
+var _DateSelect = require("../../internal/DateSelect");
+
+var _MonthView = require("./MonthView.styles");
+var _config = require("./config");
+var CDS = _interopRequireWildcard(require("./CalendarDateShape"));
+var _Calendar = require("./Calendar");
+var _CalendarContext = require("./CalendarContext");
+
+var getMinMonth = exports.getMinMonth = function getMinMonth(year, minDate) {
+  var min = 0;
+  for (var i = 0; i < 12; ++i) {
+    if (minDate && CDS.isGreaterOrEqual({ date: 31, month: i, year: year }, minDate)) {
+      min = i;
+      break;
+    }
+  }
+  return min;
+};
+
+var getMaxMonth = exports.getMaxMonth = function getMaxMonth(year, maxDate) {
+  var max = 11;
+  for (var i = 11; i >= 0; --i) {
+    if (maxDate && CDS.isLessOrEqual({ date: 1, month: i, year: year }, maxDate)) {
+      max = i;
+      break;
+    }
+  }
+  return max;
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function MonthView(props) {var _cx, _cx2;
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var _useContext = (0, _react.useContext)(_CalendarContext.CalendarContext),minDate = _useContext.minDate,maxDate = _useContext.maxDate;
+  var _useResponsiveLayout = (0, _ResponsiveLayout.useResponsiveLayout)(),isMobile = _useResponsiveLayout.isMobile;
+
+  var
+    children =
+
+
+
+
+
+
+
+
+
+
+    props.children,height = props.height,isFirstInYear = props.isFirstInYear,isLastInYear = props.isLastInYear,month = props.month,top = props.top,year = props.year,onMonthSelect = props.onMonthSelect,onYearSelect = props.onYearSelect,monthSelectRef = props.monthSelectRef,yearSelectRef = props.yearSelectRef;
+
+  var isTopNegative = top <= 0;
+  var isHeaderSticky = isTopNegative && height >= -top;
+  var headerTop = isHeaderSticky ? Math.min(-top, height - (0, _config.themeConfig)(theme).MONTH_TITLE_HEIGHT) : 0;
+  var alpha = isHeaderSticky ? (height + top - (0, _config.themeConfig)(theme).MONTH_TITLE_HEIGHT) / 10 : 1;
+  var borderBottomColor = ColorFunctions.fade(theme.calendarMonthTitleBorderBottomColor, alpha);
+  var isYearVisible = isFirstInYear || isHeaderSticky;
+  var yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;
+  var monthSelectDisabled = top > 52 || headerTop < 0 || headerTop >= height - (0, _config.themeConfig)(theme).MONTH_TITLE_HEIGHT;
+  var yearSelectDisabled = top > 52 || isLastInYear && top < -height + (0, _config.themeConfig)(theme).MONTH_TITLE_HEIGHT;
+
+  return /*#__PURE__*/(
+    _react.default.createElement("div", {
+      "data-tid": _Calendar.CalendarDataTids.month,
+      className: (0, _Emotion.cx)((_cx = {}, _cx[_MonthView.styles.month(theme)] = true, _cx[_MonthView.styles.monthMobile()] = isMobile, _cx)),
+      style: { top: top },
+      key: month + '-' + year }, /*#__PURE__*/
+
+    _react.default.createElement("div", {
+      style: { top: headerTop },
+      className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
+      _MonthView.styles.header()] = true, _cx2[
+      _MonthView.styles.headerSticky(theme)] = isHeaderSticky, _cx2)
+      ) }, /*#__PURE__*/
+
+    _react.default.createElement("div", { style: { borderBottomColor: borderBottomColor }, className: _MonthView.styles.monthTitle(theme) }, /*#__PURE__*/
+    _react.default.createElement("div", { "data-tid": _Calendar.CalendarDataTids.headerMonth, className: _MonthView.styles.headerMonth(theme) }, /*#__PURE__*/
+    _react.default.createElement(_DateSelect.DateSelect, {
+      disabled: monthSelectDisabled,
+      width: isMobile ? '6em' : 85,
+      type: "month",
+      value: month,
+      onValueChange: onMonthSelect,
+      ref: !monthSelectDisabled ? monthSelectRef : undefined,
+      minValue: getMinMonth(year, minDate),
+      maxValue: getMaxMonth(year, maxDate) }
+    )
+    ),
+    isYearVisible && /*#__PURE__*/
+    _react.default.createElement("div", { "data-tid": _Calendar.CalendarDataTids.headerYear, className: _MonthView.styles.headerYear(theme), style: { top: yearTop } }, /*#__PURE__*/
+    _react.default.createElement(_DateSelect.DateSelect, {
+      disabled: yearSelectDisabled,
+      width: isMobile ? '3.5em' : 50,
+      type: "year",
+      value: year,
+      minValue: minDate ? minDate.year : undefined,
+      maxValue: maxDate ? maxDate.year : undefined,
+      onValueChange: onYearSelect,
+      ref: !yearSelectDisabled ? yearSelectRef : undefined }
+    )
+    )
+
+    )
+    ),
+    children
+    ));
+
+}

package/cjs/components/Calendar/MonthView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_ThemeContext","ColorFunctions","_Emotion","_ResponsiveLayout","_DateSelect","_MonthView","_config","CDS","_Calendar","_CalendarContext","getMinMonth","exports","year","minDate","min","i","isGreaterOrEqual","date","month","getMaxMonth","maxDate","max","isLessOrEqual","MonthView","props","_cx","_cx2","theme","useContext","ThemeContext","_useContext","CalendarContext","_useResponsiveLayout","useResponsiveLayout","isMobile","children","height","isFirstInYear","isLastInYear","top","onMonthSelect","onYearSelect","monthSelectRef","yearSelectRef","isTopNegative","isHeaderSticky","headerTop","Math","themeConfig","MONTH_TITLE_HEIGHT","alpha","borderBottomColor","fade","calendarMonthTitleBorderBottomColor","isYearVisible","yearTop","monthSelectDisabled","yearSelectDisabled","default","createElement","CalendarDataTids","className","cx","styles","monthMobile","style","key","header","headerSticky","monthTitle","headerMonth","DateSelect","disabled","width","type","value","onValueChange","ref","undefined","minValue","maxValue","headerYear"],"sources":["MonthView.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../../components/ResponsiveLayout';\nimport type { Nullable } from '../..//typings/utility-types';\nimport { DateSelect } from '../../internal/DateSelect';\n\nimport { styles } from './MonthView.styles';\nimport { themeConfig } from './config';\nimport * as CDS from './CalendarDateShape';\nimport { CalendarDataTids } from './Calendar';\nimport { CalendarContext } from './CalendarContext';\n\nexport const getMinMonth = (year: number, minDate: Nullable<CDS.CalendarDateShape>) => {\n  let min = 0;\n  for (let i = 0; i < 12; ++i) {\n    if (minDate && CDS.isGreaterOrEqual({ date: 31, month: i, year }, minDate)) {\n      min = i;\n      break;\n    }\n  }\n  return min;\n};\n\nexport const getMaxMonth = (year: number, maxDate: Nullable<CDS.CalendarDateShape>) => {\n  let max = 11;\n  for (let i = 11; i >= 0; --i) {\n    if (maxDate && CDS.isLessOrEqual({ date: 1, month: i, year }, maxDate)) {\n      max = i;\n      break;\n    }\n  }\n  return max;\n};\n\ninterface MonthViewProps {\n  children: React.ReactNode;\n  firstDayOffset: number;\n  height: number;\n  isFirstInYear?: boolean;\n  isLastInYear?: boolean;\n  month: number;\n  top: number;\n  year: number;\n  onMonthSelect: (month: number) => void;\n  onYearSelect: (month: number) => void;\n  monthSelectRef: (select: DateSelect | null) => void;\n  yearSelectRef: (select: DateSelect | null) => void;\n}\n\nexport function MonthView(props: MonthViewProps) {\n  const theme = useContext(ThemeContext);\n  const { minDate, maxDate } = useContext(CalendarContext);\n  const { isMobile } = useResponsiveLayout();\n\n  const {\n    children,\n    height,\n    isFirstInYear,\n    isLastInYear,\n    month,\n    top,\n    year,\n    onMonthSelect,\n    onYearSelect,\n    monthSelectRef,\n    yearSelectRef,\n  } = props;\n\n  const isTopNegative = top <= 0;\n  const isHeaderSticky = isTopNegative && height >= -top;\n  const headerTop = isHeaderSticky ? Math.min(-top, height - themeConfig(theme).MONTH_TITLE_HEIGHT) : 0;\n  const alpha = isHeaderSticky ? (height + top - themeConfig(theme).MONTH_TITLE_HEIGHT) / 10 : 1;\n  const borderBottomColor = ColorFunctions.fade(theme.calendarMonthTitleBorderBottomColor, alpha);\n  const isYearVisible = isFirstInYear || isHeaderSticky;\n  const yearTop = isHeaderSticky && !isLastInYear ? -headerTop - top : 0;\n  const monthSelectDisabled = top > 52 || headerTop < 0 || headerTop >= height - themeConfig(theme).MONTH_TITLE_HEIGHT;\n  const yearSelectDisabled = top > 52 || (isLastInYear && top < -height + themeConfig(theme).MONTH_TITLE_HEIGHT);\n\n  return (\n    <div\n      data-tid={CalendarDataTids.month}\n      className={cx({ [styles.month(theme)]: true, [styles.monthMobile()]: isMobile })}\n      style={{ top }}\n      key={month + '-' + year}\n    >\n      <div\n        style={{ top: headerTop }}\n        className={cx({\n          [styles.header()]: true,\n          [styles.headerSticky(theme)]: isHeaderSticky,\n        })}\n      >\n        <div style={{ borderBottomColor }} className={styles.monthTitle(theme)}>\n          <div data-tid={CalendarDataTids.headerMonth} className={styles.headerMonth(theme)}>\n            <DateSelect\n              disabled={monthSelectDisabled}\n              width={isMobile ? '6em' : 85}\n              type=\"month\"\n              value={month}\n              onValueChange={onMonthSelect}\n              ref={!monthSelectDisabled ? monthSelectRef : undefined}\n              minValue={getMinMonth(year, minDate)}\n              maxValue={getMaxMonth(year, maxDate)}\n            />\n          </div>\n          {isYearVisible && (\n            <div data-tid={CalendarDataTids.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>\n              <DateSelect\n                disabled={yearSelectDisabled}\n                width={isMobile ? '3.5em' : 50}\n                type=\"year\"\n                value={year}\n                minValue={minDate ? minDate.year : undefined}\n                maxValue={maxDate ? maxDate.year : undefined}\n                onValueChange={onYearSelect}\n                ref={!yearSelectDisabled ? yearSelectRef : undefined}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/Calendar/MonthView.styles.d.ts

@@ -0,0 +1,13 @@
+import type { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    headerMonth(t: Theme): string;
+    headerYear(t: Theme): string;
+    month(t: Theme): string;
+    monthMobile(): string;
+    header(): string;
+    headerSticky(t: Theme): string;
+    monthTitle(t: Theme): string;
+    monthDayGrid(t: Theme): string;
+    monthDayRow(t: Theme): string;
+    nativeSelect(): string;
+};

package/cjs/components/Calendar/MonthView.styles.js

@@ -0,0 +1,94 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+
+
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  headerMonth: function headerMonth(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      padding: ", " 0 ", ";\n    "])),
+
+    t.calendarMonthTitlePaddingTop, t.calendarMonthTitlePaddingBottom);
+
+  },
+
+  headerYear: function headerYear(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      position: absolute;\n      right: 0;\n      padding: ", " 0 ", ";\n    "])),
+
+
+
+    t.calendarMonthTitlePaddingTop, t.calendarMonthTitlePaddingBottom);
+
+  },
+
+  month: function month(t) {
+    var width = parseInt(t.calendarCellWidth) * 7;
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      width: ", "px;\n    "])),
+
+    width);
+
+  },
+
+  monthMobile: function monthMobile() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 100%;\n    "])));
+
+
+  },
+
+  header: function header() {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
+
+
+  },
+
+  headerSticky: function headerSticky(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background-color: ", ";\n      z-index: 2;\n    "])),
+    t.calendarMonthHeaderStickedBgColor);
+
+
+  },
+
+  monthTitle: function monthTitle(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom: 1px solid ", ";\n      font-weight: ", ";\n      margin: 0 ", " ", ";\n      line-height: ", ";\n    "])),
+    t.calendarMonthTitleBorderBottomColor,
+    t.dateSelectFontWeight,
+    t.calendarMonthTitleMarginX, t.calendarMonthTitleMarginBottom,
+    t.calendarMonthTitleLineHeight);
+
+  },
+
+  /* Note: this could've been
+   * display: grid;
+   * grid-template-columns: repeat(7, minmax(0, 1fr));
+   */
+  monthDayGrid: function monthDayGrid(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      line-height: ", ";\n      display: flex;\n      flex-direction: column;\n      padding: ", " 0px;\n    "])),
+    t.calendarCellLineHeight,
+
+
+    t.calendarGridRowSpacing);
+
+  },
+
+  monthDayRow: function monthDayRow(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      justify-content: space-between;\n\n      & + & {\n        margin-top: ", ";\n      }\n    "])),
+
+
+
+
+    t.calendarGridRowSpacing);
+
+
+  },
+
+  nativeSelect: function nativeSelect() {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: -12px;\n      right: 0;\n      bottom: -8px;\n      left: 0;\n      cursor: pointer;\n      appearance: none;\n      opacity: 0;\n      border: none;\n    "])));
+
+
+
+
+
+
+
+
+
+
+  }
+});

package/cjs/components/Calendar/MonthView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","styles","exports","memoizeStyle","headerMonth","t","css","_taggedTemplateLiteralLoose2","default","calendarMonthTitlePaddingTop","calendarMonthTitlePaddingBottom","headerYear","month","width","parseInt","calendarCellWidth","monthMobile","header","headerSticky","calendarMonthHeaderStickedBgColor","monthTitle","calendarMonthTitleBorderBottomColor","dateSelectFontWeight","calendarMonthTitleMarginX","calendarMonthTitleMarginBottom","calendarMonthTitleLineHeight","monthDayGrid","calendarCellLineHeight","calendarGridRowSpacing","monthDayRow","nativeSelect"],"sources":["MonthView.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  headerMonth(t: Theme) {\n    return css`\n      display: inline-block;\n      padding: ${t.calendarMonthTitlePaddingTop} 0 ${t.calendarMonthTitlePaddingBottom};\n    `;\n  },\n\n  headerYear(t: Theme) {\n    return css`\n      display: inline-block;\n      position: absolute;\n      right: 0;\n      padding: ${t.calendarMonthTitlePaddingTop} 0 ${t.calendarMonthTitlePaddingBottom};\n    `;\n  },\n\n  month(t: Theme) {\n    const width = parseInt(t.calendarCellWidth) * 7;\n    return css`\n      position: absolute;\n      width: ${width}px;\n    `;\n  },\n\n  monthMobile() {\n    return css`\n      width: 100%;\n    `;\n  },\n\n  header() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  headerSticky(t: Theme) {\n    return css`\n      background-color: ${t.calendarMonthHeaderStickedBgColor};\n      z-index: 2;\n    `;\n  },\n\n  monthTitle(t: Theme) {\n    return css`\n      border-bottom: 1px solid ${t.calendarMonthTitleBorderBottomColor};\n      font-weight: ${t.dateSelectFontWeight};\n      margin: 0 ${t.calendarMonthTitleMarginX} ${t.calendarMonthTitleMarginBottom};\n      line-height: ${t.calendarMonthTitleLineHeight};\n    `;\n  },\n\n  /* Note: this could've been\n   * display: grid;\n   * grid-template-columns: repeat(7, minmax(0, 1fr));\n   */\n  monthDayGrid(t: Theme) {\n    return css`\n      line-height: ${t.calendarCellLineHeight};\n      display: flex;\n      flex-direction: column;\n      padding: ${t.calendarGridRowSpacing} 0px;\n    `;\n  },\n\n  monthDayRow(t: Theme) {\n    return css`\n      display: flex;\n      justify-content: space-between;\n\n      & + & {\n        margin-top: ${t.calendarGridRowSpacing};\n      }\n    `;\n  },\n\n  nativeSelect() {\n    return css`\n      position: absolute;\n      top: -12px;\n      right: 0;\n      bottom: -8px;\n      left: 0;\n      cursor: pointer;\n      appearance: none;\n      opacity: 0;\n      border: none;\n    `;\n  },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,iBAAA;;;AAGvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,WAAW,WAAAA,YAACC,CAAQ,EAAE;IACpB,WAAOC,YAAG,EAAAf,eAAA,KAAAA,eAAA,OAAAgB,4BAAA,CAAAC,OAAA;;IAEGH,CAAC,CAACI,4BAA4B,EAAMJ,CAAC,CAACK,+BAA+B;;EAEpF,CAAC;;EAEDC,UAAU,WAAAA,WAACN,CAAQ,EAAE;IACnB,WAAOC,YAAG,EAAAd,gBAAA,KAAAA,gBAAA,OAAAe,4BAAA,CAAAC,OAAA;;;;IAIGH,CAAC,CAACI,4BAA4B,EAAMJ,CAAC,CAACK,+BAA+B;;EAEpF,CAAC;;EAEDE,KAAK,WAAAA,MAACP,CAAQ,EAAE;IACd,IAAMQ,KAAK,GAAGC,QAAQ,CAACT,CAAC,CAACU,iBAAiB,CAAC,GAAG,CAAC;IAC/C,WAAOT,YAAG,EAAAb,gBAAA,KAAAA,gBAAA,OAAAc,4BAAA,CAAAC,OAAA;;IAECK,KAAK;;EAElB,CAAC;;EAEDG,WAAW,WAAAA,YAAA,EAAG;IACZ,WAAOV,YAAG,EAAAZ,gBAAA,KAAAA,gBAAA,OAAAa,4BAAA,CAAAC,OAAA;;;EAGZ,CAAC;;EAEDS,MAAM,WAAAA,OAAA,EAAG;IACP,WAAOX,YAAG,EAAAX,gBAAA,KAAAA,gBAAA,OAAAY,4BAAA,CAAAC,OAAA;;;EAGZ,CAAC;;EAEDU,YAAY,WAAAA,aAACb,CAAQ,EAAE;IACrB,WAAOC,YAAG,EAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;IACYH,CAAC,CAACc,iCAAiC;;;EAG3D,CAAC;;EAEDC,UAAU,WAAAA,WAACf,CAAQ,EAAE;IACnB,WAAOC,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACmBH,CAAC,CAACgB,mCAAmC;IACjDhB,CAAC,CAACiB,oBAAoB;IACzBjB,CAAC,CAACkB,yBAAyB,EAAIlB,CAAC,CAACmB,8BAA8B;IAC5DnB,CAAC,CAACoB,4BAA4B;;EAEjD,CAAC;;EAED;AACF;AACA;AACA;EACEC,YAAY,WAAAA,aAACrB,CAAQ,EAAE;IACrB,WAAOC,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACOH,CAAC,CAACsB,sBAAsB;;;IAG5BtB,CAAC,CAACuB,sBAAsB;;EAEvC,CAAC;;EAEDC,WAAW,WAAAA,YAACxB,CAAQ,EAAE;IACpB,WAAOC,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;;;;IAKQH,CAAC,CAACuB,sBAAsB;;;EAG5C,CAAC;;EAEDE,YAAY,WAAAA,aAAA,EAAG;IACb,WAAOxB,YAAG,EAAAN,iBAAA,KAAAA,iBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;;;;;;;;;EAWZ;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/components/Calendar/MonthViewModel.d.ts

@@ -0,0 +1,14 @@
+import type { Theme } from '../../lib/theming/Theme';
+import { DayCellViewModel } from './DayCellViewModel';
+export declare class MonthViewModel {
+    static create: (...args: number[]) => any;
+    readonly daysCount: number;
+    readonly offset: number;
+    readonly month: number;
+    readonly year: number;
+    readonly days: DayCellViewModel[];
+    isLastInYear: boolean;
+    isFirstInYear: boolean;
+    getHeight(theme: Theme): number;
+    private constructor();
+}

package/cjs/components/Calendar/MonthViewModel.js

@@ -0,0 +1,104 @@
+"use strict";exports.__esModule = true;exports.MonthViewModel = void 0;var _memo = require("../../lib/memo");
+
+
+var _CalendarUtils = require("./CalendarUtils");
+var _config = require("./config");
+var _DayCellViewModel = require("./DayCellViewModel");var _MonthViewModel;
+
+var getCurrentYear = function getCurrentYear(month, year) {
+  if (month < 0) {
+    return year - Math.ceil(-month / 12);
+  }
+
+  if (month > 11) {
+    return year + Math.floor(month / 12);
+  }
+
+  return year;
+};
+
+var getCurrentMonth = function getCurrentMonth(month) {
+  if (month < 0) {
+    return 12 + month % 12;
+  }
+
+  if (month > 11) {
+    return month % 12;
+  }
+
+  return month;
+};var
+
+MonthViewModel = exports.MonthViewModel = /*#__PURE__*/function () {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  function MonthViewModel(month, year) {
+    var currentYear = getCurrentYear(month, year);
+    var currentMonth = getCurrentMonth(month);
+
+    var daysCount = getMonthsDays(currentMonth, currentYear);
+    var offset = getMonthOffset(currentMonth, currentYear);
+    this.daysCount = daysCount;
+    this.offset = offset;
+    this.month = currentMonth;
+    this.year = currentYear;
+    this.isLastInYear = currentMonth === 11;
+    this.isFirstInYear = currentMonth === 0;
+    this.days = Array.from({ length: daysCount }, function (_, i) {
+      var isWeekend = (i + getMonthOffset(currentMonth, currentYear)) % 7 >= 5;
+      return _DayCellViewModel.DayCellViewModel.create(i + 1, currentMonth, currentYear, isWeekend);
+    });
+  }var _proto = MonthViewModel.prototype; // FIXME: shouldbe readonly
+  // FIXME: shouldbe readonly
+  _proto.getHeight = function getHeight(theme) {var _themeConfig = (0, _config.themeConfig)(theme),DAY_HEIGHT = _themeConfig.DAY_HEIGHT,MONTH_TITLE_OFFSET_HEIGHT = _themeConfig.MONTH_TITLE_OFFSET_HEIGHT,MONTH_BOTTOM_MARGIN = _themeConfig.MONTH_BOTTOM_MARGIN,CALENDAR_GRID_ROW_SPACING = _themeConfig.CALENDAR_GRID_ROW_SPACING;return getMonthHeight(this.daysCount, this.offset, DAY_HEIGHT, MONTH_TITLE_OFFSET_HEIGHT, MONTH_BOTTOM_MARGIN, CALENDAR_GRID_ROW_SPACING);};return MonthViewModel;}();_MonthViewModel = MonthViewModel;MonthViewModel.create = (0, _memo.memo)(function (month, year) {return new _MonthViewModel(month, year);});
+var getMonthHeight = (0, _memo.memo)(
+  function (
+  daysCount,
+  offset,
+  dayHeight,
+  titleHeight,
+  marginBottom,
+  rowSpacing)
+  {
+    var weeks = Math.ceil((daysCount + offset) / 7);
+    return weeks * dayHeight + titleHeight + marginBottom + rowSpacing * 2 + rowSpacing * (weeks - 1);
+  }
+);
+var getMonthsDays = (0, _memo.memo)(function (month, year) {return new Date(year, (0, _CalendarUtils.getMonthInHumanFormat)(month), 0).getDate();});
+
+var getMonthOffset = (0, _memo.memo)(function (month, year) {
+  var day = new Date(year, month, 1).getDay() - 1;
+  if (day === -1) {
+    return 6;
+  }
+  return day;
+});

package/cjs/components/Calendar/MonthViewModel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_memo","require","_CalendarUtils","_config","_DayCellViewModel","_MonthViewModel","getCurrentYear","month","year","Math","ceil","floor","getCurrentMonth","MonthViewModel","exports","currentYear","currentMonth","daysCount","getMonthsDays","offset","getMonthOffset","isLastInYear","isFirstInYear","days","Array","from","length","_","i","isWeekend","DayCellViewModel","create","_proto","prototype","getHeight","theme","_themeConfig","themeConfig","DAY_HEIGHT","MONTH_TITLE_OFFSET_HEIGHT","MONTH_BOTTOM_MARGIN","CALENDAR_GRID_ROW_SPACING","getMonthHeight","memo","dayHeight","titleHeight","marginBottom","rowSpacing","weeks","Date","getMonthInHumanFormat","getDate","day","getDay"],"sources":["MonthViewModel.ts"],"sourcesContent":["import { memo } from '../../lib/memo';\nimport type { Theme } from '../../lib/theming/Theme';\n\nimport { getMonthInHumanFormat } from './CalendarUtils';\nimport { themeConfig } from './config';\nimport { DayCellViewModel } from './DayCellViewModel';\n\nconst getCurrentYear = (month: number, year: number) => {\n  if (month < 0) {\n    return year - Math.ceil(-month / 12);\n  }\n\n  if (month > 11) {\n    return year + Math.floor(month / 12);\n  }\n\n  return year;\n};\n\nconst getCurrentMonth = (month: number) => {\n  if (month < 0) {\n    return 12 + (month % 12);\n  }\n\n  if (month > 11) {\n    return month % 12;\n  }\n\n  return month;\n};\n\nexport class MonthViewModel {\n  public static create = memo((month: number, year: number): MonthViewModel => new MonthViewModel(month, year));\n\n  public readonly daysCount: number;\n\n  public readonly offset: number;\n\n  public readonly month: number;\n\n  public readonly year: number;\n\n  public readonly days: DayCellViewModel[];\n\n  // FIXME: shouldbe readonly\n  public isLastInYear: boolean;\n\n  // FIXME: shouldbe readonly\n  public isFirstInYear: boolean;\n\n  public getHeight(theme: Theme): number {\n    const { DAY_HEIGHT, MONTH_TITLE_OFFSET_HEIGHT, MONTH_BOTTOM_MARGIN, CALENDAR_GRID_ROW_SPACING } =\n      themeConfig(theme);\n    return getMonthHeight(\n      this.daysCount,\n      this.offset,\n      DAY_HEIGHT,\n      MONTH_TITLE_OFFSET_HEIGHT,\n      MONTH_BOTTOM_MARGIN,\n      CALENDAR_GRID_ROW_SPACING,\n    );\n  }\n\n  private constructor(month: number, year: number) {\n    const currentYear = getCurrentYear(month, year);\n    const currentMonth = getCurrentMonth(month);\n\n    const daysCount = getMonthsDays(currentMonth, currentYear);\n    const offset = getMonthOffset(currentMonth, currentYear);\n    this.daysCount = daysCount;\n    this.offset = offset;\n    this.month = currentMonth;\n    this.year = currentYear;\n    this.isLastInYear = currentMonth === 11;\n    this.isFirstInYear = currentMonth === 0;\n    this.days = Array.from({ length: daysCount }, (_, i) => {\n      const isWeekend = (i + getMonthOffset(currentMonth, currentYear)) % 7 >= 5;\n      return DayCellViewModel.create(i + 1, currentMonth, currentYear, isWeekend);\n    });\n  }\n}\n\nconst getMonthHeight = memo(\n  (\n    daysCount: number,\n    offset: number,\n    dayHeight: number,\n    titleHeight: number,\n    marginBottom: number,\n    rowSpacing: number,\n  ) => {\n    const weeks = Math.ceil((daysCount + offset) / 7);\n    return weeks * dayHeight + titleHeight + marginBottom + rowSpacing * 2 + rowSpacing * (weeks - 1);\n  },\n);\nconst getMonthsDays = memo((month: number, year: number) => new Date(year, getMonthInHumanFormat(month), 0).getDate());\n\nconst getMonthOffset = memo((month: number, year: number) => {\n  const day = new Date(year, month, 1).getDay() - 1;\n  if (day === -1) {\n    return 6;\n  }\n  return day;\n});\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/Calendar/__creevey__/Calendar.creevey.mts

@@ -0,0 +1,74 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('Calendar', () => {
+  story('CalendarWithMinMaxDate', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+    test('DateSelect months', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Calendar"]' }))
+        .pause(1000)
+        .click(
+          context.webdriver.findElement({
+            css: '[data-tid="MonthView__month"]:first-child [data-tid="MonthView__headerMonth"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect months');
+    });
+
+    test('DateSelect years', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Calendar"]' }))
+        .pause(1000)
+        .click(
+          context.webdriver.findElement({
+            css: '[data-comp-name~="MonthView"]:first-child [data-tid="MonthView__headerYear"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect years');
+    });
+  });
+
+  story('ScrollsCalendarOnDateChange', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+    test('initial date', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'initial date');
+    });
+
+    test('scrolls to new date on date change', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="change-date-button"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'scrolls to new date on date change');
+    });
+  });
+
+  story('CalendarWithBottomSeparator', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        "themes don't affect the bottom separator": {
+          in: /^(?!\b(chrome2022|chrome2022Dark|firefox2022|firefox2022Dark)\b)/,
+        },
+      },
+    });
+  });
+});

package/cjs/components/Calendar/__docs__/Calendar.mdx

@@ -0,0 +1,27 @@
+import * as CalendarStories from './Calendar.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
+
+<Meta of={CalendarStories} />
+
+<Header
+  component="Calendar"
+  guides="https://guides.kontur.ru/components/input-fields/calendar/#_Blok_kalendarya"
+  figma="https://www.figma.com/design/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI?node-id=200-979&t=DrNoIKKKInwy9gzX-0"
+/>
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<PropsTable />
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/Calendar/__docs__/CalendarDay.mdx

@@ -0,0 +1,23 @@
+import * as CalendarDayStories from './CalendarDay.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
+
+<Meta of={CalendarDayStories} />
+
+<Header component="Calendar" />
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<PropsTable />
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/Calendar/config.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from '../../lib/theming/Theme';
+export declare const themeConfig: (t: Theme) => any;

package/cjs/components/Calendar/config.js

@@ -0,0 +1,44 @@
+"use strict";exports.__esModule = true;exports.themeConfig = void 0;
+var _memo = require("../../lib/memo");
+
+var getConfig = (0, _memo.memo)(
+  function (
+  monthTitleLineHeight,
+  monthTitlePaddingTop,
+  monthTitlePaddingBottom,
+  monthTitleMarginBottom,
+  cellWidth,
+  cellHeight,
+  wrapperHeight,
+  monthMarginBottom,
+  maxMonthsToAppendOnScroll,
+  calendarGridRowSpacing)
+  {
+    var monthTitleHeight =
+    parseInt(monthTitleLineHeight) + parseInt(monthTitlePaddingTop) + parseInt(monthTitlePaddingBottom);
+    return {
+      DAY_WIDTH: parseInt(cellWidth),
+      DAY_HEIGHT: parseInt(cellHeight),
+      MONTH_TITLE_HEIGHT: monthTitleHeight,
+      MONTH_TITLE_OFFSET_HEIGHT: monthTitleHeight + parseInt(monthTitleMarginBottom) + 1, // + 1px separator line
+      WRAPPER_HEIGHT: parseInt(wrapperHeight),
+      MONTH_BOTTOM_MARGIN: parseInt(monthMarginBottom),
+      MAX_MONTHS_TO_APPEND_ON_SCROLL: parseInt(maxMonthsToAppendOnScroll),
+      CALENDAR_GRID_ROW_SPACING: parseInt(calendarGridRowSpacing)
+    };
+  }
+);
+
+var themeConfig = exports.themeConfig = function themeConfig(t) {return (
+    getConfig(
+      t.calendarMonthTitleLineHeight,
+      t.calendarMonthTitlePaddingTop,
+      t.calendarMonthTitlePaddingBottom,
+      t.calendarMonthTitleMarginBottom,
+      t.calendarCellWidth,
+      t.calendarCellHeight,
+      t.calendarWrapperHeight,
+      t.calendarMonthMarginBottom,
+      t.calendarMaxMonthsToAppendOnScroll,
+      t.calendarGridRowSpacing
+    ));};

package/cjs/components/Calendar/config.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_memo","require","getConfig","memo","monthTitleLineHeight","monthTitlePaddingTop","monthTitlePaddingBottom","monthTitleMarginBottom","cellWidth","cellHeight","wrapperHeight","monthMarginBottom","maxMonthsToAppendOnScroll","calendarGridRowSpacing","monthTitleHeight","parseInt","DAY_WIDTH","DAY_HEIGHT","MONTH_TITLE_HEIGHT","MONTH_TITLE_OFFSET_HEIGHT","WRAPPER_HEIGHT","MONTH_BOTTOM_MARGIN","MAX_MONTHS_TO_APPEND_ON_SCROLL","CALENDAR_GRID_ROW_SPACING","themeConfig","exports","t","calendarMonthTitleLineHeight","calendarMonthTitlePaddingTop","calendarMonthTitlePaddingBottom","calendarMonthTitleMarginBottom","calendarCellWidth","calendarCellHeight","calendarWrapperHeight","calendarMonthMarginBottom","calendarMaxMonthsToAppendOnScroll"],"sources":["config.ts"],"sourcesContent":["import type { Theme } from '../../lib/theming/Theme';\nimport { memo } from '../../lib/memo';\n\nconst getConfig = memo(\n  (\n    monthTitleLineHeight: string,\n    monthTitlePaddingTop: string,\n    monthTitlePaddingBottom: string,\n    monthTitleMarginBottom: string,\n    cellWidth: string,\n    cellHeight: string,\n    wrapperHeight: string,\n    monthMarginBottom: string,\n    maxMonthsToAppendOnScroll: string,\n    calendarGridRowSpacing: string,\n  ) => {\n    const monthTitleHeight =\n      parseInt(monthTitleLineHeight) + parseInt(monthTitlePaddingTop) + parseInt(monthTitlePaddingBottom);\n    return {\n      DAY_WIDTH: parseInt(cellWidth),\n      DAY_HEIGHT: parseInt(cellHeight),\n      MONTH_TITLE_HEIGHT: monthTitleHeight,\n      MONTH_TITLE_OFFSET_HEIGHT: monthTitleHeight + parseInt(monthTitleMarginBottom) + 1, // + 1px separator line\n      WRAPPER_HEIGHT: parseInt(wrapperHeight),\n      MONTH_BOTTOM_MARGIN: parseInt(monthMarginBottom),\n      MAX_MONTHS_TO_APPEND_ON_SCROLL: parseInt(maxMonthsToAppendOnScroll),\n      CALENDAR_GRID_ROW_SPACING: parseInt(calendarGridRowSpacing),\n    };\n  },\n);\n\nexport const themeConfig = (t: Theme) =>\n  getConfig(\n    t.calendarMonthTitleLineHeight,\n    t.calendarMonthTitlePaddingTop,\n    t.calendarMonthTitlePaddingBottom,\n    t.calendarMonthTitleMarginBottom,\n    t.calendarCellWidth,\n    t.calendarCellHeight,\n    t.calendarWrapperHeight,\n    t.calendarMonthMarginBottom,\n    t.calendarMaxMonthsToAppendOnScroll,\n    t.calendarGridRowSpacing,\n  );\n"],"mappings":";AACA,IAAAA,KAAA,GAAAC,OAAA;;AAEA,IAAMC,SAAS,GAAG,IAAAC,UAAI;EACpB;EACEC,oBAA4B;EAC5BC,oBAA4B;EAC5BC,uBAA+B;EAC/BC,sBAA8B;EAC9BC,SAAiB;EACjBC,UAAkB;EAClBC,aAAqB;EACrBC,iBAAyB;EACzBC,yBAAiC;EACjCC,sBAA8B;EAC3B;IACH,IAAMC,gBAAgB;IACpBC,QAAQ,CAACX,oBAAoB,CAAC,GAAGW,QAAQ,CAACV,oBAAoB,CAAC,GAAGU,QAAQ,CAACT,uBAAuB,CAAC;IACrG,OAAO;MACLU,SAAS,EAAED,QAAQ,CAACP,SAAS,CAAC;MAC9BS,UAAU,EAAEF,QAAQ,CAACN,UAAU,CAAC;MAChCS,kBAAkB,EAAEJ,gBAAgB;MACpCK,yBAAyB,EAAEL,gBAAgB,GAAGC,QAAQ,CAACR,sBAAsB,CAAC,GAAG,CAAC,EAAE;MACpFa,cAAc,EAAEL,QAAQ,CAACL,aAAa,CAAC;MACvCW,mBAAmB,EAAEN,QAAQ,CAACJ,iBAAiB,CAAC;MAChDW,8BAA8B,EAAEP,QAAQ,CAACH,yBAAyB,CAAC;MACnEW,yBAAyB,EAAER,QAAQ,CAACF,sBAAsB;IAC5D,CAAC;EACH;AACF,CAAC;;AAEM,IAAMW,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAIE,CAAQ;IAClCxB,SAAS;MACPwB,CAAC,CAACC,4BAA4B;MAC9BD,CAAC,CAACE,4BAA4B;MAC9BF,CAAC,CAACG,+BAA+B;MACjCH,CAAC,CAACI,8BAA8B;MAChCJ,CAAC,CAACK,iBAAiB;MACnBL,CAAC,CAACM,kBAAkB;MACpBN,CAAC,CAACO,qBAAqB;MACvBP,CAAC,CAACQ,yBAAyB;MAC3BR,CAAC,CAACS,iCAAiC;MACnCT,CAAC,CAACb;IACJ,CAAC","ignoreList":[]}

package/cjs/components/Calendar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Calendar';
+export * from './CalendarDateShape';
+export * from './CalendarDay';

package/cjs/components/Calendar/index.js

@@ -0,0 +1,3 @@
+"use strict";exports.__esModule = true;var _Calendar = require("./Calendar");Object.keys(_Calendar).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Calendar[key]) return;exports[key] = _Calendar[key];});
+var _CalendarDateShape = require("./CalendarDateShape");Object.keys(_CalendarDateShape).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _CalendarDateShape[key]) return;exports[key] = _CalendarDateShape[key];});
+var _CalendarDay = require("./CalendarDay");Object.keys(_CalendarDay).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _CalendarDay[key]) return;exports[key] = _CalendarDay[key];});

package/cjs/components/Calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Calendar","require","Object","keys","forEach","key","exports","_CalendarDateShape","_CalendarDay"],"sources":["index.tsx"],"sourcesContent":["export * from './Calendar';\nexport * from './CalendarDateShape';\nexport * from './CalendarDay';\n"],"mappings":"uCAAA,IAAAA,SAAA,GAAAC,OAAA,eAAAC,MAAA,CAAAC,IAAA,CAAAH,SAAA,EAAAI,OAAA,WAAAC,GAAA,OAAAA,GAAA,kBAAAA,GAAA,8BAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,SAAA,CAAAK,GAAA,UAAAC,OAAA,CAAAD,GAAA,IAAAL,SAAA,CAAAK,GAAA;AACA,IAAAE,kBAAA,GAAAN,OAAA,wBAAAC,MAAA,CAAAC,IAAA,CAAAI,kBAAA,EAAAH,OAAA,WAAAC,GAAA,OAAAA,GAAA,kBAAAA,GAAA,8BAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAE,kBAAA,CAAAF,GAAA,UAAAC,OAAA,CAAAD,GAAA,IAAAE,kBAAA,CAAAF,GAAA;AACA,IAAAG,YAAA,GAAAP,OAAA,kBAAAC,MAAA,CAAAC,IAAA,CAAAK,YAAA,EAAAJ,OAAA,WAAAC,GAAA,OAAAA,GAAA,kBAAAA,GAAA,8BAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAG,YAAA,CAAAH,GAAA,UAAAC,OAAA,CAAAD,GAAA,IAAAG,YAAA,CAAAH,GAAA","ignoreList":[]}

package/cjs/components/Calendar/locale/index.d.ts

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import type { CalendarLocale } from './types';
+export * from './types';
+export declare const CalendarLocaleHelper: LocaleHelper<CalendarLocale>;

package/cjs/components/Calendar/locale/index.js

@@ -0,0 +1,12 @@
+"use strict";exports.__esModule = true;var _exportNames = { CalendarLocaleHelper: true };exports.CalendarLocaleHelper = void 0;var _LocaleHelper = require("../../../lib/locale/LocaleHelper");
+
+var _en = require("./locales/en");
+var _ru = require("./locales/ru");
+
+
+var _types = require("./types");Object.keys(_types).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _types[key]) return;exports[key] = _types[key];});
+
+var CalendarLocaleHelper = exports.CalendarLocaleHelper = new _LocaleHelper.LocaleHelper({
+  ru_RU: _ru.componentsLocales,
+  en_GB: _en.componentsLocales
+});

package/cjs/components/Calendar/locale/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_LocaleHelper","require","_en","_ru","_types","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","CalendarLocaleHelper","LocaleHelper","ru_RU","en_GB"],"sources":["index.ts"],"sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport type { CalendarLocale } from './types';\n\nexport * from './types';\n\nexport const CalendarLocaleHelper = new LocaleHelper<CalendarLocale>({\n  ru_RU,\n  en_GB,\n});\n"],"mappings":"+HAAA,IAAAA,aAAA,GAAAC,OAAA;;AAEA,IAAAC,GAAA,GAAAD,OAAA;AACA,IAAAE,GAAA,GAAAF,OAAA;;;AAGA,IAAAG,MAAA,GAAAH,OAAA,YAAAI,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA,OAAAA,GAAA,kBAAAA,GAAA,8BAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA,cAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA,UAAAK,OAAA,CAAAL,GAAA,IAAAJ,MAAA,CAAAI,GAAA;;AAEO,IAAMM,oBAAoB,GAAAD,OAAA,CAAAC,oBAAA,GAAG,IAAIC,0BAAY,CAAiB;EACnEC,KAAK,EAALA,qBAAK;EACLC,KAAK,EAALA;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/components/Calendar/locale/locales/en.d.ts

@@ -0,0 +1,2 @@
+import type { CalendarLocale } from '../types';
+export declare const componentsLocales: CalendarLocale;