@steroidsjs/bootstrap 3.0.0-beta.99 → 3.0.1

package/content/Calendar/CalendarView.js

@@ -38,10 +38,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var moment_1 = __importDefault(require("react-day-picker/moment"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 var react_day_picker_1 = __importStar(require("react-day-picker"));
+var calendar_1 = require("@steroidsjs/core/utils/calendar");
 var CaptionElement_1 = __importDefault(require("./CaptionElement"));
 function CalendarView(props) {
     var bem = (0, hooks_1.useBem)('CalendarView');
@@ -57,7 +57,10 @@ function CalendarView(props) {
         var outRange = function (day) { return react_day_picker_1.DateUtils.isDayBefore(day, from); };
         return {
             selectedDays: isRange
-                ? [from, { from: from, to: to }]
+                ? [from, {
+                        from: from,
+                        to: to
+                    }]
                 : from,
             modifiers: isRange && !react_day_picker_1.DateUtils.isSameDay(from, to)
                 ? {
@@ -81,6 +84,6 @@ function CalendarView(props) {
             else {
                 onDaySelect(day);
             }
-        }, fixedWeeks: true, month: month, firstDayOfWeek: 1, modifiers: modifiers, canChangeMonth: false, onDayClick: onDaySelect, selectedDays: selectedDays, numberOfMonths: numberOfMonths, localeUtils: moment_1["default"], locale: localeComponent.language })));
+        }, fixedWeeks: true, month: month, firstDayOfWeek: 1, modifiers: modifiers, canChangeMonth: false, onDayClick: onDaySelect, selectedDays: selectedDays, numberOfMonths: numberOfMonths, localeUtils: calendar_1.customLocaleUtils, locale: localeComponent.language })));
 }
 exports["default"] = CalendarView;

package/content/Calendar/CalendarView.scss

@@ -155,10 +155,10 @@ $calendar-border-color: var(--calendar-border-color);
             z-index: 9;
         }
 
-        &:focus { 
+        &:focus {
             outline: none;
         }
-        
+
         &:focus:not(:active)::after {
             opacity: 1;
         }
@@ -291,3 +291,8 @@ $calendar-border-color: var(--calendar-border-color);
         }
     }
 }
+
+// Class to allow body scroll, when Calendar is open in a Modal window
+.ModalView_body-hide-scroll:has(.CalendarView) {
+    overflow-y: auto;
+}

package/content/Calendar/CaptionElement.js

@@ -31,6 +31,7 @@ var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
+var DateControlType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/DateControlType"));
 function CaptionElement(props) {
     var bem = (0, hooks_1.useBem)('CaptionElement');
     var localeUtils = props.localeUtils, locale = props.locale, fromYear = props.fromYear, toYear = props.toYear, date = props.date, isCaptionPanelVisible = props.isCaptionPanelVisible, toggleCaptionPanel = props.toggleCaptionPanel;
@@ -60,20 +61,22 @@ function CaptionElement(props) {
     var icons = (0, react_1.useMemo)(function () { return [
         {
             name: 'double_arrow_left',
+            sourceControl: DateControlType_1["default"].PREV_DOUBLE,
             onClick: function () { return handleYearChange(currentYear - 1); }
         },
         {
             name: 'arrow_left_24x24',
-            externalClass: 'one-arrow',
+            sourceControl: DateControlType_1["default"].PREV_ONE,
             onClick: function () { return handleMonthChange(currentMonth - 1); }
         },
         {
             name: 'arrow_right_24x24',
-            externalClass: 'one-arrow',
+            sourceControl: DateControlType_1["default"].NEXT_ONE,
             onClick: function () { return handleMonthChange(currentMonth + 1); }
         },
         {
             name: 'double_arrow_right',
+            sourceControl: DateControlType_1["default"].NEXT_DOUBLE,
             onClick: function () { return handleYearChange(currentYear + 1); }
         },
     ]; }, [currentYear, handleYearChange, currentMonth, handleMonthChange]);
@@ -91,7 +94,7 @@ function CaptionElement(props) {
             React.createElement("div", { className: bem.element('container-icons') }, icons.map(function (icon, iconIndex) { return (React.createElement(Icon_1["default"], { key: iconIndex, name: icon.name, onClick: function (e) {
                     e.preventDefault();
                     icon.onClick();
-                }, className: bem.element('button', icon.externalClass) })); }))),
+                }, className: bem.element('button'), "data-sourcecontrol": icon.sourceControl })); }))),
         isCaptionPanelVisible && (React.createElement("div", { className: bem.element('panel', { 'full-height': !props.showCalendarFooter }) },
             React.createElement("div", { className: bem.element('panel-header', 'months') }, __('Месяц')),
             React.createElement("div", { className: bem.element('panel-header', 'years') }, __('Год')),

package/content/CalendarSystem/AsideCalendars/AsideCalendars.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IEventGroup } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import './AsideCalendars.scss';
+interface IAsideCalendarsProps {
+    eventGroups: IEventGroup[];
+    eventGroupsTitle: string;
+    onChangeEventGroupsIds: (selectedIds: number[]) => void;
+    openCreateEventGroupModal: () => void;
+}
+declare function AsideCalendars(props: IAsideCalendarsProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AsideCalendars>;
+export default _default;

package/content/CalendarSystem/AsideCalendars/AsideCalendars.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var form_1 = require("@steroidsjs/core/ui/form");
+require("./AsideCalendars.scss");
+function AsideCalendars(props) {
+    var bem = (0, useBem_1["default"])('AsideCalendars');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement(content_1.Accordion, null,
+            react_1["default"].createElement(content_1.AccordionItem, { title: props.eventGroupsTitle },
+                react_1["default"].createElement(form_1.CheckboxListField, { items: props.eventGroups, onChange: function (selectedIds) { return props.onChangeEventGroupsIds(selectedIds); } }),
+                react_1["default"].createElement(form_1.Button, { color: 'basic', className: bem.element('add'), onClick: props.openCreateEventGroupModal, size: 'sm' },
+                    react_1["default"].createElement(content_1.Icon, { name: "add_16x16" }))))));
+}
+exports["default"] = (0, react_1.memo)(AsideCalendars);

package/content/CalendarSystem/AsideCalendars/AsideCalendars.scss

@@ -0,0 +1,107 @@
+@use "style/variables";
+
+:root {
+    --calendar-system-icon-background-color: #f1f5f7;
+    --calendar-system-icon-chevron-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --calendar-system-icon-background-color: #4b4e5e;
+    --calendar-system-separator-color: rgba(255, 255, 255, 0.1);
+}
+
+$calendar-system-icon-background-color: var(--calendar-system-icon-background-color);
+$calendar-system-separator-color: var(--calendar-system-separator-color);
+
+.AsideCalendars {
+    $root: &;
+
+    position: relative;
+
+    &::before {
+        content: "";
+        display: block;
+        position: relative;
+        height: 1px;
+        width: 100%;
+        margin: 32px 0px;
+
+        background-color: $calendar-system-separator-color;
+    }
+
+    .AccordionItemView {
+        width: 100%;
+
+        &_opened {
+            overflow: visible;
+        }
+
+        &__icon-chevron {
+            box-shadow: none;
+
+            svg {
+                rect {
+                    fill: $calendar-system-icon-background-color;
+                }
+                path {
+                    stroke: variables.$icon-color;
+                }
+            }
+        }
+
+        &__icon-wrapper {
+            top: 14px;
+        }
+
+        &__header-container {
+            background-color: variables.$element-background-color;
+        }
+
+        &__content {
+            padding: 0;
+            padding-top: 0;
+
+            > .FieldLayoutView { 
+                margin-bottom: 0;
+            }
+        }
+
+        &__content_visible {
+            padding: 0;
+            border: none;
+            overflow: visible;
+        }
+
+        &__title-container {
+            width: 238px;
+            padding-left: 0;
+            padding-top: 12px;
+
+            p {
+                font-size: variables.$font-size-16;
+                font-weight: variables.$font-weight-lg;
+                line-height: variables.$line-height-22;
+            }
+        }
+    }
+
+    &__add {
+        width: 24px;
+        height: 24px;
+        max-width: 24px;
+        min-width: auto;
+        padding: 4px;
+        position: relative;
+        margin-top: 8px;
+
+        svg {
+            position: absolute;
+            width: 100%;
+            width: 100%;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+    }
+}

package/content/CalendarSystem/AsideCalendars/index.d.ts

@@ -0,0 +1,2 @@
+import AsideCalendars from './AsideCalendars';
+export default AsideCalendars;

package/content/CalendarSystem/AsideCalendars/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var AsideCalendars_1 = __importDefault(require("./AsideCalendars"));
+exports["default"] = AsideCalendars_1["default"];

package/content/CalendarSystem/AsideHeader/AsideHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './AsideHeader.scss';
+interface IAsideHeaderProps {
+    onClick?: () => void;
+    className?: string;
+}
+declare function AsideHeader(props: IAsideHeaderProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AsideHeader>;
+export default _default;

package/content/CalendarSystem/AsideHeader/AsideHeader.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Title_1 = __importDefault(require("@steroidsjs/core/ui/typography/Title/Title"));
+var form_1 = require("@steroidsjs/core/ui/form");
+require("./AsideHeader.scss");
+function AsideHeader(props) {
+    var bem = (0, useBem_1["default"])('AsideHeader');
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className) },
+        react_1["default"].createElement(Title_1["default"], { content: __('Календарь'), className: bem.element('title') }),
+        react_1["default"].createElement(form_1.Button, { icon: "add", size: "sm", label: __('Создать'), className: bem.element('create'), onClick: props.onClick })));
+}
+exports["default"] = (0, react_1.memo)(AsideHeader);

package/content/CalendarSystem/AsideHeader/AsideHeader.scss

@@ -0,0 +1,41 @@
+@use "style/variables";
+
+.AsideHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    &__title {
+        font-size: variables.$font-size-24;
+        font-weight: variables.$font-weight-lg;
+        line-height: variables.$line-height-32;
+        color: variables.$text-color;
+        margin-bottom: 0;
+    }
+
+    .ButtonView {
+        width: auto;
+        height: 34px;
+        border: none;
+        padding: 5px 12px;
+
+        &__label {
+            gap: 4px;
+        }
+
+        &__text {
+            font-size: variables.$font-size-14;
+            font-weight: variables.$font-weight-sm;
+            line-height: variables.$line-height-24;
+        }
+
+        &__icon {
+            margin: 0;
+            svg path,
+            rect,
+            circle {
+                stroke: #FFFFFF;
+            }
+        }
+    }
+}

package/content/CalendarSystem/AsideHeader/index.d.ts

@@ -0,0 +1,2 @@
+import AsideHeader from './AsideHeader';
+export default AsideHeader;

package/content/CalendarSystem/AsideHeader/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var AsideHeader_1 = __importDefault(require("./AsideHeader"));
+exports["default"] = AsideHeader_1["default"];

package/content/CalendarSystem/CalendarSystemEventGroupModalView.d.ts

@@ -0,0 +1,2 @@
+import { CalendarSystemEventGroupModalViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+export default function CalendarSystemEventGroupModalView(props: CalendarSystemEventGroupModalViewProps): JSX.Element;

package/content/CalendarSystem/CalendarSystemEventGroupModalView.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var typography_1 = require("@steroidsjs/core/ui/typography");
+function CalendarSystemEventGroupModalView(props) {
+    var bem = (0, hooks_1.useBem)('CalendarSystemEventGroupModalView');
+    return (react_1["default"].createElement(Modal_1["default"], { title: props.isCreate ? __('Новая группа') : __('Редактирование группы'), onClose: props.onClose, className: bem.block(), shouldCloseOnEsc: true, shouldCloseOnOverlayClick: true },
+        react_1["default"].createElement(form_1.Form, { className: bem.element('form'), onSubmit: function (fields) {
+                props.onEventGroupSubmit(fields);
+                props.onClose();
+            }, submitLabel: props.isCreate ? __('Создать') : __('Сохранить'), initialValues: props.eventGroupInitialValues },
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(typography_1.Text, { className: bem.element('label'), content: __('Имя') }),
+                react_1["default"].createElement(form_1.InputField, { attribute: 'label', required: true, className: bem.element('name-field') })),
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(typography_1.Text, { className: bem.element('label'), content: __('Выбор цвета') }),
+                react_1["default"].createElement(form_1.InputField, { type: 'color', required: true, attribute: 'color' })))));
+}
+exports["default"] = CalendarSystemEventGroupModalView;

package/content/CalendarSystem/CalendarSystemEventGroupModalView.scss

@@ -0,0 +1,53 @@
+@use "style/variables";
+
+.CalendarSystemEventGroupModalView {
+    $root: &;
+    width: 584px;
+
+    .FieldLayoutView {
+        margin-bottom: 0;
+    }
+
+    .ModalView__header {
+        .ModalView__title {
+            font-size: variables.$font-size-lg;
+            font-weight: variables.$font-weight-lg;
+            line-height: variables.$line-height-lg;
+        }
+    }
+
+    &__form {
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 16px;
+
+        > div {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+
+            gap: 12px;
+
+            &:nth-child(2) .FieldLayoutView .InputFieldView{ 
+                width: 120px;
+            }
+        }
+
+        #{$root}__label {
+            align-self: flex-start;
+            margin-bottom: 0;
+            margin-right: 16px;
+            width: 140px;
+            height: 46px;
+        }
+
+        #{$root}__name-field {
+            width: 380px;
+        }
+
+        .ButtonView {
+            width: 120px;
+            padding: 11px 12px;
+        }
+    }
+}

package/content/CalendarSystem/CalendarSystemModalView.d.ts

@@ -0,0 +1,2 @@
+import { ICalendarSystemModalViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+export default function CalendarSystemModalView(props: ICalendarSystemModalViewProps): JSX.Element;

package/content/CalendarSystem/CalendarSystemModalView.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable implicit-arrow-linebreak */
+/* eslint-disable no-undef */
+var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var form_2 = require("@steroidsjs/core/actions/form");
+var ADD_EVENT_FORM_ID = 'AddEventForm';
+function CalendarSystemModalView(props) {
+    var bem = (0, useBem_1["default"])('CalendarSystemModalView');
+    var dispatch = (0, hooks_1.useDispatch)();
+    var eventInitialValues = react_1["default"].useMemo(function () { return props.eventInitialValues; }, [props.eventInitialValues]);
+    var callOnEventSubmit = function (fields) {
+        return eventInitialValues && !props.isCreate ? props.onModalFormSubmit(fields, eventInitialValues) : props.onModalFormSubmit(fields);
+    };
+    var onCloseModal = react_1["default"].useCallback(function () {
+        props.onClose();
+        dispatch((0, form_2.formSetErrors)(ADD_EVENT_FORM_ID, {}));
+    }, []);
+    return (react_1["default"].createElement(Modal_1["default"], { title: props.isCreate ? __('Новое событие') : __('Редактирование события'), onClose: onCloseModal, className: bem.block(), shouldCloseOnEsc: true, shouldCloseOnOverlayClick: true },
+        react_1["default"].createElement(form_1.Form, { className: bem.element('default-form'), formId: ADD_EVENT_FORM_ID, onBeforeSubmit: function (data) {
+                if (!data.eventGroupId) {
+                    dispatch((0, form_2.formSetErrors)(ADD_EVENT_FORM_ID, {
+                        eventGroupId: [__('Поле обязательно для заполнения')]
+                    }));
+                    return false;
+                }
+                return data;
+            }, onSubmit: function (fields) {
+                callOnEventSubmit(fields);
+                onCloseModal();
+            }, initialValues: eventInitialValues !== null && eventInitialValues !== void 0 ? eventInitialValues : null, submitLabel: props.isCreate ? __('Создать') : __('Сохранить'), useRedux: true },
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Наименование'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.InputField, { attribute: 'title', required: true, className: bem.element('name-field') }),
+                react_1["default"].createElement(form_1.DropDownField, { attribute: 'eventGroupId', items: props.eventGroups, outline: true, placeholder: '\u0413\u0440\u0443\u043F\u043F\u0430', color: "primary", itemsContent: {
+                        type: 'checkbox'
+                    } })),
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Время и дата'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.DateTimeField, { attribute: 'date', required: true })),
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Описание'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.TextField, { attribute: 'description', required: true })))));
+}
+exports["default"] = CalendarSystemModalView;

package/content/CalendarSystem/CalendarSystemModalView.scss

@@ -0,0 +1,84 @@
+@use "style/variables";
+
+.CalendarSystemModalView {
+    $root: &;
+    width: 941px;
+
+    .FieldLayoutView {
+        margin-bottom: 0;
+    }
+
+    .ModalView__header {
+        .ModalView__title {
+            font-size: variables.$font-size-lg;
+            font-weight: variables.$font-weight-lg;
+            line-height: variables.$line-height-lg;
+        }
+    }
+
+    .ModalView__content {
+        padding: 0;
+    }
+
+    &__default-form {
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 16px;
+
+        > div {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: flex-start;
+
+            gap: 12px;
+
+            &:nth-child(3) {
+                > .FieldLayoutView {
+                    width: calc(84%);
+
+                    .TextFieldView textarea {
+                        height: 160px;
+                    }
+                }
+            }
+        }
+
+        #{$root}__label {
+            align-self: flex-start;
+            margin-bottom: 0;
+            margin-right: 16px;
+            width: 140px;
+            height: 46px;
+        }
+
+        #{$root}__name-field {
+            width: 585px;
+        }
+
+        .ButtonView {
+            width: 120px;
+            padding: 11px 12px;
+        }
+
+        .InputFieldView {
+            max-width: 420px;
+        }
+
+        .DropDownFieldView_outline_primary {
+            width: 300px;
+            border-color: variables.$element-border-color;
+            background-color: variables.$element-field-background-color;
+
+            &:hover {
+                border-color: variables.$element-border-color;
+            }
+
+            .CheckboxFieldView__label-text {
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+            }
+        }
+    }
+}

package/content/CalendarSystem/CalendarSystemView.d.ts

@@ -0,0 +1,2 @@
+import { ICalendarSystemViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+export default function CalendarSystemView(props: ICalendarSystemViewProps): JSX.Element;

package/content/CalendarSystem/CalendarSystemView.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
+var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
+var AsideHeader_1 = __importDefault(require("./AsideHeader"));
+var AsideCalendars_1 = __importDefault(require("./AsideCalendars"));
+var ContentHeader_1 = __importDefault(require("./ContentHeader"));
+var MonthGrid_1 = __importDefault(require("./MonthGrid"));
+var WeekGrid_1 = __importDefault(require("./WeekGrid"));
+function CalendarSystemView(props) {
+    var bem = (0, useBem_1["default"])('CalendarSystemView');
+    var calendarTypeGrids = react_1["default"].useMemo(function () {
+        var _a;
+        return (_a = {},
+            _a[CalendarType_1["default"].MONTH] = react_1["default"].createElement(MonthGrid_1["default"], __assign({}, props.monthGridProps)),
+            _a[CalendarType_1["default"].WEEK] = react_1["default"].createElement(WeekGrid_1["default"], __assign({}, props.weekGridProps)),
+            _a);
+    }, [props.monthGridProps, props.weekGridProps]);
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
+        react_1["default"].createElement("aside", { className: bem.element('aside') },
+            react_1["default"].createElement(AsideHeader_1["default"], { onClick: props.openCreateModal, className: bem.element('aside-header') }),
+            react_1["default"].createElement(Calendar_1["default"], { showFooter: false, onMonthChange: props.onInnerCalendarChangeMonth }),
+            react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, onChangeEventGroupsIds: props.onChangeEventGroupsIds, openCreateEventGroupModal: props.openCreateEventGroupModal })),
+        react_1["default"].createElement("div", { className: bem.element('content') },
+            react_1["default"].createElement(ContentHeader_1["default"], { dateToDisplay: props.dateToDisplay, onChangeCalendarType: props.handleCalendarTypeChange, handleControlClick: props.handleControlClick }),
+            calendarTypeGrids[props.calendarType])));
+}
+exports["default"] = CalendarSystemView;