hplx-react-elements-dev 1.0.95 → 1.0.97

package/dist/esm/index.css

@@ -1058,3 +1058,485 @@
   color: #849095;
   padding: 0.833em;
 }
+
+.rdrCalendarWrapper {
+  display: flex;
+  align-items: flex-start;
+  padding: 0px;
+  position: absolute;
+  width: 328px;
+  height: 396px !important;
+  box-shadow: 0px 20px 24px -4px #ffffff14,
+    0px 8px 8px -4px rgba(255, 255, 255, 0.03) !important;
+  border-radius: 8px;
+  background: #fcfcfd !important;
+}
+
+.rdrDateDisplayWrapper {
+  background-color: rgb(24, 86, 193) !important;
+}
+
+.rdrDateDisplay {
+  margin: 0.833em;
+}
+
+.rdrDateDisplayItem {
+  border-radius: 4px;
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.21) !important;
+  border: 1px solid transparent;
+}
+
+.rdrDateDisplayItem input {
+  cursor: pointer;
+  height: 2.5em;
+  line-height: 2.5em;
+  border: 0px;
+  background: transparent;
+  width: 100%;
+  color: #849095;
+}
+
+.rdrDateDisplayItemActive {
+  border-color: currentColor;
+}
+
+.rdrDateDisplayItemActive input {
+  color: #7d888d;
+}
+
+.rdrMonthAndYearWrapper {
+  align-items: center;
+  margin: 28px 0 28px 0 !important;
+  padding: 0px !important;
+  width: 328px;
+  height: 24px;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  color: #344054;
+  flex: none;
+  flex-grow: 0;
+}
+
+.rdrMonthAndYearPickers {
+  font-weight: 600;
+}
+
+.rdrMonthAndYearPickers select {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 16px 0px 10px 0px !important;
+  border-radius: 4px;
+  outline: 0;
+  color: #3e484f;
+  background-position: right 8px center !important;
+  cursor: pointer;
+  text-align: center;
+}
+
+.rdrMonthAndYearPickers select:hover {
+  background-color: rgba(255, 255, 255, 0.07) !important;
+}
+
+.rdrMonthPicker {
+  margin: 0 10px 0 0 !important;
+}
+
+.rdrYearPicker {
+  margin: 0 0 0 0px !important;
+}
+
+.rdrNextPrevButton {
+  display: block;
+  width: 20px !important;
+  height: 20px !important;
+  margin: 0 34.37px 0 34.37px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: #ffffff;
+}
+
+.rdrNextPrevButton:hover {
+  background: #ffffff !important;
+}
+
+.rdrNextPrevButton i {
+  display: block;
+  width: 0 !important;
+  height: 0 !important;
+  padding: 0;
+  text-align: center;
+  border-style: solid;
+  transform: translate(-3px, 0px);
+}
+
+.rdrPprevButton i {
+  content: "" !important;
+  width: 10px !important;
+  height: 10px !important;
+  border-top: solid 1px currentColor !important;
+  border-right: solid 1px currentColor !important;
+  transform: rotate(-135deg) !important;
+}
+
+.rdrNextButton i {
+  border-color: transparent transparent transparent transparent !important;
+  content: "" !important;
+  width: 10px !important;
+  height: 10px !important;
+  border-bottom: solid 1px currentColor !important;
+  border-right: solid 1px currentColor !important;
+  transform: rotate(-45deg) !important;
+}
+
+.rdrWeekDays {
+  padding: 0 0.833em;
+}
+
+.rdrMonth {
+  padding: 0 0.833em 1.666em 0.833em;
+}
+
+.rdrMonth .rdrWeekDays {
+  padding: 0;
+}
+
+.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName {
+  display: none;
+}
+
+.rdrWeekDay {
+  width: 24px !important;
+  height: 20px !important;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px !important;
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+  text-align: center;
+  color: #344054 !important;
+}
+
+.rdrDay {
+  background: transparent;
+  width: 40px !important;
+  height: 40px !important;
+  -webkit-user-select: none;
+  user-select: none;
+  border: 0;
+  text-align: center !important;
+  color: #344054;
+  padding: 22px !important;
+  top: 0px !important;
+  left: 0px !important ;
+  right: 0px !important;
+  bottom: 0px !important;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  line-height: 20px !important;
+}
+
+.rdrDay:focus {
+  outline: 0;
+}
+
+.rdrDayNumber {
+  margin: auto;
+  outline: 0;
+  font-weight: 300;
+  width: 24px;
+  height: 20px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  top: 5px;
+  bottom: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rdrDayToday .rdrDayNumber span {
+  font-weight: 500 !important;
+}
+
+.rdrDayToday .rdrDayNumber span:after {
+  content: "";
+  bottom: 4px !important;
+  top: -10px !important;
+  right: 4px !important;
+  width: 40px !important;
+  height: 40px !important;
+  border-radius: 100% !important;
+  background: rgba(66, 67, 69, 0.07) !important;
+  z-index: 0;
+}
+
+.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,
+.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,
+.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,
+.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after {
+  background: #fff;
+}
+
+.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,
+.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
+.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
+.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.rdrSelected,
+.rdrInRange,
+.rdrStartEdge,
+.rdrEndEdge {
+  background: currentColor;
+  position: absolute;
+  top: 5px;
+  left: 0;
+  right: 0;
+  bottom: 5px;
+}
+
+.rdrSelected {
+  width: 40px !important;
+  height: 40px !important;
+  top: 2px;
+  left: 2px;
+  background: #1570ef !important;
+  border-radius: 100% !important;
+  align-self: center !important;
+  justify-self: center !important;
+  flex: none;
+  flex-grow: 0;
+}
+
+.rdrInRange {
+}
+
+.rdrStartEdge {
+  border-top-left-radius: 1.042em;
+  border-bottom-left-radius: 1.042em;
+  left: 2px;
+}
+
+.rdrEndEdge {
+  border-top-right-radius: 1.042em;
+  border-bottom-right-radius: 1.042em;
+  right: 2px;
+}
+
+.rdrSelected {
+  border-radius: 1.042em;
+}
+
+.rdrDayStartOfMonth .rdrInRange,
+.rdrDayStartOfMonth .rdrEndEdge,
+.rdrDayStartOfWeek .rdrInRange,
+.rdrDayStartOfWeek .rdrEndEdge {
+  border-top-left-radius: 1.042em;
+  border-bottom-left-radius: 1.042em;
+  left: 2px;
+}
+
+.rdrDayEndOfMonth .rdrInRange,
+.rdrDayEndOfMonth .rdrStartEdge,
+.rdrDayEndOfWeek .rdrInRange,
+.rdrDayEndOfWeek .rdrStartEdge {
+  border-top-right-radius: 1.042em;
+  border-bottom-right-radius: 1.042em;
+  right: 2px;
+}
+
+.rdrDayStartOfMonth .rdrDayInPreview,
+.rdrDayStartOfMonth .rdrDayEndPreview,
+.rdrDayStartOfWeek .rdrDayInPreview,
+.rdrDayStartOfWeek .rdrDayEndPreview {
+  border-top-left-radius: 1.333em;
+  border-bottom-left-radius: 1.333em;
+  border-left-width: 1px;
+  left: 0px;
+}
+
+.rdrDayEndOfMonth .rdrDayInPreview,
+.rdrDayEndOfMonth .rdrDayStartPreview,
+.rdrDayEndOfWeek .rdrDayInPreview,
+.rdrDayEndOfWeek .rdrDayStartPreview {
+  border-top-right-radius: 1.333em !important;
+  border-bottom-right-radius: 1.333em !important;
+  border-right-width: 1px !important;
+  right: 0px;
+}
+
+.rdrDayStartPreview,
+.rdrDayInPreview,
+.rdrDayEndPreview {
+  background: rgba(255, 255, 255, 0.09);
+  position: absolute;
+  top: 3px;
+  left: 0px;
+  right: 0px;
+  bottom: 3px;
+  pointer-events: none;
+  border: 0px solid currentColor;
+  z-index: -10;
+}
+
+.rdrDayStartPreview {
+  border-top-width: 1px !important;
+  border-left-width: 1px !important;
+  border-bottom-width: 1px !important;
+  border-top-left-radius: 1.333em;
+  border-bottom-left-radius: 1.333em !important;
+  left: 0px !important;
+  top: 0px !important;
+  right: 0px !important;
+}
+
+.rdrDayInPreview {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.rdrDayEndPreview {
+  border-top-width: 1px;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-top-right-radius: 1.333em;
+  border-bottom-right-radius: 1.333em;
+  right: 0px;
+}
+
+.rdrDefinedRangesWrapper {
+  font-size: 12px;
+  width: 226px;
+  border-right: solid 1px #eff2f7;
+  background: #fff;
+}
+
+.rdrDefinedRangesWrapper .rdrStaticRangeSelected {
+  color: currentColor;
+  font-weight: 600;
+}
+
+.rdrStaticRange {
+  border: 0;
+  cursor: pointer;
+  display: block;
+  outline: 0;
+  border-bottom: 1px solid #eff2f7;
+  padding: 0;
+  background: #fff;
+}
+
+.rdrStaticRange:hover .rdrStaticRangeLabel,
+.rdrStaticRange:focus .rdrStaticRangeLabel {
+  background: #eff2f7;
+}
+
+.rdrStaticRangeLabel {
+  display: block;
+  outline: 0;
+  line-height: 18px;
+  padding: 10px 20px;
+  text-align: left;
+}
+
+.rdrInputRanges {
+  padding: 10px 0;
+}
+
+.rdrInputRange {
+  align-items: center;
+  padding: 5px 20px;
+}
+
+.rdrInputRangeInput {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 4px;
+  text-align: center;
+  border: solid 1px rgb(222, 231, 235);
+  margin-right: 10px;
+  color: rgb(108, 118, 122);
+}
+
+.rdrInputRangeInput:focus,
+.rdrInputRangeInput:hover {
+  border-color: rgb(180, 191, 196);
+  outline: 0;
+  color: #333;
+}
+
+.rdrCalendarWrapper:not(.rdrDateRangeWrapper)
+  .rdrDayHovered
+  .rdrDayNumber:after {
+  content: "";
+  width: 40px !important;
+  height: 40px !important;
+  border: 0px solid currentColor !important;
+  border-radius: 100% !important;
+  position: absolute !important;
+  top: -10px !important;
+  right: 0px !important;
+  left: -7px !important;
+  bottom: 0px !important;
+  background: rgba(0, 145, 255, 0.1);
+}
+
+.rdrDayPassive {
+  pointer-events: all !important;
+}
+
+.rdrDayPassive .rdrDayNumber span {
+  color: #d5dce0;
+}
+
+.rdrDayPassive .rdrInRange,
+.rdrDayPassive .rdrStartEdge,
+.rdrDayPassive .rdrEndEdge,
+.rdrDayPassive .rdrSelected,
+.rdrDayPassive .rdrDayStartPreview,
+.rdrDayPassive .rdrDayInPreview,
+.rdrDayPassive .rdrDayEndPreview {
+  display: none;
+}
+
+.rdrDayDisabled {
+  background-color: rgb(255, 255, 255) !important;
+}
+
+.rdrDayDisabled .rdrDayNumber span {
+  color: #fda29b;
+}
+
+.rdrDayDisabled .rdrInRange,
+.rdrDayDisabled .rdrStartEdge,
+.rdrDayDisabled .rdrEndEdge,
+.rdrDayDisabled .rdrSelected,
+.rdrDayDisabled .rdrDayStartPreview,
+.rdrDayDisabled .rdrDayInPreview,
+.rdrDayDisabled .rdrDayEndPreview {
+  filter: grayscale(100%) opacity(60%);
+}
+
+.rdrMonthName {
+  text-align: left;
+  font-weight: 600;
+  color: #849095;
+  padding: 0.833em;
+}

package/dist/esm/index.d.ts

@@ -28,3 +28,4 @@ export { default as DatePicker } from "./datePicker/DatePicker";
 export { default as DoubleInput } from "./doubleInput/DoubleInput";
 export { default as InputTag } from "./inputTag/InputTag";
 export { default as InputTagDropdownItem } from "./inputTag/InputTagDropdownItem";
+export { default as CalendarView } from "./calendarView/CalendarView";

package/dist/esm/index.js

@@ -18554,4 +18554,95 @@ var InputTag = function InputTag(_a) {
   }));
 };
 
-export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, InputField, InputFieldSplit, InputTag, InputTagDropdownItem, MessageToast, NestedDropdown, OtpField, ProgressBar, ProgressCircle, RadioBtn, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };
+var CalendarView = function CalendarView(_a) {
+  var date1 = _a.date1,
+      date2 = _a.date2,
+      handleDate1 = _a.handleDate1,
+      handleDate2 = _a.handleDate2,
+      handleSelectCalenderView = _a.handleSelectCalenderView; // const [date1, setDate1] = useState(new Date());
+  // const [date2, setDate2] = useState(new Date());
+
+  var _b = useState(true),
+      autoFocus1 = _b[0],
+      seAutoFocus1 = _b[1];
+
+  var _c = useState(false),
+      autoFocus2 = _c[0],
+      seAutoFocus2 = _c[1]; // const [showCalender1, setShowCalender1] = useState(true);
+  // const [showCalender2, setShowCalender2] = useState(false);
+  // const [showCalender2, setShowCalender2] = useState(false);
+
+
+  var handleSelect1 = function handleSelect1(selectedValue) {
+    seAutoFocus2(true);
+    seAutoFocus1(false);
+    handleDate1(selectedValue);
+  };
+
+  var handleSelect2 = function handleSelect2(selectedValue) {
+    seAutoFocus1(true);
+    seAutoFocus2(false);
+    handleDate2(selectedValue);
+  };
+
+  return jsxRuntime.exports.jsxs("div", {
+    children: [jsxRuntime.exports.jsxs("div", __assign({
+      className: " hplxt-flex hplxt-flex-col hplxt-box-border hplxt-w-[330px] hplxt-h-[450px]  hplxt-border-1 hplxt-border-Blue_gray-200 hplxt-rounded-t-md hplxt-bg-Blue_gray-25  hplxt-z-30"
+    }, {
+      children: [jsxRuntime.exports.jsxs("div", __assign({
+        className: "hplxt-z-10 hplxt-flex hplxt-mt-1 hplxt-items-center hplxt-justify-center"
+      }, {
+        children: [jsxRuntime.exports.jsx(InputField, {
+          className: "hplxt-text-Gray-400 ".concat(autoFocus1 ? "hplxt-border-Primary-700" : "", " hplxt-border-1 hplxt-rounded-md"),
+          inputProps: {
+            placeholder: "Start From",
+            value: dayjs(date1).format("DD-MMM-YYYY"),
+            autoFocus: autoFocus1
+          },
+          isborderRequired: false,
+          width: "130px"
+        }), jsxRuntime.exports.jsx("div", {
+          className: "hplxt-border hplxt-w-3 hplxt-border-Blue_gray-200"
+        }), jsxRuntime.exports.jsx(InputField, {
+          className: "hplxt-text-Gray-400 ".concat(autoFocus2 ? "hplxt-border-Primary-700" : "", " hplxt-border-1 hplxt-rounded-md"),
+          inputProps: {
+            placeholder: "To Day",
+            value: dayjs(date2).format("DD-MMM-YYYY"),
+            autoFocus: autoFocus2
+          },
+          width: "130px"
+        })]
+      })), autoFocus1 && jsxRuntime.exports.jsx("div", __assign({
+        className: "hplxt-flex"
+      }, {
+        children: jsxRuntime.exports.jsx(dist.Calendar, {
+          date: dayjs(date1).isValid() ? date1 : new Date(),
+          onChange: handleSelect1
+        })
+      })), autoFocus2 && jsxRuntime.exports.jsx("div", __assign({
+        className: "hplxt-flex"
+      }, {
+        children: jsxRuntime.exports.jsx(dist.Calendar, {
+          date: dayjs(date2).isValid() ? date2 : new Date(),
+          onChange: handleSelect2
+        })
+      }))]
+    })), jsxRuntime.exports.jsxs("div", __assign({
+      className: "hplxt-flex hplxt-h-8 hplxt-bg-White hplxt-items-center hplxt-justify-end hplxt-order-last  hplxt-border-b-1 hplxt-border-l-1 hplxt-border-r-1 hplxt-border-Blue_gray-200 hplxt-rounded-b-md -md hplxt-Blue_gray-400 "
+    }, {
+      children: [jsxRuntime.exports.jsx("i", {
+        className: "hx_calendar hplxt-text-Primary-700 hplxt-cursor-pointer",
+        onClick: handleSelectCalenderView
+      }), jsxRuntime.exports.jsx(Typography, __assign({
+        variant: "Regular",
+        type: "Text sm",
+        className: "hplxt-text-Primary-700 hplxt-mr-3  hplxt-cursor-pointer",
+        onClick: handleSelectCalenderView
+      }, {
+        children: "Number View"
+      }))]
+    }))]
+  });
+};
+
+export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, CalendarView, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, InputField, InputFieldSplit, InputTag, InputTagDropdownItem, MessageToast, NestedDropdown, OtpField, ProgressBar, ProgressCircle, RadioBtn, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };

package/dist/esm/types.d.ts

@@ -65,7 +65,7 @@ export interface CalenderViewProps {
     date2?: Date;
     handleDate1: (val: Date) => void;
     handleDate2: (val: Date) => void;
-    handleSelectCalenderView?: (val: Date) => void;
+    handleSelectCalenderView?: () => void;
 }
 export interface InputFieldSplitProps {
     label?: string;

package/package.json

@@ -9,7 +9,7 @@
     "frontend",
     "healthplix"
   ],
-  "version": "1.0.95",
+  "version": "1.0.97",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",