@swisspost/design-system-components 1.3.2 → 1.3.4

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

@@ -1,28 +1,32 @@
 import { Host, h } from '@stencil/core';
-import { checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';
+import { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';
+import { version } from '../../../package.json';
 const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
-const ANIMATION_KEYS = [
+const ANIMATION_NAMES = [
   'cylon',
   'cylon-vertical',
   'spin',
   'spin-reverse',
   'fade',
-  'throb'
+  'throb',
 ];
+const ANIMATION_KEYS = [...ANIMATION_NAMES];
 /**
  * @class PostIcon - representing a stencil component
  */
 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)
@@ -38,6 +42,7 @@ export class PostIcon {
     checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
   }
   validateName(newValue = this.name) {
+    checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
     checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
   }
   validateRotate(newValue = this.rotate) {
@@ -46,8 +51,35 @@ export class PostIcon {
   validateScale(newValue = this.scale) {
     checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
   }
-  connectedCallback() {
-    var _a;
+  componentWillLoad() {
+    this.validateBase();
+    this.validateName();
+    this.validateFlipH();
+    this.validateFlipV();
+    this.validateScale();
+    this.validateRotate();
+    this.validateAnimation();
+  }
+  componentWillRender() {
+    this.createIconFromStorage();
+    // create path dependant on the props
+    this.setPath();
+    // fetch icon if the prop "name" is defined and
+    // the path has not allready been loaded
+    if (this.name && this.path !== this.loadedPath) {
+      this.loadedPath = this.path;
+      this.fetchIcon()
+        .then(successfullyLoaded => {
+        // create icon only if an svg has been loaded successfully
+        if (successfullyLoaded)
+          this.createIcon();
+      })
+        .catch(error => {
+        console.error(error);
+      });
+    }
+  }
+  setPath() {
     // Construct icon path from different possible sources
     let basePath;
     const metaBase = document.head.querySelector('meta[name="design-system-settings"][data-post-icon-base]');
@@ -60,20 +92,51 @@ export class PostIcon {
     else {
       basePath = CDN_URL;
     }
-    this.path = this.getPath(basePath);
-    this.svgSource = (_a = window.localStorage.getItem(`post-icon-${this.name}`)) !== null && _a !== void 0 ? _a : this.svgSource;
+    // use "basePath" only if "pathForceCDN" state is "false"
+    this.path = this.getPath(this.pathForceCDN ? CDN_URL : basePath);
+    // reset "pathForceCDN" after every try
+    this.pathForceCDN = false;
   }
-  componentWillLoad() {
-    this.validateAnimation();
-    this.validateBase();
-    this.validateFlipH();
-    this.validateFlipV();
-    this.validateName();
-    this.validateRotate();
-    this.validateScale();
-    this.fetchSVG();
+  getPath(basePath) {
+    return new URL([...basePath.split('/'), `${this.name}.svg#icon`].join('/'), window.location.origin).toString();
   }
-  componentWillRender() {
+  fetchIcon() {
+    return new Promise((resolve, reject) => {
+      fetch(this.path)
+        .then(response => response.text())
+        .then(textResponse => {
+        // match "svg" out of "textResponse"
+        const match = textResponse.match(/^<svg\b([\s\S]*)><\/svg>/);
+        if (match !== null) {
+          // set "svgSource" and return "successfullyLoaded" with true
+          this.svgSource = match[0];
+          window.localStorage.setItem(`post-icon-${this.name}`, this.svgSource);
+          resolve(true);
+        }
+        else if (this.path !== this.getPath(CDN_URL)) {
+          // if used "path" is not CDN path, and fetch has loaded something else than a "svg", try to reload it from the CDN
+          console.warn(`Warning in <post-icon/>: The path "${this.path}" seems to be no svg-only content. We'll gonna try to load the icon from the cdn.`);
+          // trigger a component update, which will result in a refetch of the icon with the "CDN_URL"
+          this.pathForceCDN = true;
+          // return "successfullyLoaded" with false
+          resolve(false);
+        }
+      })
+        .catch(reject);
+    });
+  }
+  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,
       rotate: this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,
@@ -81,42 +144,11 @@ export class PostIcon {
       .filter(([_key, value]) => value !== null)
       .map(([key, value]) => `${key}: ${value}`)
       .join(';');
-    const helperElement = document.createElement('div');
-    helperElement.innerHTML = this.svgSource;
-    const svgElement = helperElement.querySelector('svg');
-    svgElement.setAttribute('style', svgStyles);
-    this.svgOutput = helperElement.innerHTML;
-  }
-  fetchSVG() {
-    fetch(this.path)
-      .then(response => response.text())
-      .then(textResponse => {
-      const match = textResponse.match(/^<svg\b([\s\S]*)><\/svg>/);
-      if (match !== null) {
-        this.svgSource = match[0];
-        window.localStorage.setItem(`post-icon-${this.name}`, this.svgSource);
-      }
-      else {
-        this.initialPath = this.path;
-        this.path = this.getPath(CDN_URL);
-        if (this.initialPath !== this.path) {
-          console.warn(`Warning in <post-icon/>: The content on the path "${this.path}" seems to be no svg-only content. We'll gonna try to load the icon from the cdn.`);
-          this.fetchSVG();
-        }
-        else {
-          console.error(`Error in <post-icon/>: Could not load the svg on the path "${this.initialPath}"!`);
-        }
-      }
-    })
-      .catch(error => {
-      console.log(error);
-    });
-  }
-  getPath(basePath) {
-    return new URL([...basePath.split('/'), `${this.name}.svg#icon`].join('/'), window.location.origin).toString();
+    this.svgElement.setAttribute('style', svgStyles);
+    this.host.shadowRoot.innerHTML = this.svgElement.outerHTML;
   }
   render() {
-    return (h(Host, null, h("div", { innerHTML: this.svgOutput })));
+    return h(Host, { "data-version": version });
   }
   static get is() { return "post-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -136,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": {}
         },
@@ -161,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",
@@ -181,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",
@@ -198,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",
@@ -208,7 +248,7 @@ export class PostIcon {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
@@ -221,7 +261,7 @@ export class PostIcon {
         "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "number",
+          "original": "number | null",
           "resolved": "number",
           "references": {}
         },
@@ -229,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": {}
         },
@@ -246,18 +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

@@ -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 { checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_KEYS = [\n  'cylon',\n  'cylon-vertical',\n  'spin',\n  'spin-reverse',\n  'fade',\n  'throb'\n];\n\n/**\n * @class PostIcon - representing a stencil component\n */\n@Component({\n  tag: 'post-icon',\n  styleUrl: 'post-icon.scss',\n  shadow: true,\n})\nexport class PostIcon {\n  private initialPath: string;\n  private path: string;\n  private svgSource = '<svg viewBox=\"0 0 16 16\"></svg>';\n\n  @State() svgOutput: string;\n\n  /**\n   * The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`).\n   */\n  @Prop() readonly animation?: string;\n\n  @Watch('animation')\n  validateAnimation(newValue = this.animation) {\n    if (newValue !== undefined) checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon \"animation\" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);\n  }\n\n  /**\n   * The base path, where the icons are located (must be a public url).\n   */\n  @Prop() readonly base?: string;\n\n  @Watch('base')\n  validateBase(newValue = this.base) {\n    checkEmptyOrType(newValue, 'string', 'The post-icon \"base\" prop should be a string.');\n  }\n\n  /**\n   * When set to `true`, the icon will be flipped horizontally.\n   */\n  @Prop() readonly flipH?: boolean;\n\n  @Watch('flipH')\n  validateFlipH(newValue = this.flipH) {\n    checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipH\" prop should be a boolean.');\n  }\n\n  /**\n   * When set to `true`, the icon will be flipped vertically.\n   */\n  @Prop() readonly flipV?: boolean;\n\n  @Watch('flipV')\n  validateFlipV(newValue = this.flipV) {\n    checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipV\" prop should be a boolean.');\n  }\n\n  /**\n   * The name/id of the icon (e.g. 1000, 1001, ...).\n   */\n  @Prop() readonly name: string;\n\n  @Watch('name')\n  validateName(newValue = this.name) {\n    checkType(newValue, 'string', 'The post-icon \"name\" prop should be a string.');\n  }\n\n  /**\n   * The `number` of degree for the css `rotate` transformation.\n   */\n  @Prop() readonly rotate?: number;\n\n  @Watch('rotate')\n  validateRotate(newValue = this.rotate) {\n    checkEmptyOrType(newValue, 'number', 'The post-icon \"rotate\" prop should be a number.');\n  }\n\n  /**\n   * The `number` for the css `scale` transformation.\n   */\n  @Prop() readonly scale?: number;\n\n  @Watch('scale')\n  validateScale(newValue = this.scale) {\n    checkEmptyOrType(newValue, 'number', 'The post-icon \"scale\" prop should be a number.');\n  }\n\n  connectedCallback() {\n    // Construct icon path from different possible sources\n    let basePath: string;\n    const metaBase = document.head.querySelector(\n      'meta[name=\"design-system-settings\"][data-post-icon-base]',\n    );\n\n    if (this.base) {\n      basePath = this.base;\n    } else if (metaBase) {\n      basePath = metaBase.getAttribute('data-post-icon-base');\n    } else {\n      basePath = CDN_URL;\n    }\n\n    this.path = this.getPath(basePath);\n    this.svgSource = window.localStorage.getItem(`post-icon-${this.name}`) ?? this.svgSource;\n  }\n\n  componentWillLoad() {\n    this.validateAnimation();\n    this.validateBase();\n    this.validateFlipH();\n    this.validateFlipV();\n    this.validateName();\n    this.validateRotate();\n    this.validateScale();\n\n    this.fetchSVG();\n  }\n\n  componentWillRender() {\n    const svgStyles = Object.entries({\n      scale: this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,\n      rotate: this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,\n    })\n      .filter(([_key, value]) => value !== null)\n      .map(([key, value]) => `${key}: ${value}`)\n      .join(';');\n\n    const helperElement = document.createElement('div');\n    helperElement.innerHTML = this.svgSource;\n\n    const svgElement = helperElement.querySelector('svg');\n    svgElement.setAttribute('style', svgStyles);\n\n    this.svgOutput = helperElement.innerHTML;\n  }\n\n  private fetchSVG() {\n    fetch(this.path)\n      .then(response => response.text())\n      .then(textResponse => {\n        const match = textResponse.match(/^<svg\\b([\\s\\S]*)><\\/svg>/);\n\n        if (match !== null) {\n          this.svgSource = match[0];\n          window.localStorage.setItem(`post-icon-${this.name}`, this.svgSource);\n        } else {\n          this.initialPath = this.path;\n          this.path = this.getPath(CDN_URL);\n\n          if (this.initialPath !== this.path) {\n            console.warn(\n              `Warning in <post-icon/>: The content on the path \"${this.path}\" seems to be no svg-only content. We'll gonna try to load the icon from the cdn.`,\n            );\n            this.fetchSVG();\n          } else {\n            console.error(\n              `Error in <post-icon/>: Could not load the svg on the path \"${this.initialPath}\"!`,\n            );\n          }\n        }\n      })\n      .catch(error => {\n        console.log(error);\n      });\n  }\n\n  private getPath(basePath: string) {\n    return new URL(\n      [...basePath.split('/'), `${this.name}.svg#icon`].join('/'),\n      window.location.origin,\n    ).toString();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div innerHTML={this.svgOutput} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"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/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"","sourcesContent":["export { Components, JSX } from './components';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"","sourcesContent":["export { Components, JSX } from './components';\n"]}

package/dist/collection/utils/get-element-height.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-element-height.js","sourceRoot":"","sources":["../../src/utils/get-element-height.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,gBAAgB,CAAC,EAAe,EAAE,mBAAsC,EAAE;EACxF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;IAAE,gBAAgB,GAAG,CAAC,gBAAgB,CAAC,CAAC;EAE5E,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;EACrF,IAAI,YAAY,CAAC,MAAM;IAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC;EAE3D,MAAM,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;EAErC,IAAI,YAAY,CAAC,MAAM;IAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,CAAC;EAE9D,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["export function getElementHeight(el: HTMLElement): number;\nexport function getElementHeight(el: HTMLElement, classWhenShown: string): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string[]): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string | string[] = []): number {\n  if (!Array.isArray(classesWhenShown)) classesWhenShown = [classesWhenShown];\n\n  const classesToAdd = classesWhenShown.filter(klass => !el.classList.contains(klass));\n  if (classesToAdd.length) el.classList.add(...classesToAdd);\n\n  const scrollHeight = el.scrollHeight;\n\n  if (classesToAdd.length) el.classList.remove(...classesToAdd);\n\n  return scrollHeight;\n}\n"]}
+{"version":3,"file":"get-element-height.js","sourceRoot":"","sources":["../../../src/utils/get-element-height.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,gBAAgB,CAAC,EAAe,EAAE,mBAAsC,EAAE;EACxF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;IAAE,gBAAgB,GAAG,CAAC,gBAAgB,CAAC,CAAC;EAE5E,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;EACrF,IAAI,YAAY,CAAC,MAAM;IAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC;EAE3D,MAAM,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;EAErC,IAAI,YAAY,CAAC,MAAM;IAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,CAAC;EAE9D,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["export function getElementHeight(el: HTMLElement): number;\nexport function getElementHeight(el: HTMLElement, classWhenShown: string): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string[]): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string | string[] = []): number {\n  if (!Array.isArray(classesWhenShown)) classesWhenShown = [classesWhenShown];\n\n  const classesToAdd = classesWhenShown.filter(klass => !el.classList.contains(klass));\n  if (classesToAdd.length) el.classList.add(...classesToAdd);\n\n  const scrollHeight = el.scrollHeight;\n\n  if (classesToAdd.length) el.classList.remove(...classesToAdd);\n\n  return scrollHeight;\n}\n"]}

package/dist/collection/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './get-element-height';\nexport * from './on-transition-end';\nexport * from './property-checkers';\nexport * from './should-reduce-motion';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './get-element-height';\nexport * from './on-transition-end';\nexport * from './property-checkers';\nexport * from './should-reduce-motion';\n"]}

package/dist/collection/utils/on-transition-end.js.map

@@ -1 +1 @@
-{"version":3,"file":"on-transition-end.js","sourceRoot":"","sources":["../../src/utils/on-transition-end.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,EAAe;EACnD,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;IAC3B,IAAI,kBAAkB,EAAE,EAAE;MACxB,OAAO,EAAE,CAAC;KACX;SAAM;MACL,EAAE,CAAC,eAAe,GAAG,GAAG,EAAE;QACxB,OAAO,EAAE,CAAC;QACV,EAAE,CAAC,eAAe,GAAG,IAAI,CAAC;MAC5B,CAAC,CAAC;KACH;EACH,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { shouldReduceMotion } from './should-reduce-motion';\n\nexport async function onTransitionEnd(el: HTMLElement): Promise<void> {\n  return new Promise(resolve => {\n    if (shouldReduceMotion()) {\n      resolve();\n    } else {\n      el.ontransitionend = () => {\n        resolve();\n        el.ontransitionend = null;\n      };\n    }\n  });\n}\n"]}
+{"version":3,"file":"on-transition-end.js","sourceRoot":"","sources":["../../../src/utils/on-transition-end.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,EAAe;EACnD,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;IAC3B,IAAI,kBAAkB,EAAE,EAAE;MACxB,OAAO,EAAE,CAAC;KACX;SAAM;MACL,EAAE,CAAC,eAAe,GAAG,GAAG,EAAE;QACxB,OAAO,EAAE,CAAC;QACV,EAAE,CAAC,eAAe,GAAG,IAAI,CAAC;MAC5B,CAAC,CAAC;KACH;EACH,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { shouldReduceMotion } from './should-reduce-motion';\n\nexport async function onTransitionEnd(el: HTMLElement): Promise<void> {\n  return new Promise(resolve => {\n    if (shouldReduceMotion()) {\n      resolve();\n    } else {\n      el.ontransitionend = () => {\n        resolve();\n        el.ontransitionend = null;\n      };\n    }\n  });\n}\n"]}

package/dist/collection/utils/property-checkers/check-non-empty.js

@@ -0,0 +1,7 @@
+import { EMPTY_VALUES } from './constants';
+export function checkNonEmpty(value, error) {
+  if (EMPTY_VALUES.some(v => v === value)) {
+    throw new Error(error);
+  }
+}
+//# sourceMappingURL=check-non-empty.js.map

package/dist/collection/utils/property-checkers/check-non-empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-non-empty.js","sourceRoot":"","sources":["../../../../src/utils/property-checkers/check-non-empty.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,UAAU,aAAa,CAAC,KAAc,EAAE,KAAa;EACzD,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,EAAE;IACvC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACxB;AACH,CAAC","sourcesContent":["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"]}

package/dist/collection/utils/property-checkers/check-one-of.js.map

@@ -1 +1 @@
-{"version":3,"file":"check-one-of.js","sourceRoot":"","sources":["../../../src/utils/property-checkers/check-one-of.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,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,CAAC","sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: T[], error: string) {\n  if (!possibleValues.includes(value)) throw new Error(error);\n}\n"]}
+{"version":3,"file":"check-one-of.js","sourceRoot":"","sources":["../../../../src/utils/property-checkers/check-one-of.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,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,CAAC","sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: T[], error: string) {\n  if (!possibleValues.includes(value)) throw new Error(error);\n}\n"]}

package/dist/collection/utils/property-checkers/check-type.js.map

@@ -1 +1 @@
-{"version":3,"file":"check-type.js","sourceRoot":"","sources":["../../../src/utils/property-checkers/check-type.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,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,CAAC","sourcesContent":["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,"file":"check-type.js","sourceRoot":"","sources":["../../../../src/utils/property-checkers/check-type.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,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,CAAC","sourcesContent":["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"]}

package/dist/collection/utils/property-checkers/constants.js

@@ -0,0 +1,2 @@
+export const EMPTY_VALUES = [undefined, null, ''];
+//# sourceMappingURL=constants.js.map

package/dist/collection/utils/property-checkers/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/utils/property-checkers/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC","sourcesContent":["export const EMPTY_VALUES = [undefined, null, ''];\n"]}

package/dist/collection/utils/property-checkers/empty-or.js

@@ -1,4 +1,4 @@
-const EMPTY_VALUES = [undefined, null, ''];
+import { EMPTY_VALUES } from './constants';
 export function emptyOr(check) {
   return (...args) => {
     const value = args[0];

package/dist/collection/utils/property-checkers/empty-or.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-or.js","sourceRoot":"","sources":["../../../src/utils/property-checkers/empty-or.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;AAE3C,MAAM,UAAU,OAAO,CAAsB,KAA2B;EACtE,OAAO,CAAC,GAAG,IAAO,EAAE,EAAE;IACpB,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;IACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC;MAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;EAC3D,CAAC,CAAC;AACJ,CAAC","sourcesContent":["const EMPTY_VALUES = [undefined, null, ''];\n\nexport function emptyOr<T extends unknown[]>(check: (...args: T) => void) {\n  return (...args: T) => {\n    const value = args[0];\n    if (!EMPTY_VALUES.some(v => v === value)) check(...args);\n  };\n}\n"]}
+{"version":3,"file":"empty-or.js","sourceRoot":"","sources":["../../../../src/utils/property-checkers/empty-or.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,UAAU,OAAO,CAAsB,KAA2B;EACtE,OAAO,CAAC,GAAG,IAAO,EAAE,EAAE;IACpB,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;IACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC;MAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;EAC3D,CAAC,CAAC;AACJ,CAAC","sourcesContent":["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"]}

package/dist/collection/utils/property-checkers/index.js

@@ -3,6 +3,7 @@ import { checkOneOf } from './check-one-of';
 import { checkType } from './check-type';
 export const checkEmptyOrOneOf = emptyOr(checkOneOf);
 export const checkEmptyOrType = emptyOr(checkType);
+export * from './check-non-empty';
 export * from './check-one-of';
 export * from './check-type';
 //# sourceMappingURL=index.js.map

package/dist/collection/utils/property-checkers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/property-checkers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AACrD,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAEnD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC","sourcesContent":["import { emptyOr } from './empty-or';\nimport { checkOneOf } from './check-one-of';\nimport { checkType } from './check-type';\n\nexport const checkEmptyOrOneOf = emptyOr(checkOneOf);\nexport const checkEmptyOrType = emptyOr(checkType);\n\nexport * from './check-one-of';\nexport * from './check-type';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/utils/property-checkers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AACrD,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAEnD,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC","sourcesContent":["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"]}

package/dist/collection/utils/should-reduce-motion.js.map

@@ -1 +1 @@
-{"version":3,"file":"should-reduce-motion.js","sourceRoot":"","sources":["../../src/utils/should-reduce-motion.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,kBAAkB;EAChC,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE,CAAC","sourcesContent":["export function shouldReduceMotion(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"]}
+{"version":3,"file":"should-reduce-motion.js","sourceRoot":"","sources":["../../../src/utils/should-reduce-motion.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,kBAAkB;EAChC,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE,CAAC","sourcesContent":["export function shouldReduceMotion(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"]}

package/dist/components/{check-type.js → package.js}

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

package/dist/components/package.js.map

@@ -0,0 +1 @@
+{"file":"package.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}