@swisspost/design-system-components 1.3.2 → 1.3.3

package/dist/collection/components/post-collapsible/post-collapsible.css

@@ -177,7 +177,7 @@
   --bs-body-font-family: Frutiger Neue For Post, system-ui, sans-serif;
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
-  --bs-body-line-height: 1.4;
+  --bs-body-line-height: 1.5;
   --bs-body-color: #000;
   --bs-body-bg: #fff;
   --bs-border-width: 1px;
@@ -256,7 +256,7 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
   margin-top: 0;
   margin-bottom: 0.5rem;
   font-family: inherit;
-  font-weight: 300;
+  font-weight: 700;
   line-height: 1.2;
   color: inherit;
 }
@@ -746,7 +746,6 @@ progress {
  */
 .blockquote-footer cite {
   font-size: 0.9375rem;
-  line-height: 1.4;
 }
 @media (min-width: 600px) {
   .blockquote-footer cite {
@@ -763,7 +762,6 @@ progress {
 .text-body .h5,
 .text-body p {
   font-size: 1.0625rem;
-  line-height: 1.4;
 }
 @media (min-width: 1024px) {
   .blockquote p, .text-body h5,
@@ -778,7 +776,6 @@ progress {
 .text-body h4,
 .text-body .h4 {
   font-size: 1.25rem;
-  line-height: 1.4;
 }
 @media (min-width: 1024px) {
   .text-body h3,
@@ -786,7 +783,6 @@ progress {
   .text-body h4,
   .text-body .h4 {
     font-size: 1.5rem;
-    line-height: 1.1;
   }
 }
 @media (min-width: 1441px) {
@@ -801,7 +797,6 @@ progress {
 .text-body h2,
 .text-body .h2 {
   font-size: 1.5rem;
-  line-height: 1.1;
 }
 @media (min-width: 600px) {
   .text-body h2,
@@ -825,7 +820,6 @@ progress {
 .text-body h1,
 .text-body .h1 {
   font-size: 1.75rem;
-  line-height: 1.1;
 }
 @media (min-width: 600px) {
   .text-body h1,
@@ -854,44 +848,20 @@ progress {
   margin-bottom: 0.8em;
 }
 
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  font-weight: 700;
-}
-
-h6,
-.h6,
 .font-curve-tiny {
   font-size: 0.8125rem;
-  line-height: 1.4;
 }
 @media (min-width: 600px) {
-  h6,
-  .h6,
   .font-curve-tiny {
     font-size: 0.9375rem;
   }
 }
 @media (min-width: 1024px) {
-  h6,
-  .h6,
   .font-curve-tiny {
     font-size: 1rem;
   }
 }
 @media (min-width: 1441px) {
-  h6,
-  .h6,
   .font-curve-tiny {
     font-size: 1.0625rem;
   }
@@ -899,7 +869,6 @@ h6,
 
 .font-curve-small {
   font-size: 0.9375rem;
-  line-height: 1.4;
 }
 @media (min-width: 600px) {
   .font-curve-small {
@@ -914,7 +883,6 @@ h6,
 
 .font-curve-regular {
   font-size: 1.0625rem;
-  line-height: 1.4;
 }
 @media (min-width: 1024px) {
   .font-curve-regular {
@@ -922,112 +890,250 @@ h6,
   }
 }
 
-h5,
-.h5,
 .font-curve-bigger-regular {
   font-size: 1.0625rem;
-  line-height: 1.4;
 }
 @media (min-width: 600px) {
-  h5,
-  .h5,
   .font-curve-bigger-regular {
     font-size: 1.25rem;
   }
 }
 @media (min-width: 1024px) {
-  h5,
-  .h5,
   .font-curve-bigger-regular {
     font-size: 1.5rem;
-    line-height: 1.1;
   }
 }
 
-h3,
-.h3,
-h4,
-.h4,
 .font-curve-medium {
   font-size: 1.25rem;
-  line-height: 1.4;
 }
 @media (min-width: 1024px) {
-  h3,
-  .h3,
-  h4,
-  .h4,
   .font-curve-medium {
     font-size: 1.5rem;
-    line-height: 1.1;
   }
 }
 @media (min-width: 1441px) {
-  h3,
-  .h3,
-  h4,
-  .h4,
   .font-curve-medium {
     font-size: 1.75rem;
   }
 }
 
-h2,
-.h2,
 .font-curve-large {
   font-size: 1.5rem;
-  line-height: 1.1;
 }
 @media (min-width: 600px) {
-  h2,
-  .h2,
   .font-curve-large {
     font-size: 1.75rem;
   }
 }
 @media (min-width: 1024px) {
-  h2,
-  .h2,
   .font-curve-large {
     font-size: 2rem;
   }
 }
 @media (min-width: 1441px) {
-  h2,
-  .h2,
   .font-curve-large {
     font-size: 2.5rem;
   }
 }
 
-h1,
-.h1,
 .font-curve-big {
   font-size: 1.75rem;
-  line-height: 1.1;
 }
 @media (min-width: 600px) {
-  h1,
-  .h1,
   .font-curve-big {
     font-size: 2rem;
   }
 }
 @media (min-width: 1024px) {
-  h1,
-  .h1,
   .font-curve-big {
     font-size: 2.5rem;
   }
 }
 @media (min-width: 1441px) {
-  h1,
-  .h1,
   .font-curve-big {
     font-size: 3rem;
   }
 }
 
+h1,
+.h1 {
+  font-size: 1.75rem;
+}
+@media (min-width: 400px) {
+  h1,
+  .h1 {
+    font-size: 2rem;
+  }
+}
+@media (min-width: 780px) {
+  h1,
+  .h1 {
+    font-size: 2.5rem;
+  }
+}
+@media (min-width: 1441px) {
+  h1,
+  .h1 {
+    font-size: 3rem;
+  }
+}
+
+h2,
+.h2 {
+  font-size: 1.5rem;
+}
+@media (min-width: 400px) {
+  h2,
+  .h2 {
+    font-size: 1.75rem;
+  }
+}
+@media (min-width: 780px) {
+  h2,
+  .h2 {
+    font-size: 2rem;
+  }
+}
+@media (min-width: 1441px) {
+  h2,
+  .h2 {
+    font-size: 2.5rem;
+  }
+}
+
+h3,
+.h3 {
+  font-size: 1.125rem;
+}
+@media (min-width: 400px) {
+  h3,
+  .h3 {
+    font-size: 1.25rem;
+  }
+}
+@media (min-width: 780px) {
+  h3,
+  .h3 {
+    font-size: 1.5rem;
+  }
+}
+@media (min-width: 1441px) {
+  h3,
+  .h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4,
+.h4 {
+  font-size: 1rem;
+}
+@media (min-width: 400px) {
+  h4,
+  .h4 {
+    font-size: 1.125rem;
+  }
+}
+@media (min-width: 780px) {
+  h4,
+  .h4 {
+    font-size: 1.25rem;
+  }
+}
+@media (min-width: 1441px) {
+  h4,
+  .h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5,
+.h5 {
+  font-size: 0.875rem;
+}
+@media (min-width: 400px) {
+  h5,
+  .h5 {
+    font-size: 1rem;
+  }
+}
+@media (min-width: 780px) {
+  h5,
+  .h5 {
+    font-size: 1.125rem;
+  }
+}
+@media (min-width: 1441px) {
+  h5,
+  .h5 {
+    font-size: 1.25rem;
+  }
+}
+
+h6,
+.h6 {
+  font-size: 0.875rem;
+}
+@media (min-width: 780px) {
+  h6,
+  .h6 {
+    font-size: 1rem;
+  }
+}
+@media (min-width: 1441px) {
+  h6,
+  .h6 {
+    font-size: 1.125rem;
+  }
+}
+
+.font-size-14 {
+  font-size: 0.875rem;
+}
+
+.font-size-16 {
+  font-size: 1rem;
+}
+
+.font-size-18 {
+  font-size: 1.125rem;
+}
+
+.font-size-20 {
+  font-size: 1.25rem;
+}
+
+.font-size-24 {
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+
+.font-size-28 {
+  font-size: 1.75rem;
+  line-height: 1.2;
+}
+
+.font-size-32 {
+  font-size: 2rem;
+  line-height: 1.2;
+}
+
+.font-size-40 {
+  font-size: 2.5rem;
+  line-height: 1.2;
+}
+
+.font-size-48 {
+  font-size: 3rem;
+  line-height: 1.2;
+}
+
+.font-size-56 {
+  font-size: 3.5rem;
+  line-height: 1.2;
+}
+
 .blockquote {
   margin-top: 1.5rem;
 }
@@ -1107,7 +1213,6 @@ q:lang(en) {
 }
 .text-body .lead {
   font-size: 1.0625rem;
-  line-height: 1.4;
   margin-bottom: 0.8em;
 }
 @media (min-width: 600px) {
@@ -1118,7 +1223,6 @@ q:lang(en) {
 @media (min-width: 1024px) {
   .text-body .lead {
     font-size: 1.5rem;
-    line-height: 1.1;
   }
 }
 
@@ -2482,15 +2586,15 @@ code {
 }
 
 .lh-sm {
-  line-height: 1.25 !important;
+  line-height: 1.2 !important;
 }
 
 .lh-base {
-  line-height: 1.4 !important;
+  line-height: 1.5 !important;
 }
 
 .lh-lg {
-  line-height: 2 !important;
+  line-height: 1.5 !important;
 }
 
 .text-start {
@@ -14406,10 +14510,9 @@ a:focus, a:hover {
 
 .accordion-button {
   font-size: 1.0625rem;
-  line-height: 1.4;
   background-color: transparent;
   font-weight: 700;
-  line-height: 1.5rem;
+  line-height: 1.5;
 }
 @media (min-width: 1024px) {
   .accordion-button {
@@ -14450,7 +14553,6 @@ a:focus, a:hover {
 .accordion-body h5,
 .accordion-body h6 {
   font-size: 1.0625rem;
-  line-height: 1.4;
   margin-top: 2.5rem;
   margin-bottom: 0;
   font-weight: 700;

package/dist/collection/components/post-collapsible/post-collapsible.js

@@ -1,5 +1,6 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { checkOneOf, checkType, getElementHeight, onTransitionEnd } from '../../utils';
+import { version } from '../../../package.json';
 let nextId = 0;
 export class PostCollapsible {
   constructor() {
@@ -73,7 +74,7 @@ export class PostCollapsible {
     if (!this.hasHeader) {
       return (h("div", { id: `${this.collapsibleId}--collapse`, class: this.collapseClasses, style: { height: this.collapseHeight } }, h("slot", null)));
     }
-    return (h("div", { class: "accordion-item" }, h(this.headingTag, { class: "accordion-header", id: `${this.collapsibleId}--header` }, h("button", { class: `accordion-button ${this.isOpen ? '' : 'collapsed'}`, type: "button", "aria-expanded": `${this.isOpen}`, "aria-controls": `${this.collapsibleId}--collapse`, onClick: this.onAccordionButtonClick }, h("slot", { name: "header" }))), h("div", { id: `${this.collapsibleId}--collapse`, class: `accordion-collapse ${this.collapseClasses}`, style: { height: this.collapseHeight }, "aria-labelledby": `${this.collapsibleId}--header` }, h("div", { class: "accordion-body" }, h("slot", null)))));
+    return (h(Host, { "data-version": version }, h("div", { class: "accordion-item" }, h(this.headingTag, { class: "accordion-header", id: `${this.collapsibleId}--header` }, h("button", { class: `accordion-button ${this.isOpen ? '' : 'collapsed'}`, type: "button", "aria-expanded": `${this.isOpen}`, "aria-controls": `${this.collapsibleId}--collapse`, onClick: this.onAccordionButtonClick }, h("slot", { name: "header" }))), h("div", { id: `${this.collapsibleId}--collapse`, class: `accordion-collapse ${this.collapseClasses}`, style: { height: this.collapseHeight }, "aria-labelledby": `${this.collapsibleId}--header` }, h("div", { class: "accordion-body" }, h("slot", null))))));
   }
   static get is() { return "post-collapsible"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-collapsible/post-collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-collapsible.js","sourceRoot":"","sources":["../../../src/components/post-collapsible/post-collapsible.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkOneOf, checkType, getElementHeight, onTransitionEnd } from '../../utils';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  private collapsibleElement: HTMLElement;\n  private isLoaded = false;\n\n  @Element() host: HTMLPostCollapsibleElement;\n\n  @State() collapseClasses: string;\n  @State() collapseHeight: string | null = null;\n  @State() collapsibleId: string;\n  @State() hasHeader: boolean;\n  @State() headingTag: string | undefined;\n  @State() isOpen = true;\n  @State() onAccordionButtonClick = () => this.toggle();\n\n  /**\n   * If `true`, the element is initially collapsed otherwise it is displayed.\n   */\n  @Prop() readonly collapsed?: boolean = false;\n\n  @Watch('collapsed')\n  validateCollapsed(newValue = this.collapsed) {\n    checkType(newValue, 'boolean', 'The post-collapsible \"collapsed\" prop should be a boolean.');\n\n    if (!this.isLoaded) {\n      this.isOpen = !newValue;\n      this.collapseClasses = this.getCollapseClasses();\n    } else {\n      setTimeout(() => {\n        this.toggle(!newValue);\n      });\n    }\n  }\n\n  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() readonly headingLevel?: number = 2;\n\n  @Watch('headingLevel')\n  validateHeadingLevel(newValue = this.headingLevel) {\n    checkOneOf(\n      newValue,\n      [ 1, 2, 3, 4, 5, 6 ],\n      'The post-collapsible element requires a heading level between 1 and 6.',\n    );\n\n    this.headingTag = `h${newValue}`;\n  }\n\n  componentWillLoad() {\n    this.validateCollapsed();\n    this.validateHeadingLevel();\n\n    this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n    if (!this.hasHeader) {\n      console.warn('Be sure to bind the post-collapsible to its control using aria-controls and aria-expanded attributes. More information here: https://getbootstrap.com/docs/5.2/components/collapse/#accessibility');\n    }\n\n    this.collapsibleId = this.host.id || `post-collapsible-${nextId++}`;\n    this.collapseClasses = this.getCollapseClasses();\n  }\n\n  componentDidLoad() {\n    this.isLoaded = true;\n    this.collapsibleElement = this.host.shadowRoot.querySelector(`#${this.collapsibleId}--collapse`);\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   */\n  @Method()\n  async toggle(open = !this.isOpen): Promise<boolean> {\n    if (open !== this.isOpen) {\n      this.isOpen = !this.isOpen;\n\n      this.startTransition();\n\n      await onTransitionEnd(this.collapsibleElement).then(() => {\n        this.collapseHeight = null;\n        this.collapseClasses = this.getCollapseClasses();\n      });\n\n      return this.isOpen;\n    }\n  }\n\n  private startTransition() {\n    const expandedHeight = getElementHeight(this.collapsibleElement, 'show');\n\n    this.collapseHeight = `${this.isOpen ? 0 : expandedHeight}px`;\n    this.collapseClasses = 'collapsing';\n\n    setTimeout(() => {\n      this.collapseHeight = `${this.isOpen ? expandedHeight : 0}px`;\n    }, 50);\n  }\n\n  private getCollapseClasses() {\n    return this.isOpen ? 'collapse show' : 'collapse';\n  }\n\n  render() {\n    if (!this.hasHeader) {\n      return (\n        <div\n          id={`${this.collapsibleId}--collapse`}\n          class={this.collapseClasses}\n          style={{ height: this.collapseHeight }}\n        >\n          <slot/>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"accordion-item\">\n        <this.headingTag class=\"accordion-header\" id={`${this.collapsibleId}--header`}>\n          <button\n            class={`accordion-button ${this.isOpen ? '' : 'collapsed'}`}\n            type=\"button\"\n            aria-expanded={`${this.isOpen}`}\n            aria-controls={`${this.collapsibleId}--collapse`}\n            onClick={this.onAccordionButtonClick}\n          >\n            <slot name=\"header\"/>\n          </button>\n        </this.headingTag>\n        <div\n          id={`${this.collapsibleId}--collapse`}\n          class={`accordion-collapse ${this.collapseClasses}`}\n          style={{ height: this.collapseHeight }}\n          aria-labelledby={`${this.collapsibleId}--header`}\n        >\n          <div class=\"accordion-body\">\n            <slot/>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"post-collapsible.js","sourceRoot":"","sources":["../../../../src/components/post-collapsible/post-collapsible.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkOneOf, checkType, getElementHeight, onTransitionEnd } from '../../utils';\nimport { version } from '../../../package.json';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  private collapsibleElement: HTMLElement;\n  private isLoaded = false;\n\n  @Element() host: HTMLPostCollapsibleElement;\n\n  @State() collapseClasses: string;\n  @State() collapseHeight: string | null = null;\n  @State() collapsibleId: string;\n  @State() hasHeader: boolean;\n  @State() headingTag: string | undefined;\n  @State() isOpen = true;\n  @State() onAccordionButtonClick = () => this.toggle();\n\n  /**\n   * If `true`, the element is initially collapsed otherwise it is displayed.\n   */\n  @Prop() readonly collapsed?: boolean = false;\n\n  @Watch('collapsed')\n  validateCollapsed(newValue = this.collapsed) {\n    checkType(newValue, 'boolean', 'The post-collapsible \"collapsed\" prop should be a boolean.');\n\n    if (!this.isLoaded) {\n      this.isOpen = !newValue;\n      this.collapseClasses = this.getCollapseClasses();\n    } else {\n      setTimeout(() => {\n        this.toggle(!newValue);\n      });\n    }\n  }\n\n  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() readonly headingLevel?: number = 2;\n\n  @Watch('headingLevel')\n  validateHeadingLevel(newValue = this.headingLevel) {\n    checkOneOf(\n      newValue,\n      [1, 2, 3, 4, 5, 6],\n      'The post-collapsible element requires a heading level between 1 and 6.',\n    );\n\n    this.headingTag = `h${newValue}`;\n  }\n\n  componentWillLoad() {\n    this.validateCollapsed();\n    this.validateHeadingLevel();\n\n    this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n    if (!this.hasHeader) {\n      console.warn(\n        'Be sure to bind the post-collapsible to its control using aria-controls and aria-expanded attributes. More information here: https://getbootstrap.com/docs/5.2/components/collapse/#accessibility',\n      );\n    }\n\n    this.collapsibleId = this.host.id || `post-collapsible-${nextId++}`;\n    this.collapseClasses = this.getCollapseClasses();\n  }\n\n  componentDidLoad() {\n    this.isLoaded = true;\n    this.collapsibleElement = this.host.shadowRoot.querySelector(\n      `#${this.collapsibleId}--collapse`,\n    );\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   */\n  @Method()\n  async toggle(open = !this.isOpen): Promise<boolean> {\n    if (open !== this.isOpen) {\n      this.isOpen = !this.isOpen;\n\n      this.startTransition();\n\n      await onTransitionEnd(this.collapsibleElement).then(() => {\n        this.collapseHeight = null;\n        this.collapseClasses = this.getCollapseClasses();\n      });\n\n      return this.isOpen;\n    }\n  }\n\n  private startTransition() {\n    const expandedHeight = getElementHeight(this.collapsibleElement, 'show');\n\n    this.collapseHeight = `${this.isOpen ? 0 : expandedHeight}px`;\n    this.collapseClasses = 'collapsing';\n\n    setTimeout(() => {\n      this.collapseHeight = `${this.isOpen ? expandedHeight : 0}px`;\n    }, 50);\n  }\n\n  private getCollapseClasses() {\n    return this.isOpen ? 'collapse show' : 'collapse';\n  }\n\n  render() {\n    if (!this.hasHeader) {\n      return (\n        <div\n          id={`${this.collapsibleId}--collapse`}\n          class={this.collapseClasses}\n          style={{ height: this.collapseHeight }}\n        >\n          <slot />\n        </div>\n      );\n    }\n\n    return (\n      <Host data-version={version}>\n        <div class=\"accordion-item\">\n          <this.headingTag class=\"accordion-header\" id={`${this.collapsibleId}--header`}>\n            <button\n              class={`accordion-button ${this.isOpen ? '' : 'collapsed'}`}\n              type=\"button\"\n              aria-expanded={`${this.isOpen}`}\n              aria-controls={`${this.collapsibleId}--collapse`}\n              onClick={this.onAccordionButtonClick}\n            >\n              <slot name=\"header\" />\n            </button>\n          </this.headingTag>\n          <div\n            id={`${this.collapsibleId}--collapse`}\n            class={`accordion-collapse ${this.collapseClasses}`}\n            style={{ height: this.collapseHeight }}\n            aria-labelledby={`${this.collapsibleId}--header`}\n          >\n            <div class=\"accordion-body\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/post-icon/post-icon.js

@@ -1,20 +1,15 @@
 import { Host, h } from '@stencil/core';
-import { checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';
+import { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';
+import { version } from '../../../package.json';
 const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
-const ANIMATION_KEYS = [
-  'cylon',
-  'cylon-vertical',
-  'spin',
-  'spin-reverse',
-  'fade',
-  'throb'
-];
+const ANIMATION_KEYS = ['cylon', 'cylon-vertical', 'spin', 'spin-reverse', 'fade', 'throb'];
 /**
  * @class PostIcon - representing a stencil component
  */
 export class PostIcon {
   constructor() {
     this.svgSource = '<svg viewBox="0 0 16 16"></svg>';
+    this.pathForceCDN = false;
     this.svgOutput = undefined;
     this.animation = undefined;
     this.base = undefined;
@@ -38,6 +33,7 @@ export class PostIcon {
     checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
   }
   validateName(newValue = this.name) {
+    checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
     checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
   }
   validateRotate(newValue = this.rotate) {
@@ -46,7 +42,34 @@ export class PostIcon {
   validateScale(newValue = this.scale) {
     checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
   }
-  connectedCallback() {
+  componentWillLoad() {
+    this.validateBase();
+    this.validateName();
+    this.validateFlipH();
+    this.validateFlipV();
+    this.validateScale();
+    this.validateRotate();
+    this.validateAnimation();
+  }
+  componentWillRender() {
+    // create path dependant on the props
+    this.setPath();
+    // fetch icon if the prop "name" is defined and
+    // the path has not allready been loaded
+    if (this.name && this.path !== this.loadedPath) {
+      this.loadedPath = this.path;
+      this.fetchIcon()
+        .then(successfullyLoaded => {
+        // create icon only if an svg has been loaded successfully
+        if (successfullyLoaded)
+          this.createIcon();
+      })
+        .catch(error => {
+        console.error(error);
+      });
+    }
+  }
+  setPath() {
     var _a;
     // Construct icon path from different possible sources
     let basePath;
@@ -60,20 +83,43 @@ export class PostIcon {
     else {
       basePath = CDN_URL;
     }
-    this.path = this.getPath(basePath);
+    // use "basePath" only if "pathForceCDN" state is "false"
+    this.path = this.getPath(this.pathForceCDN ? CDN_URL : basePath);
+    // try to get the "svgSource" from localStorage
     this.svgSource = (_a = window.localStorage.getItem(`post-icon-${this.name}`)) !== null && _a !== void 0 ? _a : this.svgSource;
+    // reset "pathForceCDN" after every try
+    this.pathForceCDN = false;
   }
-  componentWillLoad() {
-    this.validateAnimation();
-    this.validateBase();
-    this.validateFlipH();
-    this.validateFlipV();
-    this.validateName();
-    this.validateRotate();
-    this.validateScale();
-    this.fetchSVG();
+  getPath(basePath) {
+    return new URL([...basePath.split('/'), `${this.name}.svg#icon`].join('/'), window.location.origin).toString();
   }
-  componentWillRender() {
+  fetchIcon() {
+    return new Promise((resolve, reject) => {
+      fetch(this.path)
+        .then(response => response.text())
+        .then(textResponse => {
+        // match "svg" out of "textResponse"
+        const match = textResponse.match(/^<svg\b([\s\S]*)><\/svg>/);
+        if (match !== null) {
+          // set "svgSource" and return "successfullyLoaded" with true
+          this.svgSource = match[0];
+          window.localStorage.setItem(`post-icon-${this.name}`, this.svgSource);
+          resolve(true);
+        }
+        else if (this.path !== this.getPath(CDN_URL)) {
+          // if used "path" is not CDN path, and fetch has loaded something else than a "svg", try to reload it from the CDN
+          console.warn(`Warning in <post-icon/>: The path "${this.path}" seems to be no svg-only content. We'll gonna try to load the icon from the cdn.`);
+          // trigger a component update, which will result in a refetch of the icon with the "CDN_URL"
+          this.pathForceCDN = true;
+          // return "successfullyLoaded" with false
+          resolve(false);
+        }
+      })
+        .catch(reject);
+    });
+  }
+  createIcon() {
+    // create inline styles for some properties
     const svgStyles = Object.entries({
       scale: this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,
       rotate: this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,
@@ -81,42 +127,15 @@ export class PostIcon {
       .filter(([_key, value]) => value !== null)
       .map(([key, value]) => `${key}: ${value}`)
       .join(';');
+    // create svg in RAM and append the above styles, before defining the "svgOutput"
     const helperElement = document.createElement('div');
     helperElement.innerHTML = this.svgSource;
     const svgElement = helperElement.querySelector('svg');
     svgElement.setAttribute('style', svgStyles);
     this.svgOutput = helperElement.innerHTML;
   }
-  fetchSVG() {
-    fetch(this.path)
-      .then(response => response.text())
-      .then(textResponse => {
-      const match = textResponse.match(/^<svg\b([\s\S]*)><\/svg>/);
-      if (match !== null) {
-        this.svgSource = match[0];
-        window.localStorage.setItem(`post-icon-${this.name}`, this.svgSource);
-      }
-      else {
-        this.initialPath = this.path;
-        this.path = this.getPath(CDN_URL);
-        if (this.initialPath !== this.path) {
-          console.warn(`Warning in <post-icon/>: The content on the path "${this.path}" seems to be no svg-only content. We'll gonna try to load the icon from the cdn.`);
-          this.fetchSVG();
-        }
-        else {
-          console.error(`Error in <post-icon/>: Could not load the svg on the path "${this.initialPath}"!`);
-        }
-      }
-    })
-      .catch(error => {
-      console.log(error);
-    });
-  }
-  getPath(basePath) {
-    return new URL([...basePath.split('/'), `${this.name}.svg#icon`].join('/'), window.location.origin).toString();
-  }
   render() {
-    return (h(Host, null, h("div", { innerHTML: this.svgOutput })));
+    return (h(Host, { "data-version": version }, h("div", { innerHTML: this.svgOutput })));
   }
   static get is() { return "post-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -255,6 +274,7 @@ export class PostIcon {
   }
   static get states() {
     return {
+      "pathForceCDN": {},
       "svgOutput": {}
     };
   }