@laerdal/life-react-components 1.7.0-dev.19.full → 1.7.0-dev.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Toggles/ToggleSwitch.cjs +4 -0
- package/dist/Toggles/ToggleSwitch.cjs.map +1 -1
- package/dist/Toggles/ToggleSwitch.js +3 -0
- package/dist/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/Toggles/TogglerStyles.cjs +1 -1
- package/dist/Toggles/TogglerStyles.cjs.map +1 -1
- package/dist/Toggles/TogglerStyles.js +1 -1
- package/dist/Toggles/TogglerStyles.js.map +1 -1
- package/package.json +1 -1
|
@@ -13,6 +13,8 @@ var _TogglerStyles = require("./TogglerStyles");
|
|
|
13
13
|
|
|
14
14
|
var _ = require("..");
|
|
15
15
|
|
|
16
|
+
var _common = require("../common");
|
|
17
|
+
|
|
16
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
19
|
|
|
18
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -47,8 +49,10 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
|
|
|
47
49
|
onToggle(!selected);
|
|
48
50
|
};
|
|
49
51
|
|
|
52
|
+
var focusVisibleRef = (0, _common.useFocusVisibleRef)();
|
|
50
53
|
size = (_size = size) !== null && _size !== void 0 ? _size : _.Size.Medium;
|
|
51
54
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TogglerStyles.StyledSwitch, {
|
|
55
|
+
ref: focusVisibleRef,
|
|
52
56
|
onClick: function onClick(e) {
|
|
53
57
|
return toggle();
|
|
54
58
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["ToggleSwitch","id","disabled","selected","label","isSemantic","size","onToggle","toggle","Size","Medium","e","key","toString","toLowerCase","concat"],"mappings":";;;;;;;;;AAGA;;AAUA;;AACA;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["ToggleSwitch","id","disabled","selected","label","isSemantic","size","onToggle","toggle","focusVisibleRef","Size","Medium","e","key","toString","toLowerCase","concat"],"mappings":";;;;;;;;;AAGA;;AAUA;;AACA;;AACA;;;;;;;;AAfA;AACA;AACA;;AAQA;AACA;AACA;AAKA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFC,EAAmF,QAAnFA,EAAmF;AAAA,MAA/EC,QAA+E,QAA/EA,QAA+E;AAAA,MAArEC,QAAqE,QAArEA,QAAqE;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,UAAoD,QAApDA,UAAoD;AAAA,MAAxCC,IAAwC,QAAxCA,IAAwC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;;AACzG;AACF;AACA;AACE,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB;AACA,QAAIN,QAAJ,EAAc,OAFK,CAInB;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GAND;;AAOA,MAAMM,eAAe,GAAG,iCAAxB;AAEAH,EAAAA,IAAI,YAAGA,IAAH,yCAAWI,OAAKC,MAApB;AAEA,sBACE,sBAAC,2BAAD;AACE,IAAA,GAAG,EAAEF,eADP;AAEE,IAAA,OAAO,EAAE,iBAAAG,CAAC;AAAA,aAAIJ,MAAM,EAAV;AAAA,KAFZ;AAGE,IAAA,OAAO,EAAE,iBAAAI,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBL,MAAM,EAA/B;AAAA,KAHZ;AAIE,IAAA,SAAS,EAAEF,IAAI,CACZQ,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDd,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAJb;AAQE,IAAA,QAAQ,EAAEC,QARZ;AASE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAT5B;AAAA,4BAUE,qBAAC,oCAAD;AAAA,6BACE,qBAAC,2BAAD;AAAQ,QAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MAVF,EAaGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAdJ;AAAA,IADF;AAqBD,CApCD;;eAsCeJ,Y","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\nimport { useFocusVisibleRef } from '../common';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n /**\n * Does all required pre-requisites and toggles the switcher state.\n */\n const toggle = () => {\n // If disabled, don't do anything\n if (disabled) return;\n\n // Toggle state change\n onToggle(!selected);\n };\n const focusVisibleRef = useFocusVisibleRef();\n\n size = size ?? Size.Medium;\n\n return (\n <StyledSwitch\n ref={focusVisibleRef}\n onClick={e => toggle()}\n onKeyUp={e => e.key === 'Enter' && toggle()}\n className={size\n .toString()\n .toLowerCase()\n .concat(disabled ? ' disabled' : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}>\n <ToggleSwitchContainer>\n <Switch className={isSemantic ? 'semantic' : ''} />\n </ToggleSwitchContainer>\n {label && (\n <label className={'label'} htmlFor={id}>\n {label}\n </label>\n )}\n </StyledSwitch>\n );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.cjs"}
|
|
@@ -11,6 +11,7 @@ import * as React from 'react';
|
|
|
11
11
|
*/
|
|
12
12
|
import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
|
|
13
13
|
import { Size } from '..';
|
|
14
|
+
import { useFocusVisibleRef } from '../common';
|
|
14
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
17
|
|
|
@@ -35,8 +36,10 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
|
|
|
35
36
|
onToggle(!selected);
|
|
36
37
|
};
|
|
37
38
|
|
|
39
|
+
var focusVisibleRef = useFocusVisibleRef();
|
|
38
40
|
size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
|
|
39
41
|
return /*#__PURE__*/_jsxs(StyledSwitch, {
|
|
42
|
+
ref: focusVisibleRef,
|
|
40
43
|
onClick: function onClick(e) {
|
|
41
44
|
return toggle();
|
|
42
45
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","id","disabled","selected","label","isSemantic","size","onToggle","toggle","Medium","e","key","toString","toLowerCase","concat"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASC,qBAAT,EAAgCC,YAAY,IAAIC,MAAhD,EAAwDC,YAAxD,QAA4E,iBAA5E;AACA,SAASC,IAAT,QAAqB,IAArB;;;;AAEA,
|
|
1
|
+
{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","useFocusVisibleRef","id","disabled","selected","label","isSemantic","size","onToggle","toggle","focusVisibleRef","Medium","e","key","toString","toLowerCase","concat"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASC,qBAAT,EAAgCC,YAAY,IAAIC,MAAhD,EAAwDC,YAAxD,QAA4E,iBAA5E;AACA,SAASC,IAAT,QAAqB,IAArB;AACA,SAASC,kBAAT,QAAmC,WAAnC;;;;AAEA,IAAMJ,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFK,EAAmF,QAAnFA,EAAmF;AAAA,MAA/EC,QAA+E,QAA/EA,QAA+E;AAAA,MAArEC,QAAqE,QAArEA,QAAqE;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,UAAoD,QAApDA,UAAoD;AAAA,MAAxCC,IAAwC,QAAxCA,IAAwC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;;AACzG;AACF;AACA;AACE,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB;AACA,QAAIN,QAAJ,EAAc,OAFK,CAInB;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GAND;;AAOA,MAAMM,eAAe,GAAGT,kBAAkB,EAA1C;AAEAM,EAAAA,IAAI,YAAGA,IAAH,yCAAWP,IAAI,CAACW,MAApB;AAEA,sBACE,MAAC,YAAD;AACE,IAAA,GAAG,EAAED,eADP;AAEE,IAAA,OAAO,EAAE,iBAAAE,CAAC;AAAA,aAAIH,MAAM,EAAV;AAAA,KAFZ;AAGE,IAAA,OAAO,EAAE,iBAAAG,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBJ,MAAM,EAA/B;AAAA,KAHZ;AAIE,IAAA,SAAS,EAAEF,IAAI,CACZO,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDb,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAJb;AAQE,IAAA,QAAQ,EAAEC,QARZ;AASE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAT5B;AAAA,4BAUE,KAAC,qBAAD;AAAA,6BACE,KAAC,MAAD;AAAQ,QAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MAVF,EAaGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAdJ;AAAA,IADF;AAqBD,CApCD;;AAsCA,eAAeR,YAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\nimport { useFocusVisibleRef } from '../common';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n /**\n * Does all required pre-requisites and toggles the switcher state.\n */\n const toggle = () => {\n // If disabled, don't do anything\n if (disabled) return;\n\n // Toggle state change\n onToggle(!selected);\n };\n const focusVisibleRef = useFocusVisibleRef();\n\n size = size ?? Size.Medium;\n\n return (\n <StyledSwitch\n ref={focusVisibleRef}\n onClick={e => toggle()}\n onKeyUp={e => e.key === 'Enter' && toggle()}\n className={size\n .toString()\n .toLowerCase()\n .concat(disabled ? ' disabled' : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}>\n <ToggleSwitchContainer>\n <Switch className={isSemantic ? 'semantic' : ''} />\n </ToggleSwitchContainer>\n {label && (\n <label className={'label'} htmlFor={id}>\n {label}\n </label>\n )}\n </StyledSwitch>\n );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.js"}
|
|
@@ -23,7 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
23
23
|
|
|
24
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
25
|
|
|
26
|
-
var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ", "\n }\n\n &.medium {\n ", "\n }\n\n &.large {\n ", "\n }\n &.disabled {\n color: ", ";\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ", ";\n }\n }\n\n ", "\n &:not(.disabled)
|
|
26
|
+
var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ", "\n }\n\n &.medium {\n ", "\n }\n\n &.large {\n ", "\n }\n &.disabled {\n color: ", ";\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ", ";\n }\n }\n\n ", "\n &:not(.disabled).focus-visible {\n ", "\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.neutral_300, _styles.COLORS.primary_100, function (props) {
|
|
27
27
|
return props.selected ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n &.disabled label:first-of-type span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n label:first-of-type span {\n background-color: ", ";\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_200, _styles.COLORS.correct_500, _styles.COLORS.primary_20, _styles.COLORS.primary_500, _styles.COLORS.correct_500) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n &.disabled label:first-of-type span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.critical_500, _styles.COLORS.primary_20);
|
|
28
28
|
}, _styles.focusStyles);
|
|
29
29
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["StyledSwitch","styled","div","ComponentTextStyle","Regular","COLORS","black","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["StyledSwitch","styled","div","ComponentTextStyle","Regular","COLORS","black","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,otBASnB,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CATmB,EAanB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAbmB,EAiBnB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAjBmB,EAoBZD,eAAOE,WApBK,EAiCCF,eAAOG,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,OACIC,qBADJ,05BAG4BN,eAAOE,WAHnC,EAO8BF,eAAOO,WAPrC,EAa8BP,eAAOQ,WAbrC,EAiB8BR,eAAOS,UAjBrC,EAqB4BT,eAAOU,WArBnC,EAwB8BV,eAAOQ,WAxBrC,QAkCIF,qBAlCJ,2kBAoC4BN,eAAOE,WApCnC,EAwC8BF,eAAOW,WAxCrC,EA8C8BX,eAAOY,YA9CrC,EAkD8BZ,eAAOS,UAlDrC,CADA;AAAA,CArCqB,EA6FnBI,mBA7FmB,CAAlB;;;;AAqGA,IAAMC,qBAAqB,GAAGlB,0BAAOmB,KAAV,sNAA3B;;;;AASA,IAAMC,YAAY,GAAGpB,0BAAOqB,IAAV,8rBAWHjB,eAAOkB,WAXJ,EAeDlB,eAAOY,YAfN,EAyBDZ,eAAOmB,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n &.disabled {\n color: ${COLORS.neutral_300};\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ${COLORS.primary_100};\n }\n }\n\n ${(props) =>\n props.selected\n ? css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_200} !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n label:first-of-type span {\n background-color: ${COLORS.primary_500};\n\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n `\n : css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_100} !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n `}\n &:not(.disabled).focus-visible {\n ${focusStyles}\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 36px;\n height: 16px;\n background-color: ${COLORS.neutral_500};\n border-radius: 100px;\n\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n top: calc(50% - 6px);\n background-color: ${COLORS.white};\n -webkit-transition: background-color 0.1s, transform 0.1s;\n transition: 0.1s;\n transition-timing-function: ease-in-out;\n border-radius: 50%;\n }\n`;\n"],"file":"TogglerStyles.cjs"}
|
|
@@ -12,7 +12,7 @@ import { COLORS, focusStyles } from '../styles';
|
|
|
12
12
|
|
|
13
13
|
import styled, { css } from 'styled-components';
|
|
14
14
|
import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
|
|
15
|
-
export var StyledSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ", "\n }\n\n &.medium {\n ", "\n }\n\n &.large {\n ", "\n }\n &.disabled {\n color: ", ";\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ", ";\n }\n }\n\n ", "\n &:not(.disabled)
|
|
15
|
+
export var StyledSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ", "\n }\n\n &.medium {\n ", "\n }\n\n &.large {\n ", "\n }\n &.disabled {\n color: ", ";\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ", ";\n }\n }\n\n ", "\n &:not(.disabled).focus-visible {\n ", "\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.neutral_300, COLORS.primary_100, function (props) {
|
|
16
16
|
return props.selected ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &.disabled label:first-of-type span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n label:first-of-type span {\n background-color: ", ";\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n "])), COLORS.neutral_300, COLORS.neutral_200, COLORS.correct_500, COLORS.primary_20, COLORS.primary_500, COLORS.correct_500) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &.disabled label:first-of-type span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n "])), COLORS.neutral_300, COLORS.neutral_100, COLORS.critical_500, COLORS.primary_20);
|
|
17
17
|
}, focusStyles);
|
|
18
18
|
export var ToggleSwitchContainer = styled.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n"])));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["COLORS","focusStyles","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAAQA,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,iBAA/C,EAAkEC,kBAAlE,QAA4F,sBAA5F;AAEA,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["COLORS","focusStyles","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAAQA,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,iBAA/C,EAAkEC,kBAAlE,QAA4F,sBAA5F;AAEA,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAV,ssBASnBH,iBAAiB,CAACC,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CATE,EAanBN,iBAAiB,CAACE,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAbE,EAiBnBP,iBAAiB,CAACG,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAjBE,EAoBZX,MAAM,CAACY,WApBK,EAiCCZ,MAAM,CAACa,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,GACIZ,GADJ,24BAG4BH,MAAM,CAACY,WAHnC,EAO8BZ,MAAM,CAACgB,WAPrC,EAa8BhB,MAAM,CAACiB,WAbrC,EAiB8BjB,MAAM,CAACkB,UAjBrC,EAqB4BlB,MAAM,CAACmB,WArBnC,EAwB8BnB,MAAM,CAACiB,WAxBrC,IAkCId,GAlCJ,4jBAoC4BH,MAAM,CAACY,WApCnC,EAwC8BZ,MAAM,CAACoB,WAxCrC,EA8C8BpB,MAAM,CAACqB,YA9CrC,EAkD8BrB,MAAM,CAACkB,UAlDrC,CADA;AAAA,CArCqB,EA6FnBjB,WA7FmB,CAAlB;AAqGP,OAAO,IAAMqB,qBAAqB,GAAGpB,MAAM,CAACqB,KAAV,wMAA3B;AASP,OAAO,IAAMC,YAAY,GAAGtB,MAAM,CAACuB,IAAV,grBAWHzB,MAAM,CAAC0B,WAXJ,EAeD1B,MAAM,CAACqB,YAfN,EAyBDrB,MAAM,CAAC2B,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n &.disabled {\n color: ${COLORS.neutral_300};\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ${COLORS.primary_100};\n }\n }\n\n ${(props) =>\n props.selected\n ? css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_200} !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n label:first-of-type span {\n background-color: ${COLORS.primary_500};\n\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n `\n : css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_100} !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n `}\n &:not(.disabled).focus-visible {\n ${focusStyles}\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 36px;\n height: 16px;\n background-color: ${COLORS.neutral_500};\n border-radius: 100px;\n\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n top: calc(50% - 6px);\n background-color: ${COLORS.white};\n -webkit-transition: background-color 0.1s, transform 0.1s;\n transition: 0.1s;\n transition-timing-function: ease-in-out;\n border-radius: 50%;\n }\n`;\n"],"file":"TogglerStyles.js"}
|