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/cjs/loader.cjs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["post-collapsible.cjs",[[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.cjs",[[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 index.bootstrapLazy([["post-collapsible.cjs",[[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.cjs",[[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/cjs/{package-f1eacd4f.js → package-3838cb5b.js} RENAMED Viewed

@@ -18,10 +18,10 @@ function checkType(value, type, error) {
   }
 }
-const version = "1.3.3";
+const version = "1.3.4";
 exports.checkOneOf = checkOneOf;
 exports.checkType = checkType;
 exports.version = version;
-//# sourceMappingURL=package-f1eacd4f.js.map
+//# sourceMappingURL=package-3838cb5b.js.map

package/dist/cjs/{package-f1eacd4f.js.map → package-3838cb5b.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"package-~~f1eacd4f~~.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-3838cb5b.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/cjs/post-collapsible.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-126f28cf.js');
-const _package = require('./package-f1eacd4f.js');
+const _package = require('./package-3838cb5b.js');
 function getElementHeight(el, classesWhenShown = []) {
   if (!Array.isArray(classesWhenShown))

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

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["post-collapsible.cjs",[[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.cjs",[[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 index.bootstrapLazy([["post-collapsible.cjs",[[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.cjs",[[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);
 });
 exports.setNonce = index.setNonce;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-126f28cf.js');
-const _package = require('./package-f1eacd4f.js');
+const _package = require('./package-3838cb5b.js');
 const EMPTY_VALUES = [undefined, null, ''];
@@ -24,23 +24,32 @@ function checkNonEmpty(value, error) {
 const checkEmptyOrOneOf = emptyOr(_package.checkOneOf);
 const checkEmptyOrType = emptyOr(_package.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) {
     index.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)
@@ -75,6 +84,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
@@ -93,7 +103,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]');
@@ -108,8 +117,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;
   }
@@ -141,7 +148,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,
@@ -150,16 +167,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 (index.h(index.Host, { "data-version": _package.version }, index.h("div", { innerHTML: this.svgOutput })));
+    return index.h(index.Host, { "data-version": _package.version });
   }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "animation": ["validateAnimation"],
     "base": ["validateBase"],

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

	@@ -1 +1 @@
1	- {"file":"post-icon.entry.cjs.js","mappings":"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","names":["checkOneOf","checkType","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 .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.cjs.js","mappings":"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","names":["checkOneOf","checkType","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"],"version":3}

package/dist/collection/components/post-icon/post-icon.css CHANGED Viewed

@@ -10,43 +10,43 @@ svg {
   fill: currentColor;
 }
-:host([flip-h]) svg {
+:host([flip-h]:not([flip-h=false])) svg {
   scale: -1 1;
 }
-:host([flip-v]) svg {
+:host([flip-v]:not([flip-v=false])) svg {
   scale: 1 -1;
 }
-:host([flip-h][flip-v]) svg {
+:host([flip-h][flip-v]:not([flip-h=false], [flip-v=false])) svg {
   scale: -1;
 }
-:host([animation]) svg {
+:host([animation]) {
   transform-origin: center;
 }
-:host([animation=cylon]) svg {
+:host([animation=cylon]) {
   animation: icon-animation-cylon 0.75s ease-in-out infinite alternate;
 }
-:host([animation=cylon-vertical]) svg {
+:host([animation=cylon-vertical]) {
   animation: icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate;
 }
-:host([animation=spin]) svg {
+:host([animation=spin]) {
   animation: icon-animation-spin 2s linear infinite normal;
 }
-:host([animation=spin-reverse]) svg {
+:host([animation=spin-reverse]) {
   animation: icon-animation-spin 2s linear infinite reverse;
 }
-:host([animation=fade]) svg {
+:host([animation=fade]) {
   animation: icon-animation-fade 0.75s ease-in-out infinite alternate;
 }
-:host([animation=throb]) svg {
+:host([animation=throb]) {
   animation: icon-animation-throb 0.75s ease-in-out infinite alternate;
 }

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

@@ -2,7 +2,15 @@ import { Host, h } from '@stencil/core';
 import { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';
 import { version } from '../../../package.json';
 const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
-const ANIMATION_KEYS = ['cylon', 'cylon-vertical', 'spin', 'spin-reverse', 'fade', 'throb'];
+const ANIMATION_NAMES = [
+  'cylon',
+  'cylon-vertical',
+  'spin',
+  'spin-reverse',
+  'fade',
+  'throb',
+];
+const ANIMATION_KEYS = [...ANIMATION_NAMES];
 /**
  * @class PostIcon - representing a stencil component
  */
@@ -10,14 +18,15 @@ export class PostIcon {
   constructor() {
     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)
@@ -52,6 +61,7 @@ export class PostIcon {
     this.validateAnimation();
   }
   componentWillRender() {
+    this.createIconFromStorage();
     // create path dependant on the props
     this.setPath();
     // fetch icon if the prop "name" is defined and
@@ -70,7 +80,6 @@ export class PostIcon {
     }
   }
   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]');
@@ -85,8 +94,6 @@ export class PostIcon {
     }
     // 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;
   }
@@ -118,7 +125,17 @@ export class PostIcon {
         .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,
@@ -127,15 +144,11 @@ export class PostIcon {
       .filter(([_key, value]) => value !== null)
       .map(([key, value]) => `${key}: ${value}`)
       .join(';');
-    // create svg in RAM and append the above styles, before defining the "svgOutput"
-    const helperElement = document.createElement('div');
-    helperElement.innerHTML = this.svgSource;
-    const svgElement = helperElement.querySelector('svg');
-    svgElement.setAttribute('style', svgStyles);
-    this.svgOutput = helperElement.innerHTML;
+    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 });
   }
   static get is() { return "post-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -155,24 +168,29 @@ export class PostIcon {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "Animation | null",
+          "resolved": "\"cylon\" | \"cylon-vertical\" | \"fade\" | \"spin\" | \"spin-reverse\" | \"throb\"",
+          "references": {
+            "Animation": {
+              "location": "global"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`)."
+          "text": "The name of the animation."
         },
         "attribute": "animation",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "null"
       },
       "base": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
+          "original": "string | null",
           "resolved": "string",
           "references": {}
         },
@@ -180,10 +198,11 @@ export class PostIcon {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The base path, where the icons are located (must be a public url)."
+          "text": "The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url."
         },
         "attribute": "base",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "null"
       },
       "flipH": {
         "type": "boolean",
@@ -200,7 +219,8 @@ export class PostIcon {
           "text": "When set to `true`, the icon will be flipped horizontally."
         },
         "attribute": "flip-h",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "flipV": {
         "type": "boolean",
@@ -217,7 +237,8 @@ export class PostIcon {
           "text": "When set to `true`, the icon will be flipped vertically."
         },
         "attribute": "flip-v",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "name": {
         "type": "string",
@@ -227,7 +248,7 @@ export class PostIcon {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
@@ -240,7 +261,7 @@ export class PostIcon {
         "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "number",
+          "original": "number | null",
           "resolved": "number",
           "references": {}
         },
@@ -248,16 +269,17 @@ export class PostIcon {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The `number` of degree for the css `rotate` transformation."
+          "text": "The number of degree for the css rotate transformation."
         },
         "attribute": "rotate",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "null"
       },
       "scale": {
         "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "number",
+          "original": "number | null",
           "resolved": "number",
           "references": {}
         },
@@ -265,19 +287,22 @@ export class PostIcon {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The `number` for the css `scale` transformation."
+          "text": "The number for the css scale transformation."
         },
         "attribute": "scale",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "null"
       }
     };
   }
   static get states() {
     return {
       "pathForceCDN": {},
+      "svgStyles": {},
       "svgOutput": {}
     };
   }
+  static get elementRef() { return "host"; }
   static get watchers() {
     return [{
         "propName": "animation",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"post-icon.js","sourceRoot":"","sources":["../../../../src/components/post-icon/post-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"post-icon.js","sourceRoot":"","sources":["../../../../src/components/post-icon/post-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/components/package.js CHANGED Viewed

@@ -16,7 +16,7 @@ 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 };