@oiz/stzh-components 3.3.0-beta1 → 3.3.0-beta2

package/dist/components/stzh-icon2.js

@@ -3,6 +3,8 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const stzhIconCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}@media print{:host{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}";
 
 let iconCounter = 0;
+// Shared cache for all instances to store fetched SVG icons
+const iconCache = new Map();
 const StzhIcon = /*@__PURE__*/ proxyCustomElement(class StzhIcon extends HTMLElement {
   constructor() {
     super();
@@ -16,24 +18,30 @@ const StzhIcon = /*@__PURE__*/ proxyCustomElement(class StzhIcon extends HTMLEle
   async nameWatcher(name) {
     this.iconDisplay = "none";
     if (name) {
-      const response = await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);
-      if (response.status === 200) {
-        const svgString = await response.text();
-        const parser = new DOMParser();
-        const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
-        this.svgElement = svgDoc.documentElement;
-        this.svgElement.classList.add('stzh-icon__svg');
-        // for some obscure reason we need to delay showing the icon in safari,
-        // otherwise the icon doesn't show up randomly
-        // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)
-        window.setTimeout(() => {
-          this.iconDisplay = "contents";
-        }, 0);
-        this.a11yTitleWatcher(this.a11yTitle);
+      if (iconCache.has(name)) {
+        this.svgHtml = await iconCache.get(name);
+        this.updateAccessibilityAttributes();
+        this.showIcon();
       }
       else {
-        this.svgElement = null;
-        this.svgHtml = '';
+        const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)
+          .then(response => {
+          if (response.status === 200) {
+            return response.text();
+          }
+          throw new Error('Failed to fetch icon');
+        })
+          .then(svgString => {
+          const parser = new DOMParser();
+          const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
+          const svgElement = svgDoc.documentElement;
+          svgElement.classList.add('stzh-icon__svg');
+          return svgElement.outerHTML;
+        });
+        iconCache.set(name, fetchSvgPromise);
+        this.svgHtml = await fetchSvgPromise;
+        this.updateAccessibilityAttributes();
+        this.showIcon();
       }
     }
     else {
@@ -42,6 +50,8 @@ const StzhIcon = /*@__PURE__*/ proxyCustomElement(class StzhIcon extends HTMLEle
     }
   }
   a11yTitleWatcher(a11yTitle) {
+    if (!this.svgElement)
+      return;
     this.svgElement.setAttribute("aria-hidden", a11yTitle ? "false" : "true");
     this.svgElement.setAttribute("focusable", a11yTitle ? "true" : "false");
     this.svgElement.setAttribute("aria-labelledby", a11yTitle ? `${this.iconId}-title` : null);
@@ -56,7 +66,18 @@ const StzhIcon = /*@__PURE__*/ proxyCustomElement(class StzhIcon extends HTMLEle
   }
   async componentWillLoad() {
     this.iconId = `stzh-icon-${iconCounter++}`;
-    this.nameWatcher(this.name);
+    await this.nameWatcher(this.name);
+  }
+  updateAccessibilityAttributes() {
+    this.a11yTitleWatcher(this.a11yTitle);
+  }
+  showIcon() {
+    // for some obscure reason we need to delay showing the icon in safari,
+    // otherwise the icon doesn't show up randomly
+    // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)
+    window.setTimeout(() => {
+      this.iconDisplay = "contents";
+    }, 0);
   }
   render() {
     return (h(Host, null, h("div", { class: "stzh-icon", style: { display: this.iconDisplay }, innerHTML: this.svgHtml })));

package/dist/components/stzh-icon2.js.map

@@ -1 +1 @@
-{"file":"stzh-icon2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,u5CAAu5C;;ACU36C,IAAI,WAAW,GAAG,CAAC,CAAC;MAOP,QAAQ;;;;;gBAKI,EAAE;qBAM8B,EAAE;mBAI9B,EAAE;uBACE,MAAM;;EAGrC,MAAM,WAAW,CAAC,IAAY;IAC5B,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;IAE1B,IAAI,IAAI,EAAE;MACR,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,MAAM,CAAC,cAAc,CAAC,SAAS,eAAe,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC;MAE/F,IAAI,QAAQ,CAAC,MAAM,KAAK,GAAG,EAAE;QAC3B,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAExC,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;QAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;QAElE,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,eAAwC,CAAC;QAClE,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;;;;QAKhD,MAAM,CAAC,UAAU,CAAC;UAChB,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;SAC/B,EAAE,CAAC,CAAC,CAAC;QAEN,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;OACvC;WAAM;QACL,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;OACnB;KACF;SAAM;MACL,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;KACnB;GACF;EAGD,gBAAgB,CAAC,SAAiB;IAChC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,aAAa,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;IAC1E,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACxE,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,iBAAiB,EAAE,SAAS,GAAG,GAAG,IAAI,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC;IAE3F,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAEnD,IAAI,CAAC,KAAK,EAAE;MACV,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;MACxC,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC,MAAM,QAAQ,CAAC;MAClC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACpC;IAED,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;GAC1C;EAKD,MAAM,iBAAiB;IACrB,IAAI,CAAC,MAAM,GAAG,aAAa,WAAW,EAAE,EAAE,CAAC;IAC3C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC7B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,GAAQ,CACvF,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":["/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  State,\n  Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n  */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      const response = await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);\n\n      if (response.status === 200) {\n        const svgString = await response.text();\n\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n\n        this.svgElement = svgDoc.documentElement as unknown as SVGElement;\n        this.svgElement.classList.add('stzh-icon__svg');\n\n        // for some obscure reason we need to delay showing the icon in safari,\n        // otherwise the icon doesn't show up randomly\n        // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n        window.setTimeout(() => {\n          this.iconDisplay = \"contents\";\n        }, 0);\n\n        this.a11yTitleWatcher(this.a11yTitle);\n      } else {\n        this.svgElement = null;\n        this.svgHtml = '';\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = '';\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector('title');\n\n    if (!title) {\n      title = document.createElement('title');\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    this.nameWatcher(this.name);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-icon2.js","mappings":"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","names":[],"sources":["src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":["/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  State,\n  Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n   */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      if (iconCache.has(name)) {\n        this.svgHtml = await iconCache.get(name)!;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      } else {\n        const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n          .then(response => {\n            if (response.status === 200) {\n              return response.text();\n            }\n            throw new Error('Failed to fetch icon');\n          })\n          .then(svgString => {\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n            const svgElement = svgDoc.documentElement as unknown as SVGElement;\n            svgElement.classList.add('stzh-icon__svg');\n\n            return svgElement.outerHTML;\n          });\n\n        iconCache.set(name, fetchSvgPromise);\n\n        this.svgHtml = await fetchSvgPromise;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = '';\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    if (!this.svgElement) return;\n\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector('title');\n\n    if (!title) {\n      title = document.createElement('title');\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    await this.nameWatcher(this.name);\n  }\n\n  private updateAccessibilityAttributes() {\n    this.a11yTitleWatcher(this.a11yTitle);\n  }\n\n  private showIcon() {\n    // for some obscure reason we need to delay showing the icon in safari,\n    // otherwise the icon doesn't show up randomly\n    // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n    window.setTimeout(() => {\n      this.iconDisplay = \"contents\";\n    }, 0);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}