From 65a2df2a86f0b4b26c83bce21185486681d6ae79 Mon Sep 17 00:00:00 2001
From: Ingo Fahrentholz <ingo.fahrentholz@diva-e.com>
Date: Mon, 5 Feb 2024 11:23:45 +0100
Subject: [PATCH] WIP But Icon import working now

---
 dist/features/features.js           | 2 +-
 dist/features/features.js.map       | 2 +-
 src/blocks/features/features.ts     | 4 +---
 types/blocks/features/features.d.ts | 1 +
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/dist/features/features.js b/dist/features/features.js
index caa42296..bd20a25e 100644
--- a/dist/features/features.js
+++ b/dist/features/features.js
@@ -1,2 +1,2 @@
-import{j as l,x as a}from"../__chunks__/lit-element.XkUWx5ik.js";import{o as p}from"../__chunks__/unsafe-html.tmuruS4o.js";import{t as h}from"../__chunks__/custom-element.qyLKk-84.js";var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,d=(e,t,s,o)=>{for(var n=o>1?void 0:o?f(t,s):t,r=e.length-1,c;r>=0;r--)(c=e[r])&&(n=(o?c(t,s,n):c(n))||n);return o&&n&&m(t,s,n),n};let i=class extends HTMLElement{get name(){const e=this.getAttribute("name");if(!e)throw new Error("Icon must have a name attribute");return e}connectedCallback(){console.log("RENDER ICON"),this.render()}async render(){const e=await this.fetchIcon();return console.log("render icon here",e),`<style>:host{display:inline-block;width:50px;height:50px;}svg{display:inline-block;width:100%;height:100%;fill:currentColor;}</style>${e}`}async fetchIcon(){return await(await fetch(`${window.hlx.codeBasePath}/dist/icons/${this.name}.svg`)).text()}};i=d([h("icon-component")],i);const u=e=>a`${e.map(t=>a`<article><span class="icon fa-gem"><icon-component name="${t.icon}"></icon-component></span><div class="content">${p(t.textBlock)}</div></article>`)}`;function g(e){new i;const t=e.querySelectorAll(":scope > div");let s=[];[...t].forEach(o=>{const n=o.children[0].innerHTML,r=o.children[1].innerHTML;s.push({icon:n,textBlock:r})}),e.innerHTML="",e.style.removeProperty("display"),l(u(s),e)}export{g as default};
+import{j as l,x as i}from"../__chunks__/lit-element.XkUWx5ik.js";import{o as p}from"../__chunks__/unsafe-html.tmuruS4o.js";import{t as h}from"../__chunks__/custom-element.qyLKk-84.js";var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,d=(e,t,s,o)=>{for(var n=o>1?void 0:o?f(t,s):t,r=e.length-1,c;r>=0;r--)(c=e[r])&&(n=(o?c(t,s,n):c(n))||n);return o&&n&&m(t,s,n),n};let a=class extends HTMLElement{get name(){const e=this.getAttribute("name");if(!e)throw new Error("Icon must have a name attribute");return e}connectedCallback(){console.log("RENDER ICON"),this.render()}async render(){const e=await this.fetchIcon();return console.log("render icon here",e),`<style>:host{display:inline-block;width:50px;height:50px;}svg{display:inline-block;width:100%;height:100%;fill:currentColor;}</style>${e}`}async fetchIcon(){return await(await fetch(`${window.hlx.codeBasePath}/dist/icons/${this.name}.svg`)).text()}};a=d([h("icon-component")],a);const u=e=>i`${e.map(t=>i`<article><span class="icon fa-gem"><icon-component name="${t.icon}"></icon-component></span><div class="content">${p(t.textBlock)}</div></article>`)}`;function g(e){const t=e.querySelectorAll(":scope > div");let s=[];[...t].forEach(o=>{const n=o.children[0].innerHTML,r=o.children[1].innerHTML;s.push({icon:n,textBlock:r})}),e.innerHTML="",e.style.removeProperty("display"),l(u(s),e)}export{g as default};
 //# sourceMappingURL=features.js.map
diff --git a/dist/features/features.js.map b/dist/features/features.js.map
index 5b0dd087..1063bfc9 100644
--- a/dist/features/features.js.map
+++ b/dist/features/features.js.map
@@ -1 +1 @@
-{"version":3,"file":"features.js","sources":["../../src/components/icon.ts","../../src/blocks/features/features.ts"],"sourcesContent":["import { customElement } from 'lit/decorators.js';\n\n@customElement('icon-component')\nexport class Icon extends HTMLElement {\n  get name() {\n    const srcValue = this.getAttribute('name');\n    if (!srcValue) {\n      throw new Error('Icon must have a name attribute');\n    }\n    return srcValue;\n  }\n\n  connectedCallback() {\n    console.log('RENDER ICON');\n    this.render();\n  }\n\n  async render() {\n    const svg = await this.fetchIcon();\n    console.log('render icon here', svg);\n    return `<style>:host{display:inline-block;width:50px;height:50px;}svg{display:inline-block;width:100%;height:100%;fill:currentColor;}</style>${svg}`;\n  }\n\n  async fetchIcon() {\n    const response = await fetch(`${window.hlx.codeBasePath}/dist/icons/${this.name}.svg`);\n    const textResponse = await response.text();\n    return textResponse;\n  }\n}\n","import { html, render } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\n// @ts-ignore\nimport { Icon } from '../../components/icon';\n\ninterface Feature {\n  icon: string;\n  textBlock: string;\n}\n\ntype TemplateArgs = Feature[];\n\nconst template = (features: TemplateArgs) => {\n  return html`\n    ${features.map(\n      (feature) => html`\n        <article>\n          <span class=\"icon fa-gem\"><icon-component name=\"${feature.icon}\"></icon-component></span>\n          <div class=\"content\">${unsafeHTML(feature.textBlock)}</div>\n        </article>\n      `\n    )}\n  `;\n};\n\nexport default function (block: HTMLElement) {\n  new Icon();\n  const rows = block.querySelectorAll(':scope > div');\n  let features: Feature[] = [];\n  [...rows].forEach((row) => {\n    const icon = row.children[0].innerHTML;\n    const textBlock = row.children[1].innerHTML;\n    features.push({ icon, textBlock });\n  });\n\n  block.innerHTML = '';\n\n  block.style.removeProperty('display');\n  render(template(features), block);\n}\n"],"names":["Icon","srcValue","svg","__decorateClass","customElement","template","features","html","feature","unsafeHTML","block","rows","row","icon","textBlock","render"],"mappings":"wXAGa,IAAAA,EAAN,cAAmB,WAAY,CACpC,IAAI,MAAO,CACH,MAAAC,EAAW,KAAK,aAAa,MAAM,EACzC,GAAI,CAACA,EACG,MAAA,IAAI,MAAM,iCAAiC,EAE5C,OAAAA,CACT,CAEA,mBAAoB,CAClB,QAAQ,IAAI,aAAa,EACzB,KAAK,OAAO,CACd,CAEA,MAAM,QAAS,CACP,MAAAC,EAAM,MAAM,KAAK,YACf,eAAA,IAAI,mBAAoBA,CAAG,EAC5B,wIAAwIA,CAAG,EACpJ,CAEA,MAAM,WAAY,CAGT,OADc,MADJ,MAAM,MAAM,GAAG,OAAO,IAAI,YAAY,eAAe,KAAK,IAAI,MAAM,GACjD,MAEtC,CACF,EAzBaF,EAANG,EAAA,CADNC,EAAc,gBAAgB,CAAA,EAClBJ,CAAA,ECUb,MAAMK,EAAYC,GACTC,IACHD,EAAS,IACRE,GAAYD,6DAEyCC,EAAQ,IAAI,kDACvCC,EAAWD,EAAQ,SAAS,CAAC,kBAGzD,CAAA,GAIL,SAAAF,EAAyBI,EAAoB,CAC3C,IAAIV,EACE,MAAAW,EAAOD,EAAM,iBAAiB,cAAc,EAClD,IAAIJ,EAAsB,CAAA,EAC1B,CAAC,GAAGK,CAAI,EAAE,QAASC,GAAQ,CACzB,MAAMC,EAAOD,EAAI,SAAS,CAAC,EAAE,UACvBE,EAAYF,EAAI,SAAS,CAAC,EAAE,UAClCN,EAAS,KAAK,CAAE,KAAAO,EAAM,UAAAC,CAAW,CAAA,CAAA,CAClC,EAEDJ,EAAM,UAAY,GAEZA,EAAA,MAAM,eAAe,SAAS,EAC7BK,EAAAV,EAASC,CAAQ,EAAGI,CAAK,CAClC"}
\ No newline at end of file
+{"version":3,"file":"features.js","sources":["../../src/components/icon.ts","../../src/blocks/features/features.ts"],"sourcesContent":["import { customElement } from 'lit/decorators.js';\n\n@customElement('icon-component')\nexport class Icon extends HTMLElement {\n  get name() {\n    const srcValue = this.getAttribute('name');\n    if (!srcValue) {\n      throw new Error('Icon must have a name attribute');\n    }\n    return srcValue;\n  }\n\n  connectedCallback() {\n    console.log('RENDER ICON');\n    this.render();\n  }\n\n  async render() {\n    const svg = await this.fetchIcon();\n    console.log('render icon here', svg);\n    return `<style>:host{display:inline-block;width:50px;height:50px;}svg{display:inline-block;width:100%;height:100%;fill:currentColor;}</style>${svg}`;\n  }\n\n  async fetchIcon() {\n    const response = await fetch(`${window.hlx.codeBasePath}/dist/icons/${this.name}.svg`);\n    const textResponse = await response.text();\n    return textResponse;\n  }\n}\n","import { html, render } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\nimport '../../components/icon';\n\ninterface Feature {\n  icon: string;\n  textBlock: string;\n}\n\ntype TemplateArgs = Feature[];\n\nconst template = (features: TemplateArgs) => {\n  return html`\n    ${features.map(\n      (feature) => html`\n        <article>\n          <span class=\"icon fa-gem\"><icon-component name=\"${feature.icon}\"></icon-component></span>\n          <div class=\"content\">${unsafeHTML(feature.textBlock)}</div>\n        </article>\n      `\n    )}\n  `;\n};\n\nexport default function (block: HTMLElement) {\n  const rows = block.querySelectorAll(':scope > div');\n  let features: Feature[] = [];\n  [...rows].forEach((row) => {\n    const icon = row.children[0].innerHTML;\n    const textBlock = row.children[1].innerHTML;\n    features.push({ icon, textBlock });\n  });\n\n  block.innerHTML = '';\n\n  block.style.removeProperty('display');\n  render(template(features), block);\n}\n"],"names":["Icon","srcValue","svg","__decorateClass","customElement","template","features","html","feature","unsafeHTML","block","rows","row","icon","textBlock","render"],"mappings":"wXAGa,IAAAA,EAAN,cAAmB,WAAY,CACpC,IAAI,MAAO,CACH,MAAAC,EAAW,KAAK,aAAa,MAAM,EACzC,GAAI,CAACA,EACG,MAAA,IAAI,MAAM,iCAAiC,EAE5C,OAAAA,CACT,CAEA,mBAAoB,CAClB,QAAQ,IAAI,aAAa,EACzB,KAAK,OAAO,CACd,CAEA,MAAM,QAAS,CACP,MAAAC,EAAM,MAAM,KAAK,YACf,eAAA,IAAI,mBAAoBA,CAAG,EAC5B,wIAAwIA,CAAG,EACpJ,CAEA,MAAM,WAAY,CAGT,OADc,MADJ,MAAM,MAAM,GAAG,OAAO,IAAI,YAAY,eAAe,KAAK,IAAI,MAAM,GACjD,MAEtC,CACF,EAzBaF,EAANG,EAAA,CADNC,EAAc,gBAAgB,CAAA,EAClBJ,CAAA,ECSb,MAAMK,EAAYC,GACTC,IACHD,EAAS,IACRE,GAAYD,6DAEyCC,EAAQ,IAAI,kDACvCC,EAAWD,EAAQ,SAAS,CAAC,kBAGzD,CAAA,GAIL,SAAAF,EAAyBI,EAAoB,CACrC,MAAAC,EAAOD,EAAM,iBAAiB,cAAc,EAClD,IAAIJ,EAAsB,CAAA,EAC1B,CAAC,GAAGK,CAAI,EAAE,QAASC,GAAQ,CACzB,MAAMC,EAAOD,EAAI,SAAS,CAAC,EAAE,UACvBE,EAAYF,EAAI,SAAS,CAAC,EAAE,UAClCN,EAAS,KAAK,CAAE,KAAAO,EAAM,UAAAC,CAAW,CAAA,CAAA,CAClC,EAEDJ,EAAM,UAAY,GAEZA,EAAA,MAAM,eAAe,SAAS,EAC7BK,EAAAV,EAASC,CAAQ,EAAGI,CAAK,CAClC"}
\ No newline at end of file
diff --git a/src/blocks/features/features.ts b/src/blocks/features/features.ts
index 00f71102..b49d0300 100644
--- a/src/blocks/features/features.ts
+++ b/src/blocks/features/features.ts
@@ -1,8 +1,7 @@
 import { html, render } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
-// @ts-ignore
-import { Icon } from '../../components/icon';
+import '../../components/icon';
 
 interface Feature {
   icon: string;
@@ -25,7 +24,6 @@ const template = (features: TemplateArgs) => {
 };
 
 export default function (block: HTMLElement) {
-  new Icon();
   const rows = block.querySelectorAll(':scope > div');
   let features: Feature[] = [];
   [...rows].forEach((row) => {
diff --git a/types/blocks/features/features.d.ts b/types/blocks/features/features.d.ts
index 95509577..1271bf7d 100644
--- a/types/blocks/features/features.d.ts
+++ b/types/blocks/features/features.d.ts
@@ -1 +1,2 @@
+import '../../components/icon';
 export default function (block: HTMLElement): void;