@lanaco/lnc-react-ui 2.1.30 → 2.1.31
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/lib/index.esm.js +10 -10
- package/lib/index.js +10 -10
- package/package.json +1 -1
package/lib/index.esm.js
CHANGED
|
@@ -4621,7 +4621,7 @@ var getCheckboxCss = function getCheckboxCss(props) {
|
|
|
4621
4621
|
height = "1.6875rem";
|
|
4622
4622
|
}
|
|
4623
4623
|
|
|
4624
|
-
return css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n .c-", "-container {\n font-family: ", ";\n display: inline-block;\n position: relative;\n padding: 0.25rem;\n padding-left: ", ";\n ", "\n cursor:
|
|
4624
|
+
return css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n .c-", "-container {\n font-family: ", ";\n display: inline-block;\n position: relative;\n padding: 0.25rem;\n padding-left: ", ";\n ", "\n cursor: auto;\n font-size: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n margin: ", ";\n margin-left: ", ";\n }\n\n /* Hide the browser's default checkbox */\n .c-", "-container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n /* Create a custom checkbox */\n .c-", "-checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: ", ";\n width: ", ";\n background-color: #eee;\n border: 0.0625rem solid ", ";\n border-radius: 2px;\n transition: all 200ms ease;\n }\n\n /* On mouse-over, add a grey background color */\n .c-", "-container:hover input ~ .c-", "-checkmark {\n cursor: pointer;\n }\n\n .c-", "-container:hover input:disabled ~ .c-", "-checkmark {\n background-color: ", ";\n cursor: default;\n }\n\n .c-", "-container input:disabled ~ .c-", "-checkmark {\n background-color: ", ";\n }\n\n /* When the checkbox is checked, add a blue background */\n .c-", "-container input:checked ~ .c-", "-checkmark {\n background-color: ", ";\n }\n\n .c-", "-container input:checked:disabled ~ .c-", "-checkmark {\n background-color: ", ";\n border: 0.0625rem solid ", ";\n cursor: default;\n }\n\n /* Create the checkmark/indicator (hidden when not checked) */\n .c-", "-checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n }\n\n /* Show the checkmark when checked */\n .c-", "-container input:checked ~ .c-", "-checkmark:after {\n display: block;\n }\n\n /* Style the checkmark/indicator */\n .c-", "-container .c-", "-checkmark:after {\n left: ", ";\n top: ", ";\n width: ", ";\n height: ", ";\n border: solid white;\n border-width: 0 0.21875rem 0.21875rem 0;\n -webkit-transform: rotate(35deg);\n -ms-transform: rotate(35deg);\n transform: rotate(35deg);\n }\n "])), props.id, props.theme.typography.fontFamily, padingLeft, paddingTop, props.theme.typography[props.size].fontSize, margin, marginLeft, props.id, props.id, height, width, props.theme.palette[props.color].main, props.id, props.id, props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette[props.color].main, props.id, props.id, props.theme.palette.gray[900], props.theme.palette.gray.textLight, props.id, props.id, props.id, props.id, props.id, left, top, checkWidth, checkHeight);
|
|
4625
4625
|
};
|
|
4626
4626
|
|
|
4627
4627
|
var CheckBox = function CheckBox(props) {
|
|
@@ -4635,7 +4635,7 @@ var CheckBox = function CheckBox(props) {
|
|
|
4635
4635
|
|
|
4636
4636
|
var handleChange = function handleChange(e) {
|
|
4637
4637
|
if (preventDefault) e.preventDefault();
|
|
4638
|
-
onChange(id, !checked);
|
|
4638
|
+
if (!disabled) onChange(id, !checked);
|
|
4639
4639
|
};
|
|
4640
4640
|
|
|
4641
4641
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Global, {
|
|
@@ -4754,7 +4754,7 @@ var Text$2 = newStyled.label(_templateObject$q || (_templateObject$q = _taggedTe
|
|
|
4754
4754
|
}, function (props) {
|
|
4755
4755
|
return getLabelAndTextProps()[props.size].top;
|
|
4756
4756
|
});
|
|
4757
|
-
var Input$4 = newStyled.input(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral(["\n &:checked + span {\n background-color: ", ";\n }\n\n &:focus + span {\n box-shadow: 0 0 0.0625rem\n ", ";\n }\n\n &:checked + span:before {\n transform: translateX(90%);\n }\n\n &:checked:disabled + span {\n }\n\n &:checked:disabled + span:before {\n backround-color: red;\n }\n\n &:disabled + span {\n position: absolute;\n cursor:
|
|
4757
|
+
var Input$4 = newStyled.input(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral(["\n &:checked + span {\n background-color: ", ";\n }\n\n &:focus + span {\n box-shadow: 0 0 0.0625rem\n ", ";\n }\n\n &:checked + span:before {\n transform: translateX(90%);\n }\n\n &:checked:disabled + span {\n }\n\n &:checked:disabled + span:before {\n backround-color: red;\n }\n\n &:disabled + span {\n position: absolute;\n cursor: auto;\n top: ", ";\n left: ", ";\n right: 0;\n bottom: 0;\n background-color: ", ";\n -webkit-transition: 0.4s;\n transition: 0.4s;\n height: ", ";\n width: ", ";\n border: 0.0625rem solid ", ";\n border-radius: 0.125rem;\n }\n\n &:disabled + span:before {\n position: absolute;\n content: \"\";\n height: ", ";\n width: ", ";\n left: 0.0625rem;\n top: -0.125rem;\n background-color: ", ";\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border: 0.0625rem solid ", ";\n border-radius: 0.125rem;\n }\n\n &:checked:disabled + span:before {\n position: absolute;\n content: \"\";\n height: ", ";\n width: ", ";\n left: 0.0625rem;\n top: -0.125rem;\n background-color: ", ";\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border: 0.0625rem solid ", ";\n border-radius: 0.125rem;\n }\n"])), function (props) {
|
|
4758
4758
|
return props.theme.palette[props.color].main;
|
|
4759
4759
|
}, function (props) {
|
|
4760
4760
|
return props.theme.palette[props.color].main;
|
|
@@ -4821,7 +4821,7 @@ var ToggleSwitch = function ToggleSwitch(props) {
|
|
|
4821
4821
|
|
|
4822
4822
|
function handleChange(e) {
|
|
4823
4823
|
if (preventDefault) e.preventDefault();
|
|
4824
|
-
onChange(id, !value);
|
|
4824
|
+
if (!disabled) onChange(id, !value);
|
|
4825
4825
|
}
|
|
4826
4826
|
|
|
4827
4827
|
var themeProps = {
|
|
@@ -6522,7 +6522,7 @@ var Table$2 = newStyled.div(_templateObject2$l || (_templateObject2$l = _taggedT
|
|
|
6522
6522
|
var Body$1 = newStyled.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n &::-webkit-scrollbar {\n background: white;\n height: 0;\n width: 0;\n }\n overflow: auto;\n height: ", ";\n"])), function (props) {
|
|
6523
6523
|
return props.height && props.height !== "" ? props.height : "auto";
|
|
6524
6524
|
});
|
|
6525
|
-
var Row = newStyled.div(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n cursor:
|
|
6525
|
+
var Row = newStyled.div(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n cursor: default;\n transition: all 250ms ease;\n background-color: white;\n\n &:hover {\n background-color: whitesmoke;\n }\n"])));
|
|
6526
6526
|
var HeaderRow = newStyled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n border-bottom: 1px solid #80808050;\n background-color: whitesmoke;\n border-radius: 3px 3px 0 0;\n position: sticky;\n"])));
|
|
6527
6527
|
var HeaderColumnCheck = newStyled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteral(["\n padding: 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: ", ";\n padding-left: 8px;\n border-right: 1px solid #80808050;\n"])), function (props) {
|
|
6528
6528
|
return props.check ? "8px" : "0";
|
|
@@ -6588,7 +6588,7 @@ var CheckboxLookup = function CheckboxLookup(props) {
|
|
|
6588
6588
|
});
|
|
6589
6589
|
}
|
|
6590
6590
|
|
|
6591
|
-
onChange(id, selectedItems);
|
|
6591
|
+
if (!disabled) onChange(id, selectedItems);
|
|
6592
6592
|
};
|
|
6593
6593
|
|
|
6594
6594
|
var pageDecimalCount = options.length / displayedItemsCount;
|
|
@@ -6608,7 +6608,7 @@ var CheckboxLookup = function CheckboxLookup(props) {
|
|
|
6608
6608
|
disabled: false,
|
|
6609
6609
|
checked: options.length > 0 && options.length === selectedOptions.length,
|
|
6610
6610
|
onChange: function onChange() {
|
|
6611
|
-
|
|
6611
|
+
if (!disabled) onSelectDeselectAll(options.length > 0 && options.length === selectedOptions.length ? false : true);
|
|
6612
6612
|
},
|
|
6613
6613
|
color: color,
|
|
6614
6614
|
size: size,
|
|
@@ -6616,10 +6616,10 @@ var CheckboxLookup = function CheckboxLookup(props) {
|
|
|
6616
6616
|
tooltip: label
|
|
6617
6617
|
}) : /*#__PURE__*/React__default.createElement(ToggleSwitch, {
|
|
6618
6618
|
id: id,
|
|
6619
|
-
disabled:
|
|
6619
|
+
disabled: disabled,
|
|
6620
6620
|
checked: options.length === selectedOptions.length,
|
|
6621
6621
|
onChange: function onChange() {
|
|
6622
|
-
|
|
6622
|
+
if (!disabled) onSelectDeselectAll(options.length === selectedOptions.length ? false : true);
|
|
6623
6623
|
},
|
|
6624
6624
|
color: color,
|
|
6625
6625
|
size: size,
|
|
@@ -22941,7 +22941,7 @@ var DropdownLookup = function DropdownLookup(props) {
|
|
|
22941
22941
|
className: "fas fa-times fa-fw"
|
|
22942
22942
|
})), loading && /*#__PURE__*/React__default.createElement(LoadingButtonContainer, themeProps, /*#__PURE__*/React__default.createElement("i", {
|
|
22943
22943
|
className: "fas fa-redo fa-fw"
|
|
22944
|
-
})), !loading && /*#__PURE__*/React__default.createElement(ButtonContainer$3, _extends({}, themeProps, {
|
|
22944
|
+
})), !loading && disabled ? '' : /*#__PURE__*/React__default.createElement(ButtonContainer$3, _extends({}, themeProps, {
|
|
22945
22945
|
clickable: options == null || options.length === 0,
|
|
22946
22946
|
onClick: function onClick() {
|
|
22947
22947
|
if (options == null || options.length === 0) {
|
package/lib/index.js
CHANGED
|
@@ -4662,7 +4662,7 @@ var getCheckboxCss = function getCheckboxCss(props) {
|
|
|
4662
4662
|
height = "1.6875rem";
|
|
4663
4663
|
}
|
|
4664
4664
|
|
|
4665
|
-
return css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral__default['default'](["\n .c-", "-container {\n font-family: ", ";\n display: inline-block;\n position: relative;\n padding: 0.25rem;\n padding-left: ", ";\n ", "\n cursor:
|
|
4665
|
+
return css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral__default['default'](["\n .c-", "-container {\n font-family: ", ";\n display: inline-block;\n position: relative;\n padding: 0.25rem;\n padding-left: ", ";\n ", "\n cursor: auto;\n font-size: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n margin: ", ";\n margin-left: ", ";\n }\n\n /* Hide the browser's default checkbox */\n .c-", "-container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n /* Create a custom checkbox */\n .c-", "-checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: ", ";\n width: ", ";\n background-color: #eee;\n border: 0.0625rem solid ", ";\n border-radius: 2px;\n transition: all 200ms ease;\n }\n\n /* On mouse-over, add a grey background color */\n .c-", "-container:hover input ~ .c-", "-checkmark {\n cursor: pointer;\n }\n\n .c-", "-container:hover input:disabled ~ .c-", "-checkmark {\n background-color: ", ";\n cursor: default;\n }\n\n .c-", "-container input:disabled ~ .c-", "-checkmark {\n background-color: ", ";\n }\n\n /* When the checkbox is checked, add a blue background */\n .c-", "-container input:checked ~ .c-", "-checkmark {\n background-color: ", ";\n }\n\n .c-", "-container input:checked:disabled ~ .c-", "-checkmark {\n background-color: ", ";\n border: 0.0625rem solid ", ";\n cursor: default;\n }\n\n /* Create the checkmark/indicator (hidden when not checked) */\n .c-", "-checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n }\n\n /* Show the checkmark when checked */\n .c-", "-container input:checked ~ .c-", "-checkmark:after {\n display: block;\n }\n\n /* Style the checkmark/indicator */\n .c-", "-container .c-", "-checkmark:after {\n left: ", ";\n top: ", ";\n width: ", ";\n height: ", ";\n border: solid white;\n border-width: 0 0.21875rem 0.21875rem 0;\n -webkit-transform: rotate(35deg);\n -ms-transform: rotate(35deg);\n transform: rotate(35deg);\n }\n "])), props.id, props.theme.typography.fontFamily, padingLeft, paddingTop, props.theme.typography[props.size].fontSize, margin, marginLeft, props.id, props.id, height, width, props.theme.palette[props.color].main, props.id, props.id, props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette[props.color].main, props.id, props.id, props.theme.palette.gray[900], props.theme.palette.gray.textLight, props.id, props.id, props.id, props.id, props.id, left, top, checkWidth, checkHeight);
|
|
4666
4666
|
};
|
|
4667
4667
|
|
|
4668
4668
|
var CheckBox = function CheckBox(props) {
|
|
@@ -4676,7 +4676,7 @@ var CheckBox = function CheckBox(props) {
|
|
|
4676
4676
|
|
|
4677
4677
|
var handleChange = function handleChange(e) {
|
|
4678
4678
|
if (preventDefault) e.preventDefault();
|
|
4679
|
-
onChange(id, !checked);
|
|
4679
|
+
if (!disabled) onChange(id, !checked);
|
|
4680
4680
|
};
|
|
4681
4681
|
|
|
4682
4682
|
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Global, {
|
|
@@ -4795,7 +4795,7 @@ var Text$2 = newStyled.label(_templateObject$q || (_templateObject$q = _taggedTe
|
|
|
4795
4795
|
}, function (props) {
|
|
4796
4796
|
return getLabelAndTextProps()[props.size].top;
|
|
4797
4797
|
});
|
|
4798
|
-
var Input$4 = newStyled.input(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral__default['default'](["\n &:checked + span {\n background-color: ", ";\n }\n\n &:focus + span {\n box-shadow: 0 0 0.0625rem\n ", ";\n }\n\n &:checked + span:before {\n transform: translateX(90%);\n }\n\n &:checked:disabled + span {\n }\n\n &:checked:disabled + span:before {\n backround-color: red;\n }\n\n &:disabled + span {\n position: absolute;\n cursor:
|
|
4798
|
+
var Input$4 = newStyled.input(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral__default['default'](["\n &:checked + span {\n background-color: ", ";\n }\n\n &:focus + span {\n box-shadow: 0 0 0.0625rem\n ", ";\n }\n\n &:checked + span:before {\n transform: translateX(90%);\n }\n\n &:checked:disabled + span {\n }\n\n &:checked:disabled + span:before {\n backround-color: red;\n }\n\n &:disabled + span {\n position: absolute;\n cursor: auto;\n top: ", ";\n left: ", ";\n right: 0;\n bottom: 0;\n background-color: ", ";\n -webkit-transition: 0.4s;\n transition: 0.4s;\n height: ", ";\n width: ", ";\n border: 0.0625rem solid ", ";\n border-radius: 0.125rem;\n }\n\n &:disabled + span:before {\n position: absolute;\n content: \"\";\n height: ", ";\n width: ", ";\n left: 0.0625rem;\n top: -0.125rem;\n background-color: ", ";\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border: 0.0625rem solid ", ";\n border-radius: 0.125rem;\n }\n\n &:checked:disabled + span:before {\n position: absolute;\n content: \"\";\n height: ", ";\n width: ", ";\n left: 0.0625rem;\n top: -0.125rem;\n background-color: ", ";\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border: 0.0625rem solid ", ";\n border-radius: 0.125rem;\n }\n"])), function (props) {
|
|
4799
4799
|
return props.theme.palette[props.color].main;
|
|
4800
4800
|
}, function (props) {
|
|
4801
4801
|
return props.theme.palette[props.color].main;
|
|
@@ -4862,7 +4862,7 @@ var ToggleSwitch = function ToggleSwitch(props) {
|
|
|
4862
4862
|
|
|
4863
4863
|
function handleChange(e) {
|
|
4864
4864
|
if (preventDefault) e.preventDefault();
|
|
4865
|
-
onChange(id, !value);
|
|
4865
|
+
if (!disabled) onChange(id, !value);
|
|
4866
4866
|
}
|
|
4867
4867
|
|
|
4868
4868
|
var themeProps = {
|
|
@@ -6563,7 +6563,7 @@ var Table$2 = newStyled.div(_templateObject2$l || (_templateObject2$l = _taggedT
|
|
|
6563
6563
|
var Body$1 = newStyled.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: column;\n &::-webkit-scrollbar {\n background: white;\n height: 0;\n width: 0;\n }\n overflow: auto;\n height: ", ";\n"])), function (props) {
|
|
6564
6564
|
return props.height && props.height !== "" ? props.height : "auto";
|
|
6565
6565
|
});
|
|
6566
|
-
var Row = newStyled.div(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n cursor:
|
|
6566
|
+
var Row = newStyled.div(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n cursor: default;\n transition: all 250ms ease;\n background-color: white;\n\n &:hover {\n background-color: whitesmoke;\n }\n"])));
|
|
6567
6567
|
var HeaderRow = newStyled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n border-bottom: 1px solid #80808050;\n background-color: whitesmoke;\n border-radius: 3px 3px 0 0;\n position: sticky;\n"])));
|
|
6568
6568
|
var HeaderColumnCheck = newStyled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteral__default['default'](["\n padding: 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: ", ";\n padding-left: 8px;\n border-right: 1px solid #80808050;\n"])), function (props) {
|
|
6569
6569
|
return props.check ? "8px" : "0";
|
|
@@ -6629,7 +6629,7 @@ var CheckboxLookup = function CheckboxLookup(props) {
|
|
|
6629
6629
|
});
|
|
6630
6630
|
}
|
|
6631
6631
|
|
|
6632
|
-
onChange(id, selectedItems);
|
|
6632
|
+
if (!disabled) onChange(id, selectedItems);
|
|
6633
6633
|
};
|
|
6634
6634
|
|
|
6635
6635
|
var pageDecimalCount = options.length / displayedItemsCount;
|
|
@@ -6649,7 +6649,7 @@ var CheckboxLookup = function CheckboxLookup(props) {
|
|
|
6649
6649
|
disabled: false,
|
|
6650
6650
|
checked: options.length > 0 && options.length === selectedOptions.length,
|
|
6651
6651
|
onChange: function onChange() {
|
|
6652
|
-
|
|
6652
|
+
if (!disabled) onSelectDeselectAll(options.length > 0 && options.length === selectedOptions.length ? false : true);
|
|
6653
6653
|
},
|
|
6654
6654
|
color: color,
|
|
6655
6655
|
size: size,
|
|
@@ -6657,10 +6657,10 @@ var CheckboxLookup = function CheckboxLookup(props) {
|
|
|
6657
6657
|
tooltip: label
|
|
6658
6658
|
}) : /*#__PURE__*/React__default['default'].createElement(ToggleSwitch, {
|
|
6659
6659
|
id: id,
|
|
6660
|
-
disabled:
|
|
6660
|
+
disabled: disabled,
|
|
6661
6661
|
checked: options.length === selectedOptions.length,
|
|
6662
6662
|
onChange: function onChange() {
|
|
6663
|
-
|
|
6663
|
+
if (!disabled) onSelectDeselectAll(options.length === selectedOptions.length ? false : true);
|
|
6664
6664
|
},
|
|
6665
6665
|
color: color,
|
|
6666
6666
|
size: size,
|
|
@@ -22982,7 +22982,7 @@ var DropdownLookup = function DropdownLookup(props) {
|
|
|
22982
22982
|
className: "fas fa-times fa-fw"
|
|
22983
22983
|
})), loading && /*#__PURE__*/React__default['default'].createElement(LoadingButtonContainer, themeProps, /*#__PURE__*/React__default['default'].createElement("i", {
|
|
22984
22984
|
className: "fas fa-redo fa-fw"
|
|
22985
|
-
})), !loading && /*#__PURE__*/React__default['default'].createElement(ButtonContainer$3, _extends__default['default']({}, themeProps, {
|
|
22985
|
+
})), !loading && disabled ? '' : /*#__PURE__*/React__default['default'].createElement(ButtonContainer$3, _extends__default['default']({}, themeProps, {
|
|
22986
22986
|
clickable: options == null || options.length === 0,
|
|
22987
22987
|
onClick: function onClick() {
|
|
22988
22988
|
if (options == null || options.length === 0) {
|