hemfixarna-web-components 0.3.1 → 0.9.2

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

@@ -0,0 +1,118 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap");
+:host {
+  font-family: "Inter", sans-serif;
+}
+:host .hemfixarna_example {
+  margin-bottom: 1rem;
+  background: #000;
+  padding: 1rem;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  max-width: 500px;
+  box-sizing: border-box;
+  position: relative;
+}
+:host .hemfixarna_example--tooltip {
+  background: #000;
+  top: -3rem;
+  font-size: 16px;
+  left: 40%;
+  color: white;
+  padding: 0.5rem;
+  position: absolute;
+  opacity: 0;
+}
+:host .hemfixarna_example--tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #000 transparent transparent transparent;
+}
+:host .hemfixarna_example:hover .hemfixarna_example--tooltip {
+  opacity: 1;
+}
+:host .hemfixarna_example p {
+  font-size: 14px;
+}
+:host .hemfixarna_example img {
+  filter: invert(1);
+}
+:host .hemfixarna_install {
+  display: grid;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+:host .hemfixarna_categories {
+  max-height: 100%;
+  overflow: auto;
+  position: relative;
+}
+:host .hemfixarna_categories--label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+}
+:host .hemfixarna_categories--label button {
+  background: #3f3a92;
+  border: none;
+  font-weight: 600;
+  padding: 0.2rem 0.6rem;
+  border-radius: 10px;
+  margin-right: 0.5rem;
+  color: #ece8e8;
+}
+:host .hemfixarna_categories--label button:active {
+  transform: scale(0.95);
+}
+:host .hemfixarna_categories--label--big {
+  font-weight: 600;
+  background: #9f9da9;
+}
+:host p {
+  margin: 0;
+}
+:host span {
+  color: darkolivegreen;
+  font-size: 10px;
+}
+:host button {
+  cursor: pointer;
+}
+:host > div {
+  display: grid;
+  gap: 2rem;
+  width: 100%;
+  grid-template-columns: 1fr 1fr;
+  height: 100vh;
+  place-items: center;
+  overflow: hidden;
+  padding: 1rem 2rem;
+  box-sizing: border-box;
+}
+:host > div > * {
+  width: 100%;
+}
+:host > div > div {
+  max-width: 500px;
+}
+:host > div ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:host > div ul ul {
+  background: #000;
+  gap: 1px;
+  display: grid;
+}
+:host > div ul li {
+  padding-left: 1rem;
+  background: #fff;
+}

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

@@ -0,0 +1,76 @@
+import { getAssetPath, h } from '@stencil/core';
+import { Business, TopCategory } from '../../types';
+import { getTaxonomy } from '../../utils/api';
+export class MyComponent {
+  constructor() {
+    this.cdnLink = '<script type="module" src="https://cdn.jsdelivr.net/npm//hemfixarna-web-components@latest/dist/hemfixarna-components/hemfixarna-components.esm.js"></script>';
+    this.selectedSlug = undefined;
+    this.tooltipText = 'Kopiera till urklipp';
+    this.tree = null;
+  }
+  getTopLevelCategory() {
+    switch (process.env.BUSINESS) {
+      case Business.byggmax:
+        return TopCategory.byggmax;
+      default:
+        return '';
+    }
+  }
+  async componentWillLoad() {
+    const tree = await getTaxonomy(this.getTopLevelCategory());
+    if ((tree === null || tree === void 0 ? void 0 : tree.code) === 'not_found') {
+      console.warn('tree not found');
+    }
+    else if (tree) {
+      this.tree = tree;
+    }
+  }
+  getExample() {
+    return `<hemfixarna-${process.env.BUSINESS}${this.selectedSlug ? ` slug="${this.selectedSlug}" ` : ''}></hemfixarna-${process.env.BUSINESS}>`;
+  }
+  copyExample() {
+    navigator.clipboard.writeText(this.getExample());
+    this.tooltipText = 'Snippet kopierad';
+    setTimeout(() => {
+      this.tooltipText = 'Kopiera till urklipp';
+    }, 2000);
+  }
+  copyCdn() {
+    navigator.clipboard.writeText(this.cdnLink);
+    this.tooltipText = 'Text kopierad';
+    setTimeout(() => {
+      this.tooltipText = 'Kopiera till urklipp';
+    }, 2000);
+  }
+  copyNpmInstall() {
+    navigator.clipboard.writeText('npm i hemfixarna-web-components');
+    this.tooltipText = 'Text kopierad';
+    setTimeout(() => {
+      this.tooltipText = 'Kopiera till urklipp';
+    }, 2000);
+  }
+  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", { slug: this.selectedSlug }), h("div", { class: "hemfixarna_install" }, h("div", null, h("a", { target: "_blank", href: "https://www.npmjs.com/package/hemfixarna-web-components" }, "Install with npm")), h("div", { onClick: () => this.copyNpmInstall(), class: "hemfixarna_example" }, h("p", null, "npm i hemfixarna-web-components"), h("span", { class: "hemfixarna_example--tooltip" }, this.tooltipText), h("img", { src: copy, height: 20 })), h("p", null, "Or use cdn"), 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.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"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["hemfixarna-demo.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hemfixarna-demo.css"]
+    };
+  }
+  static get states() {
+    return {
+      "selectedSlug": {},
+      "tooltipText": {},
+      "tree": {}
+    };
+  }
+}
+//# sourceMappingURL=hemfixarna-demo.js.map

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

@@ -0,0 +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, getAssetPath, h } from '@stencil/core';\nimport { Business, Category, TopCategory } from '../../types';\nimport { getTaxonomy } from '../../utils/api';\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() tooltipText: string = 'Kopiera till urklipp';\n  @State() tree: Category | null = null;\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  async componentWillLoad() {\n    const tree = await getTaxonomy(this.getTopLevelCategory());\n    if (tree?.code === 'not_found') {\n      console.warn('tree not found');\n    } else if (tree) {\n      this.tree = tree;\n    }\n  }\n\n  getExample() {\n    return `<hemfixarna-${process.env.BUSINESS}${this.selectedSlug ? ` slug=\"${this.selectedSlug}\" ` : ''}></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  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 && <hemfixarna-byggmax slug={this.selectedSlug} />}\n          <div class=\"hemfixarna_install\">\n            <div>\n              <a target=\"_blank\" href=\"https://www.npmjs.com/package/hemfixarna-web-components\">\n                Install with npm\n              </a>\n            </div>\n            <div onClick={() => this.copyNpmInstall()} class=\"hemfixarna_example\">\n              <p>npm i hemfixarna-web-components</p>\n              <span class=\"hemfixarna_example--tooltip\">{this.tooltipText}</span>\n              <img src={copy} height={20} />\n            </div>\n            <p>Or use cdn</p>\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>\n        <ul class=\"hemfixarna_categories\">\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 kategori</button>\n                            </div>\n                          </div>\n                        </li>\n                      ))}\n                    </ul>\n                  </li>\n                ))}\n              </ul>\n            </li>\n          ))}\n        </ul>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,84 @@
+import { h } from '@stencil/core';
+import Personnummer from 'personnummer';
+import state from '../../store';
+import apiSearch from '../../utils/creditSafe';
+export class HemfixarnaGetuser {
+  constructor() {
+    this.handleChangeEmail = (e) => {
+      this.emailError = null;
+      this.email = e.target.value;
+    };
+    this.handleChangePhone = (e) => {
+      this.phoneError = null;
+      this.phone = e.target.value;
+    };
+    this.handleChangessn = (e) => {
+      this.ssnError = null;
+      this.ssn = e.target.value;
+    };
+    this.handleSubmit = async (e) => {
+      e.preventDefault();
+      const emailRegex = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+      const validEmail = emailRegex.test(this.email);
+      if (!validEmail) {
+        this.emailError = 'Ange en giltig e-postadress';
+      }
+      const validPhone = this.phone.length > 6;
+      if (!validPhone) {
+        this.phoneError = 'Ange ett giltigt telefonnummer';
+      }
+      const validssn = Personnummer.valid(this.ssn);
+      if (!validssn) {
+        this.ssnError = 'Ange ett giltigt personnummer';
+      }
+      else if (validssn) {
+        const pn = Personnummer.parse(this.ssn).format(true);
+        this.ssn = [pn.slice(0, 8), '-', pn.slice(8)].join('');
+      }
+      if (validEmail && validPhone && validssn) {
+        try {
+          const user = await apiSearch(this.ssn);
+          if (user) {
+            state.checkoutStep = 2;
+            state.user = Object.assign(Object.assign({}, user), { email: this.email, phone: this.phone, ssn: this.ssn });
+          }
+          else {
+            this.ssnError = 'Vi kunde tyvärr inte hitta en address med ditt angivna personnummer';
+          }
+        }
+        catch (e) {
+          this.ssnError = 'Vi kunde tyvärr inte hitta en address med ditt angivna personnummer';
+          console.log(e);
+        }
+      }
+    };
+    this.render = () => {
+      return (h("form", { class: "mb-2", onSubmit: e => this.handleSubmit(e) }, h("div", null, h("input", { class: `${this.email.length ? 'input_active' : ''}`, onChange: e => this.handleChangeEmail(e), type: "email", name: "email", value: this.email }), h("label", { htmlFor: "email" }, "E-post ")), this.emailError && h("span", null, this.emailError), h("div", null, h("input", { class: `${this.phone.length ? 'input_active' : ''}`, onChange: e => this.handleChangePhone(e), type: "tel", name: "phone", value: this.phone }), h("label", { htmlFor: "phone" }, "Mobiltelefon ")), this.phoneError && h("span", null, this.phoneError), h("div", null, h("input", { class: `${this.ssn.length ? 'input_active' : ''}`, onChange: e => this.handleChangessn(e), type: "tel", name: "ssn", value: this.ssn }), h("label", { htmlFor: "phone" }, "Personnummer*")), this.ssnError && h("span", null, this.ssnError), h("input", { type: "submit", value: "Forts\u00E4tt och Boka*" }), h("p", null, "*Vi h\u00E4mtar din adress")));
+    };
+    this.email = '';
+    this.emailError = null;
+    this.phone = '';
+    this.phoneError = null;
+    this.ssn = '';
+    this.ssnError = null;
+  }
+  componentWillLoad() {
+    if (state.user) {
+      this.email = state.user.email;
+      this.phone = state.user.phone;
+      this.ssn = state.user.ssn;
+    }
+  }
+  static get is() { return "hemfixarna-getuser"; }
+  static get states() {
+    return {
+      "email": {},
+      "emailError": {},
+      "phone": {},
+      "phoneError": {},
+      "ssn": {},
+      "ssnError": {}
+    };
+  }
+}
+//# sourceMappingURL=hemfixarna-getuser.js.map

package/dist/collection/components/hemfixarna-getuser/hemfixarna-getuser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hemfixarna-getuser.js","sourceRoot":"","sources":["../../../src/components/hemfixarna-getuser/hemfixarna-getuser.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, h } from '@stencil/core';\nimport Personnummer from 'personnummer';\nimport state from '../../store';\nimport apiSearch from '../../utils/creditSafe';\nimport { User } from '../../types';\n\n@Component({\n  tag: 'hemfixarna-getuser',\n  shadow: false,\n})\nexport class HemfixarnaGetuser {\n  @State() email: string = '';\n  @State() emailError: string | null = null;\n  @State() phone: string = '';\n  @State() phoneError: string | null = null;\n  @State() ssn: string = '';\n  @State() ssnError: string | null = null;\n\n  componentWillLoad() {\n    if (state.user) {\n      this.email = state.user.email;\n      this.phone = state.user.phone;\n      this.ssn = state.user.ssn;\n    }\n  }\n\n  handleChangeEmail = (e: Event) => {\n    this.emailError = null;\n    this.email = (e.target as HTMLInputElement).value;\n  };\n\n  handleChangePhone = (e: Event) => {\n    this.phoneError = null;\n    this.phone = (e.target as HTMLInputElement).value;\n  };\n\n  handleChangessn = (e: Event) => {\n    this.ssnError = null;\n    this.ssn = (e.target as HTMLInputElement).value;\n  };\n\n  handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const emailRegex = new RegExp(\n      /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/,\n    );\n    const validEmail = emailRegex.test(this.email);\n    if (!validEmail) {\n      this.emailError = 'Ange en giltig e-postadress';\n    }\n    const validPhone = this.phone.length > 6;\n    if (!validPhone) {\n      this.phoneError = 'Ange ett giltigt telefonnummer';\n    }\n    const validssn = Personnummer.valid(this.ssn);\n    if (!validssn) {\n      this.ssnError = 'Ange ett giltigt personnummer';\n    } else if (validssn) {\n      const pn = Personnummer.parse(this.ssn).format(true);\n      this.ssn = [pn.slice(0, 8), '-', pn.slice(8)].join('');\n    }\n    if (validEmail && validPhone && validssn) {\n      try {\n        const user: Partial<User> = await apiSearch(this.ssn);\n        if (user) {\n          state.checkoutStep = 2;\n          state.user = {\n            ...user,\n            email: this.email,\n            phone: this.phone,\n            ssn: this.ssn,\n          };\n        } else {\n          this.ssnError = 'Vi kunde tyvärr inte hitta en address med ditt angivna personnummer';\n        }\n      } catch (e) {\n        this.ssnError = 'Vi kunde tyvärr inte hitta en address med ditt angivna personnummer';\n        console.log(e);\n      }\n    }\n  };\n\n  render = () => {\n    return (\n      <form class=\"mb-2\" onSubmit={e => this.handleSubmit(e)}>\n        <div>\n          <input class={`${this.email.length ? 'input_active' : ''}`} onChange={e => this.handleChangeEmail(e)} type=\"email\" name=\"email\" value={this.email} />\n          <label htmlFor=\"email\">E-post </label>\n        </div>\n        {this.emailError && <span>{this.emailError}</span>}\n        <div>\n          <input class={`${this.phone.length ? 'input_active' : ''}`} onChange={e => this.handleChangePhone(e)} type=\"tel\" name=\"phone\" value={this.phone} />\n          <label htmlFor=\"phone\">Mobiltelefon </label>\n        </div>\n        {this.phoneError && <span>{this.phoneError}</span>}\n        <div>\n          <input class={`${this.ssn.length ? 'input_active' : ''}`} onChange={e => this.handleChangessn(e)} type=\"tel\" name=\"ssn\" value={this.ssn} />\n          <label htmlFor=\"phone\">Personnummer*</label>\n        </div>\n        {this.ssnError && <span>{this.ssnError}</span>}\n        <input type=\"submit\" value=\"Fortsätt och Boka*\" />\n        <p>*Vi hämtar din adress</p>\n      </form>\n    );\n  };\n}\n"]}

package/dist/{hemfixarna-components/hemfixarna-info.entry.js → collection/components/hemfixarna-info/hemfixarna-info.js}

@@ -1,9 +1,7 @@
-import { r as registerInstance, g as getAssetPath, h, F as Fragment } from './index-59ed730c.js';
-import { s as state } from './index-75ed3bb8.js';
-
-const HemfixarnaInfo = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+import { Fragment, getAssetPath, h } from '@stencil/core';
+import state from '../../store';
+export class HemfixarnaInfo {
+  constructor() {
     this.logo = getAssetPath(`./assets/hemfixarna.svg`);
     this.checkoutList = [
       { trust_badge: 'Efter att du fyllt i formuläret blir du kontaktad av en Hemfixare för bokning av tid.' },
@@ -18,8 +16,26 @@ const HemfixarnaInfo = class {
     const checked = getAssetPath(`./assets/checked.svg`);
     return (h("div", { class: "hemfixarna_info" }, state.step < 5 ? (h(Fragment, null, h("h2", null, "Vilka \u00E4r Hemfixarna?"), h("p", null, "Vi fixar allt fr\u00E5n kr\u00E5ngliga datorer till montering av m\u00F6bler. Vi finns i hela Sverige och \u00E4r alltid redo att rycka ut."))) : (h("h2", null, "Vad h\u00E4nder nu?")), h("ul", { class: "hemfixarna_features" }, this.getList().map(l => (h("li", { key: l.trust_badge }, h("img", { src: checked, alt: "checked" }), h("p", null, l.trust_badge))))), h("img", { src: this.logo, width: 200, alt: "hemfixarna" }), h("a", { class: "hemfixarna_product--link", target: "_blank", href: state.options.link.url }, state.options.link.title)));
   }
-};
-
-export { HemfixarnaInfo as hemfixarna_info };
-
-//# sourceMappingURL=hemfixarna-info.entry.js.map
+  static get is() { return "hemfixarna-info"; }
+  static get properties() {
+    return {
+      "list": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ trust_badge: string }[]",
+          "resolved": "{ trust_badge: string; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "null"
+      }
+    };
+  }
+}
+//# sourceMappingURL=hemfixarna-info.js.map

package/dist/collection/components/hemfixarna-info/hemfixarna-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hemfixarna-info.js","sourceRoot":"","sources":["../../../src/components/hemfixarna-info/hemfixarna-info.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,MAAM,aAAa,CAAC;AAMhC,MAAM,OAAO,cAAc;;IACzB,SAAI,GAAG,YAAY,CAAC,yBAAyB,CAAC,CAAC;IAG/C,iBAAY,GAAG;MACb,EAAE,WAAW,EAAE,uFAAuF,EAAE;MACxG,EAAE,WAAW,EAAE,iEAAiE,EAAE;KACnF,CAAC;gBALyC,IAAI;;EAO/C,OAAO;IACL,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;EACnD,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAAC;IACrD,OAAO,CACL,WAAK,KAAK,EAAC,iBAAiB;MACzB,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAChB,EAAC,QAAQ;QACP,0CAA6B;QAC7B,2JAA8H,CACrH,CACZ,CAAC,CAAC,CAAC,CACF,oCAAuB,CACxB;MACD,UAAI,KAAK,EAAC,qBAAqB,IAC5B,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CACvB,UAAI,GAAG,EAAE,CAAC,CAAC,WAAW;QACpB,WAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,SAAS,GAAG;QACnC,aAAI,CAAC,CAAC,WAAW,CAAK,CACnB,CACN,CAAC,CACC;MACL,WAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAC,YAAY,GAAG;MACpD,SAAG,KAAK,EAAC,0BAA0B,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAC7E,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CACvB,CACA,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Fragment, Prop, getAssetPath, h } from '@stencil/core';\nimport state from '../../store';\n\n@Component({\n  tag: 'hemfixarna-info',\n  shadow: false,\n})\nexport class HemfixarnaInfo {\n  logo = getAssetPath(`./assets/hemfixarna.svg`);\n  @Prop() list?: { trust_badge: string }[] = null;\n\n  checkoutList = [\n    { trust_badge: 'Efter att du fyllt i formuläret blir du kontaktad av en Hemfixare för bokning av tid.' },\n    { trust_badge: 'När jobbet är klart kommer du få en faktura med RUT/ROT-avdrag.' },\n  ];\n\n  getList() {\n    return this.list ? this.list : this.checkoutList;\n  }\n\n  render() {\n    const checked = getAssetPath(`./assets/checked.svg`);\n    return (\n      <div class=\"hemfixarna_info\">\n        {state.step < 5 ? (\n          <Fragment>\n            <h2>Vilka är Hemfixarna?</h2>\n            <p>Vi fixar allt från krångliga datorer till montering av möbler. Vi finns i hela Sverige och är alltid redo att rycka ut.</p>\n          </Fragment>\n        ) : (\n          <h2>Vad händer nu?</h2>\n        )}\n        <ul class=\"hemfixarna_features\">\n          {this.getList().map(l => (\n            <li key={l.trust_badge}>\n              <img src={checked} alt=\"checked\" />\n              <p>{l.trust_badge}</p>\n            </li>\n          ))}\n        </ul>\n        <img src={this.logo} width={200} alt=\"hemfixarna\" />\n        <a class=\"hemfixarna_product--link\" target=\"_blank\" href={state.options.link.url}>\n          {state.options.link.title}\n        </a>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,50 @@
+import { h } from '@stencil/core';
+import state from '../../store';
+export class HemfixarnaOrder {
+  constructor() {
+    this.render = () => {
+      return (h("div", { style: { background: `url(${state.options.thank_you_image})` }, class: "hemfixarna_order" }, h("div", null), h("div", null, h("h2", null, "Tack f\u00F6r din bokning"), h("hemfixarna-orderrows", { tree: this.tree, cart: false }), h("span", { onClick: () => this.resetShop() }, h("button", null, "G\u00F6r en ny bokning")), h("hemfixarna-info", { list: [
+          { trust_badge: 'Du kommer bli kontaktad av en Hemfixare för bokning av tid.' },
+          { trust_badge: 'När jobbet är klart kommer du få en faktura med RUT/ROT-avdrag.' },
+        ] }))));
+    };
+    this.tree = undefined;
+  }
+  resetShop() {
+    state.step = 1;
+    state.cart = [];
+    state.selectedCategory = null;
+    state.selectedService = null;
+    state.selectedProduct = null;
+    state.checkoutStep = 1;
+  }
+  disconnectedCallback() {
+    this.resetShop();
+  }
+  static get is() { return "hemfixarna-order"; }
+  static get properties() {
+    return {
+      "tree": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Category",
+          "resolved": "Category",
+          "references": {
+            "Category": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=hemfixarna-order.js.map

package/dist/collection/components/hemfixarna-order/hemfixarna-order.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hemfixarna-order.js","sourceRoot":"","sources":["../../../src/components/hemfixarna-order/hemfixarna-order.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,MAAM,aAAa,CAAC;AAOhC,MAAM,OAAO,eAAe;;IAgB1B,WAAM,GAAG,GAAG,EAAE;MACZ,OAAO,CACL,WAAK,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,eAAe,GAAG,EAAE,EAAE,KAAK,EAAC,kBAAkB;QAC3F,cAAW;QACX;UACE,0CAA6B;UAC7B,4BAAsB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,GAAyB;UAC3E,YAAM,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;YACnC,2CAAkC,CAC7B;UACP,uBACE,IAAI,EAAE;cACJ,EAAE,WAAW,EAAE,6DAA6D,EAAE;cAC9E,EAAE,WAAW,EAAE,iEAAiE,EAAE;aACnF,GACD,CACE,CACF,CACP,CAAC;IACJ,CAAC,CAAC;;;EAhCF,SAAS;IACP,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC;IACf,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC;IAChB,KAAK,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAC9B,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC;EACzB,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAsBF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport state from '../../store';\nimport { Category } from '../../types';\n\n@Component({\n  tag: 'hemfixarna-order',\n  shadow: false,\n})\nexport class HemfixarnaOrder {\n  @Prop() tree: Category;\n\n  resetShop() {\n    state.step = 1;\n    state.cart = [];\n    state.selectedCategory = null;\n    state.selectedService = null;\n    state.selectedProduct = null;\n    state.checkoutStep = 1;\n  }\n\n  disconnectedCallback() {\n    this.resetShop();\n  }\n\n  render = () => {\n    return (\n      <div style={{ background: `url(${state.options.thank_you_image})` }} class=\"hemfixarna_order\">\n        <div></div>\n        <div>\n          <h2>Tack för din bokning</h2>\n          <hemfixarna-orderrows tree={this.tree} cart={false}></hemfixarna-orderrows>\n          <span onClick={() => this.resetShop()}>\n            <button>Gör en ny bokning</button>\n          </span>\n          <hemfixarna-info\n            list={[\n              { trust_badge: 'Du kommer bli kontaktad av en Hemfixare för bokning av tid.' },\n              { trust_badge: 'När jobbet är klart kommer du få en faktura med RUT/ROT-avdrag.' },\n            ]}\n          />\n        </div>\n      </div>\n    );\n  };\n}\n"]}

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

@@ -0,0 +1,80 @@
+import { Fragment, getAssetPath, h } from '@stencil/core';
+import state from '../../store';
+import { calculateRot, calculateRut, getPartPrice, getProductPrice, getStartFee, getTotalPrice } from '../../utils/calc';
+export class HemfixarnaOrderrows {
+  constructor() {
+    this.cart = true;
+    this.tree = undefined;
+  }
+  goToProduct(id) {
+    const services = this.tree.sub_cats.map((c) => c.services).flat();
+    const products = services.map((s) => s.products).flat();
+    const product = products.find((p) => p.ID === id);
+    const service = services.find((s) => s.products.find((p) => p.ID === id));
+    const category = this.tree.sub_cats.find((c) => c.services.find((s) => s.products.find((p) => p.ID === id)));
+    state.selectedCategory = category;
+    state.selectedService = service;
+    state.selectedProduct = product;
+    state.step = 4;
+  }
+  openMontering() {
+    state.modal = {
+      title: 'Monteringsavgift',
+      text: [
+        'Monteringsavgiften är en fast avgift som läggs på din beställning. Avgiften täcker kostnader för att montera produkterna du beställer.',
+        'Monteringsavgiften debiteras per påbörjat nytt uppdrag. Om du bokar ett uppdrag som både innehåller RUT- och ROT-avdrag så kommer uppdraget att delas upp och således kommer två monteringsavgifter att debiteras och två fakturor att utställas.',
+      ],
+    };
+  }
+  render() {
+    const info = getAssetPath(`./assets/info.svg`);
+    return (h(Fragment, null, h("ul", { class: "hemfixarna_cart--items" }, state.cart.map(item => {
+      var _a;
+      return (h("li", { class: "hemfixarna_cart--item" }, h("div", null, h("div", null, item.icon && h("img", { width: 30, src: (_a = item.icon.url) !== null && _a !== void 0 ? _a : item.icon, alt: item.name }), h("p", null, h("strong", null, item.amount, "x "), item.name)), this.cart && h("button", { onClick: () => this.goToProduct(item.id) }, "\u00C4ndra")), h("p", null, h("strong", null, getProductPrice(item, item.price, item.amount), "kr")), item.parts.length > 0 && (h("ul", null, item.parts.map(part => (h("li", null, h("p", null, h("strong", null, part.amount, "x "), part.name), h("p", null, h("strong", null, getPartPrice(part, item, part.amount), "kr")))))))));
+    })), h("div", { class: "hemfixarna_cart--additional" }, getStartFee().length > 0 && (h("div", { class: "hemfixarna_cart--startfee" }, h("p", null, getStartFee().length, "x", ' ', h("strong", { onClick: () => this.openMontering() }, "Monteringsavgift", h("img", { height: 16, src: info, alt: "info monteringsavgift" }))), h("p", null, getStartFee().rot + getStartFee().rut, "kr"))), state.cart.find((item) => item.rot) && (h("div", { class: "hemfixarna_cart--rutrot" }, h("div", null, this.cart && (h("label", { class: "switch" }, h("input", { checked: state.rot, onChange: () => (state.rot = !state.rot), type: "checkbox" }), h("span", { class: "slider" }))), h("p", null, "ROT-avdrag")), h("p", null, "(-", state.rot ? calculateRot() : 0, "kr)"))), state.cart.find((item) => item.rut) && (h("div", { class: "hemfixarna_cart--rutrot" }, h("div", null, h("label", { class: "switch" }, h("input", { onChange: () => (state.rut = !state.rut), checked: state.rut, type: "checkbox" }), h("span", { class: "slider" })), h("p", null, "RUT-avdrag")), h("p", null, "(-", state.rut ? calculateRut() : 0, "kr)")))), h("div", { class: "hemfixarna_cart--price" }, h("h2", null, "Totalbelopp: "), h("h2", null, getTotalPrice(), "kr"))));
+  }
+  static get is() { return "hemfixarna-orderrows"; }
+  static get properties() {
+    return {
+      "cart": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cart",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "tree": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Category",
+          "resolved": "Category",
+          "references": {
+            "Category": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=hemfixarna-orderrows.js.map

package/dist/collection/components/hemfixarna-orderrows/hemfixarna-orderrows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hemfixarna-orderrows.js","sourceRoot":"","sources":["../../../src/components/hemfixarna-orderrows/hemfixarna-orderrows.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, Prop, getAssetPath, h } from '@stencil/core';\nimport state from '../../store';\nimport { calculateRot, calculateRut, getPartPrice, getProductPrice, getStartFee, getTotalPrice } from '../../utils/calc';\nimport { CartItem, Category, Icon } from '../../types';\n\n@Component({\n  tag: 'hemfixarna-orderrows',\n  shadow: false,\n})\nexport class HemfixarnaOrderrows {\n  @Prop() cart: boolean = true;\n  @Prop() tree: Category;\n\n  goToProduct(id: number) {\n    const services = this.tree.sub_cats.map((c: Category) => c.services).flat();\n    const products = services.map((s: any) => s.products).flat();\n    const product = products.find((p: any) => p.ID === id);\n    const service = services.find((s: any) => s.products.find((p: any) => p.ID === id));\n    const category = this.tree.sub_cats.find((c: any) => c.services.find((s: any) => s.products.find((p: any) => p.ID === id)));\n    state.selectedCategory = category;\n    state.selectedService = service;\n    state.selectedProduct = product;\n    state.step = 4;\n  }\n\n  openMontering() {\n    state.modal = {\n      title: 'Monteringsavgift',\n      text: [\n        'Monteringsavgiften är en fast avgift som läggs på din beställning. Avgiften täcker kostnader för att montera produkterna du beställer.',\n        'Monteringsavgiften debiteras per påbörjat nytt uppdrag. Om du bokar ett uppdrag som både innehåller RUT- och ROT-avdrag så kommer uppdraget att delas upp och således kommer två monteringsavgifter att debiteras och två fakturor att utställas.',\n      ],\n    };\n  }\n\n  render() {\n    const info = getAssetPath(`./assets/info.svg`);\n\n    return (\n      <Fragment>\n        <ul class=\"hemfixarna_cart--items\">\n          {state.cart.map(item => (\n            <li class=\"hemfixarna_cart--item\">\n              <div>\n                <div>\n                  {item.icon && <img width={30} src={(item.icon as Icon).url ?? (item.icon as string)} alt={item.name} />}\n                  <p>\n                    <strong>{item.amount}x </strong>\n                    {item.name}\n                  </p>\n                </div>\n                {this.cart && <button onClick={() => this.goToProduct(item.id)}>Ändra</button>}\n              </div>\n              <p>\n                <strong>{getProductPrice(item, item.price, item.amount)}kr</strong>\n              </p>\n              {item.parts.length > 0 && (\n                <ul>\n                  {item.parts.map(part => (\n                    <li>\n                      <p>\n                        <strong>{part.amount}x </strong>\n                        {part.name}\n                      </p>\n                      <p>\n                        <strong>{getPartPrice(part, item, part.amount)}kr</strong>\n                      </p>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </li>\n          ))}\n        </ul>\n        <div class=\"hemfixarna_cart--additional\">\n          {getStartFee().length > 0 && (\n            <div class=\"hemfixarna_cart--startfee\">\n              <p>\n                {getStartFee().length}x{' '}\n                <strong onClick={() => this.openMontering()}>\n                  Monteringsavgift\n                  <img height={16} src={info} alt=\"info monteringsavgift\" />\n                </strong>\n              </p>\n              <p>{getStartFee().rot + getStartFee().rut}kr</p>\n            </div>\n          )}\n          {state.cart.find((item: CartItem) => item.rot) && (\n            <div class=\"hemfixarna_cart--rutrot\">\n              <div>\n                {this.cart && (\n                  <label class=\"switch\">\n                    <input checked={state.rot} onChange={() => (state.rot = !state.rot)} type=\"checkbox\" />\n                    <span class=\"slider\"></span>\n                  </label>\n                )}\n                <p>ROT-avdrag</p>\n              </div>\n              <p>(-{state.rot ? calculateRot() : 0}kr)</p>\n            </div>\n          )}\n          {state.cart.find((item: CartItem) => item.rut) && (\n            <div class=\"hemfixarna_cart--rutrot\">\n              <div>\n                <label class=\"switch\">\n                  <input onChange={() => (state.rut = !state.rut)} checked={state.rut} type=\"checkbox\" />\n                  <span class=\"slider\"></span>\n                </label>\n                <p>RUT-avdrag</p>\n              </div>\n              <p>(-{state.rut ? calculateRut() : 0}kr)</p>\n            </div>\n          )}\n        </div>\n        <div class=\"hemfixarna_cart--price\">\n          <h2>Totalbelopp: </h2>\n          <h2>{getTotalPrice()}kr</h2>\n        </div>\n      </Fragment>\n    );\n  }\n}\n"]}

package/dist/{hemfixarna-components/hemfixarna-product.entry.js → collection/components/hemfixarna-product/hemfixarna-product.js}

@@ -1,10 +1,8 @@
-import { r as registerInstance, g as getAssetPath, h } from './index-59ed730c.js';
-import { s as state } from './index-75ed3bb8.js';
-import { a as getProductPrice, c as getPartPrice } from './calc-a9ece205.js';
-
-const HemfixarnaProduct = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+import { getAssetPath, h } from '@stencil/core';
+import state from '../../store';
+import { getPartPrice, getProductPrice } from '../../utils/calc';
+export class HemfixarnaProduct {
+  constructor() {
     this.amount = 0;
   }
   addProduct() {
@@ -47,7 +45,6 @@ const HemfixarnaProduct = class {
     const productInCart = state.cart.find(p => p.id === state.selectedProduct.ID);
     if (productInCart) {
       const partInCart = productInCart.parts.find(sp => sp.id === part.ID);
-      console.log(partInCart);
       if (partInCart) {
         partInCart.amount++;
         productInCart.parts = [...productInCart.parts];
@@ -106,16 +103,18 @@ const HemfixarnaProduct = class {
     return getProductPrice(state.selectedProduct, price);
   }
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     const checked = getAssetPath(`./assets/checked.svg`);
     const plus = getAssetPath(`./assets/plus.svg`);
     const minus = getAssetPath(`./assets/minus.svg`);
-    console.log(state.selectedProduct);
-    return (h("div", { class: "hemfixarna_product" }, h("div", { class: "hemfixarna_product--top" }, state.selectedProduct.icon && h("img", { width: 80, src: state.selectedProduct.icon, alt: state.selectedProduct.post_title }), h("div", null, h("h1", null, state.selectedProduct.post_title), h("h2", null, "Fr\u00E5n: ", getProductPrice(state.selectedProduct), " kr"))), h("div", { class: "hemfixarna_product--grid" }, h("div", { class: "hemfixarna_product--left" }, ((_a = state.selectedProduct.list) === null || _a === void 0 ? void 0 : _a.length) && (h("ul", { class: "hemfixarna_features" }, state.selectedProduct.list.map(l => (h("li", { key: l.bullet }, h("img", { src: checked, alt: "checked" }), h("p", null, l.bullet)))))), h("p", { class: "hemfixarna_terms" }, h("strong", null, "OBS! "), h("span", { innerHTML: state.selectedProduct.terms }))), h("div", { class: "hemfixarna_product--right" }, h("ul", null, h("li", { class: "hemfixarna_product--item" }, h("div", null, h("p", null, "Antal ", state.selectedProduct.post_title), h("p", { class: "hemfixarna_product--price" }, getProductPrice(state.selectedProduct), "kr/st")), h("div", { class: "hemfixarna_counter" }, h("img", { class: `${this.getAmount() === 0 ? 'disabled' : ''}`, src: minus, onClick: () => this.removeProduct() }), h("span", null, this.getAmount()), h("img", { src: plus, onClick: () => this.addProduct() }))), ((_b = state.selectedProduct.parts) === null || _b === void 0 ? void 0 : _b.length) &&
+    return (h("div", { class: "hemfixarna_product" }, h("div", { class: "hemfixarna_product--top" }, state.selectedProduct.icon && (h("img", { width: 80, src: (_a = state.selectedProduct.icon.url) !== null && _a !== void 0 ? _a : state.selectedProduct.icon, alt: state.selectedProduct.post_title })), h("div", null, h("h1", null, state.selectedProduct.post_title), h("h2", null, "Fr\u00E5n: ", getProductPrice(state.selectedProduct), " kr"))), h("div", { class: "hemfixarna_product--grid" }, h("div", { class: "hemfixarna_product--left" }, ((_b = state.selectedProduct.list) === null || _b === void 0 ? void 0 : _b.length) && (h("ul", { class: "hemfixarna_features" }, state.selectedProduct.list.map(l => (h("li", { key: l.bullet }, h("img", { src: checked, alt: "checked" }), h("p", null, l.bullet)))))), h("p", { class: "hemfixarna_terms" }, h("strong", null, "OBS! "), h("span", { innerHTML: state.selectedProduct.terms }))), h("div", { class: "hemfixarna_product--right" }, h("ul", null, h("li", { class: "hemfixarna_product--item" }, h("div", null, h("p", null, "Antal ", state.selectedProduct.post_title), h("p", { class: "hemfixarna_product--price" }, getProductPrice(state.selectedProduct), "kr/st")), h("div", { class: "hemfixarna_counter" }, h("img", { class: `${this.getAmount() === 0 ? 'disabled' : ''}`, src: minus, onClick: () => this.removeProduct() }), h("span", null, this.getAmount()), h("img", { src: plus, onClick: () => this.addProduct() }))), ((_c = state.selectedProduct.parts) === null || _c === void 0 ? void 0 : _c.length) &&
       state.selectedProduct.parts.map(p => (h("li", { class: "hemfixarna_part" }, h("div", null, h("p", null, p.post_title), h("p", { class: "hemfixarna_product--price" }, getPartPrice(p, state.selectedProduct), "kr/st")), h("div", { class: "hemfixarna_counter" }, h("img", { class: `${this.getPartAmount(p.ID) === 0 ? 'disabled' : ''}`, src: minus, onClick: () => this.removePart(p) }), h("span", null, this.getPartAmount(p.ID)), h("img", { class: `${this.getAmount() === 0 ? 'disabled' : ''}`, src: plus, onClick: () => this.addPart(p) })))))), h("h4", { class: "hemfixarna_product--total" }, "Totalt ", this.getTotalPrice(), " kr"), h("button", { onClick: () => this.goToCart(), class: `hemfixarna_buy ${this.getAmount() === 0 ? 'disabled' : ''}` }, "Boka"), state.options && h("hemfixarna-info", { list: state.options.trust })))));
   }
-};
-
-export { HemfixarnaProduct as hemfixarna_product };
-
-//# sourceMappingURL=hemfixarna-product.entry.js.map
+  static get is() { return "hemfixarna-product"; }
+  static get states() {
+    return {
+      "amount": {}
+    };
+  }
+}
+//# sourceMappingURL=hemfixarna-product.js.map