@laerdal/life-react-components 3.1.0 → 3.1.1
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.
|
@@ -52,11 +52,14 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
52
52
|
select && select(!selected);
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
|
-
var handleClick = function handleClick() {
|
|
55
|
+
var handleClick = function handleClick(e) {
|
|
56
56
|
if (disabled || readOnly) {
|
|
57
57
|
return;
|
|
58
58
|
}
|
|
59
|
-
|
|
59
|
+
if (select) {
|
|
60
|
+
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
61
|
+
select(!selected);
|
|
62
|
+
}
|
|
60
63
|
};
|
|
61
64
|
size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
|
|
62
65
|
var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {SystemIcons} from '../icons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n\n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .checkbox-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n }\n }\n\n .checkbox-label {\n user-select: none;\n cursor: inherit;\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):not(.readonly):focus {\n ${focusStyles}\n }\n\n &:not(.disabled):not(.readonly):hover {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):not(.readonly):active {\n .checkbox-icon {\n background: ${COLORS.primary_100};\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.readonly {\n cursor: inherit;\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n\n .checkbox-icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n\n &.dropdown-hover:not(.disabled) {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n id,\n selected,\n select,\n label,\n invalid,\n iconPointerEventsTransparent,\n disabled,\n margin,\n size,\n semiSelected,\n children,\n readOnly,\n tabIndexVal,\n dataTestId,\n className,\n ...rest\n }, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled && !readOnly) {\n select && select(!selected);\n }\n };\n\n const handleClick = () => {\n if (disabled || readOnly) {\n return;\n }\n select
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","stopPropagation","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {SystemIcons} from '../icons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n\n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .checkbox-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n }\n }\n\n .checkbox-label {\n user-select: none;\n cursor: inherit;\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):not(.readonly):focus {\n ${focusStyles}\n }\n\n &:not(.disabled):not(.readonly):hover {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):not(.readonly):active {\n .checkbox-icon {\n background: ${COLORS.primary_100};\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.readonly {\n cursor: inherit;\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n\n .checkbox-icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n\n &.dropdown-hover:not(.disabled) {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n id,\n selected,\n select,\n label,\n invalid,\n iconPointerEventsTransparent,\n disabled,\n margin,\n size,\n semiSelected,\n children,\n readOnly,\n tabIndexVal,\n dataTestId,\n className,\n ...rest\n }, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled && !readOnly) {\n select && select(!selected);\n }\n };\n\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled || readOnly) {\n return;\n }\n if(select){\n e?.stopPropagation();\n select(!selected);\n }\n };\n\n size = size ?? Size.Medium;\n\n const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n return (\n <StyledCheckBox key={id}\n ref={ref}\n disabled={disabled}\n className={cls}\n aria-checked={selected}\n selected={selected}\n tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n invalid={invalid}\n margin={margin}\n onClick={handleClick}\n onKeyDown={onKeyPress}\n onMouseDown={defaultOnMouseDownHandler}\n {...rest}>\n <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\n {\n selected\n ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n : semiSelected\n ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n }\n </div>\n {\n label &&\n (\n <label className={'checkbox-label'}\n htmlFor={id}>\n {label}\n </label>\n )\n }\n {\n !label &&\n <label className={'checkbox-label'}\n htmlFor={id}>\n {children}\n </label>\n }\n </StyledCheckBox>\n );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAG7C,IAAMA,cAAc,GAAGC,yBAAM,CAACC,GAAG,yuDAMpC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,qBAAcD,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,EAGlDC,cAAM,CAACC,KAAK,EAiBR,UAAAH,KAAK;EAAA,OAAKA,KAAK,CAACI,QAAQ,GAAGF,cAAM,CAACG,WAAW,GAAGL,KAAK,CAACM,OAAO,GAAGJ,cAAM,CAACK,YAAY,GAAGL,cAAM,CAACM,WAAW;AAAA,CAAC,EAUlH,IAAAC,6BAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAET,cAAM,CAACC,KAAK,CAAC,EAO3D,IAAAS,6BAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAET,cAAM,CAACC,KAAK,CAAC,EAO3D,IAAAU,6BAAiB,EAACH,0BAAkB,CAACC,OAAO,EAAET,cAAM,CAACC,KAAK,CAAC,EAO3DW,mBAAW,EAKSZ,cAAM,CAACa,UAAU,EAG1Bb,cAAM,CAACc,WAAW,EAOfd,cAAM,CAACe,WAAW,EAGrBf,cAAM,CAACgB,WAAW,EAiBtBhB,cAAM,CAACiB,WAAW,EAQLjB,cAAM,CAACkB,KAAK,EAIvBlB,cAAM,CAACiB,WAAW,EAMPjB,cAAM,CAACa,UAAU,EAG1Bb,cAAM,CAACc,WAAW,CAIlC;AAAC;AAEF,IAAMK,QAAQ,gBAAGC,KAAK,CAACC,UAAU,CAAgC,gBAiBJC,GAAG,EAAK;EAAA;EAAA,IAhBTC,EAAE,QAAFA,EAAE;IACFrB,QAAQ,QAARA,QAAQ;IACRsB,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLrB,OAAO,QAAPA,OAAO;IACPsB,4BAA4B,QAA5BA,4BAA4B;IAC5BC,QAAQ,QAARA,QAAQ;IACR5B,MAAM,QAANA,MAAM;IACN6B,IAAI,QAAJA,IAAI;IACJC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,IAAI;EAEjE,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,CAAM,EAAK;IAC7B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,IAAI,CAACX,QAAQ,IAAI,CAACI,QAAQ,EAAE;MAC9CP,MAAM,IAAIA,MAAM,CAAC,CAACtB,QAAQ,CAAC;IAC7B;EACF,CAAC;EAED,IAAMqC,WAAW,GAAG,SAAdA,WAAW,CAAIF,CAAmC,EAAK;IAC3D,IAAIV,QAAQ,IAAII,QAAQ,EAAE;MACxB;IACF;IACA,IAAGP,MAAM,EAAC;MACRa,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEG,eAAe,EAAE;MACpBhB,MAAM,CAAC,CAACtB,QAAQ,CAAC;IACnB;EACF,CAAC;EAED0B,IAAI,YAAGA,IAAI,yCAAIa,WAAI,CAACC,MAAM;EAE1B,IAAMC,GAAG,aAAMf,IAAI,cAAIM,SAAS,IAAI,EAAE,cAAIP,QAAQ,GAAG,WAAW,GAAG,EAAE,cAAII,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE;EAEtG,oBACE,sBAAC,cAAc;IACC,GAAG,EAAET,GAAI;IACT,QAAQ,EAAEK,QAAS;IACnB,SAAS,EAAEgB,GAAI;IACf,gBAAczC,QAAS;IACvB,QAAQ,EAAEA,QAAS;IACnB,QAAQ,EAAEyB,QAAQ,IAAII,QAAQ,GAAG,CAAC,CAAC,GAAIC,WAAW,GAAGA,WAAW,GAAG,CAAG;IACtE,OAAO,EAAE5B,OAAQ;IACjB,MAAM,EAAEL,MAAO;IACf,OAAO,EAAEwC,WAAY;IACrB,SAAS,EAAEH,UAAW;IACtB,WAAW,EAAEQ;EAA0B,GACnCT,IAAI;IAAA,wBACtB;MAAK,EAAE,EAAEZ,EAAG;MAAC,eAAaU,UAAW;MAAC,SAAS,EAAE,eAAgB;MAAA,UAE7D/B,QAAQ,gBACJ,qBAAC,kBAAW,CAAC,UAAU;QAAC,SAAS,EAAEwB,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAAC,IAAI,EAAC;MAAM,EAAE,GAC1GG,YAAY,gBACV,qBAAC,kBAAW,CAAC,YAAY;QAAC,SAAS,EAAEH,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAAC,IAAI,EAAC;MAAM,EAAE,gBAC5G,qBAAC,kBAAW,CAAC,WAAW;QAAC,SAAS,EAAEA,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAAC,IAAI,EAAC;MAAM;IAAE,EAE/G,EAEJD,KAAK,iBAEH;MAAO,SAAS,EAAE,gBAAiB;MAC5B,OAAO,EAAEF,EAAG;MAAA,UAChBE;IAAK,EAET,EAGD,CAACA,KAAK,iBACN;MAAO,SAAS,EAAE,gBAAiB;MAC5B,OAAO,EAAEF,EAAG;MAAA,UAChBO;IAAQ,EACH;EAAA,IApCSP,EAAE,CAsCN;AAErB,CAAC,CAAC;AAAC,eAEYJ,QAAQ;AAAA"}
|
|
@@ -42,11 +42,14 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
42
42
|
select && select(!selected);
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
|
-
var handleClick = function handleClick() {
|
|
45
|
+
var handleClick = function handleClick(e) {
|
|
46
46
|
if (disabled || readOnly) {
|
|
47
47
|
return;
|
|
48
48
|
}
|
|
49
|
-
|
|
49
|
+
if (select) {
|
|
50
|
+
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
51
|
+
select(!selected);
|
|
52
|
+
}
|
|
50
53
|
};
|
|
51
54
|
size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
|
|
52
55
|
var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {SystemIcons} from '../icons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n\n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .checkbox-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n }\n }\n\n .checkbox-label {\n user-select: none;\n cursor: inherit;\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):not(.readonly):focus {\n ${focusStyles}\n }\n\n &:not(.disabled):not(.readonly):hover {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):not(.readonly):active {\n .checkbox-icon {\n background: ${COLORS.primary_100};\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.readonly {\n cursor: inherit;\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n\n .checkbox-icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n\n &.dropdown-hover:not(.disabled) {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n id,\n selected,\n select,\n label,\n invalid,\n iconPointerEventsTransparent,\n disabled,\n margin,\n size,\n semiSelected,\n children,\n readOnly,\n tabIndexVal,\n dataTestId,\n className,\n ...rest\n }, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled && !readOnly) {\n select && select(!selected);\n }\n };\n\n const handleClick = () => {\n if (disabled || readOnly) {\n return;\n }\n select
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","stopPropagation","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {SystemIcons} from '../icons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n\n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .checkbox-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n }\n }\n\n .checkbox-label {\n user-select: none;\n cursor: inherit;\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):not(.readonly):focus {\n ${focusStyles}\n }\n\n &:not(.disabled):not(.readonly):hover {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):not(.readonly):active {\n .checkbox-icon {\n background: ${COLORS.primary_100};\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.readonly {\n cursor: inherit;\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n\n .checkbox-icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n\n &.dropdown-hover:not(.disabled) {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n id,\n selected,\n select,\n label,\n invalid,\n iconPointerEventsTransparent,\n disabled,\n margin,\n size,\n semiSelected,\n children,\n readOnly,\n tabIndexVal,\n dataTestId,\n className,\n ...rest\n }, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled && !readOnly) {\n select && select(!selected);\n }\n };\n\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled || readOnly) {\n return;\n }\n if(select){\n e?.stopPropagation();\n select(!selected);\n }\n };\n\n size = size ?? Size.Medium;\n\n const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n return (\n <StyledCheckBox key={id}\n ref={ref}\n disabled={disabled}\n className={cls}\n aria-checked={selected}\n selected={selected}\n tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n invalid={invalid}\n margin={margin}\n onClick={handleClick}\n onKeyDown={onKeyPress}\n onMouseDown={defaultOnMouseDownHandler}\n {...rest}>\n <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\n {\n selected\n ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n : semiSelected\n ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n }\n </div>\n {\n label &&\n (\n <label className={'checkbox-label'}\n htmlFor={id}>\n {label}\n </label>\n )\n }\n {\n !label &&\n <label className={'checkbox-label'}\n htmlFor={id}>\n {children}\n </label>\n }\n </StyledCheckBox>\n );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
|