hemfixarna-web-components 1.2.2 → 1.2.4

package/dist/collection/components/hemfixarna-component/hemfixarna.css

@@ -7,7 +7,7 @@
   font-family: "Inter", sans-serif;
 }
 :host .mb-2 {
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
 }
 :host button {
   color: #474444;
@@ -15,7 +15,7 @@
 :host form {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 16px;
 }
 :host form img {
   position: absolute;
@@ -24,13 +24,13 @@
   pointer-events: none;
 }
 :host form img:first-of-type {
-  left: 1rem;
+  left: 16px;
 }
 :host form img:last-of-type {
-  right: 1rem;
+  right: 16px;
 }
 :host form span {
-  margin-top: -0.5rem;
+  margin-top: -8px;
   color: #ec6632;
 }
 :host form p {
@@ -45,17 +45,17 @@
 :host form div label {
   pointer-events: none;
   position: absolute;
-  left: 1rem;
+  left: 16px;
   top: 50%;
   transform: translateY(-50%);
   background: #fff;
-  padding: 0.25rem;
+  padding: 4px;
   transition: 0.2s all cubic-bezier(0.465, 0.183, 0.153, 0.946);
 }
 :host form div input {
-  padding: 1rem;
+  padding: 16px;
   width: 100%;
-  font-size: 1rem;
+  font-size: 16px;
   border: 1px solid #fcd9c9;
 }
 :host form div input:focus ~ label,
@@ -70,10 +70,10 @@
   line-height: 32px;
   letter-spacing: -3%;
   text-align: left;
-  margin: 0 0 0.5rem;
+  margin: 0 0 8px;
 }
 :host h2 {
-  margin: 0 0 1.5rem;
+  margin: 0 0 24px;
   font-weight: 700;
   font-size: 20px;
   line-height: 28px;
@@ -110,8 +110,8 @@
   color: #ec6632;
   text-decoration: none;
   border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 3.5rem;
-  padding: 0.5rem 2rem;
+  border-radius: 56px;
+  padding: 8px 32px;
 }
 :host .hemfixarna_nav > div {
   position: relative;
@@ -121,16 +121,16 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 1rem;
+  padding: 0 16px;
 }
 @media (min-width: 769px) {
   :host .hemfixarna_nav > div {
-    padding: 0 2rem;
+    padding: 0 32px;
   }
 }
 :host .hemfixarna_nav > div > div {
   display: flex;
-  gap: 2rem;
+  gap: 32px;
   justify-content: space-between;
 }
 :host .hemfixarna_nav > div > img {
@@ -207,7 +207,7 @@
 }
 :host .hemfixarna_checkbox {
   display: grid;
-  grid-template-columns: 2.5rem auto;
+  grid-template-columns: 40px auto;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
@@ -227,10 +227,10 @@
 :host .hemfixarna_info {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
-  padding: 2rem;
+  gap: 24px;
+  padding: 32px;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);
-  border-radius: 0.25rem;
+  border-radius: 4px;
   border: 1px solid #fcd9c9;
 }
 :host .hemfixarna_info h2 {
@@ -251,13 +251,13 @@
   max-width: 80%;
   background: #fffaf2;
   border: 1px solid #fcd9c9;
-  padding: 2rem;
+  padding: 32px;
   z-index: 99;
-  border-radius: 0.25rem;
+  border-radius: 4px;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 16px;
 }
 :host .hemfixarna_infomodal p,
 :host .hemfixarna_infomodal h4 {
@@ -268,16 +268,16 @@
   color: #fff;
   border-radius: 60px;
   font-size: 16px;
-  padding: 0.5rem 1rem;
+  padding: 8px 16px;
 }
 :host .hemfixarna_addressinfo {
-  padding: 1rem 1rem 4rem;
+  padding: 16px 16px 64px;
   border: 1px solid #fcd9c9;
   position: relative;
-  margin-bottom: 2rem;
+  margin-bottom: 32px;
   display: grid;
   grid-template-columns: 1fr;
-  gap: 0.5rem;
+  gap: 8px;
 }
 @media (min-width: 769px) {
   :host .hemfixarna_addressinfo {
@@ -286,8 +286,8 @@
 }
 :host .hemfixarna_addressinfo button {
   position: absolute;
-  bottom: 1rem;
-  right: 1rem;
+  bottom: 16px;
+  right: 16px;
   font-weight: 500;
   text-underline-offset: 2px;
   text-decoration: underline;
@@ -296,7 +296,7 @@
   background: #fff;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);
   display: grid;
-  padding: 1rem;
+  padding: 16px;
   grid-template-columns: auto 75px;
 }
 :host .hemfixarna_counter {
@@ -304,7 +304,7 @@
   align-items: center;
 }
 :host .hemfixarna_counter span {
-  padding: 0 0.5rem;
+  padding: 0 8px;
 }
 :host .hemfixarna_counter img {
   cursor: pointer;
@@ -317,12 +317,12 @@
 }
 :host .hemfixarna_description {
   display: grid;
-  gap: 1rem;
+  gap: 16px;
 }
 :host .hemfixarna_description ul {
   list-style: disc;
-  padding-right: 0.75rem;
-  transform: translateX(0.75rem);
+  padding-right: 12px;
+  transform: translateX(12px);
 }
 :host .hemfixarna_description--hidden {
   max-height: 140px;
@@ -336,7 +336,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 8rem;
+  height: 128px;
   background: linear-gradient(180deg, rgba(255, 253, 250, 0), rgba(255, 253, 250, 0.46) 50%, #fffaf2);
 }
 :host .hemfixarna_terms {
@@ -346,10 +346,10 @@
   color: inherit;
 }
 :host .hemfixarna_logo {
-  height: 4rem;
+  height: 64px;
 }
 :host .hemfixarna_box {
-  padding: 1rem;
+  padding: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -357,12 +357,12 @@
   border: 1px solid #fcd9c9;
   width: 100%;
   box-sizing: border-box;
-  border-radius: 0.25rem;
-  gap: 1rem 0.5rem;
+  border-radius: 4px;
+  gap: 16px 8px;
 }
 :host .hemfixarna_box > div {
   display: grid;
-  gap: 0.5rem;
+  gap: 8px;
 }
 :host .hemfixarna_btn, :host .hemfixarna_buy,
 :host .hemfixarna input[type=submit] {
@@ -384,7 +384,7 @@
   font-size: 14px;
   background: #c84e18;
   color: #fff;
-  padding: 1rem 1.5rem;
+  padding: 16px 24px;
   white-space: nowrap;
   position: relative;
 }
@@ -400,8 +400,8 @@
   font-weight: 600;
   font-size: 13px;
   line-height: 11px;
-  top: -0.5rem;
-  right: -0.75rem;
+  top: -8px;
+  right: -12px;
 }
 :host .hemfixarna_btn span {
   background: #25a710;
@@ -413,7 +413,7 @@
   font-size: 21px;
   background: #25a710;
   color: #fff;
-  padding: 1rem 1.5rem;
+  padding: 16px 24px;
 }
 :host .hemfixarna .disabled {
   opacity: 0.5;
@@ -423,7 +423,7 @@
   position: fixed;
   background: #fffaf2;
   border: 1px solid #fcd9c9;
-  border-radius: 0.25rem;
+  border-radius: 4px;
   top: 50%;
   left: 50%;
   z-index: 1000;
@@ -435,7 +435,7 @@
   max-width: 920px;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 8px;
 }
 :host .hemfixarna_modal--open {
   opacity: 1;
@@ -466,7 +466,7 @@
   background-position: center !important;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  padding: 3rem 2rem 4rem;
+  padding: 48px 32px 64px;
 }
 @media (max-width: 768px) {
   :host .hemfixarna_order {
@@ -476,7 +476,7 @@
 }
 :host .hemfixarna_order > div:last-of-type {
   background: #fffaf2;
-  padding: 2rem;
+  padding: 32px;
   display: flex;
   flex-direction: column;
   max-height: 100%;
@@ -486,7 +486,7 @@
   cursor: pointer;
 }
 :host .hemfixarna_order button {
-  margin: 1rem 0;
+  margin: 16px 0;
   padding: 0;
   text-decoration: underline;
   text-underline-offset: 2px;
@@ -496,7 +496,7 @@
 :host .hemfixarna_cart {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 2rem;
+  gap: 32px;
 }
 @media (max-width: 768px) {
   :host .hemfixarna_cart {
@@ -509,7 +509,7 @@
   align-items: center;
 }
 :host .hemfixarna_cart--right h2 img, :host .hemfixarna_cart--left h2 img {
-  margin-top: 0.2rem;
+  margin-top: 3.2px;
 }
 @media (min-width: 769px) {
   :host .hemfixarna_cart--left h2 button {
@@ -531,14 +531,14 @@
 }
 :host .hemfixarna_cart--rutrot div {
   display: flex;
-  gap: 1rem;
+  gap: 16px;
   align-items: center;
 }
 :host .hemfixarna_cart--additional {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding: 1rem;
+  gap: 16px;
+  padding: 16px;
   border-top: 1px solid #fcd9c9;
 }
 :host .hemfixarna_cart--additional p {
@@ -554,11 +554,11 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  right: -1.5rem;
+  right: -24px;
 }
 :host .hemfixarna_cart--price {
   border-top: 1px solid #fcd9c9;
-  padding: 1rem;
+  padding: 16px;
   display: flex;
   justify-content: space-between;
 }
@@ -568,8 +568,8 @@
 :host .hemfixarna_cart--item {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 1rem 0;
+  gap: 8px;
+  padding: 16px 0;
   border-top: 1px solid #fcd9c9;
 }
 :host .hemfixarna_cart--item > div {
@@ -579,17 +579,17 @@
 :host .hemfixarna_cart--item > div > div {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 16px;
 }
 :host .hemfixarna_cart--item > div button {
   color: #ec6632;
 }
 :host .hemfixarna_categories {
   display: grid;
-  gap: 1.5rem;
+  gap: 24px;
 }
 :host .hemfixarna_categories--wrapper {
-  gap: 2rem;
+  gap: 32px;
   display: grid;
   grid-template-columns: 1fr 1fr;
 }
@@ -601,13 +601,13 @@
 :host .hemfixarna_categories li {
   position: relative;
   background: #fff;
-  border-radius: 0.25rem;
+  border-radius: 4px;
   min-height: 132px;
-  padding: 1.5rem;
+  padding: 24px;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);
   display: flex;
   align-items: center;
-  gap: 1.5rem;
+  gap: 24px;
   cursor: pointer;
 }
 :host .hemfixarna_categories li:hover {
@@ -626,23 +626,23 @@
 :host .hemfixarna_content {
   height: 100%;
   overflow: auto;
-  padding: 0 2rem 4rem;
+  padding: 0 32px 64px;
 }
 :host .hemfixarna_content--5 {
-  padding-top: 1rem;
+  padding-top: 16px;
 }
 :host .hemfixarna_crumbs {
   position: relative;
-  padding: 1rem 1.5rem;
+  padding: 16px 24px;
   border-bottom: 1px solid #fcd9c9;
   display: flex;
   justify-content: space-between;
 }
 :host .hemfixarna_crumbs--back {
-  padding: 1rem 1.5rem 0.5rem;
+  padding: 16px 24px 8px;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 8px;
   box-shadow: none !important;
 }
 :host .hemfixarna_crumbs--back:hover {
@@ -656,12 +656,12 @@
 }
 :host .hemfixarna_crumbs .close {
   position: absolute;
-  right: -1rem;
-  top: -1rem;
+  right: -16px;
+  top: -16px;
   z-index: 9;
 }
 :host .hemfixarna_crumbs .cart {
-  padding-left: 1rem;
+  padding-left: 16px;
   position: relative;
 }
 :host .hemfixarna_crumbs .cart img {
@@ -679,8 +679,8 @@
   font-weight: 600;
   font-size: 13px;
   line-height: 11px;
-  top: -0.5rem;
-  right: -0.75rem;
+  top: -8px;
+  right: -12px;
 }
 :host .hemfixarna_crumbs .cart_active {
   cursor: pointer;
@@ -692,7 +692,7 @@
 :host .hemfixarna_crumbs--links {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 16px;
   overflow: auto;
 }
 @media (min-width: 769px) {
@@ -709,8 +709,8 @@
 :host .hemfixarna_crumbs button {
   white-space: nowrap;
   background: #f1ded6;
-  border-radius: 4rem;
-  padding: 0.75rem 1rem;
+  border-radius: 64px;
+  padding: 12px 16px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.3px;
@@ -727,44 +727,44 @@
   cursor: default;
 }
 :host .hemfixarna_features {
-  gap: 0.75rem !important;
+  gap: 12px !important;
 }
 :host .hemfixarna_features li {
   display: flex;
-  gap: 1rem;
+  gap: 16px;
   align-items: center;
 }
 :host .hemfixarna_address {
-  margin-bottom: 1rem;
+  margin-bottom: 16px;
 }
 :host .hemfixarna_product {
   display: grid;
-  gap: 1rem;
+  gap: 16px;
 }
 :host .hemfixarna_product--link {
   font-weight: 700;
   color: #474444;
-  text-underline-offset: 0.25rem;
+  text-underline-offset: 4px;
 }
 :host .hemfixarna_product--left {
-  gap: 2rem;
+  gap: 32px;
 }
 :host .hemfixarna_product--right {
-  gap: 2rem;
+  gap: 32px;
 }
 :host .hemfixarna_product--price {
-  margin-top: 0.25rem;
+  margin-top: 4px;
   font-weight: 700;
 }
 :host .hemfixarna_product--total {
   text-align: center;
-  margin: -1rem 0;
+  margin: -16px 0;
   font-size: 21px;
   line-height: 28px;
 }
 :host .hemfixarna_product--item {
   background: #fff;
-  padding: 1rem;
+  padding: 16px;
   display: grid;
   grid-template-columns: auto 75px;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863);
@@ -772,7 +772,7 @@
 :host .hemfixarna_product--grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 2rem;
+  gap: 32px;
 }
 @media (max-width: 768px) {
   :host .hemfixarna_product--grid {
@@ -786,14 +786,14 @@
 :host .hemfixarna_product--grid ul {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 4px;
 }
 :host .hemfixarna_product p {
   margin: 0;
 }
 :host .hemfixarna_product--top {
   display: flex;
-  gap: 2rem;
+  gap: 32px;
 }
 :host .hemfixarna_product--top > div {
   width: 100%;
@@ -807,7 +807,7 @@
   }
 }
 :host .hemfixarna_product--top h4 {
-  margin-bottom: 0.5rem;
+  margin-bottom: 8px;
 }
 :host h5,
 :host p {
@@ -817,15 +817,15 @@
   cursor: pointer;
 }
 :host input[type=date] ~ label {
-  left: 3.5rem;
+  left: 56px;
 }
 :host input[type=date] {
   border: 1px solid #fcd9c9;
-  padding-left: 4rem;
+  padding-left: 64px;
 }
 :host input[type=checkbox] {
-  height: 1.125rem;
-  width: 1.125rem;
+  height: 18px;
+  width: 18px;
   border: 1px solid #fcd9c9;
 }
 :host input[type=checkbox]:checked {

package/dist/collection/components/hemfixarna-demo/hemfixarna-demo.css

@@ -3,9 +3,9 @@
   font-family: "Inter", sans-serif;
 }
 :host .hemfixarna_example {
-  margin-bottom: 1rem;
+  margin-bottom: 16px;
   background: #000;
-  padding: 1rem;
+  padding: 16px;
   color: #fff;
   display: flex;
   justify-content: space-between;
@@ -16,11 +16,11 @@
 }
 :host .hemfixarna_example--tooltip {
   background: #000;
-  top: -3rem;
+  top: -48px;
   font-size: 16px;
   left: 40%;
   color: white;
-  padding: 0.5rem;
+  padding: 8px;
   position: absolute;
   opacity: 0;
 }
@@ -45,8 +45,8 @@
 }
 :host .hemfixarna_install {
   display: grid;
-  gap: 0.5rem;
-  margin-top: 1rem;
+  gap: 8px;
+  margin-top: 16px;
 }
 :host .hemfixarna_product--label {
   background: #e1e0f5;
@@ -60,15 +60,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem;
+  padding: 8px;
 }
 :host .hemfixarna_categories--label button {
   background: #3f3a92;
   border: none;
   font-weight: 600;
-  padding: 0.2rem 0.6rem;
+  padding: 3.2px 9.6px;
   border-radius: 10px;
-  margin-right: 0.5rem;
+  margin-right: 8px;
   color: #ece8e8;
 }
 :host .hemfixarna_categories--label button:active {
@@ -90,13 +90,13 @@
 }
 :host > div {
   display: grid;
-  gap: 2rem;
+  gap: 32px;
   width: 100%;
   grid-template-columns: 1fr 1fr;
   height: 100vh;
   place-items: center;
   overflow: hidden;
-  padding: 1rem 2rem;
+  padding: 16px 32px;
   box-sizing: border-box;
 }
 :host > div > * {
@@ -115,6 +115,6 @@
   display: grid;
 }
 :host > div ul li {
-  padding-left: 1rem;
+  padding-left: 16px;
   background: #fff;
 }

package/dist/collection/components/hemfixarna-demo/hemfixarna-demo.js

@@ -61,7 +61,7 @@ export class MyComponent {
   }
   render() {
     const copy = getAssetPath(`./assets/copy.png`);
-    return (h("div", null, h("div", null, h("div", { onClick: () => this.copyExample(), class: "hemfixarna_example" }, h("p", null, this.getExample()), h("img", { src: copy, height: 20 }), h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText)), process.env.BUSINESS === Business.byggmax && (h("hemfixarna-byggmax", { forceOldTree: Boolean(process.env.FORCE_OLD_TREE), slug: this.selectedSlug, id: this.selectedID })), process.env.BUSINESS === Business.skanska && h("hemfixarna-skanska", { id: this.selectedID }), process.env.BUSINESS === Business.string && h("hemfixarna-string-furniture", { id: this.selectedID }), process.env.BUSINESS === Business.hornbach && h("hemfixarna-hornbach", { id: this.selectedID }), process.env.BUSINESS === Business.kund && h("hemfixarna-kund", { id: this.selectedID }), h("div", { class: "hemfixarna_install" }, h("div", { onClick: () => this.copyCdn(), class: "hemfixarna_example" }, h("p", null, this.cdnLink), h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText), h("img", { src: copy, height: 20 })))), h("ul", { class: "hemfixarna_categories" }, this.customer ? (h("div", null, this.customer.categories.map(c => (h("li", null, h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, h("div", null, h("p", null, c.name), h("span", null, `c-${c.id}`)), h("div", null, h("button", { onClick: () => navigator.clipboard.writeText(`c-${c.id}`) }, "Kopiera ID"), h("button", { onClick: () => (this.selectedID = `c-${c.id}`) }, "Ladda kategori"))), c.show_products && c.products ? (h("ul", null, c.products.map(p => (h("li", null, h("div", { class: "hemfixarna_categories--label hemfixarna_product--label" }, h("div", null, h("p", null, p.fields.post_title), h("span", null, p.fields.ID)), h("div", null, h("button", { onClick: () => navigator.clipboard.writeText(String(p.fields.ID)) }, "Kopiera ID"), h("button", { onClick: () => (this.selectedID = String(p.fields.ID)) }, "Ladda produkt")))))))) : (h("ul", null, c.sub_categories &&
+    return (h("div", null, h("div", null, h("div", { onClick: () => this.copyExample(), class: "hemfixarna_example" }, h("p", null, this.getExample()), h("img", { src: copy, height: 20 }), h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText)), process.env.BUSINESS === Business.byggmax && (h("hemfixarna-byggmax", { forceOldTree: Boolean(process.env.FORCE_OLD_TREE), slug: this.selectedSlug, id: this.selectedID })), process.env.BUSINESS === Business.skanska && h("hemfixarna-skanska", { id: this.selectedID }), process.env.BUSINESS === Business.string && h("hemfixarna-string-furniture", { id: this.selectedID }), process.env.BUSINESS === Business.hornbach && h("hemfixarna-hornbach", { isDemo: true, id: this.selectedID }), process.env.BUSINESS === Business.kund && h("hemfixarna-kund", { id: this.selectedID }), h("div", { class: "hemfixarna_install" }, h("div", { onClick: () => this.copyCdn(), class: "hemfixarna_example" }, h("p", null, this.cdnLink), h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText), h("img", { src: copy, height: 20 })))), h("ul", { class: "hemfixarna_categories" }, this.customer ? (h("div", null, this.customer.categories.map(c => (h("li", null, h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, h("div", null, h("p", null, c.name), h("span", null, `c-${c.id}`)), h("div", null, h("button", { onClick: () => navigator.clipboard.writeText(`c-${c.id}`) }, "Kopiera ID"), h("button", { onClick: () => (this.selectedID = `c-${c.id}`) }, "Ladda kategori"))), c.show_products && c.products ? (h("ul", null, c.products.map(p => (h("li", null, h("div", { class: "hemfixarna_categories--label hemfixarna_product--label" }, h("div", null, h("p", null, p.fields.post_title), h("span", null, p.fields.ID)), h("div", null, h("button", { onClick: () => navigator.clipboard.writeText(String(p.fields.ID)) }, "Kopiera ID"), h("button", { onClick: () => (this.selectedID = String(p.fields.ID)) }, "Ladda produkt")))))))) : (h("ul", null, c.sub_categories &&
       c.sub_categories.map(sc => (h("li", null, h("div", { class: "hemfixarna_categories--label" }, h("div", null, h("p", null, sc.name), h("span", null, `c-${sc.id}`)), h("div", null, h("button", { onClick: () => navigator.clipboard.writeText(`c-${sc.id}`) }, "Kopiera ID"), h("button", { onClick: () => (this.selectedID = `c-${sc.id}`) }, "Ladda kategori"))), h("ul", null, sc.products.map(p => (h("li", null, h("div", { class: "hemfixarna_categories--label hemfixarna_product--label" }, h("div", null, h("p", null, p.fields.post_title), h("span", null, p.fields.ID)), h("div", null, h("button", { onClick: () => navigator.clipboard.writeText(String(p.fields.ID)) }, "Kopiera ID"), h("button", { onClick: () => (this.selectedID = String(p.fields.ID)) }, "Ladda produkt"))))))))))))))))) : (h("div", null, this.tree.sub_cats.map(c => (h("li", null, h("div", { class: "hemfixarna_categories--label hemfixarna_categories--label--big" }, h("div", null, h("p", null, c.name), h("span", null, `category/${c.slug}`)), h("div", null, h("button", { onClick: () => navigator.clipboard.writeText(`category/${c.slug}`) }, "Kopiera slug"), h("button", { onClick: () => (this.selectedSlug = `category/${c.slug}`) }, "Ladda kategori"))), h("ul", null, c.services.map(sc => (h("li", null, h("div", { class: "hemfixarna_categories--label" }, h("div", null, h("p", null, sc.post_title), h("span", null, `service/${sc.post_name}`)), h("div", null, h("button", { onClick: () => navigator.clipboard.writeText(`service/${sc.post_name}`) }, "Kopiera slug"), h("button", { onClick: () => (this.selectedSlug = `service/${sc.post_name}`) }, "Ladda kategori"))), h("ul", null, sc.products.map(sc => (h("li", null, h("div", { class: "hemfixarna_categories--label" }, h("div", null, h("p", null, sc.post_title), h("span", null, `product/${sc.post_name}`)), h("div", null, h("button", { onClick: () => navigator.clipboard.writeText(`product/${sc.post_name}`) }, "Kopiera slug"), h("button", { onClick: () => (this.selectedSlug = `product/${sc.post_name}`) }, "Ladda kategori")))))))))))))))))));
   }
   static get is() { return "hemfixarna-demo"; }