@mailstep/design-system 0.4.21 → 0.5.0-beta.10

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -0,0 +1,57 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import styled, { x } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform: rotate(90deg);\n  font-size: 24px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"], ["\n  transform: rotate(90deg);\n  font-size: 24px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"])), th('colors.lightGray4'), th('colors.lightGray4'), th('colors.red2'));
+var TimeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"], ["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"])), th('colors.lightGray2'));
+var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 22px;\n  font-weight: 700;\n  width: 24px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-size: 22px;\n  font-weight: 700;\n  width: 24px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
+var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 16px;\n  width: 20px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-weight: 700;\n  font-size: 16px;\n  width: 20px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
+export var Timepicker = function (_a) {
+    var _b, _c;
+    var setTime = _a.setTime, value = _a.value, disabled = _a.disabled;
+    var initialHours = (_b = value === null || value === void 0 ? void 0 : value.getHours()) !== null && _b !== void 0 ? _b : 0;
+    var initialMinutes = (_c = value === null || value === void 0 ? void 0 : value.getMinutes()) !== null && _c !== void 0 ? _c : 0;
+    var regExp = '^[0-9]*$';
+    var _d = useState(initialHours), hours = _d[0], setHours = _d[1];
+    var _e = useState(initialMinutes), minutes = _e[0], setMinutes = _e[1];
+    var increaseHour = useCallback(function () {
+        hours === 23 ? setHours(0) : setHours(hours + 1);
+    }, [hours]);
+    var decreaseHour = useCallback(function () {
+        hours === 0 ? setHours(23) : setHours(hours - 1);
+    }, [hours]);
+    var increaseMinutes = useCallback(function () {
+        minutes >= 55 ? setMinutes(minutes - 55) : setMinutes(minutes + 5);
+    }, [minutes]);
+    var decreaseMinutes = useCallback(function () {
+        minutes <= 5 ? setMinutes(minutes + 55) : setMinutes(minutes - 5);
+    }, [minutes]);
+    var onHoursChange = useCallback(function (e) {
+        if (e.target.value.match(regExp) && Number(e.target.value) <= 23) {
+            setHours(Number(e.target.value));
+        }
+        else {
+            setHours(0);
+        }
+    }, []);
+    var onMinutesChange = useCallback(function (e) {
+        if (e.target.value.match(regExp) && Number(e.target.value) <= 59) {
+            setMinutes(Number(e.target.value));
+        }
+        else {
+            setMinutes(0);
+        }
+    }, []);
+    useEffect(function () {
+        !!value && setTime('hours', hours);
+    }, [hours]);
+    useEffect(function () {
+        !!value && setTime('minutes', minutes);
+    }, [minutes]);
+    return (_jsx("td", { colSpan: 7, children: _jsx(x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "1rem", w: "fit-content", children: _jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseHour, children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseHour, children: "\u203A" })] }), _jsxs(TimeWrapper, { children: [_jsx(Hours, { value: hours < 10 ? "0".concat(hours) : hours, disabled: disabled, onChange: onHoursChange }), _jsx(x.div, { mx: "7px", color: "lightGray4", children: "|" }), _jsx(Minutes, { value: minutes < 10 ? "0".concat(minutes) : minutes, disabled: disabled, onChange: onMinutesChange })] }), _jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseMinutes, children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseMinutes, children: "\u203A" })] })] }) }) }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/DatePicker/Datetime/components/ViewNavigation.d.ts

@@ -0,0 +1,9 @@
+export default function ViewNavigation({ onClickPrev, onClickSwitch, onClickNext, switchContent, switchColSpan, switchProps, label, }: {
+    onClickPrev: any;
+    onClickSwitch: any;
+    onClickNext: any;
+    switchContent: any;
+    switchColSpan: any;
+    switchProps: any;
+    label: any;
+}): import("react/jsx-runtime").JSX.Element;

package/ui/Elements/DatePicker/Datetime/components/ViewNavigation.js

@@ -0,0 +1,16 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ViewNavigation(_a) {
+    var onClickPrev = _a.onClickPrev, onClickSwitch = _a.onClickSwitch, onClickNext = _a.onClickNext, switchContent = _a.switchContent, switchColSpan = _a.switchColSpan, switchProps = _a.switchProps, label = _a.label;
+    return (_jsxs("tr", { children: [_jsx("th", { className: "rdtPrev", onClick: onClickPrev, children: _jsx("span", { children: "\u2039" }) }), _jsx("th", __assign({ className: "rdtSwitch", colSpan: switchColSpan, onClick: onClickSwitch }, switchProps, { children: switchContent })), _jsx("th", { className: "rdtNext", onClick: onClickNext, children: _jsx("span", { children: "\u203A" }) }), _jsx("th", { colSpan: 2, className: "rdtLabel", children: label && label })] }));
+}

package/ui/Elements/DatePicker/Datetime/types.d.ts

@@ -0,0 +1,61 @@
+import { FocusEvent, FocusEventHandler } from 'react';
+import { Moment } from 'moment';
+export type ViewMode = 'years' | 'months' | 'days' | 'time';
+export interface TimeConstraint {
+    min: number;
+    max: number;
+    step: number;
+}
+export interface TimeConstraints {
+    hours?: TimeConstraint;
+    minutes?: TimeConstraint;
+    seconds?: TimeConstraint;
+    milliseconds?: TimeConstraint;
+}
+type EventOrValueHandler<Event> = (event: Event | Moment | string) => void;
+export interface DatetimepickerProps {
+    value?: Date | string | Moment;
+    initialValue?: Date | string | Moment;
+    initialViewDate?: Date | string | Moment;
+    initialViewMode?: ViewMode;
+    updateOnView?: string;
+    dateFormat?: boolean | string;
+    timeFormat?: boolean | string;
+    input?: boolean;
+    open?: boolean;
+    locale?: string;
+    utc?: boolean;
+    displayTimeZone?: string;
+    onChange?: (value: Moment | string) => void;
+    onOpen?: FocusEventHandler<any>;
+    onClose?: EventOrValueHandler<FocusEvent<any>>;
+    onNavigate?: (viewMode: string) => void;
+    onBeforeNavigate?: (nextView: string, currentView: string, viewDate: Moment) => string;
+    onNavigateBack?: (amount: number, type: string) => void;
+    onNavigateForward?: (amount: number, type: string) => void;
+    className?: string;
+    inputProps?: React.HTMLProps<HTMLInputElement>;
+    isValidDate?: (currentDate: any, selectedDate: any) => boolean;
+    renderView?: (viewMode: string, renderCalendar: Function) => JSX.Element;
+    renderDay?: (props: any, currentDate: any, selectedDate: any) => JSX.Element;
+    renderMonth?: (props: any, month: number, year: number, selectedDate: any) => JSX.Element;
+    renderYear?: (props: any, year: number, selectedDate: any) => JSX.Element;
+    renderInput?: (props: any, openCalendar: Function, closeCalendar: Function) => JSX.Element;
+    strictParsing?: boolean;
+    closeOnSelect?: boolean;
+    timeConstraints?: TimeConstraints;
+    closeOnClickOutside?: boolean;
+    secondValue?: Date | null;
+    label?: string;
+}
+export interface DatetimepickerState {
+    updateOn: string;
+    inputFormat: string;
+    viewDate: Moment;
+    selectedDate: Moment;
+    inputValue: string;
+    open: boolean;
+    secondValue?: Date | null;
+    label?: string;
+}
+export {};

package/ui/Elements/DatePicker/Datetime/types.js

@@ -0,0 +1,7 @@
+// Type definitions for react-datetime
+// Project: https://github.com/arqex/react-datetime
+// Definitions by: Ivan Verevkin <vereva@x-root.org>
+//     Updates by: Aaron Spaulding <aaron@sachimp.com>,
+//                 Karol Janyst <http://github.com/LKay>,
+//                 Javier Marquez <javi@arqex.com>
+export {};

package/ui/Elements/DatePicker/Datetime/views/DaysView.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export default class DaysView extends React.Component {
+    static defaultProps: {
+        isValidDate: () => boolean;
+        renderDay: (props: any, date: any) => import("react/jsx-runtime").JSX.Element;
+    };
+    render(): import("react/jsx-runtime").JSX.Element;
+    renderNavigation(): import("react/jsx-runtime").JSX.Element;
+    renderDayHeaders(): import("react/jsx-runtime").JSX.Element;
+    renderDays(): import("react/jsx-runtime").JSX.Element[];
+    renderDay(date: any, startOfMonth: any, endOfMonth: any): any;
+    renderFooter(): import("react/jsx-runtime").JSX.Element | undefined;
+    _setDate: (e: any) => void;
+}

package/ui/Elements/DatePicker/Datetime/views/DaysView.js

@@ -0,0 +1,145 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import React from 'react';
+import { Timepicker } from '../components/Timepicker';
+import ViewNavigation from '../components/ViewNavigation';
+var DaysView = /** @class */ (function (_super) {
+    __extends(DaysView, _super);
+    function DaysView() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._setDate = function (e) {
+            _this.props.updateDate(e);
+        };
+        return _this;
+    }
+    DaysView.prototype.render = function () {
+        return (_jsx("div", { className: "rdtDays", children: _jsxs("table", { children: [_jsxs("thead", { children: [this.renderNavigation(), this.renderDayHeaders()] }), _jsx("tbody", { children: this.renderDays() }), this.renderFooter()] }) }));
+    };
+    DaysView.prototype.renderNavigation = function () {
+        var _this = this;
+        var date = this.props.viewDate;
+        var locale = date.localeData();
+        var label = this.props.label;
+        return (_jsx(ViewNavigation, { onClickPrev: function () { return _this.props.navigate(-1, 'months'); }, onClickSwitch: function () { return _this.props.showView('months'); }, onClickNext: function () { return _this.props.navigate(1, 'months'); }, switchContent: locale.months(date, 'DD[]MMMM') + ' ' + date.year(), switchColSpan: 3, label: label, switchProps: { 'data-value': this.props.viewDate.month() } }));
+    };
+    DaysView.prototype.renderDayHeaders = function () {
+        var locale = this.props.viewDate.localeData();
+        var dayItems = getDaysOfWeek(locale).map(function (day, index) { return (_jsx("th", { className: "dow", children: day }, day + index)); });
+        return _jsx("tr", { children: dayItems });
+    };
+    DaysView.prototype.renderDays = function () {
+        var date = this.props.viewDate;
+        var startOfMonth = date.clone().startOf('month');
+        var endOfMonth = date.clone().endOf('month');
+        // We need 42 days in 6 rows
+        // starting in the last week of the previous month
+        var rows = [[], [], [], [], [], []];
+        var startDate = date.clone().subtract(1, 'months');
+        startDate.date(startDate.daysInMonth()).startOf('week');
+        var endDate = startDate.clone().add(42, 'd');
+        var i = 0;
+        while (startDate.isBefore(endDate)) {
+            var row = getRow(rows, i++);
+            row.push(this.renderDay(startDate, startOfMonth, endOfMonth));
+            startDate.add(1, 'd');
+        }
+        return rows.map(function (r, i) { return _jsx("tr", { children: r }, "".concat(endDate.month(), "_").concat(i)); });
+    };
+    DaysView.prototype.renderDay = function (date, startOfMonth, endOfMonth) {
+        var selectedDate = this.props.selectedDate;
+        var secondValue = this.props.secondValue;
+        var dayProps = {
+            key: date.format('M_D'),
+            'data-value': date.date(),
+            'data-month': date.month(),
+            'data-year': date.year(),
+        };
+        var className = 'rdtDay';
+        if (date.isBefore(startOfMonth)) {
+            className += ' rdtOld';
+        }
+        else if (date.isAfter(endOfMonth)) {
+            className += ' rdtNew';
+        }
+        if (secondValue && date.isBefore(secondValue) && date.isAfter(selectedDate)) {
+            className += ' rdtActiveRange';
+        }
+        if (secondValue && date.isAfter(secondValue) && date.isBefore(selectedDate)) {
+            className += ' rdtActiveRange';
+        }
+        if (selectedDate && date.isSame(selectedDate, 'day')) {
+            className += ' rdtActive';
+        }
+        if (secondValue && date.isSame(secondValue, 'day')) {
+            className += ' rdtActiveSecond';
+        }
+        if (date.isSame(this.props.moment(), 'day')) {
+            className += ' rdtToday';
+        }
+        if (this.props.isValidDate(date)) {
+            dayProps.onClick = this._setDate;
+        }
+        else {
+            className += ' rdtDisabled';
+        }
+        dayProps.className = className;
+        return this.props.renderDay(dayProps, date.clone(), selectedDate && selectedDate.clone());
+    };
+    DaysView.prototype.renderFooter = function () {
+        if (!this.props.timeFormat)
+            return;
+        var setTime = this.props.setTime;
+        var value = this.props.value;
+        var disabled = this.props.disabled;
+        return (_jsx("tfoot", { children: _jsx("tr", { children: _jsx(Timepicker, { setTime: setTime, value: value, disabled: disabled }) }) }));
+    };
+    DaysView.defaultProps = {
+        isValidDate: function () { return true; },
+        renderDay: function (props, date) { return _jsx("td", __assign({}, props, { children: date.date() })); },
+    };
+    return DaysView;
+}(React.Component));
+export default DaysView;
+function getRow(rows, day) {
+    return rows[Math.floor(day / 7)];
+}
+/**
+ * Get a list of the days of the week
+ * depending on the current locale
+ * @return {array} A list with the shortname of the days
+ */
+function getDaysOfWeek(locale) {
+    var first = locale.firstDayOfWeek();
+    var dow = [];
+    var i = 0;
+    locale._weekdaysMin.forEach(function (day) {
+        dow[(7 + i++ - first) % 7] = day;
+    });
+    return dow;
+}

package/ui/Elements/DatePicker/Datetime/views/MonthsView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export default class MonthsView extends React.Component {
+    render(): import("react/jsx-runtime").JSX.Element;
+    renderNavigation(): import("react/jsx-runtime").JSX.Element;
+    renderMonths(): import("react/jsx-runtime").JSX.Element[];
+    renderMonth(month: any): any;
+    isDisabledMonth(month: any): boolean;
+    getMonthText(month: any): any;
+    _updateSelectedMonth: (event: any) => void;
+}

package/ui/Elements/DatePicker/Datetime/views/MonthsView.js

@@ -0,0 +1,111 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import React from 'react';
+import ViewNavigation from '../components/ViewNavigation';
+var MonthsView = /** @class */ (function (_super) {
+    __extends(MonthsView, _super);
+    function MonthsView() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._updateSelectedMonth = function (event) {
+            _this.props.updateDate(event);
+        };
+        return _this;
+    }
+    MonthsView.prototype.render = function () {
+        return (_jsxs("div", { className: "rdtMonths", children: [_jsx("table", { children: _jsx("thead", { children: this.renderNavigation() }) }), _jsx("table", { children: _jsx("tbody", { children: this.renderMonths() }) })] }));
+    };
+    MonthsView.prototype.renderNavigation = function () {
+        var _this = this;
+        var year = this.props.viewDate.year();
+        return (_jsx(ViewNavigation, { onClickPrev: function () { return _this.props.navigate(-1, 'years'); }, onClickSwitch: function () { return _this.props.showView('years'); }, onClickNext: function () { return _this.props.navigate(1, 'years'); }, switchContent: year, switchColSpan: "2" }));
+    };
+    MonthsView.prototype.renderMonths = function () {
+        // 12 months in 3 rows for every view
+        var rows = [[], [], []];
+        for (var month = 0; month < 12; month++) {
+            var row = getRow(rows, month);
+            row.push(this.renderMonth(month));
+        }
+        return rows.map(function (months, i) { return _jsx("tr", { children: months }, i); });
+    };
+    MonthsView.prototype.renderMonth = function (month) {
+        var selectedDate = this.props.selectedDate;
+        var className = 'rdtMonth';
+        var onClick;
+        if (this.isDisabledMonth(month)) {
+            className += ' rdtDisabled';
+        }
+        else {
+            onClick = this._updateSelectedMonth;
+        }
+        if (selectedDate && selectedDate.year() === this.props.viewDate.year() && selectedDate.month() === month) {
+            className += ' rdtActive';
+        }
+        var props = { key: month, className: className, 'data-value': month, onClick: onClick };
+        if (this.props.renderMonth) {
+            return this.props.renderMonth(props, month, this.props.viewDate.year(), this.props.selectedDate && this.props.selectedDate.clone());
+        }
+        return _jsx("td", __assign({}, props, { children: this.getMonthText(month) }));
+    };
+    MonthsView.prototype.isDisabledMonth = function (month) {
+        var isValidDate = this.props.isValidDate;
+        if (!isValidDate) {
+            // If no validator is set, all days are valid
+            return false;
+        }
+        // If one day in the month is valid, the year should be clickable
+        var date = this.props.viewDate.clone().set({ month: month });
+        var day = date.endOf('month').date() + 1;
+        while (day-- > 1) {
+            if (isValidDate(date.date(day))) {
+                return false;
+            }
+        }
+        return true;
+    };
+    MonthsView.prototype.getMonthText = function (month) {
+        var localMoment = this.props.viewDate;
+        var monthStr = localMoment.localeData().monthsShort(localMoment.month(month));
+        return capitalize(monthStr.substring(0, 3));
+    };
+    return MonthsView;
+}(React.Component));
+export default MonthsView;
+function getRow(rows, year) {
+    if (year < 4) {
+        return rows[0];
+    }
+    if (year < 8) {
+        return rows[1];
+    }
+    return rows[2];
+}
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/ui/Elements/DatePicker/Datetime/views/YearsView.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export default class YearsView extends React.Component {
+    static defaultProps: {
+        renderYear: (props: any, year: any) => import("react/jsx-runtime").JSX.Element;
+    };
+    render(): import("react/jsx-runtime").JSX.Element;
+    renderNavigation(): import("react/jsx-runtime").JSX.Element;
+    renderYears(): import("react/jsx-runtime").JSX.Element[];
+    renderYear(year: any): any;
+    getViewYear(): number;
+    getSelectedYear(): any;
+    disabledYearsCache: {};
+    isDisabledYear(year: any): any;
+    _updateSelectedYear: (event: any) => void;
+}

package/ui/Elements/DatePicker/Datetime/views/YearsView.js

@@ -0,0 +1,117 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import React from 'react';
+import ViewNavigation from '../components/ViewNavigation';
+var YearsView = /** @class */ (function (_super) {
+    __extends(YearsView, _super);
+    function YearsView() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.disabledYearsCache = {};
+        _this._updateSelectedYear = function (event) {
+            _this.props.updateDate(event);
+        };
+        return _this;
+    }
+    YearsView.prototype.render = function () {
+        return (_jsxs("div", { className: "rdtYears", children: [_jsx("table", { children: _jsx("thead", { children: this.renderNavigation() }) }), _jsx("table", { children: _jsx("tbody", { children: this.renderYears() }) })] }));
+    };
+    YearsView.prototype.renderNavigation = function () {
+        var _this = this;
+        var viewYear = this.getViewYear();
+        return (_jsx(ViewNavigation, { onClickPrev: function () { return _this.props.navigate(-10, 'years'); }, onClickSwitch: function () { return _this.props.showView('years'); }, onClickNext: function () { return _this.props.navigate(10, 'years'); }, switchContent: "".concat(viewYear, "-").concat(viewYear + 9) }));
+    };
+    YearsView.prototype.renderYears = function () {
+        var viewYear = this.getViewYear();
+        // 12 years in 3 rows for every view
+        var rows = [[], [], []];
+        for (var year = viewYear - 1; year < viewYear + 11; year++) {
+            var row = getRow(rows, year - viewYear);
+            row.push(this.renderYear(year));
+        }
+        return rows.map(function (years, i) { return _jsx("tr", { children: years }, i); });
+    };
+    YearsView.prototype.renderYear = function (year) {
+        var selectedYear = this.getSelectedYear();
+        var className = 'rdtYear';
+        var onClick;
+        if (this.isDisabledYear(year)) {
+            className += ' rdtDisabled';
+        }
+        else {
+            onClick = this._updateSelectedYear;
+        }
+        if (selectedYear === year) {
+            className += ' rdtActive';
+        }
+        var props = { key: year, className: className, 'data-value': year, onClick: onClick };
+        return this.props.renderYear(props, year, this.props.selectedDate && this.props.selectedDate.clone());
+    };
+    YearsView.prototype.getViewYear = function () {
+        return parseInt(this.props.viewDate.year() / 10, 10) * 10;
+    };
+    YearsView.prototype.getSelectedYear = function () {
+        return this.props.selectedDate && this.props.selectedDate.year();
+    };
+    YearsView.prototype.isDisabledYear = function (year) {
+        var cache = this.disabledYearsCache;
+        if (cache[year] !== undefined) {
+            return cache[year];
+        }
+        var isValidDate = this.props.isValidDate;
+        if (!isValidDate) {
+            // If no validator is set, all days are valid
+            return false;
+        }
+        // If one day in the year is valid, the year should be clickable
+        var date = this.props.viewDate.clone().set({ year: year });
+        var day = date.endOf('year').dayOfYear() + 1;
+        while (day-- > 1) {
+            if (isValidDate(date.dayOfYear(day))) {
+                cache[year] = false;
+                return false;
+            }
+        }
+        cache[year] = true;
+        return true;
+    };
+    YearsView.defaultProps = {
+        renderYear: function (props, year) { return _jsx("td", __assign({}, props, { children: year })); },
+    };
+    return YearsView;
+}(React.Component));
+export default YearsView;
+function getRow(rows, year) {
+    if (year < 3) {
+        return rows[0];
+    }
+    if (year < 7) {
+        return rows[1];
+    }
+    return rows[2];
+}

package/ui/Elements/DatePicker/index.d.ts

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

package/ui/Elements/DatePicker/index.js

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

package/ui/Elements/DatePicker/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DatePickerBase: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;

package/ui/Elements/DatePicker/styles.js

@@ -0,0 +1,8 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { x } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+export var DatePickerBase = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .rdt {\n    position: relative;\n  }\n  .rdtPicker {\n    display: none;\n    position: absolute;\n    z-index: 1;\n    min-width: 250px;\n    color: ", ";\n    background: ", ";\n    border: 1px solid rgba(0, 0, 0, 0.15);\n    border-radius: 10px;\n    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n    padding: 0.5rem 1.2rem;\n    margin: 0.125rem 0rem;\n  }\n  .rdtOpen .rdtPicker {\n    display: block;\n  }\n  .rdtStatic .rdtPicker {\n    position: static;\n  }\n\n  .rdtPicker .rdtTimeToggle {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n    text-align: center;\n    font-size: 1.25rem;\n  }\n  .rdtPicker table {\n    width: 100%;\n    margin: 0;\n    border-collapse: collapse;\n  }\n  .rdtPicker td,\n  .rdtPicker th {\n    text-align: center;\n    height: 30px;\n  }\n  .rdtPicker td {\n    padding: 0 0.8rem;\n  }\n  .rdtPicker .rdtCounter .rdtBtn:hover,\n  .rdtPicker .rdtYear:hover,\n  .rdtPicker .rdtMonth:hover,\n  .rdtPicker .rdtDay:hover,\n  .rdtPicker .rdtHour:hover,\n  .rdtPicker .rdtMinute:hover,\n  .rdtPicker .rdtSecond:hover,\n  .rdtPicker .rdtTimeToggle:hover,\n  .rdtPicker .rdtSwitch:hover {\n    background: #f8f9fa;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtOld,\n  .rdtPicker .rdtNew {\n    color: rgba(33, 37, 41, 0.3);\n  }\n  .rdtPicker .rdtToday {\n    position: relative;\n  }\n  .rdtPicker .rdtToday:before {\n    content: '';\n    display: inline-block;\n    border-left: 7px solid transparent;\n    border-bottom: 7px solid ", ";\n    position: absolute;\n    bottom: 4px;\n    right: 4px;\n  }\n  .rdtPicker th {\n    border-bottom: 1px solid #e9ecef;\n  }\n  .rdtPicker .dow {\n    width: 14.2857%;\n    border-bottom: none;\n    cursor: default;\n    font-weight: 600;\n  }\n  .rdtPicker .rdtPrev,\n  .rdtPicker .rdtSwitch,\n  .rdtPicker .rdtNext {\n    font-weight: 600;\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n  .rdtPicker .rdtNext,\n  .rdtPicker .rdtPrev {\n    width: 36px;\n    font-size: 1.4rem;\n    vertical-align: top;\n    color: ", ";\n  }\n  .rdtPicker .rdtCounter .rdtBtn {\n    font-size: 1rem;\n    display: block;\n    user-select: none;\n  }\n  .rdtPicker th.rdtDisabled,\n  .rdtPicker th.rdtDisabled:hover {\n    background: none;\n    color: #6c757d;\n    cursor: not-allowed;\n  }\n  .rdtPicker thead tr:first-child th {\n    cursor: pointer;\n  }\n  .rdtPicker thead:first-child {\n    line-height: 20px;\n  }\n  .rdtPicker thead tr:first-child th:hover {\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtTimeToggle {\n    border-top: 1px solid #e9ecef;\n  }\n  .rdtPicker button {\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n  .rdtPicker button:hover {\n    background-color: #f8f9fa;\n  }\n  .rdtPicker thead button {\n    width: 100%;\n    height: 100%;\n  }\n  .rdtPicker .rdtDays {\n    min-width: 250px;\n  }\n  .rdtPicker .rdtMonth,\n  .rdtPicker .rdtYear {\n    height: 50px;\n    width: 25%;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtMonth:hover,\n  .rdtPicker .rdtYear:hover {\n    color: #16181b;\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtActiveSecond {\n    background: ", " !important;\n    color: ", " !important;\n    border-radius: 0.5rem;\n    font-weight: 600;\n    text-decoration: none !important;\n  }\n  .rdtPicker .rdtLabel {\n    cursor: default !important;\n    background: transparent !important;\n    font-weight: 600;\n    text-align: right;\n  }\n\n  .rdtPicker .rdtActive {\n    background-color: ", " !important;\n    color: ", ";\n    border-radius: 0.5rem;\n    font-weight: 600;\n  }\n  .rdtPicker .rdtActive:hover {\n    background-color: ", ";\n    color: ", ";\n    font-weight: 600;\n  }\n  .rdtPicker .rdtActive .rdtToday:before {\n    border-bottom-color: ", ";\n  }\n  .rdtPicker .rdtDisabled,\n  .rdtPicker .rdtDisabled:hover {\n    background: none;\n    color: #6c757d;\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n  .rdtPicker .rdtDays {\n    display: inline-block;\n  }\n  .rdtPicker .rdtCounters {\n    display: inline-block;\n  }\n  .rdtPicker .rdtCounters > div {\n    float: left;\n  }\n\n  .rdtPicker .rdtActiveRange {\n    background: ", ";\n  }\n\n  .rdtPicker .rdtCounters > div :first-child {\n    visibility: hidden;\n    transform: rotate(-90deg);\n  }\n  .rdtPicker .rdtCounters > div :last-child {\n    visibility: hidden;\n    transform: rotate(90deg);\n  }\n  .rdtPicker .rdtCounters > div > span:before {\n    left: 5px;\n    visibility: visible;\n    position: relative;\n    content: '\u203A';\n    font-size: 2rem;\n    font-weight: 900;\n    color: ", ";\n    padding: 0 10px;\n  }\n  .rdtPicker .rdtCounter {\n    width: 40px;\n  }\n  .rdtPicker .rdtCounter .rdtBtn {\n    line-height: 40px;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtCounter .rdtBtn:hover {\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtCounter .rdtCount {\n    line-height: 20px;\n    font-size: 1.25rem;\n  }\n  .rdtPicker .rdtCounterSeparator {\n    line-height: 100px;\n  }\n"], ["\n  .rdt {\n    position: relative;\n  }\n  .rdtPicker {\n    display: none;\n    position: absolute;\n    z-index: 1;\n    min-width: 250px;\n    color: ", ";\n    background: ", ";\n    border: 1px solid rgba(0, 0, 0, 0.15);\n    border-radius: 10px;\n    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n    padding: 0.5rem 1.2rem;\n    margin: 0.125rem 0rem;\n  }\n  .rdtOpen .rdtPicker {\n    display: block;\n  }\n  .rdtStatic .rdtPicker {\n    position: static;\n  }\n\n  .rdtPicker .rdtTimeToggle {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n    text-align: center;\n    font-size: 1.25rem;\n  }\n  .rdtPicker table {\n    width: 100%;\n    margin: 0;\n    border-collapse: collapse;\n  }\n  .rdtPicker td,\n  .rdtPicker th {\n    text-align: center;\n    height: 30px;\n  }\n  .rdtPicker td {\n    padding: 0 0.8rem;\n  }\n  .rdtPicker .rdtCounter .rdtBtn:hover,\n  .rdtPicker .rdtYear:hover,\n  .rdtPicker .rdtMonth:hover,\n  .rdtPicker .rdtDay:hover,\n  .rdtPicker .rdtHour:hover,\n  .rdtPicker .rdtMinute:hover,\n  .rdtPicker .rdtSecond:hover,\n  .rdtPicker .rdtTimeToggle:hover,\n  .rdtPicker .rdtSwitch:hover {\n    background: #f8f9fa;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtOld,\n  .rdtPicker .rdtNew {\n    color: rgba(33, 37, 41, 0.3);\n  }\n  .rdtPicker .rdtToday {\n    position: relative;\n  }\n  .rdtPicker .rdtToday:before {\n    content: '';\n    display: inline-block;\n    border-left: 7px solid transparent;\n    border-bottom: 7px solid ", ";\n    position: absolute;\n    bottom: 4px;\n    right: 4px;\n  }\n  .rdtPicker th {\n    border-bottom: 1px solid #e9ecef;\n  }\n  .rdtPicker .dow {\n    width: 14.2857%;\n    border-bottom: none;\n    cursor: default;\n    font-weight: 600;\n  }\n  .rdtPicker .rdtPrev,\n  .rdtPicker .rdtSwitch,\n  .rdtPicker .rdtNext {\n    font-weight: 600;\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n  .rdtPicker .rdtNext,\n  .rdtPicker .rdtPrev {\n    width: 36px;\n    font-size: 1.4rem;\n    vertical-align: top;\n    color: ", ";\n  }\n  .rdtPicker .rdtCounter .rdtBtn {\n    font-size: 1rem;\n    display: block;\n    user-select: none;\n  }\n  .rdtPicker th.rdtDisabled,\n  .rdtPicker th.rdtDisabled:hover {\n    background: none;\n    color: #6c757d;\n    cursor: not-allowed;\n  }\n  .rdtPicker thead tr:first-child th {\n    cursor: pointer;\n  }\n  .rdtPicker thead:first-child {\n    line-height: 20px;\n  }\n  .rdtPicker thead tr:first-child th:hover {\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtTimeToggle {\n    border-top: 1px solid #e9ecef;\n  }\n  .rdtPicker button {\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n  .rdtPicker button:hover {\n    background-color: #f8f9fa;\n  }\n  .rdtPicker thead button {\n    width: 100%;\n    height: 100%;\n  }\n  .rdtPicker .rdtDays {\n    min-width: 250px;\n  }\n  .rdtPicker .rdtMonth,\n  .rdtPicker .rdtYear {\n    height: 50px;\n    width: 25%;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtMonth:hover,\n  .rdtPicker .rdtYear:hover {\n    color: #16181b;\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtActiveSecond {\n    background: ", " !important;\n    color: ", " !important;\n    border-radius: 0.5rem;\n    font-weight: 600;\n    text-decoration: none !important;\n  }\n  .rdtPicker .rdtLabel {\n    cursor: default !important;\n    background: transparent !important;\n    font-weight: 600;\n    text-align: right;\n  }\n\n  .rdtPicker .rdtActive {\n    background-color: ", " !important;\n    color: ", ";\n    border-radius: 0.5rem;\n    font-weight: 600;\n  }\n  .rdtPicker .rdtActive:hover {\n    background-color: ", ";\n    color: ", ";\n    font-weight: 600;\n  }\n  .rdtPicker .rdtActive .rdtToday:before {\n    border-bottom-color: ", ";\n  }\n  .rdtPicker .rdtDisabled,\n  .rdtPicker .rdtDisabled:hover {\n    background: none;\n    color: #6c757d;\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n  .rdtPicker .rdtDays {\n    display: inline-block;\n  }\n  .rdtPicker .rdtCounters {\n    display: inline-block;\n  }\n  .rdtPicker .rdtCounters > div {\n    float: left;\n  }\n\n  .rdtPicker .rdtActiveRange {\n    background: ", ";\n  }\n\n  .rdtPicker .rdtCounters > div :first-child {\n    visibility: hidden;\n    transform: rotate(-90deg);\n  }\n  .rdtPicker .rdtCounters > div :last-child {\n    visibility: hidden;\n    transform: rotate(90deg);\n  }\n  .rdtPicker .rdtCounters > div > span:before {\n    left: 5px;\n    visibility: visible;\n    position: relative;\n    content: '\u203A';\n    font-size: 2rem;\n    font-weight: 900;\n    color: ", ";\n    padding: 0 10px;\n  }\n  .rdtPicker .rdtCounter {\n    width: 40px;\n  }\n  .rdtPicker .rdtCounter .rdtBtn {\n    line-height: 40px;\n    cursor: pointer;\n  }\n  .rdtPicker .rdtCounter .rdtBtn:hover {\n    background: #f8f9fa;\n  }\n  .rdtPicker .rdtCounter .rdtCount {\n    line-height: 20px;\n    font-size: 1.25rem;\n  }\n  .rdtPicker .rdtCounterSeparator {\n    line-height: 100px;\n  }\n"])), th('colors.blue2'), th('colors.white'), th('colors.red2'), th('colors.red2'), th('colors.red1'), th('colors.white'), th('colors.red2'), th('colors.white'), th('colors.red2'), th('colors.white'), th('colors.white'), th('colors.lightGray2'), th('colors.red2'));
+var templateObject_1;

package/ui/Elements/DatePicker/utils/getLanguage.d.ts

@@ -0,0 +1 @@
+export declare const getLanguage: () => string;

package/ui/Elements/DatePicker/utils/getLanguage.js

@@ -0,0 +1,10 @@
+export var getLanguage = function () {
+    var _a;
+    if (typeof window === 'undefined')
+        return 'en';
+    var storedLang = localStorage.getItem('@@language');
+    if (storedLang)
+        return storedLang;
+    var isOnAdmin = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.pathname.includes('/admin');
+    return isOnAdmin ? 'en' : 'cs';
+};

package/ui/Elements/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,2 @@
+import { DropdownMenuProps, Item } from './types';
+export declare const DropdownMenu: <T extends Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: DropdownMenuProps<T>) => JSX.Element;