@npm_leadtech/legal-lib-components 4.1.20 → 4.1.22

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustom.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type DatePickerCustomProps } from './DatePickerCustomProps.types';
+declare const DatePickerCustom: FC<DatePickerCustomProps>;
+export default DatePickerCustom;

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustom.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DatePicker, { registerLocale } from 'react-datepicker';
+import { useState } from 'react';
+import { de } from 'date-fns/locale';
+// import './DatePickerCustom.scss'
+// import './DatepickerPlugin.scss'
+registerLocale('de', de);
+const DatePickerCustom = ({ class: className, dateFormat = 'MM/dd/yyyy', isStartDate = false, isValidGroup = false, label, locale = 'en', name, onChange, relatedDate, tooltip, type, validate = false, value }) => {
+    const [date, setDate] = useState(() => {
+        return typeof value === 'string' && value !== '' ? new Date(value) : null;
+    });
+    const returnYears = (currentYear) => {
+        const years = [];
+        const minYear = new Date().getFullYear() - 100;
+        const maxYear = new Date().getFullYear() + 500;
+        for (let i = minYear; i <= maxYear; i++) {
+            years.push(_jsx("option", { value: i, defaultValue: currentYear, children: i }, i));
+        }
+        return years;
+    };
+    const handleChange = (date) => {
+        setDate(date);
+        if (onChange != null) {
+            const dateObject = {
+                target: {
+                    name,
+                    value: date
+                }
+            };
+            onChange(dateObject);
+        }
+    };
+    const addDays = (date, days) => {
+        const result = new Date(date);
+        result.setDate(result.getDate() + days);
+        return result;
+    };
+    const classStyle = `${validate ? 'e-datepicker' : 'e-datepicker is-invalid'} ${className ?? ''} e-${type} ${!isValidGroup ? '--group-invalid' : ''}\``;
+    let minDate;
+    let maxDate;
+    if (relatedDate != null) {
+        if (isStartDate) {
+            maxDate = relatedDate;
+            maxDate = addDays(maxDate, -1);
+        }
+        else {
+            minDate = relatedDate;
+            minDate = addDays(minDate, 1);
+        }
+    }
+    const TooltipObject = tooltip !== undefined ? _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }) : '';
+    const actualYear = new Date().getFullYear();
+    const intlForMonths = new Intl.DateTimeFormat(locale, { month: 'long' });
+    const months = [...Array(12).keys()].map((monthIndex) => {
+        const monthName = intlForMonths.format(new Date(actualYear, monthIndex));
+        return {
+            monthName
+        };
+    });
+    return (_jsxs("div", { className: classStyle, "data-qa": name, children: [TooltipObject, _jsx(DatePicker, { locale: locale, dateFormat: dateFormat, renderCustomHeader: ({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (_jsxs("div", { style: {
+                        margin: 10,
+                        display: 'flex',
+                        justifyContent: 'center'
+                    }, children: [_jsx("button", { className: 'DayPickerNavigation_leftButton', onClick: decreaseMonth, disabled: prevMonthButtonDisabled, children: '<' }), _jsx("select", { className: 'CalendarYear', value: date.getFullYear(), onChange: ({ target: { value } }) => {
+                                changeYear(Number(value));
+                            }, children: returnYears(date.getFullYear()) }), _jsx("select", { className: 'CalendarMonth', value: date.getMonth(), onChange: ({ target: { value } }) => {
+                                changeMonth(Number(value));
+                            }, children: months.map(({ monthName }, value) => (_jsx("option", { value: value, defaultValue: date.getMonth(), children: monthName }, monthName))) }), _jsx("button", { className: 'DayPickerNavigation_rightButton', onClick: increaseMonth, disabled: nextMonthButtonDisabled, children: '>' })] })), selected: date, minDate: minDate, maxDate: maxDate, onChange: (date) => {
+                    handleChange(date);
+                }, popperPlacement: 'bottom', popperModifiers: [
+                    {
+                        name: 'flip',
+                        options: {
+                            fallbackPlacements: ['bottom']
+                        }
+                    }
+                ] }), _jsx("div", { className: 'e-datepicker__inner', children: _jsx("label", { className: 'e-datepicker__label', children: label }) })] }));
+};
+export default DatePickerCustom;

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustom.scss

@@ -0,0 +1,116 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.e-datepicker {
+  max-width: 55%;
+  width: 100%;
+  display: flex;
+  flex-flow: column-reverse;
+  margin-bottom: 2rem;
+  &__inner {
+    margin-bottom: 0.5rem;
+  }
+  &__label {
+    font-weight: bold;
+  }
+
+  ul li {
+    margin: 0;
+
+    &::before {
+      background-color: transparent;
+    }
+  }
+
+  .react-datepicker {
+    border: 0.5px solid get-color(neutral, neutral-4);
+  }
+
+  .react-datepicker__input-container input {
+    color: get-color(neutral, main);
+    border-radius: 4px;
+    font-size: 1rem;
+    background-color: get-color(neutral, neutral-4);
+    height: 40px;
+    width: 100%;
+    padding: 0.75rem 0 0.75rem 0.75rem;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdG9yOiBza2V0Y2h0b29sIDYwICgxMDEwMTApIC0gaHR0cHM6Ly9za2V0Y2guY29tLS0+PHRpdGxlPjNEODAzNjU0LUI3NjEtNEZEQy05MThDLTc1QzUwMjdEODcyMDwvdGl0bGU+PGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPjxkZWZzPjxwYXRoIGQ9Ik0yMiwzIEwxOSwzIEwxOSwxIEwxNywxIEwxNywzIEw3LDMgTDcsMSBMNSwxIEw1LDMgTDIsMyBMMiwyMyBMMjIsMjMgTDIyLDMgWiBNMjAsMjEgTDQsMjEgTDQsOCBMMjAsOCBMMjAsMjEgWiIgaWQ9InBhdGgtMSIvPjwvZGVmcz48ZyBpZD0iQXNzZXQtQXJ0Ym9hcmQtUGFnZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9Imljb24vbmF2aWdhdGlvbi9leHBhbmRfbW9yZV8yNHB4LWljb24vYWN0aW9uL2NhbGVuZGFyX3RvZGF5XzI0cHgiPjxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PGcgaWQ9Imljb24vYWN0aW9uL2NhbGVuZGFyX3RvZGF5XzI0cHgiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxnIGlkPSLihrMtQ29sb3ItY29sb3ItLy1JY29ucy0vLUJsYWNrLS8tSW5hY3RpdmUiIG1hc2s9InVybCgjbWFzay0yKSIgZmlsbD0iIzQzNDM0MyI+PHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PC9nPjwvZz48L2c+PC9zdmc+);
+    background-position: 95% 50%;
+    background-repeat: no-repeat;
+    transition: box-shadow 0.3s ease;
+    box-shadow: 0 0 0 0 get-color(primary, main-light-4);
+    margin: 0.0005em;
+    border: none;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px get-color(primary, main-light-1);
+    }
+  }
+
+  .react-datepicker__day {
+    font-size: 14px;
+    text-align: center;
+    border: 0.5px solid get-color(neutral, neutral-4);
+    width: 39px;
+    height: 38px;
+    border-collapse: collapse;
+    vertical-align: middle;
+    display: table-cell;
+    line-height: 1.7rem;
+  }
+
+  .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
+    border-bottom-color: get-color(others, white);
+  }
+
+  .react-datepicker__day--selected {
+    background-color: get-color(primary, main-light-2);
+    border: 1px double get-color(primary, main-light-2);
+
+    &:hover {
+      background-color: get-color(primary, main-light-2);
+    }
+  }
+
+  .react-datepicker__day--keyboard-selected {
+    background-color: inherit;
+    color: inherit;
+
+    &:hover {
+      border-radius: 0.3rem;
+      background-color: #f0f0f0;
+    }
+  }
+
+  .react-datepicker__month-container {
+    padding: 0 15px 15px;
+  }
+
+  .react-datepicker__month {
+    margin: 0;
+  }
+
+  .react-datepicker__header {
+    background-color: inherit;
+    border: none;
+
+    button {
+      border: 0.5px solid get-color(neutral, neutral-4);
+    }
+
+    select {
+      -webkit-appearance: menulist-button;
+      background-color: get-color(others, white);
+    }
+  }
+
+  .react-datepicker__day-name {
+    width: 33px;
+  }
+
+  .react-datepicker__day--outside-month {
+    color: get-color(neutral, neutral-3);
+    pointer-events: none;
+  }
+}

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustom.tsx

@@ -0,0 +1,178 @@
+import DatePicker, { registerLocale } from 'react-datepicker'
+import React, { type FC, useState } from 'react'
+import { de } from 'date-fns/locale'
+
+import { type DatePickerCustomProps } from './DatePickerCustomProps.types'
+// import './DatePickerCustom.scss'
+// import './DatepickerPlugin.scss'
+
+registerLocale('de', de)
+
+const DatePickerCustom: FC<DatePickerCustomProps> = ({
+  class: className,
+  dateFormat = 'MM/dd/yyyy',
+  isStartDate = false,
+  isValidGroup = false,
+  label,
+  locale = 'en',
+  name,
+  onChange,
+  relatedDate,
+  tooltip,
+  type,
+  validate = false,
+  value
+}): React.JSX.Element => {
+  const [date, setDate] = useState(() => {
+    return typeof value === 'string' && value !== '' ? new Date(value) : null
+  })
+
+  const returnYears = (currentYear: number): React.JSX.Element[] => {
+    const years: React.JSX.Element[] = []
+    const minYear = new Date().getFullYear() - 100
+    const maxYear = new Date().getFullYear() + 500
+
+    for (let i = minYear; i <= maxYear; i++) {
+      years.push(
+        <option key={i} value={i} defaultValue={currentYear}>
+          {i}
+        </option>
+      )
+    }
+
+    return years
+  }
+
+  const handleChange = (date: Date | null): void => {
+    setDate(date)
+    if (onChange != null) {
+      const dateObject = {
+        target: {
+          name,
+          value: date
+        }
+      }
+      onChange(dateObject)
+    }
+  }
+
+  const addDays = (date, days): Date => {
+    const result = new Date(date)
+    result.setDate(result.getDate() + days)
+    return result
+  }
+
+  const classStyle = `${validate ? 'e-datepicker' : 'e-datepicker is-invalid'} ${className ?? ''} e-${type} ${
+    !isValidGroup ? '--group-invalid' : ''
+  }\``
+
+  let minDate
+  let maxDate
+  if (relatedDate != null) {
+    if (isStartDate) {
+      maxDate = relatedDate
+      maxDate = addDays(maxDate, -1)
+    } else {
+      minDate = relatedDate
+      minDate = addDays(minDate, 1)
+    }
+  }
+
+  const TooltipObject = tooltip !== undefined ? <p className='tooltip-form sans-serif --small'>{tooltip}</p> : ''
+
+  const actualYear = new Date().getFullYear()
+
+  const intlForMonths = new Intl.DateTimeFormat(locale, { month: 'long' })
+  const months = [...Array(12).keys()].map((monthIndex) => {
+    const monthName = intlForMonths.format(new Date(actualYear, monthIndex))
+    return {
+      monthName
+    }
+  })
+
+  return (
+    <div className={classStyle} data-qa={name}>
+      {TooltipObject}
+      <DatePicker
+        locale={locale}
+        dateFormat={dateFormat}
+        renderCustomHeader={({
+          date,
+          changeYear,
+          changeMonth,
+          decreaseMonth,
+          increaseMonth,
+          prevMonthButtonDisabled,
+          nextMonthButtonDisabled
+        }) => (
+          <div
+            style={{
+              margin: 10,
+              display: 'flex',
+              justifyContent: 'center'
+            }}
+          >
+            <button
+              className='DayPickerNavigation_leftButton'
+              onClick={decreaseMonth}
+              disabled={prevMonthButtonDisabled}
+            >
+              {'<'}
+            </button>
+            <select
+              className='CalendarYear'
+              value={date.getFullYear()}
+              onChange={({ target: { value } }) => {
+                changeYear(Number(value))
+              }}
+            >
+              {returnYears(date.getFullYear())}
+            </select>
+
+            <select
+              className='CalendarMonth'
+              value={date.getMonth()}
+              onChange={({ target: { value } }) => {
+                changeMonth(Number(value))
+              }}
+            >
+              {months.map(({ monthName }, value) => (
+                <option key={monthName} value={value} defaultValue={date.getMonth()}>
+                  {monthName}
+                </option>
+              ))}
+            </select>
+
+            <button
+              className='DayPickerNavigation_rightButton'
+              onClick={increaseMonth}
+              disabled={nextMonthButtonDisabled}
+            >
+              {'>'}
+            </button>
+          </div>
+        )}
+        selected={date}
+        minDate={minDate}
+        maxDate={maxDate}
+        onChange={(date: Date | null) => {
+          handleChange(date)
+        }}
+        popperPlacement='bottom'
+        popperModifiers={[
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: ['bottom']
+            }
+          }
+        ]}
+      />
+      <div className={'e-datepicker__inner'}>
+        <label className={'e-datepicker__label'}>{label}</label>
+      </div>
+    </div>
+  )
+}
+
+export default DatePickerCustom

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustomProps.types.d.ts

@@ -0,0 +1,17 @@
+export interface DatePickerCustomProps {
+    id?: string;
+    name?: string;
+    class?: string;
+    value?: string;
+    focused?: boolean;
+    validate?: boolean;
+    tooltip?: string;
+    isValidGroup?: boolean;
+    label?: string;
+    locale: string;
+    isStartDate?: boolean;
+    relatedDate?: Date;
+    type?: string;
+    dateFormat?: string;
+    onChange?: (dateObject: any) => void;
+}

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustomProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustomProps.types.ts

@@ -0,0 +1,17 @@
+export interface DatePickerCustomProps {
+  id?: string
+  name?: string
+  class?: string
+  value?: string
+  focused?: boolean
+  validate?: boolean
+  tooltip?: string
+  isValidGroup?: boolean
+  label?: string
+  locale: string
+  isStartDate?: boolean
+  relatedDate?: Date
+  type?: string
+  dateFormat?: string
+  onChange?: (dateObject: any) => void
+}