@laerdal/life-react-components 2.2.1-dev.6.full → 2.2.1-dev.7.full

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.
@@ -8,16 +8,20 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = void 0;
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
12
  var React = _interopRequireWildcard(require("react"));
12
13
  var _TogglerStyles = require("./TogglerStyles");
13
14
  var _ = require("..");
14
15
  var _common = require("../common");
16
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
15
17
  var _jsxRuntime = require("react/jsx-runtime");
16
18
  var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
19
+ var _templateObject;
17
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); }
18
21
  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; }
19
22
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
20
23
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
24
+ var CheckmarkContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 14px;\n height: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n left: 2px;\n"])));
21
25
  var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
22
26
  var _size;
23
27
  var id = _ref.id,
@@ -59,7 +63,13 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
59
63
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitchContainer, {
60
64
  id: "switchContainer",
61
65
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitch, {
62
- className: isSemantic ? 'semantic' : ''
66
+ className: isSemantic ? 'semantic' : '',
67
+ children: selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckmarkContainer, {
68
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.CheckMark, {
69
+ size: '14px',
70
+ color: _.COLORS.white
71
+ })
72
+ })
63
73
  })
64
74
  }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
65
75
  className: 'label',
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleSwitch.cjs","names":["ToggleSwitch","React","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useFocusVisibleRef","useImperativeHandle","current","Size","Medium","e","key","toString","toLowerCase","concat"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"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 = React.forwardRef(({\n id,\n disabled,\n selected,\n label,\n isSemantic,\n size,\n onToggle,\n className,\n ...rest\n }: ToggleSwitchProps, ref) => {\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\n const focusVisibleRef = useFocusVisibleRef([]);\n\n React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n size = size ?? Size.Medium;\n\n return (\n <StyledSwitch\n ref={focusVisibleRef}\n onClick={(e) => toggle()}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n className={size\n .toString()\n .toLowerCase()\n .concat(disabled ? ' disabled' : '')\n .concat(className ? ` ${className}` : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n {...rest}>\n <ToggleSwitchContainer id=\"switchContainer\">\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"],"mappings":";;;;;;;;;;AAGA;AAUA;AACA;AACA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7C,IAAMA,YAAY,gBAAGC,KAAK,CAACC,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAG,IAAAC,0BAAkB,EAAC,EAAE,CAAC;EAE9Cd,KAAK,CAACe,mBAAmB,CAACb,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACG,OAAO;EAAA,GAAE,CAACH,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIS,MAAI,CAACC,MAAM;EAE1B,oBACE,sBAAC,2BAAY;IACX,GAAG,EAAEL,eAAgB;IACrB,OAAO,EAAE,iBAACM,CAAC;MAAA,OAAKP,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAO,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKR,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZa,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACnB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCmB,MAAM,CAACb,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,qBAAC,oCAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,qBAAC,2BAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG;MAAG;IAAG,EAC7B,EACvBD,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAAC,eAEYP,YAAY;AAAA"}
1
+ {"version":3,"file":"ToggleSwitch.cjs","names":["CheckmarkContainer","styled","div","ToggleSwitch","React","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useFocusVisibleRef","useImperativeHandle","current","Size","Medium","e","key","toString","toLowerCase","concat","COLORS","white"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"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 {COLORS, Size, SystemIcons} from '..';\nimport {useFocusVisibleRef} from '../common';\nimport styled from \"styled-components\";\n\nconst CheckmarkContainer = styled.div`\n position: absolute;\n width: 14px;\n height: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n left: 2px;\n`;\n\nconst ToggleSwitch = React.forwardRef(({\n id,\n disabled,\n selected,\n label,\n isSemantic,\n size,\n onToggle,\n className,\n ...rest\n }: ToggleSwitchProps, ref) => {\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\n const focusVisibleRef = useFocusVisibleRef([]);\n\n React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n size = size ?? Size.Medium;\n\n return (\n <StyledSwitch\n ref={focusVisibleRef}\n onClick={(e) => toggle()}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n className={size\n .toString()\n .toLowerCase()\n .concat(disabled ? ' disabled' : '')\n .concat(className ? ` ${className}` : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n {...rest}>\n <ToggleSwitchContainer id=\"switchContainer\">\n <Switch className={isSemantic ? 'semantic' : ''} >\n {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.white}/></CheckmarkContainer>}\n </Switch>\n </ToggleSwitchContainer>\n {label && (\n <label className={'label'} htmlFor={id}>\n {label}\n </label>\n )}\n </StyledSwitch>\n );\n});\n\nexport default ToggleSwitch;\n"],"mappings":";;;;;;;;;;;AAGA;AAUA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,kBAAkB,GAAIC,yBAAM,CAACC,GAAG,iOAQrC;AAED,IAAMC,YAAY,gBAAGC,KAAK,CAACC,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAG,IAAAC,0BAAkB,EAAC,EAAE,CAAC;EAE9Cd,KAAK,CAACe,mBAAmB,CAACb,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACG,OAAO;EAAA,GAAE,CAACH,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIS,MAAI,CAACC,MAAM;EAE1B,oBACE,sBAAC,2BAAY;IACX,GAAG,EAAEL,eAAgB;IACrB,OAAO,EAAE,iBAACM,CAAC;MAAA,OAAKP,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAO,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKR,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZa,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACnB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCmB,MAAM,CAACb,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,qBAAC,oCAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,qBAAC,2BAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG,EAAG;QAAA,UAC7CF,QAAQ,iBAAI,qBAAC,kBAAkB;UAAA,uBAAC,qBAAC,aAAW,CAAC,SAAS;YAAC,IAAI,EAAE,MAAO;YAAC,KAAK,EAAEmB,QAAM,CAACC;UAAM;QAAE;MAAqB;IAC1G,EACa,EACvBnB,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAAC,eAEYP,YAAY;AAAA"}
@@ -1,6 +1,8 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
3
4
  var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
5
+ var _templateObject;
4
6
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
5
7
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
8
  /**
@@ -16,10 +18,12 @@ import * as React from 'react';
16
18
  * Import custom styles.
17
19
  */
18
20
  import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
19
- import { Size } from '..';
21
+ import { COLORS, Size, SystemIcons } from '..';
20
22
  import { useFocusVisibleRef } from '../common';
23
+ import styled from "styled-components";
21
24
  import { jsx as _jsx } from "react/jsx-runtime";
22
25
  import { jsxs as _jsxs } from "react/jsx-runtime";
26
+ var CheckmarkContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n width: 14px;\n height: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n left: 2px;\n"])));
23
27
  var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
24
28
  var _size;
25
29
  var id = _ref.id,
@@ -61,7 +65,13 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
61
65
  children: [/*#__PURE__*/_jsx(ToggleSwitchContainer, {
62
66
  id: "switchContainer",
63
67
  children: /*#__PURE__*/_jsx(Switch, {
64
- className: isSemantic ? 'semantic' : ''
68
+ className: isSemantic ? 'semantic' : '',
69
+ children: selected && /*#__PURE__*/_jsx(CheckmarkContainer, {
70
+ children: /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
71
+ size: '14px',
72
+ color: COLORS.white
73
+ })
74
+ })
65
75
  })
66
76
  }), label && /*#__PURE__*/_jsx("label", {
67
77
  className: 'label',
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleSwitch.js","names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","useFocusVisibleRef","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useImperativeHandle","current","Medium","e","key","toString","toLowerCase","concat"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"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 = React.forwardRef(({\n id,\n disabled,\n selected,\n label,\n isSemantic,\n size,\n onToggle,\n className,\n ...rest\n }: ToggleSwitchProps, ref) => {\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\n const focusVisibleRef = useFocusVisibleRef([]);\n\n React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n size = size ?? Size.Medium;\n\n return (\n <StyledSwitch\n ref={focusVisibleRef}\n onClick={(e) => toggle()}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n className={size\n .toString()\n .toLowerCase()\n .concat(disabled ? ' disabled' : '')\n .concat(className ? ` ${className}` : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n {...rest}>\n <ToggleSwitchContainer id=\"switchContainer\">\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"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAGA;AACA;AACA;AACA,SAAQC,qBAAqB,EAAEC,YAAY,IAAIC,MAAM,EAAEC,YAAY,QAAO,iBAAiB;AAC3F,SAAQC,IAAI,QAAO,IAAI;AACvB,SAAQC,kBAAkB,QAAO,WAAW;AAAC;AAAA;AAE7C,IAAMJ,YAAY,gBAAGF,KAAK,CAACO,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAGb,kBAAkB,CAAC,EAAE,CAAC;EAE9CN,KAAK,CAACoB,mBAAmB,CAACZ,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACE,OAAO;EAAA,GAAE,CAACF,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIT,IAAI,CAACiB,MAAM;EAE1B,oBACE,MAAC,YAAY;IACX,GAAG,EAAEH,eAAgB;IACrB,OAAO,EAAE,iBAACI,CAAC;MAAA,OAAKL,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAK,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKN,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZW,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACjB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCiB,MAAM,CAACX,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,KAAC,qBAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,KAAC,MAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG;MAAG;IAAG,EAC7B,EACvBD,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAEF,eAAeV,YAAY"}
1
+ {"version":3,"file":"ToggleSwitch.js","names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","COLORS","Size","SystemIcons","useFocusVisibleRef","styled","CheckmarkContainer","div","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useImperativeHandle","current","Medium","e","key","toString","toLowerCase","concat","white"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"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 {COLORS, Size, SystemIcons} from '..';\nimport {useFocusVisibleRef} from '../common';\nimport styled from \"styled-components\";\n\nconst CheckmarkContainer = styled.div`\n position: absolute;\n width: 14px;\n height: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n left: 2px;\n`;\n\nconst ToggleSwitch = React.forwardRef(({\n id,\n disabled,\n selected,\n label,\n isSemantic,\n size,\n onToggle,\n className,\n ...rest\n }: ToggleSwitchProps, ref) => {\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\n const focusVisibleRef = useFocusVisibleRef([]);\n\n React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n size = size ?? Size.Medium;\n\n return (\n <StyledSwitch\n ref={focusVisibleRef}\n onClick={(e) => toggle()}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n className={size\n .toString()\n .toLowerCase()\n .concat(disabled ? ' disabled' : '')\n .concat(className ? ` ${className}` : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n {...rest}>\n <ToggleSwitchContainer id=\"switchContainer\">\n <Switch className={isSemantic ? 'semantic' : ''} >\n {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.white}/></CheckmarkContainer>}\n </Switch>\n </ToggleSwitchContainer>\n {label && (\n <label className={'label'} htmlFor={id}>\n {label}\n </label>\n )}\n </StyledSwitch>\n );\n});\n\nexport default ToggleSwitch;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAGA;AACA;AACA;AACA,SAAQC,qBAAqB,EAAEC,YAAY,IAAIC,MAAM,EAAEC,YAAY,QAAO,iBAAiB;AAC3F,SAAQC,MAAM,EAAEC,IAAI,EAAEC,WAAW,QAAO,IAAI;AAC5C,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,OAAOC,MAAM,MAAM,mBAAmB;AAAC;AAAA;AAEvC,IAAMC,kBAAkB,GAAID,MAAM,CAACE,GAAG,mNAQrC;AAED,IAAMT,YAAY,gBAAGF,KAAK,CAACY,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAGhB,kBAAkB,CAAC,EAAE,CAAC;EAE9CR,KAAK,CAACyB,mBAAmB,CAACZ,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACE,OAAO;EAAA,GAAE,CAACF,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIb,IAAI,CAACqB,MAAM;EAE1B,oBACE,MAAC,YAAY;IACX,GAAG,EAAEH,eAAgB;IACrB,OAAO,EAAE,iBAACI,CAAC;MAAA,OAAKL,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAK,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKN,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZW,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACjB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCiB,MAAM,CAACX,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,KAAC,qBAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,KAAC,MAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG,EAAG;QAAA,UAC7CF,QAAQ,iBAAI,KAAC,kBAAkB;UAAA,uBAAC,KAAC,WAAW,CAAC,SAAS;YAAC,IAAI,EAAE,MAAO;YAAC,KAAK,EAAEX,MAAM,CAAC4B;UAAM;QAAE;MAAqB;IAC1G,EACa,EACvBhB,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAEF,eAAef,YAAY"}
@@ -19,6 +19,6 @@ var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateOb
19
19
  exports.StyledSwitch = StyledSwitch;
20
20
  var ToggleSwitchContainer = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n"])));
21
21
  exports.ToggleSwitchContainer = ToggleSwitchContainer;
22
- var ToggleSwitch = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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: ", ";\n border-radius: 100px;\n\n &.semantic {\n background-color: ", ";\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: ", ";\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"])), _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.white);
22
+ var ToggleSwitch = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\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: ", ";\n border-radius: 100px;\n\n &.semantic {\n background-color: ", ";\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: ", ";\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"])), _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.white);
23
23
  exports.ToggleSwitch = ToggleSwitch;
24
24
  //# sourceMappingURL=TogglerStyles.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"TogglerStyles.cjs","names":["StyledSwitch","styled","div","ComponentSStyling","ComponentTextStyle","Regular","COLORS","black","ComponentMStyling","ComponentLStyling","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"],"sources":["../../src/Toggles/TogglerStyles.ts"],"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"],"mappings":";;;;;;;;;AAGA;AAKA;AACA;AAAmH;AAAA;AAAA;AAE5G,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,otBAShC,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAC,6BAAiB,EAACJ,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAE,6BAAiB,EAACL,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAGpDD,cAAM,CAACI,WAAW,EAaLJ,cAAM,CAACK,WAAW,EAIxC,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,OACVC,qBAAG,05BAEqBR,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACS,WAAW,EAMlBT,cAAM,CAACU,WAAW,EAIlBV,cAAM,CAACW,UAAU,EAInBX,cAAM,CAACY,WAAW,EAGhBZ,cAAM,CAACU,WAAW,QAU5CF,qBAAG,2kBAEqBR,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACa,WAAW,EAMlBb,cAAM,CAACc,YAAY,EAInBd,cAAM,CAACW,UAAU,CAG1C;AAAA,GAEHI,mBAAW,CAMhB;AAAC;AAEK,IAAMC,qBAAqB,GAAGrB,yBAAM,CAACsB,KAAK,sNAOhD;AAAC;AAEK,IAAMC,YAAY,GAAGvB,yBAAM,CAACwB,IAAI,8rBAWjBnB,cAAM,CAACoB,WAAW,EAIhBpB,cAAM,CAACc,YAAY,EAUnBd,cAAM,CAACqB,KAAK,CAMnC;AAAC"}
1
+ {"version":3,"file":"TogglerStyles.cjs","names":["StyledSwitch","styled","div","ComponentSStyling","ComponentTextStyle","Regular","COLORS","black","ComponentMStyling","ComponentLStyling","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"],"sources":["../../src/Toggles/TogglerStyles.ts"],"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: flex;\n align-items: center;\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"],"mappings":";;;;;;;;;AAGA;AAKA;AACA;AAAmH;AAAA;AAAA;AAE5G,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,otBAShC,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAC,6BAAiB,EAACJ,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAE,6BAAiB,EAACL,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAGpDD,cAAM,CAACI,WAAW,EAaLJ,cAAM,CAACK,WAAW,EAIxC,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,OACVC,qBAAG,05BAEqBR,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACS,WAAW,EAMlBT,cAAM,CAACU,WAAW,EAIlBV,cAAM,CAACW,UAAU,EAInBX,cAAM,CAACY,WAAW,EAGhBZ,cAAM,CAACU,WAAW,QAU5CF,qBAAG,2kBAEqBR,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACa,WAAW,EAMlBb,cAAM,CAACc,YAAY,EAInBd,cAAM,CAACW,UAAU,CAG1C;AAAA,GAEHI,mBAAW,CAMhB;AAAC;AAEK,IAAMC,qBAAqB,GAAGrB,yBAAM,CAACsB,KAAK,sNAOhD;AAAC;AAEK,IAAMC,YAAY,GAAGvB,yBAAM,CAACwB,IAAI,8sBAYjBnB,cAAM,CAACoB,WAAW,EAIhBpB,cAAM,CAACc,YAAY,EAUnBd,cAAM,CAACqB,KAAK,CAMnC;AAAC"}
@@ -14,5 +14,5 @@ export var StyledSwitch = styled.div(_templateObject || (_templateObject = _tagg
14
14
  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);
15
15
  }, focusStyles);
16
16
  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"])));
17
- export var ToggleSwitch = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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: ", ";\n border-radius: 100px;\n\n &.semantic {\n background-color: ", ";\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: ", ";\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"])), COLORS.neutral_500, COLORS.critical_500, COLORS.white);
17
+ export var ToggleSwitch = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\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: ", ";\n border-radius: 100px;\n\n &.semantic {\n background-color: ", ";\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: ", ";\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"])), COLORS.neutral_500, COLORS.critical_500, COLORS.white);
18
18
  //# sourceMappingURL=TogglerStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TogglerStyles.js","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"],"sources":["../../src/Toggles/TogglerStyles.ts"],"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"],"mappings":";;AAAA;AACA;AACA;AACA,SAAQA,MAAM,EAAEC,WAAW,QAAO,WAAW;;AAE7C;AACA;AACA;AACA,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAElH,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAG,ssBAShCH,iBAAiB,CAACC,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAI3DN,iBAAiB,CAACE,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAI3DP,iBAAiB,CAACG,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAGpDX,MAAM,CAACY,WAAW,EAaLZ,MAAM,CAACa,WAAW,EAIxC,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,GACVZ,GAAG,24BAEqBH,MAAM,CAACY,WAAW,EAIhBZ,MAAM,CAACgB,WAAW,EAMlBhB,MAAM,CAACiB,WAAW,EAIlBjB,MAAM,CAACkB,UAAU,EAInBlB,MAAM,CAACmB,WAAW,EAGhBnB,MAAM,CAACiB,WAAW,IAU5Cd,GAAG,4jBAEqBH,MAAM,CAACY,WAAW,EAIhBZ,MAAM,CAACoB,WAAW,EAMlBpB,MAAM,CAACqB,YAAY,EAInBrB,MAAM,CAACkB,UAAU,CAG1C;AAAA,GAEHjB,WAAW,CAMhB;AAED,OAAO,IAAMqB,qBAAqB,GAAGpB,MAAM,CAACqB,KAAK,wMAOhD;AAED,OAAO,IAAMC,YAAY,GAAGtB,MAAM,CAACuB,IAAI,grBAWjBzB,MAAM,CAAC0B,WAAW,EAIhB1B,MAAM,CAACqB,YAAY,EAUnBrB,MAAM,CAAC2B,KAAK,CAMnC"}
1
+ {"version":3,"file":"TogglerStyles.js","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"],"sources":["../../src/Toggles/TogglerStyles.ts"],"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: flex;\n align-items: center;\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"],"mappings":";;AAAA;AACA;AACA;AACA,SAAQA,MAAM,EAAEC,WAAW,QAAO,WAAW;;AAE7C;AACA;AACA;AACA,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAElH,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAG,ssBAShCH,iBAAiB,CAACC,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAI3DN,iBAAiB,CAACE,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAI3DP,iBAAiB,CAACG,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAGpDX,MAAM,CAACY,WAAW,EAaLZ,MAAM,CAACa,WAAW,EAIxC,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,GACVZ,GAAG,24BAEqBH,MAAM,CAACY,WAAW,EAIhBZ,MAAM,CAACgB,WAAW,EAMlBhB,MAAM,CAACiB,WAAW,EAIlBjB,MAAM,CAACkB,UAAU,EAInBlB,MAAM,CAACmB,WAAW,EAGhBnB,MAAM,CAACiB,WAAW,IAU5Cd,GAAG,4jBAEqBH,MAAM,CAACY,WAAW,EAIhBZ,MAAM,CAACoB,WAAW,EAMlBpB,MAAM,CAACqB,YAAY,EAInBrB,MAAM,CAACkB,UAAU,CAG1C;AAAA,GAEHjB,WAAW,CAMhB;AAED,OAAO,IAAMqB,qBAAqB,GAAGpB,MAAM,CAACqB,KAAK,wMAOhD;AAED,OAAO,IAAMC,YAAY,GAAGtB,MAAM,CAACuB,IAAI,gsBAYjBzB,MAAM,CAAC0B,WAAW,EAIhB1B,MAAM,CAACqB,YAAY,EAUnBrB,MAAM,CAAC2B,KAAK,CAMnC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "2.2.1-dev.6.full",
3
+ "version": "2.2.1-dev.7.full",
4
4
  "private": false,
5
5
  "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
6
6
  "contributors": [],