@alixpartners/ui-components 1.20.63 → 1.20.64

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.20.64 (March 23, 2022)
+
+- Added `ApDatePicker` component
+
 ## 1.20.63 (February 7, 2022)
 
 - Updated `ApIcon` component, added `backup_restore` icon

package/dist/esm/components/ApDatePicker/ApDatePicker.js

@@ -0,0 +1,94 @@
+"use strict";
+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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var react_day_picker_1 = require("react-day-picker");
+require("react-day-picker/lib/style.css");
+var ApDatePicker_styles_1 = require("./ApDatePicker.styles");
+var NavBar_1 = require("./NavBar");
+var utils_1 = require("./utils");
+var YearMonthForm_1 = require("./YearMonthForm");
+var ApDatePicker = /** @class */ (function (_super) {
+    __extends(ApDatePicker, _super);
+    function ApDatePicker(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleDayChange = function (date) {
+            _this.props.onChange([date]);
+        };
+        _this.handleDayEnter = function (date) {
+            var range = _this.props.range;
+            _this.setState({
+                hoverRange: range ? utils_1.getWeekRange(date, range) : {
+                    from: date,
+                    to: date,
+                },
+            });
+        };
+        _this.handleDayLeave = function () {
+            _this.setState({
+                hoverRange: undefined,
+            });
+        };
+        _this.handleYearMonthChange = function (month) {
+            _this.setState({ month: month });
+        };
+        var isSelectedDays = Boolean(props.selectedDays.length);
+        _this.state = {
+            hoverRange: {
+                from: new Date(),
+                to: new Date(),
+            },
+            month: isSelectedDays ? props.selectedDays[0] : new Date(),
+        };
+        return _this;
+    }
+    ApDatePicker.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, selectedDays = _a.selectedDays, srcRange = _a.srcRange;
+        var _b = this.state, hoverRange = _b.hoverRange, month = _b.month;
+        var daysRangeSelected = selectedDays.length > 1;
+        var modifiers = {
+            hoverRange: hoverRange,
+            hoverRangeStart: hoverRange && hoverRange.from,
+            hoverRangeEnd: hoverRange && hoverRange.to,
+        };
+        if (daysRangeSelected) {
+            modifiers = __assign(__assign({}, modifiers), { selectedRange: {
+                    from: selectedDays[0],
+                    to: selectedDays[selectedDays.length - 1],
+                }, selectedRangeStart: selectedDays[0], selectedRangeEnd: selectedDays[selectedDays.length - 1] });
+        }
+        return (react_1.default.createElement(ApDatePicker_styles_1.Container, null,
+            react_1.default.createElement(react_day_picker_1.default, __assign({ month: month, firstDayOfWeek: 1, showOutsideDays: true, pagedNavigation: true, modifiers: modifiers, onDayClick: this.handleDayChange, onDayMouseEnter: this.handleDayEnter, onDayMouseLeave: this.handleDayLeave, onMonthChange: function (m) { return _this.setState({ month: m }); }, captionElement: function (_a) {
+                    var date = _a.date, localeUtils = _a.localeUtils;
+                    return (react_1.default.createElement(YearMonthForm_1.YearMonthForm, { date: date, localeUtils: localeUtils, srcRange: srcRange, onChange: _this.handleYearMonthChange }));
+                }, navbarElement: function (props) { return (react_1.default.createElement(NavBar_1.Navbar, __assign({}, props, { srcRange: srcRange, date: month }))); } }, this.props))));
+    };
+    return ApDatePicker;
+}(react_1.default.Component));
+exports.default = ApDatePicker;
+;
+//# sourceMappingURL=ApDatePicker.js.map

package/dist/esm/components/ApDatePicker/ApDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApDatePicker.js","sourceRoot":"","sources":["../../../../src/components/ApDatePicker/ApDatePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA0B;AAC1B,qDAAwD;AACxD,0CAAwC;AACxC,6DAAkD;AAClD,mCAAkC;AAClC,iCAAuC;AACvC,iDAA+C;AAoB/C;IAA0C,gCAAuD;IAChG,sBAAY,KAAyB;QAArC,YACC,kBAAM,KAAK,CAAC,SASZ;QAEM,qBAAe,GAAG,UAAC,IAAU;YACnC,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7B,CAAC,CAAC;QAEK,oBAAc,GAAG,UAAC,IAAU;YAC1B,IAAA,KAAK,GAAK,KAAI,CAAC,KAAK,MAAf,CAAgB;YAC7B,KAAI,CAAC,QAAQ,CAAC;gBACb,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,oBAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;oBAC/C,IAAI,EAAE,IAAI;oBACV,EAAE,EAAE,IAAI;iBACR;aACD,CAAC,CAAC;QACJ,CAAC,CAAC;QAEK,oBAAc,GAAG;YACvB,KAAI,CAAC,QAAQ,CAAC;gBACb,UAAU,EAAE,SAAS;aACrB,CAAC,CAAC;QACJ,CAAC,CAAC;QAEK,2BAAqB,GAAG,UAAC,KAAW;YAC1C,KAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;QAC1B,CAAC,CAAA;QAhCA,IAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QAC1D,KAAI,CAAC,KAAK,GAAG;YACZ,UAAU,EAAE;gBACX,IAAI,EAAE,IAAI,IAAI,EAAE;gBAChB,EAAE,EAAE,IAAI,IAAI,EAAE;aACd;YACD,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE;SAC1D,CAAC;;IACH,CAAC;IA0BM,6BAAM,GAAb;QAAA,iBAiDC;QAhDM,IAAA,KAA6B,IAAI,CAAC,KAAK,EAArC,YAAY,kBAAA,EAAE,QAAQ,cAAe,CAAC;QACxC,IAAA,KAAwB,IAAI,CAAC,KAAK,EAAhC,UAAU,gBAAA,EAAE,KAAK,WAAe,CAAC;QAEzC,IAAM,iBAAiB,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QAElD,IAAI,SAAS,GAAuB;YACnC,UAAU,YAAA;YACV,eAAe,EAAE,UAAU,IAAI,UAAU,CAAC,IAAI;YAC9C,aAAa,EAAE,UAAU,IAAI,UAAU,CAAC,EAAE;SAC1C,CAAC;QAEF,IAAI,iBAAiB,EAAE;YACtB,SAAS,yBACL,SAAS,KACZ,aAAa,EAAE;oBACd,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;oBACrB,EAAE,EAAE,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;iBACzC,EACD,kBAAkB,EAAE,YAAY,CAAC,CAAC,CAAC,EACnC,gBAAgB,EAAE,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,GACvD,CAAA;SACD;QAED,OAAO,CACN,8BAAC,+BAAS;YACT,8BAAC,0BAAS,aACT,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,CAAC,EACjB,eAAe,QACf,eAAe,QACf,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,eAAe,EAChC,eAAe,EAAE,IAAI,CAAC,cAAc,EACpC,eAAe,EAAE,IAAI,CAAC,cAAc,EACpC,aAAa,EAAE,UAAC,CAAC,IAAK,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAA3B,CAA2B,EACjD,cAAc,EAAE,UAAC,EAAqB;wBAAnB,IAAI,UAAA,EAAE,WAAW,iBAAA;oBAAO,OAAA,CAC1C,8BAAC,6BAAa,IACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,KAAI,CAAC,qBAAqB,GACnC,CACF;gBAP0C,CAO1C,EACD,aAAa,EAAE,UAAC,KAAK,IAAK,OAAA,CAAC,8BAAC,eAAM,eAAK,KAAK,IAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,EAAxD,CAAwD,IAC9E,IAAI,CAAC,KAAK,EACb,CACS,CACZ,CAAC;IACH,CAAC;IACF,mBAAC;AAAD,CAAC,AAvFD,CAA0C,eAAK,CAAC,SAAS,GAuFxD;;AAAA,CAAC"}

package/dist/esm/components/ApDatePicker/ApDatePicker.styles.js

@@ -0,0 +1,21 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrevNavButton = exports.NextNavButton = exports.NavButton = exports.NavContainer = exports.MonthYearContainer = exports.Container = exports.Wrapper = exports.Dropdown = void 0;
+var styled_components_1 = require("styled-components");
+var ApButtons_1 = require("../../components/ApButtons");
+var ApSimpleDropdown_1 = require("../../components/ApSimpleDropdown");
+var theme_1 = require("../../utils/theme");
+exports.Dropdown = styled_components_1.default(ApSimpleDropdown_1.ApSimpleDropdown)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tmax-width: 80px;\n"], ["\n\tdisplay: flex;\n\tmax-width: 80px;\n"])));
+exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tmax-width: calc(100% - 40px);\n\tdisplay: flex;\n"], ["\n\tmax-width: calc(100% - 40px);\n\tdisplay: flex;\n"])));
+exports.Container = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t.DayPicker-Month {\n\t\tborder-collapse: separate;\n\t}\n\t.DayPicker-WeekNumber {\n\t\toutline: none;\n\t}\n\t.DayPicker-Day {\n\t\toutline: none;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t}\n\t.DayPicker-Day--hoverRange {\n\t\tbackground-color: ", " !important;\n\t}\n\n\t.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside),\n\t.DayPicker-Day--selectedRange {\n\t\tbackground-color: ", " !important;\n\t\tcolor: ", ";\n\t\tborder-top-color: ", ";\n\t\tborder-bottom-color: ", ";\n\t\tborder-left-color: ", ";\n\t\tborder-right-color: ", ";\n\t}\n\n\t.DayPicker-Day--selectedRangeStart {\n\t\tbackground-color: ", " !important;\n\t\tborder-left: 1px solid ", ";\n\t\tcolors: ", ";\n\t}\n\n\t.DayPicker-Day--selectedRangeEnd {\n\t\tbackground-color: ", " !important;\n\t\tborder-right: 1px solid ", ";\n\t\tcolors: ", ";\n\t}\n\n\t.DayPicker-Day--selectedRange:not(.DayPicker-Day--outside).DayPicker-Day--selected,\n\t.DayPicker-Day--hoverRange:not(.DayPicker-Day--outside).DayPicker-Day--selected {\n\t\tborder-radius: 0 !important;\n\t}\n\t.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {\n\t\tbackground-color: ", ";\n\t}\n\t.DayPicker-Day--hoverRange:hover {\n\t\tborder-radius: 0 !important;\n\t}\n\n\t.DayPicker-Day--today {\n\t\tcolor: ", ";\n\t}\n\n\t.DayPicker-Weekday {\n\t\tcolor: ", ";\n\t\tfont-size: 13px;\n\t\tfont-weight: 500;\n\t}\n\n\t.DayPicker-NavButton {\n\t\ttop: 24px;\n\t}\n"], ["\n\t.DayPicker-Month {\n\t\tborder-collapse: separate;\n\t}\n\t.DayPicker-WeekNumber {\n\t\toutline: none;\n\t}\n\t.DayPicker-Day {\n\t\toutline: none;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t}\n\t.DayPicker-Day--hoverRange {\n\t\tbackground-color: ", " !important;\n\t}\n\n\t.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside),\n\t.DayPicker-Day--selectedRange {\n\t\tbackground-color: ", " !important;\n\t\tcolor: ", ";\n\t\tborder-top-color: ", ";\n\t\tborder-bottom-color: ", ";\n\t\tborder-left-color: ", ";\n\t\tborder-right-color: ", ";\n\t}\n\n\t.DayPicker-Day--selectedRangeStart {\n\t\tbackground-color: ", " !important;\n\t\tborder-left: 1px solid ", ";\n\t\tcolors: ", ";\n\t}\n\n\t.DayPicker-Day--selectedRangeEnd {\n\t\tbackground-color: ", " !important;\n\t\tborder-right: 1px solid ", ";\n\t\tcolors: ", ";\n\t}\n\n\t.DayPicker-Day--selectedRange:not(.DayPicker-Day--outside).DayPicker-Day--selected,\n\t.DayPicker-Day--hoverRange:not(.DayPicker-Day--outside).DayPicker-Day--selected {\n\t\tborder-radius: 0 !important;\n\t}\n\t.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {\n\t\tbackground-color: ", ";\n\t}\n\t.DayPicker-Day--hoverRange:hover {\n\t\tborder-radius: 0 !important;\n\t}\n\n\t.DayPicker-Day--today {\n\t\tcolor: ", ";\n\t}\n\n\t.DayPicker-Weekday {\n\t\tcolor: ", ";\n\t\tfont-size: 13px;\n\t\tfont-weight: 500;\n\t}\n\n\t.DayPicker-NavButton {\n\t\ttop: 24px;\n\t}\n"])), theme_1.colors.white, theme_1.colors.green0, theme_1.colors.green1, theme_1.colors.white, theme_1.colors.white, theme_1.colors.white, theme_1.colors.white, theme_1.colors.white, theme_1.colors.green1, theme_1.colors.green1, theme_1.colors.white, theme_1.colors.green1, theme_1.colors.green1, theme_1.colors.white, theme_1.colors.white, theme_1.colors.red1, theme_1.colors.green1);
+exports.MonthYearContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tdisplay: flex;\n\theight: 40px;\n"], ["\n\tdisplay: flex;\n\theight: 40px;\n"])));
+exports.NavContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tposition: relative;\n\tright: 0px;\n\ttop: 18px;\n"], ["\n\tposition: relative;\n\tright: 0px;\n\ttop: 18px;\n"])));
+exports.NavButton = styled_components_1.default(ApButtons_1.ApButtonIcon)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\tposition: absolute;\n\ttop: 0px;\n"], ["\n\tposition: absolute;\n\ttop: 0px;\n"])));
+exports.NextNavButton = styled_components_1.default(exports.NavButton)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\tright: 16px;\n"], ["\n\tright: 16px;\n"])));
+exports.PrevNavButton = styled_components_1.default(exports.NavButton)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\tright: 48px;\n"], ["\n\tright: 48px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=ApDatePicker.styles.js.map

package/dist/esm/components/ApDatePicker/ApDatePicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApDatePicker.styles.js","sourceRoot":"","sources":["../../../../src/components/ApDatePicker/ApDatePicker.styles.ts"],"names":[],"mappings":";;;;;;;AAAA,uDAAuC;AACvC,wDAA0D;AAC1D,sEAAqE;AACrE,2CAA2C;AAE9B,QAAA,QAAQ,GAAG,2BAAM,CAAC,mCAAgB,CAAC,6GAAA,0CAG/C,KAAC;AAEW,QAAA,OAAO,GAAG,2BAAM,CAAC,GAAG,0HAAA,uDAGhC,KAAC;AAEW,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,2lDAAA,iLASb,EAAY,uFAIZ,EAAa,wKAKb,EAAa,2BACxB,EAAY,2BACD,EAAY,8BACT,EAAY,4BACd,EAAY,6BACX,EAAY,0EAId,EAAa,2CACR,EAAa,iBAC5B,EAAY,wEAIF,EAAa,4CACP,EAAa,iBAC7B,EAAY,wZAQF,EAAY,+HAOvB,EAAW,+CAIX,EAAa,wGAQvB,KArDqB,cAAM,CAAC,KAAK,EAIZ,cAAM,CAAC,MAAM,EAKb,cAAM,CAAC,MAAM,EACxB,cAAM,CAAC,KAAK,EACD,cAAM,CAAC,KAAK,EACT,cAAM,CAAC,KAAK,EACd,cAAM,CAAC,KAAK,EACX,cAAM,CAAC,KAAK,EAId,cAAM,CAAC,MAAM,EACR,cAAM,CAAC,MAAM,EAC5B,cAAM,CAAC,KAAK,EAIF,cAAM,CAAC,MAAM,EACP,cAAM,CAAC,MAAM,EAC7B,cAAM,CAAC,KAAK,EAQF,cAAM,CAAC,KAAK,EAOvB,cAAM,CAAC,IAAI,EAIX,cAAM,CAAC,MAAM,EAQtB;AAEW,QAAA,kBAAkB,GAAG,2BAAM,CAAC,GAAG,0GAAA,uCAG3C,KAAC;AAEW,QAAA,YAAY,GAAG,2BAAM,CAAC,GAAG,2HAAA,wDAIrC,KAAC;AAEW,QAAA,SAAS,GAAG,2BAAM,CAAC,wBAAY,CAAC,2GAAA,wCAG5C,KAAC;AAEW,QAAA,aAAa,GAAG,2BAAM,CAAC,iBAAS,CAAC,uFAAA,oBAE7C,KAAC;AAEW,QAAA,aAAa,GAAG,2BAAM,CAAC,iBAAS,CAAC,uFAAA,oBAE7C,KAAC"}

package/dist/esm/components/ApDatePicker/NavBar.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Navbar = void 0;
+var React = require("react");
+var theme_1 = require("../../utils/theme");
+var ApDatePicker_styles_1 = require("./ApDatePicker.styles");
+exports.Navbar = function (_a) {
+    var date = _a.date, onPreviousClick = _a.onPreviousClick, onNextClick = _a.onNextClick, srcRange = _a.srcRange, className = _a.className;
+    return (React.createElement(ApDatePicker_styles_1.NavContainer, { className: className },
+        React.createElement(ApDatePicker_styles_1.PrevNavButton, { onClick: function () {
+                if (!(date.getFullYear() === srcRange.from.getFullYear()
+                    && date.getMonth() === srcRange.from.getMonth())) {
+                    onPreviousClick();
+                }
+            }, iconName: "baseline_keyboard_arrow_left", iconProps: {
+                iconColor: theme_1.colors.green1
+            } }),
+        React.createElement(ApDatePicker_styles_1.NextNavButton, { onClick: function () {
+                if (!(date.getFullYear() === srcRange.to.getFullYear()
+                    && date.getMonth() === srcRange.to.getMonth())) {
+                    onNextClick();
+                }
+            }, iconName: "baseline_keyboard_arrow_right", iconProps: {
+                iconColor: theme_1.colors.green1
+            } })));
+};
+//# sourceMappingURL=NavBar.js.map

package/dist/esm/components/ApDatePicker/NavBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.js","sourceRoot":"","sources":["../../../../src/components/ApDatePicker/NavBar.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAE/B,2CAA2C;AAC3C,6DAAmF;AAUtE,QAAA,MAAM,GAAG,UAAC,EAMR;QALd,IAAI,UAAA,EACJ,eAAe,qBAAA,EACf,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eAAA;IACU,OAAA,CACnB,oBAAC,kCAAY,IAAC,SAAS,EAAE,SAAS;QACjC,oBAAC,mCAAa,IACb,OAAO,EAAE;gBACR,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE;uBACpD,IAAI,CAAC,QAAQ,EAAE,KAAK,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE;oBACjD,eAAe,EAAE,CAAC;iBAClB;YACH,CAAC,EACD,QAAQ,EAAC,8BAA8B,EACvC,SAAS,EAAE;gBACV,SAAS,EAAE,cAAM,CAAC,MAAM;aACxB,GACA;QACF,oBAAC,mCAAa,IACb,OAAO,EAAE;gBACR,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE;uBAClD,IAAI,CAAC,QAAQ,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE;oBAChD,WAAW,EAAE,CAAC;iBACd;YACF,CAAC,EACD,QAAQ,EAAC,+BAA+B,EACxC,SAAS,EAAE;gBACV,SAAS,EAAE,cAAM,CAAC,MAAM;aACxB,GACA,CACY,CACf;AA3BmB,CA2BnB,CAAC"}

package/dist/esm/components/ApDatePicker/YearMonthForm.js

@@ -0,0 +1,48 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YearMonthForm = void 0;
+var moment_1 = require("moment");
+var React = require("react");
+var ApDatePicker_styles_1 = require("./ApDatePicker.styles");
+var getOption = function (text) { return ({
+    label: String(text),
+    value: String(text),
+}); };
+exports.YearMonthForm = function (_a) {
+    var date = _a.date, localeUtils = _a.localeUtils, srcRange = _a.srcRange, onChange = _a.onChange;
+    var minMonth = 0;
+    var maxMonth = 12;
+    if (date.getFullYear() === srcRange.from.getFullYear()) {
+        minMonth = srcRange.from.getMonth();
+    }
+    if (date.getFullYear() === srcRange.to.getFullYear()) {
+        maxMonth = srcRange.to.getMonth();
+    }
+    var months = localeUtils.getMonths();
+    var years = [];
+    for (var i = srcRange.from.getFullYear(); i <= srcRange.to.getFullYear(); i += 1) {
+        years.push(i);
+    }
+    var handleMonthChange = function (option) {
+        onChange(new Date(date.getFullYear(), moment_1.default().month(option.value).month()));
+    };
+    var handleYearChange = function (option) {
+        onChange(new Date(Number(option.value), date.getMonth()));
+    };
+    return (React.createElement(ApDatePicker_styles_1.MonthYearContainer, { className: "DayPicker-Caption" },
+        React.createElement(ApDatePicker_styles_1.Wrapper, null,
+            React.createElement(ApDatePicker_styles_1.Dropdown, { options: months.map(function (m, i) { return (__assign(__assign({}, getOption(m)), { disabled: i < minMonth || i > maxMonth })); }), selected: getOption(moment_1.default(date).startOf("month").format('MMM')), onChange: handleMonthChange }),
+            React.createElement(ApDatePicker_styles_1.Dropdown, { options: years.map(getOption), selected: getOption(date.getFullYear()), onChange: handleYearChange }))));
+};
+//# sourceMappingURL=YearMonthForm.js.map

package/dist/esm/components/ApDatePicker/YearMonthForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YearMonthForm.js","sourceRoot":"","sources":["../../../../src/components/ApDatePicker/YearMonthForm.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,iCAA4B;AAC5B,6BAA+B;AAE/B,6DAA8E;AAE9E,IAAM,SAAS,GAAG,UAAC,IAAqB,IAAK,OAAA,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC;CACnB,CAAC,EAH2C,CAG3C,CAAA;AAEW,QAAA,aAAa,GAAG,UAAC,EAQ7B;QAR+B,IAAI,UAAA,EAAE,WAAW,iBAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA;IASpE,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,QAAQ,GAAG,EAAE,CAAC;IAClB,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;QACvD,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAA;KACnC;IACD,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,EAAE;QACrD,QAAQ,GAAG,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAA;KACjC;IACD,IAAM,MAAM,GAAG,WAAW,CAAC,SAAS,EAAE,CAAC;IAEvC,IAAM,KAAK,GAAG,EAAE,CAAC;IACjB,KAAK,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,IAAI,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE;QACjF,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KACd;IAED,IAAM,iBAAiB,GAAG,UAAC,MAAe;QACzC,QAAQ,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,gBAAM,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC9E,CAAC,CAAA;IAED,IAAM,gBAAgB,GAAG,UAAC,MAAe;QACxC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAA;IAED,OAAO,CACN,oBAAC,wCAAkB,IAAC,SAAS,EAAC,mBAAmB;QAChD,oBAAC,6BAAO;YACP,oBAAC,8BAAQ,IACR,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,UAAC,CAAS,EAAE,CAAS,IAAK,OAAA,uBAC1C,SAAS,CAAC,CAAC,CAAC,KACf,QAAQ,EAAE,CAAC,GAAG,QAAQ,IAAI,CAAC,GAAG,QAAQ,IACrC,EAH4C,CAG5C,CAAC,EACH,QAAQ,EAAE,SAAS,CAAC,gBAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAChE,QAAQ,EAAE,iBAAiB,GAC1B;YACF,oBAAC,8BAAQ,IACR,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,EAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EACvC,QAAQ,EAAE,gBAAgB,GACzB,CACO,CACU,CACrB,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/components/{ApWidgets/ApWidgetBarChart → ApDatePicker}/index.js

@@ -10,5 +10,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ApWidgetBarChart"), exports);
+__exportStar(require("./ApDatePicker"), exports);
+__exportStar(require("./utils"), exports);
 //# sourceMappingURL=index.js.map

package/dist/esm/components/ApDatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ApDatePicker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iDAA+B;AAC/B,0CAAwB"}

package/dist/esm/components/ApDatePicker/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWeekRange = exports.getWeekDays = void 0;
+var moment_1 = require("moment");
+exports.getWeekDays = function (weekStart, amount) {
+    var days = [weekStart];
+    for (var i = 1; i < amount; i += 1) {
+        days.push(moment_1.default(weekStart)
+            .add(i, 'days')
+            .toDate());
+    }
+    return days;
+};
+exports.getWeekRange = function (date, range) {
+    var startDate = moment_1.default(date).startOf('isoWeek');
+    return {
+        from: startDate.toDate(),
+        to: startDate
+            .add(range - 1, 'days')
+            .toDate(),
+    };
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/ApDatePicker/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/ApDatePicker/utils.ts"],"names":[],"mappings":";;;AAAA,iCAA4B;AAEf,QAAA,WAAW,GAAG,UAAC,SAAe,EAAE,MAAc;IAC1D,IAAM,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC;IACzB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;QACnC,IAAI,CAAC,IAAI,CACR,gBAAM,CAAC,SAAS,CAAC;aACf,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC;aACd,MAAM,EAAE,CACV,CAAC;KACF;IACD,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AAEW,QAAA,YAAY,GAAG,UAAC,IAAU,EAAE,KAAa;IACrD,IAAM,SAAS,GAAG,gBAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;IACjD,OAAO;QACN,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE;QACxB,EAAE,EAAE,SAAS;aACX,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,MAAM,CAAC;aACtB,MAAM,EAAE;KACV,CAAC;AACH,CAAC,CAAC"}

package/dist/types/components/ApDatePicker/ApDatePicker.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import 'react-day-picker/lib/style.css';
+interface IApDatePickerProps {
+    range?: number;
+    selectedDays: Date[];
+    srcRange: {
+        from: Date;
+        to: Date;
+    };
+    onChange: (days: Date[]) => void;
+}
+interface IApDatePickerState {
+    hoverRange?: {
+        from: Date;
+        to: Date;
+    };
+    month: Date;
+}
+export default class ApDatePicker extends React.Component<IApDatePickerProps, IApDatePickerState> {
+    constructor(props: IApDatePickerProps);
+    handleDayChange: (date: Date) => void;
+    handleDayEnter: (date: Date) => void;
+    handleDayLeave: () => void;
+    handleYearMonthChange: (month: Date) => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/types/components/ApDatePicker/ApDatePicker.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const Dropdown: import("styled-components").StyledComponent<({ options, selected, iconName, iconProps, disabled, onChange, label, multiple, message, maxItems, }: import("../ApSimpleDropdown").IApSimpleDropdownProps) => JSX.Element, any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MonthYearContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavButton: import("styled-components").StyledComponent<import("react").SFC<import("../ApButtons").IButtonIconProps>, any, {}, never>;
+export declare const NextNavButton: import("styled-components").StyledComponent<import("react").SFC<import("../ApButtons").IButtonIconProps>, any, {}, never>;
+export declare const PrevNavButton: import("styled-components").StyledComponent<import("react").SFC<import("../ApButtons").IButtonIconProps>, any, {}, never>;

package/dist/types/components/ApDatePicker/NavBar.d.ts

@@ -0,0 +1,10 @@
+import { NavbarElementProps } from 'react-day-picker';
+interface INavBarProps extends NavbarElementProps {
+    date: Date;
+    srcRange: {
+        from: Date;
+        to: Date;
+    };
+}
+export declare const Navbar: ({ date, onPreviousClick, onNextClick, srcRange, className, }: INavBarProps) => JSX.Element;
+export {};

package/dist/types/components/ApDatePicker/YearMonthForm.d.ts

@@ -0,0 +1,9 @@
+export declare const YearMonthForm: ({ date, localeUtils, srcRange, onChange }: {
+    date: Date;
+    localeUtils: any;
+    srcRange: {
+        from: Date;
+        to: Date;
+    };
+    onChange: (o: Date) => void;
+}) => JSX.Element;

package/dist/types/components/ApDatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ApDatePicker';
+export * from './utils';

package/dist/types/components/ApDatePicker/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const getWeekDays: (weekStart: Date, amount: number) => Date[];
+export declare const getWeekRange: (date: Date, range: number) => {
+    from: Date;
+    to: Date;
+};