krl-alfred 1.71.5 → 1.71.7

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.
@@ -29,7 +29,7 @@ var CouponCode = function (props) {
29
29
  setExpanded(props.expanded);
30
30
  }, [props.expanded]);
31
31
  var toggleExpand = function () { return setExpanded(function (prevState) { return !prevState; }); };
32
- return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({}, props, { expanded: expanded, children: [(0, jsx_runtime_1.jsxs)("div", { onClick: toggleExpand, className: "header", children: [(0, jsx_runtime_1.jsx)("div", { className: "title body-bold-14-17", children: props.title }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown", width: "24px", height: "24px" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "body", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: "\u0130ndirim kodunu yaz", alwaysShowMask: false, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, { width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant, children: props.buttonText })] })] })));
32
+ return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({}, props, { expanded: expanded, children: [(0, jsx_runtime_1.jsxs)("div", { onClick: toggleExpand, className: "header", children: [(0, jsx_runtime_1.jsx)("div", { className: "title body-bold-14-17", children: props.title }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown", width: "24px", height: "24px" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "body", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: props.placeholder, alwaysShowMask: false, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, { width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant, children: props.buttonText })] })] })));
33
33
  };
34
34
  CouponCode.defaultProps = {
35
35
  title: "Title",
@@ -43,5 +43,6 @@ CouponCode.defaultProps = {
43
43
  errorMessage: "",
44
44
  buttonVariant: "primary",
45
45
  buttonWidth: "96px",
46
+ placeholder: "İndirim kodunu gir",
46
47
  };
47
48
  exports.default = CouponCode;
@@ -34,7 +34,9 @@ exports.Default = {
34
34
  autoFocus: false,
35
35
  hasError: false,
36
36
  errorMessage: "",
37
- value: "COUPONCODE",
38
- buttonText: "Uygula"
37
+ //value : "COUPONCODE",
38
+ value: "",
39
+ buttonText: "Uygula",
40
+ placeholder: "İndirim kodunu gir",
39
41
  },
40
42
  };
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
36
36
  Object.defineProperty(exports, "__esModule", { value: true });
37
37
  var jsx_runtime_1 = require("react/jsx-runtime");
38
38
  var React = __importStar(require("react"));
39
- var SvgDelete = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 25, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M19.3238 10.4668C19.3238 10.4668 18.7808 17.2018 18.4658 20.0388C18.3158 21.3938 17.4788 22.1878 16.1078 22.2128C13.4988 22.2598 10.8868 22.2628 8.27881 22.2078C6.95981 22.1808 6.13681 21.3768 5.98981 20.0458C5.67281 17.1838 5.13281 10.4668 5.13281 10.4668", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M20.708 6.23828H3.75", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.4406 6.239C17.6556 6.239 15.9796 4.684 15.8256 3.915L15.5826 2.699C15.4326 2.138 14.9246 1.75 14.3456 1.75H10.1126C9.53358 1.75 9.02558 2.138 8.87558 2.699L8.63258 3.915C8.47858 4.684 6.80258 6.239 6.01758 6.239", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
39
+ var SvgDelete = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 14, height: 16, viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("g", { id: "Delete", children: (0, jsx_runtime_1.jsx)("path", { id: "Vector", d: "M11.8831 6.97964C11.8831 6.97964 11.5211 11.4696 11.3111 13.361C11.2111 14.2643 10.6531 14.7936 9.73913 14.8103C7.9998 14.8416 6.25847 14.8436 4.5198 14.807C3.64047 14.789 3.0918 14.253 2.9938 13.3656C2.78247 11.4576 2.42247 6.97964 2.42247 6.97964M12.8053 4.16048L1.5 4.16048M11.2937 4.16064C10.7704 4.16064 9.65305 3.12397 9.55038 2.6113L9.38838 1.80064C9.28838 1.42664 8.94972 1.16797 8.56372 1.16797L5.74172 1.16797C5.35572 1.16797 5.01705 1.42664 4.91705 1.80064L4.75505 2.6113C4.65238 3.12397 3.53505 4.16064 3.01172 4.16064", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }))); };
40
40
  exports.default = SvgDelete;
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
36
36
  Object.defineProperty(exports, "__esModule", { value: true });
37
37
  var jsx_runtime_1 = require("react/jsx-runtime");
38
38
  var React = __importStar(require("react"));
39
- var SvgNegativeSmall = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M15.6673 11.9914H8.33398", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
39
+ var SvgNegativeSmall = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("g", { id: "NegativeSmall", children: (0, jsx_runtime_1.jsx)("g", { id: "Plus", children: (0, jsx_runtime_1.jsx)("path", { id: "Line_186", d: "M10.4436 7.99294H5.55469", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }))); };
40
40
  exports.default = SvgNegativeSmall;
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
36
36
  Object.defineProperty(exports, "__esModule", { value: true });
37
37
  var jsx_runtime_1 = require("react/jsx-runtime");
38
38
  var React = __importStar(require("react"));
39
- var SvgPlusSmall = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M12.0016 8.32812V15.6545", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.6673 11.9914H8.33398", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
39
+ var SvgPlusSmall = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("g", { id: "arrow/+", children: (0, jsx_runtime_1.jsxs)("g", { id: "i-add", children: [(0, jsx_runtime_1.jsx)("path", { id: "Path", d: "M10.666 8.00104L5.33268 8.00104", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { id: "Path_2", d: "M7.99896 10.6673L7.99896 5.33398", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }) }) }))); };
40
40
  exports.default = SvgPlusSmall;
@@ -13,7 +13,7 @@ var InsuranceBox = function (props) {
13
13
  var InsuranceText = function () {
14
14
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { className: "body-extra-bold-13-16", children: "Tamamlars\u0131n %100\u2019e Tamamlay\u0131c\u0131 Ek G\u00FCvence Paketi" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-medium-11-13", children: "Tamamlars\u0131n, kira s\u00FCren boyunca cihaz\u0131na ek g\u00FCvence sa\u011Flar. Ek g\u00FCvence kapsam\u0131nda cihaz\u0131n de\u011Fi\u015Ftirilir veya \u00FCcretsiz onar\u0131l\u0131r. Ek g\u00FCvenceli kiralamalarda kira s\u00FCreni uzat\u0131rken, yeni kira s\u00FCresine ait ek g\u00FCvencen otomatik olarak sepete eklenir. Ek g\u00FCvencesiz yap\u0131lan kiralamalarda, s\u00FCre uzat\u0131m\u0131 s\u0131ras\u0131nda sonradan ek g\u00FCvence eklenemez." }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "D\u00FC\u015Fme, \u00E7arpma gibi kazalarda olu\u015Fan hasarlar" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "S\u0131v\u0131 temas\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Ekran vb par\u00E7a k\u0131r\u0131lmalar\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "\u00C7izilmeler" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Kutu hasarlar\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "K\u0131sa devre, voltaj nedeniyle olu\u015Fabilecek sorunlar" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Hatal\u0131 aksesuar kullan\u0131m\u0131 sorunlar\u0131" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "caption-medium-11-13", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Uyar\u0131:" }), " Kay\u0131p, \u00E7al\u0131nma, kas\u0131tl\u0131 zarar verme, onar\u0131lamaz duruma getirme, cihaz\u0131n kutusunu kaybetme gibi durumlarda ve 5.000 TL\u2019yi a\u015Fan hasarlarda ek g\u00FCvence paketi ge\u00E7erli de\u011Fildir."] })] }));
15
15
  };
16
- return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, { hasBorder: hasBorder, hasBgColor: hasBgColor, width: width, height: height, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { disabled: disabled, onChange: onChange, checked: checked, size: "large" }) }), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InnerWrapper, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Logo, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: isMobile ? "116px" : "64.51px", height: isMobile ? "13.25px" : "7.37px" }) }), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, { children: [(0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.Description, { className: "caption-semi-bold-12-15", children: ["Hasar g\u00FCvenceni %100\u2019e ", isTitleWrap && (0, jsx_runtime_1.jsx)("br", {}), "tamamlars\u0131n! ", (0, jsx_runtime_1.jsx)("b", { className: "body-extra-bold-13-16", children: priceText })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: tooltipTitle, position: tooltipPosition, hasCloseOnOutsideClick: hasCloseOnOutsideClick, hasClickAction: true, popupWidth: popupWidth, iconWidth: "24px", iconHeight: "24px", children: tooltipDescription || ((0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.TooltipDescription, { children: (0, jsx_runtime_1.jsx)(InsuranceText, {}) })) })] })] })] }));
16
+ return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, { hasBorder: hasBorder, hasBgColor: hasBgColor, width: width, height: height, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { disabled: disabled, onChange: onChange, checked: checked, size: "large" }) }), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InnerWrapper, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Logo, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: isMobile ? "116px" : "64.51px", height: isMobile ? "13.25px" : "7.37px" }) }), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, { children: [(0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.Description, { className: "caption-semi-bold-12-15", children: ["Hasar g\u00FCvenceni %100\u2019e ", isTitleWrap && (0, jsx_runtime_1.jsx)("br", {}), "tamamlars\u0131n! ", (0, jsx_runtime_1.jsx)("b", { className: "body-extra-bold-13-16", children: priceText })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { popupSize: "medium", title: tooltipTitle, position: tooltipPosition, hasCloseOnOutsideClick: hasCloseOnOutsideClick, hasClickAction: true, popupWidth: popupWidth, iconWidth: "24px", iconHeight: "24px", children: tooltipDescription || ((0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.TooltipDescription, { children: (0, jsx_runtime_1.jsx)(InsuranceText, {}) })) })] })] })] }));
17
17
  };
18
18
  InsuranceBox.defaultProps = {
19
19
  height: "90px",
@@ -25,7 +25,7 @@ var ShoppingCartProduct = function (props) {
25
25
  var item = _a.item, children = _a.children;
26
26
  return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
27
27
  };
28
- return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "inner", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: props.image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-semi-bold-16-19", children: props.title }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: "discountRate body-extra-bold-13-16", children: ["%", props.discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && props.discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "oldPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price caption-semi-bold-12-15", children: props.oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: "period caption-regular-12-15", children: ["/ ", props.oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price body-extra-bold-14-17", children: props.price }), (0, jsx_runtime_1.jsxs)("div", { className: "period body-regular-13-16", children: ["/ ", props.period] })] })] })] }), (0, jsx_runtime_1.jsx)("p", { className: "productCardDeliveryText body-medium-13-16", children: props.deliveryText })] }), (0, jsx_runtime_1.jsxs)("div", { className: "actions", children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "24px", height: "24px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("popup", "caption-semi-bold-12-15"), children: props.errorText })] }), (0, jsx_runtime_1.jsx)("div", { className: "quantity body-extra-bold-13-16", children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity }), props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))] })] }), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", { onClick: !props.hasLoading && props.toggleInsurance, className: "insurance", children: [(0, jsx_runtime_1.jsx)("div", { className: "insuranceImg", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: "64.51px", height: "7.37px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text caption-semi-bold-12-15", children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsx)("span", { className: "price caption-extra-bold-12-15", children: props.insurancePrice })] }), (0, jsx_runtime_1.jsx)("div", { className: "actions", children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { popupWidth: props.insuranceTooltipWidth, position: "bottomRight", children: props.insuranceTooltipText })) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) }))) })] }))] })));
28
+ return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "inner", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: props.image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-semi-bold-16-19", children: props.title }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: "discountRate body-extra-bold-13-16", children: ["%", props.discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && props.discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "oldPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price caption-semi-bold-12-15", children: props.oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: "period caption-regular-12-15", children: ["/ ", props.oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price body-extra-bold-14-17", children: props.price }), (0, jsx_runtime_1.jsxs)("div", { className: "period body-regular-13-16", children: ["/ ", props.period] })] })] })] }), (0, jsx_runtime_1.jsxs)("p", { className: "productCardDeliveryText body-medium-13-16", children: [props.deliveryDangerText && (0, jsx_runtime_1.jsx)("span", { className: "productCardDeliveryDanger", children: props.deliveryDangerText }), props.deliveryText] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "actions", children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("popup", "caption-semi-bold-12-15"), children: props.errorText })] }), (0, jsx_runtime_1.jsx)("div", { className: "quantity body-extra-bold-13-16", children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity }), props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))] })] }), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", { onClick: !props.hasLoading && props.toggleInsurance, className: "insurance", children: [(0, jsx_runtime_1.jsx)("div", { className: "insuranceImg", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: "64.51px", height: "7.37px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text caption-semi-bold-12-15", children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", { className: "price caption-extra-bold-12-15", children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", { className: "quantity", children: props.insuranceQuantity })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "actions", children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { popupRight: "-12px", popupWidth: props.insuranceTooltipWidth, position: "bottomRight", children: props.insuranceTooltipText })) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) }))) })] }))] })));
29
29
  };
30
30
  ShoppingCartProduct.defaultProps = {
31
31
  insuranceText: "Tamamlayıcı ek güvence ekle",
@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.ActionButton = exports.ShoppingCartProductStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
- exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n }\n .text{\n padding-right: 0.5rem;\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n &:hover{\n color: var(--primary);\n }\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: ", ";\n display: block;\n overflow: hidden;\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: space-between;\n justify-content: center;\n padding: 4px 0;\n .quantity{\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n }\n }\n .actions{\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n }\n .text{\n padding-right: 0.5rem;\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n &:hover{\n color: var(--primary);\n }\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: ", ";\n display: block;\n overflow: hidden;\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: space-between;\n justify-content: center;\n padding: 4px 0;\n .quantity{\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n }\n }\n .actions{\n }\n }\n"])), function (props) { return props.hasDeliveryDanger ? "var(--red)" : "var(--grey-40)"; }, function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; });
12
+ exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n }\n .text{\n padding-right: 0.5rem;\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n &:hover{\n color: var(--primary-hover);\n }\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: space-between;\n justify-content: center;\n padding: 4px 0;\n .quantity{\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n margin: 0;\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n }\n .text{\n padding-right: 0.5rem;\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n &:hover{\n color: var(--primary-hover);\n }\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: space-between;\n justify-content: center;\n padding: 4px 0;\n .quantity{\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n .price{\n display: block;\n margin: 0;\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n }\n }\n"])), function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; });
13
13
  exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border:0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled{\n cursor: no-drop;\n }\n .popup{\n position: absolute;\n width: 139px;\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n svg{\n display: block;\n path, rect{\n stroke : var(--primary);\n transition: all .1s ease;\n }\n }\n &:hover{\n background-color : var(--primary);\n svg{\n path, rect{\n stroke : white;\n }\n }\n }\n"], ["\n border:0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled{\n cursor: no-drop;\n }\n .popup{\n position: absolute;\n width: 139px;\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n svg{\n display: block;\n path, rect{\n stroke : var(--primary);\n transition: all .1s ease;\n }\n }\n &:hover{\n background-color : var(--primary);\n svg{\n path, rect{\n stroke : white;\n }\n }\n }\n"])));
14
14
  var templateObject_1, templateObject_2;
@@ -38,7 +38,7 @@ exports.Default = {
38
38
  oldPricePeriod: "hafta",
39
39
  quantity: 1,
40
40
  period: "hafta",
41
- hasDeliveryDanger: false,
41
+ deliveryDangerText: "Tahmini teslim değişti",
42
42
  onRemove: function () { return console.log("onRemove event"); },
43
43
  onIncrement: function () { return console.log("onIncrement event"); },
44
44
  onDecrement: function () { return console.log("onDecrement event"); },
@@ -49,6 +49,7 @@ exports.Default = {
49
49
  errorText: "Bu üründen daha fazla sepetinize ekleyemezsiniz.",
50
50
  insuranceText: "Tamamlayıcı ek güvence ekle",
51
51
  insurancePrice: "",
52
+ insuranceQuantity: "",
52
53
  hasInsurance: true,
53
54
  hasInsuranceTooltip: false,
54
55
  insuranceTooltipText: (0, jsx_runtime_1.jsx)("div", { children: "\u00D6nceki kiralaman ek g\u00FCvenceli oldu\u011Fu i\u00E7in, s\u00FCre uzat\u0131rken de ek g\u00FCvencen otomatik olarak eklenir" }),
@@ -9,14 +9,14 @@ var Tooltip_styled_1 = require("./Tooltip.styled");
9
9
  var Icon_1 = __importDefault(require("../Icon/Icon"));
10
10
  var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
11
11
  var Tooltip = function (props) {
12
- var children = props.children, title = props.title, hasClickAction = props.hasClickAction, isOpen = props.isOpen, iconWidth = props.iconWidth, iconHeight = props.iconHeight, popupWidth = props.popupWidth, position = props.position, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick;
12
+ var children = props.children, title = props.title, hasClickAction = props.hasClickAction, isOpen = props.isOpen, iconWidth = props.iconWidth, iconHeight = props.iconHeight, popupWidth = props.popupWidth, position = props.position, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, popupSize = props.popupSize, popupLeft = props.popupLeft, popupRight = props.popupRight, popupTop = props.popupTop, popupBottom = props.popupBottom;
13
13
  var _a = (0, react_1.useState)(isOpen), isOpenTooltip = _a[0], setIsOpenTooltip = _a[1];
14
14
  (0, react_1.useEffect)(function () {
15
15
  setIsOpenTooltip(isOpen);
16
16
  }, [isOpen]);
17
17
  var tooltipRef = (0, react_1.useRef)();
18
18
  (0, useOnClickOutside_1.default)(tooltipRef, function () { return setIsOpenTooltip(false); }, hasCloseOnOutsideClick);
19
- return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, { ref: tooltipRef, hasClickAction: hasClickAction, children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, { hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: iconWidth, height: iconHeight }) }), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, { iconWidth: iconWidth, position: position, popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, className: "caption-medium-11-13", children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { className: "body-extra-bold-13-16", children: title }), children] })] }));
19
+ return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, { ref: tooltipRef, hasClickAction: hasClickAction, children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, { isOpen: isOpenTooltip, position: position, hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: iconWidth, height: iconHeight }) }), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, { popupSize: popupSize, iconWidth: iconWidth, position: position, popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, className: "caption-medium-11-13", popupLeft: popupLeft, popupRight: popupRight, popupTop: popupTop, popupBottom: popupBottom, children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { className: "body-extra-bold-13-16", children: title }), children] })] }));
20
20
  };
21
21
  Tooltip.defaultProps = {
22
22
  iconWidth: "16px",
@@ -10,42 +10,51 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.Popup = exports.Title = exports.Selector = exports.TooltipStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
- exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"], ["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"])), function (props) { return !props.hasClickAction && "\n &:hover {\n > div {\n opacity: 1;\n }\n }\n "; });
14
- exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"], ["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; });
15
- exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n margin-bottom: 0.5rem;\n"], ["\n display: block;\n margin-bottom: 0.5rem;\n"])));
16
- exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n position: absolute;\n width: ", ";\n padding: 0.5rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -1.2rem;\n padding: 0.5rem;\n &:before {\n left: auto !important;\n transform: rotate(45deg) !important;\n right: ", " !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n"], ["\n\n position: absolute;\n width: ", ";\n padding: 0.5rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -1.2rem;\n padding: 0.5rem;\n &:before {\n left: auto !important;\n transform: rotate(45deg) !important;\n right: ", " !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n"])), function (props) { return props.popupWidth ? props.popupWidth : "151px"; }, function (props) {
13
+ exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"], ["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"])), function (props) { return !props.hasClickAction && "\n &:hover {\n > div {\n opacity: 1;\n :before{\n opacity:1;\n }\n }\n }\n "; });
14
+ exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n cursor: ", ";\n position: relative;\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n\n\n\n &:before {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n right: auto;\n transition: all 0.15s ease;\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n opacity: ", ";\n ", ";\n }\n"], ["\n display: block;\n cursor: ", ";\n position: relative;\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n\n\n\n &:before {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n right: auto;\n transition: all 0.15s ease;\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n opacity: ", ";\n ", ";\n }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; }, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, function (props) {
17
15
  switch (props.position) {
18
16
  case 'bottomRight':
19
- return "\n right: -20px;\n top: calc(100% + 10px);\n ";
17
+ return "\n top: calc(100% + 4px);\n ";
20
18
  case 'bottomCenter':
21
- return "\n left: 50%;\n top: calc(100% + 10px);\n transform: translateX(-50%);\n ";
19
+ return "\n top: calc(100% + 4px);\n ";
22
20
  case 'bottomLeft':
23
- return "\n left: -20px;\n top: calc(100% + 10px);\n ";
21
+ return "\n top: calc(100% + 4px);\n ";
24
22
  case 'topRight':
25
- return "\n right: -20px;\n bottom: calc(100% + 10px);\n ";
23
+ return "\n bottom: calc(100% + 4px);\n ";
26
24
  case 'topCenter':
27
- return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
25
+ return "\n bottom: calc(100% + 4px);\n ";
28
26
  case 'topLeft':
29
- return "\n left: -20px;\n bottom: calc(100% + 10px);\n ";
27
+ return "\n bottom: calc(100% + 4px);\n ";
30
28
  default:
31
- return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
29
+ return "\n bottom: calc(100% + 4px);\n ";
30
+ }
31
+ });
32
+ exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n margin-bottom: 0.5rem;\n"], ["\n display: block;\n margin-bottom: 0.5rem;\n"])));
33
+ exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n padding: ", ";\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: ", " !important;;\n padding: 0.5rem;\n }\n"], ["\n position: absolute;\n width: ", ";\n padding: ", ";\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: ", " !important;;\n padding: 0.5rem;\n }\n"])), function (props) { return props.popupWidth ? props.popupWidth : "151px"; }, function (props) {
34
+ switch (props.popupSize) {
35
+ case 'small':
36
+ return "10px";
37
+ case 'medium':
38
+ return "1rem";
39
+ default:
40
+ return "10px";
32
41
  }
33
- }, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, devices_1.devices.xl, function (props) { return props.iconWidth === "16px" ? "22px" : "25px"; }, function (props) {
42
+ }, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, function (props) {
34
43
  switch (props.position) {
35
44
  case 'bottomRight':
36
- return "\n bottom: calc(100% - 7px);\n right: ".concat(props.iconWidth === "16px" ? "22px" : "27px", ";\n transform: rotate(45deg);\n ");
45
+ return "\n right: ".concat(props.popupRight || '-22px', ";\n top: calc(100% + 10px);\n ");
37
46
  case 'bottomCenter':
38
- return "\n bottom: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
47
+ return "\n left: 50%;\n top: calc(100% + 10px);\n transform: translateX(-50%);\n ";
39
48
  case 'bottomLeft':
40
- return "\n bottom: calc(100% - 7px);\n left: ".concat(props.iconWidth === "16px" ? "22px" : "27px", ";\n transform: rotate(45deg);\n ");
49
+ return "\n left: ".concat(props.popupLeft || '-22px', ";\n top: calc(100% + 10px);\n ");
41
50
  case 'topRight':
42
- return "\n top: calc(100% - 7px);\n right: ".concat(props.iconWidth === "16px" ? "22px" : "27px", ";\n transform: rotate(45deg);\n ");
51
+ return "\n right: ".concat(props.popupRight || '-22px', ";\n bottom: calc(100% + 10px);\n ");
43
52
  case 'topCenter':
44
- return "\n top: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
53
+ return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
45
54
  case 'topLeft':
46
- return "\n top: calc(100% - 7px);\n left: ".concat(props.iconWidth === "16px" ? "22px" : "27px", ";\n transform: rotate(45deg);\n ");
55
+ return "\n left: ".concat(props.popupLeft || '-22px', ";\n bottom: calc(100% + 10px);\n ");
47
56
  default:
48
- return "\n top: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
57
+ return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
49
58
  }
50
- });
59
+ }, devices_1.devices.xl, function (props) { return props.popupRight || "-1.5rem"; });
51
60
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.positions = void 0;
3
+ exports.sizes = exports.positions = void 0;
4
4
  exports.positions = ['bottomRight', 'bottomCenter', 'bottomLeft', 'topRight', 'topCenter', 'topLeft'];
5
+ exports.sizes = ['small', 'medium'];
@@ -24,6 +24,7 @@ exports.default = {
24
24
  tags: ['autodocs'],
25
25
  argTypes: {
26
26
  position: { control: 'select', options: props_1.positions },
27
+ popupSize: { control: 'select', options: props_1.sizes },
27
28
  }
28
29
  };
29
30
  exports.Default = {
@@ -35,5 +36,10 @@ exports.Default = {
35
36
  hasCloseOnOutsideClick: false,
36
37
  iconWidth: "16px",
37
38
  iconHeight: "16px",
39
+ popupSize: "small",
40
+ popupLeft: "",
41
+ popupRight: "",
42
+ popupTop: "",
43
+ popupBottom: "",
38
44
  },
39
45
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "1.71.5",
3
+ "version": "1.71.7",
4
4
  "files": [
5
5
  "dist"
6
6
  ],