@mailstep/design-system 0.8.31-beta.4 → 0.8.31

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

@@ -1,151 +1,140 @@
-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 { DateRepeater } from "../components/DateRepeater.js";
+import { Timepicker } from "../components/Timepicker.js";
+import ViewNavigation from "../components/ViewNavigation.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/DatePicker/Datetime/views/DaysView.tsx
+var DaysView = class extends React.Component {
+	constructor(..._args) {
+		super(..._args);
+		this._setDate = (e) => {
+			this.props.updateDate(e);
+		};
+	}
+	static {
+		this.defaultProps = {
+			isValidDate: () => true,
+			renderDay: (props, date) => /* @__PURE__ */ jsx("td", {
+				...props,
+				children: date.date()
+			})
+		};
+	}
+	render() {
+		return /* @__PURE__ */ jsx("div", {
+			className: "rdtDays",
+			children: /* @__PURE__ */ jsxs("table", { children: [
+				/* @__PURE__ */ jsxs("thead", { children: [this.renderNavigation(), this.renderDayHeaders()] }),
+				/* @__PURE__ */ jsx("tbody", { children: this.renderDays() }),
+				this.renderFooter()
+			] })
+		});
+	}
+	renderNavigation() {
+		const date = this.props.viewDate;
+		const locale = date.localeData();
+		const label = this.props.label;
+		return /* @__PURE__ */ jsx(ViewNavigation, {
+			onClickPrev: () => this.props.navigate(-1, "months"),
+			onClickSwitch: () => this.props.showView("months"),
+			onClickNext: () => this.props.navigate(1, "months"),
+			switchContent: locale.months(date, "DD[]MMMM") + " " + date.year(),
+			switchColSpan: 3,
+			label,
+			switchProps: { "data-value": this.props.viewDate.month() }
+		});
+	}
+	renderDayHeaders() {
+		return /* @__PURE__ */ jsx("tr", { children: getDaysOfWeek(this.props.viewDate.localeData()).map((day, index) => /* @__PURE__ */ jsx("th", {
+			className: "dow",
+			children: day
+		}, day + index)) });
+	}
+	renderDays() {
+		const date = this.props.viewDate;
+		const startOfMonth = date.clone().startOf("month");
+		const endOfMonth = date.clone().endOf("month");
+		let rows = [
+			[],
+			[],
+			[],
+			[],
+			[],
+			[]
+		];
+		let startDate = date.clone().subtract(1, "months");
+		startDate.date(startDate.daysInMonth()).startOf("week");
+		let endDate = startDate.clone().add(42, "d");
+		let i = 0;
+		while (startDate.isBefore(endDate)) {
+			getRow(rows, i++).push(this.renderDay(startDate, startOfMonth, endOfMonth));
+			startDate.add(1, "d");
+		}
+		return rows.map((r, i) => /* @__PURE__ */ jsx("tr", { children: r }, `${endDate.month()}_${i}`));
+	}
+	renderDay(date, startOfMonth, endOfMonth) {
+		let selectedDate = this.props.selectedDate;
+		let secondValue = this.props.secondValue;
+		let dayProps = {
+			key: date.format("M_D"),
+			"data-value": date.date(),
+			"data-month": date.month(),
+			"data-year": date.year()
+		};
+		let 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) && !this.props.others?.dateTypeRepeater && !this.props.disabled) dayProps.onClick = this._setDate;
+		else className += " rdtDisabled";
+		if (this.props.others?.dateTypeRepeater || this.props.disabled) className += " rdtDisabled";
+		dayProps.className = className;
+		return this.props.renderDay(dayProps, date.clone(), selectedDate && selectedDate.clone());
+	}
+	renderFooter() {
+		const setTime = this.props.setTime;
+		const onChangeOthers = this.props.onChangeOthers;
+		const reset = this.props.reset;
+		const value = this.props.value;
+		const others = this.props.others;
+		const disabled = this.props.disabled;
+		return /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+			colSpan: 7,
+			children: [onChangeOthers && /* @__PURE__ */ jsx(DateRepeater, {
+				onChangeOthers,
+				others,
+				reset
+			}), this.props.timeFormat && /* @__PURE__ */ jsx(Timepicker, {
+				setTime,
+				value,
+				disabled: disabled || !value && !others?.dateTypeRepeater,
+				others,
+				onChangeOthers,
+				isSecondDatePicker: this.props.isSecondDatePicker
+			})]
+		}) }) });
+	}
 };
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-// @ts-nocheck
-import React from 'react';
-import { DateRepeater } from '../components/DateRepeater';
-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 _a, _b;
-        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) && !((_a = this.props.others) === null || _a === void 0 ? void 0 : _a.dateTypeRepeater) && !this.props.disabled) {
-            dayProps.onClick = this._setDate;
-        }
-        else {
-            className += ' rdtDisabled';
-        }
-        if (((_b = this.props.others) === null || _b === void 0 ? void 0 : _b.dateTypeRepeater) || this.props.disabled) {
-            className += ' rdtDisabled';
-        }
-        dayProps.className = className;
-        return this.props.renderDay(dayProps, date.clone(), selectedDate && selectedDate.clone());
-    };
-    DaysView.prototype.renderFooter = function () {
-        var setTime = this.props.setTime;
-        var onChangeOthers = this.props.onChangeOthers;
-        var reset = this.props.reset;
-        var value = this.props.value;
-        var others = this.props.others;
-        var disabled = this.props.disabled;
-        return (_jsx("tfoot", { children: _jsx("tr", { children: _jsxs("td", { colSpan: 7, children: [onChangeOthers && _jsx(DateRepeater, { onChangeOthers: onChangeOthers, others: others, reset: reset }), this.props.timeFormat && (_jsx(Timepicker, { setTime: setTime, value: value, disabled: disabled || (!value && !(others === null || others === void 0 ? void 0 : others.dateTypeRepeater)), others: others, onChangeOthers: onChangeOthers, isSecondDatePicker: this.props.isSecondDatePicker }))] }) }) }));
-    };
-    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)];
+	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
- */
+* 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;
+	const first = locale.firstDayOfWeek();
+	let dow = [];
+	let i = 0;
+	locale._weekdaysMin.forEach(function(day) {
+		dow[(7 + i++ - first) % 7] = day;
+	});
+	return dow;
 }
+//#endregion
+export { DaysView as default };

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

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+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;

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

@@ -1,111 +1,77 @@
-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 ViewNavigation from "../components/ViewNavigation.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/DatePicker/Datetime/views/MonthsView.tsx
+var MonthsView = class extends React.Component {
+	constructor(..._args) {
+		super(..._args);
+		this._updateSelectedMonth = (event) => {
+			this.props.updateDate(event);
+		};
+	}
+	render() {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "rdtMonths",
+			children: [/* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("thead", { children: this.renderNavigation() }) }), /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: this.renderMonths() }) })]
+		});
+	}
+	renderNavigation() {
+		return /* @__PURE__ */ jsx(ViewNavigation, {
+			onClickPrev: () => this.props.navigate(-1, "years"),
+			onClickSwitch: () => this.props.showView("years"),
+			onClickNext: () => this.props.navigate(1, "years"),
+			switchContent: this.props.viewDate.year(),
+			switchColSpan: "2"
+		});
+	}
+	renderMonths() {
+		let rows = [
+			[],
+			[],
+			[]
+		];
+		for (let month = 0; month < 12; month++) getRow(rows, month).push(this.renderMonth(month));
+		return rows.map((months, i) => /* @__PURE__ */ jsx("tr", { children: months }, i));
+	}
+	renderMonth(month) {
+		const selectedDate = this.props.selectedDate;
+		let className = "rdtMonth";
+		let onClick;
+		if (this.isDisabledMonth(month)) className += " rdtDisabled";
+		else onClick = this._updateSelectedMonth;
+		if (selectedDate && selectedDate.year() === this.props.viewDate.year() && selectedDate.month() === month) className += " rdtActive";
+		let props = {
+			key: month,
+			className,
+			"data-value": month,
+			onClick
+		};
+		if (this.props.renderMonth) return this.props.renderMonth(props, month, this.props.viewDate.year(), this.props.selectedDate && this.props.selectedDate.clone());
+		return /* @__PURE__ */ jsx("td", {
+			...props,
+			children: this.getMonthText(month)
+		});
+	}
+	isDisabledMonth(month) {
+		let isValidDate = this.props.isValidDate;
+		if (!isValidDate) return false;
+		let date = this.props.viewDate.clone().set({ month });
+		let day = date.endOf("month").date() + 1;
+		while (day-- > 1) if (isValidDate(date.date(day))) return false;
+		return true;
+	}
+	getMonthText(month) {
+		const localMoment = this.props.viewDate;
+		return capitalize(localMoment.localeData().monthsShort(localMoment.month(month)).substring(0, 3));
+	}
 };
-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];
+	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);
+	return str.charAt(0).toUpperCase() + str.slice(1);
 }
+//#endregion
+export { MonthsView as default };

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

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export default class YearsView extends React.Component {
     static defaultProps: {
         renderYear: (props: any, year: any) => import("react/jsx-runtime").JSX.Element;