@swisspost/design-system-components 1.0.0-beta.3 → 1.2.0

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

@@ -0,0 +1 @@
+{"file":"post-collapsible.js","mappings":"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","names":["PostCollapsible"],"sources":["./src/utils/get-element-height.ts","./src/utils/should-reduce-motion.ts","./src/utils/on-transition-end.ts","./src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","./src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nexport 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: any = []): 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","/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nexport function shouldReduceMotion(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nimport { shouldReduceMotion } from './should-reduce-motion';\n\nexport async function onTransitionEnd(el: HTMLElement): Promise<void> {\n  return new Promise(resolve => {\n    if (shouldReduceMotion()) {\n      resolve();\n    } else {\n      el.ontransitionend = () => {\n        resolve();\n        el.ontransitionend = null;\n      };\n    }\n  });\n}\n","@use '@swisspost/design-system-styles/basics';\n@use '@swisspost/design-system-styles/components/accordion';\n@use '@swisspost/design-system-styles/components/transitions';\n\n:host {\n  display: block;\n}\n","import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkBoolean, checkOneOf, getElementHeight, onTransitionEnd } from '../../utils';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  /**\n   * If `true`, the element is initially collapsed otherwise it is displayed.\n   */\n  @Prop() collapsed?: boolean = false;\n\n  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() headingLevel?: number = 2;\n\n  @State() isOpen = true;\n  @State() collapseClasses: string;\n  @State() collapseHeight: string | null = null;\n  @State() headingTag: string | undefined;\n  @State() collapsibleId: string;\n  @State() hasHeader: boolean;\n\n  @Element() host: HTMLElement;\n\n  isLoaded = false;\n  collapsibleElement: HTMLElement;\n\n  @Watch('collapsed')\n  validateCollapsed(newValue = this.collapsed) {\n    checkBoolean(newValue, 'The post-collapsible \"collapsed\" prop should be a boolean.');\n\n    if (!this.isLoaded) {\n      this.isOpen = !newValue;\n      this.collapseClasses = this.getCollapseClasses();\n    } else {\n      setTimeout(() => {\n        this.toggle(!newValue);\n      });\n    }\n  }\n\n  @Watch('headingLevel')\n  validateHeadingLevel(newValue = this.headingLevel) {\n    checkOneOf(\n      newValue,\n      [ 1, 2, 3, 4, 5, 6 ],\n      'The post-collapsible element requires a heading level between 1 and 6.',\n    );\n\n    this.headingTag = `h${newValue}`;\n  }\n\n  componentWillLoad() {\n    this.validateCollapsed();\n    this.validateHeadingLevel();\n\n    this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n    if (!this.hasHeader) {\n      console.warn('Be sure to bind the post-collapsible to its control using aria-controls and aria-expanded attributes. More information here: https://getbootstrap.com/docs/5.2/components/collapse/#accessibility');\n    }\n\n    this.collapsibleId = this.host.id || `post-collapsible-${nextId++}`;\n    this.collapseClasses = this.getCollapseClasses();\n  }\n\n  componentDidLoad() {\n    this.isLoaded = true;\n    this.collapsibleElement = this.host.shadowRoot.querySelector(`#${this.collapsibleId}--collapse`);\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   */\n  @Method()\n  async toggle(open: boolean = !this.isOpen): Promise<boolean> {\n    if (open !== this.isOpen) {\n      this.isOpen = !this.isOpen;\n\n      this.startTransition();\n\n      await onTransitionEnd(this.collapsibleElement).then(() => {\n        this.collapseHeight = null;\n        this.collapseClasses = this.getCollapseClasses();\n      });\n\n      return this.isOpen;\n    }\n  }\n\n  startTransition() {\n    const expandedHeight = getElementHeight(this.collapsibleElement, 'show');\n\n    this.collapseHeight = `${this.isOpen ? 0 : expandedHeight}px`;\n    this.collapseClasses = 'collapsing';\n\n    setTimeout(() => {\n      this.collapseHeight = `${this.isOpen ? expandedHeight : 0}px`;\n    }, 50);\n  }\n\n  private getCollapseClasses() {\n    return this.isOpen ? 'collapse show' : 'collapse';\n  }\n\n  render() {\n    if (!this.hasHeader) {\n      return (\n        <div\n          id={`${this.collapsibleId}--collapse`}\n          class={this.collapseClasses}\n          style={{ height: this.collapseHeight }}\n        >\n          <slot/>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"accordion-item\">\n        <this.headingTag class=\"accordion-header\" id={`${this.collapsibleId}--header`}>\n          <button\n            class={`accordion-button ${this.isOpen ? '' : 'collapsed'}`}\n            type=\"button\"\n            aria-expanded={`${this.isOpen}`}\n            aria-controls={`${this.collapsibleId}--collapse`}\n            onClick={() => this.toggle()}\n          >\n            <slot name=\"header\"/>\n          </button>\n        </this.headingTag>\n        <div\n          id={`${this.collapsibleId}--collapse`}\n          class={`accordion-collapse ${this.collapseClasses}`}\n          style={{ height: this.collapseHeight }}\n          aria-labelledby={`${this.collapsibleId}--header`}\n        >\n          <div class=\"accordion-body\">\n            <slot/>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{my-component.d.ts → post-icon.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface MyComponent extends Components.MyComponent, HTMLElement {}
-export const MyComponent: {
-  prototype: MyComponent;
-  new (): MyComponent;
+interface PostIcon extends Components.PostIcon, HTMLElement {}
+export const PostIcon: {
+  prototype: PostIcon;
+  new (): PostIcon;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/post-icon.js

@@ -0,0 +1,168 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { b as checkType, d as checkEmptyOrType, e as checkEmptyOrOneOf } from './property-checkers.js';
+
+const postIconCss = ":host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;fill:currentColor}:host([flip-h]) svg{scale:-1 1}:host([flip-v]) svg{scale:1 -1}:host([flip-h][flip-v]) svg{scale:-1}:host([animation]) svg{transform-origin:center}:host([animation=cylon]) svg{animation:icon-animation-cylon 0.75s ease-in-out infinite alternate}:host([animation=cylon-vertical]) svg{animation:icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate}:host([animation=spin]) svg{animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]) svg{animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]) svg{animation:icon-animation-fade 0.75s ease-in-out infinite alternate}:host([animation=throb]) svg{animation:icon-animation-throb 0.75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:0.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:0.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
+
+const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
+const ANIMATION_KEYS = [
+  'cylon',
+  'cylon-vertical',
+  'spin',
+  'spin-reverse',
+  'fade',
+  'throb'
+];
+const PostIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.name = undefined;
+    this.base = undefined;
+    this.flipH = undefined;
+    this.flipV = undefined;
+    this.scale = undefined;
+    this.rotate = undefined;
+    this.animation = undefined;
+    this.initialPath = undefined;
+    this.path = undefined;
+    this.svgSource = '<svg viewBox="0 0 16 16"></svg>';
+    this.svgOutput = undefined;
+  }
+  validateName(newValue = this.name) {
+    checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
+  }
+  validateBase(newValue = this.base) {
+    checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
+  }
+  validateFlipH(newValue = this.flipH) {
+    checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
+  }
+  validateFlipV(newValue = this.flipV) {
+    checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
+  }
+  validateScale(newValue = this.scale) {
+    checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
+  }
+  validateRotate(newValue = this.rotate) {
+    checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
+  }
+  validateAnimation(newValue = this.animation) {
+    if (newValue !== undefined)
+      checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
+  }
+  connectedCallback() {
+    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]');
+    if (this.base) {
+      basePath = this.base;
+    }
+    else if (metaBase) {
+      basePath = metaBase.getAttribute('data-post-icon-base');
+    }
+    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;
+  }
+  componentWillLoad() {
+    this.validateName();
+    this.validateBase();
+    this.validateFlipH();
+    this.validateFlipV();
+    this.validateScale();
+    this.validateRotate();
+    this.validateAnimation();
+    this.fetchSVG();
+  }
+  componentWillRender() {
+    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,
+    })
+      .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;
+  }
+  getPath(basePath) {
+    return new URL([...basePath.split('/'), `${this.name}.svg#icon`].join('/'), window.location.origin).toString();
+  }
+  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);
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { innerHTML: this.svgOutput })));
+  }
+  static get watchers() { return {
+    "name": ["validateName"],
+    "base": ["validateBase"],
+    "flipH": ["validateFlipH"],
+    "flipV": ["validateFlipV"],
+    "scale": ["validateScale"],
+    "rotate": ["validateRotate"],
+    "animation": ["validateAnimation"]
+  }; }
+  static get style() { return postIconCss; }
+}, [1, "post-icon", {
+    "name": [1],
+    "base": [1],
+    "flipH": [4, "flip-h"],
+    "flipV": [4, "flip-v"],
+    "scale": [2],
+    "rotate": [2],
+    "animation": [1],
+    "initialPath": [32],
+    "path": [32],
+    "svgSource": [32],
+    "svgOutput": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["post-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "post-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PostIcon$1);
+      }
+      break;
+  } });
+}
+
+const PostIcon = PostIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostIcon, defineCustomElement };
+
+//# sourceMappingURL=post-icon.js.map

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

@@ -0,0 +1 @@
+{"file":"post-icon.js","mappings":"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","names":["PostIcon"],"sources":["./src/components/post-icon/post-icon.scss?tag=post-icon&encapsulation=shadow","./src/components/post-icon/post-icon.tsx"],"sourcesContent":["@use 'sass:map';\n\n$post-icon-animations: (\n  'cylon': icon-animation-cylon .75s ease-in-out infinite alternate,\n  'cylon-vertical': icon-animation-cylon-vertical .75s ease-in-out infinite alternate,\n  'spin': icon-animation-spin 2s linear infinite normal,\n  'spin-reverse': icon-animation-spin 2s linear infinite reverse,\n  'fade': icon-animation-fade .75s ease-in-out infinite alternate,\n  'throb': icon-animation-throb .75s ease-in-out infinite alternate\n);\n\n:host {\n  display: inline-block;\n  width: 1em;\n  vertical-align: -0.15em;\n}\n\nsvg {\n  display: block;\n  width: 100%;\n  fill: currentColor;\n}\n\n// flip\n\n:host([flip-h]) {\n  svg { scale: -1 1; }\n}\n\n:host([flip-v]) {\n  svg { scale: 1 -1; }\n}\n\n:host([flip-h][flip-v]) {\n  svg { scale: -1; }\n}\n\n// scale\n// done with inline styling\n\n// rotate\n// done with inline styling\n\n// animation\n\n:host([animation]) {\n  svg {\n    transform-origin: center;\n  }\n}\n\n@each $key, $value in $post-icon-animations {\n  :host([animation=\"#{$key}\"]) {\n    svg {\n      animation: $value;\n    }\n  }\n}\n\n@keyframes icon-animation-cylon {\n  from { transform: translateX(-25%) }\n  to { transform: translateX(25%) }\n}\n\n@keyframes icon-animation-cylon-vertical {\n  from { transform: translateY(25%); }\n  to { transform: translateY(-25%); }\n}\n\n@keyframes icon-animation-fade {\n  from { opacity: .1; }\n  to { opacity: 1; }\n}\n\n@keyframes icon-animation-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(359deg); }\n}\n\n@keyframes icon-animation-throb {\n  from {\n    opacity: .5;\n    transform: scale(0.5);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_KEYS = [\n  'cylon',\n  'cylon-vertical',\n  'spin',\n  'spin-reverse',\n  'fade',\n  'throb'\n];\n\n/**\n * @class PostIcon - representing a stencil component\n */\n@Component({\n  tag: 'post-icon',\n  styleUrl: 'post-icon.scss',\n  shadow: true,\n})\nexport class PostIcon {\n  /**\n   * The name/id of the icon (e.g. 1000, 1001, ...).\n   */\n  @Prop() name: string;\n\n  /**\n   * The base path, where the icons are located (must be a public url).\n   */\n  @Prop() base?: string;\n\n  /**\n   * When set to `true`, the icon will be flipped horizontally.\n   */\n  @Prop() flipH?: boolean;\n\n  /**\n   * When set to `true`, the icon will be flipped vertically.\n   */\n  @Prop() flipV?: boolean;\n\n  /**\n   * The `number` for the css `scale` transformation.\n   */\n  @Prop() scale?: number;\n\n  /**\n   * The `number` of degree for the css `rotate` transformation.\n   */\n  @Prop() rotate?: number;\n\n  /**\n   * The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`).\n   */\n  @Prop() animation?: string;\n  @State() initialPath: string;\n  @State() path: string;\n  @State() svgSource: string = '<svg viewBox=\"0 0 16 16\"></svg>';\n  @State() svgOutput: 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  @Watch('base')\n  validateBase(newValue = this.base) {\n    checkEmptyOrType(newValue, 'string', 'The post-icon \"base\" prop should be a string.');\n  }\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  @Watch('flipV')\n  validateFlipV(newValue = this.flipV) {\n    checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipV\" prop should be a boolean.');\n  }\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  @Watch('rotate')\n  validateRotate(newValue = this.rotate) {\n    checkEmptyOrType(newValue, 'number', 'The post-icon \"rotate\" prop should be a number.');\n  }\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  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.validateName();\n    this.validateBase();\n    this.validateFlipH();\n    this.validateFlipV();\n    this.validateScale();\n    this.validateRotate();\n    this.validateAnimation();\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  getPath(basePath: string) {\n    return new URL(\n      [...basePath.split('/'), `${this.name}.svg#icon`].join('/'),\n      window.location.origin,\n    ).toString();\n  }\n\n  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  render() {\n    return (\n      <Host>\n        <div innerHTML={this.svgOutput} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/property-checkers.js

@@ -0,0 +1,34 @@
+const EMPTY_VALUES = [undefined, null, ''];
+function checkType(value, type, errorMessage) {
+  const lowerCaseType = type.toLowerCase();
+  const typeIsArray = lowerCaseType === 'array';
+  const valueIsArray = Array.isArray(value);
+  if (typeIsArray || valueIsArray) {
+    if ((typeIsArray && !valueIsArray) || (!typeIsArray && valueIsArray))
+      throw new Error(errorMessage);
+  }
+  else {
+    if (typeof value !== lowerCaseType)
+      throw new Error(errorMessage);
+  }
+}
+function checkEmptyOrType(value, type, errorMessage) {
+  if (!EMPTY_VALUES.some(v => v === value))
+    checkType(value, type, errorMessage);
+}
+function checkOneOf(value, possibleValues, errorMessage) {
+  if (!possibleValues.includes(value))
+    throw new Error(errorMessage);
+}
+function checkEmptyOrOneOf(value, possibleValues, errorMessage) {
+  if (!EMPTY_VALUES.some(v => v === value))
+    checkOneOf(value, possibleValues, errorMessage);
+}
+function checkBoolean(value, errorMessage) {
+  if (typeof value !== 'boolean')
+    throw new Error(errorMessage);
+}
+
+export { checkOneOf as a, checkType as b, checkBoolean as c, checkEmptyOrType as d, checkEmptyOrOneOf as e };
+
+//# sourceMappingURL=property-checkers.js.map

package/dist/components/property-checkers.js.map

@@ -0,0 +1 @@
+{"file":"property-checkers.js","mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;SAE3B,SAAS,CAAC,KAAc,EAAE,IAAY,EAAE,YAAoB;EAC1E,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;EACzC,MAAM,WAAW,GAAG,aAAa,KAAK,OAAO,CAAC;EAC9C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;EAE1C,IAAI,WAAW,IAAI,YAAY,EAAE;IAC/B,IAAI,CAAC,WAAW,IAAI,CAAC,YAAY,MAAM,CAAC,WAAW,IAAI,YAAY,CAAC;MAClE,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC;GACjC;OAAM;IACL,IAAI,OAAO,KAAK,KAAK,aAAa;MAAE,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC;GACnE;AACH,CAAC;SAEe,gBAAgB,CAAC,KAAc,EAAE,IAAY,EAAE,YAAoB;EACjF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC;IAAE,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;AACjF,CAAC;SAEe,UAAU,CAAI,KAAQ,EAAE,cAAmB,EAAE,YAAoB;EAC/E,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC;AACrE,CAAC;SAEe,iBAAiB,CAAI,KAAQ,EAAE,cAAmB,EAAE,YAAoB;EACtF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC;IAAE,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,YAAY,CAAC,CAAC;AAC5F,CAAC;SAEe,YAAY,CAAC,KAAc,EAAE,YAAoB;EAC/D,IAAI,OAAO,KAAK,KAAK,SAAS;IAAE,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC;AAChE;;;;","names":[],"sources":["./src/utils/property-checkers.ts"],"sourcesContent":["const EMPTY_VALUES = [undefined, null, ''];\n\nexport function checkType(value: unknown, type: string, errorMessage: string) {\n  const lowerCaseType = type.toLowerCase();\n  const typeIsArray = lowerCaseType === 'array';\n  const valueIsArray = Array.isArray(value);\n\n  if (typeIsArray || valueIsArray) {\n    if ((typeIsArray && !valueIsArray) || (!typeIsArray && valueIsArray))\n      throw new Error(errorMessage);\n  } else {\n    if (typeof value !== lowerCaseType) throw new Error(errorMessage);\n  }\n}\n\nexport function checkEmptyOrType(value: unknown, type: string, errorMessage: string) {\n  if (!EMPTY_VALUES.some(v => v === value)) checkType(value, type, errorMessage);\n}\n\nexport function checkOneOf<T>(value: T, possibleValues: T[], errorMessage: string) {\n  if (!possibleValues.includes(value)) throw new Error(errorMessage);\n}\n\nexport function checkEmptyOrOneOf<T>(value: T, possibleValues: T[], errorMessage: string) {\n  if (!EMPTY_VALUES.some(v => v === value)) checkOneOf(value, possibleValues, errorMessage);\n}\n\nexport function checkBoolean(value: unknown, errorMessage: string) {\n  if (typeof value !== 'boolean') throw new Error(errorMessage);\n}\n"],"version":3}

package/dist/docs.d.ts

@@ -23,6 +23,10 @@ export interface JsonDocsComponent {
     readme: string;
     docs: string;
     docsTags: JsonDocsTag[];
+    /**
+     * The text from the class-level JSDoc for a Stencil component, if present.
+     */
+    overview?: string;
     usage: JsonDocsUsage;
     props: JsonDocsProp[];
     methods: JsonDocsMethod[];
@@ -47,6 +51,26 @@ export interface JsonDocsValue {
     value?: string;
     type: string;
 }
+/**
+ * A mapping of file names to their contents.
+ *
+ * This type is meant to be used when reading one or more usage markdown files associated with a component. For the
+ * given directory structure:
+ * ```
+ * src/components/my-component
+ * ├── my-component.tsx
+ * └── usage
+ *     ├── bar.md
+ *     └── foo.md
+ * ```
+ * an instance of this type would include the name of the markdown file, mapped to its contents:
+ * ```ts
+ * {
+ *   'bar': STRING_CONTENTS_OF_BAR.MD
+ *   'foo': STRING_CONTENTS_OF_FOO.MD
+ * }
+ * ```
+ */
 export interface JsonDocsUsage {
     [key: string]: string;
 }

package/dist/docs.json

@@ -1,61 +1,163 @@
 {
-  "timestamp": "2022-10-31T10:36:24",
+  "timestamp": "2023-02-17T08:18:59",
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.18.0",
-    "typescriptVersion": "4.7.4"
+    "version": "3.0.1",
+    "typescriptVersion": "4.9.5"
   },
   "components": [
     {
-      "filePath": "./src/components/my-component/my-component.tsx",
+      "filePath": "./src/components/post-collapsible/post-collapsible.tsx",
       "encapsulation": "shadow",
-      "tag": "my-component",
-      "readme": "# my-component\nBla\n\n",
-      "docs": "Bla",
+      "tag": "post-collapsible",
+      "readme": "# post-collapsible\n\n\n",
+      "docs": "",
       "docsTags": [],
       "usage": {},
       "props": [
         {
-          "name": "first",
+          "name": "collapsed",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "collapsed",
+          "reflectToAttr": false,
+          "docs": "If `true`, the element is initially collapsed otherwise it is displayed.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "headingLevel",
+          "type": "number",
+          "mutable": false,
+          "attr": "heading-level",
+          "reflectToAttr": false,
+          "docs": "Defines the hierarchical level of the collapsible header within the headings structure.",
+          "docsTags": [],
+          "default": "2",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "toggle",
+          "returns": {
+            "type": "Promise<boolean>",
+            "docs": ""
+          },
+          "signature": "toggle(open?: boolean) => Promise<boolean>",
+          "parameters": [],
+          "docs": "Triggers the collapse programmatically.",
+          "docsTags": []
+        }
+      ],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "./src/components/post-icon/post-icon.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-icon",
+      "readme": "# post-icon\n\nsome content\n",
+      "docs": "some content",
+      "docsTags": [
+        {
+          "name": "class",
+          "text": "PostIcon - representing a stencil component"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "animation",
           "type": "string",
           "mutable": false,
-          "attr": "first",
+          "attr": "animation",
           "reflectToAttr": false,
-          "docs": "The first name",
+          "docs": "The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`).",
           "docsTags": [],
           "values": [
             {
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
-          "name": "last",
+          "name": "base",
           "type": "string",
           "mutable": false,
-          "attr": "last",
+          "attr": "base",
           "reflectToAttr": false,
-          "docs": "The last name",
+          "docs": "The base path, where the icons are located (must be a public url).",
           "docsTags": [],
           "values": [
             {
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
-          "name": "middle",
+          "name": "flipH",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "flip-h",
+          "reflectToAttr": false,
+          "docs": "When set to `true`, the icon will be flipped horizontally.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "flipV",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "flip-v",
+          "reflectToAttr": false,
+          "docs": "When set to `true`, the icon will be flipped vertically.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "name",
           "type": "string",
           "mutable": false,
-          "attr": "middle",
+          "attr": "name",
           "reflectToAttr": false,
-          "docs": "The middle name",
+          "docs": "The name/id of the icon (e.g. 1000, 1001, ...).",
           "docsTags": [],
-          "default": "''",
           "values": [
             {
               "type": "string"
@@ -63,32 +165,42 @@
           ],
           "optional": false,
           "required": false
-        }
-      ],
-      "methods": [
+        },
         {
-          "name": "write",
-          "returns": {
-            "type": "Promise<void>",
-            "docs": ""
-          },
-          "signature": "write(text: string) => Promise<void>",
-          "parameters": [],
-          "docs": "",
-          "docsTags": []
-        }
-      ],
-      "events": [
+          "name": "rotate",
+          "type": "number",
+          "mutable": false,
+          "attr": "rotate",
+          "reflectToAttr": false,
+          "docs": "The `number` of degree for the css `rotate` transformation.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
-          "event": "someevent",
-          "detail": "string",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "This event is fired randomly",
-          "docsTags": []
+          "name": "scale",
+          "type": "number",
+          "mutable": false,
+          "attr": "scale",
+          "reflectToAttr": false,
+          "docs": "The `number` for the css `scale` transformation.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
         }
       ],
+      "methods": [],
+      "events": [],
       "listeners": [],
       "styles": [],
       "slots": [],