hemfixarna-web-components 0.1.2 → 0.2.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.
Files changed (17) hide show
  1. package/dist/hemfixarna-components/{api-067d9d1c.js → api-609888bb.js} +2 -3
  2. package/dist/hemfixarna-components/api-609888bb.js.map +1 -0
  3. package/dist/hemfixarna-components/hemfixarna-byggmax.entry.js +3 -3
  4. package/dist/hemfixarna-components/hemfixarna-byggmax.entry.js.map +1 -1
  5. package/dist/hemfixarna-components/hemfixarna-components.esm.js +3 -3
  6. package/dist/hemfixarna-components/hemfixarna-service.entry.js +70 -17
  7. package/dist/hemfixarna-components/hemfixarna-service.entry.js.map +1 -1
  8. package/dist/hemfixarna-components/{index-59e33b1d.js → index-06272934.js} +2 -2
  9. package/dist/hemfixarna-components/index-06272934.js.map +1 -0
  10. package/dist/hemfixarna-components/my-component.entry.js +22 -6
  11. package/dist/hemfixarna-components/my-component.entry.js.map +1 -1
  12. package/dist/types/components/hemfixarna-service/hemfixarna-service.d.ts +19 -0
  13. package/dist/types/components/my-component/my-component.d.ts +1 -0
  14. package/dist/types/types/index.d.ts +8 -1
  15. package/package.json +4 -3
  16. package/dist/hemfixarna-components/api-067d9d1c.js.map +0 -1
  17. package/dist/hemfixarna-components/index-59e33b1d.js.map +0 -1
package/dist/hemfixarna-components/{api-067d9d1c.js → api-609888bb.js} RENAMED
@@ -4,9 +4,8 @@ const getTaxonomy = async (string) => {
4
4
  }
5
5
  const type = string.split('/')[0];
6
6
  const slug = string.split('/')[1];
7
- const path = type === 'service' ? 'service' : 'category';
8
7
  try {
9
- const res = await fetch(`https://hemfixare.dev.afonso.se/wp-json/headless/${path}/${slug}`);
8
+ const res = await fetch(`https://hemfixare.dev.afonso.se/wp-json/headless/${type}/${slug}`);
10
9
  return await res.json();
11
10
  }
12
11
  catch (error) {
@@ -16,4 +15,4 @@ const getTaxonomy = async (string) => {
16
15
 
17
16
  export { getTaxonomy as g };
18
17
 
19
- //# sourceMappingURL=api-067d9d1c.js.map
18
+ //# sourceMappingURL=api-609888bb.js.map
package/dist/hemfixarna-components/api-609888bb.js.map ADDED
@@ -0,0 +1 @@
1
+ {"file":"api-609888bb.js","mappings":"MAAM,WAAW,GAAG,OAAO,MAAc;EACvC,IAAI,CAAC,MAAM,EAAE;IACX,OAAO;GACR;EACD,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;EAClC,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;EAClC,IAAI;IACF,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,oDAAoD,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC;IAC5F,OAAO,MAAM,GAAG,CAAC,IAAI,EAAE,CAAC;GACzB;EAAC,OAAO,KAAK,EAAE;IACd,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;GACpB;AACH;;;;","names":[],"sources":["./src/utils/api.ts"],"sourcesContent":["const getTaxonomy = async (string: string) => {\n if (!string) {\n return;\n }\n const type = string.split('/')[0];\n const slug = string.split('/')[1];\n try {\n const res = await fetch(`https://hemfixare.dev.afonso.se/wp-json/headless/${type}/${slug}`);\n return await res.json();\n } catch (error) {\n console.log(error);\n }\n};\n\nexport { getTaxonomy };\n"],"version":3}
package/dist/hemfixarna-components/hemfixarna-byggmax.entry.js CHANGED
@@ -1,5 +1,5 @@
1
- import { r as registerInstance, h } from './index-59e33b1d.js';
2
- import { g as getTaxonomy } from './api-067d9d1c.js';
1
+ import { r as registerInstance, h } from './index-06272934.js';
2
+ import { g as getTaxonomy } from './api-609888bb.js';
3
3
 
4
4
  const hemfixarnaByggmaxCss = "";
5
5
 
@@ -21,7 +21,7 @@ const MyComponent = class {
21
21
  }
22
22
  }
23
23
  async componentWillLoad() {
24
- const tree = await getTaxonomy('service_cat/bygg');
24
+ const tree = await getTaxonomy('category/bygg');
25
25
  if ((tree === null || tree === void 0 ? void 0 : tree.code) === 'not_found') {
26
26
  console.log('tree not found');
27
27
  }
package/dist/hemfixarna-components/hemfixarna-byggmax.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"hemfixarna-byggmax.entry.esm.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,EAAE;;MCSlB,WAAW;;;oBACyB,IAAI;gBAClB,IAAI;;;EAOrC,MAAM,gBAAgB,CAAC,QAAgB;IACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,MAAM,GAAG,GAAG,MAAM,WAAW,CAAC,QAAQ,CAAC,CAAC;IACxC,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,MAAK,WAAW,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,MAAK,eAAe,EAAE;MAC9D,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;KACnC;SAAM,IAAI,GAAG,EAAE;MACd,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;KACrB;GACF;EAED,MAAM,iBAAiB;IACrB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACnD,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,WAAW,EAAE;MAC9B,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KAC/B;SAAM,IAAI,IAAI,EAAE;MACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KAClB;IACD,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,MAAM,GAAG,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MACzC,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,MAAK,WAAW,EAAE;QAC7B,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;OACnC;WAAM,IAAI,GAAG,EAAE;QACd,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;OACrB;KACF;GACF;EAED,MAAM;IACJ,OAAO,0BAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CAAC;GAC5F;;;;;;;;;","names":[],"sources":["./src/components/hemfixarna-byggmax/hemfixarna-byggmax.scss?tag=hemfixarna-byggmax&encapsulation=shadow","./src/components/hemfixarna-byggmax/hemfixarna-byggmax.tsx"],"sourcesContent":["","import { Component, Prop, State, Watch, h } from '@stencil/core';\nimport { getTaxonomy } from '../../utils/api';\nimport { Category, Service } from '../../types';\n\n@Component({\n tag: 'hemfixarna-byggmax',\n styleUrl: 'hemfixarna-byggmax.scss',\n shadow: true,\n})\nexport class MyComponent {\n @State() category: Category | Service | null = null;\n @State() tree: Category | null = null;\n /**\n * Category slug\n */\n @Prop() slug: string;\n\n @Watch('slug')\n async fetchNewTaxonomy(newValue: string) {\n this.category = null;\n const res = await getTaxonomy(newValue);\n if (res?.code === 'not_found' || res?.code === 'rest_no_route') {\n console.log('taxonomy not found');\n } else if (res) {\n this.category = res;\n }\n }\n\n async componentWillLoad() {\n const tree = await getTaxonomy('service_cat/bygg');\n if (tree?.code === 'not_found') {\n console.log('tree not found');\n } else if (tree) {\n this.tree = tree;\n }\n if (this.slug) {\n const res = await getTaxonomy(this.slug);\n if (res?.code === 'not_found') {\n console.log('taxonomy not found');\n } else if (res) {\n this.category = res;\n }\n }\n }\n\n render() {\n return <hemfixarna-service taxonomy={this.category} tree={this.tree}></hemfixarna-service>;\n }\n}\n"],"version":3}
1
+ {"file":"hemfixarna-byggmax.entry.esm.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,EAAE;;MCSlB,WAAW;;;oBACyB,IAAI;gBAClB,IAAI;;;EAOrC,MAAM,gBAAgB,CAAC,QAAgB;IACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,MAAM,GAAG,GAAG,MAAM,WAAW,CAAC,QAAQ,CAAC,CAAC;IACxC,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,MAAK,WAAW,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,MAAK,eAAe,EAAE;MAC9D,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;KACnC;SAAM,IAAI,GAAG,EAAE;MACd,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;KACrB;GACF;EAED,MAAM,iBAAiB;IACrB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC,eAAe,CAAC,CAAC;IAChD,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,WAAW,EAAE;MAC9B,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KAC/B;SAAM,IAAI,IAAI,EAAE;MACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KAClB;IACD,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,MAAM,GAAG,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MACzC,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,MAAK,WAAW,EAAE;QAC7B,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;OACnC;WAAM,IAAI,GAAG,EAAE;QACd,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;OACrB;KACF;GACF;EAED,MAAM;IACJ,OAAO,0BAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CAAC;GAC5F;;;;;;;;;","names":[],"sources":["./src/components/hemfixarna-byggmax/hemfixarna-byggmax.scss?tag=hemfixarna-byggmax&encapsulation=shadow","./src/components/hemfixarna-byggmax/hemfixarna-byggmax.tsx"],"sourcesContent":["","import { Component, Prop, State, Watch, h } from '@stencil/core';\nimport { getTaxonomy } from '../../utils/api';\nimport { Category, Service } from '../../types';\n\n@Component({\n tag: 'hemfixarna-byggmax',\n styleUrl: 'hemfixarna-byggmax.scss',\n shadow: true,\n})\nexport class MyComponent {\n @State() category: Category | Service | null = null;\n @State() tree: Category | null = null;\n /**\n * Category slug\n */\n @Prop() slug: string;\n\n @Watch('slug')\n async fetchNewTaxonomy(newValue: string) {\n this.category = null;\n const res = await getTaxonomy(newValue);\n if (res?.code === 'not_found' || res?.code === 'rest_no_route') {\n console.log('taxonomy not found');\n } else if (res) {\n this.category = res;\n }\n }\n\n async componentWillLoad() {\n const tree = await getTaxonomy('category/bygg');\n if (tree?.code === 'not_found') {\n console.log('tree not found');\n } else if (tree) {\n this.tree = tree;\n }\n if (this.slug) {\n const res = await getTaxonomy(this.slug);\n if (res?.code === 'not_found') {\n console.log('taxonomy not found');\n } else if (res) {\n this.category = res;\n }\n }\n }\n\n render() {\n return <hemfixarna-service taxonomy={this.category} tree={this.tree}></hemfixarna-service>;\n }\n}\n"],"version":3}
package/dist/hemfixarna-components/hemfixarna-components.esm.js CHANGED
@@ -1,5 +1,5 @@
1
- import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-59e33b1d.js';
2
- export { s as setNonce } from './index-59e33b1d.js';
1
+ import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-06272934.js';
2
+ export { s as setNonce } from './index-06272934.js';
3
3
  import { g as globalScripts } from './app-globals-0f993ce5.js';
4
4
 
5
5
  /*
@@ -157,7 +157,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
157
157
 
158
158
  patchBrowser().then(options => {
159
159
  globalScripts();
160
- return bootstrapLazy([["hemfixarna-service",[[1,"hemfixarna-service",{"tree":[16],"taxonomy":[16],"modal":[32],"showModal":[32],"selectedCategory":[32],"selectedService":[32],"selectedProduct":[32],"step":[32]},[[0,"click","handleClick"]]]]],["hemfixarna-byggmax",[[1,"hemfixarna-byggmax",{"slug":[1],"category":[32],"tree":[32]}]]],["my-component",[[1,"my-component",{"selectedSlug":[32],"tooltipText":[32],"tree":[32]}]]]], options);
160
+ return bootstrapLazy([["hemfixarna-service",[[1,"hemfixarna-service",{"tree":[16],"taxonomy":[16],"modal":[32],"showModal":[32],"selectedCategory":[32],"selectedService":[32],"selectedProduct":[32],"amount":[32],"selectedParts":[32],"cart":[32],"step":[32]},[[0,"click","handleClick"]]]]],["hemfixarna-byggmax",[[1,"hemfixarna-byggmax",{"slug":[1],"category":[32],"tree":[32]}]]],["my-component",[[1,"my-component",{"selectedSlug":[32],"tooltipText":[32],"tree":[32]}]]]], options);
161
161
  });
162
162
 
163
163
  //# sourceMappingURL=hemfixarna-components.esm.js.map
package/dist/hemfixarna-components/hemfixarna-service.entry.js CHANGED
@@ -1,6 +1,6 @@
1
- import { r as registerInstance, g as getAssetPath, h, e as getElement } from './index-59e33b1d.js';
1
+ import { r as registerInstance, g as getAssetPath, h, e as getElement } from './index-06272934.js';
2
2
 
3
- const hemfixarnaCss = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap\"); :host{font-family:\"Inter\", sans-serif}:host .hemfixarna{width:100%}:host .hemfixarna_box{padding:2rem;display:flex;align-items:center;justify-content:space-between;max-width:500px;background:#fffaf2;border:1px solid #b7b7b7;width:100%;box-sizing:border-box;border-radius:0.25rem}:host .hemfixarna_btn{background:#e9d7ca;border:none;border-radius:60px;padding:0.5rem 1rem;font-weight:600;letter-spacing:0.5px;line-height:20px;font-size:15px;color:#474444}:host .hemfixarna_modal{position:fixed;padding:2rem;background:#fffaf2;top:50%;left:50%;z-index:1000;transition:0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);transform:translate(-50%, -50%) scale(0.7);opacity:0;height:50%;width:80%;max-width:700px;display:grid;grid-template-rows:20px auto;gap:0.5rem}:host .hemfixarna_modal--open{opacity:1;transform:translate(-50%, -50%) scale(1)}:host .hemfixarna_backdrop{z-index:999;position:fixed;background:#474444;top:0;left:0;bottom:0;right:0;opacity:0;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)}:host .hemfixarna_backdrop--open{opacity:0.3}:host .hemfixarna_content{height:100%;overflow:auto}:host .hemfixarna_content ul{display:grid;gap:1px;background:#b7b7b7}:host .hemfixarna_content li{background:#fff}:host .hemfixarna_content li>button{padding:1rem;height:100%;width:100%}:host .hemfixarna_crumbs{display:flex;align-items:center}:host .hemfixarna_crumbs li{padding-right:0.5rem}:host .hemfixarna_crumbs li:after{content:\"/\"}:host button,:host a{cursor:pointer;background:none;border:none}:host ul{list-style:none;margin:0;padding:0}";
3
+ const hemfixarnaCss = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap\"); :host{font-family:\"Inter\", sans-serif}:host .hemfixarna{width:100%}:host .hemfixarna_counter span{padding:0 0.5rem}:host .hemfixarna_counter button{background:#474444;border-radius:100%;color:#fff}:host .hemfixarna_terms{font-size:10px}:host .hemfixarna_logo{position:absolute;left:1rem;top:50%;transform:translateY(-50%);pointer-events:none}:host .hemfixarna_box{padding:2rem;display:flex;align-items:center;justify-content:space-between;max-width:500px;background:#fffaf2;border:1px solid #b7b7b7;width:100%;box-sizing:border-box;border-radius:0.25rem}:host .hemfixarna_btn{background:#e9d7ca;border:none;border-radius:60px;padding:0.5rem 1rem;font-weight:600;letter-spacing:0.5px;line-height:20px;font-size:15px;color:#474444}:host .hemfixarna_modal{position:fixed;padding:2rem;background:#fffaf2;top:50%;left:50%;z-index:1000;transition:0.1s all cubic-bezier(0.465, 0.183, 0.153, 0.946);transform:translate(-50%, -50%) scale(0.7);opacity:0;height:50%;width:80%;max-width:700px;display:grid;grid-template-rows:20px auto;gap:0.5rem}:host .hemfixarna_modal--open{opacity:1;transform:translate(-50%, -50%) scale(1)}:host .hemfixarna_backdrop{z-index:999;position:fixed;background:#474444;top:0;left:0;bottom:0;right:0;opacity:0;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)}:host .hemfixarna_backdrop--open{opacity:0.3}:host .hemfixarna_content{height:100%;overflow:auto}:host .hemfixarna_content ul{display:grid;gap:1px;background:#b7b7b7}:host .hemfixarna_content li{position:relative;background:#fff}:host .hemfixarna_content li>button{padding:1rem;height:100%;width:100%}:host .hemfixarna_crumbs{display:flex;align-items:center}:host .hemfixarna_crumbs li{padding-right:0.5rem}:host .hemfixarna_crumbs li:after{content:\"/\"}:host .hemfixarna_product{display:grid;gap:1rem;padding:1rem 0}:host .hemfixarna_product--grid{display:grid;grid-template-columns:1fr 1fr}:host .hemfixarna_product--grid>div{display:grid;gap:1rem}:host .hemfixarna_product--grid li,:host .hemfixarna_product--grid ul{background:none}:host .hemfixarna_product p,:host .hemfixarna_product h4{margin:0}:host .hemfixarna_product--top{display:grid;grid-template-columns:60px auto;gap:1rem}:host .hemfixarna_product--top h4{margin-bottom:0.5rem}:host h5,:host p{margin:0}:host button,:host a{cursor:pointer;background:none;border:none}:host ul{list-style:none;margin:0;padding:0}";
4
4
 
5
5
  const MyComponent = class {
6
6
  constructor(hostRef) {
@@ -10,6 +10,9 @@ const MyComponent = class {
10
10
  this.selectedCategory = undefined;
11
11
  this.selectedService = undefined;
12
12
  this.selectedProduct = undefined;
13
+ this.amount = 1;
14
+ this.selectedParts = [];
15
+ this.cart = [];
13
16
  this.step = 1;
14
17
  this.tree = undefined;
15
18
  this.taxonomy = undefined;
@@ -22,9 +25,7 @@ const MyComponent = class {
22
25
  this.setTaxonomy();
23
26
  }
24
27
  setTaxonomy() {
25
- var _a, _b;
26
- console.log(this.tree);
27
- console.log(this.taxonomy);
28
+ var _a, _b, _c;
28
29
  if (this.taxonomy) {
29
30
  if (((_a = this.taxonomy) === null || _a === void 0 ? void 0 : _a.taxonomy) === 'service_cat') {
30
31
  this.selectedCategory = this.taxonomy;
@@ -35,6 +36,15 @@ const MyComponent = class {
35
36
  this.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === this.taxonomy.ID));
36
37
  this.step = 3;
37
38
  }
39
+ else if (((_c = this.taxonomy) === null || _c === void 0 ? void 0 : _c.post_type) === 'ikea_product') {
40
+ this.selectedProduct = this.taxonomy;
41
+ this.selectedService = this.tree.sub_cats
42
+ .map(c => c.services)
43
+ .flat()
44
+ .find(s => s.products.find(p => p.ID === this.selectedProduct.ID));
45
+ this.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === this.selectedService.ID));
46
+ this.step = 4;
47
+ }
38
48
  }
39
49
  }
40
50
  // Open close modal && click outside event
@@ -59,31 +69,74 @@ const MyComponent = class {
59
69
  }
60
70
  }
61
71
  }
62
- // Handle set cat / service / product
72
+ // Handle step (routing)
63
73
  setDefaultState() {
64
- this.selectedCategory = null;
65
- this.selectedService = null;
66
- this.selectedProduct = null;
67
- this.step = 1;
74
+ this.setStep(1);
68
75
  }
69
76
  setSelectedCategory(category) {
70
77
  this.selectedCategory = category;
71
- this.selectedService = null;
72
- this.selectedProduct = null;
73
- this.step = 2;
78
+ this.setStep(2);
74
79
  }
75
80
  setSelectedService(service) {
76
81
  this.selectedService = service;
77
- this.selectedProduct = null;
78
- this.step = 3;
82
+ this.setStep(3);
79
83
  }
80
84
  setSelectedProduct(product) {
81
85
  this.selectedProduct = product;
82
- this.step = 4;
86
+ this.setStep(4);
87
+ }
88
+ setStep(step) {
89
+ this.selectedParts = [];
90
+ this.amount = 1;
91
+ if (step < 4) {
92
+ this.selectedProduct = null;
93
+ }
94
+ if (step < 3) {
95
+ this.selectedService = null;
96
+ }
97
+ if (step < 2) {
98
+ this.selectedCategory = null;
99
+ }
100
+ this.step = step;
101
+ }
102
+ //Handle cart and parts
103
+ addPart(id) {
104
+ const part = this.selectedParts.find(sp => sp.id === id);
105
+ if (part) {
106
+ part.amount++;
107
+ this.selectedParts = [...this.selectedParts];
108
+ }
109
+ else {
110
+ this.selectedParts = [...this.selectedParts, { id, amount: 1 }];
111
+ }
112
+ }
113
+ removePart(id) {
114
+ const part = this.selectedParts.find(sp => sp.id === id);
115
+ if (part && part.amount > 1) {
116
+ part.amount--;
117
+ this.selectedParts = [...this.selectedParts];
118
+ }
119
+ else {
120
+ this.selectedParts = this.selectedParts.filter(sp => sp.id !== id);
121
+ }
122
+ }
123
+ addProduct() {
124
+ this.amount++;
125
+ }
126
+ removeProduct() {
127
+ if (this.amount > 1) {
128
+ this.amount--;
129
+ }
130
+ }
131
+ addToCart() {
132
+ this.cart = [...this.cart.filter(cartitem => cartitem.id !== this.selectedProduct.ID), { id: this.selectedProduct.ID, amount: this.amount, parts: this.selectedParts }];
133
+ window.sessionStorage.setItem(`hemfixarna-${"byggmax"}-cart`, JSON.stringify(this.cart));
83
134
  }
84
135
  render() {
136
+ var _a, _b, _c;
85
137
  const logo = getAssetPath(`./assets/hemfixarna.svg`);
86
- return (h("div", { class: "hemfixarna" }, h("div", { class: "hemfixarna_box" }, h("img", { src: logo, width: 100 }), h("button", { onClick: () => this.openModal(), class: "hemfixarna_btn" }, "Best\u00E4ll montering")), this.modal && (h("div", null, h("div", { class: `hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}` }, this.tree && (h("ul", { class: "hemfixarna_crumbs" }, h("li", null, h("button", { onClick: () => this.setDefaultState() }, this.tree.name)), this.selectedCategory && this.step > 1 && (h("li", null, h("button", { onClick: () => this.setSelectedCategory(this.selectedCategory) }, this.selectedCategory.name))), this.selectedService && this.step > 2 && (h("li", null, h("button", { onClick: () => this.setSelectedService(this.selectedService) }, this.selectedService.post_title))), this.selectedProduct && this.step > 3 && (h("li", null, h("button", { onClick: () => this.setSelectedProduct(this.selectedProduct) }, this.selectedProduct.post_title))))), h("div", { class: "hemfixarna_content" }, this.step === 1 && this.tree && (h("div", null, h("ul", null, this.tree.sub_cats.map(c => (h("li", null, h("button", { onClick: () => this.setSelectedCategory(c) }, c.name))))))), this.step === 2 && this.selectedCategory && (h("div", null, h("ul", null, this.selectedCategory.services.map(s => (h("li", null, h("button", { onClick: () => this.setSelectedService(s) }, s.post_title))))))), this.step === 3 && this.selectedService && (h("div", null, h("ul", null, this.selectedService.products.map(p => (h("li", null, h("button", { onClick: () => this.setSelectedProduct(p) }, p.post_title))))))), this.step === 4 && this.selectedProduct && (h("div", null, h("h4", null, this.selectedProduct.post_title), this.selectedProduct.parts && (h("div", null, h("p", null, "Nedan listas delar"), h("ul", null, this.selectedProduct.parts.map(p => (h("li", null, p.post_title)))))), h("button", { class: "hemfixarna_btn" }, "Best\u00E4ll (ej aktiv \u00E4nnu)"))))), h("div", { class: `hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}` })))));
138
+ return (h("div", { class: "hemfixarna" }, h("div", { class: "hemfixarna_box" }, h("div", null, h("img", { src: logo, width: 100 }), ((_a = this.taxonomy) === null || _a === void 0 ? void 0 : _a.post_type) === 'ikea_product' ? (h("div", null, h("h5", null, this.taxonomy.post_title), h("p", null, "Pris fr\u00E5n: ", this.taxonomy.price, "kr"))) : null), h("button", { onClick: () => this.openModal(), class: "hemfixarna_btn" }, "Best\u00E4ll montering")), this.modal && (h("div", null, h("div", { class: `hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}` }, this.tree && (h("ul", { class: "hemfixarna_crumbs" }, h("li", null, h("button", { onClick: () => this.setDefaultState() }, this.tree.name)), this.selectedCategory && this.step > 1 && (h("li", null, h("button", { onClick: () => this.setSelectedCategory(this.selectedCategory) }, this.selectedCategory.name))), this.selectedService && this.step > 2 && (h("li", null, h("button", { onClick: () => this.setSelectedService(this.selectedService) }, this.selectedService.post_title))), this.selectedProduct && this.step > 3 && (h("li", null, h("button", { onClick: () => this.setSelectedProduct(this.selectedProduct) }, this.selectedProduct.post_title))))), h("div", { class: "hemfixarna_content" }, this.step === 1 && this.tree && (h("div", null, h("ul", null, this.tree.sub_cats.map(c => (h("li", null, c.icon && h("img", { class: "hemfixarna_logo", height: 30, src: c.icon, alt: c.name }), h("button", { onClick: () => this.setSelectedCategory(c) }, c.name))))))), this.step === 2 && this.selectedCategory && (h("div", null, h("ul", null, this.selectedCategory.services.map(s => (h("li", null, s.icon && h("img", { class: "hemfixarna_logo", height: 30, src: s.icon.url, alt: s.post_title }), h("button", { onClick: () => this.setSelectedService(s) }, s.post_title))))))), this.step === 3 && this.selectedService && (h("div", null, h("ul", null, this.selectedService.products.map(p => (h("li", null, p.icon && h("img", { class: "hemfixarna_logo", height: 30, src: p.icon, alt: p.post_title }), h("button", { onClick: () => this.setSelectedProduct(p) }, p.post_title))))))), this.step === 4 && this.selectedProduct && (h("div", { class: "hemfixarna_product" }, h("div", { class: "hemfixarna_product--top" }, this.selectedProduct.icon && h("img", { width: 60, src: this.selectedProduct.icon, alt: this.selectedProduct.post_title }), h("div", null, h("h4", null, this.selectedProduct.post_title), h("p", null, "Fr\u00E5n: ", this.selectedProduct.price, " kr"))), h("div", { class: "hemfixarna_product--grid" }, h("div", null, h("h4", null, "Ing\u00E5r alltid"), ((_b = this.selectedProduct.list) === null || _b === void 0 ? void 0 : _b.length) && (h("ul", null, this.selectedProduct.list.map(l => (h("li", { key: l.bullet }, l.bullet))))), h("p", { class: "hemfixarna_terms", innerHTML: this.selectedProduct.terms })), h("div", null, h("div", null, h("ul", null, h("li", null, h("p", null, "Antal ", this.selectedProduct.post_title), h("div", { class: "hemfixarna_counter" }, h("button", { onClick: () => this.removeProduct() }, "-"), h("span", null, this.amount), h("button", { onClick: () => this.addProduct() }, "+"))), ((_c = this.selectedProduct.parts) === null || _c === void 0 ? void 0 : _c.length) &&
139
+ this.selectedProduct.parts.map(p => (h("li", { class: "hemfixarna_part" }, h("p", null, p.post_title), h("div", { class: "hemfixarna_counter" }, h("button", { onClick: () => this.removePart(p.ID) }, "-"), h("span", null, this.selectedParts.find(sp => sp.id === p.ID) ? this.selectedParts.find(sp => sp.id === p.ID).amount : 0), h("button", { onClick: () => this.addPart(p.ID) }, "+"))))))), h("div", null, h("button", { onClick: () => this.addToCart(), class: "hemfixarna_btn" }, "L\u00E4gg till")))))))), h("div", { class: `hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}` })))));
87
140
  }
88
141
  static get assetsDirs() { return ["assets"]; }
89
142
  get el() { return getElement(this); }
package/dist/hemfixarna-components/hemfixarna-service.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"hemfixarna-service.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/hemfixarna-service/hemfixarna.scss?tag=hemfixarna-service&encapsulation=shadow","./src/components/hemfixarna-service/hemfixarna-service.tsx"],"sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');\n\n$yellow: #fffaf2;\n$grey: #b7b7b7;\n$brown: #e9d7ca;\n$black: #474444;\n$white: #fff;\n\n:host {\n font-family: 'Inter', sans-serif;\n .hemfixarna {\n width: 100%;\n &_box {\n padding: 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n max-width: 500px;\n background: $yellow;\n border: 1px solid $grey;\n width: 100%;\n box-sizing: border-box;\n border-radius: 0.25rem;\n }\n &_btn {\n background: $brown;\n border: none;\n border-radius: 60px;\n padding: 0.5rem 1rem;\n font-weight: 600;\n letter-spacing: 0.5px;\n line-height: 20px;\n font-size: 15px;\n color: $black;\n }\n &_modal {\n position: fixed;\n padding: 2rem;\n background: $yellow;\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: 50%;\n width: 80%;\n max-width: 700px;\n display: grid;\n grid-template-rows: 20px auto;\n gap: 0.5rem;\n &--open {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n }\n &_backdrop {\n z-index: 999;\n position: fixed;\n background: $black;\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 &--open {\n opacity: 0.3;\n }\n }\n &_content {\n height: 100%;\n overflow: auto;\n ul {\n display: grid;\n gap: 1px;\n background: $grey;\n }\n li {\n background: $white;\n > button {\n padding: 1rem;\n height: 100%;\n width: 100%;\n }\n }\n }\n &_crumbs {\n display: flex;\n align-items: center;\n li {\n padding-right: 0.5rem;\n &:after {\n content: '/';\n }\n }\n }\n }\n button,\n a {\n cursor: pointer;\n background: none;\n border: none;\n }\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n}\n","import { Component, Prop, getAssetPath, h, State, Listen, Element, Watch } from '@stencil/core';\nimport { Category, Product, Service } from '../../types';\n\n@Component({\n tag: 'hemfixarna-service',\n styleUrl: 'hemfixarna.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class MyComponent {\n @State() modal: boolean = false;\n @State() showModal: boolean = false;\n @State() selectedCategory: Category | null;\n @State() selectedService: Service | null;\n @State() selectedProduct: Product | null;\n @State() step: number = 1;\n @Element() private el: HTMLElement;\n\n @Prop() tree: Category | null;\n @Prop() taxonomy: Category | Service | Product | null;\n\n // Handle initial state\n componentWillLoad() {\n this.setTaxonomy();\n }\n\n @Watch('taxonomy')\n setStartingState() {\n this.setTaxonomy();\n }\n\n setTaxonomy() {\n console.log(this.tree);\n console.log(this.taxonomy);\n if (this.taxonomy) {\n if ((this.taxonomy as Category)?.taxonomy === 'service_cat') {\n this.selectedCategory = this.taxonomy as Category;\n this.step = 2;\n } else if ((this.taxonomy as Service)?.post_type === 'service') {\n this.selectedService = this.taxonomy as Service;\n this.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === (this.taxonomy as Service).ID));\n this.step = 3;\n }\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 const el = this.el.shadowRoot.querySelector('.hemfixarna_modal');\n if (el) {\n const isClickInside = el.contains(e.composedPath()[0] as HTMLInputElement);\n if (!isClickInside) {\n this.closeModal();\n }\n }\n }\n\n // Handle set cat / service / product\n setDefaultState() {\n this.selectedCategory = null;\n this.selectedService = null;\n this.selectedProduct = null;\n this.step = 1;\n }\n setSelectedCategory(category: Category) {\n this.selectedCategory = category;\n this.selectedService = null;\n this.selectedProduct = null;\n this.step = 2;\n }\n setSelectedService(service: Service) {\n this.selectedService = service;\n this.selectedProduct = null;\n this.step = 3;\n }\n setSelectedProduct(product: Product) {\n this.selectedProduct = product;\n this.step = 4;\n }\n\n render() {\n const logo = getAssetPath(`./assets/hemfixarna.svg`);\n\n return (\n <div class=\"hemfixarna\">\n <div class=\"hemfixarna_box\">\n <img src={logo} width={100} />\n <button onClick={() => this.openModal()} class=\"hemfixarna_btn\">\n Beställ montering\n </button>\n </div>\n {this.modal && (\n <div>\n <div class={`hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}`}>\n {/* // CRUMBS */}\n {this.tree && (\n <ul class=\"hemfixarna_crumbs\">\n <li>\n <button onClick={() => this.setDefaultState()}>{this.tree.name}</button>\n </li>\n {this.selectedCategory && this.step > 1 && (\n <li>\n <button onClick={() => this.setSelectedCategory(this.selectedCategory)}>{this.selectedCategory.name}</button>\n </li>\n )}\n {this.selectedService && this.step > 2 && (\n <li>\n <button onClick={() => this.setSelectedService(this.selectedService)}>{this.selectedService.post_title}</button>\n </li>\n )}\n {this.selectedProduct && this.step > 3 && (\n <li>\n <button onClick={() => this.setSelectedProduct(this.selectedProduct)}>{this.selectedProduct.post_title}</button>\n </li>\n )}\n </ul>\n )}\n <div class=\"hemfixarna_content\">\n {/* // IF AT TOP LEVEL (step 1) */}\n {this.step === 1 && this.tree && (\n <div>\n <ul>\n {this.tree.sub_cats.map(c => (\n <li>\n <button onClick={() => this.setSelectedCategory(c)}>{c.name}</button>\n </li>\n ))}\n </ul>\n </div>\n )}\n {/* // IF SELECTED CATEGORY (step 2) */}\n {this.step === 2 && this.selectedCategory && (\n <div>\n <ul>\n {this.selectedCategory.services.map(s => (\n <li>\n <button onClick={() => this.setSelectedService(s)}>{s.post_title}</button>\n </li>\n ))}\n </ul>\n </div>\n )}\n {/* // IF SELECTED SERVICE (step 3) */}\n {this.step === 3 && this.selectedService && (\n <div>\n <ul>\n {this.selectedService.products.map(p => (\n <li>\n <button onClick={() => this.setSelectedProduct(p)}>{p.post_title}</button>\n </li>\n ))}\n </ul>\n </div>\n )}\n {/* // IF SELECTED PRODUCT (step 4) */}\n {this.step === 4 && this.selectedProduct && (\n <div>\n <h4>{this.selectedProduct.post_title}</h4>\n {this.selectedProduct.parts && (\n <div>\n <p>Nedan listas delar</p>\n <ul>\n {this.selectedProduct.parts.map(p => (\n <li>{p.post_title}</li>\n ))}\n </ul>\n </div>\n )}\n <button class=\"hemfixarna_btn\">Beställ (ej aktiv ännu)</button>\n </div>\n )}\n {/* // IF CHECKOUT (step 5) */}\n </div>\n </div>\n <div class={`hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}`}></div>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"hemfixarna-service.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/hemfixarna-service/hemfixarna.scss?tag=hemfixarna-service&encapsulation=shadow","./src/components/hemfixarna-service/hemfixarna-service.tsx"],"sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');\n\n$yellow: #fffaf2;\n$grey: #b7b7b7;\n$brown: #e9d7ca;\n$black: #474444;\n$white: #fff;\n\n:host {\n font-family: 'Inter', sans-serif;\n .hemfixarna {\n width: 100%;\n &_counter {\n span {\n padding: 0 0.5rem;\n }\n button {\n background: $black;\n border-radius: 100%;\n color: $white;\n }\n }\n &_terms {\n font-size: 10px;\n }\n &_logo {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n }\n &_box {\n padding: 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n max-width: 500px;\n background: $yellow;\n border: 1px solid $grey;\n width: 100%;\n box-sizing: border-box;\n border-radius: 0.25rem;\n }\n &_btn {\n background: $brown;\n border: none;\n border-radius: 60px;\n padding: 0.5rem 1rem;\n font-weight: 600;\n letter-spacing: 0.5px;\n line-height: 20px;\n font-size: 15px;\n color: $black;\n }\n &_modal {\n position: fixed;\n padding: 2rem;\n background: $yellow;\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: 50%;\n width: 80%;\n max-width: 700px;\n display: grid;\n grid-template-rows: 20px auto;\n gap: 0.5rem;\n &--open {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n }\n &_backdrop {\n z-index: 999;\n position: fixed;\n background: $black;\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 &--open {\n opacity: 0.3;\n }\n }\n &_content {\n height: 100%;\n overflow: auto;\n ul {\n display: grid;\n gap: 1px;\n background: $grey;\n }\n li {\n position: relative;\n background: $white;\n > button {\n padding: 1rem;\n height: 100%;\n width: 100%;\n }\n }\n }\n &_crumbs {\n display: flex;\n align-items: center;\n li {\n padding-right: 0.5rem;\n &:after {\n content: '/';\n }\n }\n }\n &_product {\n display: grid;\n gap: 1rem;\n &--grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n > div {\n display: grid;\n gap: 1rem;\n }\n li,\n ul {\n background: none;\n }\n }\n padding: 1rem 0;\n p,\n h4 {\n margin: 0;\n }\n &--top {\n display: grid;\n grid-template-columns: 60px auto;\n gap: 1rem;\n h4 {\n margin-bottom: 0.5rem;\n }\n }\n }\n }\n h5,\n p {\n margin: 0;\n }\n button,\n a {\n cursor: pointer;\n background: none;\n border: none;\n }\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n}\n","import { Component, Prop, getAssetPath, h, State, Listen, Element, Watch } from '@stencil/core';\nimport { Category, Product, Service } from '../../types';\n\n@Component({\n tag: 'hemfixarna-service',\n styleUrl: 'hemfixarna.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class MyComponent {\n @State() modal: boolean = false;\n @State() showModal: boolean = false;\n @State() selectedCategory: Category | null;\n @State() selectedService: Service | null;\n @State() selectedProduct: Product | null;\n @State() amount: number = 1;\n @State() selectedParts: Array<{ id: number; amount: number }> = [];\n @State() cart: Array<{ id: number; amount: number; parts: Array<{ id: number; amount: number }> }> = [];\n @State() step: number = 1;\n @Element() private el: HTMLElement;\n\n @Prop() tree: Category | null;\n @Prop() taxonomy: Category | Service | Product | null;\n\n // Handle initial state\n componentWillLoad() {\n this.setTaxonomy();\n }\n\n @Watch('taxonomy')\n setStartingState() {\n this.setTaxonomy();\n }\n\n setTaxonomy() {\n if (this.taxonomy) {\n if ((this.taxonomy as Category)?.taxonomy === 'service_cat') {\n this.selectedCategory = this.taxonomy as Category;\n this.step = 2;\n } else if ((this.taxonomy as Service)?.post_type === 'service') {\n this.selectedService = this.taxonomy as Service;\n this.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === (this.taxonomy as Service).ID));\n this.step = 3;\n } else if ((this.taxonomy as Product)?.post_type === 'ikea_product') {\n this.selectedProduct = this.taxonomy as Product;\n this.selectedService = this.tree.sub_cats\n .map(c => c.services)\n .flat()\n .find(s => s.products.find(p => p.ID === this.selectedProduct.ID));\n this.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === this.selectedService.ID));\n this.step = 4;\n }\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 const el = this.el.shadowRoot.querySelector('.hemfixarna_modal');\n if (el) {\n const isClickInside = el.contains(e.composedPath()[0] as HTMLInputElement);\n if (!isClickInside) {\n this.closeModal();\n }\n }\n }\n\n // Handle step (routing)\n setDefaultState() {\n this.setStep(1);\n }\n setSelectedCategory(category: Category) {\n this.selectedCategory = category;\n this.setStep(2);\n }\n setSelectedService(service: Service) {\n this.selectedService = service;\n this.setStep(3);\n }\n setSelectedProduct(product: Product) {\n this.selectedProduct = product;\n this.setStep(4);\n }\n\n setStep(step: number) {\n this.selectedParts = [];\n this.amount = 1;\n if (step < 4) {\n this.selectedProduct = null;\n }\n if (step < 3) {\n this.selectedService = null;\n }\n if (step < 2) {\n this.selectedCategory = null;\n }\n this.step = step;\n }\n\n //Handle cart and parts\n addPart(id: number) {\n const part = this.selectedParts.find(sp => sp.id === id);\n if (part) {\n part.amount++;\n this.selectedParts = [...this.selectedParts];\n } else {\n this.selectedParts = [...this.selectedParts, { id, amount: 1 }];\n }\n }\n\n removePart(id: number) {\n const part = this.selectedParts.find(sp => sp.id === id);\n if (part && part.amount > 1) {\n part.amount--;\n this.selectedParts = [...this.selectedParts];\n } else {\n this.selectedParts = this.selectedParts.filter(sp => sp.id !== id);\n }\n }\n\n addProduct() {\n this.amount++;\n }\n\n removeProduct() {\n if (this.amount > 1) {\n this.amount--;\n }\n }\n\n addToCart() {\n this.cart = [...this.cart.filter(cartitem => cartitem.id !== this.selectedProduct.ID), { id: this.selectedProduct.ID, amount: this.amount, parts: this.selectedParts }];\n window.sessionStorage.setItem(`hemfixarna-${process.env.BUSINESS}-cart`, JSON.stringify(this.cart));\n }\n\n render() {\n const logo = getAssetPath(`./assets/hemfixarna.svg`);\n\n return (\n <div class=\"hemfixarna\">\n <div class=\"hemfixarna_box\">\n <div>\n <img src={logo} width={100} />\n {(this.taxonomy as Product)?.post_type === 'ikea_product' ? (\n <div>\n <h5>{(this.taxonomy as Product).post_title}</h5>\n <p>Pris från: {(this.taxonomy as Product).price}kr</p>\n </div>\n ) : null}\n </div>\n <button onClick={() => this.openModal()} class=\"hemfixarna_btn\">\n Beställ montering\n </button>\n </div>\n {this.modal && (\n <div>\n <div class={`hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}`}>\n {/* // CRUMBS */}\n {this.tree && (\n <ul class=\"hemfixarna_crumbs\">\n <li>\n <button onClick={() => this.setDefaultState()}>{this.tree.name}</button>\n </li>\n {this.selectedCategory && this.step > 1 && (\n <li>\n <button onClick={() => this.setSelectedCategory(this.selectedCategory)}>{this.selectedCategory.name}</button>\n </li>\n )}\n {this.selectedService && this.step > 2 && (\n <li>\n <button onClick={() => this.setSelectedService(this.selectedService)}>{this.selectedService.post_title}</button>\n </li>\n )}\n {this.selectedProduct && this.step > 3 && (\n <li>\n <button onClick={() => this.setSelectedProduct(this.selectedProduct)}>{this.selectedProduct.post_title}</button>\n </li>\n )}\n </ul>\n )}\n <div class=\"hemfixarna_content\">\n {/* // IF AT TOP LEVEL (step 1) */}\n {this.step === 1 && this.tree && (\n <div>\n <ul>\n {this.tree.sub_cats.map(c => (\n <li>\n {c.icon && <img class=\"hemfixarna_logo\" height={30} src={c.icon} alt={c.name} />}\n <button onClick={() => this.setSelectedCategory(c)}>{c.name}</button>\n </li>\n ))}\n </ul>\n </div>\n )}\n {/* // IF SELECTED CATEGORY (step 2) */}\n {this.step === 2 && this.selectedCategory && (\n <div>\n <ul>\n {this.selectedCategory.services.map(s => (\n <li>\n {s.icon && <img class=\"hemfixarna_logo\" height={30} src={s.icon.url} alt={s.post_title} />}\n <button onClick={() => this.setSelectedService(s)}>{s.post_title}</button>\n </li>\n ))}\n </ul>\n </div>\n )}\n {/* // IF SELECTED SERVICE (step 3) */}\n {this.step === 3 && this.selectedService && (\n <div>\n <ul>\n {this.selectedService.products.map(p => (\n <li>\n {p.icon && <img class=\"hemfixarna_logo\" height={30} src={p.icon} alt={p.post_title} />}\n <button onClick={() => this.setSelectedProduct(p)}>{p.post_title}</button>\n </li>\n ))}\n </ul>\n </div>\n )}\n {/* // IF SELECTED PRODUCT (step 4) */}\n {this.step === 4 && this.selectedProduct && (\n <div class=\"hemfixarna_product\">\n <div class=\"hemfixarna_product--top\">\n {this.selectedProduct.icon && <img width={60} src={this.selectedProduct.icon} alt={this.selectedProduct.post_title} />}\n <div>\n <h4>{this.selectedProduct.post_title}</h4>\n <p>Från: {this.selectedProduct.price} kr</p>\n </div>\n </div>\n\n <div class=\"hemfixarna_product--grid\">\n <div>\n <h4>Ingår alltid</h4>\n {this.selectedProduct.list?.length && (\n <ul>\n {this.selectedProduct.list.map(l => (\n <li key={l.bullet}>{l.bullet}</li>\n ))}\n </ul>\n )}\n <p class=\"hemfixarna_terms\" innerHTML={this.selectedProduct.terms}></p>\n </div>\n <div>\n <div>\n <ul>\n <li>\n <p>Antal {this.selectedProduct.post_title}</p>\n <div class=\"hemfixarna_counter\">\n <button onClick={() => this.removeProduct()}>-</button>\n <span>{this.amount}</span>\n <button onClick={() => this.addProduct()}>+</button>\n </div>\n </li>\n {this.selectedProduct.parts?.length &&\n this.selectedProduct.parts.map(p => (\n <li class=\"hemfixarna_part\">\n <p>{p.post_title}</p>\n <div class=\"hemfixarna_counter\">\n <button onClick={() => this.removePart(p.ID)}>-</button>\n <span>{this.selectedParts.find(sp => sp.id === p.ID) ? this.selectedParts.find(sp => sp.id === p.ID).amount : 0}</span>\n <button onClick={() => this.addPart(p.ID)}>+</button>\n </div>\n </li>\n ))}\n </ul>\n </div>\n <div>\n <button onClick={() => this.addToCart()} class=\"hemfixarna_btn\">\n Lägg till\n </button>\n </div>\n </div>\n </div>\n </div>\n )}\n {/* // IF CHECKOUT (step 5) */}\n </div>\n </div>\n <div class={`hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}`}></div>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
package/dist/hemfixarna-components/{index-59e33b1d.js → index-06272934.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  const NAMESPACE = 'hemfixarna-components';
2
- const BUILD = /* hemfixarna-components */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: true, disconnectedCallback: false, dynamicImportShim: false, element: false, event: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: true, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: true, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: false, safari10: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: false, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
2
+ const BUILD = /* hemfixarna-components */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: true, disconnectedCallback: false, dynamicImportShim: false, element: false, event: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: true, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: true, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: false, safari10: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: false, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
3
3
  const Env = /* hemfixarna-components */ {};
4
4
 
5
5
  /**
@@ -3394,4 +3394,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
3394
3394
 
3395
3395
  export { BUILD as B, CSS as C, H, NAMESPACE as N, promiseResolve as a, bootstrapLazy as b, consoleDevInfo as c, doc as d, getElement as e, getAssetPath as g, h, plt as p, registerInstance as r, setNonce as s, win as w };
3396
3396
 
3397
- //# sourceMappingURL=index-59e33b1d.js.map
3397
+ //# sourceMappingURL=index-06272934.js.map