@swisspost/design-system-components 1.5.0 → 1.6.0

package/dist/collection/animations/collapse.js

@@ -0,0 +1,13 @@
+const collapseDuration = 350;
+const collapseEasing = 'ease';
+const collapsedKeyframe = { height: '0', overflow: 'hidden' };
+export const collapse = (el) => {
+  const { height } = window.getComputedStyle(el);
+  const expandedKeyframe = { height };
+  return el.animate([expandedKeyframe, collapsedKeyframe], { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' });
+};
+export const expand = (el) => {
+  const expandedKeyframe = { height: `${el.scrollHeight}px` };
+  return el.animate([collapsedKeyframe, expandedKeyframe], { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' });
+};
+//# sourceMappingURL=collapse.js.map

package/dist/collection/animations/collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../src/animations/collapse.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAC7B,MAAM,cAAc,GAAG,MAAM,CAAC;AAC9B,MAAM,iBAAiB,GAAa,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAExE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAe,EAAa,EAAE;EACrD,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;EAC/C,MAAM,gBAAgB,GAAa,EAAE,MAAM,EAAE,CAAC;EAE9C,OAAO,EAAE,CAAC,OAAO,CACf,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,EACrC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,CACzE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAe,EAAa,EAAE;EACnD,MAAM,gBAAgB,GAAa,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC;EAEtE,OAAO,EAAE,CAAC,OAAO,CACf,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,EACrC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,CACzE,CAAC;AACJ,CAAC,CAAC","sourcesContent":["const collapseDuration = 350;\nconst collapseEasing = 'ease';\nconst collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' };\n\nexport const collapse = (el: HTMLElement): Animation => {\n  const { height } = window.getComputedStyle(el);\n  const expandedKeyframe: Keyframe = { height };\n\n  return el.animate(\n    [expandedKeyframe, collapsedKeyframe],\n    { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },\n  );\n};\n\nexport const expand = (el: HTMLElement): Animation => {\n  const expandedKeyframe: Keyframe = { height: `${el.scrollHeight}px` };\n\n  return el.animate(\n    [collapsedKeyframe, expandedKeyframe],\n    { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },\n  );\n};\n"]}

package/dist/collection/animations/fade.js

@@ -1,6 +1,6 @@
 const fadeDuration = 200;
-const fadedOutKeyFrame = { opacity: '0' };
-const fadedInKeyFrame = { opacity: '1' };
-export const fadeIn = (el) => el.animate([fadedOutKeyFrame, fadedInKeyFrame], { duration: fadeDuration });
-export const fadeOut = (el) => el.animate([fadedInKeyFrame, fadedOutKeyFrame], { duration: fadeDuration });
+const fadedOutKeyframe = { opacity: '0' };
+const fadedInKeyframe = { opacity: '1' };
+export const fadeIn = (el) => el.animate([fadedOutKeyframe, fadedInKeyframe], { duration: fadeDuration });
+export const fadeOut = (el) => el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
 //# sourceMappingURL=fade.js.map

package/dist/collection/animations/fade.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade.js","sourceRoot":"","sources":["../../../src/animations/fade.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,GAAG,CAAC;AACzB,MAAM,gBAAgB,GAAG,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;AACxC,MAAM,eAAe,GAAG,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAW,EAAa,EAAE,CAAC,EAAE,CAAC,OAAO,CAC1D,CAAE,gBAAgB,EAAE,eAAe,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE,CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAW,EAAa,EAAE,CAAC,EAAE,CAAC,OAAO,CAC3D,CAAE,eAAe,EAAE,gBAAgB,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE,CAC3B,CAAC","sourcesContent":["const fadeDuration = 200;\nconst fadedOutKeyFrame = {opacity: '0'};\nconst fadedInKeyFrame = {opacity: '1'};\n\nexport const fadeIn = (el: Element): Animation => el.animate(\n  [ fadedOutKeyFrame, fadedInKeyFrame ],\n  { duration: fadeDuration }\n);\n\nexport const fadeOut = (el: Element): Animation => el.animate(\n  [ fadedInKeyFrame, fadedOutKeyFrame ],\n  { duration: fadeDuration }\n);\n"]}
+{"version":3,"file":"fade.js","sourceRoot":"","sources":["../../../src/animations/fade.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,GAAG,CAAC;AACzB,MAAM,gBAAgB,GAAa,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;AAClD,MAAM,eAAe,GAAa,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;AAEjD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAW,EAAa,EAAE,CAAC,EAAE,CAAC,OAAO,CAC1D,CAAE,gBAAgB,EAAE,eAAe,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE,CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAW,EAAa,EAAE,CAAC,EAAE,CAAC,OAAO,CAC3D,CAAE,eAAe,EAAE,gBAAgB,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE,CAC3B,CAAC","sourcesContent":["const fadeDuration = 200;\nconst fadedOutKeyframe: Keyframe = {opacity: '0'};\nconst fadedInKeyframe: Keyframe = {opacity: '1'};\n\nexport const fadeIn = (el: Element): Animation => el.animate(\n  [ fadedOutKeyframe, fadedInKeyframe ],\n  { duration: fadeDuration }\n);\n\nexport const fadeOut = (el: Element): Animation => el.animate(\n  [ fadedInKeyframe, fadedOutKeyframe ],\n  { duration: fadeDuration }\n);\n"]}

package/dist/collection/collection-manifest.json

@@ -1,17 +1,18 @@
 {
   "entries": [
-    "./components/post-alert/post-alert.js",
-    "./components/post-collapsible/post-collapsible.js",
-    "./components/post-icon/post-icon.js",
-    "./components/post-tab-header/post-tab-header.js",
-    "./components/post-tab-panel/post-tab-panel.js",
-    "./components/post-tabs/post-tabs.js",
-    "./components/post-tooltip/post-tooltip.js"
+    "components/post-alert/post-alert.js",
+    "components/post-collapsible/post-collapsible.js",
+    "components/post-icon/post-icon.js",
+    "components/post-tabs/post-tabs.js",
+    "components/post-tab-header/post-tab-header.js",
+    "components/post-tab-panel/post-tab-panel.js",
+    "components/post-tooltip/post-tooltip.js",
+    "components/post-accordion/post-accordion.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.4.2",
-    "typescriptVersion": "5.0.4"
+    "version": "4.6.0",
+    "typescriptVersion": "5.2.2"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/post-accordion/post-accordion.css

@@ -0,0 +1 @@
+:host{display:block}

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

@@ -0,0 +1,178 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../package.json";
+export class PostAccordion {
+  constructor() {
+    this.expandedCollapsibles = new Set();
+    this.multiple = false;
+  }
+  componentWillLoad() {
+    this.registerCollapsibles();
+  }
+  /**
+   * Toggles the `post-collapsible` children with the given id.
+   */
+  async toggle(id) {
+    const collapsibleToToggle = this.collapsibles
+      .find(collapsible => collapsible.id === id);
+    if (!collapsibleToToggle)
+      throw new Error(`No post-collapsible found with id #${id}.`);
+    await collapsibleToToggle.toggle();
+  }
+  collapseChangeHandler(event) {
+    const toggledCollapsible = event.target;
+    const isClosing = this.expandedCollapsibles.has(toggledCollapsible);
+    if (isClosing) {
+      this.expandedCollapsibles.delete(toggledCollapsible);
+    }
+    else {
+      this.expandedCollapsibles.add(toggledCollapsible);
+    }
+    if (this.multiple || isClosing)
+      return;
+    // close other open collapsible elements to have only one opened at a time
+    Array.from(this.expandedCollapsibles.values())
+      .filter(collapsible => collapsible !== toggledCollapsible)
+      .forEach(collapsible => {
+      void collapsible.toggle(false);
+    });
+  }
+  /**
+   * Expands all `post-collapsible` children.
+   *
+   * If `close-others` is `true` and all items are closed, it will open the first one.
+   * Otherwise, it will keep the opened one.
+   */
+  async expandAll() {
+    if (this.multiple) {
+      await Promise.all(this.collapsibles.map(collapsible => collapsible.toggle(true)));
+    }
+    else if (!this.expandedCollapsibles.size) {
+      await this.collapsibles[0].toggle(true);
+    }
+  }
+  /**
+   * Collapses all `post-collapsible` children.
+   */
+  async collapseAll() {
+    await Promise.all(this.collapsibles.map(collapsible => collapsible.toggle(false)));
+  }
+  registerCollapsibles() {
+    this.collapsibles = Array.from(this.host.querySelectorAll('post-collapsible'));
+    this.collapsibles
+      .filter(collapsible => {
+      return !collapsible.collapsed || this.expandedCollapsibles.has(collapsible);
+    }).forEach((collapsible, index) => {
+      if (!this.multiple && index !== 0) {
+        collapsible.setAttribute('collapsed', '');
+        return;
+      }
+      this.expandedCollapsibles.add(collapsible);
+    });
+  }
+  render() {
+    return (h(Host, { "data-version": version }, h("div", { class: "accordion" }, h("slot", { onSlotchange: () => this.registerCollapsibles() }))));
+  }
+  static get is() { return "post-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-accordion.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-accordion.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, multiple `post-collapsible` can be open at the same time."
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "toggle": {
+        "complexType": {
+          "signature": "(id: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggles the `post-collapsible` children with the given id.",
+          "tags": []
+        }
+      },
+      "expandAll": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Expands all `post-collapsible` children.\n\nIf `close-others` is `true` and all items are closed, it will open the first one.\nOtherwise, it will keep the opened one.",
+          "tags": []
+        }
+      },
+      "collapseAll": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Collapses all `post-collapsible` children.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "collapseChange",
+        "method": "collapseChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=post-accordion.js.map

package/dist/collection/components/post-accordion/post-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-accordion.js","sourceRoot":"","sources":["../../../../src/components/post-accordion/post-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAOhD,MAAM,OAAO,aAAa;;IAEhB,yBAAoB,GAAG,IAAI,GAAG,EAA8B,CAAC;oBAOhC,KAAK;;EAE1C,iBAAiB;IACf,IAAI,CAAC,oBAAoB,EAAE,CAAC;EAC9B,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,MAAM,CAAC,EAAU;IACrB,MAAM,mBAAmB,GAAG,IAAI,CAAC,YAAY;OAC1C,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAE9C,IAAI,CAAC,mBAAmB;MAAE,MAAM,IAAI,KAAK,CAAC,sCAAsC,EAAE,GAAG,CAAC,CAAC;IAEvF,MAAM,mBAAmB,CAAC,MAAM,EAAE,CAAC;EACrC,CAAC;EAGD,qBAAqB,CAAC,KAAkB;IACtC,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAoC,CAAC;IACtE,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAEpE,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;KACtD;SAAM;MACL,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;KACnD;IAED,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS;MAAE,OAAO;IAEvC,0EAA0E;IAC1E,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,CAAC;OAC3C,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,KAAK,kBAAkB,CAAC;OACzD,OAAO,CAAC,WAAW,CAAC,EAAE;MACrB,KAAK,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;EACP,CAAC;EAED;;;;;KAKG;EAEH,KAAK,CAAC,SAAS;IACb,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAM,OAAO,CAAC,GAAG,CACf,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAC/D,CAAC;KACH;SAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE;MAC1C,MAAM,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KACzC;EACH,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,WAAW;IACf,MAAM,OAAO,CAAC,GAAG,CACf,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAChE,CAAC;EACJ,CAAC;EAEO,oBAAoB;IAC1B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAC/C,CAAC;IAEF,IAAI,CAAC,YAAY;OACd,MAAM,CAAC,WAAW,CAAC,EAAE;MACpB,OAAO,CAAC,WAAW,CAAC,SAAS,IAAI,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC9E,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;MAChC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,CAAC,EAAE;QACjC,WAAW,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;QAC1C,OAAO;OACR;MAED,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,oBAAe,OAAO;MACzB,WAAK,KAAK,EAAC,WAAW;QACpB,YAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,GAAG,CACpD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport { version } from '../../../package.json';\n\n@Component({\n  tag: 'post-accordion',\n  styleUrl: 'post-accordion.scss',\n  shadow: true,\n})\nexport class PostAccordion {\n  private collapsibles: HTMLPostCollapsibleElement[];\n  private expandedCollapsibles = new Set<HTMLPostCollapsibleElement>();\n\n  @Element() host: HTMLPostAccordionElement;\n\n  /**\n   * If `true`, multiple `post-collapsible` can be open at the same time.\n   */\n  @Prop() readonly multiple: boolean = false;\n\n  componentWillLoad() {\n    this.registerCollapsibles();\n  }\n\n  /**\n   * Toggles the `post-collapsible` children with the given id.\n   */\n  @Method()\n  async toggle(id: string) {\n    const collapsibleToToggle = this.collapsibles\n      .find(collapsible => collapsible.id === id);\n\n    if (!collapsibleToToggle) throw new Error(`No post-collapsible found with id #${id}.`);\n\n    await collapsibleToToggle.toggle();\n  }\n\n  @Listen('collapseChange')\n  collapseChangeHandler(event: CustomEvent) {\n    const toggledCollapsible = event.target as HTMLPostCollapsibleElement;\n    const isClosing = this.expandedCollapsibles.has(toggledCollapsible);\n\n    if (isClosing) {\n      this.expandedCollapsibles.delete(toggledCollapsible);\n    } else {\n      this.expandedCollapsibles.add(toggledCollapsible);\n    }\n\n    if (this.multiple || isClosing) return;\n\n    // close other open collapsible elements to have only one opened at a time\n    Array.from(this.expandedCollapsibles.values())\n      .filter(collapsible => collapsible !== toggledCollapsible)\n      .forEach(collapsible => {\n        void collapsible.toggle(false);\n      });\n  }\n\n  /**\n   * Expands all `post-collapsible` children.\n   *\n   * If `close-others` is `true` and all items are closed, it will open the first one.\n   * Otherwise, it will keep the opened one.\n   */\n  @Method()\n  async expandAll() {\n    if (this.multiple) {\n      await Promise.all(\n        this.collapsibles.map(collapsible => collapsible.toggle(true))\n      );\n    } else if (!this.expandedCollapsibles.size) {\n      await this.collapsibles[0].toggle(true);\n    }\n  }\n\n  /**\n   * Collapses all `post-collapsible` children.\n   */\n  @Method()\n  async collapseAll() {\n    await Promise.all(\n      this.collapsibles.map(collapsible => collapsible.toggle(false))\n    );\n  }\n\n  private registerCollapsibles() {\n    this.collapsibles = Array.from(\n      this.host.querySelectorAll('post-collapsible')\n    );\n\n    this.collapsibles\n      .filter(collapsible => {\n        return !collapsible.collapsed || this.expandedCollapsibles.has(collapsible);\n      }).forEach((collapsible, index) => {\n        if (!this.multiple && index !== 0) {\n          collapsible.setAttribute('collapsed', '');\n          return;\n        }\n\n        this.expandedCollapsibles.add(collapsible);\n      });\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div class=\"accordion\">\n          <slot onSlotchange={() => this.registerCollapsibles()}/>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}