@axos-web-dev/shared-components 0.0.172 → 0.0.173
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.
- package/dist/ATMLocator/ATMLocator.js +35 -35
- package/dist/Accordion/Accordion.css.js +4 -4
- package/dist/Accordion/Accordion.js +3 -3
- package/dist/AlertBanner/AlertBanner.css.js +1 -1
- package/dist/AlertBanner/index.js +3 -3
- package/dist/Article/Article.css.js +4 -4
- package/dist/ArticlesSet/ArticlesSet.css.js +4 -4
- package/dist/AwardsBanner/AwardsBanner.css.js +1 -1
- package/dist/AwardsItem/AwardsItem.css.js +2 -2
- package/dist/BulletItem/BulletItem.css.js +2 -2
- package/dist/BulletItem/BulletItem.js +3 -3
- package/dist/Button/Button.css.js +4 -4
- package/dist/Button/Button.js +35 -35
- package/dist/Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js +3 -3
- package/dist/Calculators/ApyCalculator/ApyCalculator.css.js +3 -3
- package/dist/Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js +4 -4
- package/dist/Calculators/AxosOneCalculator/index.js +3 -3
- package/dist/Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js +4 -4
- package/dist/Calculators/BalanceAPYCalculator/index.js +3 -3
- package/dist/Calculators/Calculator.js +35 -35
- package/dist/Calculators/MarginTradingCalculator/MarginTradingCalculator.css.js +1 -1
- package/dist/Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js +3 -3
- package/dist/Calculators/calculator.css.js +4 -4
- package/dist/CallToActionBar/CallToActionBar.css.js +3 -3
- package/dist/Carousel/Carousel.css.js +3 -3
- package/dist/Carousel/index.js +35 -35
- package/dist/Chevron/Chevron.css.js +4 -4
- package/dist/Chevron/index.js +35 -35
- package/dist/CollectInformationAlert/CollectInformationAlert.css.js +4 -4
- package/dist/CollectInformationAlert/index.js +3 -3
- package/dist/Comparison/Comparison.css.js +7 -7
- package/dist/Comparison/Comparison.js +34 -34
- package/dist/ContentBanner/ContentBanner.css.js +4 -4
- package/dist/DownloadTile/DownloadTile.css.js +3 -3
- package/dist/ExecutiveBio/ExecutiveBio.css.js +4 -4
- package/dist/FaqAccordion/FaqAccordion.css.js +4 -4
- package/dist/FaqAccordion/index.js +35 -35
- package/dist/FooterDisclosure/FooterDisclosure.css.js +1 -1
- package/dist/FooterSiteMap/AxosBank/FooterSiteMap.css.js +4 -4
- package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +112 -94
- package/dist/Forms/ApplicationStart.js +4 -4
- package/dist/Forms/ClearingForm.js +4 -4
- package/dist/Forms/CommercialDeposits.js +4 -4
- package/dist/Forms/CommercialLending.js +4 -4
- package/dist/Forms/ContactCompany.js +4 -4
- package/dist/Forms/ContactUs.js +4 -4
- package/dist/Forms/ContactUsAAS.js +4 -4
- package/dist/Forms/ContactUsBusiness.js +35 -35
- package/dist/Forms/ContactUsNMLSId.js +35 -35
- package/dist/Forms/CpraRequest.js +4 -4
- package/dist/Forms/DealerServices.js +4 -4
- package/dist/Forms/EmailOnly.js +35 -35
- package/dist/Forms/EmailUs.d.ts +1 -1
- package/dist/Forms/EmailUs.js +20 -16
- package/dist/Forms/Forms.css.js +7 -7
- package/dist/Forms/MortgageRate/MortgageRateForm.js +35 -35
- package/dist/Forms/MortgageRate/MortgageRateQuoteFilters.js +1 -1
- package/dist/Forms/MortgageRate/MortgageRateWatch.js +47 -44
- package/dist/Forms/QuickPricer/QuickPricerForm.js +4 -4
- package/dist/Forms/QuickPricer/QuickPricerResults.css.js +1 -1
- package/dist/Forms/QuickPricer/UserInformation.css.js +3 -3
- package/dist/Forms/ScheduleCall.js +4 -4
- package/dist/Forms/ScheduleCallPremier.js +4 -4
- package/dist/Forms/SuccesForm.js +36 -36
- package/dist/Forms/WcplSurvey.js +4 -4
- package/dist/HeroBanner/HeroBanner.css.js +5 -5
- package/dist/HeroBanner/HeroBanner.js +10 -2
- package/dist/HeroBanner/LargeBanner.css.js +4 -4
- package/dist/HeroBanner/SelectionBanner.css.d.ts +1 -3
- package/dist/HeroBanner/SelectionBanner.css.js +4 -4
- package/dist/Hyperlink/Hyperlink.css.js +1 -1
- package/dist/Hyperlink/index.js +35 -35
- package/dist/IconBillboard/IconBillboard.css.js +4 -4
- package/dist/ImageBillboard/ImageBillboard.css.js +4 -4
- package/dist/ImageBillboard/ImageBillboard.js +3 -3
- package/dist/ImageBillboard/ImageBillboardSet.js +3 -3
- package/dist/ImageLink/ImageLink.css.js +1 -1
- package/dist/ImageLink/ImageLink.js +35 -35
- package/dist/ImageLink/ImageLinkSet.js +35 -35
- package/dist/ImageLink/index.js +35 -35
- package/dist/Input/Checkbox.css.js +1 -1
- package/dist/Input/CurrencyInput.js +1 -1
- package/dist/Input/DatePicker.css.d.ts +1 -0
- package/dist/Input/DatePicker.css.js +6 -0
- package/dist/Input/DatePicker2.d.ts +21 -0
- package/dist/Input/DatePicker2.js +103 -0
- package/dist/Input/DatePickerComponents/DatePicker.d.ts +11 -0
- package/dist/Input/DatePickerComponents/DatePicker.js +13 -0
- package/dist/Input/DatePickerComponents/InputDate.d.ts +15 -0
- package/dist/Input/DatePickerComponents/InputDate.js +66 -0
- package/dist/Input/DatePickerComponents/index.d.ts +2 -0
- package/dist/Input/DatePickerComponents/index.js +6 -0
- package/dist/Input/Datepicker.d.ts +3 -0
- package/dist/Input/Datepicker.js +47 -0
- package/dist/Input/Dropdown.css.js +2 -2
- package/dist/Input/Input.css.js +4 -4
- package/dist/Input/InputAmount.js +1 -1
- package/dist/Input/InputDate.css.d.ts +6 -0
- package/dist/Input/InputDate.css.js +15 -0
- package/dist/Input/InputDate.d.ts +3 -0
- package/dist/Input/InputDate.js +47 -0
- package/dist/Input/InputPhone.js +1 -1
- package/dist/Input/RadioButton.css.js +1 -1
- package/dist/Input/index.d.ts +1 -1
- package/dist/Input/index.js +1 -1
- package/dist/Inputs/Input.css.js +3 -3
- package/dist/Insight/Featured/CategorySelector.css.js +5 -5
- package/dist/Insight/Featured/CategorySelector.js +34 -34
- package/dist/Insight/Featured/Featured.css.js +2 -2
- package/dist/Insight/Featured/Featured.js +36 -36
- package/dist/Insight/Featured/Header.css.js +1 -1
- package/dist/Insight/Featured/Header.js +34 -34
- package/dist/Insight/Insight.css.js +2 -2
- package/dist/Interstitial/Interstitial-variants.css.js +4 -4
- package/dist/Interstitial/Interstitial.js +3 -3
- package/dist/Interstitial/Interstitial.module.js +13 -10
- package/dist/LandingPageHeader/LandingPageHeader.css.js +3 -3
- package/dist/LandingPageHeader/LandingPageHeader.js +3 -3
- package/dist/LoadingIndicator/LoadingIndicator.css.js +1 -1
- package/dist/Modal/Modal.css.js +3 -3
- package/dist/Modal/Modal.js +34 -34
- package/dist/NavigationMenu/AxosAdvisor/NavBar.css.js +3 -3
- package/dist/NavigationMenu/AxosAdvisor/SubNavbar.css.js +3 -3
- package/dist/NavigationMenu/AxosAdvisorServices/NavBar.css.js +3 -3
- package/dist/NavigationMenu/AxosAdvisorServices/SubNavbar.css.js +3 -3
- package/dist/NavigationMenu/AxosBank/NavBar.css.js +3 -3
- package/dist/NavigationMenu/AxosBank/NavBar.module.js +54 -54
- package/dist/NavigationMenu/AxosBank/NavData.js +36 -36
- package/dist/NavigationMenu/AxosBank/SubNavBar.js +311 -190
- package/dist/NavigationMenu/AxosBank/SubNavbar.css.js +3 -3
- package/dist/NavigationMenu/AxosBank/index.js +50 -35
- package/dist/NavigationMenu/AxosClearing/NavBar.css.js +1 -1
- package/dist/PageNavItem/PageNavItem.css.js +4 -4
- package/dist/PageNavSet/PageNavigationSet.css.js +1 -1
- package/dist/Pagination/Pagination.css.js +1 -1
- package/dist/Pagination/Pagination.js +3 -3
- package/dist/SecondaryFooter/SecondaryFooter.css.js +3 -3
- package/dist/SetContainer/SetContainer.css.js +3 -3
- package/dist/SetContainer/SetContainer.js +35 -35
- package/dist/SocialMediaBar/SocialMediaBar.css.js +1 -1
- package/dist/StepItem/StepItem.css.js +3 -3
- package/dist/StepItemSet/StepItemSet.css.js +3 -3
- package/dist/Tab/Tab.css.js +3 -3
- package/dist/Table/Table.css.js +3 -3
- package/dist/Table/Table.js +3 -3
- package/dist/TextBlock/TextBlock.css.js +3 -3
- package/dist/TopicalNavItem/TopicalNavItem.css.js +1 -1
- package/dist/TopicalNavSet/TopicalNavSet.css.js +1 -1
- package/dist/Typography/Typography.css.js +1 -1
- package/dist/VideoTile/VideoTile.css.js +4 -4
- package/dist/VideoTile/VideoTile.js +3 -3
- package/dist/VideoWrapper/VideoWrapper.css.js +1 -1
- package/dist/VideoWrapper/index.js +34 -34
- package/dist/assets/HeroBanner/SelectionBanner.css +0 -4
- package/dist/assets/Input/DatePicker.css +95 -0
- package/dist/assets/Input/InputDate.css +39 -0
- package/dist/assets/Interstitial/Interstitial-variants.css +1 -1
- package/dist/assets/Interstitial/Interstitial.css.css +147 -142
- package/dist/assets/NavigationMenu/AxosBank/NavBar.css.css +130 -122
- package/dist/assets/node_modules/react-date-range/dist/styles.css.css +194 -0
- package/dist/assets/node_modules/react-date-range/dist/theme/default.css.css +385 -0
- package/dist/globals.css.js +2 -2
- package/dist/icons/ArrowIcon/ArrowIcon.css.js +3 -3
- package/dist/icons/CalendarIcon/CalendarIcon.d.ts +3 -0
- package/dist/icons/CalendarIcon/CalendarIcon.js +17 -0
- package/dist/icons/CalendarIcon/index.d.ts +1 -0
- package/dist/icons/CalendarIcon/index.js +4 -0
- package/dist/icons/CheckIcon/CheckIcon.css.js +3 -3
- package/dist/icons/DownloadIcon/DownloadIcon.css.js +3 -3
- package/dist/icons/FollowIcon/FollowIcon.css.js +3 -3
- package/dist/icons/Star/Star.css.js +1 -1
- package/dist/index.css.js +3 -3
- package/dist/main.js +1 -1
- package/dist/themes/axos.css.js +1 -1
- package/dist/themes/premier.css.js +2 -2
- package/dist/types/icon.d.ts +3 -0
- package/dist/types/icon.js +1 -0
- package/dist/types/popover.d.ts +8 -0
- package/dist/types/popover.js +1 -0
- package/dist/utils/RetainQueryLink.d.ts +11 -0
- package/dist/utils/RetainQueryLink.js +15 -0
- package/dist/utils/allowedAxosDomains.js +2 -2
- package/dist/utils/constants/format.d.ts +1 -0
- package/dist/utils/constants/format.js +4 -0
- package/dist/utils/constants/popper.d.ts +6 -0
- package/dist/utils/constants/popper.js +10 -0
- package/dist/utils/hooks/usePopover.d.ts +25 -0
- package/dist/utils/hooks/usePopover.js +64 -0
- package/package.json +131 -131
package/dist/ImageLink/index.js
CHANGED
|
@@ -3,20 +3,20 @@ import "../Accordion/Accordion.js";
|
|
|
3
3
|
import "../Accordion/Accordion.css.js";
|
|
4
4
|
import "../icons/ArrowIcon/ArrowIcon.css.js";
|
|
5
5
|
import "../icons/CheckIcon/CheckIcon.css.js";
|
|
6
|
-
/* empty css
|
|
7
|
-
/* empty css
|
|
6
|
+
/* empty css */
|
|
7
|
+
/* empty css */
|
|
8
|
+
/* empty css */
|
|
8
9
|
/* empty css */
|
|
9
|
-
/* empty css */
|
|
10
10
|
import "react";
|
|
11
11
|
import "../Chevron/Chevron.css.js";
|
|
12
12
|
import "../AlertBanner/AlertBanner.css.js";
|
|
13
13
|
import "../Article/Article.css.js";
|
|
14
14
|
import "../IconBillboard/IconBillboard.css.js";
|
|
15
15
|
import "../utils/allowedAxosDomains.js";
|
|
16
|
-
/* empty css
|
|
17
|
-
/* empty css
|
|
16
|
+
/* empty css */
|
|
17
|
+
/* empty css */
|
|
18
18
|
import "../Interstitial/Interstitial-variants.css.js";
|
|
19
|
-
/* empty css
|
|
19
|
+
/* empty css */
|
|
20
20
|
import "../Modal/contextApi/store.js";
|
|
21
21
|
import "clsx";
|
|
22
22
|
import "../Button/Button.css.js";
|
|
@@ -31,6 +31,7 @@ import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
|
|
|
31
31
|
import "@hookform/resolvers/zod";
|
|
32
32
|
import "../Input/Checkbox.js";
|
|
33
33
|
import "../Input/CurrencyInput.js";
|
|
34
|
+
import "../Input/DownPaymentInput.js";
|
|
34
35
|
import "../Input/Dropdown.js";
|
|
35
36
|
import "../Input/Dropdown.css.js";
|
|
36
37
|
import "../Input/Input.js";
|
|
@@ -38,7 +39,6 @@ import "../Input/Input.css.js";
|
|
|
38
39
|
import "../Input/InputAmount.js";
|
|
39
40
|
import "../Input/InputPhone.js";
|
|
40
41
|
import "../Input/InputTextArea.js";
|
|
41
|
-
import "../Input/DownPaymentInput.js";
|
|
42
42
|
import "../Input/RadioButton.js";
|
|
43
43
|
import "react-hook-form";
|
|
44
44
|
import "../Forms/Forms.css.js";
|
|
@@ -47,16 +47,16 @@ import "../Input/RadioButton.css.js";
|
|
|
47
47
|
import "../Input/Checkbox.css.js";
|
|
48
48
|
import "../LoadingIndicator/LoadingIndicator.css.js";
|
|
49
49
|
import "../Inputs/Input.css.js";
|
|
50
|
-
/* empty css
|
|
51
|
-
/* empty css
|
|
50
|
+
/* empty css */
|
|
51
|
+
/* empty css */
|
|
52
52
|
import "iframe-resizer";
|
|
53
|
-
/* empty css
|
|
53
|
+
/* empty css */
|
|
54
54
|
import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
|
|
55
|
+
/* empty css */
|
|
55
56
|
/* empty css */
|
|
56
|
-
/* empty css
|
|
57
|
-
/* empty css */
|
|
57
|
+
/* empty css */
|
|
58
58
|
import "../Carousel/index.js";
|
|
59
|
-
/* empty css
|
|
59
|
+
/* empty css */
|
|
60
60
|
import "../Comparison/Comparison.css.js";
|
|
61
61
|
import "../HeroBanner/HeroBanner.css.js";
|
|
62
62
|
import "../HeroBanner/LargeBanner.css.js";
|
|
@@ -65,43 +65,43 @@ import "../SetContainer/SetContainer.css.js";
|
|
|
65
65
|
import "../Tab/Tab.css.js";
|
|
66
66
|
import "../icons/Star/Star.css.js";
|
|
67
67
|
import "../ContentBanner/ContentBanner.css.js";
|
|
68
|
-
/* empty css
|
|
68
|
+
/* empty css */
|
|
69
69
|
import "../ExecutiveBio/ExecutiveBio.css.js";
|
|
70
70
|
import "../FaqAccordion/index.js";
|
|
71
71
|
import "../FooterDisclosure/FooterDisclosure.css.js";
|
|
72
|
-
/* empty css
|
|
72
|
+
/* empty css */
|
|
73
73
|
import "../ImageBillboard/ImageBillboard.css.js";
|
|
74
74
|
import { ImageLinkSet } from "./ImageLinkSet.js";
|
|
75
|
-
/* empty css
|
|
76
|
-
/* empty css
|
|
77
|
-
/* empty css
|
|
78
|
-
/* empty css
|
|
75
|
+
/* empty css */
|
|
76
|
+
/* empty css */
|
|
77
|
+
/* empty css */
|
|
78
|
+
/* empty css */
|
|
79
79
|
import "../LandingPageHeader/LandingPageHeader.css.js";
|
|
80
|
-
/* empty css
|
|
81
|
-
/* empty css
|
|
82
|
-
/* empty css
|
|
83
|
-
/* empty css
|
|
84
|
-
/* empty css
|
|
80
|
+
/* empty css */
|
|
81
|
+
/* empty css */
|
|
82
|
+
/* empty css */
|
|
83
|
+
/* empty css */
|
|
84
|
+
/* empty css */
|
|
85
85
|
import "../NavigationMenu/AxosBank/NavData.js";
|
|
86
86
|
import "next/navigation.js";
|
|
87
87
|
import "next/image.js";
|
|
88
|
+
/* empty css */
|
|
88
89
|
import "next/link.js";
|
|
89
|
-
/* empty css
|
|
90
|
-
/* empty css */
|
|
90
|
+
/* empty css */
|
|
91
91
|
import "../PageNavItem/PageNavItem.css.js";
|
|
92
92
|
import "react-slick";
|
|
93
|
-
/* empty css
|
|
94
|
-
/* empty css
|
|
95
|
-
/* empty css
|
|
96
|
-
/* empty css
|
|
93
|
+
/* empty css */
|
|
94
|
+
/* empty css */
|
|
95
|
+
/* empty css */
|
|
96
|
+
/* empty css */
|
|
97
97
|
import "../StepItem/StepItem.css.js";
|
|
98
98
|
import "../StepItemSet/StepItemSet.css.js";
|
|
99
|
-
/* empty css
|
|
100
|
-
/* empty css
|
|
101
|
-
/* empty css
|
|
99
|
+
/* empty css */
|
|
100
|
+
/* empty css */
|
|
101
|
+
/* empty css */
|
|
102
102
|
import "next/script.js";
|
|
103
|
-
/* empty css
|
|
104
|
-
/* empty css
|
|
103
|
+
/* empty css */
|
|
104
|
+
/* empty css */
|
|
105
105
|
import "../Hyperlink/Hyperlink.css.js";
|
|
106
106
|
export {
|
|
107
107
|
ImageLinkSet
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* empty css
|
|
1
|
+
/* empty css */
|
|
2
2
|
import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
3
3
|
var checkboxContainer = createRuntimeFn({ defaultClassName: "_3tjom70", variantClassNames: { disabled: { true: "_3tjom71" } }, defaultVariants: {}, compoundVariants: [] });
|
|
4
4
|
var checkbox = createRuntimeFn({ defaultClassName: "_3tjom72", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
|
|
@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { InputNumberFormat } from "@react-input/number-format";
|
|
3
3
|
import { forwardRef } from "react";
|
|
4
4
|
import "./Checkbox.js";
|
|
5
|
+
import "./DownPaymentInput.js";
|
|
5
6
|
import "./Dropdown.js";
|
|
6
7
|
import "./Dropdown.css.js";
|
|
7
8
|
import { Input } from "./Input.js";
|
|
@@ -9,7 +10,6 @@ import "./Input.css.js";
|
|
|
9
10
|
import "./InputAmount.js";
|
|
10
11
|
import "./InputPhone.js";
|
|
11
12
|
import "./InputTextArea.js";
|
|
12
|
-
import "./DownPaymentInput.js";
|
|
13
13
|
import "./RadioButton.js";
|
|
14
14
|
const CurrencyInput = forwardRef(
|
|
15
15
|
(props, ref) => {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const datePicker: string;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { SyntheticEvent } from 'react';
|
|
2
|
+
|
|
3
|
+
type TClasses = {
|
|
4
|
+
inputDateField?: string;
|
|
5
|
+
};
|
|
6
|
+
type TProps = {
|
|
7
|
+
classes?: TClasses;
|
|
8
|
+
isDisabled?: boolean;
|
|
9
|
+
isInvalid?: boolean;
|
|
10
|
+
locale?: Locale;
|
|
11
|
+
maxDate?: Date | null;
|
|
12
|
+
minDate?: Date | null;
|
|
13
|
+
onChange: (value: Date | null) => void;
|
|
14
|
+
onFieldClear?: (event: SyntheticEvent) => void;
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
subTitle?: string;
|
|
17
|
+
title?: string;
|
|
18
|
+
value: Date | null;
|
|
19
|
+
};
|
|
20
|
+
export declare const InputDateField: import('react').NamedExoticComponent<TProps>;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Popover, PopoverButton, Transition, PopoverPanel, TransitionChild } from "@headlessui/react";
|
|
4
|
+
import clsx from "clsx";
|
|
5
|
+
import { format } from "date-fns";
|
|
6
|
+
import isNil from "lodash/isNil.js";
|
|
7
|
+
import { memo, createRef, Fragment } from "react";
|
|
8
|
+
import { FORMAT_DATE } from "../utils/constants/format.js";
|
|
9
|
+
import { POPOVER_POSITION_STYLES } from "../utils/constants/popper.js";
|
|
10
|
+
import { usePopover } from "../utils/hooks/usePopover.js";
|
|
11
|
+
import { DatePicker } from "./DatePickerComponents/DatePicker.js";
|
|
12
|
+
import { InputDate } from "./DatePickerComponents/InputDate.js";
|
|
13
|
+
const InputDateFieldComponent = (props) => {
|
|
14
|
+
const {
|
|
15
|
+
classes,
|
|
16
|
+
isDisabled,
|
|
17
|
+
isInvalid,
|
|
18
|
+
locale,
|
|
19
|
+
maxDate,
|
|
20
|
+
minDate,
|
|
21
|
+
onChange,
|
|
22
|
+
onFieldClear,
|
|
23
|
+
placeholder,
|
|
24
|
+
subTitle,
|
|
25
|
+
title,
|
|
26
|
+
value
|
|
27
|
+
} = props;
|
|
28
|
+
const triggerRef = createRef();
|
|
29
|
+
const formattedValue = !isNil(value) ? format(value, FORMAT_DATE, { locale }) : null;
|
|
30
|
+
const date = !isNil(value) ? value : void 0;
|
|
31
|
+
const maxDateValue = !isNil(maxDate) ? maxDate : void 0;
|
|
32
|
+
const minDateValue = !isNil(minDate) ? minDate : void 0;
|
|
33
|
+
const {
|
|
34
|
+
attributes,
|
|
35
|
+
onPopperElement,
|
|
36
|
+
onReferenceElement,
|
|
37
|
+
popoverPosition,
|
|
38
|
+
styles
|
|
39
|
+
} = usePopover({
|
|
40
|
+
triggerRef
|
|
41
|
+
});
|
|
42
|
+
return /* @__PURE__ */ jsx("div", { className: clsx("InputDateField", classes?.inputDateField), children: /* @__PURE__ */ jsxs(Popover, { className: "HeadlessPopover", children: [
|
|
43
|
+
/* @__PURE__ */ jsx(
|
|
44
|
+
PopoverButton,
|
|
45
|
+
{
|
|
46
|
+
className: "HeadlessPopover-Button",
|
|
47
|
+
ref: onReferenceElement,
|
|
48
|
+
children: /* @__PURE__ */ jsx("div", { className: "HeadlessPopover-Trigger", ref: triggerRef, children: /* @__PURE__ */ jsx(
|
|
49
|
+
InputDate,
|
|
50
|
+
{
|
|
51
|
+
isDisabled,
|
|
52
|
+
isInvalid,
|
|
53
|
+
onFieldClear,
|
|
54
|
+
placeholder,
|
|
55
|
+
subTitle,
|
|
56
|
+
title,
|
|
57
|
+
value: formattedValue
|
|
58
|
+
}
|
|
59
|
+
) })
|
|
60
|
+
}
|
|
61
|
+
),
|
|
62
|
+
/* @__PURE__ */ jsx(Transition, { as: Fragment, children: /* @__PURE__ */ jsx(
|
|
63
|
+
PopoverPanel,
|
|
64
|
+
{
|
|
65
|
+
className: clsx(
|
|
66
|
+
"HeadlessPopover-Panel",
|
|
67
|
+
`HeadlessPopover-Panel__${POPOVER_POSITION_STYLES[popoverPosition]}`
|
|
68
|
+
),
|
|
69
|
+
ref: onPopperElement,
|
|
70
|
+
style: styles.popper,
|
|
71
|
+
...attributes.popper,
|
|
72
|
+
children: ({ close }) => /* @__PURE__ */ jsx(
|
|
73
|
+
TransitionChild,
|
|
74
|
+
{
|
|
75
|
+
enter: "HeadlessPopover-Transition__enter",
|
|
76
|
+
enterFrom: "HeadlessPopover-Transition__enterFrom",
|
|
77
|
+
enterTo: "HeadlessPopover-Transition__enterTo",
|
|
78
|
+
leave: "HeadlessPopover-Transition__leave",
|
|
79
|
+
leaveFrom: "HeadlessPopover-Transition__leaveFrom",
|
|
80
|
+
leaveTo: "HeadlessPopover-Transition__leaveTo",
|
|
81
|
+
children: /* @__PURE__ */ jsx("div", { className: "HeadlessPopover-PanelContent", children: /* @__PURE__ */ jsx(
|
|
82
|
+
DatePicker,
|
|
83
|
+
{
|
|
84
|
+
locale,
|
|
85
|
+
maxDate: maxDateValue,
|
|
86
|
+
minDate: minDateValue,
|
|
87
|
+
onChange: (date2) => {
|
|
88
|
+
onChange(date2);
|
|
89
|
+
close();
|
|
90
|
+
},
|
|
91
|
+
value: date
|
|
92
|
+
}
|
|
93
|
+
) })
|
|
94
|
+
}
|
|
95
|
+
)
|
|
96
|
+
}
|
|
97
|
+
) })
|
|
98
|
+
] }) });
|
|
99
|
+
};
|
|
100
|
+
const InputDateField = memo(InputDateFieldComponent);
|
|
101
|
+
export {
|
|
102
|
+
InputDateField
|
|
103
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { CalendarProps } from 'react-date-range';
|
|
2
|
+
|
|
3
|
+
type TProps = {
|
|
4
|
+
locale?: Locale;
|
|
5
|
+
maxDate?: Date;
|
|
6
|
+
minDate?: Date;
|
|
7
|
+
onChange?: (date: Date) => void;
|
|
8
|
+
value?: Date;
|
|
9
|
+
} & CalendarProps;
|
|
10
|
+
export declare const DatePicker: import('react').NamedExoticComponent<TProps>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { memo } from "react";
|
|
3
|
+
import { Calendar } from "react-date-range";
|
|
4
|
+
/* empty css */
|
|
5
|
+
/* empty css */
|
|
6
|
+
const DatePickerComponent = (props) => {
|
|
7
|
+
const { locale, onChange, value } = props;
|
|
8
|
+
return /* @__PURE__ */ jsx(Calendar, { ...props, date: value, locale, onChange });
|
|
9
|
+
};
|
|
10
|
+
const DatePicker = memo(DatePickerComponent);
|
|
11
|
+
export {
|
|
12
|
+
DatePicker
|
|
13
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { SyntheticEvent } from 'react';
|
|
2
|
+
|
|
3
|
+
type TProps = {
|
|
4
|
+
className?: string;
|
|
5
|
+
isDisabled?: boolean;
|
|
6
|
+
isInvalid?: boolean;
|
|
7
|
+
onClick?: (event: SyntheticEvent) => void;
|
|
8
|
+
onFieldClear?: (event: SyntheticEvent) => void;
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
subTitle?: string;
|
|
11
|
+
title?: string;
|
|
12
|
+
value?: string | null;
|
|
13
|
+
};
|
|
14
|
+
export declare const InputDate: import('react').NamedExoticComponent<TProps>;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { CalendarIcon } from "../../icons/CalendarIcon/CalendarIcon.js";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import { memo } from "react";
|
|
5
|
+
const InputDateComponent = (props) => {
|
|
6
|
+
const {
|
|
7
|
+
className,
|
|
8
|
+
isDisabled,
|
|
9
|
+
isInvalid,
|
|
10
|
+
onClick,
|
|
11
|
+
onFieldClear,
|
|
12
|
+
placeholder,
|
|
13
|
+
subTitle,
|
|
14
|
+
title,
|
|
15
|
+
value
|
|
16
|
+
} = props;
|
|
17
|
+
return /* @__PURE__ */ jsxs(
|
|
18
|
+
"div",
|
|
19
|
+
{
|
|
20
|
+
className: clsx("InputDate", className, {
|
|
21
|
+
InputDate__isDisabled: isDisabled,
|
|
22
|
+
InputDate__isInvalid: isInvalid && !isDisabled
|
|
23
|
+
}),
|
|
24
|
+
onClick: !isDisabled ? onClick : void 0,
|
|
25
|
+
children: [
|
|
26
|
+
/* @__PURE__ */ jsxs("div", { className: "InputDate-Inner", children: [
|
|
27
|
+
/* @__PURE__ */ jsxs("div", { className: "InputDate-Title", children: [
|
|
28
|
+
title,
|
|
29
|
+
" "
|
|
30
|
+
] }),
|
|
31
|
+
/* @__PURE__ */ jsxs(
|
|
32
|
+
"div",
|
|
33
|
+
{
|
|
34
|
+
className: clsx("InputDate-IconWrapper", {
|
|
35
|
+
"InputDate-IconWrapper__isFocusable": !isDisabled
|
|
36
|
+
}),
|
|
37
|
+
children: [
|
|
38
|
+
/* @__PURE__ */ jsx(
|
|
39
|
+
"div",
|
|
40
|
+
{
|
|
41
|
+
className: clsx("InputDate-Text", {
|
|
42
|
+
"InputDate-Text__isFilled": value && !isDisabled,
|
|
43
|
+
"InputDate-Text__isPlaceholder": !value
|
|
44
|
+
}),
|
|
45
|
+
children: value ?? placeholder
|
|
46
|
+
}
|
|
47
|
+
),
|
|
48
|
+
value && /* @__PURE__ */ jsx("div", { className: "InputDate-PostIcon", onClick: onFieldClear }),
|
|
49
|
+
/* @__PURE__ */ jsx("div", { className: "InputDate-DatePickerIcon", children: /* @__PURE__ */ jsx(CalendarIcon, {}) })
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ jsx("div", { className: "InputDate-Text__isInvalid" })
|
|
54
|
+
] }),
|
|
55
|
+
/* @__PURE__ */ jsxs("div", { className: "InputDate-SubTitle", children: [
|
|
56
|
+
subTitle,
|
|
57
|
+
" "
|
|
58
|
+
] })
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
};
|
|
63
|
+
const InputDate = memo(InputDateComponent);
|
|
64
|
+
export {
|
|
65
|
+
InputDate
|
|
66
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import DatePicker from "react-date-picker";
|
|
5
|
+
import { wrapper, labelClassName, container, iconContainer, iconInput, helperText } from "./Input.css.js";
|
|
6
|
+
const DatePickerInput = (props) => {
|
|
7
|
+
const {
|
|
8
|
+
disabled,
|
|
9
|
+
label,
|
|
10
|
+
iconLeft,
|
|
11
|
+
iconRight,
|
|
12
|
+
sizes,
|
|
13
|
+
error = false,
|
|
14
|
+
helperText: helper,
|
|
15
|
+
variant
|
|
16
|
+
} = props;
|
|
17
|
+
const [value, onChange] = useState();
|
|
18
|
+
return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
|
|
19
|
+
label && /* @__PURE__ */ jsx(
|
|
20
|
+
"label",
|
|
21
|
+
{
|
|
22
|
+
className: labelClassName({ error, variant }),
|
|
23
|
+
htmlFor: props.name,
|
|
24
|
+
children: label
|
|
25
|
+
}
|
|
26
|
+
),
|
|
27
|
+
/* @__PURE__ */ jsxs("div", { className: container({ size: sizes, error }), children: [
|
|
28
|
+
iconLeft && /* @__PURE__ */ jsx("span", { className: iconContainer["left"], children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconLeft }) }),
|
|
29
|
+
/* @__PURE__ */ jsx(
|
|
30
|
+
DatePicker,
|
|
31
|
+
{
|
|
32
|
+
dayPlaceholder: "dd",
|
|
33
|
+
monthPlaceholder: "mm",
|
|
34
|
+
yearPlaceholder: "yyyy",
|
|
35
|
+
minDate: /* @__PURE__ */ new Date(),
|
|
36
|
+
onChange,
|
|
37
|
+
value
|
|
38
|
+
}
|
|
39
|
+
),
|
|
40
|
+
iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })
|
|
41
|
+
] }),
|
|
42
|
+
/* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
|
|
43
|
+
] });
|
|
44
|
+
};
|
|
45
|
+
export {
|
|
46
|
+
DatePickerInput
|
|
47
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* empty css
|
|
2
|
-
/* empty css
|
|
1
|
+
/* empty css */
|
|
2
|
+
/* empty css */
|
|
3
3
|
import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
4
4
|
var selectInput = "_1vzv2cd0";
|
|
5
5
|
var dp_input = createRuntimeFn({ defaultClassName: "_1vzv2cd1", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
|
package/dist/Input/Input.css.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
/* empty css
|
|
2
|
-
/* empty css
|
|
3
|
-
/* empty css
|
|
4
|
-
/* empty css
|
|
1
|
+
/* empty css */
|
|
2
|
+
/* empty css */
|
|
3
|
+
/* empty css */
|
|
4
|
+
/* empty css */
|
|
5
5
|
import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
6
6
|
var iconInput = createRuntimeFn({ defaultClassName: "_18du0la0", variantClassNames: { size: { small: "_18du0la1", medium: "_18du0la2", large: "_18du0la3" } }, defaultVariants: {}, compoundVariants: [] });
|
|
7
7
|
var labelClassName = createRuntimeFn({ defaultClassName: "_18du0la4", variantClassNames: { variant: { primary: "_18du0la5", secondary: "_18du0la6", tertiary: "_18du0la7", quaternary: "_18du0la8" }, error: { true: "_18du0la9" }, disabled: { true: "_18du0laa" }, isCheckbox: { true: "_18du0lab" } }, defaultVariants: {}, compoundVariants: [] });
|
|
@@ -3,13 +3,13 @@ import { InputMask } from "@react-input/mask";
|
|
|
3
3
|
import { forwardRef } from "react";
|
|
4
4
|
import "./Checkbox.js";
|
|
5
5
|
import "./CurrencyInput.js";
|
|
6
|
+
import "./DownPaymentInput.js";
|
|
6
7
|
import "./Dropdown.js";
|
|
7
8
|
import "./Dropdown.css.js";
|
|
8
9
|
import { Input } from "./Input.js";
|
|
9
10
|
import "./Input.css.js";
|
|
10
11
|
import "./InputPhone.js";
|
|
11
12
|
import "./InputTextArea.js";
|
|
12
|
-
import "./DownPaymentInput.js";
|
|
13
13
|
import "./RadioButton.js";
|
|
14
14
|
const InputAmount = forwardRef(
|
|
15
15
|
(props, ref) => {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* empty css */
|
|
2
|
+
var calendarContainer = "skzved0";
|
|
3
|
+
var calendarIcon = "skzved1";
|
|
4
|
+
var inputDate = "skzved2";
|
|
5
|
+
var verticalCenter = "skzved3";
|
|
6
|
+
var calendar = "skzved4";
|
|
7
|
+
var headerCalendar = "skzved5";
|
|
8
|
+
export {
|
|
9
|
+
calendar,
|
|
10
|
+
calendarContainer,
|
|
11
|
+
calendarIcon,
|
|
12
|
+
headerCalendar,
|
|
13
|
+
inputDate,
|
|
14
|
+
verticalCenter
|
|
15
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import DatePicker from "react-date-picker";
|
|
5
|
+
import { wrapper, labelClassName, container, iconContainer, iconInput, helperText } from "./Input.css.js";
|
|
6
|
+
const InputDate = (props) => {
|
|
7
|
+
const {
|
|
8
|
+
disabled,
|
|
9
|
+
label,
|
|
10
|
+
iconLeft,
|
|
11
|
+
iconRight,
|
|
12
|
+
sizes,
|
|
13
|
+
error = false,
|
|
14
|
+
helperText: helper,
|
|
15
|
+
variant
|
|
16
|
+
} = props;
|
|
17
|
+
const [value, onChange] = useState();
|
|
18
|
+
return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
|
|
19
|
+
label && /* @__PURE__ */ jsx(
|
|
20
|
+
"label",
|
|
21
|
+
{
|
|
22
|
+
className: labelClassName({ error, variant }),
|
|
23
|
+
htmlFor: props.name,
|
|
24
|
+
children: label
|
|
25
|
+
}
|
|
26
|
+
),
|
|
27
|
+
/* @__PURE__ */ jsxs("div", { className: container({ size: sizes, error }), children: [
|
|
28
|
+
iconLeft && /* @__PURE__ */ jsx("span", { className: iconContainer["left"], children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconLeft }) }),
|
|
29
|
+
/* @__PURE__ */ jsx(
|
|
30
|
+
DatePicker,
|
|
31
|
+
{
|
|
32
|
+
dayPlaceholder: "dd",
|
|
33
|
+
monthPlaceholder: "mm",
|
|
34
|
+
yearPlaceholder: "yyyy",
|
|
35
|
+
minDate: /* @__PURE__ */ new Date(),
|
|
36
|
+
onChange,
|
|
37
|
+
value
|
|
38
|
+
}
|
|
39
|
+
),
|
|
40
|
+
iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })
|
|
41
|
+
] }),
|
|
42
|
+
/* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
|
|
43
|
+
] });
|
|
44
|
+
};
|
|
45
|
+
export {
|
|
46
|
+
InputDate
|
|
47
|
+
};
|
package/dist/Input/InputPhone.js
CHANGED
|
@@ -3,13 +3,13 @@ import { InputMask } from "@react-input/mask";
|
|
|
3
3
|
import { forwardRef } from "react";
|
|
4
4
|
import "./Checkbox.js";
|
|
5
5
|
import "./CurrencyInput.js";
|
|
6
|
+
import "./DownPaymentInput.js";
|
|
6
7
|
import "./Dropdown.js";
|
|
7
8
|
import "./Dropdown.css.js";
|
|
8
9
|
import { Input } from "./Input.js";
|
|
9
10
|
import "./Input.css.js";
|
|
10
11
|
import "./InputAmount.js";
|
|
11
12
|
import "./InputTextArea.js";
|
|
12
|
-
import "./DownPaymentInput.js";
|
|
13
13
|
import "./RadioButton.js";
|
|
14
14
|
const InputPhone = forwardRef(
|
|
15
15
|
(props, ref) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* empty css
|
|
1
|
+
/* empty css */
|
|
2
2
|
import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
3
3
|
var fieldset = createRuntimeFn({ defaultClassName: "_1gnyc3c0", variantClassNames: { direction: { row: "_1gnyc3c1", column: "_1gnyc3c2", "default": "_1gnyc3c3" } }, defaultVariants: {}, compoundVariants: [] });
|
|
4
4
|
var fieldset_wrapper = "_1gnyc3c4";
|
package/dist/Input/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export * from './Checkbox';
|
|
2
2
|
export * from './CurrencyInput';
|
|
3
|
+
export * from './DownPaymentInput';
|
|
3
4
|
export * from './Dropdown';
|
|
4
5
|
export * from './Dropdown.css';
|
|
5
6
|
export * from './Input';
|
|
@@ -8,5 +9,4 @@ export * from './InputAmount';
|
|
|
8
9
|
export * from './InputPhone';
|
|
9
10
|
export * from './InputProps';
|
|
10
11
|
export * from './InputTextArea';
|
|
11
|
-
export * from './DownPaymentInput';
|
|
12
12
|
export * from './RadioButton';
|
package/dist/Input/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Checkbox } from "./Checkbox.js";
|
|
2
2
|
import { CurrencyInput } from "./CurrencyInput.js";
|
|
3
|
+
import { DownPaymentInput } from "./DownPaymentInput.js";
|
|
3
4
|
import { Dropdown } from "./Dropdown.js";
|
|
4
5
|
import { dp_input, selectInput } from "./Dropdown.css.js";
|
|
5
6
|
import { Input } from "./Input.js";
|
|
@@ -7,7 +8,6 @@ import { container, helperText, iconContainer, iconContainerBase, iconInput, inp
|
|
|
7
8
|
import { InputAmount } from "./InputAmount.js";
|
|
8
9
|
import { InputPhone } from "./InputPhone.js";
|
|
9
10
|
import { InputTextArea } from "./InputTextArea.js";
|
|
10
|
-
import { DownPaymentInput } from "./DownPaymentInput.js";
|
|
11
11
|
import { RadioButton, RadioButtonSet } from "./RadioButton.js";
|
|
12
12
|
export {
|
|
13
13
|
Checkbox,
|
package/dist/Inputs/Input.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/* empty css
|
|
2
|
-
/* empty css
|
|
3
|
-
/* empty css
|
|
1
|
+
/* empty css */
|
|
2
|
+
/* empty css */
|
|
3
|
+
/* empty css */
|
|
4
4
|
import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
5
5
|
var icon = createRuntimeFn({ defaultClassName: "_157e2fz0", variantClassNames: { size: { small: "_157e2fz1", medium: "_157e2fz2", large: "_157e2fz3" } }, defaultVariants: {}, compoundVariants: [] });
|
|
6
6
|
var labelClassName = createRuntimeFn({ defaultClassName: "_157e2fz4", variantClassNames: { error: { true: "_157e2fz5" }, disabled: { true: "_157e2fz6" } }, defaultVariants: {}, compoundVariants: [] });
|