@elliemae/ds-form-date-time-picker 3.0.0-next.67 → 3.0.0-next.70
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/cjs/ControlledDateTimePicker.js +1 -1
- package/dist/cjs/ControlledDateTimePicker.js.map +2 -2
- package/dist/cjs/ControlledDateTimePickerDatatestid.js +8 -0
- package/dist/cjs/ControlledDateTimePickerDatatestid.js.map +2 -2
- package/dist/cjs/config/useControlledDateTimePicker.js +7 -4
- package/dist/cjs/config/useControlledDateTimePicker.js.map +2 -2
- package/dist/cjs/exported-related/theming.js +65 -0
- package/dist/cjs/exported-related/theming.js.map +7 -0
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/ControlledDateTimePickerContent.js +8 -5
- package/dist/cjs/parts/ControlledDateTimePickerContent.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarFooter.js +3 -1
- package/dist/cjs/parts/Pickers/Calendar/CalendarFooter.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarHead.js +3 -1
- package/dist/cjs/parts/Pickers/Calendar/CalendarHead.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/Styleds.js +18 -14
- package/dist/cjs/parts/Pickers/Calendar/Styleds.js.map +2 -2
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js +3 -1
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js.map +2 -2
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/Styleds.js +12 -5
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/Styleds.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js +17 -11
- package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelContent.js +3 -1
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelContent.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelFooter.js +3 -1
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelFooter.js.map +2 -2
- package/dist/cjs/parts/Styleds.js +17 -12
- package/dist/cjs/parts/Styleds.js.map +2 -2
- package/dist/cjs/propTypes.js +19 -2
- package/dist/cjs/propTypes.js.map +2 -2
- package/dist/esm/ControlledDateTimePicker.js +1 -1
- package/dist/esm/ControlledDateTimePicker.js.map +2 -2
- package/dist/esm/ControlledDateTimePickerDatatestid.js +8 -0
- package/dist/esm/ControlledDateTimePickerDatatestid.js.map +2 -2
- package/dist/esm/config/useControlledDateTimePicker.js +8 -5
- package/dist/esm/config/useControlledDateTimePicker.js.map +2 -2
- package/dist/esm/exported-related/theming.js +43 -0
- package/dist/esm/exported-related/theming.js.map +7 -0
- package/dist/esm/index.js +4 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/parts/ControlledDateTimePickerContent.js +9 -6
- package/dist/esm/parts/ControlledDateTimePickerContent.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarFooter.js +3 -1
- package/dist/esm/parts/Pickers/Calendar/CalendarFooter.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarHead.js +4 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarHead.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/Styleds.js +14 -10
- package/dist/esm/parts/Pickers/Calendar/Styleds.js.map +2 -2
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js +3 -1
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js.map +2 -2
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/Styleds.js +10 -3
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/Styleds.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/Styleds.js +13 -7
- package/dist/esm/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelContent.js +3 -1
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelContent.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelFooter.js +3 -1
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelFooter.js.map +2 -2
- package/dist/esm/parts/Styleds.js +9 -4
- package/dist/esm/parts/Styleds.js.map +2 -2
- package/dist/esm/propTypes.js +22 -3
- package/dist/esm/propTypes.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/Styleds.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASG,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI5D,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYpB,MAAM,sBAAsB;AAAA,EAC1B,SAAS;AAAA,wBACa,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA,4BAC9B,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA,EAE5D,YAAY;AAAA,wBACU,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA,4BAE9B,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA,EAE5D,UAAU;AAAA,wBACY,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAG1D;AAEO,MAAM,0BAA0B,OAAO,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { COMPONENT_NAME, slots } from '../../../exported-related/theming';\n\nconst diagonalLine = css`\n &:before {\n position: absolute;\n content: '';\n top: 48%;\n left: -2px;\n height: 1px;\n width: calc(100% + 4px);\n transform: rotate(45deg);\n background-color: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nconst focusBorder = css`\n &:after {\n position: absolute;\n content: '';\n top: -4px;\n left: -4px;\n width: calc(100% + 8px);\n height: calc(100% + 8px);\n border-radius: 50%;\n }\n`;\n\nconst backgroundDateRange = {\n inRange: css`\n background-color: ${({ theme }) => theme.colors.brand[200]};\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n `,\n startRange: css`\n background-color: ${({ theme }) => theme.colors.brand[200]};\n border-radius: 50% 0 0 50%;\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n `,\n endRange: css`\n background-color: ${({ theme }) => theme.colors.brand[200]};\n border-radius: 0 50% 50% 0;\n `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, { name: COMPONENT_NAME, slot: slots.PICKER_ICONS.CALENDAR })`\n color: ${({ theme }) => theme.colors.brand['600']};\n width: 26px;\n height: 26px;\n`;\n\nexport const StyledShadowWrapper = styled.div<{ isControllerOnly: boolean }>`\n ${({ isControllerOnly }) =>\n isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);'}\n`;\n\nexport const StyledCalendarWrapper = styled.div`\n display: grid;\n width: 260px;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled.section`\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n display: grid;\n padding: ${({ theme }) => theme.space.xxxs};\n grid-template-columns: min-content min-content 1fr min-content min-content;\n grid-template-rows: 1fr;\n align-items: center;\n justify-content: center;\n text-align: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledHeaderLabel = styled('h3', { name: COMPONENT_NAME, slot: slots.CALENDAR.HEADER_LABEL })`\n font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, { name: COMPONENT_NAME, slot: slots.CALENDAR.HEADER_BUTTON })`\n position: relative;\n width: 28px;\n height: 28px;\n &:focus {\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n &:hover {\n background: ${({ theme }) => theme.colors.brand[200]};\n }\n`;\n\nexport const StyledBody = styled.section`\n padding: ${({ theme }) => theme.space.xxxs};\n`;\n\nexport const StyledDayBtn = styled(DSButtonV2, { name: COMPONENT_NAME, slot: slots.CALENDAR.DAY_BUTTON })`\n height: 32px;\n width: 32px;\n border-radius: 50%;\n position: relative;\n border-width: 2px;\n border-style: solid;\n border-color: transparent;\n line-height: 1;\n color: ${({ theme }) => theme.colors.neutral[800]};\n &:hover {\n cursor: pointer;\n color: ${({ theme }) => theme.colors.brand[700]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n }\n &:focus {\n ${focusBorder}\n }\n`;\n\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n name: COMPONENT_NAME,\n slot: slots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})`\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n text-align: center;\n ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n .dayWrapper.selectedDay,\n .dayWrapper.startRangeDay,\n .dayWrapper.endRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n }\n\n &:not(.disabledDay),\n &:not(.outOfRangeDay) {\n ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.brand[700]};\n }\n }\n\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n background-color: ${({ theme }) => theme.colors.danger[900]};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n border-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n &.outOfRangeDay.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n .dayWrapper.disabledDay,\n .dayWrapper.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n ${diagonalLine}\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n &.focusedDay {\n ${StyledDayBtn} {\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.danger[900]};\n }\n }\n }\n }\n\n .dayWrapper.focusedDay {\n ${StyledDayBtn} {\n ${focusBorder}\n color: ${({ theme }) => theme.colors.brand[600]};\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.danger[900]};\n &:before {\n background-color: ${({ theme }) => theme.colors.danger[900]};\n }\n }\n }\n }\n\n .dayWrapper.notCurrentMonth {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.brand[600]};\n }\n\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.danger[900]};\n }\n\n &.inRangeDay,\n &.startRangeDay,\n &.endRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n &.selectedDay,\n &.startRangeDay,\n &.endRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n\n .dayWrapper.inRangeDay {\n ${backgroundDateRange.inRange}\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n background-color: ${({ theme }) => theme.colors.danger[900]};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n &.focusedDay {\n ${StyledDayBtn} {\n border-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n .dayWrapper.startRangeDay {\n ${backgroundDateRange.startRange}\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n .dayWrapper.endRangeDay {\n ${backgroundDateRange.endRange}\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n .dayWrapper.endRangeDay.startRangeDay {\n background-color: transparent;\n box-shadow: none;\n }\n`;\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n width: ${({ theme }) => theme.space.s};\n min-width: ${({ theme }) => theme.space.s};\n`;\n\nexport const CalendarFooterMessage = styled('footer', { name: COMPONENT_NAME, slot: slots.FOOTERS.CALENDAR_TIMEWHEEL })`\n border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n margin: 0 ${({ theme }) => theme.space.xxs2};\n padding: ${({ theme }) => theme.space.xxs2} 0;\n color: ${({ theme }) => theme.colors.danger[900]};\n font-style: italic;\n font-weight: ${({ theme }) => theme.fontWeights.thin};\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n background-color: white;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2, { useContext } from "react";
|
|
3
|
+
import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
|
|
3
4
|
import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
|
|
4
5
|
import { CalendarWithTimeWheelFooterMessage } from "./Styleds";
|
|
5
6
|
const CalendarWithTimeWheelFooter = () => {
|
|
@@ -7,7 +8,8 @@ const CalendarWithTimeWheelFooter = () => {
|
|
|
7
8
|
props: { pickerFooterMsg, hasError }
|
|
8
9
|
} = useContext(ControlledDateTimePickerContext);
|
|
9
10
|
return pickerFooterMsg !== void 0 && hasError ? /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelFooterMessage, {
|
|
10
|
-
role: "alert"
|
|
11
|
+
role: "alert",
|
|
12
|
+
"data-testid": ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL
|
|
11
13
|
}, pickerFooterMsg) : null;
|
|
12
14
|
};
|
|
13
15
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarWithTimeWheelFooterMessage } from './Styleds';\n\nexport const CalendarWithTimeWheelFooter: React.ComponentType = () => {\n const {\n props: { pickerFooterMsg, hasError },\n } = useContext(ControlledDateTimePickerContext);\n return pickerFooterMsg !== undefined && hasError ? (\n <CalendarWithTimeWheelFooterMessage
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,MACxB,WAAW,+BAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC,qCAAC;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarWithTimeWheelFooterMessage } from './Styleds';\n\nexport const CalendarWithTimeWheelFooter: React.ComponentType = () => {\n const {\n props: { pickerFooterMsg, hasError },\n } = useContext(ControlledDateTimePickerContext);\n return pickerFooterMsg !== undefined && hasError ? (\n <CalendarWithTimeWheelFooterMessage\n role=\"alert\"\n data-testid={ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL}\n >\n {pickerFooterMsg}\n </CalendarWithTimeWheelFooterMessage>\n ) : null;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEO,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,MACxB,WAAW,+BAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAa,mCAAmC,QAAQ;AAAA,KAEvD,eACH,IACE;AACN;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import styled from "
|
|
2
|
+
import { styled } from "@elliemae/ds-system";
|
|
3
3
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
4
4
|
import { CalendarContent } from "../Calendar/CalendarContent";
|
|
5
|
-
|
|
5
|
+
import { COMPONENT_NAME, slots } from "../../../exported-related/theming";
|
|
6
|
+
const StyledIconTriggerButton = styled(DSButtonV2, {
|
|
7
|
+
name: COMPONENT_NAME,
|
|
8
|
+
slot: slots.PICKER_ICONS.CALENDAR_TIMEWHEEL
|
|
9
|
+
})`
|
|
6
10
|
color: ${({ theme }) => theme.colors.brand["600"]};
|
|
7
11
|
width: 26px;
|
|
8
12
|
height: 26px;
|
|
@@ -22,7 +26,10 @@ const StyledCalendarWithTimeWheelWrapper = styled.div`
|
|
|
22
26
|
const StyledCalendar = styled(CalendarContent)`
|
|
23
27
|
box-shadow: none;
|
|
24
28
|
`;
|
|
25
|
-
const CalendarWithTimeWheelFooterMessage = styled
|
|
29
|
+
const CalendarWithTimeWheelFooterMessage = styled("footer", {
|
|
30
|
+
name: COMPONENT_NAME,
|
|
31
|
+
slot: slots.FOOTERS.CALENDAR_TIMEWHEEL
|
|
32
|
+
})`
|
|
26
33
|
border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};
|
|
27
34
|
margin: 0 ${({ theme }) => theme.space.xxs2};
|
|
28
35
|
padding: ${({ theme }) => theme.space.xxs2} 0;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/Styleds.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from '
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,0BAA0B,OAAO,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { CalendarContent } from '../Calendar/CalendarContent';\nimport { COMPONENT_NAME, slots } from '../../../exported-related/theming';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n name: COMPONENT_NAME,\n slot: slots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n color: ${({ theme }) => theme.colors.brand['600']};\n width: 26px;\n height: 26px;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled.div`\n background: ${({ theme }) => theme.colors.neutral['000']};\n ${({ isControllerOnly }) =>\n isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);'}\n display: grid;\n grid-template-columns: 260px 192px;\n grid-template-rows: 1fr;\n column-gap: 0;\n\n & > div:last-of-type {\n box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};\n }\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('footer', {\n name: COMPONENT_NAME,\n slot: slots.FOOTERS.CALENDAR_TIMEWHEEL,\n})`\n border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n margin: 0 ${({ theme }) => theme.space.xxs2};\n padding: ${({ theme }) => theme.space.xxs2} 0;\n color: ${({ theme }) => theme.colors.danger[900]};\n font-style: italic;\n font-weight: ${({ theme }) => theme.fontWeights.thin};\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n grid-column: 1/3;\n background-color: white;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEO,MAAM,0BAA0B,OAAO,YAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,MAAM,aAAa;AAC3B,CAAC;AAAA,WACU,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKtC,MAAM,qCAAqC,OAAO;AAAA,gBACzC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,IAChD,CAAC,EAAE,uBACH,mBAAmB,SAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAON,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1D,MAAM,iBAAiB,OAAO,eAAe;AAAA;AAAA;AAI7C,MAAM,qCAAqC,OAAO,UAAU;AAAA,EACjE,MAAM;AAAA,EACN,MAAM,MAAM,QAAQ;AACtB,CAAC;AAAA,0BACyB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,cAChD,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,aAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAC7B,CAAC,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA;AAAA,iBAE7B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,eACnC,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import styled from "
|
|
3
|
-
import { css } from "@elliemae/ds-system";
|
|
2
|
+
import { css, styled } from "@elliemae/ds-system";
|
|
4
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
4
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
5
|
+
import { COMPONENT_NAME, slots } from "../../../exported-related/theming";
|
|
6
6
|
const focusBorder = css`
|
|
7
7
|
&:after {
|
|
8
8
|
position: absolute;
|
|
@@ -55,7 +55,10 @@ const hoverBgPerStatus = css`
|
|
|
55
55
|
return theme.colors.neutral["000"];
|
|
56
56
|
}}
|
|
57
57
|
`;
|
|
58
|
-
const StyledIconTriggerButton = styled(DSButtonV2
|
|
58
|
+
const StyledIconTriggerButton = styled(DSButtonV2, {
|
|
59
|
+
name: COMPONENT_NAME,
|
|
60
|
+
slot: slots.PICKER_ICONS.TIMEWHEEL
|
|
61
|
+
})`
|
|
59
62
|
color: ${({ theme }) => theme.colors.brand["600"]};
|
|
60
63
|
width: 26px;
|
|
61
64
|
height: 26px;
|
|
@@ -96,7 +99,7 @@ const StyledTimePickerContainer = styled.div`
|
|
|
96
99
|
box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);
|
|
97
100
|
` : ""}
|
|
98
101
|
`;
|
|
99
|
-
const StyledTimePickerHead = styled(Grid)`
|
|
102
|
+
const StyledTimePickerHead = styled(Grid, { name: COMPONENT_NAME, slot: slots.TIMEWHEEL.HEADER_LABEL })`
|
|
100
103
|
width: 100%;
|
|
101
104
|
grid-area: TimePickerHead;
|
|
102
105
|
justify-content: center;
|
|
@@ -134,7 +137,7 @@ const StyledTimePickerWheelWrapper = styled.div`
|
|
|
134
137
|
}
|
|
135
138
|
}
|
|
136
139
|
`;
|
|
137
|
-
const StyledTimeBtn = styled(DSButtonV2)`
|
|
140
|
+
const StyledTimeBtn = styled(DSButtonV2, { name: COMPONENT_NAME, slot: slots.TIMEWHEEL.TIME_BUTTON })`
|
|
138
141
|
position: relative;
|
|
139
142
|
height: ${({ theme }) => theme.space.s};
|
|
140
143
|
width: ${({ theme }) => theme.space.s};
|
|
@@ -167,13 +170,16 @@ const StyledWheelListItem = styled.div`
|
|
|
167
170
|
justify-content: center;
|
|
168
171
|
position: relative;
|
|
169
172
|
`;
|
|
170
|
-
const StyledWheelChangeTimeBtn = styled(DSButtonV2
|
|
173
|
+
const StyledWheelChangeTimeBtn = styled(DSButtonV2, {
|
|
174
|
+
name: COMPONENT_NAME,
|
|
175
|
+
slot: slots.TIMEWHEEL.TIME_CHANGE_BUTTON
|
|
176
|
+
})`
|
|
171
177
|
height: ${({ theme }) => theme.space.s};
|
|
172
178
|
width: ${({ theme }) => theme.space.s};
|
|
173
179
|
min-width: ${({ theme }) => theme.space.s};
|
|
174
180
|
border-radius: 50%;
|
|
175
181
|
`;
|
|
176
|
-
const TimeWheelFooterMessage = styled.
|
|
182
|
+
const TimeWheelFooterMessage = styled("footer", { name: COMPONENT_NAME, slot: slots.FOOTERS.TIMEWHEEL })`
|
|
177
183
|
border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};
|
|
178
184
|
margin: 0 ${({ theme }) => theme.space.xxs2};
|
|
179
185
|
padding: ${({ theme }) => theme.space.xxs2} 0;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/Styleds.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/indent */\nimport
|
|
5
|
-
"mappings": "AAAA;ACEA;AACA;AACA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/indent */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { COMPONENT_NAME, slots } from '../../../exported-related/theming';\n\ninterface StyledWheelListItemPropsT {\n isCurrentListItem?: boolean;\n selected?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n showShadow?: boolean;\n isControllerOnly: boolean;\n}\n\nconst focusBorder = css`\n &:after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n border-radius: 50%;\n border: 2px solid ${({ theme, isDisabled }) => (isDisabled ? theme.colors.danger[900] : theme.colors.brand[700])};\n }\n`;\n\nconst diagonalLine = css`\n &:before {\n position: absolute;\n content: '';\n top: 48%;\n left: -1px;\n height: 1px;\n width: calc(100% + 2px);\n transform: rotate(45deg);\n background-color: ${({ theme, isCurrentListItem, selected }) => {\n if (selected) return theme.colors.neutral['000'];\n if (isCurrentListItem) return theme.colors.danger[900];\n return theme.colors.neutral[500];\n }};\n }\n`;\n\nconst fontColorPerStatus = css`\n ${({ theme, isDisabled, isCurrentListItem, selected }) => {\n if (selected) return theme.colors.neutral['000'];\n if (isDisabled && isCurrentListItem) return theme.colors.danger[900];\n if (isDisabled) return theme.colors.neutral[500];\n if (isCurrentListItem) return theme.colors.brand[600];\n return theme.colors.neutral[800];\n }};\n`;\n\nconst hoverBgPerStatus = css`\n ${({ theme, selected, isDisabled }) => {\n if (isDisabled && selected) return theme.colors.danger[900];\n if (selected) return theme.colors.brand[700];\n return theme.colors.neutral['000'];\n }}\n`;\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n name: COMPONENT_NAME,\n slot: slots.PICKER_ICONS.TIMEWHEEL,\n})`\n color: ${({ theme }) => theme.colors.brand['600']};\n width: 26px;\n height: 26px;\n`;\n\nexport const StyledWheelList = styled.div`\n width: 100%;\n height: 100%;\n margin: auto;\n padding: 0;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n &:focus-within {\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nexport const StyledTimePickerContainer = styled.div<StyledTimePickerContainerT>`\n display: grid;\n position: relative;\n grid-template-columns: 192px;\n grid-template-rows: 36px 30px auto;\n grid-template-areas:\n 'TimePickerHead'\n 'TimePickerWheelsLegend'\n 'VerticalWheelWrapper';\n ${({ showShadow, isControllerOnly }) =>\n showShadow && !isControllerOnly\n ? `\n box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);\n `\n : ''}\n`;\n\nexport const StyledTimePickerHead = styled(Grid, { name: COMPONENT_NAME, slot: slots.TIMEWHEEL.HEADER_LABEL })`\n width: 100%;\n grid-area: TimePickerHead;\n justify-content: center;\n align-items: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n width: 100%;\n height: 100;\n grid-area: TimePickerWheelsLegend;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n align-items: center;\n justify-content: center;\n text-align: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div`\n width: 100%;\n background: ${({ theme }) => theme.colors.neutral['000']};\n grid-area: VerticalWheelWrapper;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n grid-template-rows: 100%;\n & ul:not(:last-child) {\n position: relative;\n &:after {\n content: '';\n position: absolute;\n left: 100%;\n top: 5%;\n height: 90%;\n width: 1px;\n background: ${({ theme }) => theme.colors.neutral[200]};\n }\n }\n`;\n\nexport const StyledTimeBtn = styled(DSButtonV2, { name: COMPONENT_NAME, slot: slots.TIMEWHEEL.TIME_BUTTON })`\n position: relative;\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n\n &:hover {\n background-color: ${hoverBgPerStatus};\n }\n\n color: ${fontColorPerStatus};\n\n ${({ selected, isCurrentListItem }) => (isCurrentListItem && !selected ? focusBorder : ``)}\n\n ${({ isDisabled }) =>\n isDisabled\n ? css`\n cursor: not-allowed;\n ${diagonalLine};\n `\n : ``}\n\n ${({ theme, selected, isDisabled }) =>\n selected\n ? css`\n font-weight: ${theme.fontWeights.semibold};\n background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};\n `\n : ``};\n`;\n\nexport const StyledWheelListItem = styled.div<StyledWheelListItemPropsT>`\n margin: auto;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n name: COMPONENT_NAME,\n slot: slots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n min-width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('footer', { name: COMPONENT_NAME, slot: slots.FOOTERS.TIMEWHEEL })`\n border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n margin: 0 ${({ theme }) => theme.space.xxs2};\n padding: ${({ theme }) => theme.space.xxs2} 0;\n color: ${({ theme }) => theme.colors.danger[900]};\n font-style: italic;\n font-weight: ${({ theme }) => theme.fontWeights.thin};\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n background-color: white;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AAYA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASI,CAAC,EAAE,OAAO,iBAAkB,aAAa,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAI/G,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASG,CAAC,EAAE,OAAO,mBAAmB,eAAe;AAC9D,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,MAAI;AAAmB,WAAO,MAAM,OAAO,OAAO;AAClD,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAAA;AAIJ,MAAM,qBAAqB;AAAA,IACvB,CAAC,EAAE,OAAO,YAAY,mBAAmB,eAAe;AACxD,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,MAAI,cAAc;AAAmB,WAAO,MAAM,OAAO,OAAO;AAChE,MAAI;AAAY,WAAO,MAAM,OAAO,QAAQ;AAC5C,MAAI;AAAmB,WAAO,MAAM,OAAO,MAAM;AACjD,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAGF,MAAM,mBAAmB;AAAA,IACrB,CAAC,EAAE,OAAO,UAAU,iBAAiB;AACrC,MAAI,cAAc;AAAU,WAAO,MAAM,OAAO,OAAO;AACvD,MAAI;AAAU,WAAO,MAAM,OAAO,MAAM;AACxC,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAGK,MAAM,0BAA0B,OAAO,YAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,MAAM,aAAa;AAC3B,CAAC;AAAA,WACU,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKtC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAkBZ,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA,4BAChC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKvD,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAS5C,CAAC,EAAE,YAAY,uBACf,cAAc,CAAC,mBACX;AAAA;AAAA,MAGA;AAAA;AAGD,MAAM,uBAAuB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,MAAM,UAAU,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK7F,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAG7C,MAAM,+BAA+B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKxB,CAAC,EAAE,YAAY,MAAM,MAAM,MAAM,CAAC,EAAE,YAAY,MAAM,MAAM,MAAM,CAAC,EAAE,YAC1F,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,gBAIF,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAG7C,MAAM,+BAA+B,OAAO;AAAA;AAAA,gBAEnC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,2BAGzB,CAAC,EAAE,YAAY,MAAM,MAAM,MAAM,CAAC,EAAE,YAAY,MAAM,MAAM,MAAM,CAAC,EAAE,YAC1F,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWE,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKjD,MAAM,gBAAgB,OAAO,YAAY,EAAE,MAAM,gBAAgB,MAAM,MAAM,UAAU,YAAY,CAAC;AAAA;AAAA,YAE/F,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,wBAId;AAAA;AAAA;AAAA,WAGb;AAAA;AAAA,IAEP,CAAC,EAAE,UAAU,wBAAyB,qBAAqB,CAAC,WAAW,cAAc;AAAA;AAAA,IAErF,CAAC,EAAE,iBACH,aACI;AAAA;AAAA,YAEI;AAAA,YAEJ;AAAA;AAAA,IAEJ,CAAC,EAAE,OAAO,UAAU,iBACpB,WACI;AAAA,mBACW,MAAM,YAAY;AAAA,uBACd,aAAa,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM;AAAA,QAE1E;AAAA;AAGD,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUnC,MAAM,2BAA2B,OAAO,YAAY;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,MAAM,UAAU;AACxB,CAAC;AAAA,YACW,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eACvB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAInC,MAAM,yBAAyB,OAAO,UAAU,EAAE,MAAM,gBAAgB,MAAM,MAAM,QAAQ,UAAU,CAAC;AAAA,0BACpF,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,cAChD,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,aAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAC7B,CAAC,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA;AAAA,iBAE7B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,eACnC,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,7 +18,9 @@ const TimeWheelContent = React2.memo(({ showShadow }) => {
|
|
|
18
18
|
showShadow,
|
|
19
19
|
isControllerOnly,
|
|
20
20
|
"data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
|
|
21
|
-
}, /* @__PURE__ */ React2.createElement(StyledTimePickerHead,
|
|
21
|
+
}, /* @__PURE__ */ React2.createElement(StyledTimePickerHead, {
|
|
22
|
+
"data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL
|
|
23
|
+
}, `${hours || "__"}:${minutes || "__"} ${meridiem || "__"}`), /* @__PURE__ */ React2.createElement(StyledTimePickerWheelsLegend, null, /* @__PURE__ */ React2.createElement("div", null, "H"), /* @__PURE__ */ React2.createElement("div", null, "M"), /* @__PURE__ */ React2.createElement("div", null, "A")), /* @__PURE__ */ React2.createElement(StyledTimePickerWheelWrapper, null, /* @__PURE__ */ React2.createElement(HoursList, null), /* @__PURE__ */ React2.createElement(MinutesList, null), /* @__PURE__ */ React2.createElement(MeridiemList, null)), /* @__PURE__ */ React2.createElement(TimeWheelFooter, null));
|
|
22
24
|
});
|
|
23
25
|
export {
|
|
24
26
|
TimeWheelContent
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/TimeWheelContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport {\n StyledTimePickerContainer,\n StyledTimePickerHead,\n StyledTimePickerWheelsLegend,\n StyledTimePickerWheelWrapper,\n} from './Styleds';\nimport { HoursList } from './HoursList';\nimport { MinutesList } from './MinutesList';\nimport { MeridiemList } from './MeridiemList';\nimport { TimeWheelFooter } from './TimeWheelFooter';\n\nexport const TimeWheelContent = React.memo(({ showShadow }: { showShadow?: boolean }) => {\n const { isControllerOnly, hours, minutes, meridiem } = useContext(ControlledDateTimePickerContext);\n return (\n <StyledTimePickerContainer\n showShadow={showShadow}\n isControllerOnly={isControllerOnly}\n data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL}\n >\n <StyledTimePickerHead>{`${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`}</StyledTimePickerHead>\n <StyledTimePickerWheelsLegend>\n <div>H</div>\n <div>M</div>\n <div>A</div>\n </StyledTimePickerWheelsLegend>\n <StyledTimePickerWheelWrapper>\n <HoursList />\n <MinutesList />\n <MeridiemList />\n </StyledTimePickerWheelWrapper>\n <TimeWheelFooter />\n </StyledTimePickerContainer>\n );\n});\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AAEO,MAAM,mBAAmB,OAAM,KAAK,CAAC,EAAE,iBAA2C;AACvF,QAAM,EAAE,kBAAkB,OAAO,SAAS,aAAa,WAAW,+BAA+B;AACjG,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAa,mCAAmC,qBAAqB;AAAA,KAErE,qCAAC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport {\n StyledTimePickerContainer,\n StyledTimePickerHead,\n StyledTimePickerWheelsLegend,\n StyledTimePickerWheelWrapper,\n} from './Styleds';\nimport { HoursList } from './HoursList';\nimport { MinutesList } from './MinutesList';\nimport { MeridiemList } from './MeridiemList';\nimport { TimeWheelFooter } from './TimeWheelFooter';\n\nexport const TimeWheelContent = React.memo(({ showShadow }: { showShadow?: boolean }) => {\n const { isControllerOnly, hours, minutes, meridiem } = useContext(ControlledDateTimePickerContext);\n return (\n <StyledTimePickerContainer\n showShadow={showShadow}\n isControllerOnly={isControllerOnly}\n data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL}\n >\n <StyledTimePickerHead data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL}>{`${\n hours || '__'\n }:${minutes || '__'} ${meridiem || '__'}`}</StyledTimePickerHead>\n <StyledTimePickerWheelsLegend>\n <div>H</div>\n <div>M</div>\n <div>A</div>\n </StyledTimePickerWheelsLegend>\n <StyledTimePickerWheelWrapper>\n <HoursList />\n <MinutesList />\n <MeridiemList />\n </StyledTimePickerWheelWrapper>\n <TimeWheelFooter />\n </StyledTimePickerContainer>\n );\n});\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AAEO,MAAM,mBAAmB,OAAM,KAAK,CAAC,EAAE,iBAA2C;AACvF,QAAM,EAAE,kBAAkB,OAAO,SAAS,aAAa,WAAW,+BAA+B;AACjG,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAa,mCAAmC,qBAAqB;AAAA,KAErE,qCAAC;AAAA,IAAqB,eAAa,mCAAmC,UAAU;AAAA,KAAe,GAC7F,SAAS,QACP,WAAW,QAAQ,YAAY,MAAO,GAC1C,qCAAC,oCACC,qCAAC,aAAI,GAAC,GACN,qCAAC,aAAI,GAAC,GACN,qCAAC,aAAI,GAAC,CACR,GACA,qCAAC,oCACC,qCAAC,eAAU,GACX,qCAAC,iBAAY,GACb,qCAAC,kBAAa,CAChB,GACA,qCAAC,qBAAgB,CACnB;AAEJ,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2, { useContext } from "react";
|
|
3
|
+
import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
|
|
3
4
|
import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
|
|
4
5
|
import { TimeWheelFooterMessage } from "./Styleds";
|
|
5
6
|
const TimeWheelFooter = () => {
|
|
@@ -9,7 +10,8 @@ const TimeWheelFooter = () => {
|
|
|
9
10
|
} = useContext(ControlledDateTimePickerContext);
|
|
10
11
|
if (!isWithCalendarToo && pickerFooterMsg !== void 0 && hasError)
|
|
11
12
|
return /* @__PURE__ */ React2.createElement(TimeWheelFooterMessage, {
|
|
12
|
-
role: "alert"
|
|
13
|
+
role: "alert",
|
|
14
|
+
"data-testid": ControlledDateTimePickerDatatestid.FOOTERS.TIMEWHEEL
|
|
13
15
|
}, pickerFooterMsg);
|
|
14
16
|
return null;
|
|
15
17
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/TimeWheelFooter.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { TimeWheelFooterMessage } from './Styleds';\n\nexport const TimeWheelFooter: React.ComponentType = () => {\n const {\n props: { pickerFooterMsg, hasError },\n isWithCalendarToo,\n } = useContext(ControlledDateTimePickerContext);\n if (!isWithCalendarToo && pickerFooterMsg !== undefined && hasError)\n return <TimeWheelFooterMessage role=\"alert\"
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,kBAAuC,MAAM;AACxD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,IAC1B;AAAA,MACE,WAAW,+BAA+B;AAC9C,MAAI,CAAC,qBAAqB,oBAAoB,UAAa;AACzD,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { TimeWheelFooterMessage } from './Styleds';\n\nexport const TimeWheelFooter: React.ComponentType = () => {\n const {\n props: { pickerFooterMsg, hasError },\n isWithCalendarToo,\n } = useContext(ControlledDateTimePickerContext);\n if (!isWithCalendarToo && pickerFooterMsg !== undefined && hasError)\n return (\n <TimeWheelFooterMessage role=\"alert\" data-testid={ControlledDateTimePickerDatatestid.FOOTERS.TIMEWHEEL}>\n {pickerFooterMsg}\n </TimeWheelFooterMessage>\n );\n return null;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEO,MAAM,kBAAuC,MAAM;AACxD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,IAC1B;AAAA,MACE,WAAW,+BAA+B;AAC9C,MAAI,CAAC,qBAAqB,oBAAoB,UAAa;AACzD,WACE,qCAAC;AAAA,MAAuB,MAAK;AAAA,MAAQ,eAAa,mCAAmC,QAAQ;AAAA,OAC1F,eACH;AAEJ,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import styled from "
|
|
2
|
+
import { styled, sizing, layout, space } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
5
|
-
|
|
5
|
+
import { COMPONENT_NAME, slots } from "../exported-related/theming";
|
|
6
|
+
const ResettedInput = styled("input", { name: COMPONENT_NAME, slot: slots.INPUT })`
|
|
6
7
|
border: none;
|
|
7
8
|
box-shadow: none;
|
|
8
9
|
background: none;
|
|
@@ -33,7 +34,7 @@ const StyledMin4DigitsInput = styled(ResettedInput)`
|
|
|
33
34
|
height: 100%;
|
|
34
35
|
${({ disabled }) => disabled ? `color: #616b7f;` : ``}
|
|
35
36
|
`;
|
|
36
|
-
const StyledInputsWrapperGrid = styled(Grid)`
|
|
37
|
+
const StyledInputsWrapperGrid = styled(Grid, { name: COMPONENT_NAME, slot: slots.CONTAINER })`
|
|
37
38
|
width: max-content;
|
|
38
39
|
align-items: center;
|
|
39
40
|
background-color: white;
|
|
@@ -56,6 +57,10 @@ const StyledInputsWrapperGrid = styled(Grid)`
|
|
|
56
57
|
padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "0"};
|
|
57
58
|
position: relative;
|
|
58
59
|
${({ theme, disabled }) => disabled ? `background-color: ${theme.colors.neutral[100]};` : ``}
|
|
60
|
+
|
|
61
|
+
${sizing}
|
|
62
|
+
${space}
|
|
63
|
+
${layout}
|
|
59
64
|
`;
|
|
60
65
|
const StyledDateInputsWrapperGrid = styled.div`
|
|
61
66
|
display: grid;
|
|
@@ -114,7 +119,7 @@ const StyledFocusWithIn = styled(Grid)`
|
|
|
114
119
|
}
|
|
115
120
|
}
|
|
116
121
|
`;
|
|
117
|
-
const StyledClearButton = styled(DSButtonV2)`
|
|
122
|
+
const StyledClearButton = styled(DSButtonV2, { COMPONENT_NAME, slot: slots.CLEAR_BUTTON })`
|
|
118
123
|
height: 26px;
|
|
119
124
|
position: relative;
|
|
120
125
|
visibility: ${({ shouldDisplay }) => shouldDisplay ? "visible" : "hidden"};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Styleds.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from '
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AAEA,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, sizing, layout, space } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { COMPONENT_NAME, slots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', { name: COMPONENT_NAME, slot: slots.INPUT })`\n border: none;\n box-shadow: none;\n background: none;\n text-align: center;\n height: 100%;\n display: flex;\n align-items: center;\n :focus {\n outline: none;\n }\n padding-top: 2px;\n`;\n\nexport const StyledSeparator = styled(Grid)`\n padding-top: 2px;\n margin: auto;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n padding-bottom: 1px;\n margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, { name: COMPONENT_NAME, slot: slots.CONTAINER })`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 28px; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError, disabled }) => {\n if (hasError) return theme.colors.danger[900];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.neutral[200];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n padding-right: ${({ withAnyPicker }) => (withAnyPicker ? '' : '0')};\n position: relative;\n ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n\n ${sizing}\n ${space}\n ${layout}\n`;\n\nexport const StyledDateInputsWrapperGrid = styled.div`\n display: grid;\n grid-template-columns: 24px min-content 24px min-content 48px;\n grid-template-rows: min-content;\n padding: 6px 0;\n gap: 0px 0px;\n align-items: center;\n input,\n p {\n margin: 0;\n }\n`;\n\nexport const StyledTimeInputsWrapperGrid = styled.div`\n display: grid;\n grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;\n grid-template-rows: min-content;\n padding: 6px 0;\n gap: 0px 0px;\n align-items: center;\n input,\n p {\n margin: 0;\n }\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid)<{ isControllerOnly: boolean }>`\n position: relative;\n ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 26px;`)}\n :before {\n content: '';\n position: absolute;\n top: 0px;\n left: -1px;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n ${({ theme, isControllerOnly, hasError }) =>\n isControllerOnly\n ? ``\n : `\n border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}\n `}\n }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n position: relative;\n &:focus-within {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: -5px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 10px);\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { COMPONENT_NAME, slot: slots.CLEAR_BUTTON })`\n height: 26px;\n position: relative;\n visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n &:focus {\n &:after {\n z-index: 1;\n }\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA,MAAM,gBAAgB,OAAO,SAAS,EAAE,MAAM,gBAAgB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc1E,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAKnC,MAAM,uBAAuB,OAAO,IAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,qBAAqB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,eAAgB,WAAW,oBAAoB;AAAA;AAG/C,MAAM,wBAAwB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,eAAgB,WAAW,oBAAoB;AAAA;AAG/C,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,MAAM,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,IAI/F,CAAC,EAAE,uBACH,mBACI,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMU,CAAC,EAAE,OAAO,UAAU,eAAe;AACjD,MAAI;AAAU,WAAO,MAAM,OAAO,OAAO;AACzC,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAAA;AAAA,kBAGgB,CAAC,EAAE,iBAAkB,aAAa,MAAM;AAAA,mBACvC,CAAC,EAAE,oBAAqB,gBAAgB,KAAK;AAAA;AAAA,IAE5D,CAAC,EAAE,OAAO,eAAgB,WAAW,qBAAqB,MAAM,OAAO,QAAQ,UAAU;AAAA;AAAA,IAEzF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,gCAAgC,OAAO,IAAI;AAAA;AAAA,IAEpD,CAAC,EAAE,uBAAwB,mBAAmB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASjD,CAAC,EAAE,OAAO,kBAAkB,eAC5B,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKjF,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWlB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,oBAAoB,OAAO,YAAY,EAAE,gBAAgB,MAAM,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,gBAGhF,CAAC,EAAE,oBAAqB,gBAAgB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/propTypes.js
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
1
20
|
import * as React from "react";
|
|
2
|
-
import { PropTypes } from "@elliemae/ds-utilities";
|
|
21
|
+
import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
|
|
3
22
|
const noop = () => {
|
|
4
23
|
};
|
|
5
24
|
const defaultReturnFalse = () => false;
|
|
@@ -28,7 +47,7 @@ const defaultProps = {
|
|
|
28
47
|
autoFocus: false,
|
|
29
48
|
preventCloseOnSelection: false
|
|
30
49
|
};
|
|
31
|
-
const propTypes = {
|
|
50
|
+
const propTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAttributesPropTypes), xstyledPropTypes), {
|
|
32
51
|
type: PropTypes.oneOf([
|
|
33
52
|
"full-date-time",
|
|
34
53
|
"date-time-inputs",
|
|
@@ -65,7 +84,7 @@ const propTypes = {
|
|
|
65
84
|
onTimeWheelOpenStartingTime: PropTypes.string.description('which day to start the timewheel on picker open when value is empty, string following the HH:MM AA" pattern').defaultValue("01:00 AM"),
|
|
66
85
|
minutesInterval: PropTypes.number.description("increments/decrements of minutes in time related controllers interactions").defaultValue("1"),
|
|
67
86
|
"data-testid": PropTypes.string.description("Unique id for tests.").defaultValue("")
|
|
68
|
-
};
|
|
87
|
+
});
|
|
69
88
|
export {
|
|
70
89
|
defaultProps,
|
|
71
90
|
propTypes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\nexport declare namespace DSControlledDateTimePickerT {\n export type OnInternalValuesChangeEvent =\n | React.ChangeEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLButtonElement>\n | React.KeyboardEvent\n | React.MouseEvent<HTMLInputElement>\n | React.MouseEvent<HTMLButtonElement>;\n export type ControlTypes =\n | 'full-date-time'\n | 'date-time-inputs'\n | 'date-time-picker'\n | 'date-time-picker-controller-only'\n | 'full-date'\n | 'date-inputs'\n | 'date-picker'\n | 'date-picker-controller-only'\n | 'full-time'\n | 'time-inputs'\n | 'time-picker'\n | 'time-picker-controller-only';\n export interface InternalInputsChangeMetaInfo {\n isAutomaticFillTrigger?: boolean;\n isDayPresentInMonth?: boolean;\n isOutOfRangeDay?: boolean;\n isDisabledDay?: boolean;\n isDisabledTime?: boolean;\n suggestedErrorMsg?: string;\n newDateTimeString?: string;\n newDateString?: string;\n newTimeString?: string;\n }\n\n export type OnDateChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnDateTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnInternalInputsChange = (\n val: string,\n e: OnInternalValuesChangeEvent,\n metaInfo?: InternalInputsChangeMetaInfo,\n ) => void;\n\n /* ------------------------ ------------------ ------------------------*/\n /* ------------------------ DATE CONFIGURATION ------------------------*/\n /* ------------------------ ------------------ ------------------------*/\n export interface DefaultDateProps {\n onMonthChange: OnInternalInputsChange;\n onDayChange: OnInternalInputsChange;\n onYearChange: OnInternalInputsChange;\n onPickerOpen: NoopishFunc;\n onPickerClose: NoopishFunc;\n getIsDisabledDay: BooleanGetter<string>;\n getIsOutOfRangeDay: BooleanGetter<string>;\n getIsStartRangeDay: BooleanGetter<string>;\n getIsDayInRange: BooleanGetter<string>;\n getIsEndRangeDay: BooleanGetter<string>;\n isClearable: boolean;\n disabled: boolean;\n hasError: boolean;\n autoFocus: boolean;\n preventCloseOnSelection: boolean;\n }\n export interface OptionalDatePickerProps {\n emptyPickerStartingMonth?: string;\n onCalendarOpenFocusedDay?: string;\n pickerFooterMsg?: string;\n }\n export interface RequiredDatePickerProps {\n type: 'full-date' | 'date-inputs' | 'date-picker' | 'date-picker-controller-only';\n date: string;\n onDateChange: OnDateChange;\n }\n export type DatePickerProps = OptionalDatePickerProps & Partial<DefaultDateProps> & RequiredDatePickerProps;\n export type InternalDatePickerProps = OptionalDatePickerProps & DefaultDateProps & RequiredDatePickerProps;\n\n /* ------------------------ ------------------ ------------------------*/\n /* ------------------------ TIME CONFIGURATION ------------------------*/\n /* ------------------------ ------------------ ------------------------*/\n\n export interface DefaultTimeProps {\n onHourChange: OnInternalInputsChange;\n onMinuteChange: OnInternalInputsChange;\n onMeridiemChange: OnInternalInputsChange;\n onPickerOpen: NoopishFunc;\n onPickerClose: NoopishFunc;\n getIsDisabledTime: BooleanGetter<string>;\n minutesInterval: number;\n isClearable: boolean;\n disabled: boolean;\n hasError: boolean;\n autoFocus: boolean;\n preventCloseOnSelection: boolean;\n }\n export interface OptionalTimePickerProps {\n pickerFooterMsg?: string;\n onTimeWheelOpenStartingTime?: string;\n }\n export interface RequiredTimePickerProps {\n type: 'full-time' | 'time-inputs' | 'time-picker' | 'time-picker-controller-only';\n time: string;\n onTimeChange: OnTimeChange;\n }\n export type TimePickerProps = OptionalTimePickerProps & Partial<DefaultTimeProps> & RequiredTimePickerProps;\n export type InternalTimePickerProps = OptionalTimePickerProps & DefaultTimeProps & RequiredTimePickerProps;\n\n /* -------------------- ---------------------- ------------------------*/\n /* -------------------- DATETIME CONFIGURATION ------------------------*/\n /* -------------------- ---------------------- ------------------------*/\n\n export type DefaultDateTimeProps = DefaultTimeProps &\n DefaultDateProps & {\n onDateChange: OnDateChange;\n onTimeChange: OnTimeChange;\n };\n export type OptionalDateTimeProps = OptionalTimePickerProps & OptionalDatePickerProps;\n export interface RequiredDateTimeProps {\n type: 'full-date-time' | 'date-time-inputs' | 'date-time-picker' | 'date-time-picker-controller-only';\n dateTime: string;\n onDateTimeChange: OnDateTimeChange;\n }\n\n export type DateTimePickerProps = Partial<DefaultDateTimeProps> & OptionalDateTimeProps & RequiredDateTimeProps;\n export type InternalDateTimePickerProps = DefaultDateTimeProps & OptionalDateTimeProps & RequiredDateTimeProps;\n\n /* ---------------------- ------------------- -------------------------*/\n /* ---------------------- FINAL CONFIGURATION -------------------------*/\n /* ---------------------- ------------------- -------------------------*/\n export type DefaultProps = DefaultDateTimeProps & { type: 'full-date-time' };\n export type Props = DateTimePickerProps | DatePickerProps | TimePickerProps;\n export type InternalProps = InternalDateTimePickerProps | InternalDatePickerProps | InternalTimePickerProps;\n}\n\nexport const defaultProps: DSControlledDateTimePickerT.DefaultProps = {\n type: 'full-date-time',\n onDateChange: noop,\n onMonthChange: noop,\n onDayChange: noop,\n onYearChange: noop,\n onTimeChange: noop,\n onHourChange: noop,\n onMinuteChange: noop,\n onMeridiemChange: noop,\n onPickerOpen: noop,\n onPickerClose: noop,\n getIsDisabledDay: defaultReturnFalse,\n getIsOutOfRangeDay: defaultReturnFalse,\n getIsStartRangeDay: defaultReturnFalse,\n getIsDayInRange: defaultReturnFalse,\n getIsEndRangeDay: defaultReturnFalse,\n getIsDisabledTime: defaultReturnFalse,\n minutesInterval: 1,\n isClearable: false,\n disabled: false,\n hasError: false,\n autoFocus: false,\n preventCloseOnSelection: false,\n};\n\nexport const propTypes = {\n type: PropTypes.oneOf([\n 'full-date-time',\n 'date-time-inputs',\n 'date-time-picker',\n 'date-time-picker-controller-only',\n 'full-date',\n 'date-inputs',\n 'date-picker',\n 'date-picker-controller-only',\n 'full-time',\n 'time-inputs',\n 'time-picker',\n 'time-picker-controller-only',\n ])\n .description('Type of time form control to use')\n .defaultValue('full-date-time'),\n disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue(false),\n isClearable: PropTypes.bool.description('with or without clearable button').defaultValue(false),\n dateTime: PropTypes.string.description('when using date-time types, this is the value of the controller'),\n date: PropTypes.string.description('when using date types, this is the value of the controller'),\n time: PropTypes.string.description('when using time types, this is the value of the controller'),\n onDateChange: PropTypes.func.description('(newDateString, metaInformations) => void'),\n onTimeChange: PropTypes.func.description('(newTimeString, metaInformations) => void'),\n onDateTimeChange: PropTypes.func.description('(newDateTimeString, metaInformations) => void'),\n onMonthChange: PropTypes.func.description('(newMonthString, event, metaInformations) => void'),\n onDayChange: PropTypes.func.description('(newDayString, event, metaInformations) => void'),\n onYearChange: PropTypes.func.description('(newYearString, event, metaInformations) => void'),\n onHourChange: PropTypes.func.description('(newHourString, event, metaInformations) => void'),\n onMinuteChange: PropTypes.func.description('(newMinuteString, event, metaInformations) => void'),\n onMeridiemChange: PropTypes.func.description('(newMeridiemString, event, metaInformations) => void'),\n getIsDisabledDay: PropTypes.func.description(\n '(dayAsString) => true for marking as disabled, false for marking as valid',\n ),\n getIsOutOfRangeDay: PropTypes.func.description(\n '(dayAsString) => true for marking as disabled, false for marking as valid',\n ),\n getIsDisabledTime: PropTypes.func.description(\n '(timeAsString) => true for marking as disabled, false for marking as valid',\n ),\n emptyPickerStartingMonth: PropTypes.string.description(\n 'which month to start the calendar on open, when value is empty, string following the \"MM/__/YYYY\" pattern',\n ),\n onCalendarOpenFocusedDay: PropTypes.string\n .description('which day to focus on calendar open when value is empty, string following the \"MM/DD/YYYY\" pattern')\n .defaultValue('if value is empty current month, else current month'),\n onTimeWheelOpenStartingTime: PropTypes.string\n .description(\n 'which day to start the timewheel on picker open when value is empty, string following the HH:MM AA\" pattern',\n )\n .defaultValue('01:00 AM'),\n minutesInterval: PropTypes.number\n .description('increments/decrements of minutes in time related controllers interactions')\n .defaultValue('1'),\n 'data-testid': PropTypes.string.description('Unique id for tests.').defaultValue(''),\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACEA;AAGA,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAa;AAqIjC,MAAM,eAAyD;AAAA,EACpE,MAAM;AAAA,EACN,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,yBAAyB;AAC3B;AAEO,MAAM,YAAY;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\nexport declare namespace DSControlledDateTimePickerT {\n export type OnInternalValuesChangeEvent =\n | React.ChangeEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLButtonElement>\n | React.KeyboardEvent\n | React.MouseEvent<HTMLInputElement>\n | React.MouseEvent<HTMLButtonElement>;\n export type ControlTypes =\n | 'full-date-time'\n | 'date-time-inputs'\n | 'date-time-picker'\n | 'date-time-picker-controller-only'\n | 'full-date'\n | 'date-inputs'\n | 'date-picker'\n | 'date-picker-controller-only'\n | 'full-time'\n | 'time-inputs'\n | 'time-picker'\n | 'time-picker-controller-only';\n export interface InternalInputsChangeMetaInfo {\n isAutomaticFillTrigger?: boolean;\n isDayPresentInMonth?: boolean;\n isOutOfRangeDay?: boolean;\n isDisabledDay?: boolean;\n isDisabledTime?: boolean;\n suggestedErrorMsg?: string;\n newDateTimeString?: string;\n newDateString?: string;\n newTimeString?: string;\n }\n\n export type OnDateChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnDateTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnInternalInputsChange = (\n val: string,\n e: OnInternalValuesChangeEvent,\n metaInfo?: InternalInputsChangeMetaInfo,\n ) => void;\n\n /* ------------------------ ------------------ ------------------------*/\n /* ------------------------ DATE CONFIGURATION ------------------------*/\n /* ------------------------ ------------------ ------------------------*/\n export interface DefaultDateProps {\n onMonthChange: OnInternalInputsChange;\n onDayChange: OnInternalInputsChange;\n onYearChange: OnInternalInputsChange;\n onPickerOpen: NoopishFunc;\n onPickerClose: NoopishFunc;\n getIsDisabledDay: BooleanGetter<string>;\n getIsOutOfRangeDay: BooleanGetter<string>;\n getIsStartRangeDay: BooleanGetter<string>;\n getIsDayInRange: BooleanGetter<string>;\n getIsEndRangeDay: BooleanGetter<string>;\n isClearable: boolean;\n disabled: boolean;\n hasError: boolean;\n autoFocus: boolean;\n preventCloseOnSelection: boolean;\n }\n export interface OptionalDatePickerProps {\n emptyPickerStartingMonth?: string;\n onCalendarOpenFocusedDay?: string;\n pickerFooterMsg?: string;\n }\n export interface RequiredDatePickerProps {\n type: 'full-date' | 'date-inputs' | 'date-picker' | 'date-picker-controller-only';\n date: string;\n onDateChange: OnDateChange;\n }\n export type DatePickerProps = OptionalDatePickerProps & Partial<DefaultDateProps> & RequiredDatePickerProps;\n export type InternalDatePickerProps = OptionalDatePickerProps & DefaultDateProps & RequiredDatePickerProps;\n\n /* ------------------------ ------------------ ------------------------*/\n /* ------------------------ TIME CONFIGURATION ------------------------*/\n /* ------------------------ ------------------ ------------------------*/\n\n export interface DefaultTimeProps {\n onHourChange: OnInternalInputsChange;\n onMinuteChange: OnInternalInputsChange;\n onMeridiemChange: OnInternalInputsChange;\n onPickerOpen: NoopishFunc;\n onPickerClose: NoopishFunc;\n getIsDisabledTime: BooleanGetter<string>;\n minutesInterval: number;\n isClearable: boolean;\n disabled: boolean;\n hasError: boolean;\n autoFocus: boolean;\n preventCloseOnSelection: boolean;\n }\n export interface OptionalTimePickerProps {\n pickerFooterMsg?: string;\n onTimeWheelOpenStartingTime?: string;\n }\n export interface RequiredTimePickerProps {\n type: 'full-time' | 'time-inputs' | 'time-picker' | 'time-picker-controller-only';\n time: string;\n onTimeChange: OnTimeChange;\n }\n export type TimePickerProps = OptionalTimePickerProps & Partial<DefaultTimeProps> & RequiredTimePickerProps;\n export type InternalTimePickerProps = OptionalTimePickerProps & DefaultTimeProps & RequiredTimePickerProps;\n\n /* -------------------- ---------------------- ------------------------*/\n /* -------------------- DATETIME CONFIGURATION ------------------------*/\n /* -------------------- ---------------------- ------------------------*/\n\n export type DefaultDateTimeProps = DefaultTimeProps &\n DefaultDateProps & {\n onDateChange: OnDateChange;\n onTimeChange: OnTimeChange;\n };\n export type OptionalDateTimeProps = OptionalTimePickerProps & OptionalDatePickerProps;\n export interface RequiredDateTimeProps {\n type: 'full-date-time' | 'date-time-inputs' | 'date-time-picker' | 'date-time-picker-controller-only';\n dateTime: string;\n onDateTimeChange: OnDateTimeChange;\n }\n\n export type DateTimePickerProps = Partial<DefaultDateTimeProps> & OptionalDateTimeProps & RequiredDateTimeProps;\n export type InternalDateTimePickerProps = DefaultDateTimeProps & OptionalDateTimeProps & RequiredDateTimeProps;\n\n /* ---------------------- ------------------- -------------------------*/\n /* ---------------------- FINAL CONFIGURATION -------------------------*/\n /* ---------------------- ------------------- -------------------------*/\n export type DefaultProps = DefaultDateTimeProps & { type: 'full-date-time' };\n export type Props = DateTimePickerProps | DatePickerProps | TimePickerProps;\n export type InternalProps = InternalDateTimePickerProps | InternalDatePickerProps | InternalTimePickerProps;\n}\n\nexport const defaultProps: DSControlledDateTimePickerT.DefaultProps = {\n type: 'full-date-time',\n onDateChange: noop,\n onMonthChange: noop,\n onDayChange: noop,\n onYearChange: noop,\n onTimeChange: noop,\n onHourChange: noop,\n onMinuteChange: noop,\n onMeridiemChange: noop,\n onPickerOpen: noop,\n onPickerClose: noop,\n getIsDisabledDay: defaultReturnFalse,\n getIsOutOfRangeDay: defaultReturnFalse,\n getIsStartRangeDay: defaultReturnFalse,\n getIsDayInRange: defaultReturnFalse,\n getIsEndRangeDay: defaultReturnFalse,\n getIsDisabledTime: defaultReturnFalse,\n minutesInterval: 1,\n isClearable: false,\n disabled: false,\n hasError: false,\n autoFocus: false,\n preventCloseOnSelection: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n type: PropTypes.oneOf([\n 'full-date-time',\n 'date-time-inputs',\n 'date-time-picker',\n 'date-time-picker-controller-only',\n 'full-date',\n 'date-inputs',\n 'date-picker',\n 'date-picker-controller-only',\n 'full-time',\n 'time-inputs',\n 'time-picker',\n 'time-picker-controller-only',\n ])\n .description('Type of time form control to use')\n .defaultValue('full-date-time'),\n disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue(false),\n isClearable: PropTypes.bool.description('with or without clearable button').defaultValue(false),\n dateTime: PropTypes.string.description('when using date-time types, this is the value of the controller'),\n date: PropTypes.string.description('when using date types, this is the value of the controller'),\n time: PropTypes.string.description('when using time types, this is the value of the controller'),\n onDateChange: PropTypes.func.description('(newDateString, metaInformations) => void'),\n onTimeChange: PropTypes.func.description('(newTimeString, metaInformations) => void'),\n onDateTimeChange: PropTypes.func.description('(newDateTimeString, metaInformations) => void'),\n onMonthChange: PropTypes.func.description('(newMonthString, event, metaInformations) => void'),\n onDayChange: PropTypes.func.description('(newDayString, event, metaInformations) => void'),\n onYearChange: PropTypes.func.description('(newYearString, event, metaInformations) => void'),\n onHourChange: PropTypes.func.description('(newHourString, event, metaInformations) => void'),\n onMinuteChange: PropTypes.func.description('(newMinuteString, event, metaInformations) => void'),\n onMeridiemChange: PropTypes.func.description('(newMeridiemString, event, metaInformations) => void'),\n getIsDisabledDay: PropTypes.func.description(\n '(dayAsString) => true for marking as disabled, false for marking as valid',\n ),\n getIsOutOfRangeDay: PropTypes.func.description(\n '(dayAsString) => true for marking as disabled, false for marking as valid',\n ),\n getIsDisabledTime: PropTypes.func.description(\n '(timeAsString) => true for marking as disabled, false for marking as valid',\n ),\n emptyPickerStartingMonth: PropTypes.string.description(\n 'which month to start the calendar on open, when value is empty, string following the \"MM/__/YYYY\" pattern',\n ),\n onCalendarOpenFocusedDay: PropTypes.string\n .description('which day to focus on calendar open when value is empty, string following the \"MM/DD/YYYY\" pattern')\n .defaultValue('if value is empty current month, else current month'),\n onTimeWheelOpenStartingTime: PropTypes.string\n .description(\n 'which day to start the timewheel on picker open when value is empty, string following the HH:MM AA\" pattern',\n )\n .defaultValue('01:00 AM'),\n minutesInterval: PropTypes.number\n .description('increments/decrements of minutes in time related controllers interactions')\n .defaultValue('1'),\n 'data-testid': PropTypes.string.description('Unique id for tests.').defaultValue(''),\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACEA;AAGA,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAa;AAqIjC,MAAM,eAAyD;AAAA,EACpE,MAAM;AAAA,EACN,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,yBAAyB;AAC3B;AAEO,MAAM,YAAY,gDACpB,4BACA,mBAFoB;AAAA,EAGvB,MAAM,UAAU,MAAM;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,kCAAkC,EAC9C,aAAa,gBAAgB;AAAA,EAChC,UAAU,UAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EAC9F,aAAa,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAAA,EAC9F,UAAU,UAAU,OAAO,YAAY,iEAAiE;AAAA,EACxG,MAAM,UAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,MAAM,UAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,cAAc,UAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,cAAc,UAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,kBAAkB,UAAU,KAAK,YAAY,+CAA+C;AAAA,EAC5F,eAAe,UAAU,KAAK,YAAY,mDAAmD;AAAA,EAC7F,aAAa,UAAU,KAAK,YAAY,iDAAiD;AAAA,EACzF,cAAc,UAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,cAAc,UAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,gBAAgB,UAAU,KAAK,YAAY,oDAAoD;AAAA,EAC/F,kBAAkB,UAAU,KAAK,YAAY,sDAAsD;AAAA,EACnG,kBAAkB,UAAU,KAAK,YAC/B,2EACF;AAAA,EACA,oBAAoB,UAAU,KAAK,YACjC,2EACF;AAAA,EACA,mBAAmB,UAAU,KAAK,YAChC,4EACF;AAAA,EACA,0BAA0B,UAAU,OAAO,YACzC,2GACF;AAAA,EACA,0BAA0B,UAAU,OACjC,YAAY,oGAAoG,EAChH,aAAa,qDAAqD;AAAA,EACrE,6BAA6B,UAAU,OACpC,YACC,6GACF,EACC,aAAa,UAAU;AAAA,EAC1B,iBAAiB,UAAU,OACxB,YAAY,2EAA2E,EACvF,aAAa,GAAG;AAAA,EACnB,eAAe,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,EAAE;AACrF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|