krl-alfred 1.82.12 → 1.82.14
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.
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BlogCardStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.BlogCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n .author {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin-bottom: 1rem;\n\n .img {\n width: 40px;\n height: 40px;\n overflow: hidden;\n border-radius: 50%;\n position: relative;\n\n * {\n display: block !important;\n height: 100% !important;\n width: 100% !important;\n object-fit: cover !important;\n }\n }\n\n .title {\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n margin-left: 0.5rem;\n }\n }\n\n .content {\n ", "\n .contentImg {\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n padding-bottom: ", ";\n margin-bottom: ", ";\n\n > * {\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n position: absolute !important;\n left: 50% !important;\n top: 50% !important;\n transform: translate(-50%, -50%) !important;\n\n img {\n object-fit: cover;\n }\n }\n }\n\n .contentBottom {\n ", "\n .tagWrapper {\n margin-bottom: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .tags {\n font: var(--caption-semi-bold-12-15);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding-right: 2rem;\n }\n\n .date {\n font: var(--caption-medium-11-13);\n color: var(--grey-50);\n }\n }\n\n .contentTitle {\n font: ", ";\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n min-height: ", ";\n }\n\n .contentDesc {\n display: block;\n font: ", ";\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n ", "\n margin-bottom: ", ";\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n .author {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin-bottom: 1rem;\n\n .img {\n width: 40px;\n height: 40px;\n overflow: hidden;\n border-radius: 50%;\n position: relative;\n\n * {\n display: block !important;\n height: 100% !important;\n width: 100% !important;\n object-fit: cover !important;\n }\n }\n\n .title {\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n margin-left: 0.5rem;\n }\n }\n\n .content {\n ", "\n .contentImg {\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n padding-bottom: ", ";\n margin-bottom: ", ";\n\n > * {\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n position: absolute !important;\n left: 50% !important;\n top: 50% !important;\n transform: translate(-50%, -50%) !important;\n\n img {\n object-fit: cover;\n }\n }\n }\n\n .contentBottom {\n ", "\n .tagWrapper {\n margin-bottom: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .tags {\n font: var(--caption-semi-bold-12-15);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding-right: 2rem;\n }\n\n .date {\n font: var(--caption-medium-11-13);\n color: var(--grey-50);\n }\n }\n\n .contentTitle {\n font: ", ";\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n min-height: ", ";\n }\n\n .contentDesc {\n display: block;\n font: ", ";\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n ", "\n margin-bottom: ", ";\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$direction === "horizontal" ? "\n display: grid;\n align-items: center;\n justify-content: space-between;\n grid-template-columns: 104px 1fr;\n column-gap: 1.5rem;\n " : ""; }, function (props) { return props.$direction === "horizontal" ? "100%" : props.$size === "lg" ? "71.
|
|
13
|
+
exports.BlogCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n .author {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin-bottom: 1rem;\n\n .img {\n width: 40px;\n height: 40px;\n overflow: hidden;\n border-radius: 50%;\n position: relative;\n\n * {\n display: block !important;\n height: 100% !important;\n width: 100% !important;\n object-fit: cover !important;\n }\n }\n\n .title {\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n margin-left: 0.5rem;\n }\n }\n\n .content {\n ", "\n .contentImg {\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n padding-bottom: ", ";\n margin-bottom: ", ";\n\n > * {\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n position: absolute !important;\n left: 50% !important;\n top: 50% !important;\n transform: translate(-50%, -50%) !important;\n\n img {\n object-fit: cover;\n }\n }\n }\n\n .contentBottom {\n ", "\n .tagWrapper {\n margin-bottom: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .tags {\n font: var(--caption-semi-bold-12-15);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding-right: 2rem;\n }\n\n .date {\n font: var(--caption-medium-11-13);\n color: var(--grey-50);\n }\n }\n\n .contentTitle {\n font: ", ";\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n min-height: ", ";\n }\n\n .contentDesc {\n display: block;\n font: ", ";\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n ", "\n margin-bottom: ", ";\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n .author {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin-bottom: 1rem;\n\n .img {\n width: 40px;\n height: 40px;\n overflow: hidden;\n border-radius: 50%;\n position: relative;\n\n * {\n display: block !important;\n height: 100% !important;\n width: 100% !important;\n object-fit: cover !important;\n }\n }\n\n .title {\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n margin-left: 0.5rem;\n }\n }\n\n .content {\n ", "\n .contentImg {\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n padding-bottom: ", ";\n margin-bottom: ", ";\n\n > * {\n display: block !important;\n width: 100% !important;\n height: 100% !important;\n position: absolute !important;\n left: 50% !important;\n top: 50% !important;\n transform: translate(-50%, -50%) !important;\n\n img {\n object-fit: cover;\n }\n }\n }\n\n .contentBottom {\n ", "\n .tagWrapper {\n margin-bottom: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .tags {\n font: var(--caption-semi-bold-12-15);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding-right: 2rem;\n }\n\n .date {\n font: var(--caption-medium-11-13);\n color: var(--grey-50);\n }\n }\n\n .contentTitle {\n font: ", ";\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n min-height: ", ";\n }\n\n .contentDesc {\n display: block;\n font: ", ";\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n ", "\n margin-bottom: ", ";\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$direction === "horizontal" ? "\n display: grid;\n align-items: center;\n justify-content: space-between;\n grid-template-columns: 104px 1fr;\n column-gap: 1.5rem;\n " : ""; }, function (props) { return props.$direction === "horizontal" ? "100%" : props.$size === "lg" ? "71.75%" : "58.2%"; }, function (props) { return props.$direction === "horizontal" ? "0" : "1.5rem"; }, function (props) { return props.$direction === "horizontal" ? "\n display: flex;\n flex-direction: column-reverse;\n " : ""; }, function (props) { return props.$direction === "horizontal" ? "0" : props.$size === "lg" ? "1.5rem" : "1rem"; }, function (props) { return props.$size === "lg" ? "var(--headline-bold-18-22)" : "var(--title-bold-16-19)"; }, function (props) { return props.$size === "lg" ? "1.5rem" : "1rem"; }, function (props) { return props.$direction === "horizontal" ? "3" : props.$size === "lg" ? "2" : "3"; }, function (props) { return props.$size === "lg" ? props.$direction === "horizontal" ? "65px" : "44px" : "57px"; }, function (props) { return props.$size === "lg" ? "var(--title-regular-16-19)" : "var(--body-regular-14-17)"; }, function (props) { return props.$size === "lg" ? "5" : "3"; }, function (props) { return props.$direction === "horizontal" ? "\n display: none;\n " : ""; }, function (props) { return props.$size === "lg" ? "9px" : "0"; }, function (props) { return props.$size === "lg" ? "\n @media only screen and ".concat(devices_1.devices.lg, " {\n .content{\n display:block;\n .contentImg{\n padding-bottom: 58.2%;\n margin-bottom: 1.5rem;\n }\n .contentBottom{\n display:block;\n .tagWrapper{\n margin-bottom: 1rem;\n }\n .contentTitle {\n font: var(--title-bold-16-19);\n margin-bottom: 1rem;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n min-height: 57px !important;\n }\n \n .contentDesc {\n display: block;\n font: var(--body-regular-14-17);\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin-bottom: 0;\n }\n }\n }\n }\n ") : ""; });
|
|
14
14
|
var templateObject_1;
|
|
@@ -17,12 +17,12 @@ var Checkbox_styled_1 = require("./Checkbox.styled");
|
|
|
17
17
|
var react_1 = require("react");
|
|
18
18
|
var react_i18next_1 = require("react-i18next");
|
|
19
19
|
var Checkbox = function (_a) {
|
|
20
|
-
var _b = _a.value, value = _b === void 0 ? props_1.CheckboxDefault.value : _b, _c = _a.checked, checked = _c === void 0 ? props_1.CheckboxDefault.checked : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxDefault.name : _e, _f = _a.id, id = _f === void 0 ? props_1.CheckboxDefault.id : _f, _g = _a.label, label = _g === void 0 ? props_1.CheckboxDefault.label : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.CheckboxDefault.disabled : _h, _j = _a.size, size = _j === void 0 ? props_1.CheckboxDefault.size : _j, _k = _a.valid, valid = _k === void 0 ? props_1.CheckboxDefault.valid : _k, _l = _a.labelOffset, labelOffset = _l === void 0 ? props_1.CheckboxDefault.labelOffset : _l, _m = _a.color, color = _m === void 0 ? props_1.CheckboxDefault.color : _m, _o = _a.textSize, textSize = _o === void 0 ? props_1.CheckboxDefault.textSize : _o, _p = _a.verticalAlign, verticalAlign = _p === void 0 ? props_1.CheckboxDefault.verticalAlign : _p, _q = _a.required, required = _q === void 0 ? props_1.CheckboxDefault.required : _q;
|
|
21
|
-
var
|
|
20
|
+
var _b = _a.value, value = _b === void 0 ? props_1.CheckboxDefault.value : _b, _c = _a.checked, checked = _c === void 0 ? props_1.CheckboxDefault.checked : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxDefault.name : _e, _f = _a.id, id = _f === void 0 ? props_1.CheckboxDefault.id : _f, _g = _a.label, label = _g === void 0 ? props_1.CheckboxDefault.label : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.CheckboxDefault.disabled : _h, _j = _a.size, size = _j === void 0 ? props_1.CheckboxDefault.size : _j, _k = _a.valid, valid = _k === void 0 ? props_1.CheckboxDefault.valid : _k, _l = _a.labelOffset, labelOffset = _l === void 0 ? props_1.CheckboxDefault.labelOffset : _l, _m = _a.color, color = _m === void 0 ? props_1.CheckboxDefault.color : _m, _o = _a.textSize, textSize = _o === void 0 ? props_1.CheckboxDefault.textSize : _o, _p = _a.verticalAlign, verticalAlign = _p === void 0 ? props_1.CheckboxDefault.verticalAlign : _p, _q = _a.required, required = _q === void 0 ? props_1.CheckboxDefault.required : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.CheckboxDefault.readOnly : _r;
|
|
21
|
+
var _s = (0, react_1.useState)(color), inputColor = _s[0], setInputColor = _s[1];
|
|
22
22
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
23
23
|
(0, react_1.useEffect)(function () {
|
|
24
24
|
setInputColor(window.getComputedStyle(document.body).getPropertyValue('--primary'));
|
|
25
25
|
});
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$color": inputColor, "$textSize": textSize, "$verticalAlign": verticalAlign, "$required": required }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "indicator" }), label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "labelsWrapper" }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: "label", htmlFor: id }, { children: [label, " ", !required && (0, jsx_runtime_1.jsxs)("b", { children: ["(", t("OPTIONAL"), ")"] })] })) })))] })));
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$color": inputColor, "$textSize": textSize, "$verticalAlign": verticalAlign, "$required": required }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, readOnly: readOnly }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "indicator" }), label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "labelsWrapper" }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: "label", htmlFor: id }, { children: [label, " ", !required && (0, jsx_runtime_1.jsxs)("b", { children: ["(", t("OPTIONAL"), ")"] })] })) })))] })));
|
|
27
27
|
};
|
|
28
28
|
exports.default = Checkbox;
|
|
@@ -49,7 +49,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
49
49
|
};
|
|
50
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
51
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
52
|
-
var react_1 = require("react");
|
|
52
|
+
var react_1 = __importStar(require("react"));
|
|
53
53
|
var props_1 = require("./props");
|
|
54
54
|
var SelectBox_styled_1 = require("./SelectBox.styled");
|
|
55
55
|
var classnames_1 = __importDefault(require("classnames"));
|
|
@@ -63,27 +63,30 @@ var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
63
63
|
var _b, _c, _d, _e;
|
|
64
64
|
var _f = _a.isSearchable, isSearchable = _f === void 0 ? props_1.SelectBoxDefault.isSearchable : _f, _g = _a.menuIsOpen, menuIsOpen = _g === void 0 ? props_1.SelectBoxDefault.menuIsOpen : _g, _h = _a.label, label = _h === void 0 ? props_1.SelectBoxDefault.label : _h, _j = _a.width, width = _j === void 0 ? props_1.SelectBoxDefault.width : _j, _k = _a.name, name = _k === void 0 ? props_1.SelectBoxDefault.name : _k, _l = _a.placeholder, placeholder = _l === void 0 ? props_1.SelectBoxDefault.placeholder : _l, _m = _a.instanceId, instanceId = _m === void 0 ? props_1.SelectBoxDefault.instanceId : _m, _o = _a.options, options = _o === void 0 ? props_1.SelectBoxDefault.options : _o, _p = _a.lightBg, lightBg = _p === void 0 ? props_1.SelectBoxDefault.lightBg : _p, _q = _a.onChange, onChange = _q === void 0 ? props_1.SelectBoxDefault.onChange : _q, _r = _a.filterOption, filterOption = _r === void 0 ? props_1.SelectBoxDefault.filterOption : _r, _s = _a.hasError, hasError = _s === void 0 ? props_1.SelectBoxDefault.hasError : _s, _t = _a.errorMessage, errorMessage = _t === void 0 ? props_1.SelectBoxDefault.errorMessage : _t, _u = _a.maxOptionListHeight, maxOptionListHeight = _u === void 0 ? props_1.SelectBoxDefault.maxOptionListHeight : _u, _v = _a.isAsync, isAsync = _v === void 0 ? props_1.SelectBoxDefault.isAsync : _v, _w = _a.hasShowDropdownIcon, hasShowDropdownIcon = _w === void 0 ? props_1.SelectBoxDefault.hasShowDropdownIcon : _w, _x = _a.hasShowSearchIcon, hasShowSearchIcon = _x === void 0 ? props_1.SelectBoxDefault.hasShowSearchIcon : _x, _y = _a.autoComplete, autoComplete = _y === void 0 ? props_1.SelectBoxDefault.autoComplete : _y, _z = _a.menuPlacement, menuPlacement = _z === void 0 ? props_1.SelectBoxDefault.menuPlacement : _z, _0 = _a.id, id = _0 === void 0 ? props_1.SelectBoxDefault.id : _0, _1 = _a.isClearable, isClearable = _1 === void 0 ? props_1.SelectBoxDefault.isClearable : _1, _2 = _a.size, size = _2 === void 0 ? props_1.SelectBoxDefault.size : _2, _3 = _a.isMulti, isMulti = _3 === void 0 ? props_1.SelectBoxDefault.isMulti : _3, _4 = _a.menuPosition, menuPosition = _4 === void 0 ? props_1.SelectBoxDefault.menuPosition : _4, defaultValue = _a.defaultValue, other = __rest(_a, ["isSearchable", "menuIsOpen", "label", "width", "name", "placeholder", "instanceId", "options", "lightBg", "onChange", "filterOption", "hasError", "errorMessage", "maxOptionListHeight", "isAsync", "hasShowDropdownIcon", "hasShowSearchIcon", "autoComplete", "menuPlacement", "id", "isClearable", "size", "isMulti", "menuPosition", "defaultValue"]);
|
|
65
65
|
var simplebarRef = (0, react_1.useRef)(null);
|
|
66
|
-
var CustomOption = function (props) {
|
|
66
|
+
var CustomOption = react_1.default.forwardRef(function (props, ref) {
|
|
67
67
|
var _a;
|
|
68
|
-
var
|
|
68
|
+
var innerProps = props.innerProps, isDisabled = props.isDisabled, data = props.data, isFocused = props.isFocused, isSelected = props.isSelected, isMulti = props.isMulti, children = props.children // children is part of OptionProps, but we render custom content based on `data`
|
|
69
|
+
;
|
|
70
|
+
// Variables derived from props.data
|
|
69
71
|
var isFixedBottom = data === null || data === void 0 ? void 0 : data.isFixedBottom;
|
|
70
|
-
var isSmall = !data.labelBottom;
|
|
71
|
-
var
|
|
72
|
-
var
|
|
73
|
-
var
|
|
74
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
72
|
+
var isSmall = !(data === null || data === void 0 ? void 0 : data.labelBottom);
|
|
73
|
+
var isCustomRender = data === null || data === void 0 ? void 0 : data.isCustom;
|
|
74
|
+
var isDisabledUserOption = data === null || data === void 0 ? void 0 : data.isDisabled; // User-defined disabled state in data from the option itself
|
|
75
|
+
var isHideSelectedRender = data === null || data === void 0 ? void 0 : data.isHideSelected;
|
|
76
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: ref }, innerProps, { className: (0, classnames_1.default)("customSelect__option", "option", (_a = {},
|
|
75
77
|
_a["customSelect__option--is-focused"] = isFocused,
|
|
76
|
-
_a["customSelect__option--is-selected"] = isSelected && !
|
|
78
|
+
_a["customSelect__option--is-selected"] = isSelected && !isHideSelectedRender,
|
|
77
79
|
_a["optionSm"] = isSmall,
|
|
78
80
|
_a["fixedBottom"] = isFixedBottom,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
_a
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
};
|
|
81
|
+
// Use `isDisabled` from props for the main disabled state (react-select controlled)
|
|
82
|
+
// and `isDisabledUserOption` for any custom visual/behavioral cues if needed.
|
|
83
|
+
_a["isDisabled"] = isDisabled || isDisabledUserOption,
|
|
84
|
+
_a["isCustom"] = isCustomRender,
|
|
85
|
+
_a)) }, { children: isCustomRender ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "customContent" }, { children: data.customContent }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "option-container" }, { children: [isMulti && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "checkbox-container" }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: "".concat(innerProps.id, "-checkbox"), checked: isSelected, size: "small", onChange: function () { } }) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "option-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "left" }, { children: [((data === null || data === void 0 ? void 0 : data.optionLabel) || data.label) &&
|
|
86
|
+
(0, jsx_runtime_1.jsx)("strong", { children: (data === null || data === void 0 ? void 0 : data.optionLabel) || (data === null || data === void 0 ? void 0 : data.label) }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { children: data.labelBottom })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [data.price &&
|
|
87
|
+
(0, jsx_runtime_1.jsxs)("strong", { children: [data.price, data.priceSm && (0, jsx_runtime_1.jsx)("small", { children: data.priceSm })] }), data.period && (0, jsx_runtime_1.jsx)("span", { children: data.period })] }))] }))] }))) })));
|
|
88
|
+
});
|
|
89
|
+
CustomOption.displayName = 'CustomOption';
|
|
87
90
|
var Input = function (props) { return (0, jsx_runtime_1.jsx)(react_select_1.components.Input, __assign({}, props, { autoComplete: autoComplete })); };
|
|
88
91
|
var DropdownIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__dropdown-indicator" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "ArrowDownBig" }) })); };
|
|
89
92
|
var LoadingIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__loading-indicator css-o9ehiq-loadingIndicator", "aria-hidden": "true" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: "1rem", height: "1rem", variant: "primary" }) })); };
|
|
@@ -116,6 +119,20 @@ var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
116
119
|
var ValueContainer = function (props) {
|
|
117
120
|
return ((0, jsx_runtime_1.jsx)(react_select_1.components.ValueContainer, __assign({}, props, { children: props.children })));
|
|
118
121
|
};
|
|
119
|
-
return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ "$width": width, "$hasError": hasError, "$maxOptionListHeight": maxOptionListHeight, "$hasShowDropdownIcon": hasShowDropdownIcon, "$MenuPlacement": menuPlacement, "$size": size, "$isMulti": isMulti, "$menuPosition": menuPosition }, { children: [label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: {
|
|
122
|
+
return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, __assign({ "$width": width, "$hasError": hasError, "$maxOptionListHeight": maxOptionListHeight, "$hasShowDropdownIcon": hasShowDropdownIcon, "$MenuPlacement": menuPlacement, "$size": size, "$isMulti": isMulti, "$menuPosition": menuPosition }, { children: [label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "select" }, { children: isAsync ? ((0, jsx_runtime_1.jsx)(async_1.default, __assign({ components: {
|
|
123
|
+
Option: CustomOption,
|
|
124
|
+
Input: Input,
|
|
125
|
+
DropdownIndicator: DropdownIndicator,
|
|
126
|
+
MenuList: MenuList,
|
|
127
|
+
LoadingIndicator: LoadingIndicator,
|
|
128
|
+
MultiValue: MultiValue
|
|
129
|
+
}, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_b = {}, _b['isSearchable'] = isSearchable && hasShowSearchIcon, _b), (_c = {}, _c['lightBg'] = lightBg, _c)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, loadingMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false, isClearable: isClearable, defaultValue: defaultValue, isMulti: isMulti, closeMenuOnSelect: !isMulti }, other, { ref: ref, id: id }))) : ((0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: {
|
|
130
|
+
Option: CustomOption,
|
|
131
|
+
Input: Input,
|
|
132
|
+
DropdownIndicator: DropdownIndicator,
|
|
133
|
+
MenuList: MenuList,
|
|
134
|
+
LoadingIndicator: LoadingIndicator,
|
|
135
|
+
MultiValue: MultiValue
|
|
136
|
+
}, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_d = {}, _d['isSearchable'] = isSearchable && hasShowSearchIcon, _d), (_e = {}, _e['lightBg'] = lightBg, _e)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; }, captureMenuScroll: false, isClearable: isClearable, defaultValue: defaultValue, isMulti: isMulti, closeMenuOnSelect: !isMulti, hideSelectedOptions: false }, other, { ref: ref, id: id }))) })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
|
|
120
137
|
});
|
|
121
138
|
exports.default = SelectBox;
|