@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": ["../../../../../src/parts/Pickers/Calendar/Styleds.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB
|
|
4
|
+
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,6 +25,7 @@ __export(CalendarWithTimeWheelFooter_exports, {
|
|
|
25
25
|
module.exports = __toCommonJS(CalendarWithTimeWheelFooter_exports);
|
|
26
26
|
var React = __toESM(require("react"));
|
|
27
27
|
var import_react = __toESM(require("react"));
|
|
28
|
+
var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
|
|
28
29
|
var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
|
|
29
30
|
var import_Styleds = require("./Styleds");
|
|
30
31
|
const CalendarWithTimeWheelFooter = () => {
|
|
@@ -32,7 +33,8 @@ const CalendarWithTimeWheelFooter = () => {
|
|
|
32
33
|
props: { pickerFooterMsg, hasError }
|
|
33
34
|
} = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
|
|
34
35
|
return pickerFooterMsg !== void 0 && hasError ? /* @__PURE__ */ import_react.default.createElement(import_Styleds.CalendarWithTimeWheelFooterMessage, {
|
|
35
|
-
role: "alert"
|
|
36
|
+
role: "alert",
|
|
37
|
+
"data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL
|
|
36
38
|
}, pickerFooterMsg) : null;
|
|
37
39
|
};
|
|
38
40
|
//# sourceMappingURL=CalendarWithTimeWheelFooter.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,yCAAgD;AAChD,qBAAmD;AAE5C,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,MACxB,6BAAW,kEAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC,mDAAC;AAAA,
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAmD;AAE5C,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,MACxB,6BAAW,kEAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC,mDAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAa,6EAAmC,QAAQ;AAAA,KAEvD,eACH,IACE;AACN;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,15 +27,19 @@ __export(Styleds_exports, {
|
|
|
27
27
|
});
|
|
28
28
|
module.exports = __toCommonJS(Styleds_exports);
|
|
29
29
|
var React = __toESM(require("react"));
|
|
30
|
-
var
|
|
30
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
31
31
|
var import_ds_button = require("@elliemae/ds-button");
|
|
32
32
|
var import_CalendarContent = require("../Calendar/CalendarContent");
|
|
33
|
-
|
|
33
|
+
var import_theming = require("../../../exported-related/theming");
|
|
34
|
+
const StyledIconTriggerButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, {
|
|
35
|
+
name: import_theming.COMPONENT_NAME,
|
|
36
|
+
slot: import_theming.slots.PICKER_ICONS.CALENDAR_TIMEWHEEL
|
|
37
|
+
})`
|
|
34
38
|
color: ${({ theme }) => theme.colors.brand["600"]};
|
|
35
39
|
width: 26px;
|
|
36
40
|
height: 26px;
|
|
37
41
|
`;
|
|
38
|
-
const StyledCalendarWithTimeWheelWrapper =
|
|
42
|
+
const StyledCalendarWithTimeWheelWrapper = import_ds_system.styled.div`
|
|
39
43
|
background: ${({ theme }) => theme.colors.neutral["000"]};
|
|
40
44
|
${({ isControllerOnly }) => isControllerOnly ? void 0 : "box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);"}
|
|
41
45
|
display: grid;
|
|
@@ -47,10 +51,13 @@ const StyledCalendarWithTimeWheelWrapper = import_styled_components.default.div`
|
|
|
47
51
|
box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};
|
|
48
52
|
}
|
|
49
53
|
`;
|
|
50
|
-
const StyledCalendar = (0,
|
|
54
|
+
const StyledCalendar = (0, import_ds_system.styled)(import_CalendarContent.CalendarContent)`
|
|
51
55
|
box-shadow: none;
|
|
52
56
|
`;
|
|
53
|
-
const CalendarWithTimeWheelFooterMessage =
|
|
57
|
+
const CalendarWithTimeWheelFooterMessage = (0, import_ds_system.styled)("footer", {
|
|
58
|
+
name: import_theming.COMPONENT_NAME,
|
|
59
|
+
slot: import_theming.slots.FOOTERS.CALENDAR_TIMEWHEEL
|
|
60
|
+
})`
|
|
54
61
|
border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};
|
|
55
62
|
margin: 0 ${({ theme }) => theme.space.xxs2};
|
|
56
63
|
padding: ${({ theme }) => theme.space.xxs2} 0;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/Styleds.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAA2B;AAC3B,6BAAgC;AAChC,qBAAsC;AAE/B,MAAM,0BAA0B,6BAAO,6BAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,qBAAM,aAAa;AAC3B,CAAC;AAAA,WACU,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKtC,MAAM,qCAAqC,wBAAO;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,6BAAO,sCAAe;AAAA;AAAA;AAI7C,MAAM,qCAAqC,6BAAO,UAAU;AAAA,EACjE,MAAM;AAAA,EACN,MAAM,qBAAM,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
|
}
|
|
@@ -33,10 +33,10 @@ __export(Styleds_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(Styleds_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
37
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
37
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
39
38
|
var import_ds_button = require("@elliemae/ds-button");
|
|
39
|
+
var import_theming = require("../../../exported-related/theming");
|
|
40
40
|
const focusBorder = import_ds_system.css`
|
|
41
41
|
&:after {
|
|
42
42
|
position: absolute;
|
|
@@ -89,12 +89,15 @@ const hoverBgPerStatus = import_ds_system.css`
|
|
|
89
89
|
return theme.colors.neutral["000"];
|
|
90
90
|
}}
|
|
91
91
|
`;
|
|
92
|
-
const StyledIconTriggerButton = (0,
|
|
92
|
+
const StyledIconTriggerButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, {
|
|
93
|
+
name: import_theming.COMPONENT_NAME,
|
|
94
|
+
slot: import_theming.slots.PICKER_ICONS.TIMEWHEEL
|
|
95
|
+
})`
|
|
93
96
|
color: ${({ theme }) => theme.colors.brand["600"]};
|
|
94
97
|
width: 26px;
|
|
95
98
|
height: 26px;
|
|
96
99
|
`;
|
|
97
|
-
const StyledWheelList =
|
|
100
|
+
const StyledWheelList = import_ds_system.styled.div`
|
|
98
101
|
width: 100%;
|
|
99
102
|
height: 100%;
|
|
100
103
|
margin: auto;
|
|
@@ -117,7 +120,7 @@ const StyledWheelList = import_styled_components.default.div`
|
|
|
117
120
|
}
|
|
118
121
|
}
|
|
119
122
|
`;
|
|
120
|
-
const StyledTimePickerContainer =
|
|
123
|
+
const StyledTimePickerContainer = import_ds_system.styled.div`
|
|
121
124
|
display: grid;
|
|
122
125
|
position: relative;
|
|
123
126
|
grid-template-columns: 192px;
|
|
@@ -130,14 +133,14 @@ const StyledTimePickerContainer = import_styled_components.default.div`
|
|
|
130
133
|
box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);
|
|
131
134
|
` : ""}
|
|
132
135
|
`;
|
|
133
|
-
const StyledTimePickerHead = (0,
|
|
136
|
+
const StyledTimePickerHead = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.TIMEWHEEL.HEADER_LABEL })`
|
|
134
137
|
width: 100%;
|
|
135
138
|
grid-area: TimePickerHead;
|
|
136
139
|
justify-content: center;
|
|
137
140
|
align-items: center;
|
|
138
141
|
background: ${({ theme }) => theme.colors.neutral["050"]};
|
|
139
142
|
`;
|
|
140
|
-
const StyledTimePickerWheelsLegend =
|
|
143
|
+
const StyledTimePickerWheelsLegend = import_ds_system.styled.div`
|
|
141
144
|
width: 100%;
|
|
142
145
|
height: 100;
|
|
143
146
|
grid-area: TimePickerWheelsLegend;
|
|
@@ -148,7 +151,7 @@ const StyledTimePickerWheelsLegend = import_styled_components.default.div`
|
|
|
148
151
|
text-align: center;
|
|
149
152
|
background: ${({ theme }) => theme.colors.neutral["050"]};
|
|
150
153
|
`;
|
|
151
|
-
const StyledTimePickerWheelWrapper =
|
|
154
|
+
const StyledTimePickerWheelWrapper = import_ds_system.styled.div`
|
|
152
155
|
width: 100%;
|
|
153
156
|
background: ${({ theme }) => theme.colors.neutral["000"]};
|
|
154
157
|
grid-area: VerticalWheelWrapper;
|
|
@@ -168,7 +171,7 @@ const StyledTimePickerWheelWrapper = import_styled_components.default.div`
|
|
|
168
171
|
}
|
|
169
172
|
}
|
|
170
173
|
`;
|
|
171
|
-
const StyledTimeBtn = (0,
|
|
174
|
+
const StyledTimeBtn = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.TIMEWHEEL.TIME_BUTTON })`
|
|
172
175
|
position: relative;
|
|
173
176
|
height: ${({ theme }) => theme.space.s};
|
|
174
177
|
width: ${({ theme }) => theme.space.s};
|
|
@@ -192,7 +195,7 @@ const StyledTimeBtn = (0, import_styled_components.default)(import_ds_button.DSB
|
|
|
192
195
|
background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
|
|
193
196
|
` : ``};
|
|
194
197
|
`;
|
|
195
|
-
const StyledWheelListItem =
|
|
198
|
+
const StyledWheelListItem = import_ds_system.styled.div`
|
|
196
199
|
margin: auto;
|
|
197
200
|
width: 36px;
|
|
198
201
|
height: 36px;
|
|
@@ -201,13 +204,16 @@ const StyledWheelListItem = import_styled_components.default.div`
|
|
|
201
204
|
justify-content: center;
|
|
202
205
|
position: relative;
|
|
203
206
|
`;
|
|
204
|
-
const StyledWheelChangeTimeBtn = (0,
|
|
207
|
+
const StyledWheelChangeTimeBtn = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, {
|
|
208
|
+
name: import_theming.COMPONENT_NAME,
|
|
209
|
+
slot: import_theming.slots.TIMEWHEEL.TIME_CHANGE_BUTTON
|
|
210
|
+
})`
|
|
205
211
|
height: ${({ theme }) => theme.space.s};
|
|
206
212
|
width: ${({ theme }) => theme.space.s};
|
|
207
213
|
min-width: ${({ theme }) => theme.space.s};
|
|
208
214
|
border-radius: 50%;
|
|
209
215
|
`;
|
|
210
|
-
const TimeWheelFooterMessage =
|
|
216
|
+
const TimeWheelFooterMessage = (0, import_ds_system.styled)("footer", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.FOOTERS.TIMEWHEEL })`
|
|
211
217
|
border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};
|
|
212
218
|
margin: 0 ${({ theme }) => theme.space.xxs2};
|
|
213
219
|
padding: ${({ theme }) => theme.space.xxs2} 0;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/TimeWheel/Styleds.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/indent */\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB
|
|
4
|
+
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAA4B;AAC5B,qBAAqB;AACrB,uBAA2B;AAC3B,qBAAsC;AAYtC,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,6BAAO,6BAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,qBAAM,aAAa;AAC3B,CAAC;AAAA,WACU,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKtC,MAAM,kBAAkB,wBAAO;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,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAS5C,CAAC,EAAE,YAAY,uBACf,cAAc,CAAC,mBACX;AAAA;AAAA,MAGA;AAAA;AAGD,MAAM,uBAAuB,6BAAO,qBAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,UAAU,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK7F,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAG7C,MAAM,+BAA+B,wBAAO;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,wBAAO;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,6BAAO,6BAAY,EAAE,MAAM,+BAAgB,MAAM,qBAAM,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,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUnC,MAAM,2BAA2B,6BAAO,6BAAY;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,qBAAM,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,6BAAO,UAAU,EAAE,MAAM,+BAAgB,MAAM,qBAAM,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
|
}
|
|
@@ -38,6 +38,8 @@ const TimeWheelContent = import_react.default.memo(({ showShadow }) => {
|
|
|
38
38
|
showShadow,
|
|
39
39
|
isControllerOnly,
|
|
40
40
|
"data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
|
|
41
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledTimePickerHead,
|
|
41
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledTimePickerHead, {
|
|
42
|
+
"data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL
|
|
43
|
+
}, `${hours || "__"}:${minutes || "__"} ${meridiem || "__"}`), /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledTimePickerWheelsLegend, null, /* @__PURE__ */ import_react.default.createElement("div", null, "H"), /* @__PURE__ */ import_react.default.createElement("div", null, "M"), /* @__PURE__ */ import_react.default.createElement("div", null, "A")), /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledTimePickerWheelWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_HoursList.HoursList, null), /* @__PURE__ */ import_react.default.createElement(import_MinutesList.MinutesList, null), /* @__PURE__ */ import_react.default.createElement(import_MeridiemList.MeridiemList, null)), /* @__PURE__ */ import_react.default.createElement(import_TimeWheelFooter.TimeWheelFooter, null));
|
|
42
44
|
});
|
|
43
45
|
//# sourceMappingURL=TimeWheelContent.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,qBAKO;AACP,uBAA0B;AAC1B,yBAA4B;AAC5B,0BAA6B;AAC7B,6BAAgC;AAEzB,MAAM,mBAAmB,qBAAM,KAAK,CAAC,EAAE,iBAA2C;AACvF,QAAM,EAAE,kBAAkB,OAAO,SAAS,aAAa,6BAAW,kEAA+B;AACjG,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAa,6EAAmC,qBAAqB;AAAA,KAErE,mDAAC,
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,qBAKO;AACP,uBAA0B;AAC1B,yBAA4B;AAC5B,0BAA6B;AAC7B,6BAAgC;AAEzB,MAAM,mBAAmB,qBAAM,KAAK,CAAC,EAAE,iBAA2C;AACvF,QAAM,EAAE,kBAAkB,OAAO,SAAS,aAAa,6BAAW,kEAA+B;AACjG,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAa,6EAAmC,qBAAqB;AAAA,KAErE,mDAAC;AAAA,IAAqB,eAAa,6EAAmC,UAAU;AAAA,KAAe,GAC7F,SAAS,QACP,WAAW,QAAQ,YAAY,MAAO,GAC1C,mDAAC,mDACC,mDAAC,aAAI,GAAC,GACN,mDAAC,aAAI,GAAC,GACN,mDAAC,aAAI,GAAC,CACR,GACA,mDAAC,mDACC,mDAAC,gCAAU,GACX,mDAAC,oCAAY,GACb,mDAAC,sCAAa,CAChB,GACA,mDAAC,4CAAgB,CACnB;AAEJ,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,6 +25,7 @@ __export(TimeWheelFooter_exports, {
|
|
|
25
25
|
module.exports = __toCommonJS(TimeWheelFooter_exports);
|
|
26
26
|
var React = __toESM(require("react"));
|
|
27
27
|
var import_react = __toESM(require("react"));
|
|
28
|
+
var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
|
|
28
29
|
var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
|
|
29
30
|
var import_Styleds = require("./Styleds");
|
|
30
31
|
const TimeWheelFooter = () => {
|
|
@@ -34,7 +35,8 @@ const TimeWheelFooter = () => {
|
|
|
34
35
|
} = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
|
|
35
36
|
if (!isWithCalendarToo && pickerFooterMsg !== void 0 && hasError)
|
|
36
37
|
return /* @__PURE__ */ import_react.default.createElement(import_Styleds.TimeWheelFooterMessage, {
|
|
37
|
-
role: "alert"
|
|
38
|
+
role: "alert",
|
|
39
|
+
"data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.FOOTERS.TIMEWHEEL
|
|
38
40
|
}, pickerFooterMsg);
|
|
39
41
|
return null;
|
|
40
42
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelFooter.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,yCAAgD;AAChD,qBAAuC;AAEhC,MAAM,kBAAuC,MAAM;AACxD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,IAC1B;AAAA,MACE,6BAAW,kEAA+B;AAC9C,MAAI,CAAC,qBAAqB,oBAAoB,UAAa;AACzD,
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAuC;AAEhC,MAAM,kBAAuC,MAAM;AACxD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,IAC1B;AAAA,MACE,6BAAW,kEAA+B;AAC9C,MAAI,CAAC,qBAAqB,oBAAoB,UAAa;AACzD,WACE,mDAAC;AAAA,MAAuB,MAAK;AAAA,MAAQ,eAAa,6EAAmC,QAAQ;AAAA,OAC1F,eACH;AAEJ,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,10 +33,11 @@ __export(Styleds_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(Styleds_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
|
-
var
|
|
36
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
37
37
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
38
38
|
var import_ds_button = require("@elliemae/ds-button");
|
|
39
|
-
|
|
39
|
+
var import_theming = require("../exported-related/theming");
|
|
40
|
+
const ResettedInput = (0, import_ds_system.styled)("input", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.INPUT })`
|
|
40
41
|
border: none;
|
|
41
42
|
box-shadow: none;
|
|
42
43
|
background: none;
|
|
@@ -49,25 +50,25 @@ const ResettedInput = import_styled_components.default.input`
|
|
|
49
50
|
}
|
|
50
51
|
padding-top: 2px;
|
|
51
52
|
`;
|
|
52
|
-
const StyledSeparator = (0,
|
|
53
|
+
const StyledSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
53
54
|
padding-top: 2px;
|
|
54
55
|
margin: auto;
|
|
55
56
|
`;
|
|
56
|
-
const StyledColonSeparator = (0,
|
|
57
|
+
const StyledColonSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
57
58
|
padding-bottom: 1px;
|
|
58
59
|
margin: auto;
|
|
59
60
|
`;
|
|
60
|
-
const Styled2DigitsInput = (0,
|
|
61
|
+
const Styled2DigitsInput = (0, import_ds_system.styled)(ResettedInput)`
|
|
61
62
|
width: 100%;
|
|
62
63
|
height: 100%;
|
|
63
64
|
${({ disabled }) => disabled ? `color: #616b7f;` : ``}
|
|
64
65
|
`;
|
|
65
|
-
const StyledMin4DigitsInput = (0,
|
|
66
|
+
const StyledMin4DigitsInput = (0, import_ds_system.styled)(ResettedInput)`
|
|
66
67
|
width: 100%;
|
|
67
68
|
height: 100%;
|
|
68
69
|
${({ disabled }) => disabled ? `color: #616b7f;` : ``}
|
|
69
70
|
`;
|
|
70
|
-
const StyledInputsWrapperGrid = (0,
|
|
71
|
+
const StyledInputsWrapperGrid = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.CONTAINER })`
|
|
71
72
|
width: max-content;
|
|
72
73
|
align-items: center;
|
|
73
74
|
background-color: white;
|
|
@@ -90,8 +91,12 @@ const StyledInputsWrapperGrid = (0, import_styled_components.default)(import_ds_
|
|
|
90
91
|
padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "0"};
|
|
91
92
|
position: relative;
|
|
92
93
|
${({ theme, disabled }) => disabled ? `background-color: ${theme.colors.neutral[100]};` : ``}
|
|
94
|
+
|
|
95
|
+
${import_ds_system.sizing}
|
|
96
|
+
${import_ds_system.space}
|
|
97
|
+
${import_ds_system.layout}
|
|
93
98
|
`;
|
|
94
|
-
const StyledDateInputsWrapperGrid =
|
|
99
|
+
const StyledDateInputsWrapperGrid = import_ds_system.styled.div`
|
|
95
100
|
display: grid;
|
|
96
101
|
grid-template-columns: 24px min-content 24px min-content 48px;
|
|
97
102
|
grid-template-rows: min-content;
|
|
@@ -103,7 +108,7 @@ const StyledDateInputsWrapperGrid = import_styled_components.default.div`
|
|
|
103
108
|
margin: 0;
|
|
104
109
|
}
|
|
105
110
|
`;
|
|
106
|
-
const StyledTimeInputsWrapperGrid =
|
|
111
|
+
const StyledTimeInputsWrapperGrid = import_ds_system.styled.div`
|
|
107
112
|
display: grid;
|
|
108
113
|
grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;
|
|
109
114
|
grid-template-rows: min-content;
|
|
@@ -115,7 +120,7 @@ const StyledTimeInputsWrapperGrid = import_styled_components.default.div`
|
|
|
115
120
|
margin: 0;
|
|
116
121
|
}
|
|
117
122
|
`;
|
|
118
|
-
const StyledPickersIconsWrapperGrid = (0,
|
|
123
|
+
const StyledPickersIconsWrapperGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
119
124
|
position: relative;
|
|
120
125
|
${({ isControllerOnly }) => isControllerOnly ? `` : `height: 26px;`}
|
|
121
126
|
:before {
|
|
@@ -131,7 +136,7 @@ const StyledPickersIconsWrapperGrid = (0, import_styled_components.default)(impo
|
|
|
131
136
|
`}
|
|
132
137
|
}
|
|
133
138
|
`;
|
|
134
|
-
const StyledFocusWithIn = (0,
|
|
139
|
+
const StyledFocusWithIn = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
135
140
|
position: relative;
|
|
136
141
|
&:focus-within {
|
|
137
142
|
&:after {
|
|
@@ -148,7 +153,7 @@ const StyledFocusWithIn = (0, import_styled_components.default)(import_ds_grid.G
|
|
|
148
153
|
}
|
|
149
154
|
}
|
|
150
155
|
`;
|
|
151
|
-
const StyledClearButton = (0,
|
|
156
|
+
const StyledClearButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { COMPONENT_NAME: import_theming.COMPONENT_NAME, slot: import_theming.slots.CLEAR_BUTTON })`
|
|
152
157
|
height: 26px;
|
|
153
158
|
position: relative;
|
|
154
159
|
visibility: ${({ shouldDisplay }) => shouldDisplay ? "visible" : "hidden"};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Styleds.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport styled from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB
|
|
4
|
+
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA8C;AAC9C,qBAAqB;AACrB,uBAA2B;AAC3B,qBAAsC;AAEtC,MAAM,gBAAgB,6BAAO,SAAS,EAAE,MAAM,+BAAgB,MAAM,qBAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc1E,MAAM,kBAAkB,6BAAO,mBAAI;AAAA;AAAA;AAAA;AAKnC,MAAM,uBAAuB,6BAAO,mBAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,qBAAqB,6BAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,eAAgB,WAAW,oBAAoB;AAAA;AAG/C,MAAM,wBAAwB,6BAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,eAAgB,WAAW,oBAAoB;AAAA;AAG/C,MAAM,0BAA0B,6BAAO,qBAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,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,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,gCAAgC,6BAAO,mBAAI;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,6BAAO,mBAAI;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,6BAAO,6BAAY,EAAE,+CAAgB,MAAM,qBAAM,aAAa,CAAC;AAAA;AAAA;AAAA,gBAGhF,CAAC,EAAE,oBAAqB,gBAAgB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/propTypes.js
CHANGED
|
@@ -1,9 +1,26 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __export = (target, all) => {
|
|
8
25
|
for (var name in all)
|
|
9
26
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -54,7 +71,7 @@ const defaultProps = {
|
|
|
54
71
|
autoFocus: false,
|
|
55
72
|
preventCloseOnSelection: false
|
|
56
73
|
};
|
|
57
|
-
const propTypes = {
|
|
74
|
+
const propTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), import_ds_utilities.xstyledPropTypes), {
|
|
58
75
|
type: import_ds_utilities.PropTypes.oneOf([
|
|
59
76
|
"full-date-time",
|
|
60
77
|
"date-time-inputs",
|
|
@@ -91,5 +108,5 @@ const propTypes = {
|
|
|
91
108
|
onTimeWheelOpenStartingTime: import_ds_utilities.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"),
|
|
92
109
|
minutesInterval: import_ds_utilities.PropTypes.number.description("increments/decrements of minutes in time related controllers interactions").defaultValue("1"),
|
|
93
110
|
"data-testid": import_ds_utilities.PropTypes.string.description("Unique id for tests.").defaultValue("")
|
|
94
|
-
};
|
|
111
|
+
});
|
|
95
112
|
//# sourceMappingURL=propTypes.js.map
|