intelicoreact 2.0.18 → 2.0.19

package/dist/es/Atomic/FormElements/InputDateRange/InputDateRange.styles.css

@@ -0,0 +1,594 @@
+.date-range-input {
+  --input-height: 28px;
+  --label-line-height: 16px;
+  --border-color: #e2e5ec;
+  --calendar-range-point-color: #6b81dd;
+  --font-family: roboto, sans-serif;
+  --font-size: 13px;
+  --line-height: 20px;
+  --border-radius: 3px;
+  position: relative;
+  z-index: 1;
+  /* position: relative;
+  width: 335px;
+  //height: calc(var(--input-height) + var(--label-line-height));
+
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+  align-items: flex-start; */
+}
+.date-range-input input::-webkit-outer-spin-button,
+.date-range-input input::-webkit-inner-spin-button {
+  appearance: none;
+}
+.date-range-input__label {
+  margin-bottom: 2px;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--label-line-height);
+}
+.date-range-input__wraper {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+.date-range-input__absolut-wraper {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  height: fit-content;
+  background: transparent;
+}
+.date-range-input__absolut-wraper_right-position {
+  right: 0;
+  left: auto;
+}
+.date-range-input__static-part {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--input-height);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: #fff;
+}
+.date-range-input_focused {
+  z-index: 2;
+}
+.date-range-input_focused .date-range-input__static-part {
+  border: 1px solid blue;
+  filter: drop-shadow(0 0 4px rgba(93, 120, 255, 0.5));
+}
+.date-range-input__toggle-button {
+  display: flex;
+  flex-direction: row;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 10px;
+  cursor: pointer;
+}
+.date-range-input__interval-key {
+  display: inline-block;
+  margin-right: 5px;
+  text-align: left;
+  white-space: nowrap;
+  text-transform: capitalize;
+  pointer-events: none;
+}
+.date-range-input__range {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+  word-wrap: break-word;
+  pointer-events: none;
+}
+.date-range-input__range-text {
+  display: inline-block;
+}
+.date-range-input__range-text:first-of-type {
+  margin-right: 5px;
+}
+.date-range-input__range-text_little {
+  font-size: calc(var(--font-size) - 2px);
+}
+.date-range-input__arrows-block {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+  width: fit-content;
+  height: 100%;
+}
+.date-range-input__arrow {
+  box-sizing: border-box;
+  height: 100%;
+  cursor: pointer;
+}
+.date-range-input__compact .date-range-input__toggle-button {
+  padding-right: 18px;
+}
+.date-range-input_hide-arrows .date-range-input__toggle-button {
+  padding: 9px 18px;
+}
+.date-range-input_error .date-range-input__wraper {
+  border-color: #fa564c;
+}
+.date-range-input_disabled .date-range-input__wraper {
+  pointer-events: none;
+  opacity: 0.7;
+}
+.date-range-input_disabled .date-range-input__toggle-button {
+  cursor: auto;
+}
+.date-range-input__error-block {
+  position: absolute;
+  bottom: -20px;
+  left: 8px;
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  color: #fa564c;
+}
+.date-range-input__opened-part {
+  width: fit-content;
+  height: fit-content;
+  background-color: transparent;
+}
+
+.opened-part {
+  position: absolute;
+  top: 31px;
+  left: 0;
+}
+.opened-part__wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: #fff;
+  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
+}
+.opened-part__wrapper_right-position-once-element {
+  justify-content: flex-end;
+}
+.opened-part__intervals-list {
+  width: fit-content;
+  padding: 6px 0;
+  border-right: 1px solid var(--border-color);
+}
+.opened-part__intervals-item {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 20px 0 30px;
+  font-family: var(--font-family);
+  font-size: 12px;
+  font-weight: 300;
+  font-style: normal;
+  line-height: 24px;
+  cursor: pointer;
+  white-space: nowrap;
+  text-transform: capitalize;
+}
+.opened-part__intervals-item:hover {
+  background-color: #f2f2f8;
+}
+.opened-part__intervals-item_active {
+  background: #f2f2f8;
+}
+.opened-part__intervals-item-icon-active {
+  position: absolute;
+  top: 5px;
+  left: 10px;
+}
+.opened-part__intervals-item_disabled {
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.3);
+}
+.opened-part__date-picker {
+  width: fit-content;
+  border: none;
+}
+.opened-part--left {
+  right: 0;
+  left: auto;
+}
+.opened-part--top {
+  top: auto;
+  bottom: 31px;
+}
+
+.date-picker {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.date-picker__header {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: 100%;
+  height: fit-content;
+  padding: 7.5px 15px;
+  border: none;
+  background-color: #f7fafc;
+}
+.date-picker__date-row {
+  gap: 8px;
+  margin-right: 0 !important;
+}
+.date-picker__date-row .input__wrap {
+  width: 100% !important;
+  margin: 0 !important;
+}
+.date-picker__inputs-block {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: fit-content;
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+}
+.date-picker__inputs-block .date-picker__date-row > div:not(.date-picker__inputs-separator):not(.date-picker__date-input) {
+  box-sizing: border-box;
+  min-width: 100px;
+  min-height: 100%;
+  margin-right: 9px;
+  border: 1px solid var(--border-color);
+}
+.date-picker__inputs-block .date-picker__date-row > div:not(.date-picker__inputs-separator):not(.date-picker__date-input):last-child {
+  margin-right: 0;
+}
+.date-picker__inputs-block .date-picker__date-row > div:not(.date-picker__inputs-separator):not(.date-picker__date-input).input__wrap {
+  box-sizing: border-box;
+  border-radius: var(--border-radius);
+  box-shadow: none;
+}
+.date-picker__inputs-block .date-picker__date-row > div:not(.date-picker__inputs-separator):not(.date-picker__date-input).input__wrap_focus {
+  border: 1px solid blue;
+  box-shadow: none;
+}
+.date-picker__inputs-block > div.dropdown {
+  width: 80px;
+  border-radius: var(--border-radius);
+}
+.date-picker__inputs-block .date-picker__inputs-separator {
+  margin: 0 !important;
+}
+.date-picker__inputs-block input {
+  font-weight: 300;
+}
+.date-picker__date-row {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+.date-picker__date-input {
+  box-sizing: border-box;
+  padding: 3px 10px;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: 300;
+  font-style: normal;
+  line-height: calc(var(--input-height) / 2);
+  letter-spacing: inherit;
+  color: inherit;
+  border-radius: var(--border-radius);
+  background-color: #fff;
+}
+.date-picker__date-input-emulation {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  min-height: 40px;
+  padding: 0px 15px !important;
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 500;
+  font-style: normal;
+  line-height: 22px;
+  cursor: pointer;
+  white-space: nowrap;
+  letter-spacing: 0.2px;
+  color: #3b414b;
+  background-color: #fff;
+}
+.date-picker__date-input-emulation span {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding-top: 2px;
+  line-height: 24px;
+}
+.date-picker__date-input-emulation_disabled {
+  cursor: auto;
+  pointer-events: none;
+  opacity: 0.5;
+}
+.date-picker__hour-select-input {
+  box-sizing: border-box;
+  width: 70px;
+  height: 100%;
+  min-height: 100%;
+  border-radius: var(--border-radius);
+}
+.date-picker__hour-select-input button {
+  min-height: 38px !important;
+}
+.date-picker__hour-select-input > .dropdown__trigger {
+  box-sizing: border-box;
+  width: 100%;
+  height: 28px;
+  padding-right: 15px;
+  padding-left: 10px;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  border: none;
+  box-shadow: none;
+}
+.date-picker__hour-select-input > .dropdown__trigger > .text {
+  padding: 0;
+}
+.date-picker__hour-select-input .dropdown__list-item {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+}
+.date-picker__calendars {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 10px 16px;
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  background-color: #fff;
+}
+.date-picker__calendars-wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+}
+.date-picker__calendars .date-picker__calendar:first-child {
+  margin-right: 10px;
+}
+.date-picker__calendars .range-calendar {
+  box-sizing: border-box;
+  width: fit-content;
+  height: fit-content;
+}
+.date-picker__calendars .range-calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: fit-content;
+  margin-bottom: 12px;
+  font-size: calc(var(--font-size) + 2px);
+  font-weight: 500;
+  font-style: normal;
+  line-height: calc(var(--line-height) + 4px);
+}
+.date-picker__calendars .range-calendar-header__title {
+  text-align: center;
+}
+.date-picker__calendars .range-calendar-header__next, .date-picker__calendars .range-calendar-header__prev {
+  cursor: pointer;
+  background-color: transparent;
+}
+.date-picker__calendars .range-calendar__week {
+  display: flex;
+}
+.date-picker__calendars .range-calendar__week-title {
+  margin-bottom: 5px;
+}
+.date-picker__calendars .range-calendar__day {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  flex-basis: 0;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: 29px;
+  height: 22px;
+  margin: 1px 0;
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  user-select: none;
+  text-align: center;
+}
+.date-picker__calendars .range-calendar__day--clickable {
+  cursor: pointer;
+}
+.date-picker__calendars .range-calendar__day--clickable:hover {
+  background: #e2e6f8;
+}
+.date-picker__calendars .range-calendar__day--disabled {
+  cursor: default;
+  pointer-events: none;
+  opacity: 0.2;
+}
+.date-picker__calendars .range-calendar__day--disabled:hover {
+  background: inherit;
+}
+.date-picker__calendars .range-calendar__day--range-start, .date-picker__calendars .range-calendar__day--range-end {
+  box-sizing: border-box;
+  color: #f8fbff;
+  border: 1px solid var(--calendar-range-point-color);
+  border-radius: var(--border-radius);
+  background: var(--calendar-range-point-color);
+}
+.date-picker__calendars .range-calendar__day--range-start:hover, .date-picker__calendars .range-calendar__day--range-end:hover {
+  color: #f8fbff;
+  background: var(--calendar-range-point-color);
+}
+.date-picker__calendars .range-calendar__day--range-inside {
+  background: #eaf2ff;
+}
+.date-picker__calendars .range-calendar__day--prev-range-end {
+  border-radius: var(--border-radius);
+  background: #e2e5ec;
+}
+.date-picker__calendars .range-calendar__day--prev-range-inside {
+  background: #f7f8fa;
+}
+.date-picker__calendars .range-calendar__day--title {
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+}
+.date-picker__calendars .range-calendar__day--title:hover {
+  background: inherit;
+}
+.date-picker__footer {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 0 0 var(--border-radius) 0;
+  background-color: #f7fafc;
+}
+.date-picker__footer_once-element {
+  justify-content: flex-end;
+}
+.date-picker__buttons-block {
+  box-sizing: border-box;
+  width: fit-content;
+  height: 100%;
+}
+.date-picker__button {
+  text-transform: capitalize;
+}
+.date-picker__button:first-child {
+  width: 80px;
+  margin-right: 16px;
+  border: 1px solid #a6acb1;
+  border-radius: var(--border-radius);
+  background-color: #fff;
+}
+.date-picker__button:last-child {
+  width: 110px;
+  border-radius: var(--border-radius);
+}
+.date-picker__compare-block {
+  box-sizing: border-box;
+  width: fit-content;
+  height: 100%;
+}
+
+@media screen and (max-width: 992px) {
+  .opened-part__intervals-list {
+    display: none;
+  }
+}
+@media screen and (max-width: 768px) {
+  .date-picker-modal .modal__body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .date-picker-modal .modal__footer button {
+    height: 40px;
+    box-shadow: none;
+  }
+  .date-picker-modal .modal__footer button.button_dark-outline {
+    font-family: Sarabun;
+    font-size: 14.4px;
+    font-weight: 500;
+    font-style: normal;
+    line-height: 150%;
+    text-align: center;
+    color: #171d33;
+    border: 1px solid #e1e8f1;
+    border-radius: 32px;
+    background: var(--white, #fff);
+  }
+  .date-picker-modal .modal__footer button.button_primary {
+    font-family: Sarabun;
+    font-size: 14.4px;
+    font-weight: 600;
+    font-style: normal;
+    line-height: 150%; /* 21.6px */
+    text-align: center;
+    color: var(--white, #fff);
+  }
+  .date-picker.opened-part__date-picker {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .date-picker__header {
+    padding: 0 !important;
+  }
+  .date-picker__inputs-block {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .date-picker__inputs-separator {
+    display: none;
+  }
+  .date-picker__hour-select-input {
+    box-sizing: border-box;
+  }
+  .date-picker__hour-select-input button {
+    min-height: 38px !important;
+  }
+  .date-picker__calendars {
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+  }
+  .date-picker__calendars-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .date-picker__calendar {
+    margin: 0 !important;
+  }
+}

package/dist/es/Atomic/FormElements/InputDateRange/components/DateInput.js

@@ -0,0 +1,45 @@
+import Input from "../../Input/Input.js";
+import { NUMERIC_KEYBOARD } from "../../../../Functions/presets/mobileKeyboardTypesPresets.js";
+import cn from "classnames";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import moment from "moment-timezone";
+//#region src/Atomic/FormElements/InputDateRange/components/DateInput.tsx
+function handleDateInputOnChange(value) {
+	const replace = (val) => val?.replace(/[^0-9/]/g, "");
+	const input = replace(value);
+	const lastSymbol = input ? input.slice(-1) : "";
+	const previousValue = input ? input.slice(0, input.length - 1) : "";
+	if (value.length > 10 || lastSymbol === "/") return previousValue;
+	return previousValue.length === 2 || previousValue.length === 5 ? `${previousValue}/${lastSymbol}` : input;
+}
+function DateInput({ ref, ...props }) {
+	const { RC, className, testId, isFocused, disabled, value, date, prepareDate, onChange, onFocus, onBlur, onKeyUp } = props;
+	const preparedDate = (() => {
+		const prepareDateDefault = (date) => moment(date).format("MM/DD/YYYY");
+		const output = prepareDate?.(date) ?? prepareDateDefault(date);
+		return (output?.toString?.().toLowerCase() || "") !== "invalid date" ? output : "";
+	})();
+	return isFocused ? /* @__PURE__ */ jsx(Input, {
+		ref,
+		testId,
+		className: cn(className, `${RC}-interactive`),
+		value,
+		disabled,
+		onChange: (value) => onChange(handleDateInputOnChange(value)),
+		onBlur,
+		onKeyUp,
+		...NUMERIC_KEYBOARD
+	}) : /* @__PURE__ */ jsx("div", {
+		className: cn(className, `${RC}-emulation`, { [`${RC}-emulation_disabled`]: disabled }),
+		onClick: disabled ? void 0 : onFocus,
+		children: /* @__PURE__ */ jsx("span", {
+			className: cn(""),
+			children: preparedDate
+		})
+	});
+}
+//#endregion
+export { DateInput as default };
+
+//# sourceMappingURL=DateInput.js.map

package/dist/es/Atomic/FormElements/InputDateRange/components/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","names":[],"sources":["../../../../../../src/Atomic/FormElements/InputDateRange/components/DateInput.tsx"],"sourcesContent":["import type { Moment } from 'moment-timezone';\n\nimport type { ReactElement } from 'react';\nimport type { IDateInputProps } from '../InputDateRange.interface';\n\nimport cn from 'classnames';\nimport moment from 'moment-timezone';\nimport React from 'react';\nimport { NUMERIC_KEYBOARD } from '../../../../Functions/presets/mobileKeyboardTypesPresets';\nimport TextInput from '../../Input/Input';\n\nfunction handleDateInputOnChange(value: string): string {\n  const replace = (val: string): string => val?.replace(/[^0-9/]/g, '');\n\n  const input = replace(value);\n  const lastSymbol = input ? input.slice(-1) : '';\n  const previousValue = input ? input.slice(0, input.length - 1) : '';\n\n  if (value.length > 10 || lastSymbol === '/') return previousValue;\n  return previousValue.length === 2 || previousValue.length === 5\n    ? `${previousValue}/${lastSymbol}`\n    : input;\n}\n\nfunction DateInput({ ref, ...props }: IDateInputProps & { ref?: React.RefObject<Omit<HTMLInputElement, 'value'> | null> }): ReactElement {\n  const {\n    RC,\n    className,\n    testId,\n    isFocused,\n    disabled,\n    value,\n    date,\n    prepareDate,\n    onChange,\n    onFocus,\n    onBlur,\n    onKeyUp,\n  } = props;\n  const preparedDate = (() => {\n    const prepareDateDefault = (date: Date | Moment | string): string => moment(date).format('MM/DD/YYYY');\n\n    const output = prepareDate?.(date) ?? prepareDateDefault(date);\n    return (output?.toString?.().toLowerCase() || '') !== 'invalid date'\n      ? output\n      : '';\n  })();\n\n  return isFocused\n    ? (\n        <TextInput\n          ref={ref}\n          testId={testId}\n          className={cn(className, `${RC}-interactive`)}\n          value={value}\n          disabled={disabled}\n          onChange={(value: string) => onChange(handleDateInputOnChange(value))}\n          onBlur={onBlur}\n          onKeyUp={onKeyUp}\n          {...NUMERIC_KEYBOARD}\n        />\n      )\n    : (\n        <div\n          className={cn(className, `${RC}-emulation`, {\n            [`${RC}-emulation_disabled`]: disabled,\n          })}\n          onClick={disabled ? undefined : onFocus}\n        >\n          <span className={cn('')}>{preparedDate}</span>\n        </div>\n      );\n}\n\nexport default DateInput;\n"],"mappings":";;;;;;;AAWA,SAAS,wBAAwB,OAAuB;CACtD,MAAM,WAAW,QAAwB,KAAK,QAAQ,YAAY,EAAE;CAEpE,MAAM,QAAQ,QAAQ,KAAK;CAC3B,MAAM,aAAa,QAAQ,MAAM,MAAM,EAAE,IAAI;CAC7C,MAAM,gBAAgB,QAAQ,MAAM,MAAM,GAAG,MAAM,SAAS,CAAC,IAAI;CAEjE,IAAI,MAAM,SAAS,MAAM,eAAe,KAAK,OAAO;CACpD,OAAO,cAAc,WAAW,KAAK,cAAc,WAAW,IAC1D,GAAG,cAAc,GAAG,eACpB;AACN;AAEA,SAAS,UAAU,EAAE,KAAK,GAAG,SAA4G;CACvI,MAAM,EACJ,IACA,WACA,QACA,WACA,UACA,OACA,MACA,aACA,UACA,SACA,QACA,YACE;CACJ,MAAM,sBAAsB;EAC1B,MAAM,sBAAsB,SAAyC,OAAO,IAAI,CAAC,CAAC,OAAO,YAAY;EAErG,MAAM,SAAS,cAAc,IAAI,KAAK,mBAAmB,IAAI;EAC7D,QAAQ,QAAQ,WAAW,CAAC,CAAC,YAAY,KAAK,QAAQ,iBAClD,SACA;CACN,EAAA,CAAG;CAEH,OAAO,YAED,oBAAC,OAAD;EACO;EACG;EACR,WAAW,GAAG,WAAW,GAAG,GAAG,aAAa;EACrC;EACG;EACV,WAAW,UAAkB,SAAS,wBAAwB,KAAK,CAAC;EAC5D;EACC;EACT,GAAI;CACL,CAAA,IAGD,oBAAC,OAAD;EACE,WAAW,GAAG,WAAW,GAAG,GAAG,aAAa,GACzC,GAAG,GAAG,uBAAuB,SAChC,CAAC;EACD,SAAS,WAAW,KAAA,IAAY;YAEhC,oBAAC,QAAD;GAAM,WAAW,GAAG,EAAE;aAAI;EAAmB,CAAA;CAC1C,CAAA;AAEb"}