@janiscommerce/ui-web 0.15.0 → 0.17.0
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/CHANGELOG.md +13 -0
- package/dist/index.umd.js +292 -215
- package/dist/index.umd.js.map +1 -1
- package/dist/package.json +1 -1
- package/package.json +2 -2
package/dist/index.umd.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('react-dom')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'react-dom'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$
|
|
5
|
-
})(this, (function (exports, React, styled$
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$g, global.require$$1));
|
|
5
|
+
})(this, (function (exports, React, styled$g, require$$1) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
9
9
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$
|
|
10
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$g);
|
|
11
11
|
var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
|
|
12
12
|
|
|
13
13
|
function _classCallCheck$2(instance, Constructor) {
|
|
@@ -430,25 +430,25 @@
|
|
|
430
430
|
};
|
|
431
431
|
var mediaBreaks = {
|
|
432
432
|
mobile: function mobile() {
|
|
433
|
-
return styled$
|
|
433
|
+
return styled$g.css(["", "{", "}"], devices.mobile, styled$g.css.apply(void 0, arguments));
|
|
434
434
|
},
|
|
435
435
|
tablet: function tablet() {
|
|
436
|
-
return styled$
|
|
436
|
+
return styled$g.css(["", "{", "}"], devices.tablet, styled$g.css.apply(void 0, arguments));
|
|
437
437
|
},
|
|
438
438
|
tabletLg: function tabletLg() {
|
|
439
|
-
return styled$
|
|
439
|
+
return styled$g.css(["", "{", "}"], devices.tabletLg, styled$g.css.apply(void 0, arguments));
|
|
440
440
|
},
|
|
441
441
|
onlyDesktop: function onlyDesktop() {
|
|
442
|
-
return styled$
|
|
442
|
+
return styled$g.css(["", "{", "}"], devices.onlyDesktop, styled$g.css.apply(void 0, arguments));
|
|
443
443
|
},
|
|
444
444
|
desktopSm: function desktopSm() {
|
|
445
|
-
return styled$
|
|
445
|
+
return styled$g.css(["", "{", "}"], devices.desktopSm, styled$g.css.apply(void 0, arguments));
|
|
446
446
|
},
|
|
447
447
|
desktopLg: function desktopLg() {
|
|
448
|
-
return styled$
|
|
448
|
+
return styled$g.css(["", "{", "}"], devices.desktopLg, styled$g.css.apply(void 0, arguments));
|
|
449
449
|
},
|
|
450
450
|
onlyPrint: function onlyPrint() {
|
|
451
|
-
return styled$
|
|
451
|
+
return styled$g.css(["@media print{", "}"], styled$g.css.apply(void 0, arguments));
|
|
452
452
|
}
|
|
453
453
|
};
|
|
454
454
|
|
|
@@ -634,7 +634,7 @@
|
|
|
634
634
|
return imageSizes[size] || imageSizes.small;
|
|
635
635
|
};
|
|
636
636
|
|
|
637
|
-
var styled$
|
|
637
|
+
var styled$f = {
|
|
638
638
|
SkeletonContainer: styled__default["default"].div.withConfig({
|
|
639
639
|
displayName: "styles__SkeletonContainer",
|
|
640
640
|
componentId: "sc-1xnupv9-0"
|
|
@@ -664,7 +664,7 @@
|
|
|
664
664
|
var skeletons = Array.from({
|
|
665
665
|
length: count
|
|
666
666
|
}, function (_, index) {
|
|
667
|
-
return /*#__PURE__*/React__default["default"].createElement(styled$
|
|
667
|
+
return /*#__PURE__*/React__default["default"].createElement(styled$f.SkeletonContainer, {
|
|
668
668
|
key: index,
|
|
669
669
|
width: currentWidth,
|
|
670
670
|
height: currentHeight,
|
|
@@ -681,7 +681,7 @@
|
|
|
681
681
|
width: '100%'
|
|
682
682
|
};
|
|
683
683
|
|
|
684
|
-
var styled$
|
|
684
|
+
var styled$e = {
|
|
685
685
|
Image: styled__default["default"].img.withConfig({
|
|
686
686
|
displayName: "styles__Image",
|
|
687
687
|
componentId: "sc-uljfj3-0"
|
|
@@ -706,9 +706,9 @@
|
|
|
706
706
|
accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
|
|
707
707
|
};
|
|
708
708
|
var mixins = {
|
|
709
|
-
flexCenter: styled$
|
|
709
|
+
flexCenter: styled$g.css(["display:flex;align-items:center;justify-content:center;"]),
|
|
710
710
|
placeholder: function placeholder(styles) {
|
|
711
|
-
return styled$
|
|
711
|
+
return styled$g.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
|
|
712
712
|
},
|
|
713
713
|
transition: function transition() {
|
|
714
714
|
var property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
|
|
@@ -716,14 +716,14 @@
|
|
|
716
716
|
var transitionProperty;
|
|
717
717
|
if (property.includes(',')) transitionProperty = "transition-property: ".concat(property);
|
|
718
718
|
var transition = "".concat(property.split(',')[0], " ").concat(time, " ").concat(timingFunctions.standard);
|
|
719
|
-
return styled$
|
|
719
|
+
return styled$g.css(["transition:", ";", ";"], transition, transitionProperty);
|
|
720
720
|
},
|
|
721
721
|
scrollbar: function scrollbar(thumbColor, shadowColor) {
|
|
722
|
-
return styled$
|
|
722
|
+
return styled$g.css(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || viewsPalette.white, thumbColor);
|
|
723
723
|
}
|
|
724
724
|
};
|
|
725
725
|
|
|
726
|
-
var styled$
|
|
726
|
+
var styled$d = {
|
|
727
727
|
Initials: styled__default["default"].div.withConfig({
|
|
728
728
|
displayName: "styles__Initials",
|
|
729
729
|
componentId: "sc-qlu7od-0"
|
|
@@ -747,7 +747,7 @@
|
|
|
747
747
|
mainColor = _ref.mainColor,
|
|
748
748
|
imageSize = _ref.imageSize,
|
|
749
749
|
rounded = _ref.rounded;
|
|
750
|
-
return /*#__PURE__*/React__default["default"].createElement(styled$
|
|
750
|
+
return /*#__PURE__*/React__default["default"].createElement(styled$d.Initials, {
|
|
751
751
|
color: mainColor,
|
|
752
752
|
size: imageSize,
|
|
753
753
|
rounded: rounded
|
|
@@ -834,7 +834,7 @@
|
|
|
834
834
|
imageSize: imageSize,
|
|
835
835
|
rounded: rounded
|
|
836
836
|
});
|
|
837
|
-
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$
|
|
837
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$e.Image, {
|
|
838
838
|
ref: imageRef,
|
|
839
839
|
src: url,
|
|
840
840
|
alt: "".concat(firstname, " ").concat(lastname),
|
|
@@ -861,6 +861,38 @@
|
|
|
861
861
|
mainColor: viewsPalette.grey
|
|
862
862
|
};
|
|
863
863
|
|
|
864
|
+
var _templateObject$4;
|
|
865
|
+
var styles = {
|
|
866
|
+
Svg: styled__default["default"].svg.withConfig({
|
|
867
|
+
displayName: "styles__Svg",
|
|
868
|
+
componentId: "sc-jf3e5i-0"
|
|
869
|
+
})(["fill:", ";", " ", ";"], function (props) {
|
|
870
|
+
return getColor(props.color);
|
|
871
|
+
}, mediaBreaks.onlyPrint(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n\t\t\tfill: ", ";\n\t\t"])), viewsPalette.darkGrey), function (props) {
|
|
872
|
+
return props.styles;
|
|
873
|
+
}),
|
|
874
|
+
Path: styled__default["default"].path.withConfig({
|
|
875
|
+
displayName: "styles__Path",
|
|
876
|
+
componentId: "sc-jf3e5i-1"
|
|
877
|
+
})(["fill:inherit;", ";"], function (props) {
|
|
878
|
+
return props.styles;
|
|
879
|
+
})
|
|
880
|
+
};
|
|
881
|
+
({
|
|
882
|
+
Grid: styled__default["default"].div.withConfig({
|
|
883
|
+
displayName: "styles__Grid",
|
|
884
|
+
componentId: "sc-jf3e5i-2"
|
|
885
|
+
})(["display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:15px;"]),
|
|
886
|
+
Item: styled__default["default"].div.withConfig({
|
|
887
|
+
displayName: "styles__Item",
|
|
888
|
+
componentId: "sc-jf3e5i-3"
|
|
889
|
+
})(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), viewsPalette.blue, styles.Svg, viewsPalette.blue),
|
|
890
|
+
SearchInput: styled__default["default"].input.withConfig({
|
|
891
|
+
displayName: "styles__SearchInput",
|
|
892
|
+
componentId: "sc-jf3e5i-4"
|
|
893
|
+
})(["margin-bottom:10px;padding:5px;"])
|
|
894
|
+
});
|
|
895
|
+
|
|
864
896
|
var API_key = {
|
|
865
897
|
path: "M408.747 682.667h-85.333l-17.92 51.627h-41.387l85.333-222.72h34.56l85.333 222.72h-42.667zM333.227 651.093h64.427l-32.427-92.16z M531.2 651.947v82.773h-38.827v-222.72h85.333c1.405-0.083 3.049-0.13 4.704-0.13 20.832 0 39.92 7.465 54.736 19.865l-0.134-0.109c13.282 13.021 21.514 31.149 21.514 51.2s-8.233 38.179-21.503 51.189l-0.012 0.011c-15.119 11.289-34.176 18.075-54.817 18.075-1.88 0-3.746-0.056-5.598-0.167l0.255 0.012zM531.2 620.8h46.507c1.015 0.079 2.199 0.124 3.393 0.124 10.644 0 20.453-3.576 28.291-9.592l-0.11 0.081c6.632-6.639 10.734-15.807 10.734-25.933 0-0.783-0.025-1.561-0.073-2.332l0.005 0.106c0.017-0.437 0.027-0.95 0.027-1.466 0-10.706-4.24-20.421-11.132-27.559l0.011 0.012c-7.552-6.897-17.648-11.122-28.729-11.122-0.55 0-1.098 0.010-1.642 0.031l0.079-0.002h-47.36z M733.44 734.72h-38.4v-222.72h38.4z M873.813 113.493h-725.333c-34.83 0.478-62.91 28.708-63.147 63.551l-0 0.023v669.44c0 35.346 28.654 64 64 64v0h725.333c35.346 0 64-28.654 64-64v0-669.44c-0.239-35.165-28.8-63.579-63.999-63.579-0.301 0-0.601 0.002-0.9 0.006l0.045-0zM148.48 156.16h725.333c0.001-0 0.003-0 0.004-0 11.632 0 21.090 9.31 21.329 20.884l0 0.022v149.333h-767.147v-149.333c0.23-11.605 9.691-20.924 21.329-20.924 0.301 0 0.602 0.006 0.9 0.019l-0.043-0.001zM873.813 867.84h-725.333c-11.782 0-21.333-9.551-21.333-21.333v0-478.293h768.853v478.293c0 0.005 0 0.011 0 0.017 0 11.782-9.551 21.333-21.333 21.333-0.3 0-0.599-0.006-0.896-0.018l0.043 0.001z M200.96 277.333c0.127 0.002 0.277 0.003 0.427 0.003 16.966 0 30.72-13.754 30.72-30.72s-13.754-30.72-30.72-30.72c-16.965 0-30.718 13.752-30.72 30.717l-0 0c-0 0.001-0 0.002-0 0.003 0 16.816 13.512 30.477 30.271 30.717l0.023 0z M294.827 277.333c16.966 0 30.72-13.754 30.72-30.72s-13.754-30.72-30.72-30.72c-16.966 0-30.72 13.754-30.72 30.72v0c0 16.966 13.754 30.72 30.72 30.72h-0z M388.267 277.333c16.966 0 30.72-13.754 30.72-30.72s-13.754-30.72-30.72-30.72c-16.966 0-30.72 13.754-30.72 30.72h0c0.237 16.87 13.85 30.483 30.698 30.72l0.022 0z",
|
|
866
898
|
size: 24
|
|
@@ -1249,6 +1281,10 @@
|
|
|
1249
1281
|
path: "M298.048 149.178v-0.003c0-11.779 9.552-21.331 21.333-21.331h597.013c11.781 0 21.331 9.552 21.331 21.331v0.003c0 11.779-9.55 21.331-21.331 21.331h-597.013c-11.782 0-21.333-9.552-21.333-21.331zM916.409 298.446h-427.252c-11.781 0-21.331 9.55-21.331 21.331s9.55 21.333 21.331 21.333h427.252c11.781 0 21.331-9.552 21.331-21.333s-9.549-21.331-21.331-21.331zM916.592 468.964h-256.039c-11.779 0-21.331 9.55-21.331 21.331s9.552 21.331 21.331 21.331h256.039c11.781 0 21.331-9.55 21.331-21.331s-9.55-21.331-21.331-21.331zM916.409 639.649h-84.3c-11.781 0-21.331 9.55-21.331 21.331s9.55 21.331 21.331 21.331h84.3c11.781 0 21.331-9.55 21.331-21.331s-9.549-21.331-21.331-21.331zM932.56 901.967l-811.479-811.458c-8.333-8.333-21.833-8.333-30.167 0s-8.333 21.833 0 30.167l177.776 177.771h-162.089c-11.781 0-21.331 9.55-21.331 21.331s9.55 21.333 21.331 21.333h204.753l127.857 127.854h-332.609c-11.781 0-21.331 9.55-21.331 21.331s9.55 21.331 21.331 21.331h375.273l128.109 128.107h-503.453c-11.779 0-21.331 9.55-21.331 21.331s9.552 21.331 21.331 21.331h546.117l127.943 127.94h-674.045c-11.781 0-21.331 9.55-21.331 21.331s9.55 21.331 21.331 21.331h716.706l79.141 79.138c4.167 4.167 9.625 6.25 15.084 6.25s10.917-2.083 15.084-6.25c8.333-8.334 8.333-21.833-0-30.167z",
|
|
1250
1282
|
size: 24
|
|
1251
1283
|
};
|
|
1284
|
+
var drag_drop = {
|
|
1285
|
+
path: "M469.333 768c0 46.933-38.4 85.333-85.333 85.333s-85.333-38.4-85.333-85.333 38.4-85.333 85.333-85.333 85.333 38.4 85.333 85.333zM384 426.667c-46.933 0-85.333 38.4-85.333 85.333s38.4 85.333 85.333 85.333 85.333-38.4 85.333-85.333-38.4-85.333-85.333-85.333zM384 170.667c-46.933 0-85.333 38.4-85.333 85.333s38.4 85.333 85.333 85.333 85.333-38.4 85.333-85.333-38.4-85.333-85.333-85.333zM640 341.333c46.933 0 85.333-38.4 85.333-85.333s-38.4-85.333-85.333-85.333-85.333 38.4-85.333 85.333 38.4 85.333 85.333 85.333zM640 426.667c-46.933 0-85.333 38.4-85.333 85.333s38.4 85.333 85.333 85.333 85.333-38.4 85.333-85.333-38.4-85.333-85.333-85.333zM640 682.667c-46.933 0-85.333 38.4-85.333 85.333s38.4 85.333 85.333 85.333 85.333-38.4 85.333-85.333-38.4-85.333-85.333-85.333z",
|
|
1286
|
+
size: 24
|
|
1287
|
+
};
|
|
1252
1288
|
var driver = {
|
|
1253
1289
|
path: "M298.181 426.613c70.792 0 128.375-57.604 128.375-128.396s-57.583-128.396-128.375-128.396-128.375 57.604-128.375 128.396 57.583 128.396 128.375 128.396zM298.181 212.488c47.25 0 85.708 38.458 85.708 85.729s-38.458 85.729-85.708 85.729-85.708-38.458-85.708-85.729 38.458-85.729 85.708-85.729zM353.181 469.592h-112.583c-87.167 0-155.458 68.667-155.458 156.312v205.187c0 11.792 9.542 21.333 21.333 21.333h383.708c11.792 0 21.333-9.542 21.333-21.333v-205.187c-0-87.645-69.542-156.312-158.333-156.312zM127.806 650.683l220.982 159.075h-220.982v-159.075zM421.804 809.759l-291.13-209.573c4.721-22.122 15.372-41.44 30.49-56.284l307.685 221.443v44.414h-47.044zM468.848 712.787l-268.487-193.232c12.435-4.521 25.854-7.297 40.237-7.297h112.583c64.875 0 115.667 49.917 115.667 113.646v86.883zM929.807 587.3l-40.417-29.583c-8.375-6.188-20.167-5.354-27.625 2.104l-73.010 72.786-98.557-98.393 71.943-71.768c8.333-8.312 8.333-21.833 0-30.167-8.333-8.375-21.833-8.333-30.167-0.042l-171.583 171.167c-8.333 8.312-8.333 21.833 0 30.167 4.167 4.187 9.625 6.271 15.084 6.271s10.917-2.083 15.084-6.229l69.417-69.25 98.549 98.385-154.883 154.406c-6.125 6.083-7.958 15.271-4.667 23.25s11.084 13.187 19.708 13.187h298.042c11.75 0 21.292-9.521 21.333-21.292l0.5-227.75c-0-6.812-3.25-13.229-8.75-17.25zM895.431 810.925h-225.125l208.625-208 16.916 12.396-0.416 195.604z",
|
|
1254
1290
|
size: 24
|
|
@@ -2003,6 +2039,7 @@
|
|
|
2003
2039
|
dislike: dislike,
|
|
2004
2040
|
drag: drag,
|
|
2005
2041
|
drag_slash: drag_slash,
|
|
2042
|
+
drag_drop: drag_drop,
|
|
2006
2043
|
driver: driver,
|
|
2007
2044
|
edit: edit,
|
|
2008
2045
|
electronic_bill: electronic_bill,
|
|
@@ -2194,63 +2231,6 @@
|
|
|
2194
2231
|
zip_file: zip_file
|
|
2195
2232
|
};
|
|
2196
2233
|
|
|
2197
|
-
PropTypes.oneOfType([PropTypes.oneOf(Object.keys(icons)), PropTypes.bool]);
|
|
2198
|
-
PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func]))]);
|
|
2199
|
-
var itemsCheckListPropTypes = PropTypes.arrayOf(PropTypes.shape({
|
|
2200
|
-
name: PropTypes.string.isRequired,
|
|
2201
|
-
label: PropTypes.string,
|
|
2202
|
-
translateLabel: PropTypes.bool,
|
|
2203
|
-
value: PropTypes.number
|
|
2204
|
-
}));
|
|
2205
|
-
var groupsCheckListPropTypes = PropTypes.arrayOf(PropTypes.shape({
|
|
2206
|
-
name: PropTypes.string.isRequired,
|
|
2207
|
-
label: PropTypes.string,
|
|
2208
|
-
translateLabel: PropTypes.bool,
|
|
2209
|
-
items: itemsCheckListPropTypes
|
|
2210
|
-
}));
|
|
2211
|
-
PropTypes.arrayOf(PropTypes.shape({
|
|
2212
|
-
name: PropTypes.string.isRequired,
|
|
2213
|
-
label: PropTypes.string,
|
|
2214
|
-
translateLabel: PropTypes.bool,
|
|
2215
|
-
groups: groupsCheckListPropTypes
|
|
2216
|
-
}));
|
|
2217
|
-
PropTypes.shape({
|
|
2218
|
-
status: PropTypes.number
|
|
2219
|
-
});
|
|
2220
|
-
PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.shape({})]);
|
|
2221
|
-
|
|
2222
|
-
var _templateObject$4;
|
|
2223
|
-
var styles = {
|
|
2224
|
-
Svg: styled__default["default"].svg.withConfig({
|
|
2225
|
-
displayName: "styles__Svg",
|
|
2226
|
-
componentId: "sc-jf3e5i-0"
|
|
2227
|
-
})(["fill:", ";", " ", ";"], function (props) {
|
|
2228
|
-
return getColor(props.color);
|
|
2229
|
-
}, mediaBreaks.onlyPrint(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n\t\t\tfill: ", ";\n\t\t"])), viewsPalette.darkGrey), function (props) {
|
|
2230
|
-
return props.styles;
|
|
2231
|
-
}),
|
|
2232
|
-
Path: styled__default["default"].path.withConfig({
|
|
2233
|
-
displayName: "styles__Path",
|
|
2234
|
-
componentId: "sc-jf3e5i-1"
|
|
2235
|
-
})(["fill:inherit;", ";"], function (props) {
|
|
2236
|
-
return props.styles;
|
|
2237
|
-
})
|
|
2238
|
-
};
|
|
2239
|
-
({
|
|
2240
|
-
Grid: styled__default["default"].div.withConfig({
|
|
2241
|
-
displayName: "styles__Grid",
|
|
2242
|
-
componentId: "sc-jf3e5i-2"
|
|
2243
|
-
})(["display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:15px;"]),
|
|
2244
|
-
Item: styled__default["default"].div.withConfig({
|
|
2245
|
-
displayName: "styles__Item",
|
|
2246
|
-
componentId: "sc-jf3e5i-3"
|
|
2247
|
-
})(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), viewsPalette.blue, styles.Svg, viewsPalette.blue),
|
|
2248
|
-
SearchInput: styled__default["default"].input.withConfig({
|
|
2249
|
-
displayName: "styles__SearchInput",
|
|
2250
|
-
componentId: "sc-jf3e5i-4"
|
|
2251
|
-
})(["margin-bottom:10px;padding:5px;"])
|
|
2252
|
-
});
|
|
2253
|
-
|
|
2254
2234
|
var _excluded$8 = ["color", "name", "size", "styles", "pathStyles", "width", "height", "viewBox"];
|
|
2255
2235
|
|
|
2256
2236
|
var Icon = function Icon(_ref) {
|
|
@@ -2288,6 +2268,216 @@
|
|
|
2288
2268
|
viewBox: '0 0 1024 1024'
|
|
2289
2269
|
};
|
|
2290
2270
|
|
|
2271
|
+
var _templateObject$3;
|
|
2272
|
+
var styled$c = {
|
|
2273
|
+
Chip: styled__default["default"].button.withConfig({
|
|
2274
|
+
displayName: "styles__Chip",
|
|
2275
|
+
componentId: "sc-1vnh4co-0"
|
|
2276
|
+
})(["padding:", ";cursor:", ";font-size:13px;color:", ";height:", ";width:", ";min-width:36px;max-width:150px;border-radius:", ";display:inline-flex;justify-content:center;align-items:center;pointer-events:", ";white-space:nowrap;.chip-icon{", ";}", " ", ";", " ", " ", " ", ""], function (props) {
|
|
2277
|
+
return !props.onlyIcon ? '0 12px' : '0';
|
|
2278
|
+
}, function (props) {
|
|
2279
|
+
return props.clickable ? 'pointer' : 'default';
|
|
2280
|
+
}, viewsPalette.black, function (props) {
|
|
2281
|
+
return !props.onlyIcon ? '32px' : '36px';
|
|
2282
|
+
}, function (props) {
|
|
2283
|
+
return props.onlyIcon && '36px';
|
|
2284
|
+
}, function (props) {
|
|
2285
|
+
return !props.onlyIcon ? '50px' : '50%';
|
|
2286
|
+
}, function (props) {
|
|
2287
|
+
return props.clickable || props.hasLink ? 'auto' : 'none';
|
|
2288
|
+
}, function (props) {
|
|
2289
|
+
return !props.onlyIcon && 'margin-right: 8px';
|
|
2290
|
+
}, function (props) {
|
|
2291
|
+
switch (props.variant) {
|
|
2292
|
+
case 'outlined':
|
|
2293
|
+
return styled$g.css(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? viewsPalette.blue : '#EAEBED', props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.lightGreyHover, props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.blue);
|
|
2294
|
+
|
|
2295
|
+
case 'contained':
|
|
2296
|
+
return styled$g.css(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? viewsPalette.blue : viewsPalette.lightGreyHover, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.darkGrey, props.selected ? viewsPalette.blueHover : viewsPalette.lightGrey, props.selected ? viewsPalette.white : viewsPalette.black, viewsPalette.blue, viewsPalette.white, viewsPalette.white, viewsPalette.grey, viewsPalette.grey);
|
|
2297
|
+
|
|
2298
|
+
case 'status':
|
|
2299
|
+
return styled$g.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor(props.color || 'grey'), getColor(props.sizeColor || 'white'));
|
|
2300
|
+
|
|
2301
|
+
default:
|
|
2302
|
+
return '';
|
|
2303
|
+
}
|
|
2304
|
+
}, function (props) {
|
|
2305
|
+
return props.styles;
|
|
2306
|
+
}, function (props) {
|
|
2307
|
+
return props.borderColor && "border: solid 1px ".concat(getColor(props.borderColor), ";");
|
|
2308
|
+
}, function (props) {
|
|
2309
|
+
return props.backgroundColor && "background-color: ".concat(getColor(props.backgroundColor), ";");
|
|
2310
|
+
}, function (props) {
|
|
2311
|
+
return props.textColor && "color: ".concat(getColor(props.textColor), ";");
|
|
2312
|
+
}, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), viewsPalette.darkGrey)),
|
|
2313
|
+
iconPathStyles: styled$g.css(["", ";"], mixins.transition('fill')),
|
|
2314
|
+
DeleteButton: styled__default["default"].button.withConfig({
|
|
2315
|
+
displayName: "styles__DeleteButton",
|
|
2316
|
+
componentId: "sc-1vnh4co-1"
|
|
2317
|
+
})(["width:16px;height:16px;margin-left:12px;"]),
|
|
2318
|
+
deleteButtonPathStyles: styled$g.css(["", ";"], mixins.transition('fill')),
|
|
2319
|
+
Children: styled__default["default"].div.withConfig({
|
|
2320
|
+
displayName: "styles__Children",
|
|
2321
|
+
componentId: "sc-1vnh4co-2"
|
|
2322
|
+
})(["text-overflow:ellipsis;overflow:hidden;"])
|
|
2323
|
+
};
|
|
2324
|
+
|
|
2325
|
+
var _excluded$7 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "onClick", "onDelete", "selected", "textColor", "variant", "hasLink"];
|
|
2326
|
+
|
|
2327
|
+
var Chip = function Chip(_ref) {
|
|
2328
|
+
var backgroundColor = _ref.backgroundColor,
|
|
2329
|
+
borderColor = _ref.borderColor,
|
|
2330
|
+
children = _ref.children,
|
|
2331
|
+
disabled = _ref.disabled,
|
|
2332
|
+
icon = _ref.icon,
|
|
2333
|
+
iconColor = _ref.iconColor,
|
|
2334
|
+
onClick = _ref.onClick,
|
|
2335
|
+
onDelete = _ref.onDelete,
|
|
2336
|
+
selected = _ref.selected,
|
|
2337
|
+
textColor = _ref.textColor,
|
|
2338
|
+
variant = _ref.variant,
|
|
2339
|
+
hasLink = _ref.hasLink,
|
|
2340
|
+
props = _objectWithoutProperties(_ref, _excluded$7);
|
|
2341
|
+
|
|
2342
|
+
if (!children && !icon) return null;
|
|
2343
|
+
return /*#__PURE__*/React__default["default"].createElement(styled$c.Chip, _extends$1({
|
|
2344
|
+
as: props.onClick ? 'button' : 'div',
|
|
2345
|
+
backgroundColor: backgroundColor,
|
|
2346
|
+
borderColor: borderColor,
|
|
2347
|
+
hasIcon: !!icon,
|
|
2348
|
+
disabled: disabled,
|
|
2349
|
+
clickable: (onClick || onDelete) && !disabled,
|
|
2350
|
+
onClick: disabled ? undefined : onClick,
|
|
2351
|
+
selected: selected,
|
|
2352
|
+
textColor: textColor,
|
|
2353
|
+
variant: variant,
|
|
2354
|
+
iconColor: iconColor,
|
|
2355
|
+
hasLink: hasLink,
|
|
2356
|
+
onlyIcon: !children && icon
|
|
2357
|
+
}, props), icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
2358
|
+
className: "chip-icon",
|
|
2359
|
+
name: icon,
|
|
2360
|
+
color: iconColor,
|
|
2361
|
+
pathStyles: styled$c.iconPathStyles
|
|
2362
|
+
}), children && /*#__PURE__*/React__default["default"].createElement(styled$c.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$c.DeleteButton, {
|
|
2363
|
+
type: "button",
|
|
2364
|
+
onClick: onDelete
|
|
2365
|
+
}, /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
2366
|
+
color: "black",
|
|
2367
|
+
pathStyles: styled$c.deleteButtonPathStyles,
|
|
2368
|
+
className: "delete-button",
|
|
2369
|
+
name: "cross_circle_flat",
|
|
2370
|
+
size: 16
|
|
2371
|
+
})));
|
|
2372
|
+
};
|
|
2373
|
+
|
|
2374
|
+
Chip.defaultProps = {
|
|
2375
|
+
backgroundColor: '',
|
|
2376
|
+
borderColor: '',
|
|
2377
|
+
disabled: false,
|
|
2378
|
+
iconColor: 'grey',
|
|
2379
|
+
selected: false,
|
|
2380
|
+
textColor: '',
|
|
2381
|
+
variant: 'outlined',
|
|
2382
|
+
hasLink: false
|
|
2383
|
+
};
|
|
2384
|
+
|
|
2385
|
+
var styled$b = {
|
|
2386
|
+
AvatarGroup: styled__default["default"](Chip).withConfig({
|
|
2387
|
+
displayName: "styles__AvatarGroup",
|
|
2388
|
+
componentId: "sc-1jnt2lr-0"
|
|
2389
|
+
})(["pointer-events:none;", " background:", ";", " & div{display:flex;& div,img,span{&:not(:first-child){margin-left:-4px;}}span:first-of-type{margin-left:0px;}}"], function (_ref) {
|
|
2390
|
+
var showFull = _ref.showFull,
|
|
2391
|
+
backgroundColor = _ref.backgroundColor;
|
|
2392
|
+
return showFull ? styled$g.css(["height:45px;padding-left:9px;padding-right:9px;max-width:inherit;&:hover,&:active{background:", ";}"], backgroundColor || viewsPalette.white) : styled$g.css(["height:33px;padding-left:5px;padding-right:5px;cursor:pointer;"]);
|
|
2393
|
+
}, function (_ref2) {
|
|
2394
|
+
var backgroundColor = _ref2.backgroundColor;
|
|
2395
|
+
return backgroundColor || viewsPalette.white;
|
|
2396
|
+
}, function (_ref3) {
|
|
2397
|
+
var inactive = _ref3.inactive;
|
|
2398
|
+
return inactive && "\n &:hover {\n background: ".concat(viewsPalette.white, ";\n }\n &:active {\n border-color: #EAEBED;\n }\n ");
|
|
2399
|
+
})
|
|
2400
|
+
};
|
|
2401
|
+
|
|
2402
|
+
var AvatarList = function AvatarList(_ref) {
|
|
2403
|
+
var userList = _ref.userList,
|
|
2404
|
+
hasExtraCount = _ref.hasExtraCount,
|
|
2405
|
+
extraCount = _ref.extraCount,
|
|
2406
|
+
showFull = _ref.showFull;
|
|
2407
|
+
return userList.map(function (_ref2, index) {
|
|
2408
|
+
var firstname = _ref2.firstname,
|
|
2409
|
+
lastname = _ref2.lastname,
|
|
2410
|
+
url = _ref2.url,
|
|
2411
|
+
id = _ref2.id,
|
|
2412
|
+
mainColor = _ref2.mainColor;
|
|
2413
|
+
if (hasExtraCount && index < extraCount) return null;
|
|
2414
|
+
return /*#__PURE__*/React__default["default"].createElement(Avatar, {
|
|
2415
|
+
key: id,
|
|
2416
|
+
firstname: firstname,
|
|
2417
|
+
lastname: lastname,
|
|
2418
|
+
url: url,
|
|
2419
|
+
size: showFull ? 'large' : 'small',
|
|
2420
|
+
mainColor: mainColor
|
|
2421
|
+
});
|
|
2422
|
+
});
|
|
2423
|
+
};
|
|
2424
|
+
|
|
2425
|
+
var AvatarGroup = function AvatarGroup(_ref) {
|
|
2426
|
+
var users = _ref.users,
|
|
2427
|
+
usersToDisplay = _ref.usersToDisplay,
|
|
2428
|
+
showFull = _ref.showFull,
|
|
2429
|
+
badgeColor = _ref.badgeColor;
|
|
2430
|
+
var extraCount = users.length > usersToDisplay ? users.length - usersToDisplay : 0;
|
|
2431
|
+
var hasExtraCount = extraCount > 0;
|
|
2432
|
+
return /*#__PURE__*/React__default["default"].createElement(styled$b.AvatarGroup, {
|
|
2433
|
+
disabled: true,
|
|
2434
|
+
showFull: showFull
|
|
2435
|
+
}, /*#__PURE__*/React__default["default"].createElement(AvatarList, {
|
|
2436
|
+
userList: users,
|
|
2437
|
+
hasExtraCount: hasExtraCount,
|
|
2438
|
+
extraCount: extraCount,
|
|
2439
|
+
showFull: showFull
|
|
2440
|
+
}), hasExtraCount && /*#__PURE__*/React__default["default"].createElement(Avatar, {
|
|
2441
|
+
firstname: "+",
|
|
2442
|
+
lastname: "".concat(extraCount),
|
|
2443
|
+
mainColor: badgeColor,
|
|
2444
|
+
size: showFull ? 'large' : 'small'
|
|
2445
|
+
}));
|
|
2446
|
+
};
|
|
2447
|
+
|
|
2448
|
+
AvatarGroup.defaultProps = {
|
|
2449
|
+
badgeColor: viewsPalette.blue,
|
|
2450
|
+
users: [],
|
|
2451
|
+
usersToDisplay: 5,
|
|
2452
|
+
showFull: false
|
|
2453
|
+
};
|
|
2454
|
+
var AvatarGroup$1 = /*#__PURE__*/React__default["default"].memo(AvatarGroup);
|
|
2455
|
+
|
|
2456
|
+
PropTypes.oneOfType([PropTypes.oneOf(Object.keys(icons)), PropTypes.bool]);
|
|
2457
|
+
PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func]))]);
|
|
2458
|
+
var itemsCheckListPropTypes = PropTypes.arrayOf(PropTypes.shape({
|
|
2459
|
+
name: PropTypes.string.isRequired,
|
|
2460
|
+
label: PropTypes.string,
|
|
2461
|
+
translateLabel: PropTypes.bool,
|
|
2462
|
+
value: PropTypes.number
|
|
2463
|
+
}));
|
|
2464
|
+
var groupsCheckListPropTypes = PropTypes.arrayOf(PropTypes.shape({
|
|
2465
|
+
name: PropTypes.string.isRequired,
|
|
2466
|
+
label: PropTypes.string,
|
|
2467
|
+
translateLabel: PropTypes.bool,
|
|
2468
|
+
items: itemsCheckListPropTypes
|
|
2469
|
+
}));
|
|
2470
|
+
PropTypes.arrayOf(PropTypes.shape({
|
|
2471
|
+
name: PropTypes.string.isRequired,
|
|
2472
|
+
label: PropTypes.string,
|
|
2473
|
+
translateLabel: PropTypes.bool,
|
|
2474
|
+
groups: groupsCheckListPropTypes
|
|
2475
|
+
}));
|
|
2476
|
+
PropTypes.shape({
|
|
2477
|
+
status: PropTypes.number
|
|
2478
|
+
});
|
|
2479
|
+
PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.shape({})]);
|
|
2480
|
+
|
|
2291
2481
|
var validColors = ['black', 'blue', 'darkGrey', 'fizzGreen', 'green', 'grey', 'lightBlue', 'lightGrey', 'orange', 'red', 'statusRed', 'white', 'yellow'];
|
|
2292
2482
|
var white = viewsPalette.white,
|
|
2293
2483
|
grey = viewsPalette.grey,
|
|
@@ -2308,7 +2498,7 @@
|
|
|
2308
2498
|
};
|
|
2309
2499
|
|
|
2310
2500
|
var commonStyles = function commonStyles(iconColor, fontColor, color) {
|
|
2311
|
-
return styled$
|
|
2501
|
+
return styled$g.css(["color:", ";.button-icon{fill:", ";}background:none;&:focus,&:hover{background-color:", ";}&:active{background-color:", ";}&:disabled{color:", ";.button-icon{fill:", ";}}"], getColor(fontColor || color || blue), getColor(iconColor || color || blue), lightGreyHover, lightGrey, grey, grey);
|
|
2312
2502
|
};
|
|
2313
2503
|
|
|
2314
2504
|
var getButtonStyles = function getButtonStyles(_ref) {
|
|
@@ -2318,10 +2508,10 @@
|
|
|
2318
2508
|
iconColor = _ref.iconColor;
|
|
2319
2509
|
var variantStyles = {
|
|
2320
2510
|
contained: function contained() {
|
|
2321
|
-
return styled$
|
|
2511
|
+
return styled$g.css(["color:", ";&:before{background-color:", ";}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor(fontColor || 'white'), getColor(color), white, getHoverColor(color), getPressedColor(color), grey);
|
|
2322
2512
|
},
|
|
2323
2513
|
outlined: function outlined() {
|
|
2324
|
-
return styled$
|
|
2514
|
+
return styled$g.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
|
|
2325
2515
|
},
|
|
2326
2516
|
cleaned: function cleaned() {
|
|
2327
2517
|
return commonStyles(iconColor, fontColor, color);
|
|
@@ -2330,7 +2520,7 @@
|
|
|
2330
2520
|
return variantStyles[variant] || '';
|
|
2331
2521
|
};
|
|
2332
2522
|
|
|
2333
|
-
var styled$
|
|
2523
|
+
var styled$a = {
|
|
2334
2524
|
Button: styled__default["default"].button.withConfig({
|
|
2335
2525
|
displayName: "styles__Button",
|
|
2336
2526
|
componentId: "sc-buf2do-0"
|
|
@@ -2363,7 +2553,7 @@
|
|
|
2363
2553
|
})
|
|
2364
2554
|
};
|
|
2365
2555
|
|
|
2366
|
-
var _excluded$
|
|
2556
|
+
var _excluded$6 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant", "disabled"];
|
|
2367
2557
|
|
|
2368
2558
|
var Button = function Button(_ref) {
|
|
2369
2559
|
var children = _ref.children,
|
|
@@ -2377,9 +2567,9 @@
|
|
|
2377
2567
|
styles = _ref.styles,
|
|
2378
2568
|
variant = _ref.variant,
|
|
2379
2569
|
disabled = _ref.disabled,
|
|
2380
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
2570
|
+
props = _objectWithoutProperties(_ref, _excluded$6);
|
|
2381
2571
|
|
|
2382
|
-
return /*#__PURE__*/React__default["default"].createElement(styled$
|
|
2572
|
+
return /*#__PURE__*/React__default["default"].createElement(styled$a.Button, _extends$1({
|
|
2383
2573
|
color: color,
|
|
2384
2574
|
iconColor: iconColor || fontColor,
|
|
2385
2575
|
fontColor: fontColor,
|
|
@@ -2404,7 +2594,7 @@
|
|
|
2404
2594
|
disabled: false
|
|
2405
2595
|
};
|
|
2406
2596
|
|
|
2407
|
-
var styled$
|
|
2597
|
+
var styled$9 = {
|
|
2408
2598
|
Container: styled__default["default"].label.withConfig({
|
|
2409
2599
|
displayName: "styles__Container",
|
|
2410
2600
|
componentId: "sc-18bfcwf-0"
|
|
@@ -2421,12 +2611,12 @@
|
|
|
2421
2611
|
displayName: "styles__Input",
|
|
2422
2612
|
componentId: "sc-18bfcwf-1"
|
|
2423
2613
|
})(["opacity:0;position:absolute;cursor:pointer;"]),
|
|
2424
|
-
iconCheckStyles: styled$
|
|
2614
|
+
iconCheckStyles: styled$g.css(["transform:translateY(-5%);fill:", ";", ""], getColor('white'), function (props) {
|
|
2425
2615
|
return !!props.rounded && "\n\t\t\tflex-shrink: 0;\n\t\t\tpadding-right: 1px;\n\t\t";
|
|
2426
2616
|
})
|
|
2427
2617
|
};
|
|
2428
2618
|
|
|
2429
|
-
var _excluded$
|
|
2619
|
+
var _excluded$5 = ["autoComplete", "disabled", "defaultChecked", "onChange", "rounded", "styles", "value"];
|
|
2430
2620
|
|
|
2431
2621
|
var Checkbox = function Checkbox(_ref) {
|
|
2432
2622
|
var autoComplete = _ref.autoComplete,
|
|
@@ -2436,7 +2626,7 @@
|
|
|
2436
2626
|
rounded = _ref.rounded,
|
|
2437
2627
|
styles = _ref.styles,
|
|
2438
2628
|
value = _ref.value,
|
|
2439
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
2629
|
+
props = _objectWithoutProperties(_ref, _excluded$5);
|
|
2440
2630
|
|
|
2441
2631
|
var _useState = React.useState(!!value || defaultChecked),
|
|
2442
2632
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -2451,18 +2641,18 @@
|
|
|
2451
2641
|
|
|
2452
2642
|
var _props$checked = props.checked,
|
|
2453
2643
|
conntroledChecked = _props$checked === void 0 ? checked : _props$checked;
|
|
2454
|
-
return /*#__PURE__*/React__default["default"].createElement(styled$
|
|
2644
|
+
return /*#__PURE__*/React__default["default"].createElement(styled$9.Container, {
|
|
2455
2645
|
checked: conntroledChecked,
|
|
2456
2646
|
rounded: rounded,
|
|
2457
2647
|
styles: styles
|
|
2458
|
-
}, /*#__PURE__*/React__default["default"].createElement(styled$
|
|
2648
|
+
}, /*#__PURE__*/React__default["default"].createElement(styled$9.Input, _extends$1({}, props, {
|
|
2459
2649
|
type: "checkbox",
|
|
2460
2650
|
disabled: disabled,
|
|
2461
2651
|
autoComplete: autoComplete ? 'on' : 'off',
|
|
2462
2652
|
onChange: handleChange
|
|
2463
2653
|
})), /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
2464
2654
|
name: "check_bold",
|
|
2465
|
-
styles: styled$
|
|
2655
|
+
styles: styled$9.iconCheckStyles,
|
|
2466
2656
|
rounded: rounded
|
|
2467
2657
|
}));
|
|
2468
2658
|
};
|
|
@@ -2474,120 +2664,6 @@
|
|
|
2474
2664
|
}
|
|
2475
2665
|
};
|
|
2476
2666
|
|
|
2477
|
-
var _templateObject$3;
|
|
2478
|
-
var styled$9 = {
|
|
2479
|
-
Chip: styled__default["default"].button.withConfig({
|
|
2480
|
-
displayName: "styles__Chip",
|
|
2481
|
-
componentId: "sc-1vnh4co-0"
|
|
2482
|
-
})(["padding:", ";cursor:", ";font-size:13px;color:", ";height:", ";width:", ";min-width:36px;max-width:150px;border-radius:", ";display:inline-flex;justify-content:center;align-items:center;pointer-events:", ";white-space:nowrap;.chip-icon{", ";}", " ", ";", " ", " ", " ", ""], function (props) {
|
|
2483
|
-
return !props.onlyIcon ? '0 12px' : '0';
|
|
2484
|
-
}, function (props) {
|
|
2485
|
-
return props.clickable ? 'pointer' : 'default';
|
|
2486
|
-
}, viewsPalette.black, function (props) {
|
|
2487
|
-
return !props.onlyIcon ? '32px' : '36px';
|
|
2488
|
-
}, function (props) {
|
|
2489
|
-
return props.onlyIcon && '36px';
|
|
2490
|
-
}, function (props) {
|
|
2491
|
-
return !props.onlyIcon ? '50px' : '50%';
|
|
2492
|
-
}, function (props) {
|
|
2493
|
-
return props.clickable || props.hasLink ? 'auto' : 'none';
|
|
2494
|
-
}, function (props) {
|
|
2495
|
-
return !props.onlyIcon && 'margin-right: 8px';
|
|
2496
|
-
}, function (props) {
|
|
2497
|
-
switch (props.variant) {
|
|
2498
|
-
case 'outlined':
|
|
2499
|
-
return styled$f.css(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? viewsPalette.blue : '#EAEBED', props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.lightGreyHover, props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.blue);
|
|
2500
|
-
|
|
2501
|
-
case 'contained':
|
|
2502
|
-
return styled$f.css(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? viewsPalette.blue : viewsPalette.lightGreyHover, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.darkGrey, props.selected ? viewsPalette.blueHover : viewsPalette.lightGrey, props.selected ? viewsPalette.white : viewsPalette.black, viewsPalette.blue, viewsPalette.white, viewsPalette.white, viewsPalette.grey, viewsPalette.grey);
|
|
2503
|
-
|
|
2504
|
-
case 'status':
|
|
2505
|
-
return styled$f.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor(props.color || 'grey'), getColor(props.sizeColor || 'white'));
|
|
2506
|
-
|
|
2507
|
-
default:
|
|
2508
|
-
return '';
|
|
2509
|
-
}
|
|
2510
|
-
}, function (props) {
|
|
2511
|
-
return props.styles;
|
|
2512
|
-
}, function (props) {
|
|
2513
|
-
return props.borderColor && "border: solid 1px ".concat(getColor(props.borderColor), ";");
|
|
2514
|
-
}, function (props) {
|
|
2515
|
-
return props.backgroundColor && "background-color: ".concat(getColor(props.backgroundColor), ";");
|
|
2516
|
-
}, function (props) {
|
|
2517
|
-
return props.textColor && "color: ".concat(getColor(props.textColor), ";");
|
|
2518
|
-
}, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), viewsPalette.darkGrey)),
|
|
2519
|
-
iconPathStyles: styled$f.css(["", ";"], mixins.transition('fill')),
|
|
2520
|
-
DeleteButton: styled__default["default"].button.withConfig({
|
|
2521
|
-
displayName: "styles__DeleteButton",
|
|
2522
|
-
componentId: "sc-1vnh4co-1"
|
|
2523
|
-
})(["width:16px;height:16px;margin-left:12px;"]),
|
|
2524
|
-
deleteButtonPathStyles: styled$f.css(["", ";"], mixins.transition('fill')),
|
|
2525
|
-
Children: styled__default["default"].div.withConfig({
|
|
2526
|
-
displayName: "styles__Children",
|
|
2527
|
-
componentId: "sc-1vnh4co-2"
|
|
2528
|
-
})(["text-overflow:ellipsis;overflow:hidden;"])
|
|
2529
|
-
};
|
|
2530
|
-
|
|
2531
|
-
var _excluded$5 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "onClick", "onDelete", "selected", "textColor", "variant", "hasLink"];
|
|
2532
|
-
|
|
2533
|
-
var Chip = function Chip(_ref) {
|
|
2534
|
-
var backgroundColor = _ref.backgroundColor,
|
|
2535
|
-
borderColor = _ref.borderColor,
|
|
2536
|
-
children = _ref.children,
|
|
2537
|
-
disabled = _ref.disabled,
|
|
2538
|
-
icon = _ref.icon,
|
|
2539
|
-
iconColor = _ref.iconColor,
|
|
2540
|
-
onClick = _ref.onClick,
|
|
2541
|
-
onDelete = _ref.onDelete,
|
|
2542
|
-
selected = _ref.selected,
|
|
2543
|
-
textColor = _ref.textColor,
|
|
2544
|
-
variant = _ref.variant,
|
|
2545
|
-
hasLink = _ref.hasLink,
|
|
2546
|
-
props = _objectWithoutProperties(_ref, _excluded$5);
|
|
2547
|
-
|
|
2548
|
-
if (!children && !icon) return null;
|
|
2549
|
-
return /*#__PURE__*/React__default["default"].createElement(styled$9.Chip, _extends$1({
|
|
2550
|
-
as: props.onClick ? 'button' : 'div',
|
|
2551
|
-
backgroundColor: backgroundColor,
|
|
2552
|
-
borderColor: borderColor,
|
|
2553
|
-
hasIcon: !!icon,
|
|
2554
|
-
disabled: disabled,
|
|
2555
|
-
clickable: (onClick || onDelete) && !disabled,
|
|
2556
|
-
onClick: disabled ? undefined : onClick,
|
|
2557
|
-
selected: selected,
|
|
2558
|
-
textColor: textColor,
|
|
2559
|
-
variant: variant,
|
|
2560
|
-
iconColor: iconColor,
|
|
2561
|
-
hasLink: hasLink,
|
|
2562
|
-
onlyIcon: !children && icon
|
|
2563
|
-
}, props), icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
2564
|
-
className: "chip-icon",
|
|
2565
|
-
name: icon,
|
|
2566
|
-
color: iconColor,
|
|
2567
|
-
pathStyles: styled$9.iconPathStyles
|
|
2568
|
-
}), children && /*#__PURE__*/React__default["default"].createElement(styled$9.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$9.DeleteButton, {
|
|
2569
|
-
type: "button",
|
|
2570
|
-
onClick: onDelete
|
|
2571
|
-
}, /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
2572
|
-
color: "black",
|
|
2573
|
-
pathStyles: styled$9.deleteButtonPathStyles,
|
|
2574
|
-
className: "delete-button",
|
|
2575
|
-
name: "cross_circle_flat",
|
|
2576
|
-
size: 16
|
|
2577
|
-
})));
|
|
2578
|
-
};
|
|
2579
|
-
|
|
2580
|
-
Chip.defaultProps = {
|
|
2581
|
-
backgroundColor: '',
|
|
2582
|
-
borderColor: '',
|
|
2583
|
-
disabled: false,
|
|
2584
|
-
iconColor: 'grey',
|
|
2585
|
-
selected: false,
|
|
2586
|
-
textColor: '',
|
|
2587
|
-
variant: 'outlined',
|
|
2588
|
-
hasLink: false
|
|
2589
|
-
};
|
|
2590
|
-
|
|
2591
2667
|
var styled$8 = {
|
|
2592
2668
|
Wrapper: styled__default["default"].div.withConfig({
|
|
2593
2669
|
displayName: "styles__Wrapper",
|
|
@@ -2646,7 +2722,7 @@
|
|
|
2646
2722
|
})(["width:16px;height:16px;border-radius:50%;position:absolute;top:4px;left:4px;background-color:", ";transition:all ", " 0.2s;", ""], viewsPalette.white, timingFunctions$1.standard, function (props) {
|
|
2647
2723
|
return props.checked && "\n\t\t\tleft: 100%;\n\t\t\tmargin-left: -20px;\n\t\t";
|
|
2648
2724
|
});
|
|
2649
|
-
var iconCheckStyles = styled$
|
|
2725
|
+
var iconCheckStyles = styled$g.css(["position:absolute;fill:", ";", ""], function (props) {
|
|
2650
2726
|
return statusColor(props);
|
|
2651
2727
|
}, onlyPrint(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n\t\tfill: ", " !important;\n\t"])), function (props) {
|
|
2652
2728
|
return props.checked ? viewsPalette.black : viewsPalette.darkGrey;
|
|
@@ -2830,7 +2906,7 @@
|
|
|
2830
2906
|
}, function (_ref4) {
|
|
2831
2907
|
var hasIcon = _ref4.hasIcon;
|
|
2832
2908
|
return hasIcon && "padding-left: 32px;";
|
|
2833
|
-
}, mixins.placeholder(styled$
|
|
2909
|
+
}, mixins.placeholder(styled$g.css(["font-weight:400;color:", ";"], function (_ref5) {
|
|
2834
2910
|
var error = _ref5.error;
|
|
2835
2911
|
return error ? viewsPalette.statusRed : viewsPalette.darkGreyPressed;
|
|
2836
2912
|
})), function (props) {
|
|
@@ -3049,7 +3125,7 @@
|
|
|
3049
3125
|
componentId: "sc-wtau65-1"
|
|
3050
3126
|
})(["border:none;border-bottom:1px solid ", ";border-radius:0;height:23px;max-height:350px;padding:0 9px 4px 0;resize:none;font-size:", ";font-weight:400;color:", ";", ";width:", ";", " ", " &:hover{border-color:", ";}&:focus{border-color:", ";caret-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";border-color:", ";cursor:default;}", " ", ""], viewsPalette.grey, fontSize, viewsPalette.black, mixins.transition('color,border-color', '0.2s'), function (props) {
|
|
3051
3127
|
return props.fullWidth ? '100%' : 'auto';
|
|
3052
|
-
}, mixins.placeholder(styled$
|
|
3128
|
+
}, mixins.placeholder(styled$g.css(["opacity:1;color:", ";"], function (props) {
|
|
3053
3129
|
return placeholderColor(props);
|
|
3054
3130
|
})), mixins.scrollbar(viewsPalette.grey, viewsPalette.base), viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.white, viewsPalette.grey, viewsPalette.grey, function (props) {
|
|
3055
3131
|
return props.error && "\n\t\t\t&, &:hover, &:focus {\n\t\t\t\tborder-color: ".concat(viewsPalette.statusRed, "\n\t\t\t}\n\t\t");
|
|
@@ -4720,14 +4796,14 @@
|
|
|
4720
4796
|
};
|
|
4721
4797
|
|
|
4722
4798
|
var verticalCommonStyles = function verticalCommonStyles(open) {
|
|
4723
|
-
return styled$
|
|
4799
|
+
return styled$g.css(["width:100%;", ";max-height:", ";left:0;right:0;"], function (_ref) {
|
|
4724
4800
|
var fullScreen = _ref.fullScreen;
|
|
4725
4801
|
return fullScreen && 'height: 100%';
|
|
4726
4802
|
}, open ? '100%' : 0);
|
|
4727
4803
|
};
|
|
4728
4804
|
|
|
4729
4805
|
var horizontalCommonStyles = function horizontalCommonStyles(open) {
|
|
4730
|
-
return styled$
|
|
4806
|
+
return styled$g.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
|
|
4731
4807
|
var fullScreen = _ref2.fullScreen;
|
|
4732
4808
|
return fullScreen && 'width: 100%';
|
|
4733
4809
|
}, open ? '100%' : 0);
|
|
@@ -4736,16 +4812,16 @@
|
|
|
4736
4812
|
var setPosition = function setPosition(position, open) {
|
|
4737
4813
|
var positions = {
|
|
4738
4814
|
top: function top() {
|
|
4739
|
-
return styled$
|
|
4815
|
+
return styled$g.css(["", ";top:0;"], verticalCommonStyles(open));
|
|
4740
4816
|
},
|
|
4741
4817
|
bottom: function bottom() {
|
|
4742
|
-
return styled$
|
|
4818
|
+
return styled$g.css(["", ";bottom:0;"], verticalCommonStyles(open));
|
|
4743
4819
|
},
|
|
4744
4820
|
left: function left() {
|
|
4745
|
-
return styled$
|
|
4821
|
+
return styled$g.css(["", ";left:0;"], horizontalCommonStyles(open));
|
|
4746
4822
|
},
|
|
4747
4823
|
right: function right() {
|
|
4748
|
-
return styled$
|
|
4824
|
+
return styled$g.css(["", ";right:0;"], horizontalCommonStyles(open));
|
|
4749
4825
|
}
|
|
4750
4826
|
};
|
|
4751
4827
|
return positions[position];
|
|
@@ -4759,7 +4835,7 @@
|
|
|
4759
4835
|
open = _ref3.open,
|
|
4760
4836
|
transitionDuration = _ref3.transitionDuration;
|
|
4761
4837
|
var transitionTime = transitionDuration / 1000;
|
|
4762
|
-
return styled$
|
|
4838
|
+
return styled$g.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
|
|
4763
4839
|
});
|
|
4764
4840
|
var Content = styled__default["default"].div.withConfig({
|
|
4765
4841
|
displayName: "styles__Content",
|
|
@@ -4836,6 +4912,7 @@
|
|
|
4836
4912
|
};
|
|
4837
4913
|
|
|
4838
4914
|
exports.Avatar = Avatar;
|
|
4915
|
+
exports.AvatarGroup = AvatarGroup$1;
|
|
4839
4916
|
exports.Button = Button;
|
|
4840
4917
|
exports.Checkbox = Checkbox;
|
|
4841
4918
|
exports.Chip = Chip;
|