krl-alfred 1.81.2 → 1.81.3
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.
|
@@ -22,7 +22,7 @@ var Checkbox_1 = __importDefault(require("../Checkbox"));
|
|
|
22
22
|
var Badges_1 = __importDefault(require("../Badges"));
|
|
23
23
|
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
24
24
|
var ProductCardCheckbox = function (_a) {
|
|
25
|
-
var _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? props_1.ProductCardCheckboxDefault.hasCheckbox : _b, _c = _a.title, title = _c === void 0 ? props_1.ProductCardCheckboxDefault.title : _c, _d = _a.content, content = _d === void 0 ? props_1.ProductCardCheckboxDefault.content : _d, _e = _a.checkboxId, checkboxId = _e === void 0 ? props_1.ProductCardCheckboxDefault.checkboxId : _e, _f = _a.size, size = _f === void 0 ? props_1.ProductCardCheckboxDefault.size : _f, _g = _a.productCardOnChange, productCardOnChange = _g === void 0 ? props_1.ProductCardCheckboxDefault.productCardOnChange : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ProductCardCheckboxDefault.disabled : _h, _j = _a.value, value = _j === void 0 ? props_1.ProductCardCheckboxDefault.value : _j, _k = _a.name, name = _k === void 0 ? props_1.ProductCardCheckboxDefault.name : _k, _l = _a.isContentOffset, isContentOffset = _l === void 0 ? props_1.ProductCardCheckboxDefault.isContentOffset : _l, _m = _a.checked, checked = _m === void 0 ? props_1.ProductCardCheckboxDefault.checked : _m, _o = _a.image, image = _o === void 0 ? props_1.ProductCardCheckboxDefault.image : _o, _p = _a.hasBadge, hasBadge = _p === void 0 ? props_1.ProductCardCheckboxDefault.hasBadge : _p, _q = _a.badgeText, badgeText = _q === void 0 ? props_1.ProductCardCheckboxDefault.badgeText : _q, _r = _a.badgeVariant, badgeVariant = _r === void 0 ? props_1.ProductCardCheckboxDefault.badgeVariant : _r, _s = _a.infoText, infoText = _s === void 0 ? props_1.ProductCardCheckboxDefault.infoText : _s, valid = _a.valid;
|
|
26
|
-
return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId, disabled: disabled, "$isContentOffset": isContentOffset, "$size": size, "$hasBadge": hasBadge }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "badgeWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardText" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltipWrapper" }, { children: infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "
|
|
25
|
+
var _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? props_1.ProductCardCheckboxDefault.hasCheckbox : _b, _c = _a.title, title = _c === void 0 ? props_1.ProductCardCheckboxDefault.title : _c, _d = _a.content, content = _d === void 0 ? props_1.ProductCardCheckboxDefault.content : _d, _e = _a.checkboxId, checkboxId = _e === void 0 ? props_1.ProductCardCheckboxDefault.checkboxId : _e, _f = _a.size, size = _f === void 0 ? props_1.ProductCardCheckboxDefault.size : _f, _g = _a.productCardOnChange, productCardOnChange = _g === void 0 ? props_1.ProductCardCheckboxDefault.productCardOnChange : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ProductCardCheckboxDefault.disabled : _h, _j = _a.value, value = _j === void 0 ? props_1.ProductCardCheckboxDefault.value : _j, _k = _a.name, name = _k === void 0 ? props_1.ProductCardCheckboxDefault.name : _k, _l = _a.isContentOffset, isContentOffset = _l === void 0 ? props_1.ProductCardCheckboxDefault.isContentOffset : _l, _m = _a.checked, checked = _m === void 0 ? props_1.ProductCardCheckboxDefault.checked : _m, _o = _a.image, image = _o === void 0 ? props_1.ProductCardCheckboxDefault.image : _o, _p = _a.hasBadge, hasBadge = _p === void 0 ? props_1.ProductCardCheckboxDefault.hasBadge : _p, _q = _a.badgeText, badgeText = _q === void 0 ? props_1.ProductCardCheckboxDefault.badgeText : _q, _r = _a.badgeVariant, badgeVariant = _r === void 0 ? props_1.ProductCardCheckboxDefault.badgeVariant : _r, _s = _a.infoText, infoText = _s === void 0 ? props_1.ProductCardCheckboxDefault.infoText : _s, _t = _a.infoTitle, infoTitle = _t === void 0 ? props_1.ProductCardCheckboxDefault.infoTitle : _t, valid = _a.valid;
|
|
26
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ htmlFor: checkboxId, disabled: disabled, "$isContentOffset": isContentOffset, "$size": size, "$hasBadge": hasBadge }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "badgeWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "text", variant: badgeVariant }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "large" ? "medium" : "small", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled, valid: valid }) })), image && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardText" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltipWrapper" }, { children: (infoText || infoTitle) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "bottomRight", popupWidth: "302px", popupRight: "-23px", iconWidth: "24px", iconHeight: "24px", title: infoTitle }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))) }))] })), content && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: "notSelect_".concat(checkboxId), className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("input", { id: "notSelect_".concat(checkboxId), style: { display: "none" } }), content] })))] })) })));
|
|
27
27
|
};
|
|
28
28
|
exports.default = ProductCardCheckbox;
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.ProductCardCheckboxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n\n .badgeWrapper {\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n }\n\n .productCardCheckboxContent {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n &:is(.hidden) {\n display: none;\n }\n\n .indicator {\n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n }\n\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n\n .productCardText {\n display: flex;\n align-items: center;\n justify-content: space-between;\n .productCardTitle {\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: var(--title-semi-bold-16-19);\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n }\n .tooltipWrapper{\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n
|
|
13
|
+
exports.ProductCardCheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n\n .badgeWrapper {\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n }\n\n .productCardCheckboxContent {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n &:is(.hidden) {\n display: none;\n }\n\n .indicator {\n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n }\n\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n\n .productCardText {\n display: flex;\n align-items: center;\n justify-content: space-between;\n .productCardTitle {\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: var(--title-semi-bold-16-19);\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n }\n .tooltipWrapper{\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n .popupText{\n font: var(--caption-medium-12-15);\n }\n }\n }\n\n .productCardContent {\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n }\n }\n\n ", "\n"], ["\n display: block;\n max-width: 634px;\n\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n\n .badgeWrapper {\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n }\n\n .productCardCheckboxContent {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n &:is(.hidden) {\n display: none;\n }\n\n .indicator {\n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n }\n\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n\n .productCardText {\n display: flex;\n align-items: center;\n justify-content: space-between;\n .productCardTitle {\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: var(--title-semi-bold-16-19);\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n }\n .tooltipWrapper{\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n .popupText{\n font: var(--caption-medium-12-15);\n }\n }\n }\n\n .productCardContent {\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n cursor: initial;\n @media only screen and ", " {\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n }\n }\n }\n\n ", "\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : "\n cursor: pointer;\n "; }, devices_1.devices.md, devices_1.devices.md, devices_1.devices.md, function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md, function (props) { return props.$size === "small" && "\n .productCardInner{\n padding: ".concat(props.$hasBadge ? "16px" : "24px 16px", ";\n .productCardCheckboxContent {\n .indicator {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n \n .productCardImg {\n \n }\n .productCardTitle {\n font: var(--body-semi-bold-14-17);\n }\n .productCardContent{\n margin: 1rem auto 0 0;\n }\n }\n "); });
|
|
14
14
|
var templateObject_1;
|