@laerdal/life-react-components 1.2.2-dev.15 → 1.2.2-dev.17
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/esm/Accordion/AccordionItem.js +46 -0
- package/dist/esm/Accordion/AccordionItem.js.map +1 -0
- package/dist/esm/Accordion/AccordionMenu.js +35 -0
- package/dist/esm/Accordion/AccordionMenu.js.map +1 -0
- package/dist/esm/Accordion/__tests__/AccordionMenu.test.js +53 -0
- package/dist/esm/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/esm/Accordion/index.js +4 -0
- package/dist/esm/Accordion/index.js.map +1 -0
- package/dist/esm/Accordion/styles.js +59 -0
- package/dist/esm/Accordion/styles.js.map +1 -0
- package/dist/esm/HyperLink/HyperLink.js +7 -15
- package/dist/esm/HyperLink/HyperLink.js.map +1 -1
- package/dist/esm/InputFields/Checkbox.js +27 -16
- package/dist/esm/InputFields/Checkbox.js.map +1 -1
- package/dist/esm/InputFields/RadioButton.js +21 -14
- package/dist/esm/InputFields/RadioButton.js.map +1 -1
- package/dist/esm/InputFields/SearchBar.js +13 -13
- package/dist/esm/InputFields/SearchBar.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/js/Accordion/AccordionItem.d.ts +9 -0
- package/dist/js/Accordion/AccordionItem.js +58 -0
- package/dist/js/Accordion/AccordionItem.js.map +1 -0
- package/dist/js/Accordion/AccordionMenu.d.ts +15 -0
- package/dist/js/Accordion/AccordionMenu.js +55 -0
- package/dist/js/Accordion/AccordionMenu.js.map +1 -0
- package/dist/js/Accordion/__tests__/AccordionMenu.test.js +101 -0
- package/dist/js/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/js/Accordion/index.d.ts +3 -0
- package/dist/js/Accordion/index.js +30 -0
- package/dist/js/Accordion/index.js.map +1 -0
- package/dist/js/Accordion/styles.d.ts +10 -0
- package/dist/js/Accordion/styles.js +50 -0
- package/dist/js/Accordion/styles.js.map +1 -0
- package/dist/js/HyperLink/HyperLink.js +10 -16
- package/dist/js/HyperLink/HyperLink.js.map +1 -1
- package/dist/js/InputFields/Checkbox.js +9 -5
- package/dist/js/InputFields/Checkbox.js.map +1 -1
- package/dist/js/InputFields/RadioButton.js +3 -3
- package/dist/js/InputFields/RadioButton.js.map +1 -1
- package/dist/js/InputFields/SearchBar.js +15 -15
- package/dist/js/InputFields/SearchBar.js.map +1 -1
- package/dist/js/index.d.ts +1 -0
- package/dist/js/index.js +13 -0
- package/dist/js/index.js.map +1 -1
- package/dist/umd/Accordion/AccordionItem.js +70 -0
- package/dist/umd/Accordion/AccordionItem.js.map +1 -0
- package/dist/umd/Accordion/AccordionMenu.js +112 -0
- package/dist/umd/Accordion/AccordionMenu.js.map +1 -0
- package/dist/umd/Accordion/__tests__/AccordionMenu.test.js +74 -0
- package/dist/umd/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
- package/dist/umd/Accordion/index.js +44 -0
- package/dist/umd/Accordion/index.js.map +1 -0
- package/dist/umd/Accordion/styles.js +85 -0
- package/dist/umd/Accordion/styles.js.map +1 -0
- package/dist/umd/HyperLink/HyperLink.js +7 -15
- package/dist/umd/HyperLink/HyperLink.js.map +1 -1
- package/dist/umd/InputFields/Checkbox.js +27 -16
- package/dist/umd/InputFields/Checkbox.js.map +1 -1
- package/dist/umd/InputFields/RadioButton.js +21 -14
- package/dist/umd/InputFields/RadioButton.js.map +1 -1
- package/dist/umd/InputFields/SearchBar.js +13 -13
- package/dist/umd/InputFields/SearchBar.js.map +1 -1
- package/dist/umd/index.js +13 -4
- package/dist/umd/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
if (typeof define === "function" && define.amd) {
|
|
3
|
+
define(["exports", "./AccordionMenu", "./styles"], factory);
|
|
4
|
+
} else if (typeof exports !== "undefined") {
|
|
5
|
+
factory(exports, require("./AccordionMenu"), require("./styles"));
|
|
6
|
+
} else {
|
|
7
|
+
var mod = {
|
|
8
|
+
exports: {}
|
|
9
|
+
};
|
|
10
|
+
factory(mod.exports, global.AccordionMenu, global.styles);
|
|
11
|
+
global.undefined = mod.exports;
|
|
12
|
+
}
|
|
13
|
+
})(this, function (exports, _AccordionMenu, _styles) {
|
|
14
|
+
"use strict";
|
|
15
|
+
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, "AccordionMenu", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () {
|
|
22
|
+
return _interopRequireDefault(_AccordionMenu).default;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(exports, "AccordionMenuItem", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () {
|
|
28
|
+
return _interopRequireDefault(_AccordionMenu).default;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
Object.defineProperty(exports, "AccordionMenuWrapper", {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
get: function () {
|
|
34
|
+
return _styles.AccordionMenuWrapper;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
function _interopRequireDefault(obj) {
|
|
39
|
+
return obj && obj.__esModule ? obj : {
|
|
40
|
+
default: obj
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;oDAAA,O;;;;;;oDACA,O;;;;;;qBACA,oB","sourcesContent":["export { default as AccordionMenu } from './AccordionMenu';\nexport { default as AccordionMenuItem } from './AccordionMenu';\nexport { AccordionMenuWrapper } from './styles';\n"],"file":"index.js"}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
if (typeof define === "function" && define.amd) {
|
|
3
|
+
define(["exports", "styled-components", "../styles", "../styles/z-indexes"], factory);
|
|
4
|
+
} else if (typeof exports !== "undefined") {
|
|
5
|
+
factory(exports, require("styled-components"), require("../styles"), require("../styles/z-indexes"));
|
|
6
|
+
} else {
|
|
7
|
+
var mod = {
|
|
8
|
+
exports: {}
|
|
9
|
+
};
|
|
10
|
+
factory(mod.exports, global.styledComponents, global.styles, global.zIndexes);
|
|
11
|
+
global.undefined = mod.exports;
|
|
12
|
+
}
|
|
13
|
+
})(this, function (exports, _styledComponents, _styles, _zIndexes) {
|
|
14
|
+
"use strict";
|
|
15
|
+
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
exports.ItemBodyContainer = exports.HeaderIconContainer = exports.ItemHeaderContainer = exports.AccordionItemContainer = exports.AccordionMenuWrapper = undefined;
|
|
20
|
+
|
|
21
|
+
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
22
|
+
|
|
23
|
+
function _interopRequireDefault(obj) {
|
|
24
|
+
return obj && obj.__esModule ? obj : {
|
|
25
|
+
default: obj
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const AccordionMenuWrapper = exports.AccordionMenuWrapper = _styledComponents2.default.div`
|
|
30
|
+
min-width: 320px;
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
`;
|
|
35
|
+
const AccordionItemContainer = exports.AccordionItemContainer = _styledComponents2.default.div`
|
|
36
|
+
width: 100%;
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
box-sizing: border-box;
|
|
40
|
+
border-bottom: ${props => props.displaySeparator ? `1px solid ${_styles.COLORS.neutral_100}` : ''};
|
|
41
|
+
cursor: ${props => props.isDisabled ? 'not-allowed' : 'pointer'};
|
|
42
|
+
`;
|
|
43
|
+
const disabledState = _styledComponents.css`
|
|
44
|
+
background: ${_styles.COLORS.white}!important;
|
|
45
|
+
color: ${_styles.COLORS.neutral_300};
|
|
46
|
+
pointer-events: none;
|
|
47
|
+
svg {
|
|
48
|
+
color: ${_styles.COLORS.neutral_300}!important;
|
|
49
|
+
}
|
|
50
|
+
`;
|
|
51
|
+
const ItemHeaderContainer = exports.ItemHeaderContainer = _styledComponents2.default.div`
|
|
52
|
+
position: relative;
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: 8px;
|
|
56
|
+
padding: 12px 16px 11px 16px;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
background: ${_styles.COLORS.neutral_20};
|
|
59
|
+
svg:last-child {
|
|
60
|
+
margin-left: auto;
|
|
61
|
+
}
|
|
62
|
+
:focus {
|
|
63
|
+
outline: none;
|
|
64
|
+
z-index: ${_zIndexes.Z_INDEXES.focus};
|
|
65
|
+
box-shadow: 0px 4px 12px ${_styles.COLORS.primary_500}, 0px 0px 8px ${_styles.COLORS.primary_500};
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
${props => props.isDisabled ? disabledState : ''}
|
|
69
|
+
:hover {
|
|
70
|
+
background: ${_styles.COLORS.primary_20};
|
|
71
|
+
}
|
|
72
|
+
:active {
|
|
73
|
+
background: ${_styles.COLORS.primary_100};
|
|
74
|
+
}
|
|
75
|
+
`;
|
|
76
|
+
const HeaderIconContainer = exports.HeaderIconContainer = _styledComponents2.default.div`
|
|
77
|
+
margin-left: auto;
|
|
78
|
+
`;
|
|
79
|
+
const ItemBodyContainer = exports.ItemBodyContainer = _styledComponents2.default.div`
|
|
80
|
+
padding: 0px 24px;
|
|
81
|
+
margin: 12px 0;
|
|
82
|
+
background: ${_styles.COLORS.white};
|
|
83
|
+
`;
|
|
84
|
+
});
|
|
85
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","COLORS","neutral_100","disabledState","css","white","neutral_300","ItemHeaderContainer","neutral_20","Z_INDEXES","focus","primary_500","primary_20","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,QAAMA,oBAAoB,WAApBA,oBAAoB,GAAGC,2BAAOC,GAAI;AAC/C;AACA;AACA;AACA;AAJO,CAAA;AAOA,QAAMC,sBAAsB,WAAtBA,sBAAsB,GAAGF,2BAAOC,GAAwD;AACrG;AACA;AACA;AACA;AACA,mBAAoBE,KAAD,IAAYA,KAAK,CAALA,gBAAAA,GAA0B,aAAYC,eAAOC,WAA7CF,EAAAA,GAA6D,EAAI;AAChG,YAAaA,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,aAAAA,GAAmC,SAAW;AAN/D,CAAA;AASP,QAAMG,aAAa,GAAGC,qBAAI;AAC1B,gBAAgBH,eAAOI,KAAM;AAC7B,WAAWJ,eAAOK,WAAY;AAC9B;AACA;AACA,aAAaL,eAAOK,WAAY;AAChC;AANA,CAAA;AASO,QAAMC,mBAAmB,WAAnBA,mBAAmB,GAAGV,2BAAOC,GAA6B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBG,eAAOO,UAAW;AAClC;AACA;AACA;AACA;AACA;AACA,eAAeC,oBAAUC,KAAM;AAC/B,+BAA+BT,eAAOU,WAAY,iBAAgBV,eAAOU,WAAY;AACrF;AACA;AACA,IAAKX,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,aAAAA,GAAmC,EAAI;AACvD;AACA,kBAAkBC,eAAOW,UAAW;AACpC;AACA;AACA,kBAAkBX,eAAOY,WAAY;AACrC;AAvBO,CAAA;AA0BA,QAAMC,mBAAmB,WAAnBA,mBAAmB,GAAGjB,2BAAOC,GAAI;AAC9C;AADO,CAAA;AAIA,QAAMiB,iBAAiB,WAAjBA,iBAAiB,GAAGlB,2BAAOC,GAAI;AAC5C;AACA;AACA,gBAAgBG,eAAOI,KAAM;AAHtB,CAAA","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; isDisabled: boolean }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n`;\n\nconst disabledState = css`\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean }>`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n background: ${COLORS.neutral_20};\n svg:last-child {\n margin-left: auto;\n }\n :focus {\n outline: none;\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};\n }\n\n ${(props) => (props.isDisabled ? disabledState : '')}\n :hover {\n background: ${COLORS.primary_20};\n }\n :active {\n background: ${COLORS.primary_100};\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n padding: 0px 24px;\n margin: 12px 0;\n background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
};
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
const _excluded = ["
|
|
82
|
+
const _excluded = ["children", "target", "variant"];
|
|
83
83
|
|
|
84
84
|
function _extends() {
|
|
85
85
|
_extends = Object.assign || function (target) {
|
|
@@ -142,25 +142,17 @@
|
|
|
142
142
|
|
|
143
143
|
const HyperLink = _ref => {
|
|
144
144
|
let {
|
|
145
|
-
id,
|
|
146
|
-
className,
|
|
147
|
-
variant,
|
|
148
|
-
href,
|
|
149
|
-
margin,
|
|
150
145
|
children,
|
|
151
|
-
target
|
|
146
|
+
target = '_blank',
|
|
147
|
+
variant = 'default'
|
|
152
148
|
} = _ref,
|
|
153
149
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
154
150
|
|
|
155
|
-
return /*#__PURE__*/React.createElement(StyledLink, _extends({
|
|
156
|
-
id: id,
|
|
157
|
-
className: className,
|
|
151
|
+
return /*#__PURE__*/React.createElement(StyledLink, _extends({}, props, {
|
|
158
152
|
variant: variant,
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
margin: margin
|
|
163
|
-
}, props), children);
|
|
153
|
+
target: target,
|
|
154
|
+
rel: "noopener noreferrer"
|
|
155
|
+
}), children);
|
|
164
156
|
};
|
|
165
157
|
|
|
166
158
|
HyperLink.propTypes = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,QAAMA,UAAU,GAAGC,2BAAOC,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAAAA,sBAAAA,GAA+CC,qBAAc;AAC7E,IAAKD,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACE,MAAhCF,GAAAA,GAA4C,EAAI;AALhE,CAAA;;AAkBA,QAAMS,SAAkD,GAAG,IAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,QAAMA,UAAU,GAAGC,2BAAOC,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAAAA,sBAAAA,GAA+CC,qBAAc;AAC7E,IAAKD,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACE,MAAhCF,GAAAA,GAA4C,EAAI;AALhE,CAAA;;AAkBA,QAAMS,SAAkD,GAAG,IAAA,IAAoF;AAAA,QAAnF;AAAA,MAAA,QAAA;AAAYC,MAAAA,MAAM,GAAlB,QAAA;AAA+BN,MAAAA,OAAO,GAAG;AAAzC,QAAmF,IAAA;AAAA,QAA5BJ,KAA4B,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AAC7I,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA;AAAuB,MAAA,OAAO,EAA9B,OAAA;AAAyC,MAAA,MAAM,EAA/C,MAAA;AAAyD,MAAA,GAAG,EAAC;AAA7D,KAAA,CAAA,EADF,QACE,CADF;AADF,GAAA;;;AATEG,IAAAA,E;AACAC,IAAAA,O,6BAAS,S,EAAY,U;AACrBC,IAAAA,I;AACAC,IAAAA,Q;AACAJ,IAAAA,M;AACAK,IAAAA,Q;AACAC,IAAAA,S;;oBAWF,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n variant: 'default' | 'inverted';\n margin?: string;\n}>`\n ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n id: string;\n variant: 'default' | 'inverted';\n href: string;\n disabled?: boolean;\n margin?: string;\n children?: any;\n className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n return (\n <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n {children}\n </StyledLink>\n );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
|
|
@@ -81,11 +81,9 @@
|
|
|
81
81
|
|
|
82
82
|
const StyledCheckBox = _styledComponents2.default.div`
|
|
83
83
|
display: flex;
|
|
84
|
-
flex-direction: row;
|
|
85
84
|
width: 100%;
|
|
86
85
|
min-height: 48px;
|
|
87
86
|
min-width: 48px;
|
|
88
|
-
align-items: center;
|
|
89
87
|
|
|
90
88
|
${props => props.margin ? `margin: ${props.margin};` : ''}
|
|
91
89
|
cursor: pointer;
|
|
@@ -96,14 +94,14 @@
|
|
|
96
94
|
pointer-events: none;
|
|
97
95
|
}
|
|
98
96
|
|
|
99
|
-
.icon {
|
|
97
|
+
.checkbox-icon {
|
|
100
98
|
margin: 6px;
|
|
101
99
|
display: flex;
|
|
102
100
|
align-items: center;
|
|
103
101
|
justify-content: center;
|
|
104
102
|
box-sizing: border-box;
|
|
105
|
-
width: 36px;
|
|
106
103
|
height: 36px;
|
|
104
|
+
min-width: 36px;
|
|
107
105
|
border-radius: 50%;
|
|
108
106
|
|
|
109
107
|
svg {
|
|
@@ -111,27 +109,36 @@
|
|
|
111
109
|
}
|
|
112
110
|
}
|
|
113
111
|
|
|
114
|
-
.label {
|
|
112
|
+
.checkbox-label {
|
|
115
113
|
user-select: none;
|
|
116
114
|
cursor: inherit;
|
|
117
115
|
}
|
|
118
116
|
|
|
119
117
|
&.small {
|
|
120
118
|
${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
119
|
+
.checkbox-label {
|
|
120
|
+
padding-top: 14px;
|
|
121
|
+
}
|
|
121
122
|
}
|
|
122
123
|
|
|
123
124
|
&.medium {
|
|
124
125
|
${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
126
|
+
.checkbox-label {
|
|
127
|
+
padding-top: 12px;
|
|
128
|
+
}
|
|
125
129
|
}
|
|
126
130
|
|
|
127
131
|
&.large {
|
|
128
132
|
${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
133
|
+
.checkbox-label {
|
|
134
|
+
padding-top: 12px;
|
|
135
|
+
}
|
|
129
136
|
}
|
|
130
137
|
|
|
131
138
|
&:not(.disabled):focus {
|
|
132
139
|
outline: none;
|
|
133
140
|
|
|
134
|
-
.icon {
|
|
141
|
+
.checkbox-icon {
|
|
135
142
|
background-color: ${_styles.COLORS.white};
|
|
136
143
|
box-shadow: 0 0 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
|
|
137
144
|
|
|
@@ -142,7 +149,7 @@
|
|
|
142
149
|
}
|
|
143
150
|
|
|
144
151
|
&:not(.disabled):hover {
|
|
145
|
-
.icon {
|
|
152
|
+
.checkbox-icon {
|
|
146
153
|
background-color: ${_styles.COLORS.primary_20};
|
|
147
154
|
|
|
148
155
|
svg {
|
|
@@ -152,7 +159,7 @@
|
|
|
152
159
|
}
|
|
153
160
|
|
|
154
161
|
&:not(.disabled):active {
|
|
155
|
-
.icon {
|
|
162
|
+
.checkbox-icon {
|
|
156
163
|
background: ${_styles.COLORS.primary_100};
|
|
157
164
|
box-shadow: none;
|
|
158
165
|
|
|
@@ -168,16 +175,16 @@
|
|
|
168
175
|
|
|
169
176
|
color: ${_styles.COLORS.neutral_300};
|
|
170
177
|
|
|
171
|
-
.icon,
|
|
172
|
-
.label {
|
|
178
|
+
.checkbox-icon,
|
|
179
|
+
.checkbox-label {
|
|
173
180
|
pointer-events: none;
|
|
174
181
|
}
|
|
175
182
|
|
|
176
|
-
.icon{
|
|
183
|
+
.checkbox-icon{
|
|
177
184
|
background-color: ${_styles.COLORS.white};
|
|
178
185
|
}
|
|
179
186
|
|
|
180
|
-
.icon svg {
|
|
187
|
+
.checkbox-icon svg {
|
|
181
188
|
color: ${_styles.COLORS.neutral_300};
|
|
182
189
|
}
|
|
183
190
|
}
|
|
@@ -192,7 +199,8 @@
|
|
|
192
199
|
disabled,
|
|
193
200
|
margin,
|
|
194
201
|
size,
|
|
195
|
-
semiSelected
|
|
202
|
+
semiSelected,
|
|
203
|
+
children
|
|
196
204
|
}, ref) => {
|
|
197
205
|
const onKeyPress = e => {
|
|
198
206
|
if (e.keyCode === 13 && !disabled) {
|
|
@@ -223,7 +231,7 @@
|
|
|
223
231
|
onMouseDown: e => e.preventDefault()
|
|
224
232
|
}, /*#__PURE__*/React.createElement("div", {
|
|
225
233
|
id: id,
|
|
226
|
-
className: 'icon'
|
|
234
|
+
className: 'checkbox-icon'
|
|
227
235
|
}, selected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOn, {
|
|
228
236
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
229
237
|
size: "24px"
|
|
@@ -234,9 +242,12 @@
|
|
|
234
242
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
235
243
|
size: "24px"
|
|
236
244
|
})), label && /*#__PURE__*/React.createElement("label", {
|
|
237
|
-
className: 'label',
|
|
245
|
+
className: 'checkbox-label',
|
|
246
|
+
htmlFor: id
|
|
247
|
+
}, label), !label && /*#__PURE__*/React.createElement("label", {
|
|
248
|
+
className: 'checkbox-label',
|
|
238
249
|
htmlFor: id
|
|
239
|
-
},
|
|
250
|
+
}, children));
|
|
240
251
|
});
|
|
241
252
|
Checkbox.propTypes = {
|
|
242
253
|
id: _propTypes2.default.string.isRequired,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","neutral_600","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","showWarning","disabled","iconPointerEventsTransparent","semiSelected","Checkbox","onKeyPress","e","handleClick","size","Size"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,cAAc,GAAGC,2BAAOC,GAAwF;AACtH;AACA;AACA;AACA;AACA;AACA
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","neutral_600","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","showWarning","disabled","iconPointerEventsTransparent","semiSelected","Checkbox","children","onKeyPress","e","handleClick","size","Size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: 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.showWarning ? COLORS.warning_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):focus {\n outline: none;\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n svg {\n color: ${COLORS.neutral_600};\n }\n }\n }\n\n &:not(.disabled):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):active {\n .checkbox-icon {\n background: ${COLORS.primary_100};\n box-shadow: none;\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.disabled {\n box-shadow: none;\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\ninterface Props {\n id: string;\n selected: boolean;\n select: (selected: boolean) => void;\n label?: string;\n showWarning?: boolean;\n disabled?: boolean;\n margin?: string;\n size?: Size;\n iconPointerEventsTransparent?: boolean;\n semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n id,\n selected,\n select,\n label,\n showWarning,\n iconPointerEventsTransparent,\n disabled,\n margin,\n size,\n semiSelected,\n children\n }, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled) {\n select(!selected);\n }\n };\n\n const handleClick = () => {\n if (disabled) {\n return;\n }\n select(!selected);\n };\n\n size = size ?? Size.Medium;\n\n return (\n <StyledCheckBox key={id}\n ref={ref}\n disabled={disabled}\n className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n showWarning={showWarning}\n margin={margin}\n onClick={handleClick}\n onKeyDown={onKeyPress}\n onMouseDown={e => e.preventDefault()}>\n <div id={id} className={'checkbox-icon'}>\n {\n selected\n ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n : semiSelected\n ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n : <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"],"file":"Checkbox.js"}
|
|
@@ -81,11 +81,9 @@
|
|
|
81
81
|
|
|
82
82
|
const StyledRadioButton = _styledComponents2.default.div`
|
|
83
83
|
display: flex;
|
|
84
|
-
flex-direction: row;
|
|
85
84
|
width: 100%;
|
|
86
85
|
min-height: 48px;
|
|
87
86
|
min-width: 48px;
|
|
88
|
-
align-items: center;
|
|
89
87
|
|
|
90
88
|
${props => props.margin ? `margin: ${props.margin};` : ''}
|
|
91
89
|
cursor: pointer;
|
|
@@ -96,14 +94,14 @@
|
|
|
96
94
|
pointer-events: none;
|
|
97
95
|
}
|
|
98
96
|
|
|
99
|
-
.icon {
|
|
97
|
+
.radio-button-icon {
|
|
100
98
|
margin: 6px;
|
|
101
99
|
display: flex;
|
|
102
100
|
align-items: center;
|
|
103
101
|
justify-content: center;
|
|
104
102
|
box-sizing: border-box;
|
|
105
|
-
width: 36px;
|
|
106
103
|
height: 36px;
|
|
104
|
+
min-width: 36px;
|
|
107
105
|
border-radius: 50%;
|
|
108
106
|
|
|
109
107
|
svg {
|
|
@@ -111,7 +109,7 @@
|
|
|
111
109
|
}
|
|
112
110
|
}
|
|
113
111
|
|
|
114
|
-
.label {
|
|
112
|
+
.radio-button-label {
|
|
115
113
|
user-select: none;
|
|
116
114
|
display: flex;
|
|
117
115
|
flex-direction: column;
|
|
@@ -127,20 +125,29 @@
|
|
|
127
125
|
|
|
128
126
|
&.small {
|
|
129
127
|
${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
128
|
+
.radio-button-label {
|
|
129
|
+
padding-top: 14px;
|
|
130
|
+
}
|
|
130
131
|
}
|
|
131
132
|
|
|
132
133
|
&.medium {
|
|
133
134
|
${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
135
|
+
.radio-button-label {
|
|
136
|
+
padding-top: 12px;
|
|
137
|
+
}
|
|
134
138
|
}
|
|
135
139
|
|
|
136
140
|
&.large {
|
|
137
141
|
${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
142
|
+
.radio-button-label {
|
|
143
|
+
padding-top: 12px;
|
|
144
|
+
}
|
|
138
145
|
}
|
|
139
146
|
|
|
140
147
|
&:not(.disabled):focus {
|
|
141
148
|
outline: none;
|
|
142
149
|
|
|
143
|
-
.icon {
|
|
150
|
+
.radio-button-icon {
|
|
144
151
|
background-color: ${_styles.COLORS.white};
|
|
145
152
|
box-shadow: 0 0 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
|
|
146
153
|
|
|
@@ -151,7 +158,7 @@
|
|
|
151
158
|
}
|
|
152
159
|
|
|
153
160
|
&:not(.disabled):hover {
|
|
154
|
-
.icon {
|
|
161
|
+
.radio-button-icon {
|
|
155
162
|
background-color: ${_styles.COLORS.primary_20};
|
|
156
163
|
|
|
157
164
|
svg {
|
|
@@ -161,7 +168,7 @@
|
|
|
161
168
|
}
|
|
162
169
|
|
|
163
170
|
&:not(.disabled):active {
|
|
164
|
-
.icon {
|
|
171
|
+
.radio-button-icon {
|
|
165
172
|
background: ${_styles.COLORS.primary_100};
|
|
166
173
|
box-shadow: none;
|
|
167
174
|
|
|
@@ -177,16 +184,16 @@
|
|
|
177
184
|
|
|
178
185
|
color: ${_styles.COLORS.neutral_300};
|
|
179
186
|
|
|
180
|
-
.icon,
|
|
181
|
-
.label {
|
|
187
|
+
.radio-button-icon,
|
|
188
|
+
.radio-button-label {
|
|
182
189
|
pointer-events: none;
|
|
183
190
|
}
|
|
184
191
|
|
|
185
|
-
.icon{
|
|
192
|
+
.radio-button-icon{
|
|
186
193
|
background-color: ${_styles.COLORS.white};
|
|
187
194
|
}
|
|
188
195
|
|
|
189
|
-
.icon svg {
|
|
196
|
+
.radio-button-icon svg {
|
|
190
197
|
color: ${_styles.COLORS.neutral_300};
|
|
191
198
|
}
|
|
192
199
|
}
|
|
@@ -223,7 +230,7 @@
|
|
|
223
230
|
showWarning: showWarning,
|
|
224
231
|
selected: selected
|
|
225
232
|
}, /*#__PURE__*/React.createElement("div", {
|
|
226
|
-
className: 'icon',
|
|
233
|
+
className: 'radio-button-icon',
|
|
227
234
|
id: id
|
|
228
235
|
}, selected && /*#__PURE__*/React.createElement(_SystemIcons.RadioButtonOn, {
|
|
229
236
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
@@ -232,7 +239,7 @@
|
|
|
232
239
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
233
240
|
size: "24px"
|
|
234
241
|
})), /*#__PURE__*/React.createElement("div", {
|
|
235
|
-
className: 'label'
|
|
242
|
+
className: 'radio-button-label'
|
|
236
243
|
}, label && /*#__PURE__*/React.createElement("label", {
|
|
237
244
|
htmlFor: id
|
|
238
245
|
}, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","neutral_600","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","additionalLabel","showWarning","disabled","iconPointerEventsTransparent","RadioButton","size","onKeyPress","e","Size"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,iBAAiB,GAAGC,2BAAOC,GAAwF;AACzH;AACA;AACA;AACA;AACA;AACA
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","neutral_600","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","additionalLabel","showWarning","disabled","iconPointerEventsTransparent","RadioButton","size","onKeyPress","e","Size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\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 .radio-button-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.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n }\n }\n\n .radio-button-label {\n user-select: none;\n display: flex;\n flex-direction: column;\n\n label{\n cursor: inherit;\n }\n\n span {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n .radio-button-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n .radio-button-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n .radio-button-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):focus {\n outline: none;\n\n .radio-button-icon {\n background-color: ${COLORS.white};\n box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n svg {\n color: ${COLORS.neutral_600};\n }\n }\n }\n\n &:not(.disabled):hover {\n .radio-button-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):active {\n .radio-button-icon {\n background: ${COLORS.primary_100};\n box-shadow: none;\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.disabled {\n box-shadow: none;\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .radio-button-icon,\n .radio-button-label {\n pointer-events: none;\n }\n\n .radio-button-icon{\n background-color: ${COLORS.white};\n }\n \n .radio-button-icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\ninterface Props {\n id: string;\n selected: boolean;\n select: (selected: boolean) => void;\n label?: string;\n additionalLabel?: string;\n showWarning?: boolean;\n disabled?: boolean;\n iconPointerEventsTransparent?: boolean;\n margin?: string;\n size?: Size;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n id,\n selected,\n label,\n additionalLabel,\n showWarning,\n select,\n disabled,\n margin,\n iconPointerEventsTransparent,\n size\n}: Props, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled) {\n select(!selected);\n }\n };\n\n size = size ?? Size.Medium;\n\n return (\n <StyledRadioButton key={id} margin={margin}\n ref={ref}\n onClick={() => !disabled && select(!selected)}\n onMouseDown={e => e.preventDefault()}\n onKeyDown={onKeyPress}\n disabled={disabled}\n className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n tabIndex={disabled ? -1 : 0}\n showWarning={showWarning}\n selected={selected}>\n <div className={'radio-button-icon'} id={id}>\n { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n </div>\n <div className={'radio-button-label'}>\n {label && <label htmlFor={id}>{label}</label>}\n {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n </div>\n </StyledRadioButton>\n );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}
|
|
@@ -80,7 +80,18 @@
|
|
|
80
80
|
disabled: disabled,
|
|
81
81
|
tabbedHere: tabbedHere,
|
|
82
82
|
validationMessage: validationMessage
|
|
83
|
-
}, /*#__PURE__*/_react2.default.createElement(
|
|
83
|
+
}, /*#__PURE__*/_react2.default.createElement(_SearchBarInput2.default, {
|
|
84
|
+
placeholder: disabled ? '' : placeholder,
|
|
85
|
+
ref: inputRef,
|
|
86
|
+
id: id,
|
|
87
|
+
size: size,
|
|
88
|
+
disabled: disabled,
|
|
89
|
+
setTabbedHere: setTabbedHere,
|
|
90
|
+
setSearchTerm: term => setSearchTerm(term),
|
|
91
|
+
searchTerm: searchTerm,
|
|
92
|
+
onKeyDown: onKeyDown,
|
|
93
|
+
enterSearch: enterSearch
|
|
94
|
+
}), /*#__PURE__*/_react2.default.createElement(_styling.SearchIconWrapper, {
|
|
84
95
|
className: size ? size : '',
|
|
85
96
|
"aria-label": performSearchLabel
|
|
86
97
|
}, /*#__PURE__*/_react2.default.createElement(_Button.IconButton, {
|
|
@@ -92,18 +103,7 @@
|
|
|
92
103
|
onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null
|
|
93
104
|
}, /*#__PURE__*/_react2.default.createElement(_SystemIcons.Search, {
|
|
94
105
|
size: "24px"
|
|
95
|
-
}))), /*#__PURE__*/_react2.default.createElement(
|
|
96
|
-
placeholder: disabled ? '' : placeholder,
|
|
97
|
-
ref: inputRef,
|
|
98
|
-
id: id,
|
|
99
|
-
size: size,
|
|
100
|
-
disabled: disabled,
|
|
101
|
-
setTabbedHere: setTabbedHere,
|
|
102
|
-
setSearchTerm: term => setSearchTerm(term),
|
|
103
|
-
searchTerm: searchTerm,
|
|
104
|
-
onKeyDown: onKeyDown,
|
|
105
|
-
enterSearch: enterSearch
|
|
106
|
-
}), /*#__PURE__*/_react2.default.createElement(ClearIconWrapper, {
|
|
106
|
+
}))), /*#__PURE__*/_react2.default.createElement(ClearIconWrapper, {
|
|
107
107
|
className: (size ? size : '').concat(!searchTerm ? ' hidden' : '')
|
|
108
108
|
}, /*#__PURE__*/_react2.default.createElement(_Button.IconButton, {
|
|
109
109
|
id: `${id}_Clear`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","margin","ClearIconWrapper","styled","div","SearchBar","inputRef","React","isPressingEnter","e","size","term","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,QAAMW,gBAAgB,GAAGC,2BAAOC,GAAI;AACpC;AACA;AACA;AACA;AACA;AACA;AANA,CAAA;;AASA,QAAMC,SAAiD,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,aAAA;AAAA,IAAA,WAAA;AAAA,IAAA,YAAA;AAAA,IAAA,WAAA;AAAA,IAAA,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAA,iBAAA;AAAA,IAAA,SAAA;AAAA,IAAA,IAAA;AAYzDJ,IAAAA,MAAM,GAAG;AAZgD,GAAD,KAapD;AACJ,UAAMK,QAAQ,GAAGC,gBAAAA,MAAAA,CAAjB,IAAiBA,CAAjB;;AACA,UAAM,CAAA,UAAA,EAAA,aAAA,IAA8BA,gBAAAA,QAAAA,CAApC,KAAoCA,CAApC;;AAEA,UAAMC,eAAe,GAAIC,CAAD,IAAY;AAClC,UAAIA,CAAC,CAADA,GAAAA,KAAJ,OAAA,EAAuB;AACrBA,QAAAA,CAAC,CAADA,cAAAA;AACAA,QAAAA,CAAC,CAADA,eAAAA;AACA,eAAA,IAAA;AACD;;AACD,aAAA,KAAA;AANF,KAAA;;AASA,WAAA,aACE,gBAAA,aAAA,CAAA,gBAAA,QAAA,EAAA,IAAA,EAAA,aACE,gBAAA,aAAA,CAAA,qBAAA,EAAA;AACE,MAAA,QAAQ,EADV,QAAA;AAEE,MAAA,MAAM,EAAER;AAFV,KAAA,EAAA,aAGE,gBAAA,aAAA,CAAA,qBAAA,EAAA;AAAa,MAAA,EAAE,EAAG,GAAEV,EAApB,OAAA;AAA+B,MAAA,IAAI,EAAEmB,IAAI,IAAzC,EAAA;AAAiD,MAAA,UAAU,EAA3D,UAAA;AAAyE,MAAA,QAAQ,EAAjF,QAAA;AAA6F,MAAA,UAAU,EAAvG,UAAA;AAAqH,MAAA,iBAAiB,EAAEX;AAAxI,KAAA,EAAA,aACE,gBAAA,aAAA,CAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","margin","ClearIconWrapper","styled","div","SearchBar","inputRef","React","isPressingEnter","e","size","term","COLORS"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport { Size } from '../types';\nimport styled from 'styled-components';\n\ntype SeachBarProps = {\n id: string;\n searchTerm?: string;\n setSearchTerm: (term: string) => void;\n enterSearch: (e: any) => void;\n removeSearch: (e: any) => void;\n placeholder?: string;\n performSearchLabel?: string;\n disabled?: boolean;\n validationMessage?: string;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n size?: Size.Small | Size.Medium;\n margin?: string;\n};\n\nconst ClearIconWrapper = styled.div`\n display: flex;\n align-items: center;\n \n &.hidden{\n display: none !important;\n }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n id,\n searchTerm,\n setSearchTerm,\n enterSearch,\n removeSearch,\n placeholder,\n performSearchLabel,\n disabled,\n validationMessage,\n onKeyDown,\n size,\n margin = '4px 0',\n}) => {\n const inputRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n return (\n <>\n <InputWrapper\n disabled={disabled}\n margin={margin}>\n <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\n <SearchBarInput\n placeholder={disabled ? '' : placeholder}\n ref={inputRef}\n id={id}\n size={size}\n disabled={disabled}\n setTabbedHere={setTabbedHere}\n setSearchTerm={(term: string) => setSearchTerm(term)}\n searchTerm={searchTerm}\n onKeyDown={onKeyDown}\n enterSearch={enterSearch}\n />\n <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n <IconButton id={`${id}_Search`}\n variant=\"secondary\"\n shape=\"circular\"\n action={enterSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n <SearchIcon size=\"24px\"/>\n </IconButton>\n </SearchIconWrapper>\n <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n <IconButton id={`${id}_Clear`}\n variant=\"secondary\"\n shape=\"circular\"\n action={removeSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n <ClearIcon size=\"24px\"/>\n </IconButton>\n </ClearIconWrapper>\n </SearchField>\n </InputWrapper>\n {validationMessage && (\n <WarningMessage className={size || ''}>\n <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\n <span>{validationMessage}</span>\n </WarningMessage>\n )}\n </>\n );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}
|