oolib 2.57.7 → 2.58.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/dist/components/DatePicker/styled.js +5 -13
- package/dist/components/Dropdowns/comps/SelectTagsInput/styled.js +4 -14
- package/dist/components/TextInputs/index.styled.js +4 -12
- package/dist/globalStyles/globalVariables.d.ts +3 -0
- package/dist/globalStyles/globalVariables.js +24 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +4 -1
- package/package.json +1 -1
|
@@ -11,9 +11,10 @@ exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapp
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var themes_1 = require("../../themes");
|
|
13
13
|
var mixins_1 = require("../../themes/mixins");
|
|
14
|
+
var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
14
15
|
var greyColor80 = themes_1.colors.greyColor80, greyColor5 = themes_1.colors.greyColor5, greyColor70 = themes_1.colors.greyColor70, greyColor10 = themes_1.colors.greyColor10, primaryColor100 = themes_1.colors.primaryColor100, greyColor40 = themes_1.colors.greyColor40, white = themes_1.colors.white, primaryColor10 = themes_1.colors.primaryColor10, greyColor15 = themes_1.colors.greyColor15, greyColor3 = themes_1.colors.greyColor3, greyColor100 = themes_1.colors.greyColor100, primaryColor40 = themes_1.colors.primaryColor40;
|
|
15
|
-
exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n\n
|
|
16
|
-
exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
16
|
+
exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n\n &:focus-within .calender-container {\n visibility: visible;\n }\n\n"], ["\n position: relative;\n width: fit-content;\n\n &:focus-within .calender-container {\n visibility: visible;\n }\n\n"])));
|
|
17
|
+
exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n background: ", ";\n outline: none;\n border: none;\n width: 9rem;\n height: 4rem;\n color: ", ";\n ", "\n\n &:focus {\n background-color: ", ";\n }\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n\n"], ["\n ", "\n background: ", ";\n outline: none;\n border: none;\n width: 9rem;\n height: 4rem;\n color: ", ";\n ", "\n\n &:focus {\n background-color: ", ";\n }\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n\n"])), globalVariables_1.inputElemPadding, function (_a) {
|
|
17
18
|
var invert = _a.invert;
|
|
18
19
|
return (invert ? greyColor80 : greyColor5);
|
|
19
20
|
}, function (_a) {
|
|
@@ -21,16 +22,7 @@ exports.StyledInput = styled_components_1.default.input(templateObject_2 || (tem
|
|
|
21
22
|
return invert
|
|
22
23
|
? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
|
|
23
24
|
: disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
|
|
24
|
-
}, function (_a) {
|
|
25
|
-
var invert = _a.invert, disabled = _a.disabled;
|
|
26
|
-
return disabled ? greyColor15 : invert ? primaryColor40 : greyColor10;
|
|
27
|
-
}, function (_a) {
|
|
28
|
-
var invert = _a.invert;
|
|
29
|
-
return invert && greyColor100;
|
|
30
|
-
}, function (_a) {
|
|
31
|
-
var invert = _a.invert;
|
|
32
|
-
return (invert ? greyColor100 : greyColor40);
|
|
33
|
-
}, function (_a) {
|
|
25
|
+
}, globalVariables_1.inputElemHover, function (_a) {
|
|
34
26
|
var invert = _a.invert, disabled = _a.disabled;
|
|
35
27
|
return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
|
|
36
28
|
}, function (_a) {
|
|
@@ -38,7 +30,7 @@ exports.StyledInput = styled_components_1.default.input(templateObject_2 || (tem
|
|
|
38
30
|
return disabled &&
|
|
39
31
|
"\n color: ".concat(greyColor40, "\n background-color: ").concat(greyColor15, ";\n cursor: not-allowed;\n ");
|
|
40
32
|
}, greyColor40);
|
|
41
|
-
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n
|
|
33
|
+
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), globalVariables_1.inputElemFocused);
|
|
42
34
|
exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-family: sans-serif;\n position: absolute;\n width: 30rem;\n /* height: 319px; */\n box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2);\n background-color: ", ";\n visibility: hidden;\n z-index: 10000;\n\n .disabled-date {\n opacity: 0.5;\n pointer-events: none;\n }\n \n .range {\n background-color: ", ";\n color: ", ";\n }\n\n .today {\n background-color: ", ";\n color: ", ";\n }\n\n .right-class {\n right: 0;\n }\n"], ["\n font-family: sans-serif;\n position: absolute;\n width: 30rem;\n /* height: 319px; */\n box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2);\n background-color: ", ";\n visibility: hidden;\n z-index: 10000;\n\n .disabled-date {\n opacity: 0.5;\n pointer-events: none;\n }\n \n .range {\n background-color: ", ";\n color: ", ";\n }\n\n .today {\n background-color: ", ";\n color: ", ";\n }\n\n .right-class {\n right: 0;\n }\n"])), function (_a) {
|
|
43
35
|
var invert = _a.invert;
|
|
44
36
|
return invert ? greyColor80 : white;
|
|
@@ -32,23 +32,13 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
32
32
|
var themes_1 = require("../../../../themes");
|
|
33
33
|
var mixins_1 = require("../../../../themes/mixins");
|
|
34
34
|
var utilsOolib_1 = require("../../../../utilsOolib");
|
|
35
|
-
|
|
36
|
-
exports.
|
|
35
|
+
var globalVariables_1 = require("../../../../globalStyles/globalVariables");
|
|
36
|
+
exports.StyledTagsSelectTextInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n border: 0;\n width: 100%;\n background-color: ", ";\n \n // this strange bit is to fix the 'zoom into input' issue on ios\n margin: 0 -2rem;\n ", "\n &:focus {\n border: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n"], ["\n height: 100%;\n border: 0;\n width: 100%;\n background-color: ", ";\n \n // this strange bit is to fix the 'zoom into input' issue on ios\n margin: 0 -2rem;\n ", "\n &:focus {\n border: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n"])), themes_1.colors.none, globalVariables_1.inputElemPadding, themes_1.colors.greyColor40);
|
|
37
|
+
exports.StyledSelectTagsInputContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n position: relative;\n border-radius: 2px;\n background-color: ", ";\n padding: 1rem 2rem 1rem 2rem;\n ", "\n\n ", ";\n\n ", "\n ", "\n\n height: auto;\n align-items: flex-start;\n"], ["\n cursor: pointer;\n position: relative;\n border-radius: 2px;\n background-color: ", ";\n padding: 1rem 2rem 1rem 2rem;\n ", "\n\n ", ";\n\n ", "\n ", "\n\n height: auto;\n align-items: flex-start;\n"])), function (_a) {
|
|
37
38
|
var invert = _a.invert;
|
|
38
39
|
return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
|
|
39
40
|
}, function (_a) {
|
|
40
41
|
var disabled = _a.disabled;
|
|
41
42
|
return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "])));
|
|
42
|
-
}, (0, mixins_1.transition)("background-color"),
|
|
43
|
-
var theme = _a.theme, invert = _a.invert;
|
|
44
|
-
return invert
|
|
45
|
-
? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
|
|
46
|
-
: (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors);
|
|
47
|
-
}, (0, mixins_1.transition)("width"), function (_a) {
|
|
48
|
-
var invert = _a.invert;
|
|
49
|
-
return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10;
|
|
50
|
-
}, function (_a) {
|
|
51
|
-
var invert = _a.invert;
|
|
52
|
-
return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10;
|
|
53
|
-
});
|
|
43
|
+
}, (0, mixins_1.transition)("background-color"), globalVariables_1.inputElemFocused, globalVariables_1.inputElemHover);
|
|
54
44
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -12,6 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
var styled_components_2 = require("styled-components");
|
|
13
13
|
var themes_1 = require("../../themes");
|
|
14
14
|
var mixins_1 = require("../../themes/mixins");
|
|
15
|
+
var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
15
16
|
var greyColor10 = themes_1.colors.greyColor10, greyColor70 = themes_1.colors.greyColor70, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15, greyColor80 = themes_1.colors.greyColor80, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white, red = themes_1.colors.red, green = themes_1.colors.green, invertRed = themes_1.colors.invertRed, invertGreen = themes_1.colors.invertGreen;
|
|
16
17
|
var SIZES = {
|
|
17
18
|
S: "3rem",
|
|
@@ -29,7 +30,7 @@ exports.MsgContainer = styled_components_1.default.div(templateObject_2 || (temp
|
|
|
29
30
|
var status = _a.status, invert = _a.invert;
|
|
30
31
|
return status && (0, styled_components_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), getColorValue(status, invert));
|
|
31
32
|
});
|
|
32
|
-
exports.InputContainerStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n ", ";\n\n position: relative;\n background-color: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n gap: 1rem;\n ", "\n
|
|
33
|
+
exports.InputContainerStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n ", ";\n\n position: relative;\n background-color: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n gap: 1rem;\n ", "\n\n ", "\n ", "\n\n ", ";\n ", ";\n ", "\n"], ["\n ", "\n ", ";\n\n position: relative;\n background-color: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n gap: 1rem;\n ", "\n\n ", "\n ", "\n\n ", ";\n ", ";\n ", "\n"
|
|
33
34
|
// export const DisplayOnlyComp = styled.div`
|
|
34
35
|
// ${({ size }) =>
|
|
35
36
|
// css`
|
|
@@ -42,7 +43,7 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_9
|
|
|
42
43
|
case 'icon+text':
|
|
43
44
|
return (0, styled_components_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 2rem 0 1.5rem;\n "], ["\n padding: 0 2rem 0 1.5rem;\n "])));
|
|
44
45
|
default:
|
|
45
|
-
return (0, styled_components_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n
|
|
46
|
+
return (0, styled_components_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), globalVariables_1.inputElemPadding);
|
|
46
47
|
}
|
|
47
48
|
}, function (_a) {
|
|
48
49
|
var eyeIcon = _a.eyeIcon;
|
|
@@ -53,16 +54,7 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_9
|
|
|
53
54
|
}, function (_a) {
|
|
54
55
|
var invert = _a.invert;
|
|
55
56
|
return (invert ? white : greyColor100);
|
|
56
|
-
}, (0, mixins_1.transition)('background-color'), function (_a) {
|
|
57
|
-
var invert = _a.invert;
|
|
58
|
-
return (invert ? greyColor70 : greyColor10);
|
|
59
|
-
}, function (_a) {
|
|
60
|
-
var invert = _a.invert;
|
|
61
|
-
return (invert ? "#ADDBFF" : "#33A4FF");
|
|
62
|
-
}, (0, mixins_1.transition)('width'), function (_a) {
|
|
63
|
-
var invert = _a.invert;
|
|
64
|
-
return (invert ? greyColor70 : greyColor10);
|
|
65
|
-
}, function (_a) {
|
|
57
|
+
}, (0, mixins_1.transition)('background-color'), globalVariables_1.inputElemHover, globalVariables_1.inputElemFocused, function (_a) {
|
|
66
58
|
var disabled = _a.disabled;
|
|
67
59
|
return disabled && (0, styled_components_2.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n pointer-events: none;\n color: ", ";\n "], ["\n background-color: ", ";\n pointer-events: none;\n color: ", ";\n "])), greyColor15, greyColor40);
|
|
68
60
|
}, function (_a) {
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export const inputElemPadding: import("styled-components").FlattenSimpleInterpolation;
|
|
2
|
+
export const inputElemHover: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
3
|
+
export const inputElemFocused: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.inputElemFocused = exports.inputElemHover = exports.inputElemPadding = void 0;
|
|
8
|
+
var styled_components_1 = require("styled-components");
|
|
9
|
+
var themes_1 = require("../themes");
|
|
10
|
+
var mixins_1 = require("../themes/mixins");
|
|
11
|
+
// Text Input global style variables
|
|
12
|
+
exports.inputElemPadding = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 2rem;\n"], ["\n padding: 0 2rem;\n"])));
|
|
13
|
+
exports.inputElemHover = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14
|
+
var invert = _a.invert;
|
|
15
|
+
return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10;
|
|
16
|
+
});
|
|
17
|
+
exports.inputElemFocused = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: 0;\n left: 0;\n box-shadow: inset 0px -2px 0px ", ";\n ", "\n }\n &:focus-within {\n background-color: ", ";\n ::after {\n width: 100%;\n }\n } \n"], ["\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: 0;\n left: 0;\n box-shadow: inset 0px -2px 0px ", ";\n ", "\n }\n &:focus-within {\n background-color: ", ";\n ::after {\n width: 100%;\n }\n } \n"])), function (_a) {
|
|
18
|
+
var invert = _a.invert;
|
|
19
|
+
return (invert ? "#ADDBFF" : "#33A4FF");
|
|
20
|
+
}, (0, mixins_1.transition)('width'), function (_a) {
|
|
21
|
+
var invert = _a.invert;
|
|
22
|
+
return (invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10);
|
|
23
|
+
});
|
|
24
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
package/dist/index.d.ts
CHANGED
|
@@ -41,5 +41,6 @@ export { DropdownSingle } from "./components/Dropdowns/DropdownSingle";
|
|
|
41
41
|
export { DropdownMulti } from "./components/Dropdowns/DropdownMulti";
|
|
42
42
|
export { OptionsSingle } from "./components/Dropdowns/comps/OptionsSingle";
|
|
43
43
|
export { generateOptions } from "./components/Dropdowns/utils/generateOptions";
|
|
44
|
+
export { genTagComp } from "./components/Dropdowns/utils/genTagComp";
|
|
44
45
|
export { HintsProvider } from "./components/Hints/contextApi";
|
|
45
46
|
export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
|
package/dist/index.js
CHANGED
|
@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
17
17
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
18
18
|
};
|
|
19
19
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
20
|
-
exports.HintsProvider = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
|
|
20
|
+
exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
|
|
21
21
|
//css and styling related ( styled-components )
|
|
22
22
|
var globalStyles_1 = require("./globalStyles");
|
|
23
23
|
Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
|
|
@@ -97,6 +97,9 @@ Object.defineProperty(exports, "OptionsSingle", { enumerable: true, get: functio
|
|
|
97
97
|
//used only by FilterInput. once that is shifted to oolib, dont need to export it anymore
|
|
98
98
|
var generateOptions_1 = require("./components/Dropdowns/utils/generateOptions");
|
|
99
99
|
Object.defineProperty(exports, "generateOptions", { enumerable: true, get: function () { return generateOptions_1.generateOptions; } });
|
|
100
|
+
//used only by TagsCheckbox & TagsRadio. once that is shifted to oolib, dont need to export it anymore
|
|
101
|
+
var genTagComp_1 = require("./components/Dropdowns/utils/genTagComp");
|
|
102
|
+
Object.defineProperty(exports, "genTagComp", { enumerable: true, get: function () { return genTagComp_1.genTagComp; } });
|
|
100
103
|
////// context
|
|
101
104
|
var contextApi_1 = require("./components/Hints/contextApi");
|
|
102
105
|
Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });
|