npm - @swisspost/design-system-components - Versions diffs - 1.3.2 → 1.3.3 - Mend

@swisspost/design-system-components 1.3.2 → 1.3.3

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 (77) hide show

package/dist/components/post-collapsible.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"post-collapsible.js","mappings":"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","names":["PostCollapsible"],"sources":["./src/utils/get-element-height.ts","./src/utils/should-reduce-motion.ts","./src/utils/on-transition-end.ts","./src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","./src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["export function getElementHeight(el: HTMLElement): number;\nexport function getElementHeight(el: HTMLElement, classWhenShown: string): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string[]): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string \| string[] = []): number {\n if (!Array.isArray(classesWhenShown)) classesWhenShown = [classesWhenShown];\n\n const classesToAdd = classesWhenShown.filter(klass => !el.classList.contains(klass));\n if (classesToAdd.length) el.classList.add(...classesToAdd);\n\n const scrollHeight = el.scrollHeight;\n\n if (classesToAdd.length) el.classList.remove(...classesToAdd);\n\n return scrollHeight;\n}\n","export function shouldReduceMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","import { shouldReduceMotion } from './should-reduce-motion';\n\nexport async function onTransitionEnd(el: HTMLElement): Promise<void> {\n return new Promise(resolve => {\n if (shouldReduceMotion()) {\n resolve();\n } else {\n el.ontransitionend = () => {\n resolve();\n el.ontransitionend = null;\n };\n }\n });\n}\n","@use '@swisspost/design-system-styles/basics';\n@use '@swisspost/design-system-styles/components/accordion';\n@use '@swisspost/design-system-styles/components/transitions';\n\n:host {\n display: block;\n}\n","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}
1	+ {"file":"post-collapsible.js","mappings":"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","names":["PostCollapsible"],"sources":["./src/utils/get-element-height.ts","./src/utils/should-reduce-motion.ts","./src/utils/on-transition-end.ts","./src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","./src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["export function getElementHeight(el: HTMLElement): number;\nexport function getElementHeight(el: HTMLElement, classWhenShown: string): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string[]): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string \| string[] = []): number {\n if (!Array.isArray(classesWhenShown)) classesWhenShown = [classesWhenShown];\n\n const classesToAdd = classesWhenShown.filter(klass => !el.classList.contains(klass));\n if (classesToAdd.length) el.classList.add(...classesToAdd);\n\n const scrollHeight = el.scrollHeight;\n\n if (classesToAdd.length) el.classList.remove(...classesToAdd);\n\n return scrollHeight;\n}\n","export function shouldReduceMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","import { shouldReduceMotion } from './should-reduce-motion';\n\nexport async function onTransitionEnd(el: HTMLElement): Promise<void> {\n return new Promise(resolve => {\n if (shouldReduceMotion()) {\n resolve();\n } else {\n el.ontransitionend = () => {\n resolve();\n el.ontransitionend = null;\n };\n }\n });\n}\n","@use '@swisspost/design-system-styles/basics';\n@use '@swisspost/design-system-styles/components/accordion';\n@use '@swisspost/design-system-styles/components/transitions';\n\n:host {\n display: block;\n}\n","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"],"version":3}

package/dist/components/post-icon.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as checkType, a as checkOneOf } from './check-type.js';
+import { c as checkType, a as checkOneOf, v as version } from './package.js';
 const EMPTY_VALUES = [undefined, null, ''];
 function emptyOr(check) {
   return (...args) => {
     const value = args[0];
@@ -10,26 +11,26 @@ function emptyOr(check) {
   };
 }
+function checkNonEmpty(value, error) {
+  if (EMPTY_VALUES.some(v => v === value)) {
+    throw new Error(error);
+  }
+}
 const checkEmptyOrOneOf = emptyOr(checkOneOf);
 const checkEmptyOrType = emptyOr(checkType);
 const postIconCss = ":host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;fill:currentColor}:host([flip-h]) svg{scale:-1 1}:host([flip-v]) svg{scale:1 -1}:host([flip-h][flip-v]) svg{scale:-1}:host([animation]) svg{transform-origin:center}:host([animation=cylon]) svg{animation:icon-animation-cylon 0.75s ease-in-out infinite alternate}:host([animation=cylon-vertical]) svg{animation:icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate}:host([animation=spin]) svg{animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]) svg{animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]) svg{animation:icon-animation-fade 0.75s ease-in-out infinite alternate}:host([animation=throb]) svg{animation:icon-animation-throb 0.75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:0.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:0.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
 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'];
 const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
     this.svgSource = '<svg viewBox="0 0 16 16"></svg>';
+    this.pathForceCDN = false;
     this.svgOutput = undefined;
     this.animation = undefined;
     this.base = undefined;
@@ -53,6 +54,7 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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) {
@@ -61,7 +63,34 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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;
@@ -75,20 +104,43 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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,
@@ -96,42 +148,15 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       .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 watchers() { return {
     "animation": ["validateAnimation"],
@@ -151,6 +176,7 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "name": [1],
     "rotate": [2],
     "scale": [2],
+    "pathForceCDN": [32],
     "svgOutput": [32]
   }]);
 function defineCustomElement$1() {

package/dist/components/post-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"post-icon.js","mappings":"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","names":["PostIcon"],"sources":["./src/utils/property-checkers/empty-or.ts","./src/utils/property-checkers/index.ts","./src/components/post-icon/post-icon.scss?tag=post-icon&encapsulation=shadow","./src/components/post-icon/post-icon.tsx"],"sourcesContent":["const EMPTY_VALUES = [undefined, null, ''];\n\nexport function emptyOr<T extends unknown[]>(check: (...args: T) => void) {\n return (...args: T) => {\n const value = args[0];\n if (!EMPTY_VALUES.some(v => v === value)) check(...args);\n };\n}\n","import { emptyOr } from './empty-or';\nimport { checkOneOf } from './check-one-of';\nimport { checkType } from './check-type';\n\nexport const checkEmptyOrOneOf = emptyOr(checkOneOf);\nexport const checkEmptyOrType = emptyOr(checkType);\n\nexport * from './check-one-of';\nexport * from './check-type';\n","@use 'sass:map';\n\n$post-icon-animations: (\n 'cylon': icon-animation-cylon .75s ease-in-out infinite alternate,\n 'cylon-vertical': icon-animation-cylon-vertical .75s ease-in-out infinite alternate,\n 'spin': icon-animation-spin 2s linear infinite normal,\n 'spin-reverse': icon-animation-spin 2s linear infinite reverse,\n 'fade': icon-animation-fade .75s ease-in-out infinite alternate,\n 'throb': icon-animation-throb .75s ease-in-out infinite alternate\n);\n\n:host {\n display: inline-block;\n width: 1em;\n vertical-align: -0.15em;\n}\n\nsvg {\n display: block;\n width: 100%;\n fill: currentColor;\n}\n\n// flip\n\n:host([flip-h]) {\n svg { scale: -1 1; }\n}\n\n:host([flip-v]) {\n svg { scale: 1 -1; }\n}\n\n:host([flip-h][flip-v]) {\n svg { scale: -1; }\n}\n\n// scale\n// done with inline styling\n\n// rotate\n// done with inline styling\n\n// animation\n\n:host([animation]) {\n svg {\n transform-origin: center;\n }\n}\n\n@each $key, $value in $post-icon-animations {\n :host([animation=\"#{$key}\"]) {\n svg {\n animation: $value;\n }\n }\n}\n\n@keyframes icon-animation-cylon {\n from { transform: translateX(-25%) }\n to { transform: translateX(25%) }\n}\n\n@keyframes icon-animation-cylon-vertical {\n from { transform: translateY(25%); }\n to { transform: translateY(-25%); }\n}\n\n@keyframes icon-animation-fade {\n from { opacity: .1; }\n to { opacity: 1; }\n}\n\n@keyframes icon-animation-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n}\n\n@keyframes icon-animation-throb {\n from {\n opacity: .5;\n transform: scale(0.5);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_KEYS = [\n 'cylon',\n 'cylon-vertical',\n 'spin',\n 'spin-reverse',\n 'fade',\n 'throb'\n];\n\n/*\n @class PostIcon - representing a stencil component\n /\n@Component({\n tag: 'post-icon',\n styleUrl: 'post-icon.scss',\n shadow: true,\n})\nexport class PostIcon {\n private initialPath: string;\n private path: string;\n private svgSource = '<svg viewBox=\"0 0 16 16\"></svg>';\n\n @State() svgOutput: string;\n\n /\n The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`).\n /\n @Prop() readonly animation?: string;\n\n @Watch('animation')\n validateAnimation(newValue = this.animation) {\n if (newValue !== undefined) checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon \"animation\" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);\n }\n\n /\n The base path, where the icons are located (must be a public url).\n /\n @Prop() readonly base?: string;\n\n @Watch('base')\n validateBase(newValue = this.base) {\n checkEmptyOrType(newValue, 'string', 'The post-icon \"base\" prop should be a string.');\n }\n\n /\n When set to `true`, the icon will be flipped horizontally.\n /\n @Prop() readonly flipH?: boolean;\n\n @Watch('flipH')\n validateFlipH(newValue = this.flipH) {\n checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipH\" prop should be a boolean.');\n }\n\n /\n When set to `true`, the icon will be flipped vertically.\n /\n @Prop() readonly flipV?: boolean;\n\n @Watch('flipV')\n validateFlipV(newValue = this.flipV) {\n checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipV\" prop should be a boolean.');\n }\n\n /\n The name/id of the icon (e.g. 1000, 1001, ...).\n /\n @Prop() readonly name: string;\n\n @Watch('name')\n validateName(newValue = this.name) {\n checkType(newValue, 'string', 'The post-icon \"name\" prop should be a string.');\n }\n\n /\n The `number` of degree for the css `rotate` transformation.\n /\n @Prop() readonly rotate?: number;\n\n @Watch('rotate')\n validateRotate(newValue = this.rotate) {\n checkEmptyOrType(newValue, 'number', 'The post-icon \"rotate\" prop should be a number.');\n }\n\n /\n The `number` for the css `scale` transformation.\n /\n @Prop() readonly scale?: number;\n\n @Watch('scale')\n validateScale(newValue = this.scale) {\n checkEmptyOrType(newValue, 'number', 'The post-icon \"scale\" prop should be a number.');\n }\n\n connectedCallback() {\n // Construct icon path from different possible sources\n let basePath: string;\n const metaBase = document.head.querySelector(\n 'meta[name=\"design-system-settings\"][data-post-icon-base]',\n );\n\n if (this.base) {\n basePath = this.base;\n } else if (metaBase) {\n basePath = metaBase.getAttribute('data-post-icon-base');\n } else {\n basePath = CDN_URL;\n }\n\n this.path = this.getPath(basePath);\n this.svgSource = window.localStorage.getItem(`post-icon-${this.name}`) ?? this.svgSource;\n }\n\n componentWillLoad() {\n this.validateAnimation();\n this.validateBase();\n this.validateFlipH();\n this.validateFlipV();\n this.validateName();\n this.validateRotate();\n this.validateScale();\n\n this.fetchSVG();\n }\n\n componentWillRender() {\n const svgStyles = Object.entries({\n scale: this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,\n rotate: this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,\n })\n .filter(([_key, value]) => value !== null)\n .map(([key, value]) => `${key}: ${value}`)\n .join(';');\n\n const helperElement = document.createElement('div');\n helperElement.innerHTML = this.svgSource;\n\n const svgElement = helperElement.querySelector('svg');\n svgElement.setAttribute('style', svgStyles);\n\n this.svgOutput = helperElement.innerHTML;\n }\n\n private fetchSVG() {\n fetch(this.path)\n .then(response => response.text())\n .then(textResponse => {\n const match = textResponse.match(/^<svg\\b([\\s\\S])><\\/svg>/);\n\n if (match !== null) {\n this.svgSource = match[0];\n window.localStorage.setItem(`post-icon-${this.name}`, this.svgSource);\n } else {\n this.initialPath = this.path;\n this.path = this.getPath(CDN_URL);\n\n if (this.initialPath !== this.path) {\n console.warn(\n `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.`,\n );\n this.fetchSVG();\n } else {\n console.error(\n `Error in <post-icon/>: Could not load the svg on the path \"${this.initialPath}\"!`,\n );\n }\n }\n })\n .catch(error => {\n console.log(error);\n });\n }\n\n private getPath(basePath: string) {\n return new URL(\n [...basePath.split('/'), `${this.name}.svg#icon`].join('/'),\n window.location.origin,\n ).toString();\n }\n\n render() {\n return (\n <Host>\n <div innerHTML={this.svgOutput} />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"post-icon.js","mappings":"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","names":["PostIcon"],"sources":["./src/utils/property-checkers/constants.ts","./src/utils/property-checkers/empty-or.ts","./src/utils/property-checkers/check-non-empty.ts","./src/utils/property-checkers/index.ts","./src/components/post-icon/post-icon.scss?tag=post-icon&encapsulation=shadow","./src/components/post-icon/post-icon.tsx"],"sourcesContent":["export const EMPTY_VALUES = [undefined, null, ''];\n","import { EMPTY_VALUES } from './constants';\n\nexport function emptyOr<T extends unknown[]>(check: (...args: T) => void) {\n return (...args: T) => {\n const value = args[0];\n if (!EMPTY_VALUES.some(v => v === value)) check(...args);\n };\n}\n","import { EMPTY_VALUES } from './constants';\n\nexport function checkNonEmpty(value: unknown, error: string) {\n if (EMPTY_VALUES.some(v => v === value)) {\n throw new Error(error);\n }\n}\n","import { emptyOr } from './empty-or';\nimport { checkOneOf } from './check-one-of';\nimport { checkType } from './check-type';\n\nexport const checkEmptyOrOneOf = emptyOr(checkOneOf);\nexport const checkEmptyOrType = emptyOr(checkType);\n\nexport * from './check-non-empty';\nexport * from './check-one-of';\nexport * from './check-type';\n","@use 'sass:map';\n\n$post-icon-animations: (\n 'cylon': icon-animation-cylon .75s ease-in-out infinite alternate,\n 'cylon-vertical': icon-animation-cylon-vertical .75s ease-in-out infinite alternate,\n 'spin': icon-animation-spin 2s linear infinite normal,\n 'spin-reverse': icon-animation-spin 2s linear infinite reverse,\n 'fade': icon-animation-fade .75s ease-in-out infinite alternate,\n 'throb': icon-animation-throb .75s ease-in-out infinite alternate\n);\n\n:host {\n display: inline-block;\n width: 1em;\n vertical-align: -0.15em;\n}\n\nsvg {\n display: block;\n width: 100%;\n fill: currentColor;\n}\n\n// flip\n\n:host([flip-h]) {\n svg { scale: -1 1; }\n}\n\n:host([flip-v]) {\n svg { scale: 1 -1; }\n}\n\n:host([flip-h][flip-v]) {\n svg { scale: -1; }\n}\n\n// scale\n// done with inline styling\n\n// rotate\n// done with inline styling\n\n// animation\n\n:host([animation]) {\n svg {\n transform-origin: center;\n }\n}\n\n@each $key, $value in $post-icon-animations {\n :host([animation=\"#{$key}\"]) {\n svg {\n animation: $value;\n }\n }\n}\n\n@keyframes icon-animation-cylon {\n from { transform: translateX(-25%) }\n to { transform: translateX(25%) }\n}\n\n@keyframes icon-animation-cylon-vertical {\n from { transform: translateY(25%); }\n to { transform: translateY(-25%); }\n}\n\n@keyframes icon-animation-fade {\n from { opacity: .1; }\n to { opacity: 1; }\n}\n\n@keyframes icon-animation-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(359deg); }\n}\n\n@keyframes icon-animation-throb {\n from {\n opacity: .5;\n transform: scale(0.5);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\nimport { version } from '../../../package.json';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_KEYS = ['cylon', 'cylon-vertical', 'spin', 'spin-reverse', 'fade', 'throb'];\n\n/*\n @class PostIcon - representing a stencil component\n /\n@Component({\n tag: 'post-icon',\n styleUrl: 'post-icon.scss',\n shadow: true,\n})\nexport class PostIcon {\n private path: string;\n private loadedPath: string;\n private svgSource = '<svg viewBox=\"0 0 16 16\"></svg>';\n\n @State() pathForceCDN = false;\n @State() svgOutput: string;\n\n /\n The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`).\n /\n @Prop() readonly animation?: string;\n\n @Watch('animation')\n validateAnimation(newValue = this.animation) {\n if (newValue !== undefined)\n checkEmptyOrOneOf(\n newValue,\n ANIMATION_KEYS,\n `The post-icon \"animation\" prop requires one of the following values: ${ANIMATION_KEYS.join(\n ', ',\n )}.`,\n );\n }\n\n /\n The base path, where the icons are located (must be a public url).\n /\n @Prop() readonly base?: string;\n\n @Watch('base')\n validateBase(newValue = this.base) {\n checkEmptyOrType(newValue, 'string', 'The post-icon \"base\" prop should be a string.');\n }\n\n /\n When set to `true`, the icon will be flipped horizontally.\n /\n @Prop() readonly flipH?: boolean;\n\n @Watch('flipH')\n validateFlipH(newValue = this.flipH) {\n checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipH\" prop should be a boolean.');\n }\n\n /\n When set to `true`, the icon will be flipped vertically.\n /\n @Prop() readonly flipV?: boolean;\n\n @Watch('flipV')\n validateFlipV(newValue = this.flipV) {\n checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipV\" prop should be a boolean.');\n }\n\n /\n The name/id of the icon (e.g. 1000, 1001, ...).\n /\n @Prop() readonly name: string;\n\n @Watch('name')\n validateName(newValue = this.name) {\n checkNonEmpty(newValue, 'The post-icon \"name\" prop is required!.');\n checkType(newValue, 'string', 'The post-icon \"name\" prop should be a string.');\n }\n\n /\n The `number` of degree for the css `rotate` transformation.\n /\n @Prop() readonly rotate?: number;\n\n @Watch('rotate')\n validateRotate(newValue = this.rotate) {\n checkEmptyOrType(newValue, 'number', 'The post-icon \"rotate\" prop should be a number.');\n }\n\n /\n The `number` for the css `scale` transformation.\n /\n @Prop() readonly scale?: number;\n\n @Watch('scale')\n validateScale(newValue = this.scale) {\n checkEmptyOrType(newValue, 'number', 'The post-icon \"scale\" prop should be a number.');\n }\n\n componentWillLoad() {\n this.validateBase();\n this.validateName();\n this.validateFlipH();\n this.validateFlipV();\n this.validateScale();\n this.validateRotate();\n this.validateAnimation();\n }\n\n componentWillRender() {\n // create path dependant on the props\n this.setPath();\n\n // fetch icon if the prop \"name\" is defined and\n // the path has not allready been loaded\n if (this.name && this.path !== this.loadedPath) {\n this.loadedPath = this.path;\n\n this.fetchIcon()\n .then(successfullyLoaded => {\n // create icon only if an svg has been loaded successfully\n if (successfullyLoaded) this.createIcon();\n })\n .catch(error => {\n console.error(error);\n });\n }\n }\n\n private setPath() {\n // Construct icon path from different possible sources\n let basePath: string;\n const metaBase = document.head.querySelector(\n 'meta[name=\"design-system-settings\"][data-post-icon-base]',\n );\n\n if (this.base) {\n basePath = this.base;\n } else if (metaBase) {\n basePath = metaBase.getAttribute('data-post-icon-base');\n } else {\n basePath = CDN_URL;\n }\n\n // use \"basePath\" only if \"pathForceCDN\" state is \"false\"\n this.path = this.getPath(this.pathForceCDN ? CDN_URL : basePath);\n // try to get the \"svgSource\" from localStorage\n this.svgSource = window.localStorage.getItem(`post-icon-${this.name}`) ?? this.svgSource;\n // reset \"pathForceCDN\" after every try\n this.pathForceCDN = false;\n }\n\n private getPath(basePath: string) {\n return new URL(\n [...basePath.split('/'), `${this.name}.svg#icon`].join('/'),\n window.location.origin,\n ).toString();\n }\n\n private fetchIcon() {\n return new Promise((resolve, reject) => {\n fetch(this.path)\n .then(response => response.text())\n .then(textResponse => {\n // match \"svg\" out of \"textResponse\"\n const match = textResponse.match(/^<svg\\b([\\s\\S])><\\/svg>/);\n\n if (match !== null) {\n // set \"svgSource\" and return \"successfullyLoaded\" with true\n this.svgSource = match[0];\n window.localStorage.setItem(`post-icon-${this.name}`, this.svgSource);\n resolve(true);\n } else if (this.path !== this.getPath(CDN_URL)) {\n // if used \"path\" is not CDN path, and fetch has loaded something else than a \"svg\", try to reload it from the CDN\n console.warn(\n `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.`,\n );\n // trigger a component update, which will result in a refetch of the icon with the \"CDN_URL\"\n this.pathForceCDN = true;\n // return \"successfullyLoaded\" with false\n resolve(false);\n }\n })\n .catch(reject);\n });\n }\n\n private createIcon() {\n // create inline styles for some properties\n const svgStyles = Object.entries({\n scale: this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,\n rotate: this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,\n })\n .filter(([_key, value]) => value !== null)\n .map(([key, value]) => `${key}: ${value}`)\n .join(';');\n\n // create svg in RAM and append the above styles, before defining the \"svgOutput\"\n const helperElement = document.createElement('div');\n helperElement.innerHTML = this.svgSource;\n const svgElement = helperElement.querySelector('svg');\n svgElement.setAttribute('style', svgStyles);\n\n this.svgOutput = helperElement.innerHTML;\n }\n\n render() {\n return (\n <Host data-version={version}>\n <div innerHTML={this.svgOutput} />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/docs.json CHANGED Viewed

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-03-20T14:14:35",
+  "timestamp": "2023-03-29T08:19:41",
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.1.0",
+    "version": "3.2.0",
     "typescriptVersion": "4.9.5"
   },
   "components": [

package/dist/esm/{index-401f2d6a.js → index-286143e7.js} RENAMED Viewed

@@ -1243,7 +1243,6 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
             }
             endNewInstance();
-            fireConnectedCallback(hostRef.$lazyInstance$);
         }
         if (Cstr.style) {
             // this component has styles but we haven't registered them yet
@@ -1272,11 +1271,6 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
-const fireConnectedCallback = (instance) => {
-    {
-        safeCall(instance, 'connectedCallback');
-    }
-};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1315,10 +1309,6 @@ const connectedCallback = (elm) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
-        else {
-            // fire off connectedCallback() on component instance
-            fireConnectedCallback(hostRef.$lazyInstance$);
-        }
         endConnected();
     }
 };
@@ -1543,4 +1533,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 export { Host as H, bootstrapLazy as b, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-401f2d6a.js.map
+//# sourceMappingURL=index-286143e7.js.map