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

@swisspost/design-system-components 1.3.3 → 1.3.4

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

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

@@ -20,10 +20,18 @@ function checkNonEmpty(value, 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 postIconCss = ":host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;fill:currentColor}:host([flip-h]:not([flip-h=false])) svg{scale:-1 1}:host([flip-v]:not([flip-v=false])) svg{scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])) svg{scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon 0.75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade 0.75s ease-in-out infinite alternate}:host([animation=throb]){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_NAMES = [
+  'cylon',
+  'cylon-vertical',
+  'spin',
+  'spin-reverse',
+  'fade',
+  'throb',
+];
+const ANIMATION_KEYS = [...ANIMATION_NAMES];
 const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -31,14 +39,15 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.svgSource = '<svg viewBox="0 0 16 16"></svg>';
     this.pathForceCDN = false;
+    this.svgStyles = undefined;
     this.svgOutput = undefined;
-    this.animation = undefined;
-    this.base = undefined;
-    this.flipH = undefined;
-    this.flipV = undefined;
+    this.animation = null;
+    this.base = null;
+    this.flipH = false;
+    this.flipV = false;
     this.name = undefined;
-    this.rotate = undefined;
-    this.scale = undefined;
+    this.rotate = null;
+    this.scale = null;
   }
   validateAnimation(newValue = this.animation) {
     if (newValue !== undefined)
@@ -73,6 +82,7 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.validateAnimation();
   }
   componentWillRender() {
+    this.createIconFromStorage();
     // create path dependant on the props
     this.setPath();
     // fetch icon if the prop "name" is defined and
@@ -91,7 +101,6 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   setPath() {
-    var _a;
     // Construct icon path from different possible sources
     let basePath;
     const metaBase = document.head.querySelector('meta[name="design-system-settings"][data-post-icon-base]');
@@ -106,8 +115,6 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     // 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;
   }
@@ -139,7 +146,17 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         .catch(reject);
     });
   }
+  createIconFromStorage() {
+    const storedIcon = window.localStorage.getItem(`post-icon-${this.name}`);
+    if (storedIcon) {
+      this.svgSource = storedIcon !== null && storedIcon !== void 0 ? storedIcon : this.svgSource;
+      this.createIcon();
+    }
+  }
   createIcon() {
+    // create svg element from svgSource string
+    const domParser = new DOMParser();
+    this.svgElement = domParser.parseFromString(this.svgSource, 'text/html').querySelector('svg');
     // create inline styles for some properties
     const svgStyles = Object.entries({
       scale: this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,
@@ -148,16 +165,13 @@ 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;
+    this.svgElement.setAttribute('style', svgStyles);
+    this.host.shadowRoot.innerHTML = this.svgElement.outerHTML;
   }
   render() {
-    return (h(Host, { "data-version": version }, h("div", { innerHTML: this.svgOutput })));
+    return h(Host, { "data-version": version });
   }
+  get host() { return this; }
   static get watchers() { return {
     "animation": ["validateAnimation"],
     "base": ["validateBase"],
@@ -177,6 +191,7 @@ const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "rotate": [2],
     "scale": [2],
     "pathForceCDN": [32],
+    "svgStyles": [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/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}
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 0.75s ease-in-out infinite alternate,\n 'cylon-vertical': icon-animation-cylon-vertical 0.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 0.75s ease-in-out infinite alternate,\n 'throb': icon-animation-throb 0.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]:not([flip-h='false'])) {\n svg {\n scale: -1 1;\n }\n}\n\n:host([flip-v]:not([flip-v='false'])) {\n svg {\n scale: 1 -1;\n }\n}\n\n:host([flip-h][flip-v]:not([flip-h='false'], [flip-v='false'])) {\n svg {\n scale: -1;\n }\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 transform-origin: center;\n}\n\n@each $key, $value in $post-icon-animations {\n :host([animation='#{$key}']) {\n animation: $value;\n }\n}\n\n@keyframes icon-animation-cylon {\n from {\n transform: translateX(-25%);\n }\n to {\n transform: translateX(25%);\n }\n}\n\n@keyframes icon-animation-cylon-vertical {\n from {\n transform: translateY(25%);\n }\n to {\n transform: translateY(-25%);\n }\n}\n\n@keyframes icon-animation-fade {\n from {\n opacity: 0.1;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes icon-animation-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n}\n\n@keyframes icon-animation-throb {\n from {\n opacity: 0.5;\n transform: scale(0.5);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n","import { Component, Element, 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_NAMES = [\n 'cylon',\n 'cylon-vertical',\n 'spin',\n 'spin-reverse',\n 'fade',\n 'throb',\n] as const;\nconst ANIMATION_KEYS = [...ANIMATION_NAMES];\n\ntype Animation = (typeof ANIMATION_NAMES)[number];\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 private svgElement: SVGElement;\n\n @Element() host: HTMLPostIconElement;\n\n @State() pathForceCDN = false;\n @State() svgStyles: string;\n @State() svgOutput: string;\n\n /\n The name of the animation.\n /\n @Prop() readonly animation?: Animation \| null = null;\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).<br/>Leave this field empty to use the default cdn url.\n /\n @Prop() readonly base?: string \| null = null;\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 = false;\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 = false;\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 \| null = null;\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 \| null = null;\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 this.createIconFromStorage();\n\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 // 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 createIconFromStorage() {\n const storedIcon = window.localStorage.getItem(`post-icon-${this.name}`);\n\n if (storedIcon) {\n this.svgSource = storedIcon ?? this.svgSource;\n this.createIcon();\n }\n }\n\n private createIcon() {\n // create svg element from svgSource string\n const domParser = new DOMParser();\n this.svgElement = domParser.parseFromString(this.svgSource, 'text/html').querySelector('svg');\n\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 this.svgElement.setAttribute('style', svgStyles);\n this.host.shadowRoot.innerHTML = this.svgElement.outerHTML;\n }\n\n render() {\n return <Host data-version={version} />;\n }\n}\n"],"version":3}

package/dist/docs.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-03-29T08:19:41",
+  "timestamp": "2023-04-04T13:39:23",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.2.0",
@@ -88,14 +88,36 @@
       "props": [
         {
           "name": "animation",
-          "type": "string",
+          "type": "\"cylon\" | \"cylon-vertical\" | \"fade\" | \"spin\" | \"spin-reverse\" | \"throb\"",
           "mutable": false,
           "attr": "animation",
           "reflectToAttr": false,
-          "docs": "The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`).",
+          "docs": "The name of the animation.",
           "docsTags": [],
+          "default": "null",
           "values": [
             {
+              "value": "cylon",
+              "type": "string"
+            },
+            {
+              "value": "cylon-vertical",
+              "type": "string"
+            },
+            {
+              "value": "fade",
+              "type": "string"
+            },
+            {
+              "value": "spin",
+              "type": "string"
+            },
+            {
+              "value": "spin-reverse",
+              "type": "string"
+            },
+            {
+              "value": "throb",
               "type": "string"
             }
           ],
@@ -108,8 +130,9 @@
           "mutable": false,
           "attr": "base",
           "reflectToAttr": false,
-          "docs": "The base path, where the icons are located (must be a public url).",
+          "docs": "The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.",
           "docsTags": [],
+          "default": "null",
           "values": [
             {
               "type": "string"
@@ -126,6 +149,7 @@
           "reflectToAttr": false,
           "docs": "When set to `true`, the icon will be flipped horizontally.",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -142,6 +166,7 @@
           "reflectToAttr": false,
           "docs": "When set to `true`, the icon will be flipped vertically.",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -164,7 +189,7 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": true
         },
         {
           "name": "rotate",
@@ -172,8 +197,9 @@
           "mutable": false,
           "attr": "rotate",
           "reflectToAttr": false,
-          "docs": "The `number` of degree for the css `rotate` transformation.",
+          "docs": "The number of degree for the css rotate transformation.",
           "docsTags": [],
+          "default": "null",
           "values": [
             {
               "type": "number"
@@ -188,8 +214,9 @@
           "mutable": false,
           "attr": "scale",
           "reflectToAttr": false,
-          "docs": "The `number` for the css `scale` transformation.",
+          "docs": "The number for the css scale transformation.",
           "docsTags": [],
+          "default": "null",
           "values": [
             {
               "type": "number"

package/dist/esm/loader.js CHANGED Viewed

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["post-collapsible",[[1,"post-collapsible",{"collapsed":[4],"headingLevel":[2,"heading-level"],"collapseClasses":[32],"collapseHeight":[32],"collapsibleId":[32],"hasHeader":[32],"headingTag":[32],"isOpen":[32],"onAccordionButtonClick":[32],"toggle":[64]}]]],["post-icon",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"pathForceCDN":[32],"svgOutput":[32]}]]]], options);
+  return bootstrapLazy([["post-collapsible",[[1,"post-collapsible",{"collapsed":[4],"headingLevel":[2,"heading-level"],"collapseClasses":[32],"collapseHeight":[32],"collapsibleId":[32],"hasHeader":[32],"headingTag":[32],"isOpen":[32],"onAccordionButtonClick":[32],"toggle":[64]}]]],["post-icon",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"pathForceCDN":[32],"svgStyles":[32],"svgOutput":[32]}]]]], options);
   });
 };

package/dist/esm/{package-144d0036.js → package-fb4a74d0.js} RENAMED Viewed

@@ -16,8 +16,8 @@ function checkType(value, type, error) {
   }
 }
-const version = "1.3.3";
+const version = "1.3.4";
 export { checkOneOf as a, checkType as c, version as v };
-//# sourceMappingURL=package-144d0036.js.map
+//# sourceMappingURL=package-fb4a74d0.js.map

package/dist/esm/{package-144d0036.js.map → package-fb4a74d0.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"package-~~144d0036~~.js","mappings":"SAAgB,UAAU,CAAI,KAAQ,EAAE,cAAmB,EAAE,KAAa;EACxE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC9D;;SCMgB,SAAS,CAAC,KAAc,EAAE,IAAkB,EAAE,KAAa;EACzE,MAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC;EACrC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;EAE1C,IAAI,WAAW,IAAI,YAAY,EAAE;IAC/B,IAAI,YAAY,KAAK,WAAW;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GAC1D;OAAM;IACL,IAAI,OAAO,KAAK,KAAK,IAAI;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACnD;AACH;;;;;;","names":[],"sources":["./src/utils/property-checkers/check-one-of.ts","./src/utils/property-checkers/check-type.ts"],"sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: T[], error: string) {\n if (!possibleValues.includes(value)) throw new Error(error);\n}\n","export type PropertyType =\n \| 'boolean'\n \| 'number'\n \| 'string'\n \| 'array'\n \| 'object'\n \| 'function';\n\nexport function checkType(value: unknown, type: PropertyType, error: string) {\n const typeIsArray = type === 'array';\n const valueIsArray = Array.isArray(value);\n\n if (typeIsArray \|\| valueIsArray) {\n if (valueIsArray !== typeIsArray) throw new Error(error);\n } else {\n if (typeof value !== type) throw new Error(error);\n }\n}\n"],"version":3}
1	+ {"file":"package-fb4a74d0.js","mappings":"SAAgB,UAAU,CAAI,KAAQ,EAAE,cAAmB,EAAE,KAAa;EACxE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC9D;;SCMgB,SAAS,CAAC,KAAc,EAAE,IAAkB,EAAE,KAAa;EACzE,MAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC;EACrC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;EAE1C,IAAI,WAAW,IAAI,YAAY,EAAE;IAC/B,IAAI,YAAY,KAAK,WAAW;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GAC1D;OAAM;IACL,IAAI,OAAO,KAAK,KAAK,IAAI;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACnD;AACH;;;;;;","names":[],"sources":["./src/utils/property-checkers/check-one-of.ts","./src/utils/property-checkers/check-type.ts"],"sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: T[], error: string) {\n if (!possibleValues.includes(value)) throw new Error(error);\n}\n","export type PropertyType =\n \| 'boolean'\n \| 'number'\n \| 'string'\n \| 'array'\n \| 'object'\n \| 'function';\n\nexport function checkType(value: unknown, type: PropertyType, error: string) {\n const typeIsArray = type === 'array';\n const valueIsArray = Array.isArray(value);\n\n if (typeIsArray \|\| valueIsArray) {\n if (valueIsArray !== typeIsArray) throw new Error(error);\n } else {\n if (typeof value !== type) throw new Error(error);\n }\n}\n"],"version":3}

package/dist/esm/post-collapsible.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-286143e7.js';
-import { c as checkType, a as checkOneOf, v as version } from './package-144d0036.js';
+import { c as checkType, a as checkOneOf, v as version } from './package-fb4a74d0.js';
 function getElementHeight(el, classesWhenShown = []) {
   if (!Array.isArray(classesWhenShown))

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

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return bootstrapLazy([["post-collapsible",[[1,"post-collapsible",{"collapsed":[4],"headingLevel":[2,"heading-level"],"collapseClasses":[32],"collapseHeight":[32],"collapsibleId":[32],"hasHeader":[32],"headingTag":[32],"isOpen":[32],"onAccordionButtonClick":[32],"toggle":[64]}]]],["post-icon",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"pathForceCDN":[32],"svgOutput":[32]}]]]], options);
+  return bootstrapLazy([["post-collapsible",[[1,"post-collapsible",{"collapsed":[4],"headingLevel":[2,"heading-level"],"collapseClasses":[32],"collapseHeight":[32],"collapsibleId":[32],"hasHeader":[32],"headingTag":[32],"isOpen":[32],"onAccordionButtonClick":[32],"toggle":[64]}]]],["post-icon",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"pathForceCDN":[32],"svgStyles":[32],"svgOutput":[32]}]]]], options);
 });
 //# sourceMappingURL=post-components.js.map

package/dist/esm/post-icon.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-286143e7.js';
-import { c as checkType, a as checkOneOf, v as version } from './package-144d0036.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-286143e7.js';
+import { c as checkType, a as checkOneOf, v as version } from './package-fb4a74d0.js';
 const EMPTY_VALUES = [undefined, null, ''];
@@ -20,23 +20,32 @@ function checkNonEmpty(value, 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 postIconCss = ":host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;fill:currentColor}:host([flip-h]:not([flip-h=false])) svg{scale:-1 1}:host([flip-v]:not([flip-v=false])) svg{scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])) svg{scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon 0.75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade 0.75s ease-in-out infinite alternate}:host([animation=throb]){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_NAMES = [
+  'cylon',
+  'cylon-vertical',
+  'spin',
+  'spin-reverse',
+  'fade',
+  'throb',
+];
+const ANIMATION_KEYS = [...ANIMATION_NAMES];
 const PostIcon = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.svgSource = '<svg viewBox="0 0 16 16"></svg>';
     this.pathForceCDN = false;
+    this.svgStyles = undefined;
     this.svgOutput = undefined;
-    this.animation = undefined;
-    this.base = undefined;
-    this.flipH = undefined;
-    this.flipV = undefined;
+    this.animation = null;
+    this.base = null;
+    this.flipH = false;
+    this.flipV = false;
     this.name = undefined;
-    this.rotate = undefined;
-    this.scale = undefined;
+    this.rotate = null;
+    this.scale = null;
   }
   validateAnimation(newValue = this.animation) {
     if (newValue !== undefined)
@@ -71,6 +80,7 @@ const PostIcon = class {
     this.validateAnimation();
   }
   componentWillRender() {
+    this.createIconFromStorage();
     // create path dependant on the props
     this.setPath();
     // fetch icon if the prop "name" is defined and
@@ -89,7 +99,6 @@ const PostIcon = class {
     }
   }
   setPath() {
-    var _a;
     // Construct icon path from different possible sources
     let basePath;
     const metaBase = document.head.querySelector('meta[name="design-system-settings"][data-post-icon-base]');
@@ -104,8 +113,6 @@ const PostIcon = class {
     }
     // 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;
   }
@@ -137,7 +144,17 @@ const PostIcon = class {
         .catch(reject);
     });
   }
+  createIconFromStorage() {
+    const storedIcon = window.localStorage.getItem(`post-icon-${this.name}`);
+    if (storedIcon) {
+      this.svgSource = storedIcon !== null && storedIcon !== void 0 ? storedIcon : this.svgSource;
+      this.createIcon();
+    }
+  }
   createIcon() {
+    // create svg element from svgSource string
+    const domParser = new DOMParser();
+    this.svgElement = domParser.parseFromString(this.svgSource, 'text/html').querySelector('svg');
     // create inline styles for some properties
     const svgStyles = Object.entries({
       scale: this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,
@@ -146,16 +163,13 @@ const PostIcon = class {
       .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;
+    this.svgElement.setAttribute('style', svgStyles);
+    this.host.shadowRoot.innerHTML = this.svgElement.outerHTML;
   }
   render() {
-    return (h(Host, { "data-version": version }, h("div", { innerHTML: this.svgOutput })));
+    return h(Host, { "data-version": version });
   }
+  get host() { return getElement(this); }
   static get watchers() { return {
     "animation": ["validateAnimation"],
     "base": ["validateBase"],

package/dist/esm/post-icon.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"post-icon.entry.js","mappings":"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","names":[],"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}
1	+ {"file":"post-icon.entry.js","mappings":"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","names":[],"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 0.75s ease-in-out infinite alternate,\n 'cylon-vertical': icon-animation-cylon-vertical 0.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 0.75s ease-in-out infinite alternate,\n 'throb': icon-animation-throb 0.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]:not([flip-h='false'])) {\n svg {\n scale: -1 1;\n }\n}\n\n:host([flip-v]:not([flip-v='false'])) {\n svg {\n scale: 1 -1;\n }\n}\n\n:host([flip-h][flip-v]:not([flip-h='false'], [flip-v='false'])) {\n svg {\n scale: -1;\n }\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 transform-origin: center;\n}\n\n@each $key, $value in $post-icon-animations {\n :host([animation='#{$key}']) {\n animation: $value;\n }\n}\n\n@keyframes icon-animation-cylon {\n from {\n transform: translateX(-25%);\n }\n to {\n transform: translateX(25%);\n }\n}\n\n@keyframes icon-animation-cylon-vertical {\n from {\n transform: translateY(25%);\n }\n to {\n transform: translateY(-25%);\n }\n}\n\n@keyframes icon-animation-fade {\n from {\n opacity: 0.1;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes icon-animation-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n}\n\n@keyframes icon-animation-throb {\n from {\n opacity: 0.5;\n transform: scale(0.5);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n","import { Component, Element, 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_NAMES = [\n 'cylon',\n 'cylon-vertical',\n 'spin',\n 'spin-reverse',\n 'fade',\n 'throb',\n] as const;\nconst ANIMATION_KEYS = [...ANIMATION_NAMES];\n\ntype Animation = (typeof ANIMATION_NAMES)[number];\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 private svgElement: SVGElement;\n\n @Element() host: HTMLPostIconElement;\n\n @State() pathForceCDN = false;\n @State() svgStyles: string;\n @State() svgOutput: string;\n\n /\n The name of the animation.\n /\n @Prop() readonly animation?: Animation \| null = null;\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).<br/>Leave this field empty to use the default cdn url.\n /\n @Prop() readonly base?: string \| null = null;\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 = false;\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 = false;\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 \| null = null;\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 \| null = null;\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 this.createIconFromStorage();\n\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 // 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 createIconFromStorage() {\n const storedIcon = window.localStorage.getItem(`post-icon-${this.name}`);\n\n if (storedIcon) {\n this.svgSource = storedIcon ?? this.svgSource;\n this.createIcon();\n }\n }\n\n private createIcon() {\n // create svg element from svgSource string\n const domParser = new DOMParser();\n this.svgElement = domParser.parseFromString(this.svgSource, 'text/html').querySelector('svg');\n\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 this.svgElement.setAttribute('style', svgStyles);\n this.host.shadowRoot.innerHTML = this.svgElement.outerHTML;\n }\n\n render() {\n return <Host data-version={version} />;\n }\n}\n"],"version":3}

package/dist/post-components/p-6e225c16.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as i,g as n,H as s}from"./p-0c286590.js";import{c as o,a as e,v as a}from"./p-87bf3416.js";const l=[undefined,null,""];function r(t){return(...i)=>{const n=i[0];if(!l.some((t=>t===n)))t(...i)}}function h(t,i){if(l.some((i=>i===t))){throw new Error(i)}}const c=r(e);const m=r(o);const f=":host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;fill:currentColor}:host([flip-h]:not([flip-h=false])) svg{scale:-1 1}:host([flip-v]:not([flip-v=false])) svg{scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])) svg{scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon 0.75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade 0.75s ease-in-out infinite alternate}:host([animation=throb]){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 p="https://unpkg.com/@swisspost/design-system-icons/public/post-icons";const d=["cylon","cylon-vertical","spin","spin-reverse","fade","throb"];const u=[...d];const v=class{constructor(i){t(this,i);this.svgSource='<svg viewBox="0 0 16 16"></svg>';this.pathForceCDN=false;this.svgStyles=undefined;this.svgOutput=undefined;this.animation=null;this.base=null;this.flipH=false;this.flipV=false;this.name=undefined;this.rotate=null;this.scale=null}validateAnimation(t=this.animation){if(t!==undefined)c(t,u,`The post-icon "animation" prop requires one of the following values: ${u.join(", ")}.`)}validateBase(t=this.base){m(t,"string",'The post-icon "base" prop should be a string.')}validateFlipH(t=this.flipH){m(t,"boolean",'The post-icon "flipH" prop should be a boolean.')}validateFlipV(t=this.flipV){m(t,"boolean",'The post-icon "flipV" prop should be a boolean.')}validateName(t=this.name){h(t,'The post-icon "name" prop is required!.');o(t,"string",'The post-icon "name" prop should be a string.')}validateRotate(t=this.rotate){m(t,"number",'The post-icon "rotate" prop should be a number.')}validateScale(t=this.scale){m(t,"number",'The post-icon "scale" prop should be a number.')}componentWillLoad(){this.validateBase();this.validateName();this.validateFlipH();this.validateFlipV();this.validateScale();this.validateRotate();this.validateAnimation()}componentWillRender(){this.createIconFromStorage();this.setPath();if(this.name&&this.path!==this.loadedPath){this.loadedPath=this.path;this.fetchIcon().then((t=>{if(t)this.createIcon()})).catch((t=>{console.error(t)}))}}setPath(){let t;const i=document.head.querySelector('meta[name="design-system-settings"][data-post-icon-base]');if(this.base){t=this.base}else if(i){t=i.getAttribute("data-post-icon-base")}else{t=p}this.path=this.getPath(this.pathForceCDN?p:t);this.pathForceCDN=false}getPath(t){return new URL([...t.split("/"),`${this.name}.svg#icon`].join("/"),window.location.origin).toString()}fetchIcon(){return new Promise(((t,i)=>{fetch(this.path).then((t=>t.text())).then((i=>{const n=i.match(/^<svg\b([\s\S]*)><\/svg>/);if(n!==null){this.svgSource=n[0];window.localStorage.setItem(`post-icon-${this.name}`,this.svgSource);t(true)}else if(this.path!==this.getPath(p)){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.`);this.pathForceCDN=true;t(false)}})).catch(i)}))}createIconFromStorage(){const t=window.localStorage.getItem(`post-icon-${this.name}`);if(t){this.svgSource=t!==null&&t!==void 0?t:this.svgSource;this.createIcon()}}createIcon(){const t=new DOMParser;this.svgElement=t.parseFromString(this.svgSource,"text/html").querySelector("svg");const i=Object.entries({scale:this.scale&&!isNaN(Number(this.scale))?`${this.scale}`:null,rotate:this.rotate&&!isNaN(Number(this.rotate))?`${this.rotate}deg`:null}).filter((([t,i])=>i!==null)).map((([t,i])=>`${t}: ${i}`)).join(";");this.svgElement.setAttribute("style",i);this.host.shadowRoot.innerHTML=this.svgElement.outerHTML}render(){return i(s,{"data-version":a})}get host(){return n(this)}static get watchers(){return{animation:["validateAnimation"],base:["validateBase"],flipH:["validateFlipH"],flipV:["validateFlipV"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}}};v.style=f;export{v as post_icon};
2	+ //# sourceMappingURL=p-6e225c16.entry.js.map

package/dist/post-components/p-6e225c16.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["EMPTY_VALUES","undefined","emptyOr","check","args","value","some","v","checkNonEmpty","error","Error","checkEmptyOrOneOf","checkOneOf","checkEmptyOrType","checkType","postIconCss","CDN_URL","ANIMATION_NAMES","ANIMATION_KEYS","PostIcon","this","svgSource","validateAnimation","newValue","animation","join","validateBase","base","validateFlipH","flipH","validateFlipV","flipV","validateName","name","validateRotate","rotate","validateScale","scale","componentWillLoad","componentWillRender","createIconFromStorage","setPath","path","loadedPath","fetchIcon","then","successfullyLoaded","createIcon","catch","console","basePath","metaBase","document","head","querySelector","getAttribute","getPath","pathForceCDN","URL","split","window","location","origin","toString","Promise","resolve","reject","fetch","response","text","textResponse","match","localStorage","setItem","warn","storedIcon","getItem","domParser","DOMParser","svgElement","parseFromString","svgStyles","Object","entries","isNaN","Number","filter","_key","map","key","setAttribute","host","shadowRoot","innerHTML","outerHTML","render","h","Host","version"],"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 0.75s ease-in-out infinite alternate,\n 'cylon-vertical': icon-animation-cylon-vertical 0.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 0.75s ease-in-out infinite alternate,\n 'throb': icon-animation-throb 0.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]:not([flip-h='false'])) {\n svg {\n scale: -1 1;\n }\n}\n\n:host([flip-v]:not([flip-v='false'])) {\n svg {\n scale: 1 -1;\n }\n}\n\n:host([flip-h][flip-v]:not([flip-h='false'], [flip-v='false'])) {\n svg {\n scale: -1;\n }\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 transform-origin: center;\n}\n\n@each $key, $value in $post-icon-animations {\n :host([animation='#{$key}']) {\n animation: $value;\n }\n}\n\n@keyframes icon-animation-cylon {\n from {\n transform: translateX(-25%);\n }\n to {\n transform: translateX(25%);\n }\n}\n\n@keyframes icon-animation-cylon-vertical {\n from {\n transform: translateY(25%);\n }\n to {\n transform: translateY(-25%);\n }\n}\n\n@keyframes icon-animation-fade {\n from {\n opacity: 0.1;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes icon-animation-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n}\n\n@keyframes icon-animation-throb {\n from {\n opacity: 0.5;\n transform: scale(0.5);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n","import { Component, Element, 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_NAMES = [\n 'cylon',\n 'cylon-vertical',\n 'spin',\n 'spin-reverse',\n 'fade',\n 'throb',\n] as const;\nconst ANIMATION_KEYS = [...ANIMATION_NAMES];\n\ntype Animation = (typeof ANIMATION_NAMES)[number];\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 private svgElement: SVGElement;\n\n @Element() host: HTMLPostIconElement;\n\n @State() pathForceCDN = false;\n @State() svgStyles: string;\n @State() svgOutput: string;\n\n /**\n * The name of the animation.\n */\n @Prop() readonly animation?: Animation | null = null;\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).<br/>Leave this field empty to use the default cdn url.\n */\n @Prop() readonly base?: string | null = null;\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 = false;\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 = false;\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 | null = null;\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 | null = null;\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 this.createIconFromStorage();\n\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 // 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 createIconFromStorage() {\n const storedIcon = window.localStorage.getItem(`post-icon-${this.name}`);\n\n if (storedIcon) {\n this.svgSource = storedIcon ?? this.svgSource;\n this.createIcon();\n }\n }\n\n private createIcon() {\n // create svg element from svgSource string\n const domParser = new DOMParser();\n this.svgElement = domParser.parseFromString(this.svgSource, 'text/html').querySelector('svg');\n\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 this.svgElement.setAttribute('style', svgStyles);\n this.host.shadowRoot.innerHTML = this.svgElement.outerHTML;\n }\n\n render() {\n return <Host data-version={version} />;\n }\n}\n"],"mappings":"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"}