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/my-component.entry.js CHANGED
@@ -1,7 +1,12 @@
1
- import { r as registerInstance, g as getAssetPath, h } from './index-59e33b1d.js';
2
- import { g as getTaxonomy } from './api-067d9d1c.js';
1
+ import { r as registerInstance, g as getAssetPath, h } from './index-06272934.js';
2
+ import { g as getTaxonomy } from './api-609888bb.js';
3
3
 
4
- const myComponentCss = ":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 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}";
4
+ var Business;
5
+ (function (Business) {
6
+ Business["byggmax"] = "byggmax";
7
+ })(Business || (Business = {}));
8
+
9
+ const myComponentCss = "@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 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}";
5
10
 
6
11
  const MyComponent = class {
7
12
  constructor(hostRef) {
@@ -12,7 +17,7 @@ const MyComponent = class {
12
17
  this.tree = null;
13
18
  }
14
19
  async componentWillLoad() {
15
- const tree = await getTaxonomy('service_cat/bygg');
20
+ const tree = await getTaxonomy("category/bygg");
16
21
  if ((tree === null || tree === void 0 ? void 0 : tree.code) === 'not_found') {
17
22
  console.log('tree not found');
18
23
  }
@@ -21,7 +26,7 @@ const MyComponent = class {
21
26
  }
22
27
  }
23
28
  getExample() {
24
- return `<hemfixarna-byggmax${this.selectedSlug ? ` slug="${this.selectedSlug}" ` : ''} />`;
29
+ return `<hemfixarna-${"byggmax"}${this.selectedSlug ? ` slug="${this.selectedSlug}" ` : ''} />`;
25
30
  }
26
31
  copyExample() {
27
32
  navigator.clipboard.writeText(this.getExample());
@@ -32,10 +37,21 @@ const MyComponent = class {
32
37
  }
33
38
  copyCdn() {
34
39
  navigator.clipboard.writeText(this.cdnLink);
40
+ this.tooltipText = 'Text kopierad';
41
+ setTimeout(() => {
42
+ this.tooltipText = 'Kopiera till urklipp';
43
+ }, 2000);
44
+ }
45
+ copyNpmInstall() {
46
+ navigator.clipboard.writeText('npm i hemfixarna-web-components');
47
+ this.tooltipText = 'Text kopierad';
48
+ setTimeout(() => {
49
+ this.tooltipText = 'Kopiera till urklipp';
50
+ }, 2000);
35
51
  }
36
52
  render() {
37
53
  const copy = getAssetPath(`./assets/copy.png`);
38
- 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)), 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.copyCdn(), 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, `service_cat/${c.slug}`)), h("div", null, h("button", { onClick: () => navigator.clipboard.writeText(`service_cat/${c.slug}`) }, "Kopiera slug"), h("button", { onClick: () => (this.selectedSlug = `service_cat/${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")))))))))))));
54
+ 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)), "byggmax" === 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")))))))))))))))));
39
55
  }
40
56
  };
41
57
  MyComponent.style = myComponentCss;
package/dist/hemfixarna-components/my-component.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"my-component.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/my-component/my-component.scss?tag=my-component&encapsulation=shadow","./src/components/my-component/my-component.tsx"],"sourcesContent":[":host {\n .hemfixarna {\n &_example {\n margin-bottom: 1rem;\n background: #000;\n padding: 1rem;\n color: #fff;\n display: flex;\n justify-content: space-between;\n cursor: pointer;\n max-width: 500px;\n box-sizing: border-box;\n position: relative;\n\n &--tooltip {\n background: #000;\n top: -3rem;\n font-size: 16px;\n left: 40%;\n color: white;\n padding: 0.5rem;\n position: absolute;\n opacity: 0;\n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #000 transparent transparent transparent;\n }\n }\n &:hover {\n .hemfixarna_example--tooltip {\n opacity: 1;\n }\n }\n p {\n font-size: 14px;\n }\n img {\n filter: invert(1);\n }\n }\n &_install {\n display: grid;\n gap: 0.5rem;\n margin-top: 1rem;\n }\n &_categories {\n max-height: 100%;\n overflow: auto;\n position: relative;\n &--label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.5rem;\n button {\n background: #3f3a92;\n border: none;\n font-weight: 600;\n padding: 0.2rem 0.6rem;\n border-radius: 10px;\n margin-right: 0.5rem;\n color: #ece8e8;\n &:active {\n transform: scale(0.95);\n }\n }\n &--big {\n font-weight: 600;\n background: #9f9da9;\n }\n }\n }\n }\n p {\n margin: 0;\n }\n span {\n color: darkolivegreen;\n font-size: 10px;\n }\n button {\n cursor: pointer;\n }\n > div {\n display: grid;\n gap: 2rem;\n width: 100%;\n grid-template-columns: 1fr 1fr;\n height: 100vh;\n place-items: center;\n overflow: hidden;\n padding: 1rem 2rem;\n box-sizing: border-box;\n > * {\n width: 100%;\n }\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n ul {\n background: #000;\n gap: 1px;\n display: grid;\n }\n li {\n padding-left: 1rem;\n background: #fff;\n }\n }\n }\n}\n","import { Component, State, getAssetPath, h } from '@stencil/core';\nimport { Category } from '../../types';\nimport { getTaxonomy } from '../../utils/api';\n\n@Component({\n tag: 'my-component',\n styleUrl: 'my-component.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 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 }\n\n getExample() {\n return `<hemfixarna-byggmax${this.selectedSlug ? ` slug=\"${this.selectedSlug}\" ` : ''} />`;\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\"/>';\n\n copyCdn() {\n navigator.clipboard.writeText(this.cdnLink);\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 <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.copyCdn()} 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>{`service_cat/${c.slug}`}</span>\n </div>\n <div>\n <button onClick={() => navigator.clipboard.writeText(`service_cat/${c.slug}`)}>Kopiera slug</button>\n <button onClick={() => (this.selectedSlug = `service_cat/${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 </li>\n ))}\n </ul>\n </li>\n ))}\n </ul>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"my-component.entry.esm.js","mappings":"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","names":[],"sources":["./src/types/index.ts","./src/components/my-component/my-component.scss?tag=my-component&encapsulation=shadow","./src/components/my-component/my-component.tsx"],"sourcesContent":["interface Part {\n ID: number;\n post_author: number;\n post_date: Date;\n post_date_gmt: Date;\n post_content: string;\n post_title: string;\n post_excerpt: string;\n post_status: string;\n comment_status: string;\n ping_status: string;\n post_password: string;\n post_name: string;\n to_ping: string;\n pinged: string;\n post_modified: Date;\n post_modified_gmt: Date;\n post_content_filtered: string;\n post_parent: 0 | 1;\n guid: string;\n menu_order: 0;\n post_type: string;\n post_mime_type: string;\n comment_count: number;\n filter: string;\n}\n\ninterface Product {\n ID: number;\n post_author: string;\n post_date: Date;\n post_date_gmt: Date;\n post_content: string;\n post_title: string;\n post_excerpt: string;\n post_status: string;\n comment_status: string;\n ping_status: string;\n post_password: string;\n post_name: string;\n to_ping: string;\n pinged: string;\n post_modified: Date;\n post_modified_gmt: Date;\n post_content_filtered: string;\n post_parent: 0;\n guid: string;\n menu_order: 0;\n post_type: string;\n post_mime_type: string;\n comment_count: 0;\n filter: string;\n price: number;\n icon?: string;\n parts?: Array<Part>;\n list: Array<{ bullet: string }>;\n terms: string;\n}\n\ninterface Service {\n ID: 41857;\n icon?: {\n url: string;\n };\n post_author: 34419;\n post_date: Date;\n post_date_gmt: Date;\n post_content: string;\n post_title: string;\n post_excerpt: string;\n post_status: string;\n comment_status: string;\n ping_status: string;\n post_password: string;\n post_name: string;\n to_ping: string;\n pinged: string;\n post_modified: Date;\n post_modified_gmt: Date;\n post_content_filtered: string;\n post_parent: 0;\n guid: string;\n menu_order: 0;\n post_type: 'service';\n post_mime_type: string;\n comment_count: 0;\n filter: string;\n products: Array<Product>;\n}\n\ninterface Category {\n count: number;\n description: string;\n name: string;\n icon?: string;\n parent: 0 | 1;\n slug: string;\n taxonomy: 'service_cat';\n term_group: 0 | 1;\n term_id: number;\n term_order: string;\n term_taxonomy_id: number;\n sub_cats?: Array<Category>;\n services?: Array<Service>;\n}\n\nexport enum Business {\n byggmax = 'byggmax',\n}\n\nexport type { Category, Product, Service, Part };\n","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');\n\n:host {\n font-family: 'Inter', sans-serif;\n\n .hemfixarna {\n &_example {\n margin-bottom: 1rem;\n background: #000;\n padding: 1rem;\n color: #fff;\n display: flex;\n justify-content: space-between;\n cursor: pointer;\n max-width: 500px;\n box-sizing: border-box;\n position: relative;\n\n &--tooltip {\n background: #000;\n top: -3rem;\n font-size: 16px;\n left: 40%;\n color: white;\n padding: 0.5rem;\n position: absolute;\n opacity: 0;\n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #000 transparent transparent transparent;\n }\n }\n &:hover {\n .hemfixarna_example--tooltip {\n opacity: 1;\n }\n }\n p {\n font-size: 14px;\n }\n img {\n filter: invert(1);\n }\n }\n &_install {\n display: grid;\n gap: 0.5rem;\n margin-top: 1rem;\n }\n &_categories {\n max-height: 100%;\n overflow: auto;\n position: relative;\n &--label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.5rem;\n button {\n background: #3f3a92;\n border: none;\n font-weight: 600;\n padding: 0.2rem 0.6rem;\n border-radius: 10px;\n margin-right: 0.5rem;\n color: #ece8e8;\n &:active {\n transform: scale(0.95);\n }\n }\n &--big {\n font-weight: 600;\n background: #9f9da9;\n }\n }\n }\n }\n p {\n margin: 0;\n }\n span {\n color: darkolivegreen;\n font-size: 10px;\n }\n button {\n cursor: pointer;\n }\n > div {\n display: grid;\n gap: 2rem;\n width: 100%;\n grid-template-columns: 1fr 1fr;\n height: 100vh;\n place-items: center;\n overflow: hidden;\n padding: 1rem 2rem;\n box-sizing: border-box;\n > * {\n width: 100%;\n }\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n ul {\n background: #000;\n gap: 1px;\n display: grid;\n }\n li {\n padding-left: 1rem;\n background: #fff;\n }\n }\n }\n}\n","import { Component, State, getAssetPath, h } from '@stencil/core';\nimport { Business, Category } from '../../types';\nimport { getTaxonomy } from '../../utils/api';\n\n@Component({\n tag: 'my-component',\n styleUrl: 'my-component.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 async componentWillLoad() {\n const tree = await getTaxonomy(process.env.DEFAULT_CATEGORY);\n if (tree?.code === 'not_found') {\n console.log('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}\" ` : ''} />`;\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\"/>';\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"],"version":3}
package/dist/types/components/hemfixarna-service/hemfixarna-service.d.ts CHANGED
@@ -5,6 +5,19 @@ export declare class MyComponent {
5
5
  selectedCategory: Category | null;
6
6
  selectedService: Service | null;
7
7
  selectedProduct: Product | null;
8
+ amount: number;
9
+ selectedParts: Array<{
10
+ id: number;
11
+ amount: number;
12
+ }>;
13
+ cart: Array<{
14
+ id: number;
15
+ amount: number;
16
+ parts: Array<{
17
+ id: number;
18
+ amount: number;
19
+ }>;
20
+ }>;
8
21
  step: number;
9
22
  private el;
10
23
  tree: Category | null;
@@ -19,5 +32,11 @@ export declare class MyComponent {
19
32
  setSelectedCategory(category: Category): void;
20
33
  setSelectedService(service: Service): void;
21
34
  setSelectedProduct(product: Product): void;
35
+ setStep(step: number): void;
36
+ addPart(id: number): void;
37
+ removePart(id: number): void;
38
+ addProduct(): void;
39
+ removeProduct(): void;
40
+ addToCart(): void;
22
41
  render(): any;
23
42
  }
package/dist/types/components/my-component/my-component.d.ts CHANGED
@@ -8,5 +8,6 @@ export declare class MyComponent {
8
8
  copyExample(): void;
9
9
  cdnLink: string;
10
10
  copyCdn(): void;
11
+ copyNpmInstall(): void;
11
12
  render(): any;
12
13
  }
package/dist/types/types/index.d.ts CHANGED
@@ -50,7 +50,7 @@ interface Product {
50
50
  comment_count: 0;
51
51
  filter: string;
52
52
  price: number;
53
- icon: string;
53
+ icon?: string;
54
54
  parts?: Array<Part>;
55
55
  list: Array<{
56
56
  bullet: string;
@@ -59,6 +59,9 @@ interface Product {
59
59
  }
60
60
  interface Service {
61
61
  ID: 41857;
62
+ icon?: {
63
+ url: string;
64
+ };
62
65
  post_author: 34419;
63
66
  post_date: Date;
64
67
  post_date_gmt: Date;
@@ -88,6 +91,7 @@ interface Category {
88
91
  count: number;
89
92
  description: string;
90
93
  name: string;
94
+ icon?: string;
91
95
  parent: 0 | 1;
92
96
  slug: string;
93
97
  taxonomy: 'service_cat';
@@ -98,4 +102,7 @@ interface Category {
98
102
  sub_cats?: Array<Category>;
99
103
  services?: Array<Service>;
100
104
  }
105
+ export declare enum Business {
106
+ byggmax = "byggmax"
107
+ }
101
108
  export type { Category, Product, Service, Part };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hemfixarna-web-components",
3
- "version": "0.1.2",
3
+ "version": "0.2.0",
4
4
  "author": "Afonso <info@afonso.se> (http://afonso.se)",
5
5
  "description": "Web components to integrate with hemfixarna api",
6
6
  "main": "dist/index.cjs.js",
@@ -28,11 +28,12 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@stencil/core": "^3.0.0",
31
- "@stencil/sass": "^3.0.1"
31
+ "@stencil/sass": "^3.0.1",
32
+ "rollup-plugin-dotenv": "^0.4.1"
32
33
  },
33
34
  "devDependencies": {
34
35
  "@types/jest": "^27.5.2",
35
- "@types/node": "^16.18.11",
36
+ "@types/node": "^20.1.0",
36
37
  "jest": "^27.5.1",
37
38
  "jest-cli": "^27.5.1",
38
39
  "puppeteer": "^19.5.2"
package/dist/hemfixarna-components/api-067d9d1c.js.map DELETED
@@ -1 +0,0 @@
1
- {"file":"api-067d9d1c.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,MAAM,IAAI,GAAG,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;EACzD,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 const path = type === 'service' ? 'service' : 'category';\n try {\n const res = await fetch(`https://hemfixare.dev.afonso.se/wp-json/headless/${path}/${slug}`);\n return await res.json();\n } catch (error) {\n console.log(error);\n }\n};\n\nexport { getTaxonomy };\n"],"version":3}