hemfixarna-web-components 1.3.9 → 1.4.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/cjs/hemfixarna-address_24.cjs.entry.js +6 -6
- package/dist/collection/components/hemfixarna-component/hemfixarna-component.js +1 -1
- package/dist/collection/components/hemfixarna-component/hemfixarna-component.js.map +1 -1
- package/dist/collection/components/hemfixarna-component/hemfixarna.css +9 -0
- package/dist/collection/components/hemfixarna-demo/hemfixarna-demo.js +1 -1
- package/dist/collection/components/hemfixarna-demo/hemfixarna-demo.js.map +1 -1
- package/dist/esm/hemfixarna-address_24.entry.js +6 -6
- package/dist/hemfixarna-components/hemfixarna-components.esm.js +1 -1
- package/dist/hemfixarna-components/p-891367c9.entry.js +2 -0
- package/package.json +1 -1
- package/dist/hemfixarna-components/p-2a1146f9.entry.js +0 -2
- /package/dist/hemfixarna-components/{p-2a1146f9.entry.js.map → p-891367c9.entry.js.map} +0 -0
|
@@ -816,7 +816,7 @@ const HemfixarnaCheckout = class {
|
|
|
816
816
|
get el() { return index.getElement(this); }
|
|
817
817
|
};
|
|
818
818
|
|
|
819
|
-
const hemfixarnaCss = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap\");\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n* {\n box-sizing: border-box;\n}\n\n:host {\n font-family: \"Inter\", sans-serif;\n}\n:host .mb-2 {\n margin-bottom: 32px;\n}\n:host button {\n color: #474444;\n}\n:host form {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n:host form img {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n}\n:host form img:first-of-type {\n left: 16px;\n}\n:host form img:last-of-type {\n right: 16px;\n}\n:host form span {\n margin-top: -8px;\n color: #ec6632;\n}\n:host form p {\n text-align: center;\n}\n:host form p {\n margin: 0;\n}\n:host form div {\n position: relative;\n}\n:host form div label {\n pointer-events: none;\n position: absolute;\n left: 16px;\n top: 50%;\n transform: translateY(-50%);\n background: #fff;\n padding: 4px;\n transition: 0.2s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n}\n:host form div input {\n padding: 16px;\n width: 100%;\n font-size: 16px;\n border: 1px solid #fcd9c9;\n}\n:host form div input:focus ~ label,\n:host form div .input_active ~ label {\n top: 0;\n transform: translateY(-50%);\n background: linear-gradient(180deg, #fffaf2 50%, #fff 50%);\n}\n:host h1 {\n font-size: 24px;\n font-weight: 400;\n line-height: 32px;\n letter-spacing: -3%;\n text-align: left;\n margin: 0 0 8px;\n}\n:host h2 {\n margin: 0 0 24px;\n font-weight: 700;\n font-size: 20px;\n line-height: 28px;\n letter-spacing: -3%;\n}\n:host p {\n font-size: 16px;\n font-weight: 400;\n line-height: 24px;\n letter-spacing: -3%;\n}\n:host .hemfixarna {\n width: 100%;\n /* Hide default HTML checkbox */\n /* The slider */\n}\n:host .hemfixarna_painting {\n opacity: 0;\n padding: 0 1rem;\n animation: fadeIn 0.5s forwards 0.3s;\n}\n:host .hemfixarna_painting > h2,\n:host .hemfixarna_painting p {\n text-align: center;\n padding: 0 16px;\n}\n:host .hemfixarna_painting > h2 {\n margin: 0 0 8px;\n}\n:host .hemfixarna_nav {\n position: absolute;\n top: 0;\n width: 100dvw;\n left: 0;\n height: 80px;\n z-index: 9999;\n}\n:host .hemfixarna_nav--links {\n display: none !important;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_nav--links {\n display: flex !important;\n }\n}\n:host .hemfixarna_nav--links a {\n color: #ec6632;\n text-decoration: none;\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 56px;\n padding: 8px 32px;\n text-transform: capitalize;\n}\n:host .hemfixarna_nav > div {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 16px;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_nav > div {\n padding: 0 32px;\n }\n}\n:host .hemfixarna_nav > div > div {\n display: flex;\n gap: 32px;\n justify-content: space-between;\n}\n:host .hemfixarna_nav > div > img {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: -1;\n}\n:host .hemfixarna_nav p {\n color: #fff;\n}\n:host .hemfixarna_standalone .hemfixarna_backdrop {\n background: #fffaf2;\n opacity: 1;\n}\n:host .hemfixarna_standalone .hemfixarna_modal {\n top: 80px;\n transform: translateX(-50%);\n border: none;\n height: calc(100dvh - 80px);\n opacity: 0;\n}\n:host .hemfixarna_standalone .hemfixarna_modal--open {\n opacity: 1;\n}\n:host .hemfixarna .switch {\n position: relative;\n display: inline-block;\n width: 40px;\n height: 20px;\n}\n:host .hemfixarna .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n:host .hemfixarna .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border-radius: 34px;\n}\n:host .hemfixarna .slider:before {\n position: absolute;\n content: \"\";\n height: 18px;\n width: 18px;\n left: 2px;\n bottom: 1px;\n background-color: white;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border-radius: 50%;\n}\n:host .hemfixarna input:checked + .slider {\n background-color: #fcd9c9;\n}\n:host .hemfixarna input:focus + .slider {\n box-shadow: 0 0 1px #fcd9c9;\n}\n:host .hemfixarna input:checked + .slider:before {\n -webkit-transform: translateX(18px);\n -ms-transform: translateX(18px);\n transform: translateX(18px);\n background: #ec6632;\n}\n:host .hemfixarna_maleribox {\n background: #fff;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n width: 100%;\n min-height: 132px;\n padding: 24px;\n display: flex;\n align-items: center;\n gap: 24px;\n text-align: left;\n}\n:host .hemfixarna_maleribox:hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_checkbox {\n display: grid;\n grid-template-columns: 40px auto;\n font-size: 16px;\n font-weight: 400;\n line-height: 24px;\n letter-spacing: -3%;\n}\n:host .hemfixarna_checkbox > span {\n transform: translateY(6px);\n}\n:host .hemfixarna_checkbox span,\n:host .hemfixarna_checkbox span p {\n color: #474444;\n font-size: 14px;\n}\n:host .hemfixarna_checkbox p {\n text-align: left;\n}\n:host .hemfixarna_info {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 32px;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n border-radius: 4px;\n border: 1px solid #fcd9c9;\n}\n:host .hemfixarna_info h2 {\n margin: 0;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_info {\n position: sticky;\n top: 0;\n }\n}\n:host .hemfixarna_infomodal {\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n max-width: 80%;\n background: #fffaf2;\n border: 1px solid #fcd9c9;\n padding: 32px;\n z-index: 99;\n border-radius: 4px;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n:host .hemfixarna_infomodal p,\n:host .hemfixarna_infomodal h4 {\n margin: 0;\n}\n:host .hemfixarna_infomodal button {\n background: #ec6632;\n color: #fff;\n border-radius: 60px;\n font-size: 16px;\n padding: 8px 16px;\n}\n:host .hemfixarna_addressinfo {\n padding: 16px 16px 64px;\n border: 1px solid #fcd9c9;\n position: relative;\n margin-bottom: 32px;\n display: grid;\n grid-template-columns: 1fr;\n gap: 8px;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_addressinfo {\n grid-template-columns: 1fr 1fr;\n }\n}\n:host .hemfixarna_addressinfo button {\n position: absolute;\n bottom: 16px;\n right: 16px;\n font-weight: 500;\n text-underline-offset: 2px;\n text-decoration: underline;\n}\n:host .hemfixarna_part {\n background: #fff;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n display: grid;\n padding: 16px;\n grid-template-columns: auto 75px;\n}\n:host .hemfixarna_counter {\n display: flex;\n align-items: center;\n}\n:host .hemfixarna_counter span {\n padding: 0 8px;\n}\n:host .hemfixarna_counter img {\n cursor: pointer;\n}\n:host .hemfixarna_counter img:not(.disabled):hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_description {\n display: grid;\n gap: 16px;\n}\n:host .hemfixarna_description ul {\n list-style: disc;\n padding-right: 12px;\n transform: translateX(12px);\n}\n:host .hemfixarna_description--hidden {\n max-height: 140px;\n overflow: hidden;\n position: relative;\n cursor: pointer;\n}\n:host .hemfixarna_description--hidden::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 128px;\n background: linear-gradient(180deg, rgba(255, 253, 250, 0), rgba(255, 253, 250, 0.46) 50%, #fffaf2);\n}\n:host .hemfixarna_terms {\n font-size: 14px;\n}\n:host .hemfixarna_terms a {\n color: inherit;\n}\n:host .hemfixarna_logo {\n height: 64px;\n}\n:host .hemfixarna_box {\n padding: 16px;\n display: flex;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n border-radius: 4px;\n gap: 16px 8px;\n border-radius: 4px;\n gap: 16px 8px;\n}\n:host .hemfixarna_box p,\n:host .hemfixarna_box span {\n font-size: 15px;\n}\n:host .hemfixarna_box .underline {\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n:host .hemfixarna_box .pointer {\n cursor: pointer;\n}\n:host .hemfixarna_box .p-s {\n font-size: 12px;\n}\n:host .hemfixarna_box > div {\n display: grid;\n gap: 8px;\n}\n:host .hemfixarna_box--standard {\n background: #fffaf2;\n border: 1px solid #fcd9c9;\n}\n:host .hemfixarna_box--alternative, :host .hemfixarna_box--alternative_2, :host .hemfixarna_box--alternative_3 {\n background: transparent;\n border: 1px solid #e3e3e3;\n}\n:host .hemfixarna_box--alternative_2, :host .hemfixarna_box--alternative_3 {\n box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.0784313725);\n}\n:host .hemfixarna_box--alternative_3 {\n justify-content: center;\n}\n:host .hemfixarna_altbtn {\n display: flex !important;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n margin-left: auto;\n}\n:host .hemfixarna_btn {\n margin-left: auto;\n}\n:host .hemfixarna_btn, :host .hemfixarna_buy,\n:host .hemfixarna input[type=submit] {\n border: none;\n border-radius: 60px;\n font-weight: 600;\n letter-spacing: 0.5px;\n line-height: 20px;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_btn:not(.disabled):hover, :host .hemfixarna_buy:not(.disabled):hover,\n:host .hemfixarna input[type=submit]:not(.disabled):hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna div:has(> input[type=submit]) {\n position: relative;\n}\n:host .hemfixarna div:has(> input[type=submit]) input {\n cursor: pointer;\n}\n:host .hemfixarna div:has(> input[type=submit]) img {\n display: none;\n}\n:host .hemfixarna .loading {\n cursor: default;\n opacity: 0.6;\n}\n:host .hemfixarna .loading > img {\n display: initial !important;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n:host .hemfixarna_btn {\n font-size: 14px;\n background: #c84e18;\n color: #fff;\n padding: 16px 24px;\n white-space: nowrap;\n position: relative;\n}\n:host .hemfixarna_btn span {\n position: absolute;\n background: #fff;\n border-radius: 100%;\n width: 24px;\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n font-size: 13px;\n line-height: 11px;\n top: -8px;\n right: -12px;\n}\n:host .hemfixarna_btn span {\n background: #25a710;\n color: #fff;\n right: 0 !important;\n}\n:host .hemfixarna_buy,\n:host .hemfixarna input[type=submit] {\n font-size: 21px;\n background: #25a710;\n color: #fff;\n padding: 16px 24px;\n}\n:host .hemfixarna .disabled {\n opacity: 0.5;\n cursor: default;\n}\n:host .hemfixarna_modal {\n position: fixed;\n background: #fffaf2;\n border: 1px solid #fcd9c9;\n border-radius: 4px;\n top: 50%;\n left: 50%;\n z-index: 1000;\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n transform: translate(-50%, -50%) scale(0.7);\n opacity: 0;\n height: 92%;\n width: 92%;\n max-width: 920px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n:host .hemfixarna_modal--open {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n}\n:host .hemfixarna_backdrop {\n z-index: 999;\n position: fixed;\n background: #474444;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n opacity: 0;\n transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);\n}\n:host .hemfixarna_backdrop--open {\n opacity: 0.3;\n}\n:host .hemfixarna_order {\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n background-repeat: no-repeat !important;\n background-size: cover !important;\n background-position: center !important;\n display: grid;\n grid-template-columns: 1fr 1fr;\n padding: 48px 32px 64px;\n}\n@media (max-width: 768px) {\n :host .hemfixarna_order {\n grid-template-columns: 1fr;\n grid-template-rows: 0 auto;\n }\n}\n:host .hemfixarna_order > div:last-of-type {\n background: #fffaf2;\n padding: 32px;\n display: flex;\n flex-direction: column;\n max-height: 100%;\n overflow: auto;\n}\n:host .hemfixarna_order img {\n cursor: pointer;\n}\n:host .hemfixarna_order button {\n margin: 16px 0;\n padding: 0;\n text-decoration: underline;\n text-underline-offset: 2px;\n font-size: 14px;\n font-weight: 600;\n}\n:host .hemfixarna_cart {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n}\n@media (max-width: 768px) {\n :host .hemfixarna_cart {\n grid-template-columns: 1fr;\n gap: 0;\n }\n}\n:host .hemfixarna_cart--right h2, :host .hemfixarna_cart--left h2 {\n display: flex;\n align-items: center;\n}\n:host .hemfixarna_cart--right h2 img, :host .hemfixarna_cart--left h2 img {\n margin-top: 3.2px;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_cart--left h2 button {\n display: none;\n }\n}\n@media (max-width: 768px) {\n :host .hemfixarna_cart--right h2 button {\n display: none;\n }\n}\n:host .hemfixarna_cart--startfee {\n display: flex;\n justify-content: space-between;\n}\n:host .hemfixarna_cart--rutrot {\n display: flex;\n justify-content: space-between;\n}\n:host .hemfixarna_cart--rutrot div {\n display: flex;\n gap: 16px;\n align-items: center;\n}\n:host .hemfixarna_cart--additional {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 16px;\n border-top: 1px solid #fcd9c9;\n}\n:host .hemfixarna_cart--additional p {\n font-size: 14px;\n}\n:host .hemfixarna_cart--additional strong {\n text-decoration: underline;\n text-underline-offset: 2px;\n cursor: pointer;\n position: relative;\n}\n:host .hemfixarna_cart--additional strong img {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: -24px;\n}\n:host .hemfixarna_cart--price {\n border-top: 1px solid #fcd9c9;\n padding: 16px;\n display: flex;\n justify-content: space-between;\n}\n:host .hemfixarna_cart--price h3 {\n margin: 0;\n}\n:host .hemfixarna_cart--item {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 0;\n border-top: 1px solid #fcd9c9;\n}\n:host .hemfixarna_cart--item > div {\n display: flex;\n justify-content: space-between;\n}\n:host .hemfixarna_cart--item > div > div {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n:host .hemfixarna_cart--item > div button {\n color: #ec6632;\n}\n:host .hemfixarna_categories {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n:host .hemfixarna_categories--wrapper {\n gap: 32px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n}\n@media (max-width: 768px) {\n :host .hemfixarna_categories--wrapper {\n grid-template-columns: 1fr;\n }\n}\n:host .hemfixarna_categories li {\n position: relative;\n background: #fff;\n border-radius: 4px;\n min-height: 132px;\n padding: 24px;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n display: flex;\n align-items: center;\n gap: 24px;\n cursor: pointer;\n}\n:host .hemfixarna_categories li:hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_categories li > button {\n height: 100%;\n width: 100%;\n}\n:host .hemfixarna_categories li .price {\n font-weight: 700;\n}\n:host .hemfixarna_content {\n height: 100%;\n overflow: auto;\n padding: 0 32px 64px;\n}\n:host .hemfixarna_content--5 {\n padding-top: 16px;\n}\n:host .hemfixarna_content--painting {\n padding: 0;\n overflow: initial;\n}\n:host .hemfixarna_crumbs {\n position: relative;\n padding: 16px 24px;\n border-bottom: 1px solid #fcd9c9;\n display: flex;\n justify-content: space-between;\n}\n:host .hemfixarna_crumbs--back {\n padding: 16px 24px 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n box-shadow: none !important;\n}\n:host .hemfixarna_crumbs--back:hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_crumbs img {\n cursor: pointer;\n}\n:host .hemfixarna_crumbs .close {\n position: absolute;\n right: -16px;\n top: -16px;\n z-index: 9;\n}\n:host .hemfixarna_crumbs .cart {\n padding-left: 16px;\n position: relative;\n}\n:host .hemfixarna_crumbs .cart img {\n cursor: inherit;\n}\n:host .hemfixarna_crumbs .cart span {\n position: absolute;\n background: #fff;\n border-radius: 100%;\n width: 24px;\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n font-size: 13px;\n line-height: 11px;\n top: -8px;\n right: -12px;\n}\n:host .hemfixarna_crumbs .cart_active {\n cursor: pointer;\n}\n:host .hemfixarna_crumbs .cart_active span {\n background: #25a710;\n color: #fff;\n}\n:host .hemfixarna_crumbs--links {\n display: flex;\n align-items: center;\n gap: 16px;\n overflow: auto;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_crumbs--links {\n -ms-overflow-style: none;\n }\n :host .hemfixarna_crumbs--links::-webkit-scrollbar {\n display: none;\n }\n :host .hemfixarna_crumbs--links::-webkit-scrollbar-button {\n display: none;\n }\n}\n:host .hemfixarna_crumbs button {\n white-space: nowrap;\n background: #f1ded6;\n border-radius: 64px;\n padding: 12px 16px;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.3px;\n box-shadow: none !important;\n}\n:host .hemfixarna_crumbs button:not(.active):hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_crumbs .active {\n background: #fffaf2;\n cursor: default;\n}\n:host .hemfixarna_features {\n gap: 12px !important;\n}\n:host .hemfixarna_features li {\n display: flex;\n gap: 16px;\n align-items: center;\n}\n:host .hemfixarna_address {\n margin-bottom: 16px;\n}\n:host .hemfixarna_product {\n display: grid;\n gap: 16px;\n}\n:host .hemfixarna_product--link {\n font-weight: 700;\n color: #474444;\n text-underline-offset: 4px;\n}\n:host .hemfixarna_product--left {\n gap: 32px;\n}\n:host .hemfixarna_product--right {\n gap: 32px;\n}\n:host .hemfixarna_product--price {\n margin-top: 4px;\n font-weight: 700;\n}\n:host .hemfixarna_product--total {\n text-align: center;\n margin: -16px 0;\n font-size: 21px;\n line-height: 28px;\n}\n:host .hemfixarna_product--item {\n background: #fff;\n padding: 16px;\n display: grid;\n grid-template-columns: auto 75px;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_product--grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n}\n@media (max-width: 768px) {\n :host .hemfixarna_product--grid {\n grid-template-columns: 1fr;\n }\n}\n:host .hemfixarna_product--grid > div {\n display: flex;\n flex-direction: column;\n}\n:host .hemfixarna_product--grid ul {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n:host .hemfixarna_product p {\n margin: 0;\n}\n:host .hemfixarna_product--top {\n display: flex;\n gap: 32px;\n}\n:host .hemfixarna_product--top > div {\n width: 100%;\n}\n:host .hemfixarna_product--top > div h1 {\n max-width: 80%;\n}\n@media (max-width: 768px) {\n :host .hemfixarna_product--top > div h1 {\n max-width: 100%;\n }\n}\n:host .hemfixarna_product--top h4 {\n margin-bottom: 8px;\n}\n:host h5,\n:host p {\n margin: 0;\n}\n:host input[type=submit] {\n cursor: pointer;\n}\n:host input[type=date] ~ label {\n left: 56px;\n}\n:host input[type=date] {\n border: 1px solid #fcd9c9;\n padding-left: 64px;\n}\n:host input[type=checkbox] {\n height: 18px;\n width: 18px;\n border: 1px solid #fcd9c9;\n}\n:host input[type=checkbox]:checked {\n background: red;\n}\n:host input[type=date]::-webkit-calendar-picker-indicator {\n background: transparent;\n bottom: 0;\n color: transparent;\n cursor: pointer;\n height: auto;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n width: auto;\n}\n:host button,\n:host a {\n cursor: pointer;\n background: none;\n border: none;\n}\n:host ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}";
|
|
819
|
+
const hemfixarnaCss = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap\");\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n* {\n box-sizing: border-box;\n}\n\n:host {\n font-family: \"Inter\", sans-serif;\n}\n:host .mb-2 {\n margin-bottom: 32px;\n}\n:host button {\n color: #474444;\n}\n:host form {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n:host form img {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n}\n:host form img:first-of-type {\n left: 16px;\n}\n:host form img:last-of-type {\n right: 16px;\n}\n:host form span {\n margin-top: -8px;\n color: #ec6632;\n}\n:host form p {\n text-align: center;\n}\n:host form p {\n margin: 0;\n}\n:host form div {\n position: relative;\n}\n:host form div label {\n pointer-events: none;\n position: absolute;\n left: 16px;\n top: 50%;\n transform: translateY(-50%);\n background: #fff;\n padding: 4px;\n transition: 0.2s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n}\n:host form div input {\n padding: 16px;\n width: 100%;\n font-size: 16px;\n border: 1px solid #fcd9c9;\n}\n:host form div input:focus ~ label,\n:host form div .input_active ~ label {\n top: 0;\n transform: translateY(-50%);\n background: linear-gradient(180deg, #fffaf2 50%, #fff 50%);\n}\n:host h1 {\n font-size: 24px;\n font-weight: 400;\n line-height: 32px;\n letter-spacing: -3%;\n text-align: left;\n margin: 0 0 8px;\n}\n:host h2 {\n margin: 0 0 24px;\n font-weight: 700;\n font-size: 20px;\n line-height: 28px;\n letter-spacing: -3%;\n}\n:host p {\n font-size: 16px;\n font-weight: 400;\n line-height: 24px;\n letter-spacing: -3%;\n}\n:host .hemfixarna {\n width: 100%;\n /* Hide default HTML checkbox */\n /* The slider */\n}\n:host .hemfixarna_painting {\n opacity: 0;\n padding: 0 1rem;\n animation: fadeIn 0.5s forwards 0.3s;\n}\n:host .hemfixarna_painting > h2,\n:host .hemfixarna_painting p {\n text-align: center;\n padding: 0 16px;\n}\n:host .hemfixarna_painting > h2 {\n margin: 0 0 8px;\n}\n:host .hemfixarna_partnerlogo {\n max-height: 50px;\n}\n:host .hemfixarna_nav {\n position: absolute;\n top: 0;\n width: 100dvw;\n left: 0;\n height: 80px;\n z-index: 9999;\n}\n:host .hemfixarna_nav--links {\n display: none !important;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_nav--links {\n display: flex !important;\n }\n}\n:host .hemfixarna_nav--links a {\n color: #ec6632;\n text-decoration: none;\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 56px;\n padding: 8px 32px;\n text-transform: capitalize;\n}\n:host .hemfixarna_nav > div {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 16px;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_nav > div {\n padding: 0 32px;\n }\n}\n:host .hemfixarna_nav > div > div {\n display: flex;\n gap: 32px;\n justify-content: space-between;\n}\n:host .hemfixarna_nav > div > img {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: -1;\n}\n:host .hemfixarna_nav a {\n text-decoration: none;\n}\n:host .hemfixarna_nav p {\n color: #474444;\n}\n:host .hemfixarna_nav p.with-bg {\n color: #fff;\n}\n:host .hemfixarna_standalone .hemfixarna_backdrop {\n background: #fffaf2;\n opacity: 1;\n}\n:host .hemfixarna_standalone .hemfixarna_modal {\n top: 80px;\n transform: translateX(-50%);\n border: none;\n height: calc(100dvh - 80px);\n opacity: 0;\n}\n:host .hemfixarna_standalone .hemfixarna_modal--open {\n opacity: 1;\n}\n:host .hemfixarna .switch {\n position: relative;\n display: inline-block;\n width: 40px;\n height: 20px;\n}\n:host .hemfixarna .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n:host .hemfixarna .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border-radius: 34px;\n}\n:host .hemfixarna .slider:before {\n position: absolute;\n content: \"\";\n height: 18px;\n width: 18px;\n left: 2px;\n bottom: 1px;\n background-color: white;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n border-radius: 50%;\n}\n:host .hemfixarna input:checked + .slider {\n background-color: #fcd9c9;\n}\n:host .hemfixarna input:focus + .slider {\n box-shadow: 0 0 1px #fcd9c9;\n}\n:host .hemfixarna input:checked + .slider:before {\n -webkit-transform: translateX(18px);\n -ms-transform: translateX(18px);\n transform: translateX(18px);\n background: #ec6632;\n}\n:host .hemfixarna_maleribox {\n background: #fff;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n width: 100%;\n min-height: 132px;\n padding: 24px;\n display: flex;\n align-items: center;\n gap: 24px;\n text-align: left;\n}\n:host .hemfixarna_maleribox:hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_checkbox {\n display: grid;\n grid-template-columns: 40px auto;\n font-size: 16px;\n font-weight: 400;\n line-height: 24px;\n letter-spacing: -3%;\n}\n:host .hemfixarna_checkbox > span {\n transform: translateY(6px);\n}\n:host .hemfixarna_checkbox span,\n:host .hemfixarna_checkbox span p {\n color: #474444;\n font-size: 14px;\n}\n:host .hemfixarna_checkbox p {\n text-align: left;\n}\n:host .hemfixarna_info {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 32px;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n border-radius: 4px;\n border: 1px solid #fcd9c9;\n}\n:host .hemfixarna_info h2 {\n margin: 0;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_info {\n position: sticky;\n top: 0;\n }\n}\n:host .hemfixarna_infomodal {\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n max-width: 80%;\n background: #fffaf2;\n border: 1px solid #fcd9c9;\n padding: 32px;\n z-index: 99;\n border-radius: 4px;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n:host .hemfixarna_infomodal p,\n:host .hemfixarna_infomodal h4 {\n margin: 0;\n}\n:host .hemfixarna_infomodal button {\n background: #ec6632;\n color: #fff;\n border-radius: 60px;\n font-size: 16px;\n padding: 8px 16px;\n}\n:host .hemfixarna_addressinfo {\n padding: 16px 16px 64px;\n border: 1px solid #fcd9c9;\n position: relative;\n margin-bottom: 32px;\n display: grid;\n grid-template-columns: 1fr;\n gap: 8px;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_addressinfo {\n grid-template-columns: 1fr 1fr;\n }\n}\n:host .hemfixarna_addressinfo button {\n position: absolute;\n bottom: 16px;\n right: 16px;\n font-weight: 500;\n text-underline-offset: 2px;\n text-decoration: underline;\n}\n:host .hemfixarna_part {\n background: #fff;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n display: grid;\n padding: 16px;\n grid-template-columns: auto 75px;\n}\n:host .hemfixarna_counter {\n display: flex;\n align-items: center;\n}\n:host .hemfixarna_counter span {\n padding: 0 8px;\n}\n:host .hemfixarna_counter img {\n cursor: pointer;\n}\n:host .hemfixarna_counter img:not(.disabled):hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_description {\n display: grid;\n gap: 16px;\n}\n:host .hemfixarna_description ul {\n list-style: disc;\n padding-right: 12px;\n transform: translateX(12px);\n}\n:host .hemfixarna_description--hidden {\n max-height: 140px;\n overflow: hidden;\n position: relative;\n cursor: pointer;\n}\n:host .hemfixarna_description--hidden::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 128px;\n background: linear-gradient(180deg, rgba(255, 253, 250, 0), rgba(255, 253, 250, 0.46) 50%, #fffaf2);\n}\n:host .hemfixarna_terms {\n font-size: 14px;\n}\n:host .hemfixarna_terms a {\n color: inherit;\n}\n:host .hemfixarna_logo {\n height: 64px;\n}\n:host .hemfixarna_box {\n padding: 16px;\n display: flex;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n border-radius: 4px;\n gap: 16px 8px;\n border-radius: 4px;\n gap: 16px 8px;\n}\n:host .hemfixarna_box p,\n:host .hemfixarna_box span {\n font-size: 15px;\n}\n:host .hemfixarna_box .underline {\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n:host .hemfixarna_box .pointer {\n cursor: pointer;\n}\n:host .hemfixarna_box .p-s {\n font-size: 12px;\n}\n:host .hemfixarna_box > div {\n display: grid;\n gap: 8px;\n}\n:host .hemfixarna_box--standard {\n background: #fffaf2;\n border: 1px solid #fcd9c9;\n}\n:host .hemfixarna_box--alternative, :host .hemfixarna_box--alternative_2, :host .hemfixarna_box--alternative_3 {\n background: transparent;\n border: 1px solid #e3e3e3;\n}\n:host .hemfixarna_box--alternative_2, :host .hemfixarna_box--alternative_3 {\n box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.0784313725);\n}\n:host .hemfixarna_box--alternative_3 {\n justify-content: center;\n}\n:host .hemfixarna_altbtn {\n display: flex !important;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n margin-left: auto;\n}\n:host .hemfixarna_btn {\n margin-left: auto;\n}\n:host .hemfixarna_btn, :host .hemfixarna_buy,\n:host .hemfixarna input[type=submit] {\n border: none;\n border-radius: 60px;\n font-weight: 600;\n letter-spacing: 0.5px;\n line-height: 20px;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_btn:not(.disabled):hover, :host .hemfixarna_buy:not(.disabled):hover,\n:host .hemfixarna input[type=submit]:not(.disabled):hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna div:has(> input[type=submit]) {\n position: relative;\n}\n:host .hemfixarna div:has(> input[type=submit]) input {\n cursor: pointer;\n}\n:host .hemfixarna div:has(> input[type=submit]) img {\n display: none;\n}\n:host .hemfixarna .loading {\n cursor: default;\n opacity: 0.6;\n}\n:host .hemfixarna .loading > img {\n display: initial !important;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n:host .hemfixarna_btn {\n font-size: 14px;\n background: #c84e18;\n color: #fff;\n padding: 16px 24px;\n white-space: nowrap;\n position: relative;\n}\n:host .hemfixarna_btn span {\n position: absolute;\n background: #fff;\n border-radius: 100%;\n width: 24px;\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n font-size: 13px;\n line-height: 11px;\n top: -8px;\n right: -12px;\n}\n:host .hemfixarna_btn span {\n background: #25a710;\n color: #fff;\n right: 0 !important;\n}\n:host .hemfixarna_buy,\n:host .hemfixarna input[type=submit] {\n font-size: 21px;\n background: #25a710;\n color: #fff;\n padding: 16px 24px;\n}\n:host .hemfixarna .disabled {\n opacity: 0.5;\n cursor: default;\n}\n:host .hemfixarna_modal {\n position: fixed;\n background: #fffaf2;\n border: 1px solid #fcd9c9;\n border-radius: 4px;\n top: 50%;\n left: 50%;\n z-index: 1000;\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n transform: translate(-50%, -50%) scale(0.7);\n opacity: 0;\n height: 92%;\n width: 92%;\n max-width: 920px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n:host .hemfixarna_modal--open {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n}\n:host .hemfixarna_backdrop {\n z-index: 999;\n position: fixed;\n background: #474444;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n opacity: 0;\n transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);\n}\n:host .hemfixarna_backdrop--open {\n opacity: 0.3;\n}\n:host .hemfixarna_order {\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n background-repeat: no-repeat !important;\n background-size: cover !important;\n background-position: center !important;\n display: grid;\n grid-template-columns: 1fr 1fr;\n padding: 48px 32px 64px;\n}\n@media (max-width: 768px) {\n :host .hemfixarna_order {\n grid-template-columns: 1fr;\n grid-template-rows: 0 auto;\n }\n}\n:host .hemfixarna_order > div:last-of-type {\n background: #fffaf2;\n padding: 32px;\n display: flex;\n flex-direction: column;\n max-height: 100%;\n overflow: auto;\n}\n:host .hemfixarna_order img {\n cursor: pointer;\n}\n:host .hemfixarna_order button {\n margin: 16px 0;\n padding: 0;\n text-decoration: underline;\n text-underline-offset: 2px;\n font-size: 14px;\n font-weight: 600;\n}\n:host .hemfixarna_cart {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n}\n@media (max-width: 768px) {\n :host .hemfixarna_cart {\n grid-template-columns: 1fr;\n gap: 0;\n }\n}\n:host .hemfixarna_cart--right h2, :host .hemfixarna_cart--left h2 {\n display: flex;\n align-items: center;\n}\n:host .hemfixarna_cart--right h2 img, :host .hemfixarna_cart--left h2 img {\n margin-top: 3.2px;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_cart--left h2 button {\n display: none;\n }\n}\n@media (max-width: 768px) {\n :host .hemfixarna_cart--right h2 button {\n display: none;\n }\n}\n:host .hemfixarna_cart--startfee {\n display: flex;\n justify-content: space-between;\n}\n:host .hemfixarna_cart--rutrot {\n display: flex;\n justify-content: space-between;\n}\n:host .hemfixarna_cart--rutrot div {\n display: flex;\n gap: 16px;\n align-items: center;\n}\n:host .hemfixarna_cart--additional {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 16px;\n border-top: 1px solid #fcd9c9;\n}\n:host .hemfixarna_cart--additional p {\n font-size: 14px;\n}\n:host .hemfixarna_cart--additional strong {\n text-decoration: underline;\n text-underline-offset: 2px;\n cursor: pointer;\n position: relative;\n}\n:host .hemfixarna_cart--additional strong img {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: -24px;\n}\n:host .hemfixarna_cart--price {\n border-top: 1px solid #fcd9c9;\n padding: 16px;\n display: flex;\n justify-content: space-between;\n}\n:host .hemfixarna_cart--price h3 {\n margin: 0;\n}\n:host .hemfixarna_cart--item {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 0;\n border-top: 1px solid #fcd9c9;\n}\n:host .hemfixarna_cart--item > div {\n display: flex;\n justify-content: space-between;\n}\n:host .hemfixarna_cart--item > div > div {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n:host .hemfixarna_cart--item > div button {\n color: #ec6632;\n}\n:host .hemfixarna_categories {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n:host .hemfixarna_categories--wrapper {\n gap: 32px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n}\n@media (max-width: 768px) {\n :host .hemfixarna_categories--wrapper {\n grid-template-columns: 1fr;\n }\n}\n:host .hemfixarna_categories li {\n position: relative;\n background: #fff;\n border-radius: 4px;\n min-height: 132px;\n padding: 24px;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n display: flex;\n align-items: center;\n gap: 24px;\n cursor: pointer;\n}\n:host .hemfixarna_categories li:hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_categories li > button {\n height: 100%;\n width: 100%;\n}\n:host .hemfixarna_categories li .price {\n font-weight: 700;\n}\n:host .hemfixarna_content {\n height: 100%;\n overflow: auto;\n padding: 0 32px 64px;\n}\n:host .hemfixarna_content--5 {\n padding-top: 16px;\n}\n:host .hemfixarna_content--painting {\n padding: 0;\n overflow: initial;\n}\n:host .hemfixarna_crumbs {\n position: relative;\n padding: 16px 24px;\n border-bottom: 1px solid #fcd9c9;\n display: flex;\n justify-content: space-between;\n}\n:host .hemfixarna_crumbs--back {\n padding: 16px 24px 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n box-shadow: none !important;\n}\n:host .hemfixarna_crumbs--back:hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_crumbs img {\n cursor: pointer;\n}\n:host .hemfixarna_crumbs .close {\n position: absolute;\n right: -16px;\n top: -16px;\n z-index: 9;\n}\n:host .hemfixarna_crumbs .cart {\n padding-left: 16px;\n position: relative;\n}\n:host .hemfixarna_crumbs .cart img {\n cursor: inherit;\n}\n:host .hemfixarna_crumbs .cart span {\n position: absolute;\n background: #fff;\n border-radius: 100%;\n width: 24px;\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n font-size: 13px;\n line-height: 11px;\n top: -8px;\n right: -12px;\n}\n:host .hemfixarna_crumbs .cart_active {\n cursor: pointer;\n}\n:host .hemfixarna_crumbs .cart_active span {\n background: #25a710;\n color: #fff;\n}\n:host .hemfixarna_crumbs--links {\n display: flex;\n align-items: center;\n gap: 16px;\n overflow: auto;\n}\n@media (min-width: 769px) {\n :host .hemfixarna_crumbs--links {\n -ms-overflow-style: none;\n }\n :host .hemfixarna_crumbs--links::-webkit-scrollbar {\n display: none;\n }\n :host .hemfixarna_crumbs--links::-webkit-scrollbar-button {\n display: none;\n }\n}\n:host .hemfixarna_crumbs button {\n white-space: nowrap;\n background: #f1ded6;\n border-radius: 64px;\n padding: 12px 16px;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.3px;\n box-shadow: none !important;\n}\n:host .hemfixarna_crumbs button:not(.active):hover {\n transition: 0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);\n filter: brightness(1.02);\n transform: scale(1.01);\n box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_crumbs .active {\n background: #fffaf2;\n cursor: default;\n}\n:host .hemfixarna_features {\n gap: 12px !important;\n}\n:host .hemfixarna_features li {\n display: flex;\n gap: 16px;\n align-items: center;\n}\n:host .hemfixarna_address {\n margin-bottom: 16px;\n}\n:host .hemfixarna_product {\n display: grid;\n gap: 16px;\n}\n:host .hemfixarna_product--link {\n font-weight: 700;\n color: #474444;\n text-underline-offset: 4px;\n}\n:host .hemfixarna_product--left {\n gap: 32px;\n}\n:host .hemfixarna_product--right {\n gap: 32px;\n}\n:host .hemfixarna_product--price {\n margin-top: 4px;\n font-weight: 700;\n}\n:host .hemfixarna_product--total {\n text-align: center;\n margin: -16px 0;\n font-size: 21px;\n line-height: 28px;\n}\n:host .hemfixarna_product--item {\n background: #fff;\n padding: 16px;\n display: grid;\n grid-template-columns: auto 75px;\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);\n}\n:host .hemfixarna_product--grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n}\n@media (max-width: 768px) {\n :host .hemfixarna_product--grid {\n grid-template-columns: 1fr;\n }\n}\n:host .hemfixarna_product--grid > div {\n display: flex;\n flex-direction: column;\n}\n:host .hemfixarna_product--grid ul {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n:host .hemfixarna_product p {\n margin: 0;\n}\n:host .hemfixarna_product--top {\n display: flex;\n gap: 32px;\n}\n:host .hemfixarna_product--top > div {\n width: 100%;\n}\n:host .hemfixarna_product--top > div h1 {\n max-width: 80%;\n}\n@media (max-width: 768px) {\n :host .hemfixarna_product--top > div h1 {\n max-width: 100%;\n }\n}\n:host .hemfixarna_product--top h4 {\n margin-bottom: 8px;\n}\n:host h5,\n:host p {\n margin: 0;\n}\n:host input[type=submit] {\n cursor: pointer;\n}\n:host input[type=date] ~ label {\n left: 56px;\n}\n:host input[type=date] {\n border: 1px solid #fcd9c9;\n padding-left: 64px;\n}\n:host input[type=checkbox] {\n height: 18px;\n width: 18px;\n border: 1px solid #fcd9c9;\n}\n:host input[type=checkbox]:checked {\n background: red;\n}\n:host input[type=date]::-webkit-calendar-picker-indicator {\n background: transparent;\n bottom: 0;\n color: transparent;\n cursor: pointer;\n height: auto;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n width: auto;\n}\n:host button,\n:host a {\n cursor: pointer;\n background: none;\n border: none;\n}\n:host ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}";
|
|
820
820
|
|
|
821
821
|
const HemfixarnaComponent = class {
|
|
822
822
|
constructor(hostRef) {
|
|
@@ -1036,7 +1036,7 @@ const HemfixarnaComponent = class {
|
|
|
1036
1036
|
const monteringLogo = index.getAssetPath(`./assets/montering.svg`);
|
|
1037
1037
|
const navBackground = ((_a = this.nav) === null || _a === void 0 ? void 0 : _a.background) ? index.getAssetPath(this.nav.background) : '';
|
|
1038
1038
|
const navLogo = ((_b = this.nav) === null || _b === void 0 ? void 0 : _b.logo) ? index.getAssetPath(this.nav.logo) : '';
|
|
1039
|
-
return (index.h("div", { class: `hemfixarna ${this.loadFromQuery ? 'hemfixarna_standalone' : ''}` }, this.loadFromQuery && !this.isDemo && this.nav ? (index.h("nav", { class: "hemfixarna_nav" }, index.h("div", null, index.h("div", { class: "hemfixarna_nav--logos" }, index.h("a", { href: this.nav.url, target: "_blank" }, index.h("img", { class: "hemfixarna_partnerlogo", src: navLogo, alt: `${this.business} logo` })), index.h("a", { href: "https://hemfixarna.se/", target: "_blank" }, index.h("p",
|
|
1039
|
+
return (index.h("div", { class: `hemfixarna ${this.loadFromQuery ? 'hemfixarna_standalone' : ''}` }, this.loadFromQuery && !this.isDemo && this.nav ? (index.h("nav", { class: "hemfixarna_nav" }, index.h("div", null, index.h("div", { class: "hemfixarna_nav--logos" }, index.h("a", { href: this.nav.url, target: "_blank" }, index.h("img", { class: "hemfixarna_partnerlogo", src: navLogo, alt: `${this.business} logo` })), index.h("a", { href: "https://hemfixarna.se/", target: "_blank" }, index.h("p", { class: navBackground ? 'with-bg' : '' }, "I samarbete med:"), index.h("img", { src: logo, alt: "hemfixarna_logo", width: 104 }))), index.h("div", { class: "hemfixarna_nav--links" }, index.h("a", { href: this.nav.url, target: "_blank" }, "Till ", this.business), index.h("a", { href: "https://www.hemfixarna.se/", target: "_blank" }, "Till Hemfixarna")), navBackground ? index.h("img", { src: navBackground, class: "nav_background", alt: "nav_background" }) : null))) : null, !this.loadFromQuery || this.isDemo ? (index.h("div", { class: `hemfixarna_box hemfixarna_box--${this.widgetStyle}` }, [WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) ? (index.h("img", { src: this.id === 'maleri' ? pensel : monteringLogo, alt: "montering logo", width: 32, height: 32 })) : null, index.h("div", null, index.h("div", null, index.h("p", { onClick: () => this.openModal(), class: `pointer ${[WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) && state.selectedProduct ? 'underline' : ''}` }, this.id === 'maleri' ? (index.h("span", null, "Ber\u00E4kna fast pris p\u00E5 m\u00E5leri & tapetsering h\u00E4r")) : (index.h(index.Fragment, null, ((_c = this.product) === null || _c === void 0 ? void 0 : _c.post_title) || ((_d = this.proppedProduct) === null || _d === void 0 ? void 0 : _d.post_title) || (index.h("span", null, "Montering", index.h("wbr", null), "/Installation ", (_f = (_e = state.selectedCustomerCategory) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : 'på plats', " - ", index.h("strong", { class: "underline" }, "se priser h\u00E4r"))), (this.product && ((_g = this.slug) === null || _g === void 0 ? void 0 : _g.includes('product'))) || (this.proppedProduct && !((_h = this.product) === null || _h === void 0 ? void 0 : _h.invoice) && !((_j = this.proppedProduct) === null || _j === void 0 ? void 0 : _j.invoice)) ? (index.h("span", null, ' från', " ", index.h("strong", null, getProductPriceWithRotAndRut(this.proppedProduct || this.product), "kr"))) : null, ((_k = this.product) === null || _k === void 0 ? void 0 : _k.invoice) || ((_l = this.proppedProduct) === null || _l === void 0 ? void 0 : _l.invoice) ? (index.h("span", null, ' - ', index.h("strong", { class: "underling" }, "se priser h\u00E4r"))) : null)))), this.widgetStyle === WidgetStyle.standard ? index.h("img", { src: logo, width: 104 }) : null, this.widgetStyle === WidgetStyle.alternative ? (index.h("span", { class: "p-s" }, "Utf\u00F6rs av ", index.h("strong", null, "Hemfixarna"))) : null), [WidgetStyle.standard, WidgetStyle.alternative].includes(this.widgetStyle) ? (index.h("button", { onClick: () => this.openModal(), class: "hemfixarna_btn", style: {
|
|
1040
1040
|
color: ((_m = this.buttonColor) === null || _m === void 0 ? void 0 : _m.startsWith('#')) || !((_o = this.buttonColor) === null || _o === void 0 ? void 0 : _o.length) ? this.buttonColor : `#${this.buttonColor}`,
|
|
1041
1041
|
backgroundColor: ((_p = this.buttonBg) === null || _p === void 0 ? void 0 : _p.startsWith('#')) || !((_q = this.buttonBg) === null || _q === void 0 ? void 0 : _q.length) ? this.buttonBg : `#${this.buttonBg}`,
|
|
1042
1042
|
} }, "Best\u00E4ll h\u00E4r", this.getCartLength() > 0 && index.h("span", null, this.getCartLength()))) : null, WidgetStyle.alternative_2 === this.widgetStyle ? (index.h("div", { class: "hemfixarna_altbtn" }, index.h("strong", { class: "p-s" }, "Utf\u00F6rs av"), index.h("img", { src: logo, alt: "hemfixarna logo", width: 98 }))) : null)) : null, this.modal && (index.h("div", null, index.h("div", { class: `hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}` }, state.modal && (index.h("div", { class: "hemfixarna_infomodal" }, state.modal.title && index.h("h2", null, state.modal.title), state.modal.text.map((t) => (index.h("p", { innerHTML: t }))), index.h("div", null, index.h("button", { onClick: () => (state.modal = null) }, "St\u00E4ng")))), (this.tree || state.customer) && (index.h("hemfixarna-breadcrumbs", { isDemo: this.isDemo, loadFromQuery: this.loadFromQuery, closeModal: () => this.closeModal(), tree: this.tree })), !state.customer || this.slugIsOldFormat(this.slug) ? (index.h("div", { class: `hemfixarna_content hemfixarna_content--${state.step}` }, state.step === 1 && this.tree && index.h("hemfixarna-start", { tree: this.tree }), state.step === 2 && state.selectedCategory && index.h("hemfixarna-category", null), state.step === 3 && state.selectedService && index.h("hemfixarna-service", null), state.step === 4 && state.selectedProduct && index.h("hemfixarna-product", null), state.step === 5 && index.h("hemfixarna-cart", { tree: this.tree }), state.step === 6 && index.h("hemfixarna-order", { tree: this.tree }))) : (index.h("div", { class: `hemfixarna_content hemfixarna_content--${state.step} ${state.step === 4 && state.maleri ? 'hemfixarna_content--painting' : ''}` }, state.step < 4 && index.h("hemfixarna-start", null), state.step === 4 && index.h("hemfixarna-product", null), state.step === 5 && index.h("hemfixarna-cart", { tree: this.tree }), state.step === 6 && index.h("hemfixarna-order", { tree: this.tree })))), !this.isDemo ? index.h("div", { class: `hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}` }) : null))));
|
|
@@ -1097,7 +1097,7 @@ const MyComponent$7 = class {
|
|
|
1097
1097
|
// Your color accessibility logic here
|
|
1098
1098
|
}
|
|
1099
1099
|
getTopLevelCategory() {
|
|
1100
|
-
switch ("
|
|
1100
|
+
switch ("elfa") {
|
|
1101
1101
|
case Business.byggmax:
|
|
1102
1102
|
return TopCategory.byggmax;
|
|
1103
1103
|
default:
|
|
@@ -1127,14 +1127,14 @@ const MyComponent$7 = class {
|
|
|
1127
1127
|
}
|
|
1128
1128
|
}
|
|
1129
1129
|
else {
|
|
1130
|
-
const customer = await getCustomer("
|
|
1130
|
+
const customer = await getCustomer("elfa");
|
|
1131
1131
|
if (customer.code !== 'not_found' && customer) {
|
|
1132
1132
|
this.customer = customer;
|
|
1133
1133
|
}
|
|
1134
1134
|
}
|
|
1135
1135
|
}
|
|
1136
1136
|
getExample() {
|
|
1137
|
-
return `<hemfixarna-${"
|
|
1137
|
+
return `<hemfixarna-${"elfa"}${this.selectedSlug ? ` slug="${this.selectedSlug}" ` : ''}${this.selectedID ? ` id="${this.selectedID}" ` : ''} ${this.widgetStyle === WidgetStyle.standard ? '' : `widgetStyle="${this.widgetStyle}"`} ${this.buttonColor.length ? `button-color="${this.buttonColor}"` : ''} ${this.buttonBg.length ? `button-bg="${this.buttonBg}"` : ''}></hemfixarna-${"elfa"}>`;
|
|
1138
1138
|
}
|
|
1139
1139
|
copyExample() {
|
|
1140
1140
|
navigator.clipboard.writeText(this.getExample());
|
|
@@ -1164,7 +1164,7 @@ const MyComponent$7 = class {
|
|
|
1164
1164
|
}
|
|
1165
1165
|
render() {
|
|
1166
1166
|
const copy = index.getAssetPath(`./assets/copy.png`);
|
|
1167
|
-
return (index.h("div", null, index.h("div", null, index.h("div", { onClick: () => this.copyExample(), class: "hemfixarna_example" }, index.h("p", null, this.getExample()), index.h("img", { src: copy, height: 20 }), index.h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText)), "
|
|
1167
|
+
return (index.h("div", null, index.h("div", null, index.h("div", { onClick: () => this.copyExample(), class: "hemfixarna_example" }, index.h("p", null, this.getExample()), index.h("img", { src: copy, height: 20 }), index.h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText)), "elfa" === Business.byggmax && (index.h("hemfixarna-byggmax", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, forceOldTree: Boolean(process.env.FORCE_OLD_TREE), slug: this.selectedSlug, id: this.selectedID })), "elfa" === Business.skanska && (index.h("hemfixarna-skanska", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), "elfa" === Business.string && (index.h("hemfixarna-string-furniture", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), "elfa" === Business.hornbach && (index.h("hemfixarna-hornbach", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), "elfa" === Business.forebygg && (index.h("hemfixarna-forebygg", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), "elfa" === Business.doro && (index.h("hemfixarna-doro", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), "elfa" === Business.elfa && (index.h("hemfixarna-elfa", { isDemo: true, buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), "elfa" === Business.kund && (index.h("hemfixarna-kund", { buttonColor: this.buttonColor, buttonBg: this.buttonBg, widgetStyle: this.widgetStyle, id: this.selectedID })), index.h("div", { class: "hemfixarna_install" }, index.h("div", { onClick: () => this.copyCdn(), class: "hemfixarna_example" }, index.h("p", null, this.cdnLink), index.h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText), index.h("img", { src: copy, height: 20 }))), index.h("div", { class: "hemfixarna_widgetstyles" }, index.h("h5", null, "Widget styles"), index.h("div", null, Object.values(WidgetStyle).map(style => (index.h("label", { key: style }, index.h("input", { type: "radio", value: style, checked: this.widgetStyle === style, onChange: () => (this.widgetStyle = style) }), style)))), index.h("div", null, index.h("div", null, index.h("h5", null, "Button background color"), index.h("input", { type: "text", value: this.buttonBg, onInput: e => (this.buttonBg = e.target.value) })), index.h("div", null, index.h("h5", null, "Button text color"), index.h("input", { type: "text", value: this.buttonColor, onInput: e => (this.buttonColor = e.target.value) })))), index.h("span", null, "Write an hexa code no # needed"), this.colorAccessibility ? (index.h("div", null, index.h("h5", null, "Tillg\u00E4nglighetsrapport"), index.h("div", null, index.h("strong", null, "Liten text:"), index.h("span", { style: { color: this.getColor(this.colorAccessibility.small) } }, this.colorAccessibility.small), index.h("br", null), index.h("strong", null, "Fet text:"), index.h("span", { style: { color: this.getColor(this.colorAccessibility.bold) } }, this.colorAccessibility.bold), index.h("br", null), index.h("strong", null, "Stor text:"), index.h("span", { style: { color: this.getColor(this.colorAccessibility.large) } }, this.colorAccessibility.large), index.h("br", null), index.h("strong", null, "Kontrastf\u00F6rh\u00E5llande:"), " ", this.colorAccessibility.contrast))) : null), index.h("ul", { class: "hemfixarna_categories" }, this.customer ? (index.h("div", null, this.showMaleri() ? (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, index.h("div", null, index.h("p", null, "M\u00E5leriverktyget"), index.h("span", null, "maleri")), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText('maleri') }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedID = 'maleri') }, "Ladda m\u00E5leri"))))) : null, this.customer.categories.map(c => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, index.h("div", null, index.h("p", null, c.name), index.h("span", null, `c-${c.id}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`c-${c.id}`) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = `c-${c.id}`) }, "Ladda kategori"))), c.show_products && c.products ? (index.h("ul", null, c.products.map(p => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_product--label" }, index.h("div", null, index.h("p", null, p.fields.post_title), index.h("span", null, p.fields.ID)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(String(p.fields.ID)) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = String(p.fields.ID)) }, "Ladda produkt")))))))) : (index.h("ul", null, c.sub_categories &&
|
|
1168
1168
|
c.sub_categories.map(sc => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label" }, index.h("div", null, index.h("p", null, sc.name), index.h("span", null, `c-${sc.id}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`c-${sc.id}`) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = `c-${sc.id}`) }, "Ladda kategori"))), index.h("ul", null, sc.products.map(p => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_product--label" }, index.h("div", null, index.h("p", null, p.fields.post_title), index.h("span", null, p.fields.ID)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(String(p.fields.ID)) }, "Kopiera ID"), index.h("button", { onClick: () => (this.selectedID = String(p.fields.ID)) }, "Ladda produkt"))))))))))))))))) : this.tree ? (index.h("div", null, this.tree.sub_cats.map(c => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, index.h("div", null, index.h("p", null, c.name), index.h("span", null, `category/${c.slug}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`category/${c.slug}`) }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedSlug = `category/${c.slug}`) }, "Ladda kategori"))), index.h("ul", null, c.services.map(sc => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label" }, index.h("div", null, index.h("p", null, sc.post_title), index.h("span", null, `service/${sc.post_name}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`service/${sc.post_name}`) }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedSlug = `service/${sc.post_name}`) }, "Ladda kategori"))), index.h("ul", null, sc.products.map(sc => (index.h("li", null, index.h("div", { class: "hemfixarna_categories--label" }, index.h("div", null, index.h("p", null, sc.post_title), index.h("span", null, `product/${sc.post_name}`)), index.h("div", null, index.h("button", { onClick: () => navigator.clipboard.writeText(`product/${sc.post_name}`) }, "Kopiera slug"), index.h("button", { onClick: () => (this.selectedSlug = `product/${sc.post_name}`) }, "Ladda produkt")))))))))))))))) : null)));
|
|
1169
1169
|
}
|
|
1170
1170
|
static get watchers() { return {
|
|
@@ -223,7 +223,7 @@ export class HemfixarnaComponent {
|
|
|
223
223
|
const monteringLogo = getAssetPath(`./assets/montering.svg`);
|
|
224
224
|
const navBackground = ((_a = this.nav) === null || _a === void 0 ? void 0 : _a.background) ? getAssetPath(this.nav.background) : '';
|
|
225
225
|
const navLogo = ((_b = this.nav) === null || _b === void 0 ? void 0 : _b.logo) ? getAssetPath(this.nav.logo) : '';
|
|
226
|
-
return (h("div", { class: `hemfixarna ${this.loadFromQuery ? 'hemfixarna_standalone' : ''}` }, this.loadFromQuery && !this.isDemo && this.nav ? (h("nav", { class: "hemfixarna_nav" }, h("div", null, h("div", { class: "hemfixarna_nav--logos" }, h("a", { href: this.nav.url, target: "_blank" }, h("img", { class: "hemfixarna_partnerlogo", src: navLogo, alt: `${this.business} logo` })), h("a", { href: "https://hemfixarna.se/", target: "_blank" }, h("p",
|
|
226
|
+
return (h("div", { class: `hemfixarna ${this.loadFromQuery ? 'hemfixarna_standalone' : ''}` }, this.loadFromQuery && !this.isDemo && this.nav ? (h("nav", { class: "hemfixarna_nav" }, h("div", null, h("div", { class: "hemfixarna_nav--logos" }, h("a", { href: this.nav.url, target: "_blank" }, h("img", { class: "hemfixarna_partnerlogo", src: navLogo, alt: `${this.business} logo` })), h("a", { href: "https://hemfixarna.se/", target: "_blank" }, h("p", { class: navBackground ? 'with-bg' : '' }, "I samarbete med:"), h("img", { src: logo, alt: "hemfixarna_logo", width: 104 }))), h("div", { class: "hemfixarna_nav--links" }, h("a", { href: this.nav.url, target: "_blank" }, "Till ", this.business), h("a", { href: "https://www.hemfixarna.se/", target: "_blank" }, "Till Hemfixarna")), navBackground ? h("img", { src: navBackground, class: "nav_background", alt: "nav_background" }) : null))) : null, !this.loadFromQuery || this.isDemo ? (h("div", { class: `hemfixarna_box hemfixarna_box--${this.widgetStyle}` }, [WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) ? (h("img", { src: this.id === 'maleri' ? pensel : monteringLogo, alt: "montering logo", width: 32, height: 32 })) : null, h("div", null, h("div", null, h("p", { onClick: () => this.openModal(), class: `pointer ${[WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) && state.selectedProduct ? 'underline' : ''}` }, this.id === 'maleri' ? (h("span", null, "Ber\u00E4kna fast pris p\u00E5 m\u00E5leri & tapetsering h\u00E4r")) : (h(Fragment, null, ((_c = this.product) === null || _c === void 0 ? void 0 : _c.post_title) || ((_d = this.proppedProduct) === null || _d === void 0 ? void 0 : _d.post_title) || (h("span", null, "Montering", h("wbr", null), "/Installation ", (_f = (_e = state.selectedCustomerCategory) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : 'på plats', " - ", h("strong", { class: "underline" }, "se priser h\u00E4r"))), (this.product && ((_g = this.slug) === null || _g === void 0 ? void 0 : _g.includes('product'))) || (this.proppedProduct && !((_h = this.product) === null || _h === void 0 ? void 0 : _h.invoice) && !((_j = this.proppedProduct) === null || _j === void 0 ? void 0 : _j.invoice)) ? (h("span", null, ' från', " ", h("strong", null, getProductPriceWithRotAndRut(this.proppedProduct || this.product), "kr"))) : null, ((_k = this.product) === null || _k === void 0 ? void 0 : _k.invoice) || ((_l = this.proppedProduct) === null || _l === void 0 ? void 0 : _l.invoice) ? (h("span", null, ' - ', h("strong", { class: "underling" }, "se priser h\u00E4r"))) : null)))), this.widgetStyle === WidgetStyle.standard ? h("img", { src: logo, width: 104 }) : null, this.widgetStyle === WidgetStyle.alternative ? (h("span", { class: "p-s" }, "Utf\u00F6rs av ", h("strong", null, "Hemfixarna"))) : null), [WidgetStyle.standard, WidgetStyle.alternative].includes(this.widgetStyle) ? (h("button", { onClick: () => this.openModal(), class: "hemfixarna_btn", style: {
|
|
227
227
|
color: ((_m = this.buttonColor) === null || _m === void 0 ? void 0 : _m.startsWith('#')) || !((_o = this.buttonColor) === null || _o === void 0 ? void 0 : _o.length) ? this.buttonColor : `#${this.buttonColor}`,
|
|
228
228
|
backgroundColor: ((_p = this.buttonBg) === null || _p === void 0 ? void 0 : _p.startsWith('#')) || !((_q = this.buttonBg) === null || _q === void 0 ? void 0 : _q.length) ? this.buttonBg : `#${this.buttonBg}`,
|
|
229
229
|
} }, "Best\u00E4ll h\u00E4r", this.getCartLength() > 0 && h("span", null, this.getCartLength()))) : null, WidgetStyle.alternative_2 === this.widgetStyle ? (h("div", { class: "hemfixarna_altbtn" }, h("strong", { class: "p-s" }, "Utf\u00F6rs av"), h("img", { src: logo, alt: "hemfixarna logo", width: 98 }))) : null)) : null, this.modal && (h("div", null, h("div", { class: `hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}` }, state.modal && (h("div", { class: "hemfixarna_infomodal" }, state.modal.title && h("h2", null, state.modal.title), state.modal.text.map((t) => (h("p", { innerHTML: t }))), h("div", null, h("button", { onClick: () => (state.modal = null) }, "St\u00E4ng")))), (this.tree || state.customer) && (h("hemfixarna-breadcrumbs", { isDemo: this.isDemo, loadFromQuery: this.loadFromQuery, closeModal: () => this.closeModal(), tree: this.tree })), !state.customer || this.slugIsOldFormat(this.slug) ? (h("div", { class: `hemfixarna_content hemfixarna_content--${state.step}` }, state.step === 1 && this.tree && h("hemfixarna-start", { tree: this.tree }), state.step === 2 && state.selectedCategory && h("hemfixarna-category", null), state.step === 3 && state.selectedService && h("hemfixarna-service", null), state.step === 4 && state.selectedProduct && h("hemfixarna-product", null), state.step === 5 && h("hemfixarna-cart", { tree: this.tree }), state.step === 6 && h("hemfixarna-order", { tree: this.tree }))) : (h("div", { class: `hemfixarna_content hemfixarna_content--${state.step} ${state.step === 4 && state.maleri ? 'hemfixarna_content--painting' : ''}` }, state.step < 4 && h("hemfixarna-start", null), state.step === 4 && h("hemfixarna-product", null), state.step === 5 && h("hemfixarna-cart", { tree: this.tree }), state.step === 6 && h("hemfixarna-order", { tree: this.tree })))), !this.isDemo ? h("div", { class: `hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}` }) : null))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hemfixarna-component.js","sourceRoot":"","sources":["../../../src/components/hemfixarna-component/hemfixarna-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, Listen, Prop, State, Watch, getAssetPath, h } from '@stencil/core';\nimport state from '../../store';\nimport { Business, Category, Product, Service, TopCategory, WidgetStyle } from '../../types';\nimport { getCustomer, getOptions, getRot, getRut, getTaxonomy } from '../../utils/api';\nimport { getProductPriceWithRotAndRut } from '../../utils/calc';\nimport { scrollToTop } from '../../utils/scroll';\n\n@Component({\n tag: 'hemfixarna-component',\n styleUrl: 'hemfixarna.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class HemfixarnaComponent {\n @State() modal: boolean = false;\n @State() showModal: boolean = false;\n @State() tree: Category | null = null;\n @State() product: Product | null = null;\n @State() proppedProduct: Product | null = null;\n @Prop() slug?: string;\n @Prop() id?: string;\n @Prop() business: Business;\n @Prop() topCategory?: TopCategory;\n @Prop() forceOldTree?: boolean = false;\n @Prop() loadFromQuery?: boolean = false;\n @Prop() isDemo?: boolean = false;\n @Prop() widgetStyle: WidgetStyle;\n @Prop() nav?: {\n url: string;\n logo: string;\n background?: string;\n } = undefined;\n @Prop() buttonColor?: string;\n @Prop() buttonBg?: string;\n\n @Element() private el: HTMLElement;\n\n loadCategoryOrProduct(id: string) {\n this.proppedProduct = null;\n if (id.startsWith('c-')) {\n const categories = [...state.customer.categories, ...state.customer.categories.map(c => c.sub_categories ?? [])].flat();\n const category = categories.find(c => c && c.id === id.replace('c-', ''));\n if (category) {\n state.selectedCustomerCategory = category;\n state.step = 2;\n }\n } else {\n const products = state.customer.categories\n .map(c => (c.show_products ? c.products : c.sub_categories ? c.sub_categories.map(c => c.products) : []))\n .flat()\n .flat();\n const product = products.find(p => p && p.fields.ID === parseInt(id));\n if (product) {\n state.selectedProduct = product.fields;\n state.step = 4;\n this.proppedProduct = product.fields;\n }\n }\n }\n\n @Watch('slug')\n async watchSlugChange(newValue: string) {\n if (this.slugIsOldFormat(newValue)) {\n this.fetchNewTaxonomy(newValue);\n } else if (state.customer && newValue) {\n this.loadCategoryOrProduct(newValue);\n }\n }\n\n @Watch('id')\n async watchIdChange(id: string) {\n if (id && state.customer) {\n if (id === 'maleri') {\n state.maleri = true;\n state.step = 4;\n } else {\n this.loadCategoryOrProduct(id);\n }\n }\n }\n\n async fetchNewTaxonomy(slug: string) {\n state.selectedCategory = null;\n state.selectedProduct = null;\n state.selectedService = null;\n state.maleri = null;\n\n const res = await getTaxonomy(slug);\n if (res?.code === 'not_found' || res?.code === 'rest_no_route') {\n console.log('taxonomy not found');\n } else if (res) {\n this.setTaxonomy(res);\n if ((res as Product)?.post_type === 'ikea_product') {\n this.product = res as Product;\n }\n }\n }\n\n slugIsOldFormat = (slug?: string) => {\n if (!slug) return false;\n return ['product', 'service', 'category'].some(str => slug.includes(str));\n };\n\n async componentWillLoad() {\n state.business = this.business;\n const cart = window.sessionStorage.getItem(`hemfixarna-${this.business}-cart`);\n if (cart) {\n state.cart = JSON.parse(cart);\n }\n const user = window.sessionStorage.getItem(`hemfixarna-${this.business}-user`);\n if (user) {\n state.user = JSON.parse(user);\n }\n const creditSafeUser = window.sessionStorage.getItem(`hemfixarna-${this.business}-creditSafeUser`);\n if (creditSafeUser) {\n state.creditSafeUser = JSON.parse(creditSafeUser);\n }\n\n const [tree, res, options, rut, rot] = await Promise.all([\n this.topCategory ? getTaxonomy(this.topCategory) : null,\n this.slug ? getTaxonomy(this.slug) : Promise.resolve(null),\n getOptions(),\n getRut(),\n getRot(),\n ]);\n\n if ((!this.slug || !this.slugIsOldFormat(this.slug)) && !this.forceOldTree) {\n try {\n const customer = await getCustomer(this.business);\n if (customer?.code === 'not_found') {\n console.warn('customer not found');\n } else if (customer) {\n state.customer = customer;\n if (this.id) {\n if (this.id === 'maleri') {\n state.maleri = true;\n state.step = 4;\n } else {\n this.loadCategoryOrProduct(this.id);\n }\n } else if (this.slug && !this.slugIsOldFormat(this.slug)) {\n this.loadCategoryOrProduct(this.slug);\n }\n }\n } catch (error) {\n console.warn('customer not found');\n }\n }\n\n if (tree?.code === 'not_found') {\n // console.warn('tree not found');\n } else if (tree) {\n this.tree = tree;\n }\n\n if (res?.code === 'not_found') {\n console.log('taxonomy not found');\n } else if (res) {\n this.setTaxonomy(res);\n if ((res as Product)?.post_type === 'ikea_product') {\n this.product = res as Product;\n }\n }\n\n if (this.loadFromQuery) {\n const params = new URL(document.location.toString()).searchParams;\n this.id = params.get('id');\n if (!this.isDemo) {\n this.openModal();\n }\n }\n\n state.rotOptions = rot;\n state.rutOptions = rut;\n state.options = options;\n }\n\n triggerScrollTotop = () => {\n const el = this.el.shadowRoot.querySelector('.hemfixarna_content');\n scrollToTop(el);\n };\n\n setTaxonomy(taxonomy: Category | Service | Product) {\n if (taxonomy) {\n if ((taxonomy as Category)?.taxonomy === 'service_cat') {\n state.selectedCategory = taxonomy as Category;\n state.step = 2;\n } else if ((taxonomy as Service)?.post_type === 'service') {\n state.selectedService = taxonomy as Service;\n state.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === (taxonomy as Service).ID));\n state.step = 3;\n } else if ((taxonomy as Product)?.post_type === 'ikea_product') {\n state.selectedProduct = taxonomy as Product;\n state.selectedService = this.tree.sub_cats\n .map(c => c.services)\n .flat()\n .find(s => s.products.find(p => p.ID === state.selectedProduct.ID));\n state.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === state.selectedService.ID));\n state.step = 4;\n }\n this.triggerScrollTotop();\n }\n }\n\n // Open close modal && click outside event\n openModal() {\n this.modal = true;\n setTimeout(() => {\n this.showModal = true;\n }, 50);\n }\n closeModal() {\n this.showModal = false;\n setTimeout(() => {\n this.modal = false;\n }, 200);\n }\n @Listen('click')\n handleClick(e: Event) {\n if (this.loadFromQuery && !this.isDemo) return;\n if ((e?.composedPath()[0] as HTMLElement).classList.contains('hemfixarna_backdrop')) {\n this.closeModal();\n }\n const infomodal = this.el.shadowRoot.querySelector('.hemfixarna_infomodal');\n if (infomodal) {\n const isClickInside = infomodal.contains(e.composedPath()[0] as HTMLInputElement);\n if (!isClickInside) {\n state.modal = null;\n }\n }\n }\n\n getCartLength() {\n return state.cart.reduce((acc, curr) => acc + curr.amount, 0);\n }\n\n render() {\n const logo = getAssetPath(`./assets/hemfixarna.svg`);\n const pensel = getAssetPath(`./assets/pensel.svg`);\n const monteringLogo = getAssetPath(`./assets/montering.svg`);\n const navBackground = this.nav?.background ? getAssetPath(this.nav.background) : '';\n const navLogo = this.nav?.logo ? getAssetPath(this.nav.logo) : '';\n\n return (\n <div class={`hemfixarna ${this.loadFromQuery ? 'hemfixarna_standalone' : ''}`}>\n {this.loadFromQuery && !this.isDemo && this.nav ? (\n <nav class=\"hemfixarna_nav\">\n <div>\n <div class=\"hemfixarna_nav--logos\">\n <a href={this.nav.url} target=\"_blank\">\n <img class=\"hemfixarna_partnerlogo\" src={navLogo} alt={`${this.business} logo`} />\n </a>\n <a href=\"https://hemfixarna.se/\" target=\"_blank\">\n <p>I samarbete med:</p>\n <img src={logo} alt=\"hemfixarna_logo\" width={104} />\n </a>\n </div>\n\n <div class=\"hemfixarna_nav--links\">\n <a href={this.nav.url} target=\"_blank\">\n Till {this.business}\n </a>\n <a href=\"https://www.hemfixarna.se/\" target=\"_blank\">\n Till Hemfixarna\n </a>\n </div>\n {navBackground ? <img src={navBackground} class=\"nav_background\" alt=\"nav_background\" /> : <div class=\"hemfixarna_navbg\" />}\n </div>\n </nav>\n ) : null}\n {!this.loadFromQuery || this.isDemo ? (\n <div class={`hemfixarna_box hemfixarna_box--${this.widgetStyle}`}>\n {[WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) ? (\n <img src={this.id === 'maleri' ? pensel : monteringLogo} alt=\"montering logo\" width={32} height={32} />\n ) : null}\n <div>\n <div>\n <p\n onClick={() => this.openModal()}\n class={`pointer ${[WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) && state.selectedProduct ? 'underline' : ''}`}\n >\n {this.id === 'maleri' ? (\n <span>Beräkna fast pris på måleri & tapetsering här</span>\n ) : (\n <Fragment>\n {this.product?.post_title || this.proppedProduct?.post_title || (\n <span>\n Montering\n <wbr />\n /Installation {state.selectedCustomerCategory?.name ?? 'på plats'} - <strong class=\"underline\">se priser här</strong>\n </span>\n )}\n {(this.product && this.slug?.includes('product')) || (this.proppedProduct && !this.product?.invoice && !this.proppedProduct?.invoice) ? (\n <span>\n {' från'} <strong>{getProductPriceWithRotAndRut(this.proppedProduct || this.product)}kr</strong>\n </span>\n ) : null}\n {this.product?.invoice || this.proppedProduct?.invoice ? (\n <span>\n {' - '}\n <strong class=\"underling\">se priser här</strong>\n </span>\n ) : null}\n </Fragment>\n )}\n </p>\n </div>\n {this.widgetStyle === WidgetStyle.standard ? <img src={logo} width={104} /> : null}\n {this.widgetStyle === WidgetStyle.alternative ? (\n <span class=\"p-s\">\n Utförs av <strong>Hemfixarna</strong>\n </span>\n ) : null}\n </div>\n {[WidgetStyle.standard, WidgetStyle.alternative].includes(this.widgetStyle) ? (\n <button\n onClick={() => this.openModal()}\n class=\"hemfixarna_btn\"\n style={{\n color: this.buttonColor?.startsWith('#') || !this.buttonColor?.length ? this.buttonColor : `#${this.buttonColor}`,\n backgroundColor: this.buttonBg?.startsWith('#') || !this.buttonBg?.length ? this.buttonBg : `#${this.buttonBg}`,\n }}\n >\n Beställ här\n {this.getCartLength() > 0 && <span>{this.getCartLength()}</span>}\n </button>\n ) : null}\n {WidgetStyle.alternative_2 === this.widgetStyle ? (\n <div class=\"hemfixarna_altbtn\">\n <strong class=\"p-s\">Utförs av</strong>\n <img src={logo} alt=\"hemfixarna logo\" width={98} />\n </div>\n ) : null}\n </div>\n ) : null}\n {this.modal && (\n <div>\n <div class={`hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}`}>\n {state.modal && (\n <div class=\"hemfixarna_infomodal\">\n {state.modal.title && <h2>{state.modal.title}</h2>}\n {state.modal.text.map((t: string) => (\n <p innerHTML={t}></p>\n ))}\n <div>\n <button onClick={() => (state.modal = null)}>Stäng</button>\n </div>\n </div>\n )}\n {(this.tree || state.customer) && (\n <hemfixarna-breadcrumbs isDemo={this.isDemo} loadFromQuery={this.loadFromQuery} closeModal={() => this.closeModal()} tree={this.tree} />\n )}\n {!state.customer || this.slugIsOldFormat(this.slug) ? (\n <div class={`hemfixarna_content hemfixarna_content--${state.step}`}>\n {/* // IF AT TOP LEVEL (step 1) */}\n {state.step === 1 && this.tree && <hemfixarna-start tree={this.tree} />}\n {/* // IF SELECTED CATEGORY (step 2) */}\n {state.step === 2 && state.selectedCategory && <hemfixarna-category />}\n {/* // IF SELECTED SERVICE (step 3) */}\n {state.step === 3 && state.selectedService && <hemfixarna-service />}\n {/* // IF SELECTED PRODUCT (step 4) */}\n {state.step === 4 && state.selectedProduct && <hemfixarna-product />}\n {/* // IF CHECKOUT (step 5) */}\n {state.step === 5 && <hemfixarna-cart tree={this.tree} />}\n {/* // IF ORDER CONFIRM (step 6) */}\n {state.step === 6 && <hemfixarna-order tree={this.tree} />}\n </div>\n ) : (\n <div class={`hemfixarna_content hemfixarna_content--${state.step} ${state.step === 4 && state.maleri ? 'hemfixarna_content--painting' : ''}`}>\n {state.step < 4 && <hemfixarna-start />}\n {/* // IF SELECTED PRODUCT (step 4) */}\n {state.step === 4 && <hemfixarna-product />}\n {/* // IF CHECKOUT (step 5) */}\n {state.step === 5 && <hemfixarna-cart tree={this.tree} />}\n {/* // IF ORDER CONFIRM (step 6) */}\n {state.step === 6 && <hemfixarna-order tree={this.tree} />}\n </div>\n )}\n </div>\n {!this.isDemo ? <div class={`hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}`}></div> : null}\n </div>\n )}\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"hemfixarna-component.js","sourceRoot":"","sources":["../../../src/components/hemfixarna-component/hemfixarna-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, Listen, Prop, State, Watch, getAssetPath, h } from '@stencil/core';\nimport state from '../../store';\nimport { Business, Category, Product, Service, TopCategory, WidgetStyle } from '../../types';\nimport { getCustomer, getOptions, getRot, getRut, getTaxonomy } from '../../utils/api';\nimport { getProductPriceWithRotAndRut } from '../../utils/calc';\nimport { scrollToTop } from '../../utils/scroll';\n\n@Component({\n tag: 'hemfixarna-component',\n styleUrl: 'hemfixarna.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class HemfixarnaComponent {\n @State() modal: boolean = false;\n @State() showModal: boolean = false;\n @State() tree: Category | null = null;\n @State() product: Product | null = null;\n @State() proppedProduct: Product | null = null;\n @Prop() slug?: string;\n @Prop() id?: string;\n @Prop() business: Business;\n @Prop() topCategory?: TopCategory;\n @Prop() forceOldTree?: boolean = false;\n @Prop() loadFromQuery?: boolean = false;\n @Prop() isDemo?: boolean = false;\n @Prop() widgetStyle: WidgetStyle;\n @Prop() nav?: {\n url: string;\n logo: string;\n background?: string;\n } = undefined;\n @Prop() buttonColor?: string;\n @Prop() buttonBg?: string;\n\n @Element() private el: HTMLElement;\n\n loadCategoryOrProduct(id: string) {\n this.proppedProduct = null;\n if (id.startsWith('c-')) {\n const categories = [...state.customer.categories, ...state.customer.categories.map(c => c.sub_categories ?? [])].flat();\n const category = categories.find(c => c && c.id === id.replace('c-', ''));\n if (category) {\n state.selectedCustomerCategory = category;\n state.step = 2;\n }\n } else {\n const products = state.customer.categories\n .map(c => (c.show_products ? c.products : c.sub_categories ? c.sub_categories.map(c => c.products) : []))\n .flat()\n .flat();\n const product = products.find(p => p && p.fields.ID === parseInt(id));\n if (product) {\n state.selectedProduct = product.fields;\n state.step = 4;\n this.proppedProduct = product.fields;\n }\n }\n }\n\n @Watch('slug')\n async watchSlugChange(newValue: string) {\n if (this.slugIsOldFormat(newValue)) {\n this.fetchNewTaxonomy(newValue);\n } else if (state.customer && newValue) {\n this.loadCategoryOrProduct(newValue);\n }\n }\n\n @Watch('id')\n async watchIdChange(id: string) {\n if (id && state.customer) {\n if (id === 'maleri') {\n state.maleri = true;\n state.step = 4;\n } else {\n this.loadCategoryOrProduct(id);\n }\n }\n }\n\n async fetchNewTaxonomy(slug: string) {\n state.selectedCategory = null;\n state.selectedProduct = null;\n state.selectedService = null;\n state.maleri = null;\n\n const res = await getTaxonomy(slug);\n if (res?.code === 'not_found' || res?.code === 'rest_no_route') {\n console.log('taxonomy not found');\n } else if (res) {\n this.setTaxonomy(res);\n if ((res as Product)?.post_type === 'ikea_product') {\n this.product = res as Product;\n }\n }\n }\n\n slugIsOldFormat = (slug?: string) => {\n if (!slug) return false;\n return ['product', 'service', 'category'].some(str => slug.includes(str));\n };\n\n async componentWillLoad() {\n state.business = this.business;\n const cart = window.sessionStorage.getItem(`hemfixarna-${this.business}-cart`);\n if (cart) {\n state.cart = JSON.parse(cart);\n }\n const user = window.sessionStorage.getItem(`hemfixarna-${this.business}-user`);\n if (user) {\n state.user = JSON.parse(user);\n }\n const creditSafeUser = window.sessionStorage.getItem(`hemfixarna-${this.business}-creditSafeUser`);\n if (creditSafeUser) {\n state.creditSafeUser = JSON.parse(creditSafeUser);\n }\n\n const [tree, res, options, rut, rot] = await Promise.all([\n this.topCategory ? getTaxonomy(this.topCategory) : null,\n this.slug ? getTaxonomy(this.slug) : Promise.resolve(null),\n getOptions(),\n getRut(),\n getRot(),\n ]);\n\n if ((!this.slug || !this.slugIsOldFormat(this.slug)) && !this.forceOldTree) {\n try {\n const customer = await getCustomer(this.business);\n if (customer?.code === 'not_found') {\n console.warn('customer not found');\n } else if (customer) {\n state.customer = customer;\n if (this.id) {\n if (this.id === 'maleri') {\n state.maleri = true;\n state.step = 4;\n } else {\n this.loadCategoryOrProduct(this.id);\n }\n } else if (this.slug && !this.slugIsOldFormat(this.slug)) {\n this.loadCategoryOrProduct(this.slug);\n }\n }\n } catch (error) {\n console.warn('customer not found');\n }\n }\n\n if (tree?.code === 'not_found') {\n // console.warn('tree not found');\n } else if (tree) {\n this.tree = tree;\n }\n\n if (res?.code === 'not_found') {\n console.log('taxonomy not found');\n } else if (res) {\n this.setTaxonomy(res);\n if ((res as Product)?.post_type === 'ikea_product') {\n this.product = res as Product;\n }\n }\n\n if (this.loadFromQuery) {\n const params = new URL(document.location.toString()).searchParams;\n this.id = params.get('id');\n if (!this.isDemo) {\n this.openModal();\n }\n }\n\n state.rotOptions = rot;\n state.rutOptions = rut;\n state.options = options;\n }\n\n triggerScrollTotop = () => {\n const el = this.el.shadowRoot.querySelector('.hemfixarna_content');\n scrollToTop(el);\n };\n\n setTaxonomy(taxonomy: Category | Service | Product) {\n if (taxonomy) {\n if ((taxonomy as Category)?.taxonomy === 'service_cat') {\n state.selectedCategory = taxonomy as Category;\n state.step = 2;\n } else if ((taxonomy as Service)?.post_type === 'service') {\n state.selectedService = taxonomy as Service;\n state.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === (taxonomy as Service).ID));\n state.step = 3;\n } else if ((taxonomy as Product)?.post_type === 'ikea_product') {\n state.selectedProduct = taxonomy as Product;\n state.selectedService = this.tree.sub_cats\n .map(c => c.services)\n .flat()\n .find(s => s.products.find(p => p.ID === state.selectedProduct.ID));\n state.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === state.selectedService.ID));\n state.step = 4;\n }\n this.triggerScrollTotop();\n }\n }\n\n // Open close modal && click outside event\n openModal() {\n this.modal = true;\n setTimeout(() => {\n this.showModal = true;\n }, 50);\n }\n closeModal() {\n this.showModal = false;\n setTimeout(() => {\n this.modal = false;\n }, 200);\n }\n @Listen('click')\n handleClick(e: Event) {\n if (this.loadFromQuery && !this.isDemo) return;\n if ((e?.composedPath()[0] as HTMLElement).classList.contains('hemfixarna_backdrop')) {\n this.closeModal();\n }\n const infomodal = this.el.shadowRoot.querySelector('.hemfixarna_infomodal');\n if (infomodal) {\n const isClickInside = infomodal.contains(e.composedPath()[0] as HTMLInputElement);\n if (!isClickInside) {\n state.modal = null;\n }\n }\n }\n\n getCartLength() {\n return state.cart.reduce((acc, curr) => acc + curr.amount, 0);\n }\n\n render() {\n const logo = getAssetPath(`./assets/hemfixarna.svg`);\n const pensel = getAssetPath(`./assets/pensel.svg`);\n const monteringLogo = getAssetPath(`./assets/montering.svg`);\n const navBackground = this.nav?.background ? getAssetPath(this.nav.background) : '';\n const navLogo = this.nav?.logo ? getAssetPath(this.nav.logo) : '';\n\n return (\n <div class={`hemfixarna ${this.loadFromQuery ? 'hemfixarna_standalone' : ''}`}>\n {this.loadFromQuery && !this.isDemo && this.nav ? (\n <nav class=\"hemfixarna_nav\">\n <div>\n <div class=\"hemfixarna_nav--logos\">\n <a href={this.nav.url} target=\"_blank\">\n <img class=\"hemfixarna_partnerlogo\" src={navLogo} alt={`${this.business} logo`} />\n </a>\n <a href=\"https://hemfixarna.se/\" target=\"_blank\">\n <p class={navBackground ? 'with-bg' : ''}>I samarbete med:</p>\n <img src={logo} alt=\"hemfixarna_logo\" width={104} />\n </a>\n </div>\n\n <div class=\"hemfixarna_nav--links\">\n <a href={this.nav.url} target=\"_blank\">\n Till {this.business}\n </a>\n <a href=\"https://www.hemfixarna.se/\" target=\"_blank\">\n Till Hemfixarna\n </a>\n </div>\n {navBackground ? <img src={navBackground} class=\"nav_background\" alt=\"nav_background\" /> : null}\n </div>\n </nav>\n ) : null}\n {!this.loadFromQuery || this.isDemo ? (\n <div class={`hemfixarna_box hemfixarna_box--${this.widgetStyle}`}>\n {[WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) ? (\n <img src={this.id === 'maleri' ? pensel : monteringLogo} alt=\"montering logo\" width={32} height={32} />\n ) : null}\n <div>\n <div>\n <p\n onClick={() => this.openModal()}\n class={`pointer ${[WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) && state.selectedProduct ? 'underline' : ''}`}\n >\n {this.id === 'maleri' ? (\n <span>Beräkna fast pris på måleri & tapetsering här</span>\n ) : (\n <Fragment>\n {this.product?.post_title || this.proppedProduct?.post_title || (\n <span>\n Montering\n <wbr />\n /Installation {state.selectedCustomerCategory?.name ?? 'på plats'} - <strong class=\"underline\">se priser här</strong>\n </span>\n )}\n {(this.product && this.slug?.includes('product')) || (this.proppedProduct && !this.product?.invoice && !this.proppedProduct?.invoice) ? (\n <span>\n {' från'} <strong>{getProductPriceWithRotAndRut(this.proppedProduct || this.product)}kr</strong>\n </span>\n ) : null}\n {this.product?.invoice || this.proppedProduct?.invoice ? (\n <span>\n {' - '}\n <strong class=\"underling\">se priser här</strong>\n </span>\n ) : null}\n </Fragment>\n )}\n </p>\n </div>\n {this.widgetStyle === WidgetStyle.standard ? <img src={logo} width={104} /> : null}\n {this.widgetStyle === WidgetStyle.alternative ? (\n <span class=\"p-s\">\n Utförs av <strong>Hemfixarna</strong>\n </span>\n ) : null}\n </div>\n {[WidgetStyle.standard, WidgetStyle.alternative].includes(this.widgetStyle) ? (\n <button\n onClick={() => this.openModal()}\n class=\"hemfixarna_btn\"\n style={{\n color: this.buttonColor?.startsWith('#') || !this.buttonColor?.length ? this.buttonColor : `#${this.buttonColor}`,\n backgroundColor: this.buttonBg?.startsWith('#') || !this.buttonBg?.length ? this.buttonBg : `#${this.buttonBg}`,\n }}\n >\n Beställ här\n {this.getCartLength() > 0 && <span>{this.getCartLength()}</span>}\n </button>\n ) : null}\n {WidgetStyle.alternative_2 === this.widgetStyle ? (\n <div class=\"hemfixarna_altbtn\">\n <strong class=\"p-s\">Utförs av</strong>\n <img src={logo} alt=\"hemfixarna logo\" width={98} />\n </div>\n ) : null}\n </div>\n ) : null}\n {this.modal && (\n <div>\n <div class={`hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}`}>\n {state.modal && (\n <div class=\"hemfixarna_infomodal\">\n {state.modal.title && <h2>{state.modal.title}</h2>}\n {state.modal.text.map((t: string) => (\n <p innerHTML={t}></p>\n ))}\n <div>\n <button onClick={() => (state.modal = null)}>Stäng</button>\n </div>\n </div>\n )}\n {(this.tree || state.customer) && (\n <hemfixarna-breadcrumbs isDemo={this.isDemo} loadFromQuery={this.loadFromQuery} closeModal={() => this.closeModal()} tree={this.tree} />\n )}\n {!state.customer || this.slugIsOldFormat(this.slug) ? (\n <div class={`hemfixarna_content hemfixarna_content--${state.step}`}>\n {/* // IF AT TOP LEVEL (step 1) */}\n {state.step === 1 && this.tree && <hemfixarna-start tree={this.tree} />}\n {/* // IF SELECTED CATEGORY (step 2) */}\n {state.step === 2 && state.selectedCategory && <hemfixarna-category />}\n {/* // IF SELECTED SERVICE (step 3) */}\n {state.step === 3 && state.selectedService && <hemfixarna-service />}\n {/* // IF SELECTED PRODUCT (step 4) */}\n {state.step === 4 && state.selectedProduct && <hemfixarna-product />}\n {/* // IF CHECKOUT (step 5) */}\n {state.step === 5 && <hemfixarna-cart tree={this.tree} />}\n {/* // IF ORDER CONFIRM (step 6) */}\n {state.step === 6 && <hemfixarna-order tree={this.tree} />}\n </div>\n ) : (\n <div class={`hemfixarna_content hemfixarna_content--${state.step} ${state.step === 4 && state.maleri ? 'hemfixarna_content--painting' : ''}`}>\n {state.step < 4 && <hemfixarna-start />}\n {/* // IF SELECTED PRODUCT (step 4) */}\n {state.step === 4 && <hemfixarna-product />}\n {/* // IF CHECKOUT (step 5) */}\n {state.step === 5 && <hemfixarna-cart tree={this.tree} />}\n {/* // IF ORDER CONFIRM (step 6) */}\n {state.step === 6 && <hemfixarna-order tree={this.tree} />}\n </div>\n )}\n </div>\n {!this.isDemo ? <div class={`hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}`}></div> : null}\n </div>\n )}\n </div>\n );\n }\n}\n"]}
|
|
@@ -111,6 +111,9 @@
|
|
|
111
111
|
:host .hemfixarna_painting > h2 {
|
|
112
112
|
margin: 0 0 8px;
|
|
113
113
|
}
|
|
114
|
+
:host .hemfixarna_partnerlogo {
|
|
115
|
+
max-height: 50px;
|
|
116
|
+
}
|
|
114
117
|
:host .hemfixarna_nav {
|
|
115
118
|
position: absolute;
|
|
116
119
|
top: 0;
|
|
@@ -163,7 +166,13 @@
|
|
|
163
166
|
left: 0;
|
|
164
167
|
z-index: -1;
|
|
165
168
|
}
|
|
169
|
+
:host .hemfixarna_nav a {
|
|
170
|
+
text-decoration: none;
|
|
171
|
+
}
|
|
166
172
|
:host .hemfixarna_nav p {
|
|
173
|
+
color: #474444;
|
|
174
|
+
}
|
|
175
|
+
:host .hemfixarna_nav p.with-bg {
|
|
167
176
|
color: #fff;
|
|
168
177
|
}
|
|
169
178
|
:host .hemfixarna_standalone .hemfixarna_backdrop {
|
|
@@ -84,7 +84,7 @@ export class MyComponent {
|
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
getExample() {
|
|
87
|
-
return `<hemfixarna-${process.env.BUSINESS}${this.selectedSlug ? ` slug="${this.selectedSlug}" ` : ''}${this.selectedID ? ` id="${this.selectedID}" ` : ''} ${this.widgetStyle === WidgetStyle.standard ? '' : `widgetStyle="${this.widgetStyle}"`} ${this.buttonColor.length ? `
|
|
87
|
+
return `<hemfixarna-${process.env.BUSINESS}${this.selectedSlug ? ` slug="${this.selectedSlug}" ` : ''}${this.selectedID ? ` id="${this.selectedID}" ` : ''} ${this.widgetStyle === WidgetStyle.standard ? '' : `widgetStyle="${this.widgetStyle}"`} ${this.buttonColor.length ? `button-color="${this.buttonColor}"` : ''} ${this.buttonBg.length ? `button-bg="${this.buttonBg}"` : ''}></hemfixarna-${process.env.BUSINESS}>`;
|
|
88
88
|
}
|
|
89
89
|
copyExample() {
|
|
90
90
|
navigator.clipboard.writeText(this.getExample());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hemfixarna-demo.js","sourceRoot":"","sources":["../../../src/components/hemfixarna-demo/hemfixarna-demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Watch, getAssetPath, h } from '@stencil/core';\nimport { Business, Category, Customer, TopCategory, WidgetStyle } from '../../types';\nimport { getCustomer, getTaxonomy } from '../../utils/api';\n\ninterface ColorAccessibility {\n small: string;\n bold: string;\n large: string;\n overall: string;\n contrast: string;\n}\n\n@Component({\n tag: 'hemfixarna-demo',\n styleUrl: 'hemfixarna-demo.scss',\n shadow: true,\n})\nexport class MyComponent {\n @State() selectedSlug: string;\n @State() selectedID: string;\n @State() tooltipText: string = 'Kopiera till urklipp';\n @State() tree: Category | null = null;\n @State() customer: Customer | null = null;\n @State() widgetStyle: WidgetStyle = WidgetStyle.standard;\n @State() buttonBg: string = '';\n @State() buttonColor: string = '';\n @State() colorAccessibility?: ColorAccessibility = undefined;\n private debounce?: number = null;\n\n @Watch('buttonBg')\n @Watch('buttonColor')\n debouncedFunction() {\n if (this.debounce !== null) {\n clearTimeout(this.debounce);\n this.debounce = null;\n }\n\n this.debounce = window.setTimeout(() => {\n this.checkColorAccessibility();\n this.debounce = null;\n }, 1500);\n }\n\n async checkColorAccessibility() {\n const defaultTextColor = '#fff';\n const defaultBgColor = '#c84e18';\n const firstColor = this.buttonBg.length ? (this.buttonBg.startsWith('#') ? this.buttonBg : `#${this.buttonBg}`) : defaultBgColor;\n const secondColor = this.buttonColor.length ? (this.buttonColor.startsWith('#') ? this.buttonColor : `#${this.buttonColor}`) : defaultTextColor;\n fetch('https://www.aremycolorsaccessible.com/api/are-they', {\n mode: 'cors',\n method: 'POST',\n body: JSON.stringify({ colors: [firstColor, secondColor] }),\n })\n .then(response => response.json())\n .then(json => {\n console.log(json);\n if (json && (json satisfies ColorAccessibility)) {\n this.colorAccessibility = json;\n }\n });\n // Your color accessibility logic here\n }\n\n getTopLevelCategory() {\n switch (process.env.BUSINESS as Business) {\n case Business.byggmax:\n return TopCategory.byggmax;\n default:\n return '';\n }\n }\n\n getColor(rating: string) {\n switch (rating) {\n case 'AAA':\n return 'green';\n case 'AA':\n return 'orange';\n case 'A':\n return 'yellow';\n case 'Fail':\n return 'red';\n default:\n return 'black';\n }\n }\n\n async componentWillLoad() {\n if (process.env.FORCE_OLD_TREE) {\n const tree = await getTaxonomy(this.getTopLevelCategory());\n if ((tree as any)?.code === 'not_found') {\n // console.warn('tree not found');\n } else if (tree) {\n this.tree = tree as Category;\n }\n } else {\n const customer = await getCustomer(process.env.BUSINESS);\n if (customer.code !== 'not_found' && customer) {\n this.customer = customer;\n }\n }\n }\n\n getExample() {\n return `<hemfixarna-${process.env.BUSINESS}${this.selectedSlug ? ` slug=\"${this.selectedSlug}\" ` : ''}${this.selectedID ? ` id=\"${this.selectedID}\" ` : ''} ${\n this.widgetStyle === WidgetStyle.standard ? '' : `widgetStyle=\"${this.widgetStyle}\"`\n } ${this.buttonColor.length ? `buttonColor=\"${this.buttonColor}\"` : ''} ${this.buttonBg.length ? `buttonBg=\"${this.buttonBg}\"` : ''}></hemfixarna-${process.env.BUSINESS}>`;\n }\n\n copyExample() {\n navigator.clipboard.writeText(this.getExample());\n this.tooltipText = 'Snippet kopierad';\n setTimeout(() => {\n this.tooltipText = 'Kopiera till urklipp';\n }, 2000);\n }\n\n cdnLink = '<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm//hemfixarna-web-components@latest/dist/hemfixarna-components/hemfixarna-components.esm.js\"></script>';\n\n copyCdn() {\n navigator.clipboard.writeText(this.cdnLink);\n this.tooltipText = 'Text kopierad';\n setTimeout(() => {\n this.tooltipText = 'Kopiera till urklipp';\n }, 2000);\n }\n\n copyNpmInstall() {\n navigator.clipboard.writeText('npm i hemfixarna-web-components');\n this.tooltipText = 'Text kopierad';\n setTimeout(() => {\n this.tooltipText = 'Kopiera till urklipp';\n }, 2000);\n }\n\n showMaleri() {\n const allCategories = this.customer?.categories.map(c => (c.sub_categories ? c.sub_categories : c)).flat();\n return allCategories?.some(c => c.add_painting);\n }\n\n render() {\n const copy = getAssetPath(`./assets/copy.png`);\n\n return (\n <div>\n <div>\n <div onClick={() => this.copyExample()} class=\"hemfixarna_example\">\n <p>{this.getExample()}</p>\n <img src={copy} height={20} />\n <span class=\"hemfixarna_example--tooltip\">{this.tooltipText}</span>\n </div>\n {(process.env.BUSINESS as Business) === Business.byggmax && (\n <hemfixarna-byggmax\n buttonColor={this.buttonColor}\n buttonBg={this.buttonBg}\n widgetStyle={this.widgetStyle}\n forceOldTree={Boolean(process.env.FORCE_OLD_TREE)}\n slug={this.selectedSlug}\n id={this.selectedID}\n />\n )}\n {(process.env.BUSINESS as Business) === Business.skanska && (\n <hemfixarna-skanska buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.string && (\n <hemfixarna-string-furniture buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.hornbach && (\n <hemfixarna-hornbach isDemo buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.forebygg && (\n <hemfixarna-forebygg buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.doro && (\n <hemfixarna-doro buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.elfa && (\n <hemfixarna-elfa isDemo buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.kund && (\n <hemfixarna-kund buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n <div class=\"hemfixarna_install\">\n <div onClick={() => this.copyCdn()} class=\"hemfixarna_example\">\n <p>{this.cdnLink}</p>\n <span class=\"hemfixarna_example--tooltip\">{this.tooltipText}</span>\n <img src={copy} height={20} />\n </div>\n </div>\n <div class=\"hemfixarna_widgetstyles\">\n <h5>Widget styles</h5>\n <div>\n {Object.values(WidgetStyle).map(style => (\n <label key={style}>\n <input type=\"radio\" value={style} checked={this.widgetStyle === style} onChange={() => (this.widgetStyle = style)} />\n {style}\n </label>\n ))}\n </div>\n <div>\n <div>\n <h5>Button background color</h5>\n <input type=\"text\" value={this.buttonBg} onInput={e => (this.buttonBg = (e.target as HTMLInputElement).value)} />\n </div>\n <div>\n <h5>Button text color</h5>\n <input type=\"text\" value={this.buttonColor} onInput={e => (this.buttonColor = (e.target as HTMLInputElement).value)} />\n </div>\n </div>\n </div>\n <span>Write an hexa code no # needed</span>\n {this.colorAccessibility ? (\n <div>\n <h5>Tillgänglighetsrapport</h5>\n <div>\n <strong>Liten text:</strong>\n <span style={{ color: this.getColor(this.colorAccessibility.small) }}>{this.colorAccessibility.small}</span>\n <br />\n <strong>Fet text:</strong>\n <span style={{ color: this.getColor(this.colorAccessibility.bold) }}>{this.colorAccessibility.bold}</span>\n <br />\n <strong>Stor text:</strong>\n <span style={{ color: this.getColor(this.colorAccessibility.large) }}>{this.colorAccessibility.large}</span>\n <br />\n <strong>Kontrastförhållande:</strong> {this.colorAccessibility.contrast}\n </div>\n </div>\n ) : null}\n </div>\n <ul class=\"hemfixarna_categories\">\n {this.customer ? (\n <div>\n {this.showMaleri() ? (\n <li>\n <div class=\"hemfixarna_categories--label hemfixarna_categories--label--big\">\n <div>\n <p>Måleriverktyget</p>\n <span>maleri</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText('maleri')}>Kopiera slug</button>\n <button onClick={() => (this.selectedID = 'maleri')}>Ladda måleri</button>\n </div>\n </div>\n </li>\n ) : null}\n {this.customer.categories.map(c => (\n <li>\n <div class=\"hemfixarna_categories--label hemfixarna_categories--label--big\">\n <div>\n <p>{c.name}</p>\n <span>{`c-${c.id}`}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(`c-${c.id}`)}>Kopiera ID</button>\n <button onClick={() => (this.selectedID = `c-${c.id}`)}>Ladda kategori</button>\n </div>\n </div>\n {c.show_products && c.products ? (\n <ul>\n {c.products.map(p => (\n <li>\n <div class=\"hemfixarna_categories--label hemfixarna_product--label\">\n <div>\n <p>{p.fields.post_title}</p>\n <span>{p.fields.ID}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(String(p.fields.ID))}>Kopiera ID</button>\n <button onClick={() => (this.selectedID = String(p.fields.ID))}>Ladda produkt</button>\n </div>\n </div>\n </li>\n ))}\n </ul>\n ) : (\n <ul>\n {c.sub_categories &&\n c.sub_categories.map(sc => (\n <li>\n <div class=\"hemfixarna_categories--label\">\n <div>\n <p>{sc.name}</p>\n <span>{`c-${sc.id}`}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(`c-${sc.id}`)}>Kopiera ID</button>\n <button onClick={() => (this.selectedID = `c-${sc.id}`)}>Ladda kategori</button>\n </div>\n </div>\n <ul>\n {sc.products.map(p => (\n <li>\n <div class=\"hemfixarna_categories--label hemfixarna_product--label\">\n <div>\n <p>{p.fields.post_title}</p>\n <span>{p.fields.ID}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(String(p.fields.ID))}>Kopiera ID</button>\n <button onClick={() => (this.selectedID = String(p.fields.ID))}>Ladda produkt</button>\n </div>\n </div>\n </li>\n ))}\n </ul>\n </li>\n ))}\n </ul>\n )}\n </li>\n ))}\n </div>\n ) : this.tree ? (\n <div>\n {this.tree.sub_cats.map(c => (\n <li>\n <div class=\"hemfixarna_categories--label hemfixarna_categories--label--big\">\n <div>\n <p>{c.name}</p>\n <span>{`category/${c.slug}`}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(`category/${c.slug}`)}>Kopiera slug</button>\n <button onClick={() => (this.selectedSlug = `category/${c.slug}`)}>Ladda kategori</button>\n </div>\n </div>\n <ul>\n {c.services.map(sc => (\n <li>\n <div class=\"hemfixarna_categories--label\">\n <div>\n <p>{sc.post_title}</p>\n <span>{`service/${sc.post_name}`}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(`service/${sc.post_name}`)}>Kopiera slug</button>\n <button onClick={() => (this.selectedSlug = `service/${sc.post_name}`)}>Ladda kategori</button>\n </div>\n </div>\n <ul>\n {sc.products.map(sc => (\n <li>\n <div class=\"hemfixarna_categories--label\">\n <div>\n <p>{sc.post_title}</p>\n <span>{`product/${sc.post_name}`}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(`product/${sc.post_name}`)}>Kopiera slug</button>\n <button onClick={() => (this.selectedSlug = `product/${sc.post_name}`)}>Ladda produkt</button>\n </div>\n </div>\n </li>\n ))}\n </ul>\n </li>\n ))}\n </ul>\n </li>\n ))}\n </div>\n ) : null}\n </ul>\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"hemfixarna-demo.js","sourceRoot":"","sources":["../../../src/components/hemfixarna-demo/hemfixarna-demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Watch, getAssetPath, h } from '@stencil/core';\nimport { Business, Category, Customer, TopCategory, WidgetStyle } from '../../types';\nimport { getCustomer, getTaxonomy } from '../../utils/api';\n\ninterface ColorAccessibility {\n small: string;\n bold: string;\n large: string;\n overall: string;\n contrast: string;\n}\n\n@Component({\n tag: 'hemfixarna-demo',\n styleUrl: 'hemfixarna-demo.scss',\n shadow: true,\n})\nexport class MyComponent {\n @State() selectedSlug: string;\n @State() selectedID: string;\n @State() tooltipText: string = 'Kopiera till urklipp';\n @State() tree: Category | null = null;\n @State() customer: Customer | null = null;\n @State() widgetStyle: WidgetStyle = WidgetStyle.standard;\n @State() buttonBg: string = '';\n @State() buttonColor: string = '';\n @State() colorAccessibility?: ColorAccessibility = undefined;\n private debounce?: number = null;\n\n @Watch('buttonBg')\n @Watch('buttonColor')\n debouncedFunction() {\n if (this.debounce !== null) {\n clearTimeout(this.debounce);\n this.debounce = null;\n }\n\n this.debounce = window.setTimeout(() => {\n this.checkColorAccessibility();\n this.debounce = null;\n }, 1500);\n }\n\n async checkColorAccessibility() {\n const defaultTextColor = '#fff';\n const defaultBgColor = '#c84e18';\n const firstColor = this.buttonBg.length ? (this.buttonBg.startsWith('#') ? this.buttonBg : `#${this.buttonBg}`) : defaultBgColor;\n const secondColor = this.buttonColor.length ? (this.buttonColor.startsWith('#') ? this.buttonColor : `#${this.buttonColor}`) : defaultTextColor;\n fetch('https://www.aremycolorsaccessible.com/api/are-they', {\n mode: 'cors',\n method: 'POST',\n body: JSON.stringify({ colors: [firstColor, secondColor] }),\n })\n .then(response => response.json())\n .then(json => {\n console.log(json);\n if (json && (json satisfies ColorAccessibility)) {\n this.colorAccessibility = json;\n }\n });\n // Your color accessibility logic here\n }\n\n getTopLevelCategory() {\n switch (process.env.BUSINESS as Business) {\n case Business.byggmax:\n return TopCategory.byggmax;\n default:\n return '';\n }\n }\n\n getColor(rating: string) {\n switch (rating) {\n case 'AAA':\n return 'green';\n case 'AA':\n return 'orange';\n case 'A':\n return 'yellow';\n case 'Fail':\n return 'red';\n default:\n return 'black';\n }\n }\n\n async componentWillLoad() {\n if (process.env.FORCE_OLD_TREE) {\n const tree = await getTaxonomy(this.getTopLevelCategory());\n if ((tree as any)?.code === 'not_found') {\n // console.warn('tree not found');\n } else if (tree) {\n this.tree = tree as Category;\n }\n } else {\n const customer = await getCustomer(process.env.BUSINESS);\n if (customer.code !== 'not_found' && customer) {\n this.customer = customer;\n }\n }\n }\n\n getExample() {\n return `<hemfixarna-${process.env.BUSINESS}${this.selectedSlug ? ` slug=\"${this.selectedSlug}\" ` : ''}${this.selectedID ? ` id=\"${this.selectedID}\" ` : ''} ${\n this.widgetStyle === WidgetStyle.standard ? '' : `widgetStyle=\"${this.widgetStyle}\"`\n } ${this.buttonColor.length ? `button-color=\"${this.buttonColor}\"` : ''} ${this.buttonBg.length ? `button-bg=\"${this.buttonBg}\"` : ''}></hemfixarna-${process.env.BUSINESS}>`;\n }\n\n copyExample() {\n navigator.clipboard.writeText(this.getExample());\n this.tooltipText = 'Snippet kopierad';\n setTimeout(() => {\n this.tooltipText = 'Kopiera till urklipp';\n }, 2000);\n }\n\n cdnLink = '<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm//hemfixarna-web-components@latest/dist/hemfixarna-components/hemfixarna-components.esm.js\"></script>';\n\n copyCdn() {\n navigator.clipboard.writeText(this.cdnLink);\n this.tooltipText = 'Text kopierad';\n setTimeout(() => {\n this.tooltipText = 'Kopiera till urklipp';\n }, 2000);\n }\n\n copyNpmInstall() {\n navigator.clipboard.writeText('npm i hemfixarna-web-components');\n this.tooltipText = 'Text kopierad';\n setTimeout(() => {\n this.tooltipText = 'Kopiera till urklipp';\n }, 2000);\n }\n\n showMaleri() {\n const allCategories = this.customer?.categories.map(c => (c.sub_categories ? c.sub_categories : c)).flat();\n return allCategories?.some(c => c.add_painting);\n }\n\n render() {\n const copy = getAssetPath(`./assets/copy.png`);\n\n return (\n <div>\n <div>\n <div onClick={() => this.copyExample()} class=\"hemfixarna_example\">\n <p>{this.getExample()}</p>\n <img src={copy} height={20} />\n <span class=\"hemfixarna_example--tooltip\">{this.tooltipText}</span>\n </div>\n {(process.env.BUSINESS as Business) === Business.byggmax && (\n <hemfixarna-byggmax\n buttonColor={this.buttonColor}\n buttonBg={this.buttonBg}\n widgetStyle={this.widgetStyle}\n forceOldTree={Boolean(process.env.FORCE_OLD_TREE)}\n slug={this.selectedSlug}\n id={this.selectedID}\n />\n )}\n {(process.env.BUSINESS as Business) === Business.skanska && (\n <hemfixarna-skanska buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.string && (\n <hemfixarna-string-furniture buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.hornbach && (\n <hemfixarna-hornbach isDemo buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.forebygg && (\n <hemfixarna-forebygg buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.doro && (\n <hemfixarna-doro buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.elfa && (\n <hemfixarna-elfa isDemo buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n {(process.env.BUSINESS as Business) === Business.kund && (\n <hemfixarna-kund buttonColor={this.buttonColor} buttonBg={this.buttonBg} widgetStyle={this.widgetStyle} id={this.selectedID} />\n )}\n <div class=\"hemfixarna_install\">\n <div onClick={() => this.copyCdn()} class=\"hemfixarna_example\">\n <p>{this.cdnLink}</p>\n <span class=\"hemfixarna_example--tooltip\">{this.tooltipText}</span>\n <img src={copy} height={20} />\n </div>\n </div>\n <div class=\"hemfixarna_widgetstyles\">\n <h5>Widget styles</h5>\n <div>\n {Object.values(WidgetStyle).map(style => (\n <label key={style}>\n <input type=\"radio\" value={style} checked={this.widgetStyle === style} onChange={() => (this.widgetStyle = style)} />\n {style}\n </label>\n ))}\n </div>\n <div>\n <div>\n <h5>Button background color</h5>\n <input type=\"text\" value={this.buttonBg} onInput={e => (this.buttonBg = (e.target as HTMLInputElement).value)} />\n </div>\n <div>\n <h5>Button text color</h5>\n <input type=\"text\" value={this.buttonColor} onInput={e => (this.buttonColor = (e.target as HTMLInputElement).value)} />\n </div>\n </div>\n </div>\n <span>Write an hexa code no # needed</span>\n {this.colorAccessibility ? (\n <div>\n <h5>Tillgänglighetsrapport</h5>\n <div>\n <strong>Liten text:</strong>\n <span style={{ color: this.getColor(this.colorAccessibility.small) }}>{this.colorAccessibility.small}</span>\n <br />\n <strong>Fet text:</strong>\n <span style={{ color: this.getColor(this.colorAccessibility.bold) }}>{this.colorAccessibility.bold}</span>\n <br />\n <strong>Stor text:</strong>\n <span style={{ color: this.getColor(this.colorAccessibility.large) }}>{this.colorAccessibility.large}</span>\n <br />\n <strong>Kontrastförhållande:</strong> {this.colorAccessibility.contrast}\n </div>\n </div>\n ) : null}\n </div>\n <ul class=\"hemfixarna_categories\">\n {this.customer ? (\n <div>\n {this.showMaleri() ? (\n <li>\n <div class=\"hemfixarna_categories--label hemfixarna_categories--label--big\">\n <div>\n <p>Måleriverktyget</p>\n <span>maleri</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText('maleri')}>Kopiera slug</button>\n <button onClick={() => (this.selectedID = 'maleri')}>Ladda måleri</button>\n </div>\n </div>\n </li>\n ) : null}\n {this.customer.categories.map(c => (\n <li>\n <div class=\"hemfixarna_categories--label hemfixarna_categories--label--big\">\n <div>\n <p>{c.name}</p>\n <span>{`c-${c.id}`}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(`c-${c.id}`)}>Kopiera ID</button>\n <button onClick={() => (this.selectedID = `c-${c.id}`)}>Ladda kategori</button>\n </div>\n </div>\n {c.show_products && c.products ? (\n <ul>\n {c.products.map(p => (\n <li>\n <div class=\"hemfixarna_categories--label hemfixarna_product--label\">\n <div>\n <p>{p.fields.post_title}</p>\n <span>{p.fields.ID}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(String(p.fields.ID))}>Kopiera ID</button>\n <button onClick={() => (this.selectedID = String(p.fields.ID))}>Ladda produkt</button>\n </div>\n </div>\n </li>\n ))}\n </ul>\n ) : (\n <ul>\n {c.sub_categories &&\n c.sub_categories.map(sc => (\n <li>\n <div class=\"hemfixarna_categories--label\">\n <div>\n <p>{sc.name}</p>\n <span>{`c-${sc.id}`}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(`c-${sc.id}`)}>Kopiera ID</button>\n <button onClick={() => (this.selectedID = `c-${sc.id}`)}>Ladda kategori</button>\n </div>\n </div>\n <ul>\n {sc.products.map(p => (\n <li>\n <div class=\"hemfixarna_categories--label hemfixarna_product--label\">\n <div>\n <p>{p.fields.post_title}</p>\n <span>{p.fields.ID}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(String(p.fields.ID))}>Kopiera ID</button>\n <button onClick={() => (this.selectedID = String(p.fields.ID))}>Ladda produkt</button>\n </div>\n </div>\n </li>\n ))}\n </ul>\n </li>\n ))}\n </ul>\n )}\n </li>\n ))}\n </div>\n ) : this.tree ? (\n <div>\n {this.tree.sub_cats.map(c => (\n <li>\n <div class=\"hemfixarna_categories--label hemfixarna_categories--label--big\">\n <div>\n <p>{c.name}</p>\n <span>{`category/${c.slug}`}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(`category/${c.slug}`)}>Kopiera slug</button>\n <button onClick={() => (this.selectedSlug = `category/${c.slug}`)}>Ladda kategori</button>\n </div>\n </div>\n <ul>\n {c.services.map(sc => (\n <li>\n <div class=\"hemfixarna_categories--label\">\n <div>\n <p>{sc.post_title}</p>\n <span>{`service/${sc.post_name}`}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(`service/${sc.post_name}`)}>Kopiera slug</button>\n <button onClick={() => (this.selectedSlug = `service/${sc.post_name}`)}>Ladda kategori</button>\n </div>\n </div>\n <ul>\n {sc.products.map(sc => (\n <li>\n <div class=\"hemfixarna_categories--label\">\n <div>\n <p>{sc.post_title}</p>\n <span>{`product/${sc.post_name}`}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(`product/${sc.post_name}`)}>Kopiera slug</button>\n <button onClick={() => (this.selectedSlug = `product/${sc.post_name}`)}>Ladda produkt</button>\n </div>\n </div>\n </li>\n ))}\n </ul>\n </li>\n ))}\n </ul>\n </li>\n ))}\n </div>\n ) : null}\n </ul>\n </div>\n );\n }\n}\n"]}
|