@activecollab/components 1.0.108 → 1.0.111
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Checkbox/Styles.js +1 -1
- package/dist/cjs/components/Checkbox/Styles.js.map +1 -1
- package/dist/cjs/components/Select/OptionContent/OptionContent.js +1 -1
- package/dist/cjs/components/Select/OptionContent/OptionContent.js.map +1 -1
- package/dist/cjs/components/Select/OptionContent/Styles.js +13 -5
- package/dist/cjs/components/Select/OptionContent/Styles.js.map +1 -1
- package/dist/esm/components/Checkbox/Styles.d.ts.map +1 -1
- package/dist/esm/components/Checkbox/Styles.js +1 -1
- package/dist/esm/components/Checkbox/Styles.js.map +1 -1
- package/dist/esm/components/Select/OptionContent/OptionContent.d.ts.map +1 -1
- package/dist/esm/components/Select/OptionContent/OptionContent.js +2 -2
- package/dist/esm/components/Select/OptionContent/OptionContent.js.map +1 -1
- package/dist/esm/components/Select/OptionContent/Styles.d.ts +1 -0
- package/dist/esm/components/Select/OptionContent/Styles.d.ts.map +1 -1
- package/dist/esm/components/Select/OptionContent/Styles.js +9 -4
- package/dist/esm/components/Select/OptionContent/Styles.js.map +1 -1
- package/dist/index.js +11 -6
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -33,7 +33,7 @@ var StyledCheckbox = _styledComponents.default.div.withConfig({
|
|
|
33
33
|
displayName: "Styles__StyledCheckbox",
|
|
34
34
|
componentId: "sc-y7zymm-2"
|
|
35
35
|
})(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}rect{transition-duration:0.2s;stroke:var(--color-theme-500);}", ":disabled ~ ", "{pointer-events:none;opacity:0.5;}", ":focus ~ ", "{rect{stroke:var(--color-secondary);stroke-width:3px;}}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}", " ", ":checked ~ ", "{path{stroke:var(--page-paper-main);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:19px;}}"], StyledInput, StyledLabel, StyledInput, StyledLabel, StyledInput, StyledLabel, function (props) {
|
|
36
|
-
return props.hover && (0, _styledComponents.css)(["", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}"], StyledLabel);
|
|
36
|
+
return props.hover && (0, _styledComponents.css)(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput, StyledLabel);
|
|
37
37
|
}, StyledInput, StyledLabel);
|
|
38
38
|
|
|
39
39
|
exports.StyledCheckbox = StyledCheckbox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Checkbox/Styles.ts"],"names":["StyledInput","styled","input","displayName","StyledLabel","label","StyledCheckbox","div","props","hover","css"],"mappings":";;;;;;;;;AAAA;;;;;;AAGO,IAAMA,WAAW,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,qBAAjB;;;AAGPF,WAAW,CAACG,WAAZ,GAA0B,aAA1B;;AAEO,IAAMC,WAAW,GAAGH,0BAAOI,KAAV;AAAA;AAAA;AAAA,QAAjB;;;AACPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;;AAEO,IAAMG,cAAc,GAAGL,0BAAOM,GAAV;AAAA;AAAA;AAAA,quBAsBvBP,WAtBuB,EAsBGI,WAtBH,EA2BvBJ,WA3BuB,EA2BAI,WA3BA,EAmCrBJ,WAnCqB,EAoCnBI,WApCmB,EA+CvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAC,qBADA
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Checkbox/Styles.ts"],"names":["StyledInput","styled","input","displayName","StyledLabel","label","StyledCheckbox","div","props","hover","css"],"mappings":";;;;;;;;;AAAA;;;;;;AAGO,IAAMA,WAAW,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,qBAAjB;;;AAGPF,WAAW,CAACG,WAAZ,GAA0B,aAA1B;;AAEO,IAAMC,WAAW,GAAGH,0BAAOI,KAAV;AAAA;AAAA;AAAA,QAAjB;;;AACPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;;AAEO,IAAMG,cAAc,GAAGL,0BAAOM,GAAV;AAAA;AAAA;AAAA,quBAsBvBP,WAtBuB,EAsBGI,WAtBH,EA2BvBJ,WA3BuB,EA2BAI,WA3BA,EAmCrBJ,WAnCqB,EAoCnBI,WApCmB,EA+CvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAC,qBADA,qJAEIV,WAFJ,EAEmCI,WAFnC,CADA;AAAA,CA/CuB,EA8DvBJ,WA9DuB,EA8DEI,WA9DF,CAApB;;;AAyEPE,cAAc,CAACH,WAAf,GAA6B,gBAA7B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ICheckboxProps } from \"./Checkbox\";\n\nexport const StyledInput = styled.input`\n display: none;\n`;\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledLabel = styled.label``;\nStyledLabel.displayName = \"StyledLabel\";\n\nexport const StyledCheckbox = styled.div<ICheckboxProps>`\n height: 16px;\n width: 16px;\n position: relative;\n transition-duration: 0.2s;\n border-radius: 2px;\n path {\n transition-duration: 0.2s;\n stroke: transparent;\n stroke-dashoffset: 12;\n stroke-dasharray: 12;\n }\n svg {\n cursor: pointer;\n border-radius: 2px;\n fill: transparent;\n }\n rect {\n transition-duration: 0.2s;\n stroke: var(--color-theme-500);\n }\n\n ${StyledInput}:disabled ~ ${StyledLabel} {\n pointer-events: none;\n opacity: 0.5;\n }\n\n ${StyledInput}:focus ~ ${StyledLabel} {\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n\n &:not(.c-checkbox__controlled)\n ${StyledInput}:hover:not(:checked)\n ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n\n ${(props) =>\n props.hover &&\n css`\n ${StyledInput}:not(:checked) ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n `}\n\n ${StyledInput}:checked ~ ${StyledLabel} {\n path {\n stroke: var(--page-paper-main);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 19px;\n }\n }\n`;\nStyledCheckbox.displayName = \"StyledCheckbox\";\n"],"file":"Styles.js"}
|
|
@@ -19,7 +19,7 @@ var OptionContent = function OptionContent(_ref) {
|
|
|
19
19
|
textColor = _ref.textColor,
|
|
20
20
|
name = _ref.name,
|
|
21
21
|
additionalInfo = _ref.additionalInfo;
|
|
22
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionContentWrapper, null, imageUrl || color ? /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionIndicator, {
|
|
23
23
|
className: "c-option--label",
|
|
24
24
|
backgroundColor: color
|
|
25
25
|
}, imageUrl ? /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":["OptionContent","imageUrl","color","textColor","name","additionalInfo","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":["OptionContent","imageUrl","color","textColor","name","additionalInfo","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAeO,IAAMA,aAAqC,GAAG,SAAxCA,aAAwC,OAM/C;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADJC,cACI,QADJA,cACI;AACJ,sBACE,6BAAC,kCAAD,QACGJ,QAAQ,IAAIC,KAAZ,gBACC,6BAAC,6BAAD;AACE,IAAA,SAAS,EAAC,iBADZ;AAEE,IAAA,eAAe,EAAEA;AAFnB,KAIGD,QAAQ,gBACP,6BAAC,cAAD;AAAQ,IAAA,SAAS,EAAC,kBAAlB;AAAqC,IAAA,GAAG,EAAEA;AAA1C,IADO,GAEL,IANN,CADD,GASG,IAVN,eAWE,6BAAC,wBAAD;AAAkB,IAAA,SAAS,EAAC,gBAA5B;AAA6C,IAAA,SAAS,EAAEE;AAAxD,KACGC,IADH,CAXF,EAcGC,cAAc,gBACb,6BAAC,4BAAD,QAAuBA,cAAvB,CADa,GAEX,IAhBN,CADF;AAoBD,CA3BM;;;AA6BPL,aAAa,CAACM,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { FC } from \"react\";\nimport { Avatar } from \"../../Avatar/Avatar\";\nimport {\n StyledOptionIndicator,\n StyledOptionText,\n StyledAdditionalInfo,\n StyledOptionContentWrapper,\n} from \"./Styles\";\n\ninterface OptionContentProps {\n imageUrl?: string;\n color?: string;\n textColor?: string;\n name: string;\n additionalInfo?: string;\n}\n\nexport const OptionContent: FC<OptionContentProps> = ({\n imageUrl,\n color,\n textColor,\n name,\n additionalInfo,\n}) => {\n return (\n <StyledOptionContentWrapper>\n {imageUrl || color ? (\n <StyledOptionIndicator\n className=\"c-option--label\"\n backgroundColor={color}\n >\n {imageUrl ? (\n <Avatar className=\"c-option--avatar\" url={imageUrl} />\n ) : null}\n </StyledOptionIndicator>\n ) : null}\n <StyledOptionText className=\"c-option--text\" textColor={textColor}>\n {name}\n </StyledOptionText>\n {additionalInfo ? (\n <StyledAdditionalInfo>{additionalInfo}</StyledAdditionalInfo>\n ) : null}\n </StyledOptionContentWrapper>\n );\n};\n\nOptionContent.displayName = \"OptionContent\";\n"],"file":"OptionContent.js"}
|
|
@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.StyledOptionText = exports.StyledOptionIndicator = exports.StyledAdditionalInfo = void 0;
|
|
8
|
+
exports.StyledOptionText = exports.StyledOptionIndicator = exports.StyledOptionContentWrapper = exports.StyledAdditionalInfo = void 0;
|
|
9
9
|
|
|
10
10
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
11
|
|
|
@@ -13,9 +13,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
13
13
|
|
|
14
14
|
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; }
|
|
15
15
|
|
|
16
|
+
var StyledOptionContentWrapper = _styledComponents.default.div.withConfig({
|
|
17
|
+
displayName: "Styles__StyledOptionContentWrapper",
|
|
18
|
+
componentId: "sc-6fiqyy-0"
|
|
19
|
+
})(["display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;"]);
|
|
20
|
+
|
|
21
|
+
exports.StyledOptionContentWrapper = StyledOptionContentWrapper;
|
|
22
|
+
StyledOptionContentWrapper.displayName = "StyledOptionContentWrapper";
|
|
23
|
+
|
|
16
24
|
var StyledOptionIndicator = _styledComponents.default.div.withConfig({
|
|
17
25
|
displayName: "Styles__StyledOptionIndicator",
|
|
18
|
-
componentId: "sc-6fiqyy-
|
|
26
|
+
componentId: "sc-6fiqyy-1"
|
|
19
27
|
})(["height:24px;width:24px;border-radius:100%;margin-right:8px;flex-shrink:0;", ""], function (props) {
|
|
20
28
|
return props.backgroundColor && !props.children && (0, _styledComponents.css)(["background-color:", ";"], props.backgroundColor);
|
|
21
29
|
});
|
|
@@ -25,7 +33,7 @@ StyledOptionIndicator.displayName = "StyledOptionIndicator";
|
|
|
25
33
|
|
|
26
34
|
var StyledOptionText = _styledComponents.default.span.withConfig({
|
|
27
35
|
displayName: "Styles__StyledOptionText",
|
|
28
|
-
componentId: "sc-6fiqyy-
|
|
36
|
+
componentId: "sc-6fiqyy-2"
|
|
29
37
|
})(["", " flex-grow:1;line-height:18px;", ""], {
|
|
30
38
|
"overflow": "hidden",
|
|
31
39
|
"textOverflow": "ellipsis",
|
|
@@ -39,8 +47,8 @@ StyledOptionText.displayName = "StyledOptionText";
|
|
|
39
47
|
|
|
40
48
|
var StyledAdditionalInfo = _styledComponents.default.span.withConfig({
|
|
41
49
|
displayName: "Styles__StyledAdditionalInfo",
|
|
42
|
-
componentId: "sc-6fiqyy-
|
|
43
|
-
})(["margin:0 0 0 5px;line-height:18px;"]);
|
|
50
|
+
componentId: "sc-6fiqyy-3"
|
|
51
|
+
})(["margin:0 0 0 5px;line-height:18px;flex-shrink:0;"]);
|
|
44
52
|
|
|
45
53
|
exports.StyledAdditionalInfo = StyledAdditionalInfo;
|
|
46
54
|
StyledAdditionalInfo.displayName = "StyledAdditionalInfo";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["StyledOptionContentWrapper","styled","div","displayName","StyledOptionIndicator","props","backgroundColor","children","css","StyledOptionText","span","textColor","StyledAdditionalInfo"],"mappings":";;;;;;;;;AAAA;;;;;;AAGO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,kGAAhC;;;AAQPF,0BAA0B,CAACG,WAA3B,GAAyC,4BAAzC;;AAEO,IAAMC,qBAAqB,GAAGH,0BAAOC,GAAV;AAAA;AAAA;AAAA,sFAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,eAAN,IACA,CAACD,KAAK,CAACE,QADP,QAEAC,qBAFA,8BAGsBH,KAAK,CAACC,eAH5B,CADA;AAAA,CAN8B,CAA3B;;;AAcPF,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;;AAEO,IAAMM,gBAAgB,GAAGR,0BAAOS,IAAV;AAAA;AAAA;AAAA,+CACvB;AAAA;AAAA;AAAA;AAAA,CADuB,EAIzB,UAACL,KAAD;AAAA,SACAA,KAAK,CAACM,SAAN,QACAH,qBADA,mBAEWH,KAAK,CAACM,SAFjB,CADA;AAAA,CAJyB,CAAtB;;;AAWPF,gBAAgB,CAACN,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMS,oBAAoB,GAAGX,0BAAOS,IAAV;AAAA;AAAA;AAAA,wDAA1B;;;AAMPE,oBAAoB,CAACT,WAArB,GAAmC,sBAAnC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nexport const StyledOptionContentWrapper = styled.div`\n display: flex;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n align-items: center;\n`;\n\nStyledOptionContentWrapper.displayName = \"StyledOptionContentWrapper\";\n\nexport const StyledOptionIndicator = styled.div<{ backgroundColor?: string }>`\n height: 24px;\n width: 24px;\n border-radius: 100%;\n margin-right: 8px;\n flex-shrink: 0;\n ${(props) =>\n props.backgroundColor &&\n !props.children &&\n css`\n background-color: ${props.backgroundColor};\n `}\n`;\n\nStyledOptionIndicator.displayName = \"StyledOptionIndicator\";\n\nexport const StyledOptionText = styled.span<{ textColor?: string }>`\n ${tw`tw-truncate`}\n flex-grow: 1;\n line-height: 18px;\n ${(props) =>\n props.textColor &&\n css`\n color: ${props.textColor};\n `}\n`;\n\nStyledOptionText.displayName = \"StyledOptionText\";\n\nexport const StyledAdditionalInfo = styled.span`\n margin: 0 0 0 5px;\n line-height: 18px;\n flex-shrink: 0;\n`;\n\nStyledAdditionalInfo.displayName = \"StyledAdditionalInfo\";\n"],"file":"Styles.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,eAAO,MAAM,WAAW,sEAEvB,CAAC;AAGF,eAAO,MAAM,WAAW,sEAAiB,CAAC;AAG1C,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,eAAO,MAAM,WAAW,sEAEvB,CAAC;AAGF,eAAO,MAAM,WAAW,sEAAiB,CAAC;AAG1C,eAAO,MAAM,cAAc,gFAwE1B,CAAC"}
|
|
@@ -13,7 +13,7 @@ export var StyledCheckbox = styled.div.withConfig({
|
|
|
13
13
|
displayName: "Styles__StyledCheckbox",
|
|
14
14
|
componentId: "sc-y7zymm-2"
|
|
15
15
|
})(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}rect{transition-duration:0.2s;stroke:var(--color-theme-500);}", ":disabled ~ ", "{pointer-events:none;opacity:0.5;}", ":focus ~ ", "{rect{stroke:var(--color-secondary);stroke-width:3px;}}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}", " ", ":checked ~ ", "{path{stroke:var(--page-paper-main);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:19px;}}"], StyledInput, StyledLabel, StyledInput, StyledLabel, StyledInput, StyledLabel, function (props) {
|
|
16
|
-
return props.hover && css(["", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}"], StyledLabel);
|
|
16
|
+
return props.hover && css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput, StyledLabel);
|
|
17
17
|
}, StyledInput, StyledLabel);
|
|
18
18
|
StyledCheckbox.displayName = "StyledCheckbox";
|
|
19
19
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Checkbox/Styles.ts"],"names":["styled","css","StyledInput","input","displayName","StyledLabel","label","StyledCheckbox","div","props","hover"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,OAAO,IAAMC,WAAW,GAAGF,MAAM,CAACG,KAAV;AAAA;AAAA;AAAA,qBAAjB;AAGPD,WAAW,CAACE,WAAZ,GAA0B,aAA1B;AAEA,OAAO,IAAMC,WAAW,GAAGL,MAAM,CAACM,KAAV;AAAA;AAAA;AAAA,QAAjB;AACPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;AAEA,OAAO,IAAMG,cAAc,GAAGP,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,quBAsBvBN,WAtBuB,EAsBGG,WAtBH,EA2BvBH,WA3BuB,EA2BAG,WA3BA,EAmCrBH,WAnCqB,EAoCnBG,WApCmB,EA+CvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,IACAT,GADA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Checkbox/Styles.ts"],"names":["styled","css","StyledInput","input","displayName","StyledLabel","label","StyledCheckbox","div","props","hover"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,OAAO,IAAMC,WAAW,GAAGF,MAAM,CAACG,KAAV;AAAA;AAAA;AAAA,qBAAjB;AAGPD,WAAW,CAACE,WAAZ,GAA0B,aAA1B;AAEA,OAAO,IAAMC,WAAW,GAAGL,MAAM,CAACM,KAAV;AAAA;AAAA;AAAA,QAAjB;AACPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;AAEA,OAAO,IAAMG,cAAc,GAAGP,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,quBAsBvBN,WAtBuB,EAsBGG,WAtBH,EA2BvBH,WA3BuB,EA2BAG,WA3BA,EAmCrBH,WAnCqB,EAoCnBG,WApCmB,EA+CvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,IACAT,GADA,oJAEIC,WAFJ,EAEmCG,WAFnC,CADA;AAAA,CA/CuB,EA8DvBH,WA9DuB,EA8DEG,WA9DF,CAApB;AAyEPE,cAAc,CAACH,WAAf,GAA6B,gBAA7B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ICheckboxProps } from \"./Checkbox\";\n\nexport const StyledInput = styled.input`\n display: none;\n`;\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledLabel = styled.label``;\nStyledLabel.displayName = \"StyledLabel\";\n\nexport const StyledCheckbox = styled.div<ICheckboxProps>`\n height: 16px;\n width: 16px;\n position: relative;\n transition-duration: 0.2s;\n border-radius: 2px;\n path {\n transition-duration: 0.2s;\n stroke: transparent;\n stroke-dashoffset: 12;\n stroke-dasharray: 12;\n }\n svg {\n cursor: pointer;\n border-radius: 2px;\n fill: transparent;\n }\n rect {\n transition-duration: 0.2s;\n stroke: var(--color-theme-500);\n }\n\n ${StyledInput}:disabled ~ ${StyledLabel} {\n pointer-events: none;\n opacity: 0.5;\n }\n\n ${StyledInput}:focus ~ ${StyledLabel} {\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n\n &:not(.c-checkbox__controlled)\n ${StyledInput}:hover:not(:checked)\n ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n\n ${(props) =>\n props.hover &&\n css`\n ${StyledInput}:not(:checked) ~ ${StyledLabel} {\n path {\n stroke: var(--color-secondary-500);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 3px;\n }\n }\n `}\n\n ${StyledInput}:checked ~ ${StyledLabel} {\n path {\n stroke: var(--page-paper-main);\n stroke-dashoffset: 24;\n }\n rect {\n stroke: var(--color-secondary);\n stroke-width: 19px;\n }\n }\n`;\nStyledCheckbox.displayName = \"StyledCheckbox\";\n"],"file":"Styles.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"OptionContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AASlC,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2BhD,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Avatar } from "../../Avatar/Avatar";
|
|
3
|
-
import { StyledOptionIndicator, StyledOptionText, StyledAdditionalInfo } from "./Styles";
|
|
3
|
+
import { StyledOptionIndicator, StyledOptionText, StyledAdditionalInfo, StyledOptionContentWrapper } from "./Styles";
|
|
4
4
|
export var OptionContent = function OptionContent(_ref) {
|
|
5
5
|
var imageUrl = _ref.imageUrl,
|
|
6
6
|
color = _ref.color,
|
|
7
7
|
textColor = _ref.textColor,
|
|
8
8
|
name = _ref.name,
|
|
9
9
|
additionalInfo = _ref.additionalInfo;
|
|
10
|
-
return /*#__PURE__*/React.createElement(
|
|
10
|
+
return /*#__PURE__*/React.createElement(StyledOptionContentWrapper, null, imageUrl || color ? /*#__PURE__*/React.createElement(StyledOptionIndicator, {
|
|
11
11
|
className: "c-option--label",
|
|
12
12
|
backgroundColor: color
|
|
13
13
|
}, imageUrl ? /*#__PURE__*/React.createElement(Avatar, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":["React","Avatar","StyledOptionIndicator","StyledOptionText","StyledAdditionalInfo","OptionContent","imageUrl","color","textColor","name","additionalInfo","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAA0B,OAA1B;AACA,SAASC,MAAT,QAAuB,qBAAvB;AACA,SACEC,qBADF,EAEEC,gBAFF,EAGEC,oBAHF,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":["React","Avatar","StyledOptionIndicator","StyledOptionText","StyledAdditionalInfo","StyledOptionContentWrapper","OptionContent","imageUrl","color","textColor","name","additionalInfo","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAA0B,OAA1B;AACA,SAASC,MAAT,QAAuB,qBAAvB;AACA,SACEC,qBADF,EAEEC,gBAFF,EAGEC,oBAHF,EAIEC,0BAJF,QAKO,UALP;AAeA,OAAO,IAAMC,aAAqC,GAAG,SAAxCA,aAAwC,OAM/C;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADJC,cACI,QADJA,cACI;AACJ,sBACE,oBAAC,0BAAD,QACGJ,QAAQ,IAAIC,KAAZ,gBACC,oBAAC,qBAAD;AACE,IAAA,SAAS,EAAC,iBADZ;AAEE,IAAA,eAAe,EAAEA;AAFnB,KAIGD,QAAQ,gBACP,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAC,kBAAlB;AAAqC,IAAA,GAAG,EAAEA;AAA1C,IADO,GAEL,IANN,CADD,GASG,IAVN,eAWE,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAC,gBAA5B;AAA6C,IAAA,SAAS,EAAEE;AAAxD,KACGC,IADH,CAXF,EAcGC,cAAc,gBACb,oBAAC,oBAAD,QAAuBA,cAAvB,CADa,GAEX,IAhBN,CADF;AAoBD,CA3BM;AA6BPL,aAAa,CAACM,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { FC } from \"react\";\nimport { Avatar } from \"../../Avatar/Avatar\";\nimport {\n StyledOptionIndicator,\n StyledOptionText,\n StyledAdditionalInfo,\n StyledOptionContentWrapper,\n} from \"./Styles\";\n\ninterface OptionContentProps {\n imageUrl?: string;\n color?: string;\n textColor?: string;\n name: string;\n additionalInfo?: string;\n}\n\nexport const OptionContent: FC<OptionContentProps> = ({\n imageUrl,\n color,\n textColor,\n name,\n additionalInfo,\n}) => {\n return (\n <StyledOptionContentWrapper>\n {imageUrl || color ? (\n <StyledOptionIndicator\n className=\"c-option--label\"\n backgroundColor={color}\n >\n {imageUrl ? (\n <Avatar className=\"c-option--avatar\" url={imageUrl} />\n ) : null}\n </StyledOptionIndicator>\n ) : null}\n <StyledOptionText className=\"c-option--text\" textColor={textColor}>\n {name}\n </StyledOptionText>\n {additionalInfo ? (\n <StyledAdditionalInfo>{additionalInfo}</StyledAdditionalInfo>\n ) : null}\n </StyledOptionContentWrapper>\n );\n};\n\nOptionContent.displayName = \"OptionContent\";\n"],"file":"OptionContent.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB;;SAYjC,CAAC;AAIF,eAAO,MAAM,gBAAgB;;SAS5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B,oEAMtC,CAAC;AAIF,eAAO,MAAM,qBAAqB;;SAYjC,CAAC;AAIF,eAAO,MAAM,gBAAgB;;SAS5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAIhC,CAAC"}
|
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
|
+
export var StyledOptionContentWrapper = styled.div.withConfig({
|
|
3
|
+
displayName: "Styles__StyledOptionContentWrapper",
|
|
4
|
+
componentId: "sc-6fiqyy-0"
|
|
5
|
+
})(["display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;"]);
|
|
6
|
+
StyledOptionContentWrapper.displayName = "StyledOptionContentWrapper";
|
|
2
7
|
export var StyledOptionIndicator = styled.div.withConfig({
|
|
3
8
|
displayName: "Styles__StyledOptionIndicator",
|
|
4
|
-
componentId: "sc-6fiqyy-
|
|
9
|
+
componentId: "sc-6fiqyy-1"
|
|
5
10
|
})(["height:24px;width:24px;border-radius:100%;margin-right:8px;flex-shrink:0;", ""], function (props) {
|
|
6
11
|
return props.backgroundColor && !props.children && css(["background-color:", ";"], props.backgroundColor);
|
|
7
12
|
});
|
|
8
13
|
StyledOptionIndicator.displayName = "StyledOptionIndicator";
|
|
9
14
|
export var StyledOptionText = styled.span.withConfig({
|
|
10
15
|
displayName: "Styles__StyledOptionText",
|
|
11
|
-
componentId: "sc-6fiqyy-
|
|
16
|
+
componentId: "sc-6fiqyy-2"
|
|
12
17
|
})(["", " flex-grow:1;line-height:18px;", ""], {
|
|
13
18
|
"overflow": "hidden",
|
|
14
19
|
"textOverflow": "ellipsis",
|
|
@@ -19,7 +24,7 @@ export var StyledOptionText = styled.span.withConfig({
|
|
|
19
24
|
StyledOptionText.displayName = "StyledOptionText";
|
|
20
25
|
export var StyledAdditionalInfo = styled.span.withConfig({
|
|
21
26
|
displayName: "Styles__StyledAdditionalInfo",
|
|
22
|
-
componentId: "sc-6fiqyy-
|
|
23
|
-
})(["margin:0 0 0 5px;line-height:18px;"]);
|
|
27
|
+
componentId: "sc-6fiqyy-3"
|
|
28
|
+
})(["margin:0 0 0 5px;line-height:18px;flex-shrink:0;"]);
|
|
24
29
|
StyledAdditionalInfo.displayName = "StyledAdditionalInfo";
|
|
25
30
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["styled","css","
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["styled","css","StyledOptionContentWrapper","div","displayName","StyledOptionIndicator","props","backgroundColor","children","StyledOptionText","span","textColor","StyledAdditionalInfo"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,OAAO,IAAMC,0BAA0B,GAAGF,MAAM,CAACG,GAAV;AAAA;AAAA;AAAA,kGAAhC;AAQPD,0BAA0B,CAACE,WAA3B,GAAyC,4BAAzC;AAEA,OAAO,IAAMC,qBAAqB,GAAGL,MAAM,CAACG,GAAV;AAAA;AAAA;AAAA,sFAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,eAAN,IACA,CAACD,KAAK,CAACE,QADP,IAEAP,GAFA,6BAGsBK,KAAK,CAACC,eAH5B,CADA;AAAA,CAN8B,CAA3B;AAcPF,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEA,OAAO,IAAMK,gBAAgB,GAAGT,MAAM,CAACU,IAAV;AAAA;AAAA;AAAA,+CACvB;AAAA;AAAA;AAAA;AAAA,CADuB,EAIzB,UAACJ,KAAD;AAAA,SACAA,KAAK,CAACK,SAAN,IACAV,GADA,kBAEWK,KAAK,CAACK,SAFjB,CADA;AAAA,CAJyB,CAAtB;AAWPF,gBAAgB,CAACL,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMQ,oBAAoB,GAAGZ,MAAM,CAACU,IAAV;AAAA;AAAA;AAAA,wDAA1B;AAMPE,oBAAoB,CAACR,WAArB,GAAmC,sBAAnC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nexport const StyledOptionContentWrapper = styled.div`\n display: flex;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n align-items: center;\n`;\n\nStyledOptionContentWrapper.displayName = \"StyledOptionContentWrapper\";\n\nexport const StyledOptionIndicator = styled.div<{ backgroundColor?: string }>`\n height: 24px;\n width: 24px;\n border-radius: 100%;\n margin-right: 8px;\n flex-shrink: 0;\n ${(props) =>\n props.backgroundColor &&\n !props.children &&\n css`\n background-color: ${props.backgroundColor};\n `}\n`;\n\nStyledOptionIndicator.displayName = \"StyledOptionIndicator\";\n\nexport const StyledOptionText = styled.span<{ textColor?: string }>`\n ${tw`tw-truncate`}\n flex-grow: 1;\n line-height: 18px;\n ${(props) =>\n props.textColor &&\n css`\n color: ${props.textColor};\n `}\n`;\n\nStyledOptionText.displayName = \"StyledOptionText\";\n\nexport const StyledAdditionalInfo = styled.span`\n margin: 0 0 0 5px;\n line-height: 18px;\n flex-shrink: 0;\n`;\n\nStyledAdditionalInfo.displayName = \"StyledAdditionalInfo\";\n"],"file":"Styles.js"}
|
package/dist/index.js
CHANGED
|
@@ -6147,7 +6147,7 @@
|
|
|
6147
6147
|
displayName: "Styles__StyledCheckbox",
|
|
6148
6148
|
componentId: "sc-y7zymm-2"
|
|
6149
6149
|
})(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}rect{transition-duration:0.2s;stroke:var(--color-theme-500);}", ":disabled ~ ", "{pointer-events:none;opacity:0.5;}", ":focus ~ ", "{rect{stroke:var(--color-secondary);stroke-width:3px;}}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}", " ", ":checked ~ ", "{path{stroke:var(--page-paper-main);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:19px;}}"], StyledInput$1, StyledLabel, StyledInput$1, StyledLabel, StyledInput$1, StyledLabel, function (props) {
|
|
6150
|
-
return props.hover && styled.css(["", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}"], StyledLabel);
|
|
6150
|
+
return props.hover && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$1, StyledLabel);
|
|
6151
6151
|
}, StyledInput$1, StyledLabel);
|
|
6152
6152
|
StyledCheckbox$1.displayName = "StyledCheckbox";
|
|
6153
6153
|
|
|
@@ -7046,16 +7046,21 @@
|
|
|
7046
7046
|
})(["margin-left:12px;"]);
|
|
7047
7047
|
StyledRadioButton.displayName = "StyledRadioButton";
|
|
7048
7048
|
|
|
7049
|
+
var StyledOptionContentWrapper = styled__default["default"].div.withConfig({
|
|
7050
|
+
displayName: "Styles__StyledOptionContentWrapper",
|
|
7051
|
+
componentId: "sc-6fiqyy-0"
|
|
7052
|
+
})(["display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;"]);
|
|
7053
|
+
StyledOptionContentWrapper.displayName = "StyledOptionContentWrapper";
|
|
7049
7054
|
var StyledOptionIndicator = styled__default["default"].div.withConfig({
|
|
7050
7055
|
displayName: "Styles__StyledOptionIndicator",
|
|
7051
|
-
componentId: "sc-6fiqyy-
|
|
7056
|
+
componentId: "sc-6fiqyy-1"
|
|
7052
7057
|
})(["height:24px;width:24px;border-radius:100%;margin-right:8px;flex-shrink:0;", ""], function (props) {
|
|
7053
7058
|
return props.backgroundColor && !props.children && styled.css(["background-color:", ";"], props.backgroundColor);
|
|
7054
7059
|
});
|
|
7055
7060
|
StyledOptionIndicator.displayName = "StyledOptionIndicator";
|
|
7056
7061
|
var StyledOptionText = styled__default["default"].span.withConfig({
|
|
7057
7062
|
displayName: "Styles__StyledOptionText",
|
|
7058
|
-
componentId: "sc-6fiqyy-
|
|
7063
|
+
componentId: "sc-6fiqyy-2"
|
|
7059
7064
|
})(["", " flex-grow:1;line-height:18px;", ""], {
|
|
7060
7065
|
"overflow": "hidden",
|
|
7061
7066
|
"textOverflow": "ellipsis",
|
|
@@ -7066,8 +7071,8 @@
|
|
|
7066
7071
|
StyledOptionText.displayName = "StyledOptionText";
|
|
7067
7072
|
var StyledAdditionalInfo = styled__default["default"].span.withConfig({
|
|
7068
7073
|
displayName: "Styles__StyledAdditionalInfo",
|
|
7069
|
-
componentId: "sc-6fiqyy-
|
|
7070
|
-
})(["margin:0 0 0 5px;line-height:18px;"]);
|
|
7074
|
+
componentId: "sc-6fiqyy-3"
|
|
7075
|
+
})(["margin:0 0 0 5px;line-height:18px;flex-shrink:0;"]);
|
|
7071
7076
|
StyledAdditionalInfo.displayName = "StyledAdditionalInfo";
|
|
7072
7077
|
|
|
7073
7078
|
var OptionContent = function OptionContent(_ref) {
|
|
@@ -7076,7 +7081,7 @@
|
|
|
7076
7081
|
textColor = _ref.textColor,
|
|
7077
7082
|
name = _ref.name,
|
|
7078
7083
|
additionalInfo = _ref.additionalInfo;
|
|
7079
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
7084
|
+
return /*#__PURE__*/React__default["default"].createElement(StyledOptionContentWrapper, null, imageUrl || color ? /*#__PURE__*/React__default["default"].createElement(StyledOptionIndicator, {
|
|
7080
7085
|
className: "c-option--label",
|
|
7081
7086
|
backgroundColor: color
|
|
7082
7087
|
}, imageUrl ? /*#__PURE__*/React__default["default"].createElement(Avatar, {
|