@luscii-healthtech/web-ui 23.1.2 → 23.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/DatepickerV2/Datepicker.d.ts +58 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.development.js +64 -5
  4. package/dist/index.development.js.map +1 -1
  5. package/dist/index.js +1 -1
  6. package/dist/index.js.map +1 -1
  7. package/dist/web-ui.esm.js +1 -1
  8. package/dist/web-ui.esm.js.map +1 -1
  9. package/package.json +3 -1
package/dist/components/DatepickerV2/Datepicker.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ import React, { Component } from "react";
2
+ import { type Locale } from "date-fns";
3
+ import "react-datepicker-v2/dist/react-datepicker.min.css";
4
+ import "../Datepicker/Datepicker.scss";
5
+ export declare const LOCALE_MAP: Record<string, Locale>;
6
+ type Props = {
7
+ /**
8
+ * The locale determines the language and formatting of the dates
9
+ * shown in this component. E.g. for "nl-NL" the date will be
10
+ * shown as "dd-mm-yyyy", while for "en-GB" it shows as "dd/mm/yyyy".
11
+ *
12
+ * @default "en-GB"
13
+ */
14
+ locale?: keyof typeof LOCALE_MAP;
15
+ className?: string;
16
+ selected?: Date;
17
+ hasCloseButton?: boolean;
18
+ closeButtonText?: string;
19
+ onChange?: (date: Date) => void;
20
+ /**
21
+ * @default true
22
+ */
23
+ showMonthDropdown?: boolean;
24
+ /**
25
+ * @default true
26
+ */
27
+ showYearDropdown?: boolean;
28
+ minDate?: Date;
29
+ maxDate?: Date;
30
+ isDisabled?: boolean;
31
+ /**
32
+ * When set to `true`, if e.g. 10 January 2023 is selected and the user
33
+ * changes to a different month or year, the 10th will still be selected.
34
+ * When set to `false`, the date that the user has selected will not change
35
+ * until they select a new date.
36
+ *
37
+ * @default true
38
+ */
39
+ adjustDateOnChange?: boolean;
40
+ /**
41
+ * @default false
42
+ */
43
+ formatDateWithTime?: boolean;
44
+ shouldCloseOnSelect?: boolean;
45
+ /**
46
+ * @default false
47
+ */
48
+ allowSameDay?: boolean;
49
+ };
50
+ export declare class Datepicker extends Component<Props> {
51
+ componentDidMount(): void;
52
+ componentDidUpdate(prevProps: Props): void;
53
+ handleCloseButtonClick: (event: any) => void;
54
+ private datePickerRef;
55
+ getDateFormat: () => "Pp" | "P";
56
+ render(): React.JSX.Element;
57
+ }
58
+ export {};
package/dist/index.d.ts CHANGED
@@ -28,6 +28,7 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
28
28
  export { ConfirmationDialog } from "./components/ConfirmationDialog/ConfirmationDialog";
29
29
  export type { ConfirmationDialogChoice, ConfirmationDialogProps, ConfirmationDialogTitleProps, } from "./components/ConfirmationDialog/types/ConfirmationDialog.types";
30
30
  export { default as DatePicker } from "./components/Datepicker/Datepicker";
31
+ export { Datepicker as DatePickerV2 } from "./components/DatepickerV2/Datepicker";
31
32
  export { default as Dropdown } from "./components/Dropdown/Dropdown";
32
33
  export { EmptyListMessage } from "./components/EmptyListMessage/EmptyListMessage";
33
34
  export { InfoField } from "./components/InfoField/InfoField";
package/dist/index.development.js CHANGED
@@ -17,6 +17,13 @@ var ReactDatePicker = require('react-datepicker');
17
17
  var PropTypes = require('prop-types');
18
18
  var moment = require('moment');
19
19
  require('react-datepicker/dist/react-datepicker.css');
20
+ var ReactDatePicker$1 = require('react-datepicker-v2');
21
+ var enGB = require('date-fns/locale/en-GB');
22
+ var nl = require('date-fns/locale/nl');
23
+ var de = require('date-fns/locale/de');
24
+ var fr = require('date-fns/locale/fr');
25
+ var pt = require('date-fns/locale/pt');
26
+ require('react-datepicker-v2/dist/react-datepicker.min.css');
20
27
  var ClipboardJS = require('clipboard');
21
28
  var ReactSelect = require('react-select');
22
29
  var groupBy = require('lodash/groupBy');
@@ -58,6 +65,7 @@ var Glider__default = /*#__PURE__*/_interopDefault(Glider);
58
65
  var ReactDatePicker__default = /*#__PURE__*/_interopDefault(ReactDatePicker);
59
66
  var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
60
67
  var moment__default = /*#__PURE__*/_interopDefault(moment);
68
+ var ReactDatePicker__default$1 = /*#__PURE__*/_interopDefault(ReactDatePicker$1);
61
69
  var ClipboardJS__default = /*#__PURE__*/_interopDefault(ClipboardJS);
62
70
  var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
63
71
  var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
@@ -2622,7 +2630,7 @@ const ConfirmationDialog = (_a) => {
2622
2630
  );
2623
2631
  };
2624
2632
 
2625
- var css_248z$a = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker {\n width: 182px;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n background-color: #ffffff;\n outline: none;\n padding: 12px 12px 11px 12px;\n}\n.cweb-datepicker input.cweb-datepicker {\n font-size: 14px;\n}\n.cweb-datepicker::placeholder {\n color: #64748b;\n}\n.cweb-datepicker:-ms-input-placeholder {\n color: #64748b !important;\n}\n.cweb-datepicker::-ms-input-placeholder {\n color: #64748b;\n}\n\n.react-datepicker-popper {\n z-index: 5;\n}\n.react-datepicker-popper[data-placement^=bottom] {\n margin-top: 4px;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n border-bottom-color: #ffffff;\n margin-top: -4px;\n}\n.react-datepicker-popper[data-placement^=top] {\n margin-bottom: 4px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n border-top-color: #ffffff;\n margin-bottom: -4px;\n}\n\n.cweb-datepicker-calendar {\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 0;\n border: 1px solid #cccccc;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cweb-datepicker-calendar {\n box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n }\n}\n.cweb-datepicker-calendar .react-datepicker__triangle {\n left: 10px;\n border: 6px solid transparent;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation {\n top: 19px;\n width: 19px;\n height: 10px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n border: 0;\n transform: rotate(90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n border: 0;\n transform: rotate(-90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n width: auto;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n overflow-x: hidden;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: normal;\n line-height: 19px;\n color: #1e293b;\n margin: 0;\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n height: 40px !important;\n padding: 0 !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n color: #ffffff;\n background-color: #1e40af !important;\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n background-color: #1e40af !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n right: 0;\n left: initial;\n top: initial;\n border-style: solid;\n border-width: 6px 6px 6px 0;\n border-color: transparent #ffffff transparent transparent;\n transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__header {\n padding-top: 0;\n border: none;\n background-color: #ffffff;\n font-size: 14px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 19px;\n color: #2d2d2d;\n margin: 0;\n padding-top: 16px;\n padding-bottom: 16px;\n text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n margin-bottom: 15px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: normal;\n line-height: 19px;\n color: #1e293b;\n margin: 0;\n height: 44px;\n padding-left: 12px;\n border-radius: 4px;\n background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n text-transform: capitalize;\n -webkit-appearance: none;\n -moz-appearance: none;\n border: 1px solid #cccccc;\n transition: all 0.4s ease;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n color: #1e40af;\n border-color: #1e40af;\n cursor: pointer;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n min-width: 172px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n min-width: 107px;\n}\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n height: 52px;\n padding: 0;\n background-color: #f3f3f3;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n margin: 0.4rem;\n}\n.cweb-datepicker-calendar .react-datepicker__month {\n padding-bottom: 8px;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__week {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name,\n.cweb-datepicker-calendar .react-datepicker__day {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: normal;\n line-height: 19px;\n color: #1e293b;\n margin: 0;\n width: 41px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name {\n height: 19px;\n text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__day {\n height: 30px;\n border-radius: 4px;\n transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n background-color: #ffffff;\n color: #1e40af;\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: #1e40af;\n left: 0;\n right: 0;\n bottom: 2px;\n margin: 0 auto;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n font-weight: bold;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n background-color: #f8fafc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n color: #ffffff;\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n color: #ffffff;\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n content: \"\";\n position: absolute;\n top: -3px;\n left: 0;\n bottom: initial;\n right: initial;\n border-style: solid;\n border-width: 6px 6px 6px 0;\n border-color: transparent #ffffff transparent transparent;\n transform: rotate(45deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n right: 0;\n left: initial;\n top: initial;\n border-style: solid;\n border-width: 6px 6px 6px 0;\n border-color: transparent #ffffff transparent transparent;\n transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n color: #cccccc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n color: #cccccc;\n}";
2633
+ var css_248z$a = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker {\n width: 182px;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n background-color: #ffffff;\n outline: none;\n padding: 12px 12px 11px 12px;\n}\n.cweb-datepicker input.cweb-datepicker {\n font-size: 14px;\n}\n.cweb-datepicker::placeholder {\n color: #64748b;\n}\n.cweb-datepicker:-ms-input-placeholder {\n color: #64748b !important;\n}\n.cweb-datepicker::-ms-input-placeholder {\n color: #64748b;\n}\n\n.react-datepicker-popper {\n z-index: 5;\n}\n.react-datepicker-popper[data-placement^=bottom] {\n margin-top: 4px;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle.react-datepicker__triangle {\n border-bottom-color: #ffffff;\n margin-top: -4px;\n}\n.react-datepicker-popper[data-placement^=top] {\n margin-bottom: 4px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle.react-datepicker__triangle {\n border-top-color: #ffffff;\n margin-bottom: -4px;\n}\n\n.cweb-datepicker-calendar {\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n padding: 0;\n border: 1px solid #cccccc;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cweb-datepicker-calendar {\n box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n }\n}\n.cweb-datepicker-calendar .react-datepicker__triangle {\n left: 10px;\n border: 6px solid transparent;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation {\n top: 19px;\n width: 19px;\n height: 10px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n border: 0;\n transform: rotate(90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n border: 0;\n transform: rotate(-90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n width: auto;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n overflow-x: hidden;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: normal;\n line-height: 19px;\n color: #1e293b;\n margin: 0;\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n height: 40px !important;\n padding: 0 !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n color: #ffffff;\n background-color: #1e40af !important;\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n background-color: #1e40af !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n right: 0;\n left: initial;\n top: initial;\n border-style: solid;\n border-width: 6px 6px 6px 0;\n border-color: transparent #ffffff transparent transparent;\n transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__header {\n padding-top: 0;\n border: none;\n background-color: #ffffff;\n font-size: 14px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 19px;\n color: #2d2d2d;\n margin: 0;\n padding-top: 16px;\n padding-bottom: 16px;\n text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n margin-bottom: 15px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: normal;\n line-height: 19px;\n color: #1e293b;\n margin: 0;\n height: 44px;\n padding-left: 12px;\n border-radius: 4px;\n background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n text-transform: capitalize;\n -webkit-appearance: none;\n -moz-appearance: none;\n border: 1px solid #cccccc;\n transition: all 0.4s ease;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n color: #1e40af;\n border-color: #1e40af;\n cursor: pointer;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n min-width: 172px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n min-width: 107px;\n}\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n height: 52px;\n padding: 0;\n background-color: #f3f3f3;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n margin: 0.4rem;\n}\n.cweb-datepicker-calendar .react-datepicker__month {\n padding-bottom: 8px;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__week {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name,\n.cweb-datepicker-calendar .react-datepicker__day {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: normal;\n line-height: 19px;\n color: #1e293b;\n margin: 0;\n width: 41px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name {\n height: 19px;\n text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__day {\n height: 30px;\n border-radius: 4px;\n transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n background-color: #ffffff;\n color: #1e40af;\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: #1e40af;\n left: 0;\n right: 0;\n bottom: 2px;\n margin: 0 auto;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n font-weight: bold;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n background-color: #f8fafc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n color: #ffffff;\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n color: #ffffff;\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n content: \"\";\n position: absolute;\n top: -3px;\n left: 0;\n bottom: initial;\n right: initial;\n border-style: solid;\n border-width: 6px 6px 6px 0;\n border-color: transparent #ffffff transparent transparent;\n transform: rotate(45deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n right: 0;\n left: initial;\n top: initial;\n border-style: solid;\n border-width: 6px 6px 6px 0;\n border-color: transparent #ffffff transparent transparent;\n transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n color: #cccccc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n color: #cccccc;\n}";
2626
2634
  styleInject(css_248z$a);
2627
2635
 
2628
2636
  var __defProp$5 = Object.defineProperty;
@@ -2660,7 +2668,7 @@ var __publicField$3 = (obj, key, value) => {
2660
2668
  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
2661
2669
  return value;
2662
2670
  };
2663
- class Datepicker extends React.Component {
2671
+ let Datepicker$1 = class Datepicker extends React.Component {
2664
2672
  constructor() {
2665
2673
  super(...arguments);
2666
2674
  __publicField$3(this, "handleCloseButtonClick", (event) => {
@@ -2734,8 +2742,8 @@ class Datepicker extends React.Component {
2734
2742
  /* @__PURE__ */ React__namespace.default.createElement("div", { className: "ui-m-2" }, hasCloseButton ? /* @__PURE__ */ React__namespace.default.createElement(PrimaryButton, { onClick: this.handleCloseButtonClick }, getCloseButtonText()) : null)
2735
2743
  );
2736
2744
  }
2737
- }
2738
- Datepicker.propTypes = {
2745
+ };
2746
+ Datepicker$1.propTypes = {
2739
2747
  className: PropTypes__default.default.string,
2740
2748
  selected: PropTypes__default.default.object,
2741
2749
  hasCloseButton: PropTypes__default.default.bool,
@@ -2748,6 +2756,56 @@ Datepicker.propTypes = {
2748
2756
  isDisabled: PropTypes__default.default.bool
2749
2757
  };
2750
2758
 
2759
+ const LOCALE_MAP = {
2760
+ "en-GB": enGB.enGB,
2761
+ "nl-NL": nl.nl,
2762
+ "de-DE": de.de,
2763
+ "fr-FR": fr.fr,
2764
+ "pt-PT": pt.pt
2765
+ };
2766
+ function updateLocale(locale) {
2767
+ const resolvedLocale = locale !== null && locale !== void 0 ? locale : "en-GB";
2768
+ const resoledLocaleModule = LOCALE_MAP[resolvedLocale];
2769
+ ReactDatePicker$1.registerLocale(resolvedLocale, resoledLocaleModule);
2770
+ }
2771
+ function getLocaleModule(locale) {
2772
+ const resolvedLocale = locale !== null && locale !== void 0 ? locale : "en-GB";
2773
+ return LOCALE_MAP[resolvedLocale];
2774
+ }
2775
+ class Datepicker extends React.Component {
2776
+ constructor() {
2777
+ super(...arguments);
2778
+ this.handleCloseButtonClick = (event) => {
2779
+ var _a;
2780
+ event.preventDefault();
2781
+ (_a = this.datePickerRef) === null || _a === void 0 ? void 0 : _a.setOpen(false);
2782
+ };
2783
+ this.datePickerRef = null;
2784
+ this.getDateFormat = () => {
2785
+ const { formatDateWithTime = false } = this.props;
2786
+ return formatDateWithTime ? "Pp" : "P";
2787
+ };
2788
+ }
2789
+ componentDidMount() {
2790
+ updateLocale(this.props.locale);
2791
+ }
2792
+ componentDidUpdate(prevProps) {
2793
+ if (prevProps.locale !== this.props.locale) {
2794
+ updateLocale(this.props.locale);
2795
+ }
2796
+ }
2797
+ render() {
2798
+ const _a = this.props, { locale = "en-GB", className, hasCloseButton, closeButtonText, adjustDateOnChange = true, showMonthDropdown = true, showYearDropdown = true, shouldCloseOnSelect = false, allowSameDay = false, minDate, maxDate, isDisabled = false, selected } = _a, otherProps = __rest(_a, ["locale", "className", "hasCloseButton", "closeButtonText", "adjustDateOnChange", "showMonthDropdown", "showYearDropdown", "shouldCloseOnSelect", "allowSameDay", "minDate", "maxDate", "isDisabled", "selected"]);
2799
+ const dateFormat = this.getDateFormat();
2800
+ const pickerClassName = classNames__default.default("cweb-datepicker ui-text-slate-800 ui-text-sm", className);
2801
+ return React__namespace.default.createElement(
2802
+ ReactDatePicker__default$1.default,
2803
+ Object.assign({}, otherProps, { adjustDateOnChange, ref: (element) => this.datePickerRef = element, className: pickerClassName, calendarClassName: "cweb-datepicker-calendar", shouldCloseOnSelect, allowSameDay, minDate, maxDate, disabled: isDisabled, showMonthDropdown, showYearDropdown, locale: getLocaleModule(locale), dateFormat, timeFormat: "HH:mm", selected, dropdownMode: "select" }),
2804
+ React__namespace.default.createElement("div", { className: "ui-m-2" }, hasCloseButton ? React__namespace.default.createElement(PrimaryButton, { onClick: this.handleCloseButtonClick }, closeButtonText !== null && closeButtonText !== void 0 ? closeButtonText : "OK") : null)
2805
+ );
2806
+ }
2807
+ }
2808
+
2751
2809
  var img$2 = "data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='%239CA3AF'/%3e%3c/svg%3e";
2752
2810
 
2753
2811
  var css_248z$9 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-dropdown {\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: flex-start;\n position: relative;\n outline: none;\n border-radius: 4px;\n}\n.cweb-dropdown:focus {\n outline: 4px solid rgba(0, 159, 227, 0.3);\n}\n.cweb-dropdown > .dropdown-header {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n align-self: stretch;\n height: 44px;\n border-radius: 4px;\n transition: all 0.4s ease;\n}\n.cweb-dropdown > .dropdown-header > .dropdown-header-icon {\n opacity: 0.5;\n transition: opacity 0.3s ease-in-out;\n}\n.cweb-dropdown > .dropdown-header:hover > .dropdown-header-icon {\n opacity: 1;\n}\n.cweb-dropdown > .dropdown-list {\n box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.56);\n display: none;\n position: absolute;\n top: 100%;\n z-index: 1;\n width: 100%;\n max-height: 360px;\n overflow-y: auto;\n align-self: stretch;\n margin-top: 8px;\n padding: 0;\n background-color: #ffffff;\n list-style: none;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n}\n.cweb-dropdown > .dropdown-list > .dropdown-list-item {\n cursor: pointer;\n}\n.cweb-dropdown > .dropdown-list > .dropdown-list-item-group > .dropdown-list-item {\n cursor: pointer;\n}\n.cweb-dropdown.is-open > .dropdown-list {\n display: block;\n margin-bottom: 32px;\n}\n.cweb-dropdown.is-open > .dropdown-list.wider {\n width: 200%;\n}";
@@ -5886,7 +5944,8 @@ exports.CrossIcon = CrossIcon;
5886
5944
  exports.CrossInCircleIcon = CrossInCircleIcon;
5887
5945
  exports.CrossInFilledCircleIcon = CrossInFilledCircleIcon;
5888
5946
  exports.DatabaseIcon = DatabaseIcon;
5889
- exports.DatePicker = Datepicker;
5947
+ exports.DatePicker = Datepicker$1;
5948
+ exports.DatePickerV2 = Datepicker;
5890
5949
  exports.DeleteIcon = DeleteIcon;
5891
5950
  exports.Divider = Divider;
5892
5951
  exports.DownArrowIcon = ChevronDownIcon;