@elliemae/ds-slider-v2 3.29.1-rc.1 → 3.29.2-rc.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/parts/MainContent.js +2 -2
- package/dist/cjs/parts/MainContent.js.map +2 -2
- package/dist/cjs/styles.js +1 -1
- package/dist/cjs/styles.js.map +1 -1
- package/dist/esm/parts/MainContent.js +2 -2
- package/dist/esm/parts/MainContent.js.map +2 -2
- package/dist/esm/styles.js +1 -1
- package/dist/esm/styles.js.map +1 -1
- package/package.json +8 -8
|
@@ -51,7 +51,6 @@ const MainContent = () => {
|
|
|
51
51
|
import_styles.StyledWrapper,
|
|
52
52
|
{
|
|
53
53
|
width: "100%",
|
|
54
|
-
style: { maxWidth: "100%" },
|
|
55
54
|
alignItems: "center",
|
|
56
55
|
rows: ["auto", "auto"],
|
|
57
56
|
getOwnerProps,
|
|
@@ -84,7 +83,8 @@ const MainContent = () => {
|
|
|
84
83
|
},
|
|
85
84
|
renderTrack: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Track.Track, { ...args }),
|
|
86
85
|
renderThumb: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Thumb.Thumb, { ...args }),
|
|
87
|
-
allowOverlap:
|
|
86
|
+
allowOverlap: true,
|
|
87
|
+
draggableTrack: true
|
|
88
88
|
}
|
|
89
89
|
)
|
|
90
90
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/MainContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useContext } from 'react';\nimport { Range } from 'react-range';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledRangeWrapper, StyledWrapper } from '../styles.js';\nimport { Track } from './Track.js';\nimport { Thumb } from './Thumb.js';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\nexport const MainContent = () => {\n const {\n propsWithDefault: { step, minValue, maxValue, disabled, onValueChange, className },\n xstyledProps,\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n return (\n <StyledWrapper\n width=\"100%\"\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { useContext } from 'react';\nimport { Range } from 'react-range';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledRangeWrapper, StyledWrapper } from '../styles.js';\nimport { Track } from './Track.js';\nimport { Thumb } from './Thumb.js';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\nexport const MainContent = () => {\n const {\n propsWithDefault: { step, minValue, maxValue, disabled, onValueChange, className },\n xstyledProps,\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n return (\n <StyledWrapper\n width=\"100%\"\n alignItems=\"center\"\n rows={['auto', 'auto']}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n className={className}\n {...xstyledProps}\n >\n <StyledRangeWrapper\n rows={['28px', 'auto']}\n alignItems=\"center\"\n margin=\"0 16px\"\n minHeight=\"28px\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Range\n step={step}\n min={minValue}\n max={maxValue}\n values={rangeValues}\n disabled={disabled}\n onChange={(values) => {\n if (values.length === 1) {\n onValueChange(values[0]);\n } else {\n onValueChange(values as DSSliderV2T.ValueType<true>);\n }\n }}\n renderTrack={(args) => <Track {...args} />}\n renderThumb={(args) => <Thumb {...args} />}\n allowOverlap\n draggableTrack\n />\n </StyledRangeWrapper>\n </StyledWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDU;AAhDjC,mBAA2B;AAC3B,yBAAsB;AACtB,2BAA8B;AAC9B,oBAAkD;AAClD,mBAAsB;AACtB,mBAAsB;AAGf,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,UAAU,UAAU,UAAU,eAAe,UAAU;AAAA,IACjF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAW;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,CAAC,QAAQ,MAAM;AAAA,UACrB,YAAW;AAAA,UACX,QAAO;AAAA,UACP,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,KAAK;AAAA,cACL,KAAK;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,UAAU,CAAC,WAAW;AACpB,oBAAI,OAAO,WAAW,GAAG;AACvB,gCAAc,OAAO,CAAC,CAAC;AAAA,gBACzB,OAAO;AACL,gCAAc,MAAqC;AAAA,gBACrD;AAAA,cACF;AAAA,cACA,aAAa,CAAC,SAAS,4CAAC,sBAAO,GAAG,MAAM;AAAA,cACxC,aAAa,CAAC,SAAS,4CAAC,sBAAO,GAAG,MAAM;AAAA,cACxC,cAAY;AAAA,cACZ,gBAAc;AAAA;AAAA,UAChB;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["DSSliderV2Context"]
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -97,7 +97,7 @@ const StyledTickMarksContainer = (0, import_ds_system.styled)("div", {
|
|
|
97
97
|
})`
|
|
98
98
|
display: flex;
|
|
99
99
|
justify-content: space-between;
|
|
100
|
-
// this next property-value
|
|
100
|
+
// this next property-value reverts the sanitize.css value
|
|
101
101
|
overflow-wrap: normal;
|
|
102
102
|
`;
|
|
103
103
|
const StyledThumb = (0, import_ds_system.styled)("div", { name: import_constants.DSSliderV2Name, slot: import_constants.SLIDER_V2_SLOTS.THUMB })`
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n disabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n width: ${(props) => props.theme.space.xxxs};\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})`\n display: flex;\n justify-content: space-between;\n // this next property-value
|
|
4
|
+
"sourcesContent": ["import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n disabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n width: ${(props) => props.theme.space.xxxs};\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})`\n display: flex;\n justify-content: space-between;\n // this next property-value reverts the sanitize.css value\n overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{ disabled: boolean }>`\n height: 20px;\n width: 20px;\n top: 0;\n background-color: ${(props) =>\n props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n border-radius: 10px;\n border: 1px solid ${(props) => (props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400])};\n\n :focus {\n border: 2px solid brand-700;\n outline: unset;\n }\n\n :hover {\n background-color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[100] : theme.colors.brand[200])};\n }\n\n z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAmC;AACnC,qBAAqB;AACrB,uBAAuB;AACvB,uBAAgD;AAEzC,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,KAAK,CAAC;AAEvF,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,cAAc,CAAC;AAErG,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,MAAM,CAAC;AAAA;AAAA,YAQlF,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,eAE1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBACzB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAChC,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,GAAG,QAC9B,uCAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,WACV,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC;AAAA;AAGF,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,IAAI,CAAC;AAAA;AAAA;AAAA,kBAGxE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,qBACxF,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3C,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWjG,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU;AAAA;AAG9C,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMhG,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC7B,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGnG,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIxE,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,sBAEjE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ3F,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,aAGlG,CAAC,UAAU,MAAM,MAAM,OAAO;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,7 +18,6 @@ const MainContent = () => {
|
|
|
18
18
|
StyledWrapper,
|
|
19
19
|
{
|
|
20
20
|
width: "100%",
|
|
21
|
-
style: { maxWidth: "100%" },
|
|
22
21
|
alignItems: "center",
|
|
23
22
|
rows: ["auto", "auto"],
|
|
24
23
|
getOwnerProps,
|
|
@@ -51,7 +50,8 @@ const MainContent = () => {
|
|
|
51
50
|
},
|
|
52
51
|
renderTrack: (args) => /* @__PURE__ */ jsx(Track, { ...args }),
|
|
53
52
|
renderThumb: (args) => /* @__PURE__ */ jsx(Thumb, { ...args }),
|
|
54
|
-
allowOverlap:
|
|
53
|
+
allowOverlap: true,
|
|
54
|
+
draggableTrack: true
|
|
55
55
|
}
|
|
56
56
|
)
|
|
57
57
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { Range } from 'react-range';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledRangeWrapper, StyledWrapper } from '../styles.js';\nimport { Track } from './Track.js';\nimport { Thumb } from './Thumb.js';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\nexport const MainContent = () => {\n const {\n propsWithDefault: { step, minValue, maxValue, disabled, onValueChange, className },\n xstyledProps,\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n return (\n <StyledWrapper\n width=\"100%\"\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { Range } from 'react-range';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledRangeWrapper, StyledWrapper } from '../styles.js';\nimport { Track } from './Track.js';\nimport { Thumb } from './Thumb.js';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\nexport const MainContent = () => {\n const {\n propsWithDefault: { step, minValue, maxValue, disabled, onValueChange, className },\n xstyledProps,\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n return (\n <StyledWrapper\n width=\"100%\"\n alignItems=\"center\"\n rows={['auto', 'auto']}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n className={className}\n {...xstyledProps}\n >\n <StyledRangeWrapper\n rows={['28px', 'auto']}\n alignItems=\"center\"\n margin=\"0 16px\"\n minHeight=\"28px\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Range\n step={step}\n min={minValue}\n max={maxValue}\n values={rangeValues}\n disabled={disabled}\n onChange={(values) => {\n if (values.length === 1) {\n onValueChange(values[0]);\n } else {\n onValueChange(values as DSSliderV2T.ValueType<true>);\n }\n }}\n renderTrack={(args) => <Track {...args} />}\n renderThumb={(args) => <Thumb {...args} />}\n allowOverlap\n draggableTrack\n />\n </StyledRangeWrapper>\n </StyledWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgDU;AAhDjC,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,OAAO,uBAAuB;AAC9B,SAAS,oBAAoB,qBAAqB;AAClD,SAAS,aAAa;AACtB,SAAS,aAAa;AAGf,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,UAAU,UAAU,UAAU,eAAe,UAAU;AAAA,IACjF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAW;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,CAAC,QAAQ,MAAM;AAAA,UACrB,YAAW;AAAA,UACX,QAAO;AAAA,UACP,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,KAAK;AAAA,cACL,KAAK;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,UAAU,CAAC,WAAW;AACpB,oBAAI,OAAO,WAAW,GAAG;AACvB,gCAAc,OAAO,CAAC,CAAC;AAAA,gBACzB,OAAO;AACL,gCAAc,MAAqC;AAAA,gBACrD;AAAA,cACF;AAAA,cACA,aAAa,CAAC,SAAS,oBAAC,SAAO,GAAG,MAAM;AAAA,cACxC,aAAa,CAAC,SAAS,oBAAC,SAAO,GAAG,MAAM;AAAA,cACxC,cAAY;AAAA,cACZ,gBAAc;AAAA;AAAA,UAChB;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -57,7 +57,7 @@ const StyledTickMarksContainer = styled("div", {
|
|
|
57
57
|
})`
|
|
58
58
|
display: flex;
|
|
59
59
|
justify-content: space-between;
|
|
60
|
-
// this next property-value
|
|
60
|
+
// this next property-value reverts the sanitize.css value
|
|
61
61
|
overflow-wrap: normal;
|
|
62
62
|
`;
|
|
63
63
|
const StyledThumb = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })`
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n disabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n width: ${(props) => props.theme.space.xxxs};\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})`\n display: flex;\n justify-content: space-between;\n // this next property-value
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n disabled: boolean;\n multiple: boolean;\n minValue: number;\n maxValue: number;\n rangeValues: [number] | [number, number];\n}>`\n position: relative;\n height: ${(props) => props.theme.space.xxxs};\n width: 100%;\n min-width: ${(props) => props.theme.space.xl};\n border-radius: ${(props) => props.theme.space.xxxs};\n background: ${(props) =>\n props.disabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.multiple\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => props.theme.space.xxxs};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n padding: 0 2px;\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n isSelected: boolean;\n}>`\n display: flex;\n justify-content: center;\n text-align: center;\n min-height: ${(props) => props.theme.space.xs};\n overflow: visible;\n width: ${(props) => props.theme.space.xxxs};\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n name: DSSliderV2Name,\n slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})`\n display: flex;\n justify-content: space-between;\n // this next property-value reverts the sanitize.css value\n overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{ disabled: boolean }>`\n height: 20px;\n width: 20px;\n top: 0;\n background-color: ${(props) =>\n props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n border-radius: 10px;\n border: 1px solid ${(props) => (props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400])};\n\n :focus {\n border: 2px solid brand-700;\n outline: unset;\n }\n\n :hover {\n background-color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[100] : theme.colors.brand[200])};\n }\n\n z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,0BAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,KAAK,CAAC;AAEvF,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,cAAc,CAAC;AAErG,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,CAAC;AAAA;AAAA,YAQlF,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,eAE1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBACzB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAChC,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,GAAG,IAC9B,mBAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,WACV,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC;AAAA;AAGF,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,IAAI,CAAC;AAAA;AAAA;AAAA,kBAGxE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,qBACxF,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3C,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWjG,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU;AAAA;AAG9C,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMhG,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC7B,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGnG,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIxE,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,sBAEjE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ3F,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,aAGlG,CAAC,UAAU,MAAM,MAAM,OAAO;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-slider-v2",
|
|
3
|
-
"version": "3.29.
|
|
3
|
+
"version": "3.29.2-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Slider V 2",
|
|
6
6
|
"files": [
|
|
@@ -37,18 +37,18 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"react-range": "~1.8.14",
|
|
39
39
|
"uid": "^2.0.2",
|
|
40
|
-
"@elliemae/ds-grid": "3.29.
|
|
41
|
-
"@elliemae/ds-props-helpers": "3.29.
|
|
42
|
-
"@elliemae/ds-system": "3.29.
|
|
43
|
-
"@elliemae/ds-tooltip": "3.29.
|
|
44
|
-
"@elliemae/ds-truncated-tooltip-text": "3.29.
|
|
45
|
-
"@elliemae/ds-utilities": "3.29.
|
|
40
|
+
"@elliemae/ds-grid": "3.29.2-rc.0",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.29.2-rc.0",
|
|
42
|
+
"@elliemae/ds-system": "3.29.2-rc.0",
|
|
43
|
+
"@elliemae/ds-tooltip": "3.29.2-rc.0",
|
|
44
|
+
"@elliemae/ds-truncated-tooltip-text": "3.29.2-rc.0",
|
|
45
|
+
"@elliemae/ds-utilities": "3.29.2-rc.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
49
49
|
"lodash": "^4.17.21",
|
|
50
50
|
"styled-components": "~5.3.9",
|
|
51
|
-
"@elliemae/ds-monorepo-devops": "3.29.
|
|
51
|
+
"@elliemae/ds-monorepo-devops": "3.29.2-rc.0"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"@testing-library/jest-dom": "~5.16.4",
|