hemfixarna-web-components 0.3.0 → 0.3.1

package/dist/hemfixarna-components/my-component.entry.js.map

@@ -1 +0,0 @@
-{"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}