@lanaco/lnc-react-ui 3.11.8 → 3.11.10
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 +55 -9
- package/lib/index.js +55 -9
- package/package.json +1 -1
package/lib/index.esm.js
CHANGED
|
@@ -13440,7 +13440,7 @@ var getLabelDirection$2 = function getLabelDirection(direction) {
|
|
|
13440
13440
|
var getCheckSize = function getCheckSize(theme, size) {
|
|
13441
13441
|
return "calc(".concat(theme.components.Checkbox["default"].enabled.sizes[size], " / 2)");
|
|
13442
13442
|
};
|
|
13443
|
-
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral(["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13443
|
+
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral(["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:checked ~ .checkbox-label {\n color: ", ";\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:indeterminate ~ .checkbox-label {\n color: ", ";\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:disabled ~ .checkbox-label {\n color: ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13444
13444
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
13445
13445
|
}, function (props) {
|
|
13446
13446
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -13454,6 +13454,8 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13454
13454
|
return getComponentTypographyCss(props.theme, "Checkbox", props.size, "enabled");
|
|
13455
13455
|
}, function (props) {
|
|
13456
13456
|
return !props.disabled && props.readOnly == false && "cursor: pointer;";
|
|
13457
|
+
}, function (props) {
|
|
13458
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13457
13459
|
}, function (props) {
|
|
13458
13460
|
return props.theme.components.Checkbox["default"].enabled.sizes[props.size];
|
|
13459
13461
|
}, function (props) {
|
|
@@ -13478,14 +13480,20 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13478
13480
|
return getCheckSize(props.theme, props.size);
|
|
13479
13481
|
}, function (props) {
|
|
13480
13482
|
return getCheckSize(props.theme, props.size);
|
|
13483
|
+
}, function (props) {
|
|
13484
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "text");
|
|
13481
13485
|
}, function (props) {
|
|
13482
13486
|
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "background", "backgroundOpacity");
|
|
13483
13487
|
}, function (props) {
|
|
13484
13488
|
return getCheckSize(props.theme, props.size);
|
|
13485
13489
|
}, function (props) {
|
|
13486
13490
|
return getCheckSize(props.theme, props.size);
|
|
13491
|
+
}, function (props) {
|
|
13492
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13487
13493
|
}, function (props) {
|
|
13488
13494
|
return props.readOnly == false && "background-color: ".concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n border-color: ").concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n ");
|
|
13495
|
+
}, function (props) {
|
|
13496
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "text");
|
|
13489
13497
|
}, function (props) {
|
|
13490
13498
|
return getOutlineCss(props.theme);
|
|
13491
13499
|
}, function (props) {
|
|
@@ -14316,10 +14324,8 @@ Icon.propTypes = {
|
|
|
14316
14324
|
};
|
|
14317
14325
|
|
|
14318
14326
|
var _templateObject$1n;
|
|
14319
|
-
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral(["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n
|
|
14327
|
+
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral(["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n top: 1.3rem;\n font-size: 1rem;\n width: 100%;\n @media (max-width: 725px) {\n width: ", ";\n }\n @media (max-width: 550px) {\n width: 100%;\n }\n }\n & input {\n border: none;\n outline: none;\n ", "\n }\n & .react-datepicker {\n position: relative;\n background-color: ", ";\n color: ", ";\n border: none;\n box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0px 2px 4px -1px rgba(0, 0, 0, 0.06);\n border-radius: 16px;\n }\n & .react-datepicker__day {\n min-width: 2rem;\n width: ", ";\n height: ", ";\n }\n & .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__year-read-view--down-arrow {\n display: none;\n }\n & .react-datepicker__day--today {\n border: 1px solid\n ", ";\n color: ", " !important;\n border-radius: 8px;\n }\n & .react-datepicker__current-month,\n & .react-datepicker-time__header,\n & .react-datepicker-year-header {\n padding: 0.875rem 0 0 0;\n font-size: 1rem;\n font-weight: 400;\n }\n & .react-datepicker__day--outside-month {\n color: ", " !important;\n background-color: transparent !important;\n }\n & .react-datepicker__header {\n border-radius: 8px 8px 0 0;\n background-color: transparent;\n border-bottom: 1px solid transparent;\n font-size: 1rem;\n }\n & .react-datepicker__day-names {\n margin-top: 3.5rem;\n color: ", " !important;\n }\n & .react-datepicker__day-name,\n & .react-datepicker__day,\n & .react-datepicker__time-name {\n color: var(--primary);\n font-size: 1rem;\n min-width: 2rem;\n padding: ", ";\n }\n & .react-datepicker__day-name {\n line-height: 0;\n }\n & .react-datepicker__day--keyboard-selected:hover,\n & .react-datepicker__month-text--keyboard-selected:hover,\n & .react-datepicker__quarter-text--keyboard-selected:hover,\n & .react-datepicker__year-text--keyboard-selected:hover,\n & .react-datepicker__day:hover {\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n font-size: 1rem;\n background-color: ", ";\n }\n\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n width: 100%;\n left: 0%;\n display: flex;\n flex-wrap: wrap;\n border: 1px solid transparent;\n box-shadow: 0px 0px 20px rgba(65, 43, 118, 0.1);\n border-radius: 8px;\n padding: 4px;\n }\n\n & .react-datepicker__year-option,\n & .react-datepicker__month-year-option {\n width: 33.33%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__month-option {\n width: 50%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__year-option:hover,\n & .react-datepicker__month-option:hover,\n & .react-datepicker__month-year-option:hover {\n border-radius: 8px;\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option:nth-of-type(1),\n & .react-datepicker__month-year-option:nth-of-type(1),\n & .react-datepicker__year-option:last-of-type,\n & .react-datepicker__month-year-option:last-of-type {\n width: 100%;\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected,\n & .react-datepicker__month-year-option--selected {\n position: unset;\n }\n\n & .react-datepicker__year-option--selected_year {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected {\n display: none;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n top: -4px;\n border-bottom-color: #ccc;\n }\n & .react-datepicker__year-read-view,\n & .react-datepicker__month-read-view,\n & .react-datepicker__month-year-read-view {\n color: transparent;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n top: 4px;\n border-top-color: #ccc;\n }\n\n & .react-datepicker__navigation--years {\n background: none;\n line-height: 1.7rem;\n text-align: center;\n cursor: pointer;\n padding: 0;\n border: 0.45rem solid transparent;\n z-index: 1;\n height: 10px;\n width: 10px;\n text-indent: -999em;\n overflow: hidden;\n position: relative;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-width: 1px 1px 0 0;\n }\n & .react-datepicker__navigation {\n top: 1rem;\n z-index: 40;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow {\n top: 4px;\n border-color: transparent;\n padding: 4px;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-color: ", ";\n }\n & .react-datepicker__header--time {\n border-bottom: none;\n }\n & .react-datepicker__time {\n ", "\n background-color: var(--primary-100) !important;\n font-size: 0.9rem;\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item:hover {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n border-bottom-color: var(--primary);\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n border-top-color: var(--primary);\n }\n & .react-datepicker-popper[data-placement^=\"bottom\"] {\n padding-top: 0;\n }\n & .react-datepicker__day--selected,\n & .react-datepicker__day--in-selecting-range,\n & .react-datepicker__day--in-range,\n & .react-datepicker__month-text--selected,\n & .react-datepicker__month-text--in-selecting-range,\n & .react-datepicker__month-text--in-range,\n & .react-datepicker__quarter-text--selected,\n & .react-datepicker__quarter-text--in-selecting-range,\n & .react-datepicker__quarter-text--in-range,\n & .react-datepicker__year-text--selected,\n & .react-datepicker__year-text--in-selecting-range,\n & .react-datepicker__year-text--in-range {\n background-color: ", ";\n color: ", ";\n border: none;\n }\n &\n .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__day--selecting-range-start, .react-datepicker__day--selecting-range-end, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {\n border-radius: 8px;\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__day--selecting-range-start,\n & .react-datepicker__day--selecting-range-end {\n background-color: ", ";\n color: ", ";\n }\n\n & .react-datepicker__day--keyboard-selected {\n background-color: transparent;\n }\n\n & .react-datepicker__day--disabled {\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
14320
14328
|
return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
|
|
14321
|
-
}, function (props) {
|
|
14322
|
-
return props.monthsShown > 2 ? 3 * 100 + "%" : props.monthsShown * 100 + "%";
|
|
14323
14329
|
}, function (props) {
|
|
14324
14330
|
return props.monthsShown > 1 ? "200%" : "100%";
|
|
14325
14331
|
}, function (props) {
|
|
@@ -14328,6 +14334,10 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
|
|
|
14328
14334
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "background");
|
|
14329
14335
|
}, function (props) {
|
|
14330
14336
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "text");
|
|
14337
|
+
}, function (p) {
|
|
14338
|
+
return p.withPortal === true ? "2.75rem" : "2.25rem";
|
|
14339
|
+
}, function (p) {
|
|
14340
|
+
return p.withPortal === true ? "2.75rem" : "2.25rem";
|
|
14331
14341
|
}, function (props) {
|
|
14332
14342
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "today");
|
|
14333
14343
|
}, function (props) {
|
|
@@ -14336,6 +14346,8 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
|
|
|
14336
14346
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
|
|
14337
14347
|
}, function (props) {
|
|
14338
14348
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
|
|
14349
|
+
}, function (p) {
|
|
14350
|
+
return p.withPortal === true ? "0" : "0.3rem";
|
|
14339
14351
|
}, function (props) {
|
|
14340
14352
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "hover", "background", "backgroundOpacity");
|
|
14341
14353
|
}, function (props) {
|
|
@@ -43502,7 +43514,8 @@ var DateInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
|
43502
43514
|
return /*#__PURE__*/React__default.createElement(Styled_DatePickerWrapper, _extends$4({}, themeProps, {
|
|
43503
43515
|
className: className,
|
|
43504
43516
|
style: style,
|
|
43505
|
-
monthsShown: monthsShown
|
|
43517
|
+
monthsShown: monthsShown,
|
|
43518
|
+
withPortal: withPortal
|
|
43506
43519
|
}), /*#__PURE__*/React__default.createElement(ReactDatePicker, _extends$4({}, rest, {
|
|
43507
43520
|
onChange: onChange,
|
|
43508
43521
|
selectsRange: selectsRange,
|
|
@@ -45811,7 +45824,7 @@ var getLabelDirection$1 = function getLabelDirection(direction) {
|
|
|
45811
45824
|
if (direction == "left") return "row-reverse";
|
|
45812
45825
|
return "row";
|
|
45813
45826
|
};
|
|
45814
|
-
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral(["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n"])), function (props) {
|
|
45827
|
+
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral(["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n\n \n & input:checked ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n\n & input:disabled ~ .lnc-radio-input-label {\n color: ", ";\n }\n \n & input[disabled]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n\n & input[disabled] ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input[hover]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n"])), function (props) {
|
|
45815
45828
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
45816
45829
|
}, function (props) {
|
|
45817
45830
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -45837,15 +45850,43 @@ var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _t
|
|
|
45837
45850
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45838
45851
|
}, function (props) {
|
|
45839
45852
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45853
|
+
}, function (props) {
|
|
45854
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45855
|
+
}, function (props) {
|
|
45856
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "text");
|
|
45840
45857
|
}, function (props) {
|
|
45841
45858
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "background", "backgroundOpacity");
|
|
45842
45859
|
}, function (props) {
|
|
45843
45860
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45844
45861
|
}, function (props) {
|
|
45845
45862
|
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45863
|
+
}, function (props) {
|
|
45864
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "text");
|
|
45865
|
+
}, function (props) {
|
|
45866
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45867
|
+
}, function (props) {
|
|
45868
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45869
|
+
}, function (props) {
|
|
45870
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45871
|
+
}, function (props) {
|
|
45872
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45873
|
+
}, function (props) {
|
|
45874
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45875
|
+
}, function (props) {
|
|
45876
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45877
|
+
}, function (props) {
|
|
45878
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45879
|
+
}, function (props) {
|
|
45880
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "background", "backgroundOpacity");
|
|
45881
|
+
}, function (props) {
|
|
45882
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45883
|
+
}, function (props) {
|
|
45884
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45846
45885
|
});
|
|
45847
|
-
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
45886
|
+
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n"])), function (props) {
|
|
45848
45887
|
return !props.disabled && props.readOnly == false && "cursor: pointer";
|
|
45888
|
+
}, function (props) {
|
|
45889
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "text");
|
|
45849
45890
|
});
|
|
45850
45891
|
var RadioInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
45851
45892
|
var id = props.id,
|
|
@@ -45949,6 +45990,7 @@ var RadioInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
|
45949
45990
|
className: "inner-circle",
|
|
45950
45991
|
strokeWidth: "0"
|
|
45951
45992
|
}))), /*#__PURE__*/React__default.createElement(Label$3, _extends$4({}, themeProps, {
|
|
45993
|
+
className: "lnc-radio-input-label",
|
|
45952
45994
|
disalbed: disabled,
|
|
45953
45995
|
readOnly: readOnly,
|
|
45954
45996
|
title: label,
|
|
@@ -71198,8 +71240,10 @@ DropdownMenu.propTypes = {
|
|
|
71198
71240
|
|
|
71199
71241
|
var _excluded$L = ["active", "icon", "disabled", "isNested", "showNested", "value", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "toggleNested", "onItemSelected", "className", "style", "color", "iconProps", "__TYPE__", "children"];
|
|
71200
71242
|
var _templateObject$I;
|
|
71201
|
-
var Item$1 = newStyled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n box-sizing: border-box;\n cursor: ", ";\n width: 100%;\n border-radius: 6px;\n display: flex;\n align-items: center;\n min-height: 2.25rem;\n gap: 0.563rem;\n padding: 0.563rem;\n &:hover {\n background-color: ", ";\n color: ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n }\n }\n ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n ", ";\n background: transparent;\n }\n & .sub-menu-icon-lnc {\n margin-left: auto;\n transform: ", ";\n transition: transform 0.25s ease;\n }\n ", "\n outline: none;\n ", ";\n"])), function (props) {
|
|
71243
|
+
var Item$1 = newStyled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n box-sizing: border-box;\n cursor: ", ";\n width: 100%;\n border-radius: 6px;\n display: flex;\n align-items: center;\n min-height: 2.25rem;\n gap: 0.563rem;\n padding: 0.563rem;\n color: ", ";\n &:hover {\n background-color: ", ";\n color: ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n }\n }\n ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n ", ";\n background: transparent;\n }\n & .sub-menu-icon-lnc {\n margin-left: auto;\n transform: ", ";\n transition: transform 0.25s ease;\n }\n ", "\n outline: none;\n ", ";\n"])), function (props) {
|
|
71202
71244
|
return props.disabled == false ? "pointer" : "context-menu";
|
|
71245
|
+
}, function (props) {
|
|
71246
|
+
return getColorRgbaValue(props.theme, "MenuItem", props.color, props.isActive === true ? "active" : "enabled", "text");
|
|
71203
71247
|
}, function (props) {
|
|
71204
71248
|
return getColorRgbaValue(props.theme, "MenuItem", props.color, "hover", "background", "backgroundOpacity");
|
|
71205
71249
|
}, function (props) {
|
|
@@ -71387,7 +71431,9 @@ var DropdownItem = /*#__PURE__*/React__default.forwardRef(function (props, ref)
|
|
|
71387
71431
|
}, rest), icon && /*#__PURE__*/React__default.createElement(Icon, _extends$4({
|
|
71388
71432
|
icon: icon,
|
|
71389
71433
|
className: "drop-down-icon-lnc"
|
|
71390
|
-
}, iconProps)), /*#__PURE__*/React__default.createElement("div",
|
|
71434
|
+
}, iconProps)), /*#__PURE__*/React__default.createElement("div", {
|
|
71435
|
+
className: "menu-item-text-lnc"
|
|
71436
|
+
}, children), isNested && /*#__PURE__*/React__default.createElement(Icon, {
|
|
71391
71437
|
icon: "angle-down",
|
|
71392
71438
|
className: "sub-menu-icon-lnc"
|
|
71393
71439
|
})));
|
package/lib/index.js
CHANGED
|
@@ -13489,7 +13489,7 @@ var getLabelDirection$2 = function getLabelDirection(direction) {
|
|
|
13489
13489
|
var getCheckSize = function getCheckSize(theme, size) {
|
|
13490
13490
|
return "calc(".concat(theme.components.Checkbox["default"].enabled.sizes[size], " / 2)");
|
|
13491
13491
|
};
|
|
13492
|
-
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral__default["default"](["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13492
|
+
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral__default["default"](["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:checked ~ .checkbox-label {\n color: ", ";\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:indeterminate ~ .checkbox-label {\n color: ", ";\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:disabled ~ .checkbox-label {\n color: ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13493
13493
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
13494
13494
|
}, function (props) {
|
|
13495
13495
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -13503,6 +13503,8 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13503
13503
|
return getComponentTypographyCss(props.theme, "Checkbox", props.size, "enabled");
|
|
13504
13504
|
}, function (props) {
|
|
13505
13505
|
return !props.disabled && props.readOnly == false && "cursor: pointer;";
|
|
13506
|
+
}, function (props) {
|
|
13507
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13506
13508
|
}, function (props) {
|
|
13507
13509
|
return props.theme.components.Checkbox["default"].enabled.sizes[props.size];
|
|
13508
13510
|
}, function (props) {
|
|
@@ -13527,14 +13529,20 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13527
13529
|
return getCheckSize(props.theme, props.size);
|
|
13528
13530
|
}, function (props) {
|
|
13529
13531
|
return getCheckSize(props.theme, props.size);
|
|
13532
|
+
}, function (props) {
|
|
13533
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "text");
|
|
13530
13534
|
}, function (props) {
|
|
13531
13535
|
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "background", "backgroundOpacity");
|
|
13532
13536
|
}, function (props) {
|
|
13533
13537
|
return getCheckSize(props.theme, props.size);
|
|
13534
13538
|
}, function (props) {
|
|
13535
13539
|
return getCheckSize(props.theme, props.size);
|
|
13540
|
+
}, function (props) {
|
|
13541
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13536
13542
|
}, function (props) {
|
|
13537
13543
|
return props.readOnly == false && "background-color: ".concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n border-color: ").concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n ");
|
|
13544
|
+
}, function (props) {
|
|
13545
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "text");
|
|
13538
13546
|
}, function (props) {
|
|
13539
13547
|
return getOutlineCss(props.theme);
|
|
13540
13548
|
}, function (props) {
|
|
@@ -14365,10 +14373,8 @@ Icon.propTypes = {
|
|
|
14365
14373
|
};
|
|
14366
14374
|
|
|
14367
14375
|
var _templateObject$1n;
|
|
14368
|
-
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral__default["default"](["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n
|
|
14376
|
+
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral__default["default"](["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n top: 1.3rem;\n font-size: 1rem;\n width: 100%;\n @media (max-width: 725px) {\n width: ", ";\n }\n @media (max-width: 550px) {\n width: 100%;\n }\n }\n & input {\n border: none;\n outline: none;\n ", "\n }\n & .react-datepicker {\n position: relative;\n background-color: ", ";\n color: ", ";\n border: none;\n box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0px 2px 4px -1px rgba(0, 0, 0, 0.06);\n border-radius: 16px;\n }\n & .react-datepicker__day {\n min-width: 2rem;\n width: ", ";\n height: ", ";\n }\n & .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__year-read-view--down-arrow {\n display: none;\n }\n & .react-datepicker__day--today {\n border: 1px solid\n ", ";\n color: ", " !important;\n border-radius: 8px;\n }\n & .react-datepicker__current-month,\n & .react-datepicker-time__header,\n & .react-datepicker-year-header {\n padding: 0.875rem 0 0 0;\n font-size: 1rem;\n font-weight: 400;\n }\n & .react-datepicker__day--outside-month {\n color: ", " !important;\n background-color: transparent !important;\n }\n & .react-datepicker__header {\n border-radius: 8px 8px 0 0;\n background-color: transparent;\n border-bottom: 1px solid transparent;\n font-size: 1rem;\n }\n & .react-datepicker__day-names {\n margin-top: 3.5rem;\n color: ", " !important;\n }\n & .react-datepicker__day-name,\n & .react-datepicker__day,\n & .react-datepicker__time-name {\n color: var(--primary);\n font-size: 1rem;\n min-width: 2rem;\n padding: ", ";\n }\n & .react-datepicker__day-name {\n line-height: 0;\n }\n & .react-datepicker__day--keyboard-selected:hover,\n & .react-datepicker__month-text--keyboard-selected:hover,\n & .react-datepicker__quarter-text--keyboard-selected:hover,\n & .react-datepicker__year-text--keyboard-selected:hover,\n & .react-datepicker__day:hover {\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n font-size: 1rem;\n background-color: ", ";\n }\n\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n width: 100%;\n left: 0%;\n display: flex;\n flex-wrap: wrap;\n border: 1px solid transparent;\n box-shadow: 0px 0px 20px rgba(65, 43, 118, 0.1);\n border-radius: 8px;\n padding: 4px;\n }\n\n & .react-datepicker__year-option,\n & .react-datepicker__month-year-option {\n width: 33.33%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__month-option {\n width: 50%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__year-option:hover,\n & .react-datepicker__month-option:hover,\n & .react-datepicker__month-year-option:hover {\n border-radius: 8px;\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option:nth-of-type(1),\n & .react-datepicker__month-year-option:nth-of-type(1),\n & .react-datepicker__year-option:last-of-type,\n & .react-datepicker__month-year-option:last-of-type {\n width: 100%;\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected,\n & .react-datepicker__month-year-option--selected {\n position: unset;\n }\n\n & .react-datepicker__year-option--selected_year {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected {\n display: none;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n top: -4px;\n border-bottom-color: #ccc;\n }\n & .react-datepicker__year-read-view,\n & .react-datepicker__month-read-view,\n & .react-datepicker__month-year-read-view {\n color: transparent;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n top: 4px;\n border-top-color: #ccc;\n }\n\n & .react-datepicker__navigation--years {\n background: none;\n line-height: 1.7rem;\n text-align: center;\n cursor: pointer;\n padding: 0;\n border: 0.45rem solid transparent;\n z-index: 1;\n height: 10px;\n width: 10px;\n text-indent: -999em;\n overflow: hidden;\n position: relative;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-width: 1px 1px 0 0;\n }\n & .react-datepicker__navigation {\n top: 1rem;\n z-index: 40;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow {\n top: 4px;\n border-color: transparent;\n padding: 4px;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-color: ", ";\n }\n & .react-datepicker__header--time {\n border-bottom: none;\n }\n & .react-datepicker__time {\n ", "\n background-color: var(--primary-100) !important;\n font-size: 0.9rem;\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item:hover {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n border-bottom-color: var(--primary);\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n border-top-color: var(--primary);\n }\n & .react-datepicker-popper[data-placement^=\"bottom\"] {\n padding-top: 0;\n }\n & .react-datepicker__day--selected,\n & .react-datepicker__day--in-selecting-range,\n & .react-datepicker__day--in-range,\n & .react-datepicker__month-text--selected,\n & .react-datepicker__month-text--in-selecting-range,\n & .react-datepicker__month-text--in-range,\n & .react-datepicker__quarter-text--selected,\n & .react-datepicker__quarter-text--in-selecting-range,\n & .react-datepicker__quarter-text--in-range,\n & .react-datepicker__year-text--selected,\n & .react-datepicker__year-text--in-selecting-range,\n & .react-datepicker__year-text--in-range {\n background-color: ", ";\n color: ", ";\n border: none;\n }\n &\n .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__day--selecting-range-start, .react-datepicker__day--selecting-range-end, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {\n border-radius: 8px;\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__day--selecting-range-start,\n & .react-datepicker__day--selecting-range-end {\n background-color: ", ";\n color: ", ";\n }\n\n & .react-datepicker__day--keyboard-selected {\n background-color: transparent;\n }\n\n & .react-datepicker__day--disabled {\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
14369
14377
|
return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
|
|
14370
|
-
}, function (props) {
|
|
14371
|
-
return props.monthsShown > 2 ? 3 * 100 + "%" : props.monthsShown * 100 + "%";
|
|
14372
14378
|
}, function (props) {
|
|
14373
14379
|
return props.monthsShown > 1 ? "200%" : "100%";
|
|
14374
14380
|
}, function (props) {
|
|
@@ -14377,6 +14383,10 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
|
|
|
14377
14383
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "background");
|
|
14378
14384
|
}, function (props) {
|
|
14379
14385
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "text");
|
|
14386
|
+
}, function (p) {
|
|
14387
|
+
return p.withPortal === true ? "2.75rem" : "2.25rem";
|
|
14388
|
+
}, function (p) {
|
|
14389
|
+
return p.withPortal === true ? "2.75rem" : "2.25rem";
|
|
14380
14390
|
}, function (props) {
|
|
14381
14391
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "today");
|
|
14382
14392
|
}, function (props) {
|
|
@@ -14385,6 +14395,8 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
|
|
|
14385
14395
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
|
|
14386
14396
|
}, function (props) {
|
|
14387
14397
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
|
|
14398
|
+
}, function (p) {
|
|
14399
|
+
return p.withPortal === true ? "0" : "0.3rem";
|
|
14388
14400
|
}, function (props) {
|
|
14389
14401
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "hover", "background", "backgroundOpacity");
|
|
14390
14402
|
}, function (props) {
|
|
@@ -43551,7 +43563,8 @@ var DateInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
43551
43563
|
return /*#__PURE__*/React__default["default"].createElement(Styled_DatePickerWrapper, _extends__default$1["default"]({}, themeProps, {
|
|
43552
43564
|
className: className,
|
|
43553
43565
|
style: style,
|
|
43554
|
-
monthsShown: monthsShown
|
|
43566
|
+
monthsShown: monthsShown,
|
|
43567
|
+
withPortal: withPortal
|
|
43555
43568
|
}), /*#__PURE__*/React__default["default"].createElement(ReactDatePicker, _extends__default$1["default"]({}, rest, {
|
|
43556
43569
|
onChange: onChange,
|
|
43557
43570
|
selectsRange: selectsRange,
|
|
@@ -45860,7 +45873,7 @@ var getLabelDirection$1 = function getLabelDirection(direction) {
|
|
|
45860
45873
|
if (direction == "left") return "row-reverse";
|
|
45861
45874
|
return "row";
|
|
45862
45875
|
};
|
|
45863
|
-
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral__default["default"](["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n"])), function (props) {
|
|
45876
|
+
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral__default["default"](["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n\n \n & input:checked ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n\n & input:disabled ~ .lnc-radio-input-label {\n color: ", ";\n }\n \n & input[disabled]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n\n & input[disabled] ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input[hover]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n"])), function (props) {
|
|
45864
45877
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
45865
45878
|
}, function (props) {
|
|
45866
45879
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -45886,15 +45899,43 @@ var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _t
|
|
|
45886
45899
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45887
45900
|
}, function (props) {
|
|
45888
45901
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45902
|
+
}, function (props) {
|
|
45903
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45904
|
+
}, function (props) {
|
|
45905
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "text");
|
|
45889
45906
|
}, function (props) {
|
|
45890
45907
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "background", "backgroundOpacity");
|
|
45891
45908
|
}, function (props) {
|
|
45892
45909
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45893
45910
|
}, function (props) {
|
|
45894
45911
|
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45912
|
+
}, function (props) {
|
|
45913
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "text");
|
|
45914
|
+
}, function (props) {
|
|
45915
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45916
|
+
}, function (props) {
|
|
45917
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45918
|
+
}, function (props) {
|
|
45919
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45920
|
+
}, function (props) {
|
|
45921
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45922
|
+
}, function (props) {
|
|
45923
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45924
|
+
}, function (props) {
|
|
45925
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45926
|
+
}, function (props) {
|
|
45927
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45928
|
+
}, function (props) {
|
|
45929
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "background", "backgroundOpacity");
|
|
45930
|
+
}, function (props) {
|
|
45931
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45932
|
+
}, function (props) {
|
|
45933
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45895
45934
|
});
|
|
45896
|
-
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral__default["default"](["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
45935
|
+
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral__default["default"](["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n"])), function (props) {
|
|
45897
45936
|
return !props.disabled && props.readOnly == false && "cursor: pointer";
|
|
45937
|
+
}, function (props) {
|
|
45938
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "text");
|
|
45898
45939
|
});
|
|
45899
45940
|
var RadioInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
45900
45941
|
var id = props.id,
|
|
@@ -45998,6 +46039,7 @@ var RadioInput = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
45998
46039
|
className: "inner-circle",
|
|
45999
46040
|
strokeWidth: "0"
|
|
46000
46041
|
}))), /*#__PURE__*/React__default["default"].createElement(Label$3, _extends__default$1["default"]({}, themeProps, {
|
|
46042
|
+
className: "lnc-radio-input-label",
|
|
46001
46043
|
disalbed: disabled,
|
|
46002
46044
|
readOnly: readOnly,
|
|
46003
46045
|
title: label,
|
|
@@ -71247,8 +71289,10 @@ DropdownMenu.propTypes = {
|
|
|
71247
71289
|
|
|
71248
71290
|
var _excluded$L = ["active", "icon", "disabled", "isNested", "showNested", "value", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "toggleNested", "onItemSelected", "className", "style", "color", "iconProps", "__TYPE__", "children"];
|
|
71249
71291
|
var _templateObject$I;
|
|
71250
|
-
var Item$1 = newStyled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral__default["default"](["\n box-sizing: border-box;\n cursor: ", ";\n width: 100%;\n border-radius: 6px;\n display: flex;\n align-items: center;\n min-height: 2.25rem;\n gap: 0.563rem;\n padding: 0.563rem;\n &:hover {\n background-color: ", ";\n color: ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n }\n }\n ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n ", ";\n background: transparent;\n }\n & .sub-menu-icon-lnc {\n margin-left: auto;\n transform: ", ";\n transition: transform 0.25s ease;\n }\n ", "\n outline: none;\n ", ";\n"])), function (props) {
|
|
71292
|
+
var Item$1 = newStyled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral__default["default"](["\n box-sizing: border-box;\n cursor: ", ";\n width: 100%;\n border-radius: 6px;\n display: flex;\n align-items: center;\n min-height: 2.25rem;\n gap: 0.563rem;\n padding: 0.563rem;\n color: ", ";\n &:hover {\n background-color: ", ";\n color: ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n }\n }\n ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n ", ";\n background: transparent;\n }\n & .sub-menu-icon-lnc {\n margin-left: auto;\n transform: ", ";\n transition: transform 0.25s ease;\n }\n ", "\n outline: none;\n ", ";\n"])), function (props) {
|
|
71251
71293
|
return props.disabled == false ? "pointer" : "context-menu";
|
|
71294
|
+
}, function (props) {
|
|
71295
|
+
return getColorRgbaValue(props.theme, "MenuItem", props.color, props.isActive === true ? "active" : "enabled", "text");
|
|
71252
71296
|
}, function (props) {
|
|
71253
71297
|
return getColorRgbaValue(props.theme, "MenuItem", props.color, "hover", "background", "backgroundOpacity");
|
|
71254
71298
|
}, function (props) {
|
|
@@ -71436,7 +71480,9 @@ var DropdownItem = /*#__PURE__*/React__default["default"].forwardRef(function (p
|
|
|
71436
71480
|
}, rest), icon && /*#__PURE__*/React__default["default"].createElement(Icon, _extends__default$1["default"]({
|
|
71437
71481
|
icon: icon,
|
|
71438
71482
|
className: "drop-down-icon-lnc"
|
|
71439
|
-
}, iconProps)), /*#__PURE__*/React__default["default"].createElement("div",
|
|
71483
|
+
}, iconProps)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
71484
|
+
className: "menu-item-text-lnc"
|
|
71485
|
+
}, children), isNested && /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
71440
71486
|
icon: "angle-down",
|
|
71441
71487
|
className: "sub-menu-icon-lnc"
|
|
71442
71488
|
})));
|