@npm_leadtech/legal-lib-components 5.16.4 → 5.16.6

package/dist/css/styles.css

@@ -946,6 +946,16 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
 .e-button--fluid {
   width: 100%;
 }
+.e-button.create-doc-button {
+  border: none;
+}
+.e-button.download-icon::before {
+  content: "";
+  width: 1rem;
+  height: 1rem;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC4wMjc1IDcuNDIyNzlMOC43MjIyMiA4Ljg3MzA3VjEuODA1NTdDOC43MjIyMiAxLjQwNjY5IDguMzk4ODcgMS4wODMzNCA4IDEuMDgzMzRDNy42MDExMyAxLjA4MzM0IDcuMjc3NzggMS40MDY2OSA3LjI3Nzc4IDEuODA1NTdWOC44NzMwN0w1Ljk3MjQ5IDcuNDIyNzlDNS42NzA1OCA3LjA4NzM1IDUuMTQ0NDIgNy4wODc4NSA0Ljg0MzE2IDcuNDIzODhDNC41ODQ2NSA3LjcxMjIxIDQuNTg0NjUgOC4xNDg5MiA0Ljg0MzE2IDguNDM3MjVMNy4yNTU0MyAxMS4xMjc5QzcuNjUyODUgMTEuNTcxMSA4LjM0NzE1IDExLjU3MTEgOC43NDQ1NyAxMS4xMjc5TDExLjE1NjggOC40MzcyNUMxMS40MTUzIDguMTQ4OTIgMTEuNDE1MyA3LjcxMjIxIDExLjE1NjggNy40MjM4OEMxMC44NTU2IDcuMDg3ODUgMTAuMzI5NCA3LjA4NzM1IDEwLjAyNzUgNy40MjI3OVpNMTMuMDU1NiA5LjA1NTU2QzEzLjA1NTYgOC42NTY2OSAxMy4zNzg5IDguMzMzMzQgMTMuNzc3OCA4LjMzMzM0QzE0LjE3NjcgOC4zMzMzNCAxNC41IDguNjU2NjkgMTQuNSA5LjA1NTU2VjE0LjU4MzNDMTQuNSAxNS4xMzU2IDE0LjA1MjMgMTUuNTgzMyAxMy41IDE1LjU4MzNIMi41QzEuOTQ3NzIgMTUuNTgzMyAxLjUgMTUuMTM1NiAxLjUgMTQuNTgzM1Y5LjA1NTU2QzEuNSA4LjY1NjY5IDEuODIzMzUgOC4zMzMzNCAyLjIyMjIyIDguMzMzMzRDMi42MjEwOSA4LjMzMzM0IDIuOTQ0NDQgOC42NTY2OSAyLjk0NDQ0IDkuMDU1NTdWMTMuOTcyMkgxMy4wNTU2VjkuMDU1NTZaIiBmaWxsPSIjM0Q0MDQyIi8+Cjwvc3ZnPgo=);
+  margin-right: 0.5rem;
+}
 .button--secondary-3 {
   color: var(--neutral-neutral-1);
   display: flex;
@@ -980,7 +990,7 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
 .button--secondary-4:hover {
   background-color: var(--neutral-neutral-1);
 }
-.button--tertiary {
+.button--tertiary-1 {
   font-weight: bold;
   padding: 0.5rem 1rem;
   display: inline-block;
@@ -988,12 +998,25 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
   border: none;
   background: none;
 }
-.button--tertiary:hover {
+.button--tertiary-1:hover {
   background-color: var(--button-tertiary-hover);
 }
 .button--small {
   line-height: 1;
 }
+.button--tertiary-2 {
+  background-color: transparent;
+  border: 1px solid var(--neutral-neutral-3);
+  color: var(--button-secondary);
+  font-weight: bold;
+  padding: 0.3rem 0.5rem;
+}
+.button--tertiary-2:hover {
+  background-color: var(--button-secondary-hover);
+}
+.button--small {
+  line-height: 1;
+}
 .button--medium {
   line-height: 1.5;
 }

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

@@ -19,7 +19,8 @@ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink
         '--secondary-icon': color === 'secondaryIcon',
         '--secondary-icon --bold': color === 'secondaryIconBold',
         '--secondary-icon --dark': color === 'secondaryIconDark',
-        'button--tertiary': color === 'tertiary',
+        'button--tertiary-1': color === 'tertiary',
+        'button--tertiary-2': color === 'tertiary2',
         '--styleless': color === 'styleless',
         '--transparent': color === 'transparent',
         '--disabled': disabled,

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

@@ -211,6 +211,20 @@ html[data-theme='lawdistrict'] {
   &--fluid {
     width: 100%;
   }
+
+  &.create-doc-button {
+    border: none;
+  }
+
+  &.download-icon {
+    &::before {
+      content: '';
+      width: 1rem;
+      height: 1rem;
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC4wMjc1IDcuNDIyNzlMOC43MjIyMiA4Ljg3MzA3VjEuODA1NTdDOC43MjIyMiAxLjQwNjY5IDguMzk4ODcgMS4wODMzNCA4IDEuMDgzMzRDNy42MDExMyAxLjA4MzM0IDcuMjc3NzggMS40MDY2OSA3LjI3Nzc4IDEuODA1NTdWOC44NzMwN0w1Ljk3MjQ5IDcuNDIyNzlDNS42NzA1OCA3LjA4NzM1IDUuMTQ0NDIgNy4wODc4NSA0Ljg0MzE2IDcuNDIzODhDNC41ODQ2NSA3LjcxMjIxIDQuNTg0NjUgOC4xNDg5MiA0Ljg0MzE2IDguNDM3MjVMNy4yNTU0MyAxMS4xMjc5QzcuNjUyODUgMTEuNTcxMSA4LjM0NzE1IDExLjU3MTEgOC43NDQ1NyAxMS4xMjc5TDExLjE1NjggOC40MzcyNUMxMS40MTUzIDguMTQ4OTIgMTEuNDE1MyA3LjcxMjIxIDExLjE1NjggNy40MjM4OEMxMC44NTU2IDcuMDg3ODUgMTAuMzI5NCA3LjA4NzM1IDEwLjAyNzUgNy40MjI3OVpNMTMuMDU1NiA5LjA1NTU2QzEzLjA1NTYgOC42NTY2OSAxMy4zNzg5IDguMzMzMzQgMTMuNzc3OCA4LjMzMzM0QzE0LjE3NjcgOC4zMzMzNCAxNC41IDguNjU2NjkgMTQuNSA5LjA1NTU2VjE0LjU4MzNDMTQuNSAxNS4xMzU2IDE0LjA1MjMgMTUuNTgzMyAxMy41IDE1LjU4MzNIMi41QzEuOTQ3NzIgMTUuNTgzMyAxLjUgMTUuMTM1NiAxLjUgMTQuNTgzM1Y5LjA1NTU2QzEuNSA4LjY1NjY5IDEuODIzMzUgOC4zMzMzNCAyLjIyMjIyIDguMzMzMzRDMi42MjEwOSA4LjMzMzM0IDIuOTQ0NDQgOC42NTY2OSAyLjk0NDQ0IDkuMDU1NTdWMTMuOTcyMkgxMy4wNTU2VjkuMDU1NTZaIiBmaWxsPSIjM0Q0MDQyIi8+Cjwvc3ZnPgo=');
+      margin-right: 0.5rem;
+    }
+  }
 }
 
 .button--secondary-3 {
@@ -255,7 +269,7 @@ html[data-theme='lawdistrict'] {
   }
 }
 
-.button--tertiary {
+.button--tertiary-1 {
   font-weight: bold;
   padding: 0.5rem 1rem;
   display: inline-block;
@@ -272,6 +286,22 @@ html[data-theme='lawdistrict'] {
   line-height: 1;
 }
 
+.button--tertiary-2 {
+  background-color: transparent;
+  border: 1px solid get-color(neutral, neutral-3);
+  color: var(--button-secondary);
+  font-weight: bold;
+  padding: 0.3rem 0.5rem;
+
+  &:hover {
+    background-color: var(--button-secondary-hover);
+  }
+}
+
+.button--small {
+  line-height: 1;
+}
+
 .button--medium {
   line-height: 1.5;
 }

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

@@ -47,7 +47,8 @@ const Button: FC<ButtonProps> = ({
     '--secondary-icon': color === 'secondaryIcon',
     '--secondary-icon --bold': color === 'secondaryIconBold',
     '--secondary-icon --dark': color === 'secondaryIconDark',
-    'button--tertiary': color === 'tertiary',
+    'button--tertiary-1': color === 'tertiary',
+    'button--tertiary-2': color === 'tertiary2',
     '--styleless': color === 'styleless',
     '--transparent': color === 'transparent',
     '--disabled': disabled,

package/dist/src/components/atoms/Button/ButtonProps.types.d.ts

@@ -8,7 +8,7 @@ export interface ButtonProps {
     noLinkNoFunc?: boolean;
     onClick?: (functionParameters?: any) => void;
     functionParameters?: any;
-    color?: 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'styleless' | 'transparent';
+    color?: 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent';
     error?: boolean;
     disabled?: boolean;
     fluid?: boolean;

package/dist/src/components/atoms/Button/ButtonProps.types.ts

@@ -22,6 +22,7 @@ export interface ButtonProps {
     | 'secondaryIconBold'
     | 'secondaryIconDark'
     | 'tertiary'
+    | 'tertiary2'
     | 'styleless'
     | 'transparent'
   error?: boolean

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

@@ -5,7 +5,8 @@ import { de } from 'date-fns/locale';
 import { DatePickerCustomStyled } from './DatePickerCustom.styled';
 // 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 DatePickerCustom = ({ class: className, dateFormat = 'MM/dd/yyyy', isStartDate = false, isValidGroup = false, label, locale = 'en', name, onChange, relatedDate, isMobile, tooltip, type, validate = false, value }) => {
+    const [event, setEvent] = useState();
     const [date, setDate] = useState(() => {
         return typeof value === 'string' && value !== '' ? new Date(value) : null;
     });
@@ -57,7 +58,26 @@ const DatePickerCustom = ({ class: className, dateFormat = 'MM/dd/yyyy', isStart
             monthName
         };
     });
-    return (_jsxs(DatePickerCustomStyled, { className: classStyle, "data-qa": name, children: [TooltipObject, _jsx(DatePicker, { locale: locale, dateFormat: dateFormat, renderCustomHeader: ({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (_jsxs("div", { style: {
+    let propsForMobileDevices = {};
+    if (isMobile) {
+        propsForMobileDevices = {
+            portalId: 'root-portal',
+            withPortal: true,
+            onFocus: (event) => {
+                setEvent(event);
+                event.target.blur();
+            },
+            onCalendarClose: () => {
+                if (event) {
+                    const timmerID = setTimeout(() => {
+                        event.target.blur();
+                        clearTimeout(timmerID);
+                    }, 1);
+                }
+            }
+        };
+    }
+    return (_jsxs(DatePickerCustomStyled, { className: classStyle, "data-qa": name, children: [TooltipObject, _jsx(DatePicker, { ...propsForMobileDevices, locale: locale, dateFormat: dateFormat, renderCustomHeader: ({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (_jsxs("div", { style: {
                         margin: 10,
                         display: 'flex',
                         justifyContent: 'center'

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

@@ -18,11 +18,13 @@ const DatePickerCustom: FC<DatePickerCustomProps> = ({
   name,
   onChange,
   relatedDate,
+  isMobile,
   tooltip,
   type,
   validate = false,
   value
 }): React.JSX.Element => {
+  const [event, setEvent] = useState<React.ChangeEvent<HTMLInputElement>>()
   const [date, setDate] = useState(() => {
     return typeof value === 'string' && value !== '' ? new Date(value) : null
   })
@@ -90,10 +92,32 @@ const DatePickerCustom: FC<DatePickerCustomProps> = ({
     }
   })
 
+  let propsForMobileDevices = {}
+
+  if (isMobile) {
+    propsForMobileDevices = {
+      portalId: 'root-portal',
+      withPortal: true,
+      onFocus: (event) => {
+        setEvent(event)
+        event.target.blur()
+      },
+      onCalendarClose: () => {
+        if (event) {
+          const timmerID = setTimeout(() => {
+            event.target.blur()
+            clearTimeout(timmerID)
+          }, 1)
+        }
+      }
+    }
+  }
+
   return (
     <DatePickerCustomStyled className={classStyle} data-qa={name}>
       {TooltipObject}
       <DatePicker
+        {...propsForMobileDevices}
         locale={locale}
         dateFormat={dateFormat}
         renderCustomHeader={({

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

@@ -13,5 +13,6 @@ export interface DatePickerCustomProps {
     relatedDate?: Date;
     type?: string;
     dateFormat?: string;
+    isMobile?: boolean;
     onChange?: (dateObject: any) => void;
 }

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

@@ -14,5 +14,6 @@ export interface DatePickerCustomProps {
   relatedDate?: Date
   type?: string
   dateFormat?: string
+  isMobile?: boolean
   onChange?: (dateObject: any) => void
 }