@elliemae/ds-form-date-time-picker 3.1.0-next.2 → 3.1.0-next.20
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 +4 -3
- package/dist/cjs/ControlledDateTimePicker.js.map +2 -2
- package/dist/cjs/config/useControlledDateTimePicker.js +1 -1
- package/dist/cjs/config/useControlledDateTimePicker.js.map +2 -2
- package/dist/cjs/exported-related/theming.js +4 -4
- package/dist/cjs/exported-related/theming.js.map +2 -2
- package/dist/cjs/index.js +3 -3
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/Styleds.js +22 -7
- package/dist/cjs/parts/Pickers/Calendar/Styleds.js.map +2 -2
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/Styleds.js +4 -4
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/Styleds.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js +16 -7
- package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/cjs/parts/Styleds.js +3 -3
- package/dist/cjs/parts/Styleds.js.map +2 -2
- package/dist/cjs/propTypes.js.map +1 -1
- package/dist/esm/ControlledDateTimePicker.js +3 -2
- package/dist/esm/ControlledDateTimePicker.js.map +2 -2
- package/dist/esm/config/useControlledDateTimePicker.js +1 -1
- package/dist/esm/config/useControlledDateTimePicker.js.map +2 -2
- package/dist/esm/exported-related/theming.js +4 -4
- package/dist/esm/exported-related/theming.js.map +2 -2
- package/dist/esm/index.js +4 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/Pickers/Calendar/Styleds.js +23 -8
- package/dist/esm/parts/Pickers/Calendar/Styleds.js.map +2 -2
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/Styleds.js +5 -5
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/Styleds.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/Styleds.js +17 -8
- package/dist/esm/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/esm/parts/Styleds.js +4 -4
- package/dist/esm/parts/Styleds.js.map +2 -2
- package/dist/esm/propTypes.js.map +1 -1
- package/package.json +24 -25
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2 from "react";
|
|
3
|
-
import { describe } from "
|
|
3
|
+
import { describe } from "@elliemae/ds-utilities";
|
|
4
|
+
import { DSControlledDateTimePickerName } from "./exported-related/theming";
|
|
4
5
|
import { propTypes } from "./propTypes";
|
|
5
6
|
import { useControlledDateTimePicker } from "./config/useControlledDateTimePicker";
|
|
6
7
|
import { ControlledDateTimePickerContent } from "./parts/ControlledDateTimePickerContent";
|
|
@@ -11,7 +12,7 @@ const DSControlledDateTimePicker = (props) => {
|
|
|
11
12
|
value: ctx
|
|
12
13
|
}, /* @__PURE__ */ React2.createElement(ControlledDateTimePickerContent, null));
|
|
13
14
|
};
|
|
14
|
-
DSControlledDateTimePicker.displayName =
|
|
15
|
+
DSControlledDateTimePicker.displayName = DSControlledDateTimePickerName;
|
|
15
16
|
const DSControlledDateTimePickerWithSchema = describe(DSControlledDateTimePicker);
|
|
16
17
|
DSControlledDateTimePickerWithSchema.propTypes = propTypes;
|
|
17
18
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledDateTimePicker.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe } from '
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,QAAM,MAAM,4BAA4B,KAAK;AAC7C,SACE,qCAAC,gCAAgC,UAAhC;AAAA,IAAyC,OAAO;AAAA,KAC/C,qCAAC,qCAAgC,CACnC;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,SAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSControlledDateTimePickerName } from './exported-related/theming';\nimport { propTypes } from './propTypes';\nimport { useControlledDateTimePicker } from './config/useControlledDateTimePicker';\nimport { ControlledDateTimePickerContent } from './parts/ControlledDateTimePickerContent';\nimport { ControlledDateTimePickerContext } from './ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerT } from './propTypes';\n\nconst DSControlledDateTimePicker = (props: DSControlledDateTimePickerT.Props): JSX.Element => {\n const ctx = useControlledDateTimePicker(props);\n return (\n <ControlledDateTimePickerContext.Provider value={ctx}>\n <ControlledDateTimePickerContent />\n </ControlledDateTimePickerContext.Provider>\n );\n};\n\nDSControlledDateTimePicker.displayName = DSControlledDateTimePickerName;\nconst DSControlledDateTimePickerWithSchema = describe(DSControlledDateTimePicker);\nDSControlledDateTimePickerWithSchema.propTypes = propTypes;\n\nexport { DSControlledDateTimePickerWithSchema, DSControlledDateTimePicker };\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,QAAM,MAAM,4BAA4B,KAAK;AAC7C,SACE,qCAAC,gCAAgC,UAAhC;AAAA,IAAyC,OAAO;AAAA,KAC/C,qCAAC,qCAAgC,CACnC;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,SAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,7 +32,7 @@ const useControlledDateTimePicker = (props) => {
|
|
|
32
32
|
const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);
|
|
33
33
|
const flags = useGetFlags(propsWithDefaults);
|
|
34
34
|
const DOMRefs = useGetReferences(flags);
|
|
35
|
-
const focusTrackers = useFocusTracker({ DOMRefs, flags });
|
|
35
|
+
const focusTrackers = useFocusTracker({ DOMRefs, flags, propsWithDefaults });
|
|
36
36
|
const relevantValues = useRelevantValueFromProps(propsWithDefaults);
|
|
37
37
|
const propsBasedOnType = useGetPropsBasedOnType(propsWithDefaults);
|
|
38
38
|
const destructuredValues = useGetDestructuredValues(__spreadValues(__spreadValues({}, propsBasedOnType), flags));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useControlledDateTimePicker.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { useGetDatePickerWithDefaultsProps } from './useGetPropsWithDefault';\nimport { useFocusTracker } from './useFocusTracker';\nimport { useGetFlags } from './useGetFlags';\nimport { useGetReferences } from './useGetReferences';\nimport { useRelevantValueFromProps } from './useRelevantValueFromProps';\nimport { useGetPropsBasedOnType } from './useGetPropsBasedOnType';\nimport { useGetDestructuredValues } from './useGetDestructuredValues';\nimport { useChangeHandlers } from './useChangeHandlers';\nimport { useGlobalKeyHandlers } from './useGlobalKeyHandlers';\nimport { useValidateProps } from './useValidateProps';\nimport type { DSControlledDateTimePickerT } from '../propTypes';\n\nexport type ControlledDateTimePickerContextT = ReturnType<typeof useGetFlags> &\n ReturnType<typeof useFocusTracker> &\n ReturnType<typeof useGetReferences> &\n ReturnType<typeof useGetPropsBasedOnType> &\n ReturnType<typeof useRelevantValueFromProps> &\n ReturnType<typeof useGetDestructuredValues> &\n ReturnType<typeof useChangeHandlers> &\n ReturnType<typeof useGlobalKeyHandlers> & {\n props: DSControlledDateTimePickerT.InternalProps;\n ariaCurrentValueForInputs: string;\n globalAttrs: Record<string, unknown>;\n xstyledAttrs: Record<string, unknown>;\n };\n\nexport const useControlledDateTimePicker = (\n props: DSControlledDateTimePickerT.Props,\n): ControlledDateTimePickerContextT => {\n // if we detect wrong props configuration we throw meaningful errors\n useValidateProps(props);\n\n const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);\n\n const flags = useGetFlags(propsWithDefaults);\n const DOMRefs = useGetReferences(flags); // refs are used for \"auto-advance\" feature\n const focusTrackers = useFocusTracker({ DOMRefs, flags });\n const relevantValues = useRelevantValueFromProps(propsWithDefaults);\n const propsBasedOnType = useGetPropsBasedOnType(propsWithDefaults);\n const destructuredValues = useGetDestructuredValues({ ...propsBasedOnType, ...flags });\n const changeHandlers = useChangeHandlers({\n relevantValues,\n destructuredValues,\n propsBasedOnType,\n DOMRefs,\n focusTrackers,\n });\n\n const globalKeyHandlers = useGlobalKeyHandlers({ changeHandlers, propsBasedOnType, DOMRefs, flags, focusTrackers });\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call\n // const dataAttrs = getDataProps<DSControlledDateTimePickerT.InternalProps>(propsWithDefaults);\n\n const xstyledAttrs = useGetXstyledProps(propsWithDefaults) as Record<string, unknown>;\n\n const globalAttrs = useGetGlobalAttributes(propsWithDefaults) as Record<string, unknown>;\n\n const { announcedDateValues, announcedTimeValues } = destructuredValues;\n const { isWithDateInputs, isDateTimeSelector, isWithTimeInputs } = flags;\n\n const ariaCurrentValueForInputs = `current values: ${isWithDateInputs ? `${announcedDateValues}` : ''}${\n isDateTimeSelector ? ', ' : ''\n }${isWithTimeInputs ? `${announcedTimeValues}` : ''}`;\n\n const ctx = React.useMemo(\n () => ({\n props: propsWithDefaults,\n ariaCurrentValueForInputs,\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n xstyledAttrs,\n globalAttrs,\n ...focusTrackers,\n ...flags,\n ...DOMRefs,\n ...relevantValues,\n ...propsBasedOnType,\n ...destructuredValues,\n ...changeHandlers,\n ...globalKeyHandlers,\n }),\n [\n propsWithDefaults,\n ariaCurrentValueForInputs,\n focusTrackers,\n flags,\n DOMRefs,\n relevantValues,\n propsBasedOnType,\n destructuredValues,\n changeHandlers,\n globalKeyHandlers,\n xstyledAttrs,\n globalAttrs,\n ],\n );\n\n return ctx;\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAiBO,MAAM,8BAA8B,CACzC,UACqC;AAErC,mBAAiB,KAAK;AAEtB,QAAM,oBAAoB,kCAAkC,KAAK;AAEjE,QAAM,QAAQ,YAAY,iBAAiB;AAC3C,QAAM,UAAU,iBAAiB,KAAK;AACtC,QAAM,gBAAgB,gBAAgB,EAAE,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { useGetDatePickerWithDefaultsProps } from './useGetPropsWithDefault';\nimport { useFocusTracker } from './useFocusTracker';\nimport { useGetFlags } from './useGetFlags';\nimport { useGetReferences } from './useGetReferences';\nimport { useRelevantValueFromProps } from './useRelevantValueFromProps';\nimport { useGetPropsBasedOnType } from './useGetPropsBasedOnType';\nimport { useGetDestructuredValues } from './useGetDestructuredValues';\nimport { useChangeHandlers } from './useChangeHandlers';\nimport { useGlobalKeyHandlers } from './useGlobalKeyHandlers';\nimport { useValidateProps } from './useValidateProps';\nimport type { DSControlledDateTimePickerT } from '../propTypes';\n\nexport type ControlledDateTimePickerContextT = ReturnType<typeof useGetFlags> &\n ReturnType<typeof useFocusTracker> &\n ReturnType<typeof useGetReferences> &\n ReturnType<typeof useGetPropsBasedOnType> &\n ReturnType<typeof useRelevantValueFromProps> &\n ReturnType<typeof useGetDestructuredValues> &\n ReturnType<typeof useChangeHandlers> &\n ReturnType<typeof useGlobalKeyHandlers> & {\n props: DSControlledDateTimePickerT.InternalProps;\n ariaCurrentValueForInputs: string;\n globalAttrs: Record<string, unknown>;\n xstyledAttrs: Record<string, unknown>;\n };\n\nexport const useControlledDateTimePicker = (\n props: DSControlledDateTimePickerT.Props,\n): ControlledDateTimePickerContextT => {\n // if we detect wrong props configuration we throw meaningful errors\n useValidateProps(props);\n\n const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);\n\n const flags = useGetFlags(propsWithDefaults);\n const DOMRefs = useGetReferences(flags); // refs are used for \"auto-advance\" feature\n const focusTrackers = useFocusTracker({ DOMRefs, flags, propsWithDefaults });\n const relevantValues = useRelevantValueFromProps(propsWithDefaults);\n const propsBasedOnType = useGetPropsBasedOnType(propsWithDefaults);\n const destructuredValues = useGetDestructuredValues({ ...propsBasedOnType, ...flags });\n const changeHandlers = useChangeHandlers({\n relevantValues,\n destructuredValues,\n propsBasedOnType,\n DOMRefs,\n focusTrackers,\n });\n\n const globalKeyHandlers = useGlobalKeyHandlers({ changeHandlers, propsBasedOnType, DOMRefs, flags, focusTrackers });\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call\n // const dataAttrs = getDataProps<DSControlledDateTimePickerT.InternalProps>(propsWithDefaults);\n\n const xstyledAttrs = useGetXstyledProps(propsWithDefaults) as Record<string, unknown>;\n\n const globalAttrs = useGetGlobalAttributes(propsWithDefaults) as Record<string, unknown>;\n\n const { announcedDateValues, announcedTimeValues } = destructuredValues;\n const { isWithDateInputs, isDateTimeSelector, isWithTimeInputs } = flags;\n\n const ariaCurrentValueForInputs = `current values: ${isWithDateInputs ? `${announcedDateValues}` : ''}${\n isDateTimeSelector ? ', ' : ''\n }${isWithTimeInputs ? `${announcedTimeValues}` : ''}`;\n\n const ctx = React.useMemo(\n () => ({\n props: propsWithDefaults,\n ariaCurrentValueForInputs,\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n xstyledAttrs,\n globalAttrs,\n ...focusTrackers,\n ...flags,\n ...DOMRefs,\n ...relevantValues,\n ...propsBasedOnType,\n ...destructuredValues,\n ...changeHandlers,\n ...globalKeyHandlers,\n }),\n [\n propsWithDefaults,\n ariaCurrentValueForInputs,\n focusTrackers,\n flags,\n DOMRefs,\n relevantValues,\n propsBasedOnType,\n destructuredValues,\n changeHandlers,\n globalKeyHandlers,\n xstyledAttrs,\n globalAttrs,\n ],\n );\n\n return ctx;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAiBO,MAAM,8BAA8B,CACzC,UACqC;AAErC,mBAAiB,KAAK;AAEtB,QAAM,oBAAoB,kCAAkC,KAAK;AAEjE,QAAM,QAAQ,YAAY,iBAAiB;AAC3C,QAAM,UAAU,iBAAiB,KAAK;AACtC,QAAM,gBAAgB,gBAAgB,EAAE,SAAS,OAAO,kBAAkB,CAAC;AAC3E,QAAM,iBAAiB,0BAA0B,iBAAiB;AAClE,QAAM,mBAAmB,uBAAuB,iBAAiB;AACjE,QAAM,qBAAqB,yBAAyB,kCAAK,mBAAqB,MAAO;AACrF,QAAM,iBAAiB,kBAAkB;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,oBAAoB,qBAAqB,EAAE,gBAAgB,kBAAkB,SAAS,OAAO,cAAc,CAAC;AAKlH,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,cAAc,uBAAuB,iBAAiB;AAE5D,QAAM,EAAE,qBAAqB,wBAAwB;AACrD,QAAM,EAAE,kBAAkB,oBAAoB,qBAAqB;AAEnE,QAAM,4BAA4B,mBAAmB,mBAAmB,GAAG,wBAAwB,KACjG,qBAAqB,OAAO,KAC3B,mBAAmB,GAAG,wBAAwB;AAEjD,QAAM,MAAM,OAAM,QAChB,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IAEA;AAAA,IACA;AAAA,KACG,gBACA,QACA,UACA,iBACA,mBACA,qBACA,iBACA,oBAEL;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
const
|
|
3
|
-
const
|
|
2
|
+
const DSControlledDateTimePickerName = "DSControlledDateTimePicker";
|
|
3
|
+
const DSControlledDateTimePickerSlots = {
|
|
4
4
|
CONTAINER: "root",
|
|
5
5
|
INPUT: "field-input",
|
|
6
6
|
PICKER_ICONS: {
|
|
@@ -37,7 +37,7 @@ const slots = {
|
|
|
37
37
|
CLEAR_BUTTON: "clear-btn"
|
|
38
38
|
};
|
|
39
39
|
export {
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
DSControlledDateTimePickerName,
|
|
41
|
+
DSControlledDateTimePickerSlots
|
|
42
42
|
};
|
|
43
43
|
//# sourceMappingURL=theming.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSControlledDateTimePickerName = 'DSControlledDateTimePicker';\n\nexport const DSControlledDateTimePickerSlots = {\n CONTAINER: 'root',\n INPUT: 'field-input',\n PICKER_ICONS: {\n CALENDAR: 'calendar-trigger-icon',\n TIMEWHEEL: 'timewheel-trigger-icon',\n CALENDAR_TIMEWHEEL: 'calendar-timewheel-trigger-icon',\n },\n CALENDAR: {\n DAY_BUTTON: 'calendar-day',\n HEADER_LABEL: 'calendar-header-label',\n HEADER_BUTTON: 'calendar-header-buttons',\n HEADER_WEEKLY_DAY_LIST: 'calendar-header-weekly-day-list',\n },\n TIMEWHEEL: {\n TIME_BUTTON: 'timewheel-time-button',\n TIME_CHANGE_BUTTON: 'timewheel-time-change-button',\n HEADER_LABEL: 'timewheel-header-label',\n },\n CONTEXTUAL_MENU: {\n CALENDAR: 'calendar-context-content-wrapper',\n TIMEWHEEL: 'timewheel-context-content-wrapper',\n CALENDAR_TIMEWHEEL: 'calendar-timewheel-context-content-wrapper',\n },\n FOOTERS: {\n CALENDAR: 'calendar-context-footer',\n TIMEWHEEL: 'timewheel-context-footer',\n CALENDAR_TIMEWHEEL: 'calendar-timewheel-context-footer',\n },\n CONTROLLER_COMPONENT: {\n CALENDAR: 'calendar-controller-wrapper',\n TIMEWHEEL: 'timewheel-controller-wrapper',\n CALENDAR_TIMEWHEEL: 'calendar-timewheel-controller-wrapper',\n },\n CLEAR_BUTTON: 'clear-btn',\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,iCAAiC;AAEvC,MAAM,kCAAkC;AAAA,EAC7C,WAAW;AAAA,EACX,OAAO;AAAA,EACP,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,eAAe;AAAA,IACf,wBAAwB;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,IACT,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,cAAc;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,sBAAsB;AAAA,IACpB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -11,12 +11,13 @@ import {
|
|
|
11
11
|
getDateValuesFromDate
|
|
12
12
|
} from "./utils/dateHelpers";
|
|
13
13
|
import { getValidationTimeStringMetaInfo } from "./utils/timeHelpers";
|
|
14
|
-
import {
|
|
14
|
+
import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "./exported-related/theming";
|
|
15
15
|
export {
|
|
16
|
-
COMPONENT_NAME,
|
|
17
16
|
CONTROLLED_DATE_TIME_PICKER_TYPES,
|
|
18
17
|
ControlledDateTimePickerDatatestid,
|
|
19
18
|
DSControlledDateTimePicker,
|
|
19
|
+
DSControlledDateTimePickerName,
|
|
20
|
+
DSControlledDateTimePickerSlots,
|
|
20
21
|
DSControlledDateTimePickerWithSchema,
|
|
21
22
|
deconstructValuesFromDateString,
|
|
22
23
|
getDateStringFromDay,
|
|
@@ -25,7 +26,6 @@ export {
|
|
|
25
26
|
getValidationDateStringMetaInfo,
|
|
26
27
|
getValidationDateTimeStringMetaInfo,
|
|
27
28
|
getValidationTimeStringMetaInfo,
|
|
28
|
-
prependStringWithPlaceHolders
|
|
29
|
-
slots
|
|
29
|
+
prependStringWithPlaceHolders
|
|
30
30
|
};
|
|
31
31
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSControlledDateTimePickerWithSchema, DSControlledDateTimePicker } from './ControlledDateTimePicker';\nexport { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid';\nexport { CONTROLLED_DATE_TIME_PICKER_TYPES } from './ControlledDateTimePickerTypes';\nexport { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './utils/stringHelpers';\nexport { getValidationDateTimeStringMetaInfo } from './utils/dateTimeHelpers';\nexport {\n getValidationDateStringMetaInfo,\n getDateStringFromDay,\n getDayFromDateString,\n getDateValuesFromDate,\n} from './utils/dateHelpers';\nexport { getValidationTimeStringMetaInfo } from './utils/timeHelpers';\nexport {
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSControlledDateTimePickerWithSchema, DSControlledDateTimePicker } from './ControlledDateTimePicker';\nexport { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid';\nexport { CONTROLLED_DATE_TIME_PICKER_TYPES } from './ControlledDateTimePickerTypes';\nexport { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './utils/stringHelpers';\nexport { getValidationDateTimeStringMetaInfo } from './utils/dateTimeHelpers';\nexport {\n getValidationDateStringMetaInfo,\n getDateStringFromDay,\n getDayFromDateString,\n getDateValuesFromDate,\n} from './utils/dateHelpers';\nexport { getValidationTimeStringMetaInfo } from './utils/timeHelpers';\nexport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from './exported-related/theming';\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
import { css, styled } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
5
|
-
import {
|
|
5
|
+
import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../../../exported-related/theming";
|
|
6
6
|
const diagonalLine = css`
|
|
7
7
|
&:before {
|
|
8
8
|
position: absolute;
|
|
@@ -41,7 +41,10 @@ const backgroundDateRange = {
|
|
|
41
41
|
border-radius: 0 50% 50% 0;
|
|
42
42
|
`
|
|
43
43
|
};
|
|
44
|
-
const StyledIconTriggerButton = styled(DSButtonV2, {
|
|
44
|
+
const StyledIconTriggerButton = styled(DSButtonV2, {
|
|
45
|
+
name: DSControlledDateTimePickerName,
|
|
46
|
+
slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR
|
|
47
|
+
})`
|
|
45
48
|
color: ${({ theme }) => theme.colors.brand["600"]};
|
|
46
49
|
width: 26px;
|
|
47
50
|
height: 26px;
|
|
@@ -68,10 +71,16 @@ const StyledHeader = styled.section`
|
|
|
68
71
|
text-align: center;
|
|
69
72
|
background: ${({ theme }) => theme.colors.neutral["050"]};
|
|
70
73
|
`;
|
|
71
|
-
const StyledHeaderLabel = styled("h3", {
|
|
74
|
+
const StyledHeaderLabel = styled("h3", {
|
|
75
|
+
name: DSControlledDateTimePickerName,
|
|
76
|
+
slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL
|
|
77
|
+
})`
|
|
72
78
|
font-size: 1rem;
|
|
73
79
|
`;
|
|
74
|
-
const StyledHeaderButton = styled(DSButtonV2, {
|
|
80
|
+
const StyledHeaderButton = styled(DSButtonV2, {
|
|
81
|
+
name: DSControlledDateTimePickerName,
|
|
82
|
+
slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON
|
|
83
|
+
})`
|
|
75
84
|
position: relative;
|
|
76
85
|
width: 28px;
|
|
77
86
|
height: 28px;
|
|
@@ -95,7 +104,10 @@ const StyledHeaderButton = styled(DSButtonV2, { name: COMPONENT_NAME, slot: slot
|
|
|
95
104
|
const StyledBody = styled.section`
|
|
96
105
|
padding: ${({ theme }) => theme.space.xxxs};
|
|
97
106
|
`;
|
|
98
|
-
const StyledDayBtn = styled(DSButtonV2, {
|
|
107
|
+
const StyledDayBtn = styled(DSButtonV2, {
|
|
108
|
+
name: DSControlledDateTimePickerName,
|
|
109
|
+
slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON
|
|
110
|
+
})`
|
|
99
111
|
height: 32px;
|
|
100
112
|
width: 32px;
|
|
101
113
|
border-radius: 50%;
|
|
@@ -115,8 +127,8 @@ const StyledDayBtn = styled(DSButtonV2, { name: COMPONENT_NAME, slot: slots.CALE
|
|
|
115
127
|
}
|
|
116
128
|
`;
|
|
117
129
|
const StyledWeekDaysListWrapper = styled(Grid, {
|
|
118
|
-
name:
|
|
119
|
-
slot:
|
|
130
|
+
name: DSControlledDateTimePickerName,
|
|
131
|
+
slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST
|
|
120
132
|
})`
|
|
121
133
|
font-size: ${({ theme }) => theme.fontSizes.label[400]};
|
|
122
134
|
text-align: center;
|
|
@@ -303,7 +315,10 @@ const StyledWeekDaysHeaderItem = styled.div`
|
|
|
303
315
|
width: ${({ theme }) => theme.space.s};
|
|
304
316
|
min-width: ${({ theme }) => theme.space.s};
|
|
305
317
|
`;
|
|
306
|
-
const CalendarFooterMessage = styled("footer", {
|
|
318
|
+
const CalendarFooterMessage = styled("footer", {
|
|
319
|
+
name: DSControlledDateTimePickerName,
|
|
320
|
+
slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL
|
|
321
|
+
})`
|
|
307
322
|
border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};
|
|
308
323
|
margin: 0 ${({ theme }) => theme.space.xxs2};
|
|
309
324
|
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/Calendar/Styleds.tsx"],
|
|
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 {
|
|
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,YAAY,
|
|
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 { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } 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, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR,\n})`\n color: ${({ theme }) => theme.colors.brand['600']};\n width: 26px;\n height: 26px;\n`;\n\nexport const StyledShadowWrapper = styled.div``;\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', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL,\n})`\n font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON,\n})`\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, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON,\n})`\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: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.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', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.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 background-color: white;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,10 +2,10 @@ import * as React from "react";
|
|
|
2
2
|
import { styled } from "@elliemae/ds-system";
|
|
3
3
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
4
4
|
import { CalendarContent } from "../Calendar/CalendarContent";
|
|
5
|
-
import {
|
|
5
|
+
import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../../../exported-related/theming";
|
|
6
6
|
const StyledIconTriggerButton = styled(DSButtonV2, {
|
|
7
|
-
name:
|
|
8
|
-
slot:
|
|
7
|
+
name: DSControlledDateTimePickerName,
|
|
8
|
+
slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL
|
|
9
9
|
})`
|
|
10
10
|
color: ${({ theme }) => theme.colors.brand["600"]};
|
|
11
11
|
width: 26px;
|
|
@@ -26,8 +26,8 @@ const StyledCalendar = styled(CalendarContent)`
|
|
|
26
26
|
box-shadow: none;
|
|
27
27
|
`;
|
|
28
28
|
const CalendarWithTimeWheelFooterMessage = styled("footer", {
|
|
29
|
-
name:
|
|
30
|
-
slot:
|
|
29
|
+
name: DSControlledDateTimePickerName,
|
|
30
|
+
slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL
|
|
31
31
|
})`
|
|
32
32
|
border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};
|
|
33
33
|
margin: 0 ${({ theme }) => theme.space.xxs2};
|
|
@@ -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 '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { CalendarContent } from '../Calendar/CalendarContent';\nimport {
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEO,MAAM,0BAA0B,OAAO,YAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,
|
|
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 { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.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 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: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.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,gCAAgC,aAAa;AACrD,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAOvB,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,gCAAgC,QAAQ;AAChD,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
|
}
|
|
@@ -2,7 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
import { css, styled } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
5
|
-
import {
|
|
5
|
+
import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../../../exported-related/theming";
|
|
6
6
|
const focusBorder = css`
|
|
7
7
|
&:after {
|
|
8
8
|
position: absolute;
|
|
@@ -56,8 +56,8 @@ const hoverBgPerStatus = css`
|
|
|
56
56
|
}}
|
|
57
57
|
`;
|
|
58
58
|
const StyledIconTriggerButton = styled(DSButtonV2, {
|
|
59
|
-
name:
|
|
60
|
-
slot:
|
|
59
|
+
name: DSControlledDateTimePickerName,
|
|
60
|
+
slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL
|
|
61
61
|
})`
|
|
62
62
|
color: ${({ theme }) => theme.colors.brand["600"]};
|
|
63
63
|
width: 26px;
|
|
@@ -96,7 +96,10 @@ const StyledTimePickerContainer = styled.div`
|
|
|
96
96
|
'TimePickerWheelsLegend'
|
|
97
97
|
'VerticalWheelWrapper';
|
|
98
98
|
`;
|
|
99
|
-
const StyledTimePickerHead = styled(Grid, {
|
|
99
|
+
const StyledTimePickerHead = styled(Grid, {
|
|
100
|
+
name: DSControlledDateTimePickerName,
|
|
101
|
+
slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL
|
|
102
|
+
})`
|
|
100
103
|
width: 100%;
|
|
101
104
|
grid-area: TimePickerHead;
|
|
102
105
|
justify-content: center;
|
|
@@ -134,7 +137,10 @@ const StyledTimePickerWheelWrapper = styled.div`
|
|
|
134
137
|
}
|
|
135
138
|
}
|
|
136
139
|
`;
|
|
137
|
-
const StyledTimeBtn = styled(DSButtonV2, {
|
|
140
|
+
const StyledTimeBtn = styled(DSButtonV2, {
|
|
141
|
+
name: DSControlledDateTimePickerName,
|
|
142
|
+
slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON
|
|
143
|
+
})`
|
|
138
144
|
position: relative;
|
|
139
145
|
height: ${({ theme }) => theme.space.s};
|
|
140
146
|
width: ${({ theme }) => theme.space.s};
|
|
@@ -168,15 +174,18 @@ const StyledWheelListItem = styled.div`
|
|
|
168
174
|
position: relative;
|
|
169
175
|
`;
|
|
170
176
|
const StyledWheelChangeTimeBtn = styled(DSButtonV2, {
|
|
171
|
-
name:
|
|
172
|
-
slot:
|
|
177
|
+
name: DSControlledDateTimePickerName,
|
|
178
|
+
slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON
|
|
173
179
|
})`
|
|
174
180
|
height: ${({ theme }) => theme.space.s};
|
|
175
181
|
width: ${({ theme }) => theme.space.s};
|
|
176
182
|
min-width: ${({ theme }) => theme.space.s};
|
|
177
183
|
border-radius: 50%;
|
|
178
184
|
`;
|
|
179
|
-
const TimeWheelFooterMessage = styled("footer", {
|
|
185
|
+
const TimeWheelFooterMessage = styled("footer", {
|
|
186
|
+
name: DSControlledDateTimePickerName,
|
|
187
|
+
slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL
|
|
188
|
+
})`
|
|
180
189
|
border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};
|
|
181
190
|
margin: 0 ${({ theme }) => theme.space.xxs2};
|
|
182
191
|
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 { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport {
|
|
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,
|
|
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 { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } 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: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.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`;\n\nexport const StyledTimePickerHead = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL,\n})`\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, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})`\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: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.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', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.FOOTERS.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 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,gCAAgC,aAAa;AACrD,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;AAWzC,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gCAAgC,UAAU;AAClD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKe,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;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,gCAAgC,UAAU;AAClD,CAAC;AAAA;AAAA,YAEW,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,gCAAgC,UAAU;AAClD,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;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,gCAAgC,QAAQ;AAChD,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,8 +2,8 @@ import * as React from "react";
|
|
|
2
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
|
-
import {
|
|
6
|
-
const ResettedInput = styled("input", { name:
|
|
5
|
+
import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../exported-related/theming";
|
|
6
|
+
const ResettedInput = styled("input", { name: DSControlledDateTimePickerName, slot: DSControlledDateTimePickerSlots.INPUT })`
|
|
7
7
|
border: none;
|
|
8
8
|
box-shadow: none;
|
|
9
9
|
background: none;
|
|
@@ -34,7 +34,7 @@ const StyledMin4DigitsInput = styled(ResettedInput)`
|
|
|
34
34
|
height: 100%;
|
|
35
35
|
${({ disabled }) => disabled ? `color: #616b7f;` : ``}
|
|
36
36
|
`;
|
|
37
|
-
const StyledInputsWrapperGrid = styled(Grid, { name:
|
|
37
|
+
const StyledInputsWrapperGrid = styled(Grid, { name: DSControlledDateTimePickerName, slot: DSControlledDateTimePickerSlots.CONTAINER })`
|
|
38
38
|
width: max-content;
|
|
39
39
|
align-items: center;
|
|
40
40
|
background-color: white;
|
|
@@ -119,7 +119,7 @@ const StyledFocusWithIn = styled(Grid)`
|
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
`;
|
|
122
|
-
const StyledClearButton = styled(DSButtonV2, {
|
|
122
|
+
const StyledClearButton = styled(DSButtonV2, { DSControlledDateTimePickerName, slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON })`
|
|
123
123
|
height: 26px;
|
|
124
124
|
position: relative;
|
|
125
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, sizing, layout, space } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport {
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA,MAAM,gBAAgB,OAAO,SAAS,EAAE,MAAM,
|
|
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 { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', { name: DSControlledDateTimePickerName, slot: DSControlledDateTimePickerSlots.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: DSControlledDateTimePickerName, slot: DSControlledDateTimePickerSlots.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, { DSControlledDateTimePickerName, slot: DSControlledDateTimePickerSlots.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,gCAAgC,MAAM,gCAAgC,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcpH,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,gCAAgC,MAAM,gCAAgC,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,IAIzI,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,gCAAgC,MAAM,gCAAgC,aAAa,CAAC;AAAA;AAAA;AAAA,gBAG1H,CAAC,EAAE,oBAAqB,gBAAgB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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, 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}
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { WeakValidationMap } 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} as WeakValidationMap<unknown>;\n"],
|
|
5
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
|
}
|