@onewelcome/react-lib-components 11.1.0-delta → 12.1.0-alpha

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.es.js

@@ -0,0 +1,186 @@
+import React, { useState, useEffect } from "react";
+import { Popover } from "../../../Popover/Popover.es.js";
+import classes from "./DateTimePicker.module.scss.es.js";
+import { Button } from "../../../Button/Button.es.js";
+import { THIRTY_SECONDS, ONE_MINUTE, FIVE_MINUTES, ONE_HOUR, TWENTY_FOUR_HOURS, CUSTOM_DATE_RANGE, formatInputDate } from "./DateTimeService.es.js";
+import { SideMenu } from "./SideMenu.es.js";
+import { addSeconds } from "date-fns";
+import { DateTimePickerInputSection } from "./DateTimePickerInputSection.es.js";
+import { DateTimePickerCalendarSection } from "./DateTimePickerCalendarSection.es.js";
+import { useRepeatFocus } from "../../../../hooks/useRepeatFocus.es.js";
+const dateFormat = "yyyy-mm-dd hh:mm:ss";
+const sideMenuItems = [
+  { id: THIRTY_SECONDS, name: "Last 30 seconds", rangeSeconds: 30 },
+  { id: ONE_MINUTE, name: "Last 1 minute", rangeSeconds: 60 },
+  { id: FIVE_MINUTES, name: "Last 5 minutes", rangeSeconds: 300 },
+  { id: ONE_HOUR, name: "Last 1 hour", rangeSeconds: 3600 },
+  { id: TWENTY_FOUR_HOURS, name: "Last 24 hours", rangeSeconds: 86400 },
+  { id: CUSTOM_DATE_RANGE, name: "Custom" }
+];
+const DateTimePicker = ({
+  anchorRef,
+  popoverRef,
+  isOpen,
+  setPickerOpen,
+  onTagCaptionChange,
+  translations = {
+    errors: {
+      dateFormatError: `The format must be ${dateFormat}`
+    },
+    previousMonth: "Previous month",
+    nextMonth: "Next month",
+    from: "From",
+    to: "To",
+    cancel: "Cancel",
+    apply: "Apply",
+    dateInputPlaceholder: dateFormat
+  },
+  dateFilterValue,
+  onDateFilterValueChange
+}) => {
+  const {
+    errors: { dateFormatError },
+    previousMonth,
+    nextMonth,
+    cancel,
+    from,
+    to,
+    apply,
+    dateInputPlaceholder
+  } = translations;
+  const [selectedDate, setSelectedDate] = useState({
+    from: (dateFilterValue == null ? void 0 : dateFilterValue.fromDate) ? new Date(dateFilterValue == null ? void 0 : dateFilterValue.fromDate) : void 0,
+    to: (dateFilterValue == null ? void 0 : dateFilterValue.toDate) ? new Date(dateFilterValue == null ? void 0 : dateFilterValue.toDate) : void 0
+  });
+  const [selectedPredefinedRange, setSelectedPredefinedRange] = useState(
+    sideMenuItems[0].id
+  );
+  const [fromDateText, setFromDateText] = useState("");
+  const [toDateText, setToDateText] = useState("");
+  const [fromDateError, setFromDateError] = useState("");
+  const [toDateError, setToDateError] = useState("");
+  useRepeatFocus(popoverRef);
+  const disableDateRangePickers = selectedPredefinedRange !== CUSTOM_DATE_RANGE;
+  useEffect(() => {
+    var _a;
+    if (isOpen) {
+      (_a = popoverRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (dateFilterValue) {
+      const foundItem = sideMenuItems.find((item) => item.id === dateFilterValue.type);
+      foundItem && onTagCaptionChange(foundItem.name);
+      setSelectedPredefinedRange(dateFilterValue.type);
+      if ((foundItem == null ? void 0 : foundItem.rangeSeconds) && dateFilterValue.type !== CUSTOM_DATE_RANGE) {
+        const fromDate = addSeconds(/* @__PURE__ */ new Date(), -foundItem.rangeSeconds);
+        const toDate = /* @__PURE__ */ new Date();
+        setFromDateText(formatInputDate(fromDate));
+        setToDateText(formatInputDate(toDate));
+        setSelectedDate({ from: fromDate, to: toDate });
+        return;
+      }
+      dateFilterValue.fromDate && setFromDateText(formatInputDate(new Date(dateFilterValue.fromDate)));
+      dateFilterValue.toDate && setToDateText(formatInputDate(new Date(dateFilterValue.toDate)));
+      setSelectedDate({
+        from: (dateFilterValue == null ? void 0 : dateFilterValue.fromDate) ? new Date(dateFilterValue == null ? void 0 : dateFilterValue.fromDate) : void 0,
+        to: (dateFilterValue == null ? void 0 : dateFilterValue.toDate) ? new Date(dateFilterValue == null ? void 0 : dateFilterValue.toDate) : void 0
+      });
+    }
+  }, [dateFilterValue]);
+  useEffect(() => {
+    if (!dateFilterValue) {
+      isOpen && onSideMenuItemSelect(selectedPredefinedRange);
+    }
+  }, [isOpen, dateFilterValue]);
+  const onSideMenuItemSelect = (itemId) => {
+    setSelectedPredefinedRange(itemId);
+    const foundItem = sideMenuItems.find((item) => item.id === itemId);
+    foundItem && onTagCaptionChange(foundItem.name);
+    if (itemId !== CUSTOM_DATE_RANGE) {
+      if (!foundItem) {
+        return;
+      }
+      if (foundItem.rangeSeconds) {
+        const fromDate = addSeconds(/* @__PURE__ */ new Date(), -foundItem.rangeSeconds);
+        const toDate = /* @__PURE__ */ new Date();
+        setSelectedDate({ from: fromDate, to: toDate });
+        setFromDateText(formatInputDate(fromDate));
+        setToDateText(formatInputDate(toDate));
+      }
+    }
+  };
+  const closeDateTimePicker = () => {
+    setPickerOpen(false);
+  };
+  const saveDateTimePicker = () => {
+    var _a, _b;
+    onDateFilterValueChange && onDateFilterValueChange({
+      toDate: ((_a = selectedDate.to) == null ? void 0 : _a.toISOString()) ?? "",
+      fromDate: ((_b = selectedDate.from) == null ? void 0 : _b.toISOString()) ?? "",
+      type: selectedPredefinedRange
+    });
+    setPickerOpen(false);
+  };
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      tabIndex: -1,
+      anchorEl: anchorRef,
+      ref: popoverRef,
+      show: isOpen,
+      placement: { horizontal: "left", vertical: "bottom" },
+      transformOrigin: { horizontal: "left", vertical: "top" }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: classes["popover"] }, /* @__PURE__ */ React.createElement("div", { className: classes["content-wrapper"] }, /* @__PURE__ */ React.createElement("div", { className: classes["aside"] }, /* @__PURE__ */ React.createElement(
+      SideMenu,
+      {
+        sideMenuItems,
+        selectedItemId: selectedPredefinedRange,
+        onItemSelect: onSideMenuItemSelect
+      }
+    )), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${classes["controls"]} ${toDateError || fromDateError ? classes["has-error"] : ""}`
+      },
+      /* @__PURE__ */ React.createElement("div", { className: classes["controls-panel"] }, /* @__PURE__ */ React.createElement(
+        DateTimePickerInputSection,
+        {
+          from,
+          to,
+          dateInputPlaceholder,
+          dateFormatError,
+          fromDateText,
+          toDateText,
+          fromDateError,
+          toDateError,
+          setSelectedDate,
+          setFromDateText,
+          setToDateText,
+          setFromDateError,
+          setToDateError
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: `${classes["controls-panel"]} ${classes["set-height"]}` }, /* @__PURE__ */ React.createElement(
+        DateTimePickerCalendarSection,
+        {
+          previousMonth,
+          nextMonth,
+          selectedDate,
+          disableDateRangePickers,
+          setSelectedDate,
+          setFromDateText,
+          setFromDateError,
+          setToDateText,
+          setToDateError
+        }
+      ))
+    )), /* @__PURE__ */ React.createElement("div", { className: classes["actions"] }, /* @__PURE__ */ React.createElement(Button, { variant: "text", onClick: closeDateTimePicker }, cancel), /* @__PURE__ */ React.createElement(Button, { onClick: saveDateTimePicker }, apply)))
+  );
+};
+export {
+  DateTimePicker,
+  dateFormat
+};
+//# sourceMappingURL=DateTimePicker.es.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.es.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useEffect, useState } from \"react\";\nimport { Popover } from \"../../../Popover/Popover\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { Button } from \"../../../Button/Button\";\nimport { DateRange } from \"react-day-picker\";\nimport {\n  CUSTOM_DATE_RANGE,\n  FIVE_MINUTES,\n  ONE_HOUR,\n  ONE_MINUTE,\n  THIRTY_SECONDS,\n  TWENTY_FOUR_HOURS,\n  formatInputDate\n} from \"./DateTimeService\";\nimport { SideMenu } from \"./SideMenu\";\nimport { addSeconds } from \"date-fns\";\nimport { DateTimePickerInputSection } from \"./DateTimePickerInputSection\";\nimport { DateTimePickerCalendarSection } from \"./DateTimePickerCalendarSection\";\nimport { DateTimeFilter, DateTimeFilterType } from \"../DataGridFilters.interfaces\";\nimport { useRepeatFocus } from \"../../../../hooks/useRepeatFocus\";\n\nexport type DateTimePickerTranslations = {\n  errors: {\n    dateFormatError: string;\n  };\n  previousMonth: string;\n  nextMonth: string;\n  from: string;\n  to: string;\n  cancel: string;\n  apply: string;\n  dateInputPlaceholder: string;\n};\n\nexport type Props = {\n  popoverRef: React.RefObject<HTMLDivElement>;\n  anchorRef?: React.RefObject<HTMLDivElement>;\n  isOpen: boolean;\n  onTagCaptionChange: (value: string) => void;\n  setPickerOpen: (open: boolean) => void;\n  translations?: DateTimePickerTranslations;\n  dateFilterValue?: DateTimeFilter;\n  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;\n};\n\nexport type SideMenuItem = {\n  id: DateTimeFilterType;\n  name: string;\n  rangeSeconds?: number;\n};\n\nexport const dateFormat = \"yyyy-mm-dd hh:mm:ss\";\n\nconst sideMenuItems: SideMenuItem[] = [\n  { id: THIRTY_SECONDS, name: \"Last 30 seconds\", rangeSeconds: 30 },\n  { id: ONE_MINUTE, name: \"Last 1 minute\", rangeSeconds: 60 },\n  { id: FIVE_MINUTES, name: \"Last 5 minutes\", rangeSeconds: 300 },\n  { id: ONE_HOUR, name: \"Last 1 hour\", rangeSeconds: 3600 },\n  { id: TWENTY_FOUR_HOURS, name: \"Last 24 hours\", rangeSeconds: 86400 },\n  { id: CUSTOM_DATE_RANGE, name: \"Custom\" }\n];\n\nexport const DateTimePicker = ({\n  anchorRef,\n  popoverRef,\n  isOpen,\n  setPickerOpen,\n  onTagCaptionChange,\n  translations = {\n    errors: {\n      dateFormatError: `The format must be ${dateFormat}`\n    },\n    previousMonth: \"Previous month\",\n    nextMonth: \"Next month\",\n    from: \"From\",\n    to: \"To\",\n    cancel: \"Cancel\",\n    apply: \"Apply\",\n    dateInputPlaceholder: dateFormat\n  },\n  dateFilterValue,\n  onDateFilterValueChange\n}: Props) => {\n  const {\n    errors: { dateFormatError },\n    previousMonth,\n    nextMonth,\n    cancel,\n    from,\n    to,\n    apply,\n    dateInputPlaceholder\n  } = translations;\n  const [selectedDate, setSelectedDate] = useState<DateRange>({\n    from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n    to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n  });\n  const [selectedPredefinedRange, setSelectedPredefinedRange] = useState<DateTimeFilterType>(\n    sideMenuItems[0].id\n  );\n  const [fromDateText, setFromDateText] = useState(\"\");\n  const [toDateText, setToDateText] = useState(\"\");\n  const [fromDateError, setFromDateError] = useState(\"\");\n  const [toDateError, setToDateError] = useState(\"\");\n  useRepeatFocus(popoverRef);\n\n  const disableDateRangePickers = selectedPredefinedRange !== CUSTOM_DATE_RANGE;\n\n  useEffect(() => {\n    if (isOpen) {\n      popoverRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (dateFilterValue) {\n      const foundItem = sideMenuItems.find(item => item.id === dateFilterValue.type);\n\n      foundItem && onTagCaptionChange(foundItem.name);\n\n      setSelectedPredefinedRange(dateFilterValue.type);\n\n      if (foundItem?.rangeSeconds && dateFilterValue.type !== CUSTOM_DATE_RANGE) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n        setSelectedDate({ from: fromDate, to: toDate });\n\n        return;\n      }\n\n      dateFilterValue.fromDate &&\n        setFromDateText(formatInputDate(new Date(dateFilterValue.fromDate)));\n\n      dateFilterValue.toDate && setToDateText(formatInputDate(new Date(dateFilterValue.toDate)));\n\n      setSelectedDate({\n        from: dateFilterValue?.fromDate ? new Date(dateFilterValue?.fromDate) : undefined,\n        to: dateFilterValue?.toDate ? new Date(dateFilterValue?.toDate) : undefined\n      });\n    }\n  }, [dateFilterValue]);\n\n  useEffect(() => {\n    if (!dateFilterValue) {\n      isOpen && onSideMenuItemSelect(selectedPredefinedRange);\n    }\n  }, [isOpen, dateFilterValue]);\n\n  const onSideMenuItemSelect = (itemId: DateTimeFilterType) => {\n    setSelectedPredefinedRange(itemId);\n    const foundItem = sideMenuItems.find(item => item.id === itemId);\n    foundItem && onTagCaptionChange(foundItem.name);\n\n    if (itemId !== CUSTOM_DATE_RANGE) {\n      if (!foundItem) {\n        return;\n      }\n\n      if (foundItem.rangeSeconds) {\n        const fromDate = addSeconds(new Date(), -foundItem.rangeSeconds);\n        const toDate = new Date();\n\n        setSelectedDate({ from: fromDate, to: toDate });\n        setFromDateText(formatInputDate(fromDate));\n        setToDateText(formatInputDate(toDate));\n      }\n    }\n  };\n\n  const closeDateTimePicker = () => {\n    setPickerOpen(false);\n  };\n\n  const saveDateTimePicker = () => {\n    onDateFilterValueChange &&\n      onDateFilterValueChange({\n        toDate: selectedDate.to?.toISOString() ?? \"\",\n        fromDate: selectedDate.from?.toISOString() ?? \"\",\n        type: selectedPredefinedRange\n      });\n    setPickerOpen(false);\n  };\n\n  return (\n    <Popover\n      tabIndex={-1}\n      anchorEl={anchorRef}\n      ref={popoverRef}\n      show={isOpen}\n      placement={{ horizontal: \"left\", vertical: \"bottom\" }}\n      transformOrigin={{ horizontal: \"left\", vertical: \"top\" }}\n    >\n      <div className={classes[\"popover\"]}>\n        <div className={classes[\"content-wrapper\"]}>\n          <div className={classes[\"aside\"]}>\n            <SideMenu\n              sideMenuItems={sideMenuItems}\n              selectedItemId={selectedPredefinedRange}\n              onItemSelect={onSideMenuItemSelect}\n            />\n          </div>\n          <div\n            className={`${classes[\"controls\"]} ${toDateError || fromDateError ? classes[\"has-error\"] : \"\"}`}\n          >\n            <div className={classes[\"controls-panel\"]}>\n              <DateTimePickerInputSection\n                from={from}\n                to={to}\n                dateInputPlaceholder={dateInputPlaceholder}\n                dateFormatError={dateFormatError}\n                fromDateText={fromDateText}\n                toDateText={toDateText}\n                fromDateError={fromDateError}\n                toDateError={toDateError}\n                setSelectedDate={setSelectedDate}\n                setFromDateText={setFromDateText}\n                setToDateText={setToDateText}\n                setFromDateError={setFromDateError}\n                setToDateError={setToDateError}\n              />\n            </div>\n            <div className={`${classes[\"controls-panel\"]} ${classes[\"set-height\"]}`}>\n              <DateTimePickerCalendarSection\n                previousMonth={previousMonth}\n                nextMonth={nextMonth}\n                selectedDate={selectedDate}\n                disableDateRangePickers={disableDateRangePickers}\n                setSelectedDate={setSelectedDate}\n                setFromDateText={setFromDateText}\n                setFromDateError={setFromDateError}\n                setToDateText={setToDateText}\n                setToDateError={setToDateError}\n              />\n            </div>\n          </div>\n        </div>\n        <div className={classes[\"actions\"]}>\n          <Button variant=\"text\" onClick={closeDateTimePicker}>\n            {cancel}\n          </Button>\n          <Button onClick={saveDateTimePicker}>{apply}</Button>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.module.scss.cjs.js

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.DateTimePicker_popover_7l1Pc{display:flex;flex-direction:column;align-items:flex-start;min-width:40rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_content-wrapper_7l1Pc{display:flex}.DateTimePicker_popover_7l1Pc .DateTimePicker_aside_7l1Pc{display:flex;flex-direction:column;width:9.25rem;border-right:1px solid var(--color-blue-grey100)}.DateTimePicker_popover_7l1Pc .DateTimePicker_aside-menu_7l1Pc{margin:.5rem 0;padding:0;white-space:nowrap;list-style:none}.DateTimePicker_popover_7l1Pc .DateTimePicker_aside-menu-item_7l1Pc{height:2rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_aside-menu-item_7l1Pc button{padding:.5rem .75rem;font-size:var(--font-size-sub);line-height:1.33;text-align:start}.DateTimePicker_popover_7l1Pc .DateTimePicker_controls_7l1Pc{display:flex;flex-direction:column;gap:2rem;flex-grow:1;padding:2rem 2rem 0}.DateTimePicker_popover_7l1Pc .DateTimePicker_controls_7l1Pc.DateTimePicker_has-error_7l1Pc{gap:calc(2rem - 15.5681px)}.DateTimePicker_popover_7l1Pc .DateTimePicker_controls-panel_7l1Pc{display:flex;gap:2rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_controls-panel_7l1Pc>*{flex-grow:1}.DateTimePicker_popover_7l1Pc .DateTimePicker_controls-panel_7l1Pc.DateTimePicker_set-height_7l1Pc{min-height:17.5rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_actions_7l1Pc{display:flex;justify-content:space-between;gap:1rem;flex-grow:1;width:calc(100% - 3rem);border-top:1px solid var(--color-blue-grey100);padding:1rem 1.5rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_input_7l1Pc{margin-top:0;max-width:14rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_input_7l1Pc label{font-size:var(--font-size-sub)}.DateTimePicker_popover_7l1Pc .DateTimePicker_nav_7l1Pc{position:absolute}.DateTimePicker_popover_7l1Pc .DateTimePicker_next-button_7l1Pc{position:absolute;left:27.3125rem;top:0}.DateTimePicker_popover_7l1Pc .DateTimePicker_prev-button_7l1Pc{position:absolute;top:0}.DateTimePicker_popover_7l1Pc .DateTimePicker_month-caption_7l1Pc{width:100%;height:calc(2.5 * var(--font-size));margin:0;padding:.75rem 0;font-size:var(--font-size-sub);font-weight:500;line-height:1.33;text-align:center}.DateTimePicker_error-message_7l1Pc{font-size:var(--font-size-small)}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="DateTimePicker_popover_7l1Pc",t="DateTimePicker_aside_7l1Pc",i="DateTimePicker_controls_7l1Pc",r="DateTimePicker_actions_7l1Pc",c="DateTimePicker_input_7l1Pc",o="DateTimePicker_nav_7l1Pc",a={popover:e,"content-wrapper":"DateTimePicker_content-wrapper_7l1Pc",aside:t,"aside-menu":"DateTimePicker_aside-menu_7l1Pc","aside-menu-item":"DateTimePicker_aside-menu-item_7l1Pc",controls:i,"has-error":"DateTimePicker_has-error_7l1Pc","controls-panel":"DateTimePicker_controls-panel_7l1Pc","set-height":"DateTimePicker_set-height_7l1Pc",actions:r,input:c,nav:o,"next-button":"DateTimePicker_next-button_7l1Pc","prev-button":"DateTimePicker_prev-button_7l1Pc","month-caption":"DateTimePicker_month-caption_7l1Pc","error-message":"DateTimePicker_error-message_7l1Pc"};exports.actions=r,exports.aside=t,exports.controls=i,exports.default=a,exports.input=c,exports.nav=o,exports.popover=e;
+//# sourceMappingURL=DateTimePicker.module.scss.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.module.scss.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.module.scss.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.module.scss.es.js

@@ -0,0 +1,35 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.DateTimePicker_popover_7l1Pc{display:flex;flex-direction:column;align-items:flex-start;min-width:40rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_content-wrapper_7l1Pc{display:flex}.DateTimePicker_popover_7l1Pc .DateTimePicker_aside_7l1Pc{display:flex;flex-direction:column;width:9.25rem;border-right:1px solid var(--color-blue-grey100)}.DateTimePicker_popover_7l1Pc .DateTimePicker_aside-menu_7l1Pc{margin:.5rem 0;padding:0;white-space:nowrap;list-style:none}.DateTimePicker_popover_7l1Pc .DateTimePicker_aside-menu-item_7l1Pc{height:2rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_aside-menu-item_7l1Pc button{padding:.5rem .75rem;font-size:var(--font-size-sub);line-height:1.33;text-align:start}.DateTimePicker_popover_7l1Pc .DateTimePicker_controls_7l1Pc{display:flex;flex-direction:column;gap:2rem;flex-grow:1;padding:2rem 2rem 0}.DateTimePicker_popover_7l1Pc .DateTimePicker_controls_7l1Pc.DateTimePicker_has-error_7l1Pc{gap:calc(2rem - 15.5681px)}.DateTimePicker_popover_7l1Pc .DateTimePicker_controls-panel_7l1Pc{display:flex;gap:2rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_controls-panel_7l1Pc>*{flex-grow:1}.DateTimePicker_popover_7l1Pc .DateTimePicker_controls-panel_7l1Pc.DateTimePicker_set-height_7l1Pc{min-height:17.5rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_actions_7l1Pc{display:flex;justify-content:space-between;gap:1rem;flex-grow:1;width:calc(100% - 3rem);border-top:1px solid var(--color-blue-grey100);padding:1rem 1.5rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_input_7l1Pc{margin-top:0;max-width:14rem}.DateTimePicker_popover_7l1Pc .DateTimePicker_input_7l1Pc label{font-size:var(--font-size-sub)}.DateTimePicker_popover_7l1Pc .DateTimePicker_nav_7l1Pc{position:absolute}.DateTimePicker_popover_7l1Pc .DateTimePicker_next-button_7l1Pc{position:absolute;left:27.3125rem;top:0}.DateTimePicker_popover_7l1Pc .DateTimePicker_prev-button_7l1Pc{position:absolute;top:0}.DateTimePicker_popover_7l1Pc .DateTimePicker_month-caption_7l1Pc{width:100%;height:calc(2.5 * var(--font-size));margin:0;padding:.75rem 0;font-size:var(--font-size-sub);font-weight:500;line-height:1.33;text-align:center}.DateTimePicker_error-message_7l1Pc{font-size:var(--font-size-small)}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+const popover = "DateTimePicker_popover_7l1Pc";
+const aside = "DateTimePicker_aside_7l1Pc";
+const controls = "DateTimePicker_controls_7l1Pc";
+const actions = "DateTimePicker_actions_7l1Pc";
+const input = "DateTimePicker_input_7l1Pc";
+const nav = "DateTimePicker_nav_7l1Pc";
+const classes = {
+  popover,
+  "content-wrapper": "DateTimePicker_content-wrapper_7l1Pc",
+  aside,
+  "aside-menu": "DateTimePicker_aside-menu_7l1Pc",
+  "aside-menu-item": "DateTimePicker_aside-menu-item_7l1Pc",
+  controls,
+  "has-error": "DateTimePicker_has-error_7l1Pc",
+  "controls-panel": "DateTimePicker_controls-panel_7l1Pc",
+  "set-height": "DateTimePicker_set-height_7l1Pc",
+  actions,
+  input,
+  nav,
+  "next-button": "DateTimePicker_next-button_7l1Pc",
+  "prev-button": "DateTimePicker_prev-button_7l1Pc",
+  "month-caption": "DateTimePicker_month-caption_7l1Pc",
+  "error-message": "DateTimePicker_error-message_7l1Pc"
+};
+export {
+  actions,
+  aside,
+  controls,
+  classes as default,
+  input,
+  nav,
+  popover
+};
+//# sourceMappingURL=DateTimePicker.module.scss.es.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.module.scss.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.module.scss.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerCalendarSection.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./DateTimePicker.module.scss.cjs.js"),a=require("../../../DatePicker/DatePicker.cjs.js"),o=require("../../../Button/IconButton.cjs.js"),r=require("./DateTimeService.cjs.js"),n=require("../../../Icon/Icon.cjs.js"),c=require("../../../Typography/Typography.cjs.js");exports.DateTimePickerCalendarSection=({previousMonth:s,nextMonth:i,selectedDate:l,disableDateRangePickers:m,setSelectedDate:u,setFromDateText:d,setFromDateError:p,setToDateError:D,setToDateText:h})=>e.createElement(a.DatePicker,{onSelect:e=>{if(e){u(e);const t=e.from,a=e.to;t&&(d(r.formatInputDate(t)),p("")),a&&(h(r.formatInputDate(a)),D(""))}},value:l,disabled:m,mode:"range",components:{Nav:({onNextClick:a,onPreviousClick:r})=>e.createElement("div",{className:t.default.nav},e.createElement(o.IconButton,{title:s,onClick:r,className:t.default["prev-button"],disabled:m},e.createElement(n.Icon,{size:"0.75rem",icon:n.Icons.ChevronLeft})),e.createElement(o.IconButton,{title:i,onClick:a,className:t.default["next-button"],disabled:m},e.createElement(n.Icon,{size:"0.75rem",icon:n.Icons.ChevronRight}))),MonthCaption:({calendarMonth:a})=>e.createElement(c.Typography,{className:t.default["month-caption"],variant:"body"},r.getMonthName(a.date)," ",r.getYearFromDate(a.date))},numberOfMonths:2});
+//# sourceMappingURL=DateTimePickerCalendarSection.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerCalendarSection.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePickerCalendarSection.cjs.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerCalendarSection.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React from \"react\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { DatePicker } from \"../../../DatePicker/DatePicker\";\nimport { IconButton } from \"../../../Button/IconButton\";\nimport { DateRange } from \"react-day-picker\";\nimport { formatInputDate, getMonthName, getYearFromDate } from \"./DateTimeService\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { Typography } from \"../../../Typography/Typography\";\n\ntype Props = {\n  previousMonth: string;\n  nextMonth: string;\n  selectedDate: DateRange | undefined;\n  disableDateRangePickers: boolean;\n  setSelectedDate: React.Dispatch<React.SetStateAction<DateRange>>;\n  setFromDateText: React.Dispatch<React.SetStateAction<string>>;\n  setToDateText: React.Dispatch<React.SetStateAction<string>>;\n  setFromDateError: React.Dispatch<React.SetStateAction<string>>;\n  setToDateError: React.Dispatch<React.SetStateAction<string>>;\n};\n\nexport const DateTimePickerCalendarSection = ({\n  previousMonth,\n  nextMonth,\n  selectedDate,\n  disableDateRangePickers,\n  setSelectedDate,\n  setFromDateText,\n  setFromDateError,\n  setToDateError,\n  setToDateText\n}: Props) => {\n  const onDatePickerSelect = (date: Date | DateRange | undefined): void => {\n    if (date) {\n      setSelectedDate(date as DateRange);\n\n      const fromDate = (date as DateRange).from;\n      const toDate = (date as DateRange).to;\n\n      if (fromDate) {\n        setFromDateText(formatInputDate(fromDate));\n        setFromDateError(\"\");\n      }\n\n      if (toDate) {\n        setToDateText(formatInputDate(toDate));\n        setToDateError(\"\");\n      }\n    }\n  };\n  return (\n    <DatePicker\n      onSelect={onDatePickerSelect}\n      value={selectedDate}\n      disabled={disableDateRangePickers}\n      mode={\"range\"}\n      components={{\n        Nav: ({ onNextClick, onPreviousClick }) => (\n          <div className={classes[\"nav\"]}>\n            <IconButton\n              title={previousMonth}\n              onClick={onPreviousClick}\n              className={classes[\"prev-button\"]}\n              disabled={disableDateRangePickers}\n            >\n              <Icon size=\"0.75rem\" icon={Icons.ChevronLeft} />\n            </IconButton>\n            <IconButton\n              title={nextMonth}\n              onClick={onNextClick}\n              className={classes[\"next-button\"]}\n              disabled={disableDateRangePickers}\n            >\n              <Icon size=\"0.75rem\" icon={Icons.ChevronRight} />\n            </IconButton>\n          </div>\n        ),\n        MonthCaption: ({ calendarMonth }) => (\n          <Typography className={classes[\"month-caption\"]} variant=\"body\">\n            {getMonthName(calendarMonth.date)} {getYearFromDate(calendarMonth.date)}\n          </Typography>\n        )\n      }}\n      numberOfMonths={2}\n    />\n  );\n};\n"],"names":["previousMonth","nextMonth","selectedDate","disableDateRangePickers","setSelectedDate","setFromDateText","setFromDateError","setToDateError","setToDateText","React","createElement","DatePicker","onSelect","date","fromDate","from","toDate","to","formatInputDate","value","disabled","mode","components","Nav","onNextClick","onPreviousClick","className","classes","default","IconButton","title","onClick","Icon","size","icon","Icons","ChevronLeft","ChevronRight","MonthCaption","calendarMonth","Typography","variant","getMonthName","getYearFromDate","numberOfMonths"],"mappings":"kaAqC6C,EAC3CA,gBACAC,YACAC,eACAC,0BACAC,kBACAC,kBACAC,mBACAC,iBACAC,mBAqBEC,EAAAC,cAACC,EAAAA,WAAA,CACCC,SApBwBC,IAC1B,GAAIA,EAAM,CACRT,EAAgBS,GAEhB,MAAMC,EAAYD,EAAmBE,KAC/BC,EAAUH,EAAmBI,GAE/BH,IACcI,EAAAA,EAAAA,gBAAgBJ,IAChCR,EAAiB,KAGfU,IACYE,EAAAA,EAAAA,gBAAgBF,IAC9BT,EAAe,IACjB,GAMAY,MAAOjB,EACPkB,SAAUjB,EACVkB,KAAM,QACNC,WAAY,CACVC,IAAK,EAAGC,cAAaC,qBACnBhB,EAAAC,cAAC,MAAI,CAAAgB,UAAWC,EAAQC,QAAK,KAC3BnB,EAAAC,cAACmB,EAAAA,WAAA,CACCC,MAAO9B,EACP+B,QAASN,EACTC,UAAWC,UAAQ,eACnBP,SAAUjB,mBAET6B,EAAAA,KAAK,CAAAC,KAAK,UAAUC,KAAMC,QAAMC,eAEnC3B,EAAAC,cAACmB,EAAAA,WAAA,CACCC,MAAO7B,EACP8B,QAASP,EACTE,UAAWC,UAAQ,eACnBP,SAAUjB,mBAET6B,EAAAA,KAAK,CAAAC,KAAK,UAAUC,KAAMC,QAAME,iBAIvCC,aAAc,EAAGC,mBACd9B,EAAAC,cAAA8B,aAAA,CAAWd,UAAWC,EAAAA,QAAQ,iBAAkBc,QAAQ,QACtDC,eAAaH,EAAc1B,MAAM,IAAE8B,EAAAA,gBAAgBJ,EAAc1B,QAIxE+B,eAAgB"}

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerCalendarSection.es.js

@@ -0,0 +1,70 @@
+import React from "react";
+import classes from "./DateTimePicker.module.scss.es.js";
+import { DatePicker } from "../../../DatePicker/DatePicker.es.js";
+import { IconButton } from "../../../Button/IconButton.es.js";
+import { getMonthName, getYearFromDate, formatInputDate } from "./DateTimeService.es.js";
+import { Icon, Icons } from "../../../Icon/Icon.es.js";
+import { Typography } from "../../../Typography/Typography.es.js";
+const DateTimePickerCalendarSection = ({
+  previousMonth,
+  nextMonth,
+  selectedDate,
+  disableDateRangePickers,
+  setSelectedDate,
+  setFromDateText,
+  setFromDateError,
+  setToDateError,
+  setToDateText
+}) => {
+  const onDatePickerSelect = (date) => {
+    if (date) {
+      setSelectedDate(date);
+      const fromDate = date.from;
+      const toDate = date.to;
+      if (fromDate) {
+        setFromDateText(formatInputDate(fromDate));
+        setFromDateError("");
+      }
+      if (toDate) {
+        setToDateText(formatInputDate(toDate));
+        setToDateError("");
+      }
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    DatePicker,
+    {
+      onSelect: onDatePickerSelect,
+      value: selectedDate,
+      disabled: disableDateRangePickers,
+      mode: "range",
+      components: {
+        Nav: ({ onNextClick, onPreviousClick }) => /* @__PURE__ */ React.createElement("div", { className: classes["nav"] }, /* @__PURE__ */ React.createElement(
+          IconButton,
+          {
+            title: previousMonth,
+            onClick: onPreviousClick,
+            className: classes["prev-button"],
+            disabled: disableDateRangePickers
+          },
+          /* @__PURE__ */ React.createElement(Icon, { size: "0.75rem", icon: Icons.ChevronLeft })
+        ), /* @__PURE__ */ React.createElement(
+          IconButton,
+          {
+            title: nextMonth,
+            onClick: onNextClick,
+            className: classes["next-button"],
+            disabled: disableDateRangePickers
+          },
+          /* @__PURE__ */ React.createElement(Icon, { size: "0.75rem", icon: Icons.ChevronRight })
+        )),
+        MonthCaption: ({ calendarMonth }) => /* @__PURE__ */ React.createElement(Typography, { className: classes["month-caption"], variant: "body" }, getMonthName(calendarMonth.date), " ", getYearFromDate(calendarMonth.date))
+      },
+      numberOfMonths: 2
+    }
+  );
+};
+export {
+  DateTimePickerCalendarSection
+};
+//# sourceMappingURL=DateTimePickerCalendarSection.es.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerCalendarSection.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePickerCalendarSection.es.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerCalendarSection.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React from \"react\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { DatePicker } from \"../../../DatePicker/DatePicker\";\nimport { IconButton } from \"../../../Button/IconButton\";\nimport { DateRange } from \"react-day-picker\";\nimport { formatInputDate, getMonthName, getYearFromDate } from \"./DateTimeService\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { Typography } from \"../../../Typography/Typography\";\n\ntype Props = {\n  previousMonth: string;\n  nextMonth: string;\n  selectedDate: DateRange | undefined;\n  disableDateRangePickers: boolean;\n  setSelectedDate: React.Dispatch<React.SetStateAction<DateRange>>;\n  setFromDateText: React.Dispatch<React.SetStateAction<string>>;\n  setToDateText: React.Dispatch<React.SetStateAction<string>>;\n  setFromDateError: React.Dispatch<React.SetStateAction<string>>;\n  setToDateError: React.Dispatch<React.SetStateAction<string>>;\n};\n\nexport const DateTimePickerCalendarSection = ({\n  previousMonth,\n  nextMonth,\n  selectedDate,\n  disableDateRangePickers,\n  setSelectedDate,\n  setFromDateText,\n  setFromDateError,\n  setToDateError,\n  setToDateText\n}: Props) => {\n  const onDatePickerSelect = (date: Date | DateRange | undefined): void => {\n    if (date) {\n      setSelectedDate(date as DateRange);\n\n      const fromDate = (date as DateRange).from;\n      const toDate = (date as DateRange).to;\n\n      if (fromDate) {\n        setFromDateText(formatInputDate(fromDate));\n        setFromDateError(\"\");\n      }\n\n      if (toDate) {\n        setToDateText(formatInputDate(toDate));\n        setToDateError(\"\");\n      }\n    }\n  };\n  return (\n    <DatePicker\n      onSelect={onDatePickerSelect}\n      value={selectedDate}\n      disabled={disableDateRangePickers}\n      mode={\"range\"}\n      components={{\n        Nav: ({ onNextClick, onPreviousClick }) => (\n          <div className={classes[\"nav\"]}>\n            <IconButton\n              title={previousMonth}\n              onClick={onPreviousClick}\n              className={classes[\"prev-button\"]}\n              disabled={disableDateRangePickers}\n            >\n              <Icon size=\"0.75rem\" icon={Icons.ChevronLeft} />\n            </IconButton>\n            <IconButton\n              title={nextMonth}\n              onClick={onNextClick}\n              className={classes[\"next-button\"]}\n              disabled={disableDateRangePickers}\n            >\n              <Icon size=\"0.75rem\" icon={Icons.ChevronRight} />\n            </IconButton>\n          </div>\n        ),\n        MonthCaption: ({ calendarMonth }) => (\n          <Typography className={classes[\"month-caption\"]} variant=\"body\">\n            {getMonthName(calendarMonth.date)} {getYearFromDate(calendarMonth.date)}\n          </Typography>\n        )\n      }}\n      numberOfMonths={2}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAqCO,MAAM,gCAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACL,QAAA,qBAAqB,CAAC,SAA6C;AACvE,QAAI,MAAM;AACR,sBAAgB,IAAiB;AAEjC,YAAM,WAAY,KAAmB;AACrC,YAAM,SAAU,KAAmB;AAEnC,UAAI,UAAU;AACI,wBAAA,gBAAgB,QAAQ,CAAC;AACzC,yBAAiB,EAAE;AAAA,MAAA;AAGrB,UAAI,QAAQ;AACI,sBAAA,gBAAgB,MAAM,CAAC;AACrC,uBAAe,EAAE;AAAA,MAAA;AAAA,IACnB;AAAA,EAEJ;AAEE,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,MACN,YAAY;AAAA,QACV,KAAK,CAAC,EAAE,aAAa,gBACnB,MAAA,sBAAA,cAAC,OAAI,EAAA,WAAW,QAAQ,KAAK,EAC3B,GAAA,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,SAAS;AAAA,YACT,WAAW,QAAQ,aAAa;AAAA,YAChC,UAAU;AAAA,UAAA;AAAA,8CAET,MAAK,EAAA,MAAK,WAAU,MAAM,MAAM,YAAa,CAAA;AAAA,QAEhD,GAAA,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,SAAS;AAAA,YACT,WAAW,QAAQ,aAAa;AAAA,YAChC,UAAU;AAAA,UAAA;AAAA,8CAET,MAAK,EAAA,MAAK,WAAU,MAAM,MAAM,aAAc,CAAA;AAAA,QAAA,CAEnD;AAAA,QAEF,cAAc,CAAC,EAAE,cAAA,MACd,sBAAA,cAAA,YAAA,EAAW,WAAW,QAAQ,eAAe,GAAG,SAAQ,OAAA,GACtD,aAAa,cAAc,IAAI,GAAE,KAAE,gBAAgB,cAAc,IAAI,CACxE;AAAA,MAEJ;AAAA,MACA,gBAAgB;AAAA,IAAA;AAAA,EAClB;AAEJ;"}

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerInputSection.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../../Form/Wrapper/InputWrapper/InputWrapper.cjs.js"),t=require("./DateTimePicker.module.scss.cjs.js"),a=require("date-fns");exports.DateTimePickerInputSection=({from:o,to:s,dateInputPlaceholder:l,dateFormatError:p,toDateText:n,fromDateText:m,fromDateError:u,toDateError:c,setSelectedDate:d,setFromDateText:i,setToDateText:g,setFromDateError:f,setToDateError:D})=>{const y=e=>a.parse(e,"yyyy-MM-dd HH:mm:ss",new Date),h=/^(\d{4})-(0[1-9]|1[012])-(0[1-9]|[12]\d|3[01]) ([0-1]\d|2[0-3]):([0-5]\d):([0-5]\d)$/,P=(e,r)=>t=>{var a;a=t.target.value,h.test(a)?(r(t.target.value),e("")):e(p)},v=P(f,(e=>d((r=>({...r,from:y(e)}))))),T=P(D,(e=>d((r=>({from:null==r?void 0:r.from,to:y(e)})))));return e.createElement(e.Fragment,null,e.createElement(r.InputWrapper,{label:o,name:"fromDate",error:!!u,errorMessage:u,errorMessageProps:{className:t.default["error-message"]},helperProps:{style:{fontSize:"0.625rem"}},type:"text",value:m,onBlur:v,onChange:e=>i(e.target.value),inputProps:{style:{height:"2rem"},placeholder:l},className:t.default.input}),e.createElement(r.InputWrapper,{className:t.default.input,inputProps:{style:{height:"2rem"},placeholder:l},label:s,value:n,error:!!c,errorMessage:c,errorMessageProps:{className:t.default["error-message"]},helperProps:{style:{fontSize:"0.625rem"}},onChange:e=>g(e.target.value),onBlur:T,name:"toDate",type:"text"}))};
+//# sourceMappingURL=DateTimePickerInputSection.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerInputSection.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePickerInputSection.cjs.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerInputSection.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { Fragment } from \"react\";\nimport { InputWrapper } from \"../../../Form/Wrapper/InputWrapper/InputWrapper\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { parse } from \"date-fns\";\nimport { DateRange } from \"react-day-picker\";\n\nexport type Props = {\n  from: string;\n  to: string;\n  dateInputPlaceholder: string;\n  dateFormatError: string;\n  fromDateText: string;\n  toDateText: string;\n  fromDateError: string;\n  toDateError: string;\n  setSelectedDate: React.Dispatch<React.SetStateAction<DateRange>>;\n  setFromDateText: React.Dispatch<React.SetStateAction<string>>;\n  setToDateText: React.Dispatch<React.SetStateAction<string>>;\n  setFromDateError: React.Dispatch<React.SetStateAction<string>>;\n  setToDateError: React.Dispatch<React.SetStateAction<string>>;\n};\n\nexport const DateTimePickerInputSection = ({\n  from,\n  to,\n  dateInputPlaceholder,\n  dateFormatError,\n  toDateText,\n  fromDateText,\n  fromDateError,\n  toDateError,\n  setSelectedDate,\n  setFromDateText,\n  setToDateText,\n  setFromDateError,\n  setToDateError\n}: Props) => {\n  const dateParseTemplate = \"yyyy-MM-dd HH:mm:ss\";\n  const parseDate = (date: string) => {\n    const dateText = parse(date, dateParseTemplate, new Date());\n    return dateText;\n  };\n\n  const validationRegex =\n    /^(\\d{4})-(0[1-9]|1[012])-(0[1-9]|[12]\\d|3[01]) ([0-1]\\d|2[0-3]):([0-5]\\d):([0-5]\\d)$/;\n  const validateInput = (text: string) => validationRegex.test(text);\n\n  const onInputBlur =\n    (setError: (value: React.SetStateAction<string>) => void, setDate: (value: string) => void) =>\n    (e: React.FocusEvent<HTMLInputElement, Element>) => {\n      if (!validateInput(e.target.value)) {\n        setError(dateFormatError);\n        return;\n      }\n\n      setDate(e.target.value);\n      setError(\"\");\n    };\n\n  const setFromDate = (value: string) =>\n    setSelectedDate(prev => ({ ...prev, from: parseDate(value) }));\n\n  const setToDate = (value: string) =>\n    setSelectedDate(prev => ({ from: prev?.from, to: parseDate(value) }));\n\n  const onFromInputBlur = onInputBlur(setFromDateError, setFromDate);\n  const onToInputBlur = onInputBlur(setToDateError, setToDate);\n\n  return (\n    <Fragment>\n      <InputWrapper\n        label={from}\n        name=\"fromDate\"\n        error={!!fromDateError}\n        errorMessage={fromDateError}\n        errorMessageProps={{ className: classes[\"error-message\"] }}\n        helperProps={{\n          style: { fontSize: \"0.625rem\" }\n        }}\n        type=\"text\"\n        value={fromDateText}\n        onBlur={onFromInputBlur}\n        onChange={e => setFromDateText(e.target.value)}\n        inputProps={{ style: { height: \"2rem\" }, placeholder: dateInputPlaceholder }}\n        className={classes[\"input\"]}\n      />\n      <InputWrapper\n        className={classes[\"input\"]}\n        inputProps={{ style: { height: \"2rem\" }, placeholder: dateInputPlaceholder }}\n        label={to}\n        value={toDateText}\n        error={!!toDateError}\n        errorMessage={toDateError}\n        errorMessageProps={{ className: classes[\"error-message\"] }}\n        helperProps={{\n          style: { fontSize: \"0.625rem\" }\n        }}\n        onChange={e => setToDateText(e.target.value)}\n        onBlur={onToInputBlur}\n        name=\"toDate\"\n        type=\"text\"\n      />\n    </Fragment>\n  );\n};\n"],"names":["from","to","dateInputPlaceholder","dateFormatError","toDateText","fromDateText","fromDateError","toDateError","setSelectedDate","setFromDateText","setToDateText","setFromDateError","setToDateError","parseDate","date","parse","Date","validationRegex","onInputBlur","setError","setDate","e","text","target","value","test","onFromInputBlur","prev","onToInputBlur","Fragment","React","createElement","InputWrapper","label","name","error","errorMessage","errorMessageProps","className","classes","default","helperProps","style","fontSize","type","onBlur","onChange","inputProps","height","placeholder"],"mappings":"uRAsC0C,EACxCA,OACAC,KACAC,uBACAC,kBACAC,aACAC,eACAC,gBACAC,cACAC,kBACAC,kBACAC,gBACAC,mBACAC,qBAEA,MACMC,EAAaC,GACAC,EAAAA,MAAMD,EAFC,sBAEwB,IAAIE,MAIhDC,EACJ,uFAGIC,EACJ,CAACC,EAAyDC,IACzDC,IAJmB,IAACC,IAKAD,EAAEE,OAAOC,MALQP,EAAgBQ,KAAKH,IAUjDF,EAAAC,EAAEE,OAAOC,OACjBL,EAAS,KALPA,EAAShB,EAKA,EASTuB,EAAkBR,EAAYP,GANfa,GACnBhB,GAAyBmB,IAAA,IAAKA,EAAM3B,KAAMa,EAAUW,SAMhDI,EAAgBV,EAAYN,GAJfY,GACjBhB,GAAyBmB,IAAA,CAAE3B,KAAM,MAAA2B,OAAA,EAAAA,EAAM3B,KAAMC,GAAIY,EAAUW,SAK7D,uBACGK,EACCA,SAAA,KAAAC,EAAAC,cAACC,EAAAA,aAAA,CACCC,MAAOjC,EACPkC,KAAK,WACLC,QAAS7B,EACT8B,aAAc9B,EACd+B,kBAAmB,CAAEC,UAAWC,EAAAC,QAAQ,kBACxCC,YAAa,CACXC,MAAO,CAAEC,SAAU,aAErBC,KAAK,OACLpB,MAAOnB,EACPwC,OAAQnB,EACRoB,SAAUzB,GAAKZ,EAAgBY,EAAEE,OAAOC,OACxCuB,WAAY,CAAEL,MAAO,CAAEM,OAAQ,QAAUC,YAAa/C,GACtDoC,UAAWC,UAAe,QAE5BT,EAAAC,cAACC,EAAAA,aAAA,CACCM,UAAWC,UAAe,MAC1BQ,WAAY,CAAEL,MAAO,CAAEM,OAAQ,QAAUC,YAAa/C,GACtD+B,MAAOhC,EACPuB,MAAOpB,EACP+B,QAAS5B,EACT6B,aAAc7B,EACd8B,kBAAmB,CAAEC,UAAWC,EAAAC,QAAQ,kBACxCC,YAAa,CACXC,MAAO,CAAEC,SAAU,aAErBG,SAAUzB,GAAKX,EAAcW,EAAEE,OAAOC,OACtCqB,OAAQjB,EACRM,KAAK,SACLU,KAAK,SAET"}

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerInputSection.es.js

@@ -0,0 +1,80 @@
+import React, { Fragment } from "react";
+import { InputWrapper } from "../../../Form/Wrapper/InputWrapper/InputWrapper.es.js";
+import classes from "./DateTimePicker.module.scss.es.js";
+import { parse } from "date-fns";
+const DateTimePickerInputSection = ({
+  from,
+  to,
+  dateInputPlaceholder,
+  dateFormatError,
+  toDateText,
+  fromDateText,
+  fromDateError,
+  toDateError,
+  setSelectedDate,
+  setFromDateText,
+  setToDateText,
+  setFromDateError,
+  setToDateError
+}) => {
+  const dateParseTemplate = "yyyy-MM-dd HH:mm:ss";
+  const parseDate = (date) => {
+    const dateText = parse(date, dateParseTemplate, /* @__PURE__ */ new Date());
+    return dateText;
+  };
+  const validationRegex = /^(\d{4})-(0[1-9]|1[012])-(0[1-9]|[12]\d|3[01]) ([0-1]\d|2[0-3]):([0-5]\d):([0-5]\d)$/;
+  const validateInput = (text) => validationRegex.test(text);
+  const onInputBlur = (setError, setDate) => (e) => {
+    if (!validateInput(e.target.value)) {
+      setError(dateFormatError);
+      return;
+    }
+    setDate(e.target.value);
+    setError("");
+  };
+  const setFromDate = (value) => setSelectedDate((prev) => ({ ...prev, from: parseDate(value) }));
+  const setToDate = (value) => setSelectedDate((prev) => ({ from: prev == null ? void 0 : prev.from, to: parseDate(value) }));
+  const onFromInputBlur = onInputBlur(setFromDateError, setFromDate);
+  const onToInputBlur = onInputBlur(setToDateError, setToDate);
+  return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(
+    InputWrapper,
+    {
+      label: from,
+      name: "fromDate",
+      error: !!fromDateError,
+      errorMessage: fromDateError,
+      errorMessageProps: { className: classes["error-message"] },
+      helperProps: {
+        style: { fontSize: "0.625rem" }
+      },
+      type: "text",
+      value: fromDateText,
+      onBlur: onFromInputBlur,
+      onChange: (e) => setFromDateText(e.target.value),
+      inputProps: { style: { height: "2rem" }, placeholder: dateInputPlaceholder },
+      className: classes["input"]
+    }
+  ), /* @__PURE__ */ React.createElement(
+    InputWrapper,
+    {
+      className: classes["input"],
+      inputProps: { style: { height: "2rem" }, placeholder: dateInputPlaceholder },
+      label: to,
+      value: toDateText,
+      error: !!toDateError,
+      errorMessage: toDateError,
+      errorMessageProps: { className: classes["error-message"] },
+      helperProps: {
+        style: { fontSize: "0.625rem" }
+      },
+      onChange: (e) => setToDateText(e.target.value),
+      onBlur: onToInputBlur,
+      name: "toDate",
+      type: "text"
+    }
+  ));
+};
+export {
+  DateTimePickerInputSection
+};
+//# sourceMappingURL=DateTimePickerInputSection.es.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerInputSection.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePickerInputSection.es.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePickerInputSection.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { Fragment } from \"react\";\nimport { InputWrapper } from \"../../../Form/Wrapper/InputWrapper/InputWrapper\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport { parse } from \"date-fns\";\nimport { DateRange } from \"react-day-picker\";\n\nexport type Props = {\n  from: string;\n  to: string;\n  dateInputPlaceholder: string;\n  dateFormatError: string;\n  fromDateText: string;\n  toDateText: string;\n  fromDateError: string;\n  toDateError: string;\n  setSelectedDate: React.Dispatch<React.SetStateAction<DateRange>>;\n  setFromDateText: React.Dispatch<React.SetStateAction<string>>;\n  setToDateText: React.Dispatch<React.SetStateAction<string>>;\n  setFromDateError: React.Dispatch<React.SetStateAction<string>>;\n  setToDateError: React.Dispatch<React.SetStateAction<string>>;\n};\n\nexport const DateTimePickerInputSection = ({\n  from,\n  to,\n  dateInputPlaceholder,\n  dateFormatError,\n  toDateText,\n  fromDateText,\n  fromDateError,\n  toDateError,\n  setSelectedDate,\n  setFromDateText,\n  setToDateText,\n  setFromDateError,\n  setToDateError\n}: Props) => {\n  const dateParseTemplate = \"yyyy-MM-dd HH:mm:ss\";\n  const parseDate = (date: string) => {\n    const dateText = parse(date, dateParseTemplate, new Date());\n    return dateText;\n  };\n\n  const validationRegex =\n    /^(\\d{4})-(0[1-9]|1[012])-(0[1-9]|[12]\\d|3[01]) ([0-1]\\d|2[0-3]):([0-5]\\d):([0-5]\\d)$/;\n  const validateInput = (text: string) => validationRegex.test(text);\n\n  const onInputBlur =\n    (setError: (value: React.SetStateAction<string>) => void, setDate: (value: string) => void) =>\n    (e: React.FocusEvent<HTMLInputElement, Element>) => {\n      if (!validateInput(e.target.value)) {\n        setError(dateFormatError);\n        return;\n      }\n\n      setDate(e.target.value);\n      setError(\"\");\n    };\n\n  const setFromDate = (value: string) =>\n    setSelectedDate(prev => ({ ...prev, from: parseDate(value) }));\n\n  const setToDate = (value: string) =>\n    setSelectedDate(prev => ({ from: prev?.from, to: parseDate(value) }));\n\n  const onFromInputBlur = onInputBlur(setFromDateError, setFromDate);\n  const onToInputBlur = onInputBlur(setToDateError, setToDate);\n\n  return (\n    <Fragment>\n      <InputWrapper\n        label={from}\n        name=\"fromDate\"\n        error={!!fromDateError}\n        errorMessage={fromDateError}\n        errorMessageProps={{ className: classes[\"error-message\"] }}\n        helperProps={{\n          style: { fontSize: \"0.625rem\" }\n        }}\n        type=\"text\"\n        value={fromDateText}\n        onBlur={onFromInputBlur}\n        onChange={e => setFromDateText(e.target.value)}\n        inputProps={{ style: { height: \"2rem\" }, placeholder: dateInputPlaceholder }}\n        className={classes[\"input\"]}\n      />\n      <InputWrapper\n        className={classes[\"input\"]}\n        inputProps={{ style: { height: \"2rem\" }, placeholder: dateInputPlaceholder }}\n        label={to}\n        value={toDateText}\n        error={!!toDateError}\n        errorMessage={toDateError}\n        errorMessageProps={{ className: classes[\"error-message\"] }}\n        helperProps={{\n          style: { fontSize: \"0.625rem\" }\n        }}\n        onChange={e => setToDateText(e.target.value)}\n        onBlur={onToInputBlur}\n        name=\"toDate\"\n        type=\"text\"\n      />\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":";;;;AAsCO,MAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,oBAAoB;AACpB,QAAA,YAAY,CAAC,SAAiB;AAClC,UAAM,WAAW,MAAM,MAAM,mBAAmB,oBAAI,MAAM;AACnD,WAAA;AAAA,EACT;AAEA,QAAM,kBACJ;AACF,QAAM,gBAAgB,CAAC,SAAiB,gBAAgB,KAAK,IAAI;AAEjE,QAAM,cACJ,CAAC,UAAyD,YAC1D,CAAC,MAAmD;AAClD,QAAI,CAAC,cAAc,EAAE,OAAO,KAAK,GAAG;AAClC,eAAS,eAAe;AACxB;AAAA,IAAA;AAGM,YAAA,EAAE,OAAO,KAAK;AACtB,aAAS,EAAE;AAAA,EACb;AAEF,QAAM,cAAc,CAAC,UACnB,gBAAgB,CAAS,UAAA,EAAE,GAAG,MAAM,MAAM,UAAU,KAAK,EAAI,EAAA;AAE/D,QAAM,YAAY,CAAC,UACjB,gBAAgB,CAAS,UAAA,EAAE,MAAM,6BAAM,MAAM,IAAI,UAAU,KAAK,EAAI,EAAA;AAEhE,QAAA,kBAAkB,YAAY,kBAAkB,WAAW;AAC3D,QAAA,gBAAgB,YAAY,gBAAgB,SAAS;AAE3D,6CACG,UACC,MAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAO,CAAC,CAAC;AAAA,MACT,cAAc;AAAA,MACd,mBAAmB,EAAE,WAAW,QAAQ,eAAe,EAAE;AAAA,MACzD,aAAa;AAAA,QACX,OAAO,EAAE,UAAU,WAAW;AAAA,MAChC;AAAA,MACA,MAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU,CAAA,MAAK,gBAAgB,EAAE,OAAO,KAAK;AAAA,MAC7C,YAAY,EAAE,OAAO,EAAE,QAAQ,OAAO,GAAG,aAAa,qBAAqB;AAAA,MAC3E,WAAW,QAAQ,OAAO;AAAA,IAAA;AAAA,EAE5B,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ,OAAO;AAAA,MAC1B,YAAY,EAAE,OAAO,EAAE,QAAQ,OAAO,GAAG,aAAa,qBAAqB;AAAA,MAC3E,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,cAAc;AAAA,MACd,mBAAmB,EAAE,WAAW,QAAQ,eAAe,EAAE;AAAA,MACzD,aAAa;AAAA,QACX,OAAO,EAAE,UAAU,WAAW;AAAA,MAChC;AAAA,MACA,UAAU,CAAA,MAAK,cAAc,EAAE,OAAO,KAAK;AAAA,MAC3C,QAAQ;AAAA,MACR,MAAK;AAAA,MACL,MAAK;AAAA,IAAA;AAAA,EAAA,CAET;AAEJ;"}

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimeService.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("date-fns");exports.CUSTOM_DATE_RANGE="CUSTOM",exports.FIVE_MINUTES="FIVE_MINUTES",exports.ONE_HOUR="ONE_HOUR",exports.ONE_MINUTE="ONE_MINUTE",exports.THIRTY_SECONDS="THIRTY_SECONDS",exports.TWENTY_FOUR_HOURS="TWENTY_FOUR_HOURS",exports.formatInputDate=e=>t.format(e,"yyyy-MM-dd HH:mm:ss"),exports.getMonthName=(e,o)=>t.format(e,"MMMM",{locale:o}),exports.getYearFromDate=e=>t.format(e,"yyyy");
+//# sourceMappingURL=DateTimeService.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimeService.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeService.cjs.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimeService.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { format, Locale } from \"date-fns\";\n\nexport const THIRTY_SECONDS = \"THIRTY_SECONDS\";\nexport const ONE_MINUTE = \"ONE_MINUTE\";\nexport const FIVE_MINUTES = \"FIVE_MINUTES\";\nexport const ONE_HOUR = \"ONE_HOUR\";\nexport const TWENTY_FOUR_HOURS = \"TWENTY_FOUR_HOURS\";\nexport const CUSTOM_DATE_RANGE = \"CUSTOM\";\n\nexport const getMonthName = (date: Date, locale?: Locale) => format(date, \"MMMM\", { locale });\n\nexport const getYearFromDate = (date: Date) => format(date, \"yyyy\");\n\nexport const formatInputDate = (date: Date) => format(date, \"yyyy-MM-dd HH:mm:ss\");\n"],"names":["date","format","locale"],"mappings":"sIAuBiC,8BAHL,gCACJ,8BAFE,oCADI,2CAIG,4CAODA,GAAeC,EAAAA,OAAOD,EAAM,4CAJhC,CAACA,EAAYE,IAAoBD,SAAOD,EAAM,OAAQ,CAAEE,mCAEpDF,GAAeC,EAAAA,OAAOD,EAAM"}

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimeService.es.js

@@ -0,0 +1,22 @@
+import { format } from "date-fns";
+const THIRTY_SECONDS = "THIRTY_SECONDS";
+const ONE_MINUTE = "ONE_MINUTE";
+const FIVE_MINUTES = "FIVE_MINUTES";
+const ONE_HOUR = "ONE_HOUR";
+const TWENTY_FOUR_HOURS = "TWENTY_FOUR_HOURS";
+const CUSTOM_DATE_RANGE = "CUSTOM";
+const getMonthName = (date, locale) => format(date, "MMMM", { locale });
+const getYearFromDate = (date) => format(date, "yyyy");
+const formatInputDate = (date) => format(date, "yyyy-MM-dd HH:mm:ss");
+export {
+  CUSTOM_DATE_RANGE,
+  FIVE_MINUTES,
+  ONE_HOUR,
+  ONE_MINUTE,
+  THIRTY_SECONDS,
+  TWENTY_FOUR_HOURS,
+  formatInputDate,
+  getMonthName,
+  getYearFromDate
+};
+//# sourceMappingURL=DateTimeService.es.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/DateTimeService.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeService.es.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimeService.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { format, Locale } from \"date-fns\";\n\nexport const THIRTY_SECONDS = \"THIRTY_SECONDS\";\nexport const ONE_MINUTE = \"ONE_MINUTE\";\nexport const FIVE_MINUTES = \"FIVE_MINUTES\";\nexport const ONE_HOUR = \"ONE_HOUR\";\nexport const TWENTY_FOUR_HOURS = \"TWENTY_FOUR_HOURS\";\nexport const CUSTOM_DATE_RANGE = \"CUSTOM\";\n\nexport const getMonthName = (date: Date, locale?: Locale) => format(date, \"MMMM\", { locale });\n\nexport const getYearFromDate = (date: Date) => format(date, \"yyyy\");\n\nexport const formatInputDate = (date: Date) => format(date, \"yyyy-MM-dd HH:mm:ss\");\n"],"names":[],"mappings":";AAkBO,MAAM,iBAAiB;AACvB,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,WAAW;AACjB,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAEpB,MAAA,eAAe,CAAC,MAAY,WAAoB,OAAO,MAAM,QAAQ,EAAE,OAAQ,CAAA;AAErF,MAAM,kBAAkB,CAAC,SAAe,OAAO,MAAM,MAAM;AAE3D,MAAM,kBAAkB,CAAC,SAAe,OAAO,MAAM,qBAAqB;"}

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/SideMenu.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./DateTimePicker.module.scss.cjs.js"),s=require("../../../ContextMenu/ContextMenuItem.module.scss.cjs.js");exports.SideMenu=({sideMenuItems:m,selectedItemId:i,onItemSelect:l})=>e.createElement("ul",{className:t.default["aside-menu"]},m.map((m=>e.createElement("li",{key:m.id,role:"none",className:`${s.default["context-menu-item"]} ${t.default["aside-menu-item"]}`},e.createElement("button",{role:"menuitem",style:{height:"2rem"},className:i===m.id?s.default.active:void 0,onClick:()=>l(m.id)},m.name)))));
+//# sourceMappingURL=SideMenu.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/SideMenu.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideMenu.cjs.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/SideMenu.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React from \"react\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport contextMenuItemClasses from \"../../../ContextMenu/ContextMenuItem.module.scss\";\nimport { SideMenuItem } from \"./DateTimePicker\";\nimport { DateTimeFilterType } from \"../DataGridFilters.interfaces\";\n\ntype Props = {\n  sideMenuItems: SideMenuItem[];\n  selectedItemId: string;\n  onItemSelect: (id: DateTimeFilterType) => void;\n};\n\nexport const SideMenu = ({ sideMenuItems, selectedItemId, onItemSelect }: Props) => {\n  return (\n    <ul className={classes[\"aside-menu\"]}>\n      {sideMenuItems.map(item => (\n        <li\n          key={item.id}\n          role=\"none\"\n          className={`${contextMenuItemClasses[\"context-menu-item\"]} ${classes[\"aside-menu-item\"]}`}\n        >\n          <button\n            role=\"menuitem\"\n            style={{ height: \"2rem\" }}\n            className={selectedItemId === item.id ? contextMenuItemClasses[\"active\"] : undefined}\n            onClick={() => onItemSelect(item.id)}\n          >\n            {item.name}\n          </button>\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"names":["sideMenuItems","selectedItemId","onItemSelect","React","createElement","className","classes","default","map","item","key","id","role","contextMenuItemClasses","style","height","onClick","name"],"mappings":"gPA4BwB,EAAGA,gBAAeC,iBAAgBC,kBAEtDC,EAAAC,cAAC,MAAGC,UAAWC,EAAAC,QAAQ,eACpBP,EAAcQ,KACbC,GAAAN,EAAAC,cAAC,KAAA,CACCM,IAAKD,EAAKE,GACVC,KAAK,OACLP,UAAW,GAAGQ,UAAuB,wBAAwBP,EAAAA,QAAQ,sBAErEH,EAAAC,cAAC,SAAA,CACCQ,KAAK,WACLE,MAAO,CAAEC,OAAQ,QACjBV,UAAWJ,IAAmBQ,EAAKE,GAAKE,EAAAN,QAA+B,YAAI,EAC3ES,QAAS,IAAMd,EAAaO,EAAKE,KAEhCF,EAAKQ"}

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/SideMenu.es.js

@@ -0,0 +1,27 @@
+import React from "react";
+import classes from "./DateTimePicker.module.scss.es.js";
+import contextMenuItemClasses from "../../../ContextMenu/ContextMenuItem.module.scss.es.js";
+const SideMenu = ({ sideMenuItems, selectedItemId, onItemSelect }) => {
+  return /* @__PURE__ */ React.createElement("ul", { className: classes["aside-menu"] }, sideMenuItems.map((item) => /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      key: item.id,
+      role: "none",
+      className: `${contextMenuItemClasses["context-menu-item"]} ${classes["aside-menu-item"]}`
+    },
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        role: "menuitem",
+        style: { height: "2rem" },
+        className: selectedItemId === item.id ? contextMenuItemClasses["active"] : void 0,
+        onClick: () => onItemSelect(item.id)
+      },
+      item.name
+    )
+  )));
+};
+export {
+  SideMenu
+};
+//# sourceMappingURL=SideMenu.es.js.map

package/dist/components/DataGrid/DataGridFilters/DateTimePicker/SideMenu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideMenu.es.js","sources":["../../../../../src/components/DataGrid/DataGridFilters/DateTimePicker/SideMenu.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React from \"react\";\nimport classes from \"./DateTimePicker.module.scss\";\nimport contextMenuItemClasses from \"../../../ContextMenu/ContextMenuItem.module.scss\";\nimport { SideMenuItem } from \"./DateTimePicker\";\nimport { DateTimeFilterType } from \"../DataGridFilters.interfaces\";\n\ntype Props = {\n  sideMenuItems: SideMenuItem[];\n  selectedItemId: string;\n  onItemSelect: (id: DateTimeFilterType) => void;\n};\n\nexport const SideMenu = ({ sideMenuItems, selectedItemId, onItemSelect }: Props) => {\n  return (\n    <ul className={classes[\"aside-menu\"]}>\n      {sideMenuItems.map(item => (\n        <li\n          key={item.id}\n          role=\"none\"\n          className={`${contextMenuItemClasses[\"context-menu-item\"]} ${classes[\"aside-menu-item\"]}`}\n        >\n          <button\n            role=\"menuitem\"\n            style={{ height: \"2rem\" }}\n            className={selectedItemId === item.id ? contextMenuItemClasses[\"active\"] : undefined}\n            onClick={() => onItemSelect(item.id)}\n          >\n            {item.name}\n          </button>\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"names":[],"mappings":";;;AA4BO,MAAM,WAAW,CAAC,EAAE,eAAe,gBAAgB,mBAA0B;AAEhF,SAAA,sBAAA,cAAC,QAAG,WAAW,QAAQ,YAAY,EAChC,GAAA,cAAc,IAAI,CACjB,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,KAAK;AAAA,MACV,MAAK;AAAA,MACL,WAAW,GAAG,uBAAuB,mBAAmB,CAAC,IAAI,QAAQ,iBAAiB,CAAC;AAAA,IAAA;AAAA,IAEvF,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,QAAQ,OAAO;AAAA,QACxB,WAAW,mBAAmB,KAAK,KAAK,uBAAuB,QAAQ,IAAI;AAAA,QAC3E,SAAS,MAAM,aAAa,KAAK,EAAE;AAAA,MAAA;AAAA,MAElC,KAAK;AAAA,IAAA;AAAA,EACR,CAEH,CACH;AAEJ;"}

package/dist/components/DataGrid/DataGridFilters/FilterKeyMapper.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class e{constructor(){this.columnKvPairs=new Map}setColumnKvPairs(e,t){this.columnKvPairs.set(e,t)}getValues(e){return this.getKvPairs(e).map((e=>e.value))}getKeysForValues(e,t){const r=this.getKvPairs(e);return t.map((t=>{const n=null==r?void 0:r.find((e=>e.value===t));if(null==n)throw new Error(`Column '${e}' in FilterKeyMapper does not contain value '${t}'`);return n.key}))}getKvPairs(t){const r=this.columnKvPairs.get(t);if(null==r)throw new Error(`Column '${t}' not found in ${e.name}`);return r}}exports.FilterKeyMapper=e;
+//# sourceMappingURL=FilterKeyMapper.cjs.js.map

package/dist/components/DataGrid/DataGridFilters/FilterKeyMapper.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterKeyMapper.cjs.js","sources":["../../../../src/components/DataGrid/DataGridFilters/FilterKeyMapper.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { KeyValuePair } from \"./DataGridFilters.interfaces\";\n\nexport class FilterKeyMapper {\n  columnKvPairs = new Map<string, { key: string; value: string }[]>();\n\n  setColumnKvPairs(columnName: string, kvPairs: { key: string; value: string }[]) {\n    this.columnKvPairs.set(columnName, kvPairs);\n  }\n\n  getValues(columnName: string): string[] {\n    return this.getKvPairs(columnName).map(kv => kv.value);\n  }\n\n  getKeysForValues(columnName: string, values: string[]): string[] {\n    const kvPairs = this.getKvPairs(columnName);\n    return values.map(v => {\n      const kv = kvPairs?.find(kv => kv.value === v);\n      if (kv == undefined) {\n        throw new Error(`Column '${columnName}' in FilterKeyMapper does not contain value '${v}'`);\n      }\n      return kv.key;\n    });\n  }\n\n  getKvPairs(columnName: string): KeyValuePair[] {\n    const kvPairs = this.columnKvPairs.get(columnName);\n    if (kvPairs == undefined) {\n      throw new Error(`Column '${columnName}' not found in ${FilterKeyMapper.name}`);\n    }\n    return kvPairs;\n  }\n}\n"],"names":["FilterKeyMapper","constructor","this","columnKvPairs","Map","setColumnKvPairs","columnName","kvPairs","set","getValues","getKvPairs","map","kv","value","getKeysForValues","values","v","find","Error","key","get","name"],"mappings":"gFAkBO,MAAMA,EAAN,WAAAC,GACLC,KAAAC,kBAAoBC,GAA8C,CAElE,gBAAAC,CAAiBC,EAAoBC,GAC9BL,KAAAC,cAAcK,IAAIF,EAAYC,EAAO,CAG5C,SAAAE,CAAUH,GACD,OAAAJ,KAAKQ,WAAWJ,GAAYK,KAAIC,GAAMA,EAAGC,OAAK,CAGvD,gBAAAC,CAAiBR,EAAoBS,GAC7B,MAAAR,EAAUL,KAAKQ,WAAWJ,GACzB,OAAAS,EAAOJ,KAASK,IACrB,MAAMJ,EAAc,MAATL,OAAS,EAAAA,EAAAU,MAAKL,GAAMA,EAAGC,QAAUG,IAC5C,GAAU,MAANJ,EACF,MAAM,IAAIM,MAAM,WAAWZ,iDAA0DU,MAEvF,OAAOJ,EAAGO,GAAA,GACX,CAGH,UAAAT,CAAWJ,GACT,MAAMC,EAAUL,KAAKC,cAAciB,IAAId,GACvC,GAAe,MAAXC,EACF,MAAM,IAAIW,MAAM,WAAWZ,mBAA4BN,EAAgBqB,QAElE,OAAAd,CAAA"}