@elliemae/ds-form-checkbox 3.49.0-rc.8 → 3.49.0
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/styles.js +3 -3
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/utils/styleHelpers.js +5 -2
- package/dist/cjs/utils/styleHelpers.js.map +2 -2
- package/dist/esm/styles.js +3 -3
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/utils/styleHelpers.js +5 -2
- package/dist/esm/utils/styleHelpers.js.map +2 -2
- package/dist/types/utils/styleHelpers.d.ts +1 -1
- package/package.json +10 -8
package/dist/cjs/styles.js
CHANGED
|
@@ -46,7 +46,7 @@ const StyledCheckBox = (0, import_ds_system.styled)("span", {
|
|
|
46
46
|
slot: import_exported_related.DSCheckboxSlots.INPUT_WRAPPER
|
|
47
47
|
})`
|
|
48
48
|
position: relative;
|
|
49
|
-
background: ${({ theme, disabled, applyAriaDisabled }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled, applyAriaDisabled)};
|
|
49
|
+
background: ${({ theme, disabled, applyAriaDisabled, readOnly }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled, applyAriaDisabled, readOnly)};
|
|
50
50
|
|
|
51
51
|
${({ device, theme }) => {
|
|
52
52
|
if (device === "mobile") {
|
|
@@ -91,7 +91,7 @@ const StyledCheckBox = (0, import_ds_system.styled)("span", {
|
|
|
91
91
|
border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
|
|
92
92
|
}
|
|
93
93
|
&:hover {
|
|
94
|
-
background: ${({ theme, applyAriaDisabled, disabled }) => !disabled && !applyAriaDisabled ? theme.colors.brand[200] : void 0};
|
|
94
|
+
background: ${({ theme, applyAriaDisabled, disabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : void 0};
|
|
95
95
|
|
|
96
96
|
&:after {
|
|
97
97
|
border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.brand[600]};
|
|
@@ -154,7 +154,7 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
|
|
|
154
154
|
word-break: break-word;
|
|
155
155
|
`};
|
|
156
156
|
width: fit-content;
|
|
157
|
-
color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
157
|
+
color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
158
158
|
line-height: 1.2307rem;
|
|
159
159
|
@media (max-width: ${import_ds_system.th.breakpoint("small")}) {
|
|
160
160
|
line-height: 1rem; /* 13px / 16 */
|
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": ["/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled, applyAriaDisabled })
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAoD;AAEpD,0BAAuD;AACvD,8BAAgD;AAEzC,MAAM,qBAAiB,yBAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA,gBAEe,CAAC,EAAE,OAAO,UAAU,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n handleBackgroundColor(theme, disabled, applyAriaDisabled, readOnly)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.846rem; /* 24px / 13 */\n height: 1.846rem; /* 24px / 13 */`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.2307rem;\n height: 1.2307rem;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1rem; /* 16px / 16 */\n height: 1rem; /* 16px / 16 */\n }\n width: 1.2307rem; /* 16px / 13 */\n height: 1.2307rem; /* 16px / 13 */\n `;\n }}\n\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n &:after {\n content: '';\n border-radius: 2px;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n }\n &:hover {\n background: ${({ theme, applyAriaDisabled, disabled, readOnly }) =>\n !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : undefined};\n\n &:after {\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n }\n }\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n }\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n &:active {\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n }\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: fit-content;\n color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n line-height: 1.2307rem;\n @media (max-width: ${th.breakpoint('small')}) {\n line-height: 1rem; /* 13px / 16 */\n }\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 1rem; /* 16px / 16 */\n }\n font-size: 1.2307rem; /* 16px / 13 */\n `;\n }\n if (device === undefined) {\n return `\n font-size: 1rem; \n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 0.8125rem; /* 13px / 16 */\n }\n\n font-size: 1rem; /* 13px / 13 */\n `;\n }}\n display: inherit;\n ${({ disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop'; wrapLabel?: boolean; hasLabel: boolean }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto; /* 24px / 16px */\n }\n grid-template-columns: 1.846rem auto;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto;\n }\n grid-template-columns: 1.23rem auto;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1rem auto; /* 16px / 16px */\n }\n grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n `;\n }}\n column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px}')};\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledHiddenP = styled.p`\n display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -183,12 +183,15 @@ transform: rotate(-45deg);
|
|
|
183
183
|
}
|
|
184
184
|
return "";
|
|
185
185
|
};
|
|
186
|
-
const handleBackgroundColor = ({ colors }, disabled, applyAriaDisabled) => {
|
|
186
|
+
const handleBackgroundColor = ({ colors }, disabled, applyAriaDisabled, readOnly) => {
|
|
187
187
|
if (disabled) {
|
|
188
188
|
return colors.neutral["080"];
|
|
189
189
|
}
|
|
190
190
|
if (applyAriaDisabled) {
|
|
191
|
-
return colors.neutral["
|
|
191
|
+
return colors.neutral["050"];
|
|
192
|
+
}
|
|
193
|
+
if (readOnly) {
|
|
194
|
+
return colors.neutral["050"];
|
|
192
195
|
}
|
|
193
196
|
return colors.neutral["000"];
|
|
194
197
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n applyAriaDisabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (readOnly) {\n return colors.neutral[500];\n }\n if (disabled) {\n return colors.neutral[500];\n }\n if (applyAriaDisabled) {\n return colors.neutral[500];\n }\n if (isHovering) {\n return colors.brand[600];\n }\n return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n applyAriaDisabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device: string | undefined = undefined,\n): string => {\n const commonStyles = `\n position: absolute;\n content: '';\n border-left: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\n border-bottom: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\n `;\n const desktopMixedCheckmark = `\n position: absolute;\n content: '';\n top: 0.538rem; /* 7px / baseFontSize */\n left: 0.308rem; /* 4px / baseFontSize */\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, applyAriaDisabled, readOnly, hasError)};\n width: 0.615rem; /* theme.space.xxs / baseFontSize */\n height: 0.154rem; /* 2px / baseFontSize */\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.4375rem; /* 7px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.125rem; /* 8px / 16 */\n width: 0.5rem;/* 2px / 16 */\n }\n`;\n\n const normalMixedCheckmark = `\n ${desktopMixedCheckmark}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.6875rem; /* 11px / 16 */\n left: 0.375rem; /* 6px / 16 */\n height: 0.125rem; /* 2px / 16 */\n width: 0.75rem; /* 12px / 16 */\n }\n`;\n const mobileMixedCheckmark = `\n ${commonStyles}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.6875rem; /* 11px / 16 */\n left: 0.375rem; /* 6px / 16 */\n height: 0.125rem; /* 2px / 16 */\n width: 0.75rem; /* 12px / 16 */\n }\n top: 0.8461rem; /* 11px / 13 */\n left: 0.4615rem; /* 6px / 13 */\n height: 0.1538rem; /* 2px / 13 */\n width: 0.9231rem; /* 12px / 13 */\n\n`;\n const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 0.308rem; /* 4px / baseFontSize */\nleft: 0.231rem; /* 3px / baseFontSize */\nborder-left: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\nborder-bottom: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\nheight: 0.385rem; /* 5px / baseFontSize */\nwidth: 0.769rem; /* 10px / baseFontSize */\ntransform: rotate(-45deg);\n\n@media (max-width: ${theme.breakpoints.small}) {\n top: 0.25rem; /* 4px / 16 */\n left: 0.1875rem; /* 3px / 16 */\n height: 0.3125rem; /* 5px / 16 */\n width: 0.625rem; /* 10px / 16 */\n}\n`;\n\n const normalCheckmark = `\n\n ${desktopCheckmark}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.375rem; /* 6px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.5rem; /* 8px / 16 */\n width: 1.0625rem; /* 17px / 16 */\n }\n`;\n const mobileCheckmark = `\n ${commonStyles}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.375rem; /* 6px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.5rem; /* 8px / 16 */\n width: 1.0625rem; /* 17px / 16 */\n }\n top: 0.4615rem; /* 6px / 13 */\n left: 0.3077rem; /* 4px / 13 */\n height: 0.6154rem; /* 8px / 13 */\n width: 1.3077rem; /* 17px / 13 */\n transform: rotate(-45deg);\n`;\n\n if (checked === 'mixed') {\n return `&:before {\n ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n }\n if (checked) {\n return `&:before {\n ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,mBACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,mBAAmB;AACrB,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM,GAAG;AAAA,EACzB;AACA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,mBACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,eAAe;AAAA;AAAA;AAAA,kCAGW;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA,oCAC+B;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA;AAEH,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,mBAAmB,UAAU,QAAQ,CAAC;AAAA;AAAA;AAAA,uBAG1F,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5C,QAAM,uBAAuB;AAAA,IAC3B,qBAAqB;AAAA,uBACF,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,QAAM,uBAAuB;AAAA,IAC3B,YAAY;AAAA,uBACO,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY5C,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKG;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA,gCAC6B;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKkB,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1C,QAAM,kBAAkB;AAAA;AAAA,IAEtB,gBAAgB;AAAA,uBACG,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,QAAM,kBAAkB;AAAA,MACpB,YAAY;AAAA,yBACO,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa9C,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,IACP,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB,qBAAqB;AAAA;AAAA,EAElH;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB,gBAAgB;AAAA;AAAA,EAErG;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n applyAriaDisabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (readOnly) {\n return colors.neutral[500];\n }\n if (disabled) {\n return colors.neutral[500];\n }\n if (applyAriaDisabled) {\n return colors.neutral[500];\n }\n if (isHovering) {\n return colors.brand[600];\n }\n return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n applyAriaDisabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device: string | undefined = undefined,\n): string => {\n const commonStyles = `\n position: absolute;\n content: '';\n border-left: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\n border-bottom: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\n `;\n const desktopMixedCheckmark = `\n position: absolute;\n content: '';\n top: 0.538rem; /* 7px / baseFontSize */\n left: 0.308rem; /* 4px / baseFontSize */\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, applyAriaDisabled, readOnly, hasError)};\n width: 0.615rem; /* theme.space.xxs / baseFontSize */\n height: 0.154rem; /* 2px / baseFontSize */\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.4375rem; /* 7px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.125rem; /* 8px / 16 */\n width: 0.5rem;/* 2px / 16 */\n }\n`;\n\n const normalMixedCheckmark = `\n ${desktopMixedCheckmark}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.6875rem; /* 11px / 16 */\n left: 0.375rem; /* 6px / 16 */\n height: 0.125rem; /* 2px / 16 */\n width: 0.75rem; /* 12px / 16 */\n }\n`;\n const mobileMixedCheckmark = `\n ${commonStyles}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.6875rem; /* 11px / 16 */\n left: 0.375rem; /* 6px / 16 */\n height: 0.125rem; /* 2px / 16 */\n width: 0.75rem; /* 12px / 16 */\n }\n top: 0.8461rem; /* 11px / 13 */\n left: 0.4615rem; /* 6px / 13 */\n height: 0.1538rem; /* 2px / 13 */\n width: 0.9231rem; /* 12px / 13 */\n\n`;\n const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 0.308rem; /* 4px / baseFontSize */\nleft: 0.231rem; /* 3px / baseFontSize */\nborder-left: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\nborder-bottom: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\nheight: 0.385rem; /* 5px / baseFontSize */\nwidth: 0.769rem; /* 10px / baseFontSize */\ntransform: rotate(-45deg);\n\n@media (max-width: ${theme.breakpoints.small}) {\n top: 0.25rem; /* 4px / 16 */\n left: 0.1875rem; /* 3px / 16 */\n height: 0.3125rem; /* 5px / 16 */\n width: 0.625rem; /* 10px / 16 */\n}\n`;\n\n const normalCheckmark = `\n\n ${desktopCheckmark}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.375rem; /* 6px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.5rem; /* 8px / 16 */\n width: 1.0625rem; /* 17px / 16 */\n }\n`;\n const mobileCheckmark = `\n ${commonStyles}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.375rem; /* 6px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.5rem; /* 8px / 16 */\n width: 1.0625rem; /* 17px / 16 */\n }\n top: 0.4615rem; /* 6px / 13 */\n left: 0.3077rem; /* 4px / 13 */\n height: 0.6154rem; /* 8px / 13 */\n width: 1.3077rem; /* 17px / 13 */\n transform: rotate(-45deg);\n`;\n\n if (checked === 'mixed') {\n return `&:before {\n ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n }\n if (checked) {\n return `&:before {\n ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = (\n { colors }: Theme,\n disabled?: boolean,\n applyAriaDisabled?: boolean,\n readOnly?: boolean,\n): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n if (applyAriaDisabled) {\n return colors.neutral['050'];\n }\n\n if (readOnly) {\n return colors.neutral['050'];\n }\n\n return colors.neutral['000'];\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -7,7 +7,7 @@ const StyledCheckBox = styled("span", {
|
|
|
7
7
|
slot: DSCheckboxSlots.INPUT_WRAPPER
|
|
8
8
|
})`
|
|
9
9
|
position: relative;
|
|
10
|
-
background: ${({ theme, disabled, applyAriaDisabled }) => handleBackgroundColor(theme, disabled, applyAriaDisabled)};
|
|
10
|
+
background: ${({ theme, disabled, applyAriaDisabled, readOnly }) => handleBackgroundColor(theme, disabled, applyAriaDisabled, readOnly)};
|
|
11
11
|
|
|
12
12
|
${({ device, theme }) => {
|
|
13
13
|
if (device === "mobile") {
|
|
@@ -52,7 +52,7 @@ const StyledCheckBox = styled("span", {
|
|
|
52
52
|
border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
|
|
53
53
|
}
|
|
54
54
|
&:hover {
|
|
55
|
-
background: ${({ theme, applyAriaDisabled, disabled }) => !disabled && !applyAriaDisabled ? theme.colors.brand[200] : void 0};
|
|
55
|
+
background: ${({ theme, applyAriaDisabled, disabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : void 0};
|
|
56
56
|
|
|
57
57
|
&:after {
|
|
58
58
|
border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.brand[600]};
|
|
@@ -115,7 +115,7 @@ const StyledLabel = styled("label", {
|
|
|
115
115
|
word-break: break-word;
|
|
116
116
|
`};
|
|
117
117
|
width: fit-content;
|
|
118
|
-
color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
118
|
+
color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
119
119
|
line-height: 1.2307rem;
|
|
120
120
|
@media (max-width: ${th.breakpoint("small")}) {
|
|
121
121
|
line-height: 1rem; /* 13px / 16 */
|
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", "/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled, applyAriaDisabled })
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,IAAI,KAAK,0BAA0B;AAEpD,SAAS,uBAAuB,uBAAuB;AACvD,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,gBAEe,CAAC,EAAE,OAAO,UAAU,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n handleBackgroundColor(theme, disabled, applyAriaDisabled, readOnly)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.846rem; /* 24px / 13 */\n height: 1.846rem; /* 24px / 13 */`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.2307rem;\n height: 1.2307rem;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1rem; /* 16px / 16 */\n height: 1rem; /* 16px / 16 */\n }\n width: 1.2307rem; /* 16px / 13 */\n height: 1.2307rem; /* 16px / 13 */\n `;\n }}\n\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n &:after {\n content: '';\n border-radius: 2px;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n }\n &:hover {\n background: ${({ theme, applyAriaDisabled, disabled, readOnly }) =>\n !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : undefined};\n\n &:after {\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n }\n }\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n }\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n &:active {\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n }\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: fit-content;\n color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n disabled || applyAriaDisabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n line-height: 1.2307rem;\n @media (max-width: ${th.breakpoint('small')}) {\n line-height: 1rem; /* 13px / 16 */\n }\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 1rem; /* 16px / 16 */\n }\n font-size: 1.2307rem; /* 16px / 13 */\n `;\n }\n if (device === undefined) {\n return `\n font-size: 1rem; \n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 0.8125rem; /* 13px / 16 */\n }\n\n font-size: 1rem; /* 13px / 13 */\n `;\n }}\n display: inherit;\n ${({ disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop'; wrapLabel?: boolean; hasLabel: boolean }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto; /* 24px / 16px */\n }\n grid-template-columns: 1.846rem auto;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto;\n }\n grid-template-columns: 1.23rem auto;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1rem auto; /* 16px / 16px */\n }\n grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n `;\n }}\n column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px}')};\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledHiddenP = styled.p`\n display: none;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -148,12 +148,15 @@ transform: rotate(-45deg);
|
|
|
148
148
|
}
|
|
149
149
|
return "";
|
|
150
150
|
};
|
|
151
|
-
const handleBackgroundColor = ({ colors }, disabled, applyAriaDisabled) => {
|
|
151
|
+
const handleBackgroundColor = ({ colors }, disabled, applyAriaDisabled, readOnly) => {
|
|
152
152
|
if (disabled) {
|
|
153
153
|
return colors.neutral["080"];
|
|
154
154
|
}
|
|
155
155
|
if (applyAriaDisabled) {
|
|
156
|
-
return colors.neutral["
|
|
156
|
+
return colors.neutral["050"];
|
|
157
|
+
}
|
|
158
|
+
if (readOnly) {
|
|
159
|
+
return colors.neutral["050"];
|
|
157
160
|
}
|
|
158
161
|
return colors.neutral["000"];
|
|
159
162
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n applyAriaDisabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (readOnly) {\n return colors.neutral[500];\n }\n if (disabled) {\n return colors.neutral[500];\n }\n if (applyAriaDisabled) {\n return colors.neutral[500];\n }\n if (isHovering) {\n return colors.brand[600];\n }\n return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n applyAriaDisabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device: string | undefined = undefined,\n): string => {\n const commonStyles = `\n position: absolute;\n content: '';\n border-left: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\n border-bottom: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\n `;\n const desktopMixedCheckmark = `\n position: absolute;\n content: '';\n top: 0.538rem; /* 7px / baseFontSize */\n left: 0.308rem; /* 4px / baseFontSize */\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, applyAriaDisabled, readOnly, hasError)};\n width: 0.615rem; /* theme.space.xxs / baseFontSize */\n height: 0.154rem; /* 2px / baseFontSize */\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.4375rem; /* 7px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.125rem; /* 8px / 16 */\n width: 0.5rem;/* 2px / 16 */\n }\n`;\n\n const normalMixedCheckmark = `\n ${desktopMixedCheckmark}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.6875rem; /* 11px / 16 */\n left: 0.375rem; /* 6px / 16 */\n height: 0.125rem; /* 2px / 16 */\n width: 0.75rem; /* 12px / 16 */\n }\n`;\n const mobileMixedCheckmark = `\n ${commonStyles}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.6875rem; /* 11px / 16 */\n left: 0.375rem; /* 6px / 16 */\n height: 0.125rem; /* 2px / 16 */\n width: 0.75rem; /* 12px / 16 */\n }\n top: 0.8461rem; /* 11px / 13 */\n left: 0.4615rem; /* 6px / 13 */\n height: 0.1538rem; /* 2px / 13 */\n width: 0.9231rem; /* 12px / 13 */\n\n`;\n const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 0.308rem; /* 4px / baseFontSize */\nleft: 0.231rem; /* 3px / baseFontSize */\nborder-left: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\nborder-bottom: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\nheight: 0.385rem; /* 5px / baseFontSize */\nwidth: 0.769rem; /* 10px / baseFontSize */\ntransform: rotate(-45deg);\n\n@media (max-width: ${theme.breakpoints.small}) {\n top: 0.25rem; /* 4px / 16 */\n left: 0.1875rem; /* 3px / 16 */\n height: 0.3125rem; /* 5px / 16 */\n width: 0.625rem; /* 10px / 16 */\n}\n`;\n\n const normalCheckmark = `\n\n ${desktopCheckmark}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.375rem; /* 6px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.5rem; /* 8px / 16 */\n width: 1.0625rem; /* 17px / 16 */\n }\n`;\n const mobileCheckmark = `\n ${commonStyles}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.375rem; /* 6px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.5rem; /* 8px / 16 */\n width: 1.0625rem; /* 17px / 16 */\n }\n top: 0.4615rem; /* 6px / 13 */\n left: 0.3077rem; /* 4px / 13 */\n height: 0.6154rem; /* 8px / 13 */\n width: 1.3077rem; /* 17px / 13 */\n transform: rotate(-45deg);\n`;\n\n if (checked === 'mixed') {\n return `&:before {\n ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n }\n if (checked) {\n return `&:before {\n ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,uBAAuB,CAClC,EAAE,OAAO,GACT,SACA,YACA,UACA,mBACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO,GAAG;AAAA,EAC1B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,mBAAmB;AACrB,WAAO,OAAO,QAAQ,GAAG;AAAA,EAC3B;AACA,MAAI,YAAY;AACd,WAAO,OAAO,MAAM,GAAG;AAAA,EACzB;AACA,SAAO,OAAO,MAAM,GAAG;AACzB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,mBACA,UACA,UACA,aAAa,OACb,SAA6B,WAClB;AACX,QAAM,eAAe;AAAA;AAAA;AAAA,kCAGW;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA,oCAC+B;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA;AAEH,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,mBAAmB,UAAU,QAAQ,CAAC;AAAA;AAAA;AAAA,uBAG1F,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5C,QAAM,uBAAuB;AAAA,IAC3B,qBAAqB;AAAA,uBACF,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,QAAM,uBAAuB;AAAA,IAC3B,YAAY;AAAA,uBACO,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY5C,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKG;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA,gCAC6B;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKkB,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1C,QAAM,kBAAkB;AAAA;AAAA,IAEtB,gBAAgB;AAAA,uBACG,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,QAAM,kBAAkB;AAAA,MACpB,YAAY;AAAA,yBACO,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa9C,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,IACP,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB,qBAAqB;AAAA;AAAA,EAElH;AACA,MAAI,SAAS;AACX,WAAO;AAAA,MACL,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB,gBAAgB;AAAA;AAAA,EAErG;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n applyAriaDisabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (readOnly) {\n return colors.neutral[500];\n }\n if (disabled) {\n return colors.neutral[500];\n }\n if (applyAriaDisabled) {\n return colors.neutral[500];\n }\n if (isHovering) {\n return colors.brand[600];\n }\n return colors.brand[600];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n applyAriaDisabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device: string | undefined = undefined,\n): string => {\n const commonStyles = `\n position: absolute;\n content: '';\n border-left: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\n border-bottom: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\n `;\n const desktopMixedCheckmark = `\n position: absolute;\n content: '';\n top: 0.538rem; /* 7px / baseFontSize */\n left: 0.308rem; /* 4px / baseFontSize */\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, applyAriaDisabled, readOnly, hasError)};\n width: 0.615rem; /* theme.space.xxs / baseFontSize */\n height: 0.154rem; /* 2px / baseFontSize */\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.4375rem; /* 7px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.125rem; /* 8px / 16 */\n width: 0.5rem;/* 2px / 16 */\n }\n`;\n\n const normalMixedCheckmark = `\n ${desktopMixedCheckmark}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.6875rem; /* 11px / 16 */\n left: 0.375rem; /* 6px / 16 */\n height: 0.125rem; /* 2px / 16 */\n width: 0.75rem; /* 12px / 16 */\n }\n`;\n const mobileMixedCheckmark = `\n ${commonStyles}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.6875rem; /* 11px / 16 */\n left: 0.375rem; /* 6px / 16 */\n height: 0.125rem; /* 2px / 16 */\n width: 0.75rem; /* 12px / 16 */\n }\n top: 0.8461rem; /* 11px / 13 */\n left: 0.4615rem; /* 6px / 13 */\n height: 0.1538rem; /* 2px / 13 */\n width: 0.9231rem; /* 12px / 13 */\n\n`;\n const desktopCheckmark = `\nposition: absolute;\ncontent: '';\ntop: 0.308rem; /* 4px / baseFontSize */\nleft: 0.231rem; /* 3px / baseFontSize */\nborder-left: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\nborder-bottom: 0.154rem solid ${handleCheckMarkColor(\n theme,\n checked,\n isHovering,\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n )};\nheight: 0.385rem; /* 5px / baseFontSize */\nwidth: 0.769rem; /* 10px / baseFontSize */\ntransform: rotate(-45deg);\n\n@media (max-width: ${theme.breakpoints.small}) {\n top: 0.25rem; /* 4px / 16 */\n left: 0.1875rem; /* 3px / 16 */\n height: 0.3125rem; /* 5px / 16 */\n width: 0.625rem; /* 10px / 16 */\n}\n`;\n\n const normalCheckmark = `\n\n ${desktopCheckmark}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.375rem; /* 6px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.5rem; /* 8px / 16 */\n width: 1.0625rem; /* 17px / 16 */\n }\n`;\n const mobileCheckmark = `\n ${commonStyles}\n @media (max-width: ${theme.breakpoints.small}) {\n top: 0.375rem; /* 6px / 16 */\n left: 0.25rem; /* 4px / 16 */\n height: 0.5rem; /* 8px / 16 */\n width: 1.0625rem; /* 17px / 16 */\n }\n top: 0.4615rem; /* 6px / 13 */\n left: 0.3077rem; /* 4px / 13 */\n height: 0.6154rem; /* 8px / 13 */\n width: 1.3077rem; /* 17px / 13 */\n transform: rotate(-45deg);\n`;\n\n if (checked === 'mixed') {\n return `&:before {\n ${device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark}\n}`;\n }\n if (checked) {\n return `&:before {\n ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n}`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = (\n { colors }: Theme,\n disabled?: boolean,\n applyAriaDisabled?: boolean,\n readOnly?: boolean,\n): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n if (applyAriaDisabled) {\n return colors.neutral['050'];\n }\n\n if (readOnly) {\n return colors.neutral['050'];\n }\n\n return colors.neutral['000'];\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { Theme } from '@elliemae/pui-theme';
|
|
2
2
|
export declare const handleCheckMarkColor: ({ colors }: Theme, checked: boolean | 'mixed', isHovering: boolean, disabled?: boolean, applyAriaDisabled?: boolean, readOnly?: boolean, hasError?: boolean) => string;
|
|
3
3
|
export declare const handleCheckmark: (theme: Theme, checked: boolean | 'mixed', disabled?: boolean, applyAriaDisabled?: boolean, readOnly?: boolean, hasError?: boolean, isHovering?: boolean, device?: string | undefined) => string;
|
|
4
|
-
export declare const handleBackgroundColor: ({ colors }: Theme, disabled?: boolean, applyAriaDisabled?: boolean) => string;
|
|
4
|
+
export declare const handleBackgroundColor: ({ colors }: Theme, disabled?: boolean, applyAriaDisabled?: boolean, readOnly?: boolean) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-checkbox",
|
|
3
|
-
"version": "3.49.0
|
|
3
|
+
"version": "3.49.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Checkbox",
|
|
6
6
|
"files": [
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
|
-
"pnpm": ">=
|
|
29
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
30
30
|
},
|
|
31
31
|
"author": "ICE MT",
|
|
32
32
|
"jestSonar": {
|
|
@@ -37,16 +37,18 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "~2.0.1",
|
|
40
|
-
"@elliemae/ds-props-helpers": "3.49.0
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-truncated-tooltip-text": "3.49.0
|
|
43
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.49.0",
|
|
41
|
+
"@elliemae/ds-typescript-helpers": "3.49.0",
|
|
42
|
+
"@elliemae/ds-truncated-tooltip-text": "3.49.0",
|
|
43
|
+
"@elliemae/ds-system": "3.49.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
47
47
|
"@elliemae/pui-theme": "~2.10.0",
|
|
48
|
+
"jest": "~29.7.0",
|
|
49
|
+
"jest-cli": "~29.7.0",
|
|
48
50
|
"styled-components": "~5.3.9",
|
|
49
|
-
"@elliemae/ds-monorepo-devops": "3.49.0
|
|
51
|
+
"@elliemae/ds-monorepo-devops": "3.49.0"
|
|
50
52
|
},
|
|
51
53
|
"peerDependencies": {
|
|
52
54
|
"@elliemae/pui-theme": "~2.10.0",
|