oolib 2.63.5 → 2.64.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/ActionMenu/index.js +1 -1
- package/dist/components/ActionMenu/styled.d.ts +1 -1
- package/dist/components/ActionMenu/styled.js +5 -8
- package/dist/components/DatePicker/index.js +17 -15
- package/dist/components/DatePicker/styled.d.ts +1 -0
- package/dist/components/DatePicker/styled.js +16 -12
- package/dist/components/DateRangePicker/index.js +2 -2
- package/dist/components/Dropdowns/comps/OptionsShell/index.js +27 -24
- package/dist/components/Dropdowns/comps/OptionsShell/styled.d.ts +4 -0
- package/dist/components/Dropdowns/comps/OptionsShell/styled.js +31 -3
- package/dist/components/Dropdowns/comps/OptionsSingle/styled.d.ts +0 -1
- package/dist/components/Dropdowns/comps/OptionsSingle/styled.js +5 -29
- package/dist/components/Dropdowns/comps/SelectTagsInput/styled.js +2 -2
- package/dist/components/Hints/styled.js +1 -1
- package/dist/components/ImageInput/comps/ImageEditor/index.js +1 -1
- package/dist/components/ImageInput/comps/ImageEditor/utils/smallImageInputUIConditionsMet.d.ts +1 -2
- package/dist/components/ImageInput/comps/ImageEditor/utils/smallImageInputUIConditionsMet.js +2 -2
- package/dist/components/ImageInput/derivedComps/ProfileImageInput/index.d.ts +1 -2
- package/dist/components/ImageInput/derivedComps/ProfileImageInput/index.js +2 -3
- package/dist/components/TextInputs/index.styled.js +2 -2
- package/dist/components/VideoInput/index.js +4 -2
- package/dist/components/cards/CardEmbed/index.d.ts +10 -0
- package/dist/components/cards/CardEmbed/index.js +85 -0
- package/dist/components/cards/CardEmbed/styled.d.ts +9 -0
- package/dist/components/cards/CardEmbed/styled.js +61 -0
- package/dist/components/cards/ListContent/index.js +32 -27
- package/dist/components/cards/ListContent/styled.d.ts +0 -1
- package/dist/components/cards/ListContent/styled.js +6 -9
- package/dist/components/cards/comps/CardMetaBlock/index.d.ts +2 -1
- package/dist/components/cards/comps/CardMetaBlock/index.js +11 -5
- package/dist/components/cards/styled.d.ts +3 -0
- package/dist/components/cards/styled.js +18 -5
- package/dist/globalStyles/globalVariables.d.ts +5 -4
- package/dist/globalStyles/globalVariables.js +13 -6
- package/dist/index.d.ts +2 -0
- package/dist/index.js +5 -1
- package/package.json +1 -1
|
@@ -92,7 +92,7 @@ var ActionMenu = function (_a) {
|
|
|
92
92
|
showActions: showActions,
|
|
93
93
|
fixPos: fixPos
|
|
94
94
|
}),
|
|
95
|
-
react_1.default.createElement(styled_1.
|
|
95
|
+
react_1.default.createElement(styled_1.StyledActionMenuOpsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
|
|
96
96
|
return (react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (e) {
|
|
97
97
|
e.preventDefault();
|
|
98
98
|
e.stopPropagation();
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export const StyledActionMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
2
|
export const StyledActionMenuTracker: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
3
|
export const StyledActionsDropMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
export const
|
|
4
|
+
export const StyledActionMenuOpsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
5
|
export const StyledOption: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.StyledOption = exports.
|
|
30
|
+
exports.StyledOption = exports.StyledActionMenuOpsWrapper = exports.StyledActionsDropMenu = exports.StyledActionMenuTracker = exports.StyledActionMenu = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var themes_1 = require("../../themes");
|
|
33
33
|
var mixins_1 = require("../../themes/mixins");
|
|
@@ -35,7 +35,7 @@ var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
|
35
35
|
var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor70 = themes_1.colors.greyColor70, greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80;
|
|
36
36
|
var pointerHeight = 10;
|
|
37
37
|
/**
|
|
38
|
-
* we add bottom, left and right margin on the
|
|
38
|
+
* we add bottom, left and right margin on the StyledActionMenuOpsWrapper
|
|
39
39
|
* & increase the width by 20 and height by 10 of StyledActionsDropMenu
|
|
40
40
|
* so that the dropshadow shows (since StyledActionsDropMenu has overflow hidden)
|
|
41
41
|
*
|
|
@@ -83,7 +83,7 @@ exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_1
|
|
|
83
83
|
? optionsHeight + pointerHeight + offset + "px" || "auto"
|
|
84
84
|
: 0;
|
|
85
85
|
});
|
|
86
|
-
exports.
|
|
86
|
+
exports.StyledActionMenuOpsWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n position: absolute;\n bottom: 10px;\n padding: 0.6rem 0;\n ", "\n margin: 0 ", "px;\n\n //pointer outline\n &::after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n\n border: 1rem solid transparent;\n border-bottom: 1rem solid\n ", ";\n }\n\n //pointer fill\n &::before {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n ", "\n border: 0.85rem solid transparent;\n border-bottom: 0.85rem solid\n ", ";\n z-index: 1;\n }\n"], ["\n position: absolute;\n bottom: 10px;\n padding: 0.6rem 0;\n ", "\n margin: 0 ", "px;\n\n //pointer outline\n &::after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n\n border: 1rem solid transparent;\n border-bottom: 1rem solid\n ", ";\n }\n\n //pointer fill\n &::before {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n ", "\n border: 0.85rem solid transparent;\n border-bottom: 0.85rem solid\n ", ";\n z-index: 1;\n }\n"])), globalVariables_1.globalLightboxStyle, offset, function (_a) {
|
|
87
87
|
var align = _a.align;
|
|
88
88
|
return align === "center"
|
|
89
89
|
? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n left: 50%;\n transform: translateX(-50%);\n "], ["\n left: 50%;\n transform: translateX(-50%);\n "]))) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", ": 0.5rem;\n "], ["\n ", ": 0.5rem;\n "])), align);
|
|
@@ -98,11 +98,8 @@ exports.StyledOptionsWrapper = styled_components_1.default.div(templateObject_18
|
|
|
98
98
|
var invert = _a.invert;
|
|
99
99
|
return (invert ? greyColor80 : white);
|
|
100
100
|
});
|
|
101
|
-
exports.StyledOption = styled_components_1.default.button(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n white-space: nowrap;\n border: none;\n cursor: pointer;\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n padding: 0.25rem 1.2rem;\n background-color: transparent;\n color: ", ";\n ", ";\n
|
|
101
|
+
exports.StyledOption = styled_components_1.default.button(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n white-space: nowrap;\n border: none;\n cursor: pointer;\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n padding: 0.25rem 1.2rem;\n background-color: transparent;\n color: ", ";\n ", ";\n ", "\n"], ["\n white-space: nowrap;\n border: none;\n cursor: pointer;\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n padding: 0.25rem 1.2rem;\n background-color: transparent;\n color: ", ";\n ", ";\n ", "\n"])), function (_a) {
|
|
102
102
|
var invert = _a.invert;
|
|
103
103
|
return (invert ? white : greyColor100);
|
|
104
|
-
}, (0, mixins_1.transition)("background-color"),
|
|
105
|
-
var invert = _a.invert;
|
|
106
|
-
return (invert ? greyColor70 : greyColor10);
|
|
107
|
-
});
|
|
104
|
+
}, (0, mixins_1.transition)("background-color"), globalVariables_1.globalHoverBackgroundColor);
|
|
108
105
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
@@ -36,7 +36,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var react_1 = __importStar(require("react"));
|
|
38
38
|
var BlockLabel_1 = require("../BlockLabel");
|
|
39
|
-
var phosphor_react_1 = require("phosphor-react");
|
|
40
39
|
var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
|
|
41
40
|
var _EXPORTS_1 = require("../../utils/_EXPORTS");
|
|
42
41
|
var Typo_1 = require("../Typo");
|
|
@@ -44,7 +43,6 @@ var buildCalenderObj_1 = require("./utils/buildCalenderObj");
|
|
|
44
43
|
var handlePos_1 = require("./utils/handlePos");
|
|
45
44
|
var themes_1 = require("../../themes");
|
|
46
45
|
var styled_1 = require("./styled");
|
|
47
|
-
var Buttons_1 = require("../Buttons");
|
|
48
46
|
var white = themes_1.colors.white, greyColor40 = themes_1.colors.greyColor40;
|
|
49
47
|
var months = [
|
|
50
48
|
'January',
|
|
@@ -64,7 +62,7 @@ var weeks = ['S', 'M', 'T', 'W', 'Th', 'F', 'Sa'];
|
|
|
64
62
|
var flag = true;
|
|
65
63
|
function DatePicker(props) {
|
|
66
64
|
var _a, _b, _c;
|
|
67
|
-
var value = props.value, onParentChange = props.onChange, id = props.id, from = props.from, readOnly = props.readOnly, previousDateOnly = props.previousDateOnly, futureDateOnly = props.futureDateOnly, invert = props.invert, disabled = props.disabled;
|
|
65
|
+
var value = props.value, onParentChange = props.onChange, id = props.id, from = props.from, readOnly = props.readOnly, previousDateOnly = props.previousDateOnly, futureDateOnly = props.futureDateOnly, invert = props.invert, disabled = props.disabled, debug = props.debug;
|
|
68
66
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
69
67
|
var inputRef = (0, react_1.useRef)(null);
|
|
70
68
|
var calenderRef = (0, react_1.useRef)(null);
|
|
@@ -204,10 +202,10 @@ function DatePicker(props) {
|
|
|
204
202
|
setRange(item);
|
|
205
203
|
};
|
|
206
204
|
var wrapCaretLeft = react_1.default.useCallback(function () {
|
|
207
|
-
return (react_1.default.createElement(
|
|
205
|
+
return (react_1.default.createElement(styled_1.StyledButtonGhost, { S: true, invert: invert, icon: "CaretLeft", onMouseDown: function (e) { return handleChangeMonth(e, -1); }, style: { cursor: "pointer", color: invert && white } }));
|
|
208
206
|
}, [value, invert]);
|
|
209
207
|
var wrapCaretRight = react_1.default.useCallback(function () {
|
|
210
|
-
return (react_1.default.createElement(
|
|
208
|
+
return (react_1.default.createElement(styled_1.StyledButtonGhost, { S: true, invert: invert, icon: "CaretRight", onMouseDown: function (e) { return handleChangeMonth(e, 1); }, style: { cursor: "pointer", color: invert && white } }));
|
|
211
209
|
}, [value, invert]);
|
|
212
210
|
var getReadOnlyDate = function () {
|
|
213
211
|
var dateObj = new Date(value);
|
|
@@ -219,8 +217,10 @@ function DatePicker(props) {
|
|
|
219
217
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
|
|
220
218
|
react_1.default.createElement(styled_1.StyledDateInputContainer, { invert: invert },
|
|
221
219
|
readOnly ? (react_1.default.createElement(Typo_1.SANS_3, null, getReadOnlyDate())) : (react_1.default.createElement(styled_1.StyledDateInputWrapper, null,
|
|
222
|
-
react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", className: 'SANS_3', invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, onBlur: handleFocusOut, onFocus:
|
|
223
|
-
|
|
220
|
+
react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", className: 'SANS_3', invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, onBlur: handleFocusOut, onFocus: function () {
|
|
221
|
+
(0, handlePos_1.handleVerticalPos)(calenderRef, inputRef);
|
|
222
|
+
} }))),
|
|
223
|
+
react_1.default.createElement(styled_1.StyledCalenderContainer, { debug: debug, ref: calenderRef, className: "calender-container ".concat(from ? 'right-class' : ''), invert: invert },
|
|
224
224
|
react_1.default.createElement(styled_1.StyledMonthView, null,
|
|
225
225
|
react_1.default.createElement(styled_1.StyledHeader, null,
|
|
226
226
|
wrapCaretLeft(),
|
|
@@ -265,7 +265,7 @@ function DatePicker(props) {
|
|
|
265
265
|
}
|
|
266
266
|
}
|
|
267
267
|
else {
|
|
268
|
-
return react_1.default.createElement("div", { key: i, className: "disabled-date" },
|
|
268
|
+
return react_1.default.createElement("div", { key: i, className: "disabled-date", onMouseDown: function (e) { return handleDayClick(e, item); } },
|
|
269
269
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate()));
|
|
270
270
|
}
|
|
271
271
|
}), (_b = calender === null || calender === void 0 ? void 0 : calender.days) === null || _b === void 0 ? void 0 :
|
|
@@ -278,7 +278,9 @@ function DatePicker(props) {
|
|
|
278
278
|
}
|
|
279
279
|
else if (item > from && item < range) {
|
|
280
280
|
// Render days within the selected range
|
|
281
|
-
return (react_1.default.createElement("div", { key: i, className: "range"
|
|
281
|
+
return (react_1.default.createElement("div", { key: i, className: "range ".concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth() && calender.todaysDate.getFullYear() === item.getFullYear()
|
|
282
|
+
? " todaysDate "
|
|
283
|
+
: " "), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
|
|
282
284
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
283
285
|
}
|
|
284
286
|
else {
|
|
@@ -290,10 +292,10 @@ function DatePicker(props) {
|
|
|
290
292
|
? 'today'
|
|
291
293
|
: (previousDateOnly && new Date() < item) ||
|
|
292
294
|
(futureDateOnly && new Date() > item)
|
|
293
|
-
? 'disabled-date'
|
|
294
|
-
: '', "\n ").concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth()
|
|
295
|
+
? ' disabled-date '
|
|
296
|
+
: '', "\n ").concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth() && calender.todaysDate.getFullYear() === item.getFullYear()
|
|
295
297
|
? " todaysDate "
|
|
296
|
-
: "", " \n "), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
|
|
298
|
+
: " ", " \n "), onMouseDown: function (e) { return handleDayClick(e, item); }, onPointerEnter: function () { return handlePointerEnter(item); } },
|
|
297
299
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
298
300
|
}
|
|
299
301
|
}
|
|
@@ -307,9 +309,9 @@ function DatePicker(props) {
|
|
|
307
309
|
? " today "
|
|
308
310
|
: (previousDateOnly && new Date() < item) || (futureDateOnly && new Date() > item)
|
|
309
311
|
? "disabled-date "
|
|
310
|
-
: "").concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth()
|
|
312
|
+
: "").concat(calender.todaysDate.getDate() === item.getDate() && calender.todaysDate.getMonth() === item.getMonth() && calender.todaysDate.getFullYear() === item.getFullYear()
|
|
311
313
|
? " todaysDate "
|
|
312
|
-
: "", "\n ").concat(calender.month === new Date().getMonth() && calender.year === new Date().getFullYear() ||
|
|
314
|
+
: " ", "\n ").concat(calender.month === new Date().getMonth() && calender.year === new Date().getFullYear() ||
|
|
313
315
|
(calender.month === inputRef.current.value.split("/")[1] - 1 && calender.year === inputRef.current.value.split("/")[2])
|
|
314
316
|
? " selectedToday " : "", "\n "), onMouseDown: function (e) { return handleDayClick(e, item); } },
|
|
315
317
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
@@ -347,7 +349,7 @@ function DatePicker(props) {
|
|
|
347
349
|
}
|
|
348
350
|
else {
|
|
349
351
|
// Render days in the next month as disabled if 'from' is not defined
|
|
350
|
-
return (react_1.default.createElement("div", { key: i, className: "disabled-date" },
|
|
352
|
+
return (react_1.default.createElement("div", { key: i, className: "disabled-date", onMouseDown: function (e) { return handleDayClick(e, item); } },
|
|
351
353
|
react_1.default.createElement(Typo_1.SANS_3, null, item.getDate())));
|
|
352
354
|
}
|
|
353
355
|
})))))));
|
|
@@ -8,3 +8,4 @@ export const StyledHeader: import("styled-components").StyledComponent<"div", an
|
|
|
8
8
|
export const StyledWeekDaysWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
9
|
export const StyledWeekdays: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
10
|
export const StyledBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
|
+
export const StyledButtonGhost: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
|
|
@@ -7,14 +7,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapper = exports.StyledHeader = exports.StyledMonthTitle = exports.StyledMonthView = exports.StyledCalenderContainer = exports.StyledDateInputWrapper = exports.StyledInput = exports.StyledDateInputContainer = void 0;
|
|
10
|
+
exports.StyledButtonGhost = exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapper = exports.StyledHeader = exports.StyledMonthTitle = exports.StyledMonthView = exports.StyledCalenderContainer = exports.StyledDateInputWrapper = exports.StyledInput = exports.StyledDateInputContainer = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var themes_1 = require("../../themes");
|
|
13
|
-
var
|
|
13
|
+
var Buttons_1 = require("../Buttons");
|
|
14
14
|
var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
15
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;
|
|
16
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: 13rem;\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: 13rem;\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.
|
|
17
|
+
exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n background: ", ";\n outline: none;\n border: none;\n width: 13rem;\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: 13rem;\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.globalInputElemPadding, function (_a) {
|
|
18
18
|
var invert = _a.invert;
|
|
19
19
|
return (invert ? greyColor80 : greyColor5);
|
|
20
20
|
}, function (_a) {
|
|
@@ -22,7 +22,7 @@ exports.StyledInput = styled_components_1.default.input(templateObject_2 || (tem
|
|
|
22
22
|
return invert
|
|
23
23
|
? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
|
|
24
24
|
: disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
|
|
25
|
-
}, globalVariables_1.
|
|
25
|
+
}, globalVariables_1.globalInputElemHover, function (_a) {
|
|
26
26
|
var invert = _a.invert, disabled = _a.disabled;
|
|
27
27
|
return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
|
|
28
28
|
}, function (_a) {
|
|
@@ -30,17 +30,20 @@ exports.StyledInput = styled_components_1.default.input(templateObject_2 || (tem
|
|
|
30
30
|
return disabled &&
|
|
31
31
|
"\n color: ".concat(greyColor40, "\n background-color: ").concat(greyColor15, ";\n cursor: not-allowed;\n ");
|
|
32
32
|
}, greyColor40);
|
|
33
|
-
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), globalVariables_1.
|
|
34
|
-
exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n
|
|
33
|
+
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), globalVariables_1.globalInputElemFocused);
|
|
34
|
+
exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n font-family: sans-serif;\n position: absolute;\n width: 30rem;\n /* height: 350px; */\n visibility: ", ";\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 .todaysDate {\n position: relative;\n }\n \n .range.todaysDate{\n position: relative;\n }\n\n .range.todaysDate::after{\n content: '';\n background-color: ", ";\n width: .7rem;\n height: .7rem;\n position: absolute;\n border-radius: 50%;\n bottom: 0.3rem;\n }\n\n\n .todaysDate::after {\n content: '';\n background-color: ", ";\n width: .7rem;\n height: .7rem;\n position: absolute;\n border-radius: 50%;\n bottom: 0.3rem;\n }\n\n .today.todaysDate {\n /* color: ", "; */\n background-color: ", ";\n }\n\n .today.todaysDate.selectedToday{\n background-color: ", ";\n color: ", ";\n }\n\n .today.todaysDate.selectedToday::after {\n content: '';\n background-color: ", ";\n width: .7rem;\n height: .7rem;\n position: absolute;\n border-radius: 50%;\n bottom: 0.3rem;\n }\n\n .right-class {\n right: 0;\n }\n"], ["\n ", "\n font-family: sans-serif;\n position: absolute;\n width: 30rem;\n /* height: 350px; */\n visibility: ", ";\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 .todaysDate {\n position: relative;\n }\n \n .range.todaysDate{\n position: relative;\n }\n\n .range.todaysDate::after{\n content: '';\n background-color: ", ";\n width: .7rem;\n height: .7rem;\n position: absolute;\n border-radius: 50%;\n bottom: 0.3rem;\n }\n\n\n .todaysDate::after {\n content: '';\n background-color: ", ";\n width: .7rem;\n height: .7rem;\n position: absolute;\n border-radius: 50%;\n bottom: 0.3rem;\n }\n\n .today.todaysDate {\n /* color: ", "; */\n background-color: ", ";\n }\n\n .today.todaysDate.selectedToday{\n background-color: ", ";\n color: ", ";\n }\n\n .today.todaysDate.selectedToday::after {\n content: '';\n background-color: ", ";\n width: .7rem;\n height: .7rem;\n position: absolute;\n border-radius: 50%;\n bottom: 0.3rem;\n }\n\n .right-class {\n right: 0;\n }\n"])), globalVariables_1.globalLightboxStyle, function (_a) {
|
|
35
|
+
var debug = _a.debug;
|
|
36
|
+
return debug ? '' : 'hidden';
|
|
37
|
+
}, function (_a) {
|
|
35
38
|
var invert = _a.invert;
|
|
36
39
|
return invert ? greyColor3 : primaryColor10;
|
|
37
40
|
}, function (_a) {
|
|
38
41
|
var invert = _a.invert;
|
|
39
42
|
return invert && greyColor80;
|
|
40
|
-
}, primaryColor100, white, primaryColor100, function (_a) {
|
|
43
|
+
}, primaryColor100, white, primaryColor100, primaryColor100, function (_a) {
|
|
41
44
|
var invert = _a.invert;
|
|
42
|
-
return !invert
|
|
43
|
-
}, primaryColor100, white);
|
|
45
|
+
return !invert ? greyColor100 : white;
|
|
46
|
+
}, primaryColor100, primaryColor100, white, white);
|
|
44
47
|
exports.StyledMonthView = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
45
48
|
exports.StyledMonthTitle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n gap: 0.5rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: center;\n gap: 0.5rem;\n color: ", ";\n"])), function (_a) {
|
|
46
49
|
var invert = _a.invert;
|
|
@@ -52,7 +55,7 @@ exports.StyledWeekdays = styled_components_1.default.div(templateObject_9 || (te
|
|
|
52
55
|
var invert = _a.invert;
|
|
53
56
|
return invert && white;
|
|
54
57
|
});
|
|
55
|
-
exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n padding-bottom: 1rem;\n div {\n font-size: 1.4rem;\n width: calc(280px / 7);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 4rem;\n /* border: ", "; */\n /* border-top: ", "; */\n border-bottom: ", ";\n color: ", ";\n transition: background-color 0.2s;\n &:hover:not(.
|
|
58
|
+
exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n padding-bottom: 1rem;\n div {\n font-size: 1.4rem;\n width: calc(280px / 7);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 4rem;\n /* border: ", "; */\n /* border-top: ", "; */\n border-bottom: ", ";\n color: ", ";\n transition: background-color 0.2s;\n \n &:hover:not(.today.todaysDate.selectedToday) {\n ", "\n cursor: pointer;\n }\n }\n\n"], ["\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n padding-bottom: 1rem;\n div {\n font-size: 1.4rem;\n width: calc(280px / 7);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 4rem;\n /* border: ", "; */\n /* border-top: ", "; */\n border-bottom: ", ";\n color: ", ";\n transition: background-color 0.2s;\n \n &:hover:not(.today.todaysDate.selectedToday) {\n ", "\n cursor: pointer;\n }\n }\n\n"])), function (_a) {
|
|
56
59
|
var invert = _a.invert;
|
|
57
60
|
return !invert ? "6px 0px ".concat(white) : "6px 0px ".concat(greyColor80);
|
|
58
61
|
}, function (_a) {
|
|
@@ -64,5 +67,6 @@ exports.StyledBodyWrapper = styled_components_1.default.div(templateObject_10 ||
|
|
|
64
67
|
}, function (_a) {
|
|
65
68
|
var invert = _a.invert;
|
|
66
69
|
return invert && white;
|
|
67
|
-
},
|
|
68
|
-
|
|
70
|
+
}, globalVariables_1.globalHoverBackgroundColor);
|
|
71
|
+
exports.StyledButtonGhost = (0, styled_components_1.default)(Buttons_1.ButtonGhost)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), globalVariables_1.globalHoverBackgroundColor);
|
|
72
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -32,7 +32,7 @@ var DatePicker_1 = __importDefault(require("../DatePicker"));
|
|
|
32
32
|
var styled_1 = require("./styled");
|
|
33
33
|
var none = themes_1.colors.none;
|
|
34
34
|
function DateRangePicker(props) {
|
|
35
|
-
var onChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, allowPresentlyOngoing = props.allowPresentlyOngoing, invert = props.invert, disabled = props.disabled;
|
|
35
|
+
var onChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, allowPresentlyOngoing = props.allowPresentlyOngoing, invert = props.invert, disabled = props.disabled, debug = props.debug;
|
|
36
36
|
var currentDate = new Date(new Date().toLocaleDateString());
|
|
37
37
|
var handleOnChange = function (i, v) {
|
|
38
38
|
var newValue = value ? __spreadArray([], value, true) : [];
|
|
@@ -44,7 +44,7 @@ function DateRangePicker(props) {
|
|
|
44
44
|
react_1.default.createElement(styled_1.StyledDateRangeInputWrapper, { invert: invert, readOnly: readOnly },
|
|
45
45
|
react_1.default.createElement(DatePicker_1.default, { id: 0, value: value && value[0], onChange: handleOnChange, readOnly: readOnly, futureDateOnly: futureDateOnly, previousDateOnly: previousDateOnly, invert: invert, disabled: disabled }),
|
|
46
46
|
react_1.default.createElement(styled_1.StyledDateRangeInputDivider, null, "-"),
|
|
47
|
-
react_1.default.createElement(DatePicker_1.default, { id: 1, from: value && value[0] ? new Date(value[0]) : currentDate, futureDateOnly: futureDateOnly, previousDateOnly: previousDateOnly, value: value && (value[1] === null ? 'Ongoing' : value[1]), onChange: handleOnChange, readOnly: readOnly, disabled: value && value[1] === null ? true : disabled ? true : false, invert: invert })),
|
|
47
|
+
react_1.default.createElement(DatePicker_1.default, { id: 1, from: value && value[0] ? new Date(value[0]) : currentDate, futureDateOnly: futureDateOnly, previousDateOnly: previousDateOnly, value: value && (value[1] === null ? 'Ongoing' : value[1]), onChange: handleOnChange, readOnly: readOnly, disabled: value && value[1] === null ? true : disabled ? true : false, invert: invert, debug: debug })),
|
|
48
48
|
!readOnly && allowPresentlyOngoing && (react_1.default.createElement("div", { style: { marginTop: '1rem' } },
|
|
49
49
|
react_1.default.createElement(CheckboxInput_1.CheckboxInput, { option: { display: 'Presently Ongoing', value: 'Ongoing' }, value: value && value[1] === null
|
|
50
50
|
? [{ display: 'Presently Ongoing', value: 'Ongoing' }]
|
|
@@ -37,21 +37,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
37
37
|
exports.OptionsShell = void 0;
|
|
38
38
|
var framer_motion_1 = require("framer-motion");
|
|
39
39
|
var react_1 = __importStar(require("react"));
|
|
40
|
-
var styled_1 = require("../OptionsSingle/styled");
|
|
41
|
-
var usePopOutOfOverflowHiddenParent_1 = require("../../../../utils/usePopOutOfOverflowHiddenParent");
|
|
42
|
-
var ModalLarge_1 = require("../../../Modals/ModalLarge");
|
|
43
|
-
var mixins_1 = require("../../../../themes/mixins");
|
|
44
40
|
var themes_1 = require("../../../../themes");
|
|
45
|
-
var
|
|
41
|
+
var mixins_1 = require("../../../../themes/mixins");
|
|
46
42
|
var useScreenWidth_1 = require("../../../../utils/customHooks/useScreenWidth");
|
|
47
|
-
var
|
|
43
|
+
var usePopOutOfOverflowHiddenParent_1 = require("../../../../utils/usePopOutOfOverflowHiddenParent");
|
|
44
|
+
var Buttons_1 = require("../../../Buttons");
|
|
45
|
+
var ModalLarge_1 = require("../../../Modals/ModalLarge");
|
|
46
|
+
var styled_1 = require("./styled");
|
|
48
47
|
exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
|
|
49
48
|
var _b;
|
|
50
|
-
var _c;
|
|
51
|
-
var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton,
|
|
49
|
+
var _c, _d, _e, _f, _g;
|
|
50
|
+
var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _h = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _h === void 0 ? false : _h, relativeToRef = _a.relativeToRef, S = _a.S;
|
|
52
51
|
var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
|
|
53
52
|
var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
|
|
54
|
-
var
|
|
53
|
+
var _j = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _j.fixPos, applyFixedPos = _j.applyFixedPos, removeFixedPos = _j.removeFixedPos, trackerRef = _j.trackerRef;
|
|
55
54
|
(0, react_1.useEffect)(function () {
|
|
56
55
|
if (popOutOfOverflowHiddenParent) {
|
|
57
56
|
if (showOptions)
|
|
@@ -62,20 +61,24 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
|
|
|
62
61
|
}, [showOptions]);
|
|
63
62
|
var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
|
|
64
63
|
return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
|
|
65
|
-
popOutOfOverflowHiddenParent &&
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
64
|
+
popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
|
|
65
|
+
react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { isOpen: showOptions, width: (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.width, openHeight: (_g = (_f = ref.current) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.height, style: __assign({ zIndex: 100000 }, (fixPos
|
|
66
|
+
? __assign({ position: "fixed", top: "".concat(fixPos.y -
|
|
67
|
+
(yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top"
|
|
68
|
+
? { transform: "translateY(-100%)" }
|
|
69
|
+
: {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
|
|
70
|
+
? { bottom: 0, transform: "translateY(100%)" }
|
|
71
|
+
: { top: 0, transform: "translateY(-100%)" })))) },
|
|
72
|
+
react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", ref: ref, invert: invert, lightboxHeight: lightboxHeight,
|
|
73
|
+
// className={className}
|
|
74
|
+
style: __assign(__assign({}, (lightboxStyle || {})), { position: "absolute", bottom: yOrientation === "top" ? undefined : 0, top: yOrientation === "top" ? 0 : undefined }) }, children)))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(ModalLarge_1.ModalLarge, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },
|
|
71
75
|
SelectComp && SelectComp,
|
|
72
|
-
react_1.default.createElement(
|
|
73
|
-
showDoneButton &&
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
react_1.default.createElement(Buttons_1.ButtonPrimary, { children: 'Done', width: '100%', onClick: handleHideOptions, S: S })))) : null));
|
|
76
|
+
react_1.default.createElement(styled_1.StyledModalOptionsWrapper, { invert: invert, ref: ref }, children),
|
|
77
|
+
showDoneButton && (react_1.default.createElement("div", { style: {
|
|
78
|
+
backgroundColor: invert ? themes_1.colors.greyColor90 : themes_1.colors.white,
|
|
79
|
+
padding: "1rem 2rem",
|
|
80
|
+
position: "sticky",
|
|
81
|
+
bottom: "0",
|
|
82
|
+
} },
|
|
83
|
+
react_1.default.createElement(Buttons_1.ButtonPrimary, { children: "Done", width: "100%", onClick: handleHideOptions, S: S }))))) : null));
|
|
81
84
|
});
|
|
@@ -1 +1,5 @@
|
|
|
1
|
+
/** for lightbox shell */
|
|
2
|
+
export const StyledOptionsAnimateWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export const StyledOptionsWrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
|
|
4
|
+
/** for modal shell */
|
|
1
5
|
export const StyledModalOptionsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -7,11 +7,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.StyledModalOptionsWrapper = void 0;
|
|
10
|
+
exports.StyledModalOptionsWrapper = exports.StyledOptionsWrapper = exports.StyledOptionsAnimateWrapper = void 0;
|
|
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");
|
|
15
|
+
/** for lightbox shell */
|
|
16
|
+
exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n overflow: hidden;\n ", ";\n ", ";\n border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"], ["\n height: ", ";\n width: ", ";\n overflow: hidden;\n ", ";\n ", ";\n border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"])), function (_a) {
|
|
17
|
+
var isOpen = _a.isOpen, openHeight = _a.openHeight;
|
|
18
|
+
return isOpen ? (openHeight ? openHeight + 'px' : 'auto') : 0;
|
|
19
|
+
}, function (_a) {
|
|
20
|
+
var width = _a.width;
|
|
21
|
+
return width + 'px';
|
|
22
|
+
}, (0, mixins_1.transition)('height', 'border-width'), globalVariables_1.globalLightboxStyle, function (_a) {
|
|
23
|
+
var isOpen = _a.isOpen;
|
|
24
|
+
return isOpen ? '1px' : 0;
|
|
25
|
+
});
|
|
26
|
+
exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n z-index: 100000; //show remove if we do animation thing\n padding-left: 0; //cancel out the ul's padding left\n cursor: pointer;\n width: 100%;\n min-width: max-content;\n max-width: 36rem;\n overflow: auto;\n max-height: ", ";\n"], ["\n z-index: 100000; //show remove if we do animation thing\n padding-left: 0; //cancel out the ul's padding left\n cursor: pointer;\n width: 100%;\n min-width: max-content;\n max-width: 36rem;\n overflow: auto;\n max-height: ", ";\n"
|
|
27
|
+
/** for modal shell */
|
|
28
|
+
])), function (_a) {
|
|
29
|
+
var lightboxHeight = _a.lightboxHeight;
|
|
30
|
+
switch (lightboxHeight) {
|
|
31
|
+
case 'large':
|
|
32
|
+
return '33rem';
|
|
33
|
+
case 'small':
|
|
34
|
+
return '20rem';
|
|
35
|
+
case 'medium':
|
|
36
|
+
default:
|
|
37
|
+
return '24rem';
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
/** for modal shell */
|
|
41
|
+
exports.StyledModalOptionsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n padding-left: 0;\n cursor: pointer;\n background-color: ", ";\n width: 100%;\n min-width: max-content;\n min-width: -moz-max-content;\n overflow: auto;\n"], ["\n position: relative;\n padding-left: 0;\n cursor: pointer;\n background-color: ", ";\n width: 100%;\n min-width: max-content;\n min-width: -moz-max-content;\n overflow: auto;\n"])), function (_a) {
|
|
14
42
|
var invert = _a.invert;
|
|
15
43
|
return invert ? themes_1.colors.greyColor90 : themes_1.colors.white;
|
|
16
44
|
});
|
|
17
|
-
var templateObject_1;
|
|
45
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -27,37 +27,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.StyledOption =
|
|
30
|
+
exports.StyledOption = void 0;
|
|
31
31
|
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
35
|
var globalVariables_1 = require("../../../../globalStyles/globalVariables");
|
|
36
|
-
exports.
|
|
37
|
-
var invert = _a.invert;
|
|
38
|
-
return (invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor5);
|
|
39
|
-
}, function (_a) {
|
|
40
|
-
var invert = _a.invert;
|
|
41
|
-
return invert ? themes_1.colors.greyColor90 : themes_1.colors.white;
|
|
42
|
-
}, mixins_1.boxShadow1, function (_a) {
|
|
43
|
-
var invert = _a.invert;
|
|
44
|
-
return invert && "1px solid ".concat(themes_1.colors.greyColor80);
|
|
45
|
-
}, function (_a) {
|
|
46
|
-
var lightboxHeight = _a.lightboxHeight;
|
|
47
|
-
switch (lightboxHeight) {
|
|
48
|
-
case 'large':
|
|
49
|
-
return '33rem';
|
|
50
|
-
case 'small':
|
|
51
|
-
return '20rem';
|
|
52
|
-
case 'medium':
|
|
53
|
-
default:
|
|
54
|
-
return '24rem';
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
exports.StyledOption = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 1rem 2rem;\n ", "\n ", ";\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:first-of-type {\n margin-top: 1rem;\n }\n\n &:last-of-type {\n margin-bottom: 1rem;\n }\n\n .OKE-Dropdown__optionDesc {\n @include kp-clamp-text(2);\n white-space: normal;\n }\n\n .OKE-Dropdown__optionImg {\n flex: 0 0 auto;\n }\n\n .OKE-Dropdown__checkboxClickArea {\n position: absolute;\n width: 2rem;\n height: 2rem;\n }\n .OKE-Dropdown__checkboxClickArea-box {\n margin-right: 1rem;\n flex-shrink: 0;\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 1rem 2rem;\n ", "\n ", ";\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:first-of-type {\n margin-top: 1rem;\n }\n\n &:last-of-type {\n margin-bottom: 1rem;\n }\n\n .OKE-Dropdown__optionDesc {\n @include kp-clamp-text(2);\n white-space: normal;\n }\n\n .OKE-Dropdown__optionImg {\n flex: 0 0 auto;\n }\n\n .OKE-Dropdown__checkboxClickArea {\n position: absolute;\n width: 2rem;\n height: 2rem;\n }\n .OKE-Dropdown__checkboxClickArea-box {\n margin-right: 1rem;\n flex-shrink: 0;\n }\n"])), function (_a) {
|
|
36
|
+
exports.StyledOption = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 1rem 2rem;\n ", "\n ", ";\n\n background-color: ", ";\n\n ", "\n\n &:first-of-type {\n margin-top: 1rem;\n }\n\n &:last-of-type {\n margin-bottom: 1rem;\n }\n\n .OKE-Dropdown__optionDesc {\n @include kp-clamp-text(2);\n white-space: normal;\n }\n\n .OKE-Dropdown__optionImg {\n flex: 0 0 auto;\n }\n\n .OKE-Dropdown__checkboxClickArea {\n position: absolute;\n width: 2rem;\n height: 2rem;\n }\n .OKE-Dropdown__checkboxClickArea-box {\n margin-right: 1rem;\n flex-shrink: 0;\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 1rem 2rem;\n ", "\n ", ";\n\n background-color: ", ";\n\n ", "\n\n &:first-of-type {\n margin-top: 1rem;\n }\n\n &:last-of-type {\n margin-bottom: 1rem;\n }\n\n .OKE-Dropdown__optionDesc {\n @include kp-clamp-text(2);\n white-space: normal;\n }\n\n .OKE-Dropdown__optionImg {\n flex: 0 0 auto;\n }\n\n .OKE-Dropdown__checkboxClickArea {\n position: absolute;\n width: 2rem;\n height: 2rem;\n }\n .OKE-Dropdown__checkboxClickArea-box {\n margin-right: 1rem;\n flex-shrink: 0;\n }\n"])), function (_a) {
|
|
58
37
|
var S = _a.S;
|
|
59
38
|
return !S
|
|
60
|
-
? (0, styled_components_1.css)(
|
|
39
|
+
? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n \n min-height: 4rem;\n "], ["\n \n min-height: 4rem;\n "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 3rem;\n "], ["\n height: 3rem;\n "])));
|
|
61
40
|
}, (0, mixins_1.transition)('background-color'), function (_a) {
|
|
62
41
|
var isFocussed = _a.isFocussed, isSelected = _a.isSelected, theme = _a.theme, invert = _a.invert;
|
|
63
42
|
return isSelected
|
|
@@ -65,8 +44,5 @@ exports.StyledOption = styled_components_1.default.li(templateObject_4 || (templ
|
|
|
65
44
|
: isFocussed
|
|
66
45
|
? (invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5)
|
|
67
46
|
: (invert ? themes_1.colors.greyColor90 : themes_1.colors.white);
|
|
68
|
-
},
|
|
69
|
-
|
|
70
|
-
return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
|
|
71
|
-
});
|
|
72
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
47
|
+
}, globalVariables_1.globalHoverBackgroundColor);
|
|
48
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -33,12 +33,12 @@ var themes_1 = require("../../../../themes");
|
|
|
33
33
|
var mixins_1 = require("../../../../themes/mixins");
|
|
34
34
|
var utilsOolib_1 = require("../../../../utilsOolib");
|
|
35
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.
|
|
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.globalInputElemPadding, themes_1.colors.greyColor40);
|
|
37
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) {
|
|
38
38
|
var invert = _a.invert;
|
|
39
39
|
return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
|
|
40
40
|
}, function (_a) {
|
|
41
41
|
var disabled = _a.disabled;
|
|
42
42
|
return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "])));
|
|
43
|
-
}, (0, mixins_1.transition)("background-color"), globalVariables_1.
|
|
43
|
+
}, (0, mixins_1.transition)("background-color"), globalVariables_1.globalInputElemFocused, globalVariables_1.globalInputElemHover);
|
|
44
44
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -13,7 +13,7 @@ var themes_1 = require("../../themes");
|
|
|
13
13
|
var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
14
14
|
var white = themes_1.colors.white, greyColor15 = themes_1.colors.greyColor15, greyColor100 = themes_1.colors.greyColor100;
|
|
15
15
|
exports.StyledHints = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
16
|
-
exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n z-index: 1000;\n background: ", ";\n position: absolute;\n width: 30rem;\n height: 35rem;\n ", "\n /* top: ", "; */\n /* right: ", "; */\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n\n display: flex;\n flex-direction: column;\n"], ["\n z-index: 1000;\n background: ", ";\n position: absolute;\n width: 30rem;\n height: 35rem;\n ", "\n /* top: ", "; */\n /* right: ", "; */\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n\n display: flex;\n flex-direction: column;\n"])), white, globalVariables_1.
|
|
16
|
+
exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n z-index: 1000;\n background: ", ";\n position: absolute;\n width: 30rem;\n height: 35rem;\n ", "\n /* top: ", "; */\n /* right: ", "; */\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n\n display: flex;\n flex-direction: column;\n"], ["\n z-index: 1000;\n background: ", ";\n position: absolute;\n width: 30rem;\n height: 35rem;\n ", "\n /* top: ", "; */\n /* right: ", "; */\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n\n display: flex;\n flex-direction: column;\n"])), white, globalVariables_1.globalLightboxStyle, function (_a) {
|
|
17
17
|
var style = _a.style;
|
|
18
18
|
return ((style === null || style === void 0 ? void 0 : style.top) ? style.top : "-1rem");
|
|
19
19
|
}, function (_a) {
|
|
@@ -109,7 +109,7 @@ function ImageEditor(_a) {
|
|
|
109
109
|
if (isInPopUp) {
|
|
110
110
|
setEditorStyle("toolbar");
|
|
111
111
|
}
|
|
112
|
-
else if ((0, smallImageInputUIConditionsMet_1.smallImageInputUIConditionsMet)({ width: width, height: height
|
|
112
|
+
else if ((0, smallImageInputUIConditionsMet_1.smallImageInputUIConditionsMet)({ width: width, height: height }) || containerShape === 'circle') {
|
|
113
113
|
setEditorStyle("modal");
|
|
114
114
|
}
|
|
115
115
|
else {
|
package/dist/components/ImageInput/comps/ImageEditor/utils/smallImageInputUIConditionsMet.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.smallImageInputUIConditionsMet = void 0;
|
|
4
4
|
var smallImageInputUIConditionsMet = function (_a) {
|
|
5
|
-
var width = _a.width, height = _a.height
|
|
6
|
-
return width < 300 || height < 300
|
|
5
|
+
var width = _a.width, height = _a.height;
|
|
6
|
+
return width < 300 || height < 300;
|
|
7
7
|
};
|
|
8
8
|
exports.smallImageInputUIConditionsMet = smallImageInputUIConditionsMet;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function ProfileImageInput({ id, value, onChange, readOnly, invert, allowedFormats, disableImageBorder, defaultImageSpread, containerShape, size, imageTitle: _imageTitle, imageTitlePath, content: _content,
|
|
1
|
+
export function ProfileImageInput({ id, value, onChange, readOnly, invert, allowedFormats, disableImageBorder, defaultImageSpread, containerShape, size, imageTitle: _imageTitle, imageTitlePath, content: _content, }: {
|
|
2
2
|
id: any;
|
|
3
3
|
value: any;
|
|
4
4
|
onChange: any;
|
|
@@ -12,6 +12,5 @@ export function ProfileImageInput({ id, value, onChange, readOnly, invert, allow
|
|
|
12
12
|
imageTitle: any;
|
|
13
13
|
imageTitlePath: any;
|
|
14
14
|
content: any;
|
|
15
|
-
tableRowData: any;
|
|
16
15
|
}): React.JSX.Element;
|
|
17
16
|
import React from "react";
|
|
@@ -19,9 +19,8 @@ var ProfileImageInput = function (_a) {
|
|
|
19
19
|
_f = _a.size,
|
|
20
20
|
//ProfileImageInput specific props
|
|
21
21
|
size = _f === void 0 ? 200 : _f, // Number > representing pixels
|
|
22
|
-
_imageTitle = _a.imageTitle, imageTitlePath = _a.imageTitlePath, _content = _a.content
|
|
23
|
-
;
|
|
24
|
-
var content = _content || tableRowData;
|
|
22
|
+
_imageTitle = _a.imageTitle, imageTitlePath = _a.imageTitlePath, _content = _a.content;
|
|
23
|
+
var content = _content;
|
|
25
24
|
var imageTitle = _imageTitle ||
|
|
26
25
|
(imageTitlePath && (0, getVal_1.getVal)(content, imageTitlePath)) ||
|
|
27
26
|
(value && ((_b = value[0]) === null || _b === void 0 ? void 0 : _b.publicUrl)) ||
|