@swisspost/design-system-components 1.6.2 → 1.7.0

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

@@ -1,178 +1,179 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { version } from "../../../package.json";
 import { collapse, expand } from "../../animations/collapse";
 import { checkEmptyOrOneOf, checkEmptyOrType, isMotionReduced } from "../../utils";
 import { HEADING_LEVELS } from "./heading-levels";
 export class PostCollapsible {
-  constructor() {
-    this.isLoaded = false;
-    this.id = undefined;
-    this.isOpen = true;
-    this.hasHeader = undefined;
-    this.headingTag = undefined;
-    this.collapsed = false;
-    this.headingLevel = 2;
-  }
-  validateCollapsed(newValue = this.collapsed) {
-    checkEmptyOrType(newValue, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
-  }
-  validateHeadingLevel(newValue = this.headingLevel) {
-    checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.');
-  }
-  connectedCallback() {
-    this.validateCollapsed();
-    this.validateHeadingLevel();
-  }
-  componentWillRender() {
-    var _a;
-    this.id = this.host.id || `c${crypto.randomUUID()}`;
-    this.hasHeader = this.host.querySelectorAll('[slot="header"]').length > 0;
-    this.headingTag = `h${(_a = this.headingLevel) !== null && _a !== void 0 ? _a : 2}`;
-  }
-  componentDidLoad() {
-    if (this.collapsed)
-      void this.toggle(false);
-    this.isLoaded = true;
-  }
-  /**
-   * Triggers the collapse programmatically.
-   *
-   * If there is a collapsing transition running already, it will be reversed.
-   */
-  async toggle(open = !this.isOpen) {
-    if (open === this.isOpen)
-      return open;
-    this.isOpen = !this.isOpen;
-    if (this.isLoaded)
-      this.collapseChange.emit();
-    const animation = open ? expand(this.collapsible) : collapse(this.collapsible);
-    if (!this.isLoaded || isMotionReduced())
-      animation.finish();
-    await animation.finished;
-    animation.commitStyles();
-    return this.isOpen;
-  }
-  render() {
-    const collapse = (h("div", { "aria-labelledby": this.hasHeader ? `${this.id}--header` : undefined, class: `collapse${this.hasHeader ? ' accordion-collapse' : ''}`, id: `${this.id}--collapse`, ref: el => this.collapsible = el }, this.hasHeader ? (h("div", { class: "accordion-body" }, h("slot", null))) : (h("slot", null))));
-    return (h(Host, { id: this.id, "data-version": version }, this.hasHeader ? (h("div", { class: "accordion-item" }, h(this.headingTag, { class: "accordion-header", id: `${this.id}--header` }, h("button", { "aria-controls": `${this.id}--collapse`, "aria-expanded": `${this.isOpen}`, class: `accordion-button${this.isOpen ? '' : ' collapsed'}`, onClick: () => this.toggle(), type: "button" }, h("slot", { name: "header" }))), collapse)) : collapse));
-  }
-  static get is() { return "post-collapsible"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["post-collapsible.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["post-collapsible.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "collapsed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the element is initially collapsed otherwise it is displayed."
-        },
-        "attribute": "collapsed",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "headingLevel": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "HeadingLevel",
-          "resolved": "1 | 2 | 3 | 4 | 5 | 6",
-          "references": {
-            "HeadingLevel": {
-              "location": "import",
-              "path": "./heading-levels",
-              "id": "src/components/post-collapsible/heading-levels.ts::HeadingLevel"
+    constructor() {
+        this.isLoaded = false;
+        this.id = undefined;
+        this.isOpen = true;
+        this.hasHeader = undefined;
+        this.headingTag = undefined;
+        this.collapsed = false;
+        this.headingLevel = 2;
+    }
+    validateCollapsed(newValue = this.collapsed) {
+        checkEmptyOrType(newValue, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
+    }
+    validateHeadingLevel(newValue = this.headingLevel) {
+        checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.');
+    }
+    connectedCallback() {
+        this.validateCollapsed();
+        this.validateHeadingLevel();
+    }
+    componentWillRender() {
+        var _a;
+        this.id = this.host.id || `c${crypto.randomUUID()}`;
+        this.hasHeader = this.host.querySelectorAll('[slot="header"]').length > 0;
+        this.headingTag = `h${(_a = this.headingLevel) !== null && _a !== void 0 ? _a : 2}`;
+    }
+    componentDidLoad() {
+        if (this.collapsed)
+            void this.toggle(false);
+        this.isLoaded = true;
+    }
+    /**
+     * Triggers the collapse programmatically.
+     *
+     * If there is a collapsing transition running already, it will be reversed.
+     */
+    async toggle(open = !this.isOpen) {
+        if (open === this.isOpen)
+            return open;
+        this.isOpen = !this.isOpen;
+        if (this.isLoaded)
+            this.collapseChange.emit();
+        const animation = open ? expand(this.collapsible) : collapse(this.collapsible);
+        if (!this.isLoaded || isMotionReduced())
+            animation.finish();
+        await animation.finished;
+        animation.commitStyles();
+        return this.isOpen;
+    }
+    render() {
+        const collapse = (h("div", { "aria-labelledby": this.hasHeader ? `${this.id}--header` : undefined, class: `collapse${this.hasHeader ? ' accordion-collapse' : ''}`, id: `${this.id}--collapse`, ref: el => (this.collapsible = el) }, this.hasHeader ? (h("div", { class: "accordion-body" }, h("slot", null))) : (h("slot", null))));
+        return (h(Host, { id: this.id, "data-version": version }, this.hasHeader ? (h("div", { part: "accordion-item", class: "accordion-item" }, h(this.headingTag, { class: "accordion-header", id: `${this.id}--header` }, h("button", { "aria-controls": `${this.id}--collapse`, "aria-expanded": `${this.isOpen}`, class: `accordion-button${this.isOpen ? '' : ' collapsed'}`, onClick: () => this.toggle(), type: "button" }, h("slot", { name: "header" }))), collapse)) : (collapse)));
+    }
+    static get is() { return "post-collapsible"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-collapsible.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-collapsible.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the element is initially collapsed otherwise it is displayed."
+                },
+                "attribute": "collapsed",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "headingLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeadingLevel",
+                    "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "HeadingLevel": {
+                            "location": "import",
+                            "path": "./heading-levels",
+                            "id": "src/components/post-collapsible/heading-levels.ts::HeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the hierarchical level of the collapsible header within the headings structure."
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "2"
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Defines the hierarchical level of the collapsible header within the headings structure."
-        },
-        "attribute": "heading-level",
-        "reflect": false,
-        "defaultValue": "2"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "id": {},
-      "isOpen": {},
-      "hasHeader": {},
-      "headingTag": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "collapseChange",
-        "name": "collapseChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "An event emitted when the collapse element is shown or hidden, before the transition. It has no payload."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "toggle": {
-        "complexType": {
-          "signature": "(open?: boolean) => Promise<boolean>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "id": {},
+            "isOpen": {},
+            "hasHeader": {},
+            "headingTag": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "collapseChange",
+                "name": "collapseChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event emitted when the collapse element is shown or hidden, before the transition. It has no payload."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "(open?: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "open",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Triggers the collapse programmatically.\n\nIf there is a collapsing transition running already, it will be reversed.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Triggers the collapse programmatically.\n\nIf there is a collapsing transition running already, it will be reversed.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "collapsed",
-        "methodName": "validateCollapsed"
-      }, {
-        "propName": "headingLevel",
-        "methodName": "validateHeadingLevel"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "collapsed",
+                "methodName": "validateCollapsed"
+            }, {
+                "propName": "headingLevel",
+                "methodName": "validateHeadingLevel"
+            }];
+    }
 }
 //# sourceMappingURL=post-collapsible.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"post-collapsible.js","sourceRoot":"","sources":["../../../../src/components/post-collapsible/post-collapsible.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { collapse, expand } from '../../animations/collapse';\nimport { checkEmptyOrOneOf, checkEmptyOrType, isMotionReduced } from '../../utils';\nimport { HEADING_LEVELS, HeadingLevel } from './heading-levels';\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  private isLoaded = false;\n  private collapsible: HTMLElement;\n\n  @Element() host: HTMLPostCollapsibleElement;\n\n  @State() id: string;\n  @State() isOpen = true;\n  @State() hasHeader: boolean;\n  @State() headingTag: string;\n\n  /**\n   * If `true`, the element is initially collapsed otherwise it is displayed.\n   */\n  @Prop() readonly collapsed?: boolean = false;\n\n  @Watch('collapsed')\n  validateCollapsed(newValue = this.collapsed) {\n    checkEmptyOrType(newValue, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');\n  }\n\n  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() readonly headingLevel?: HeadingLevel = 2;\n\n  @Watch('headingLevel')\n  validateHeadingLevel(newValue = this.headingLevel) {\n    checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.');\n  }\n\n  /**\n   * An event emitted when the collapse element is shown or hidden, before the transition. It has no payload.\n   */\n  @Event() collapseChange: EventEmitter<void>;\n\n  connectedCallback() {\n    this.validateCollapsed();\n    this.validateHeadingLevel();\n  }\n\n  componentWillRender() {\n    this.id = this.host.id || `c${crypto.randomUUID()}`;\n    this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n    this.headingTag = `h${this.headingLevel ?? 2}`;\n  }\n\n  componentDidLoad() {\n    if (this.collapsed) void this.toggle(false);\n    this.isLoaded = true;\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   *\n   * If there is a collapsing transition running already, it will be reversed.\n   */\n  @Method()\n  async toggle(open = !this.isOpen): Promise<boolean> {\n    if (open === this.isOpen) return open;\n\n    this.isOpen = !this.isOpen;\n    if (this.isLoaded) this.collapseChange.emit();\n\n    const animation = open ? expand(this.collapsible): collapse(this.collapsible);\n\n    if (!this.isLoaded || isMotionReduced()) animation.finish();\n\n    await animation.finished;\n\n    animation.commitStyles();\n\n    return this.isOpen;\n  }\n\n  render() {\n    const collapse = (\n      <div\n        aria-labelledby={this.hasHeader ? `${this.id}--header` : undefined}\n        class={`collapse${this.hasHeader ? ' accordion-collapse' : ''}`}\n        id={`${this.id}--collapse`}\n        ref={el => this.collapsible = el}\n      >\n        {this.hasHeader ? (\n          <div class=\"accordion-body\">\n            <slot/>\n          </div>\n        ) : (\n          <slot/>\n        )}\n      </div>\n    );\n\n    return (\n      <Host id={this.id} data-version={version}>\n        {this.hasHeader ? (\n          <div class=\"accordion-item\">\n            <this.headingTag class=\"accordion-header\" id={`${this.id}--header`}>\n              <button\n                aria-controls={`${this.id}--collapse`}\n                aria-expanded={`${this.isOpen}`}\n                class={`accordion-button${this.isOpen ? '' : ' collapsed'}`}\n                onClick={() => this.toggle()}\n                type=\"button\"\n              >\n                <slot name=\"header\"/>\n              </button>\n            </this.headingTag>\n\n            {collapse}\n          </div>\n        ) : collapse}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"post-collapsible.js","sourceRoot":"","sources":["../../../../src/components/post-collapsible/post-collapsible.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { collapse, expand } from '../../animations/collapse';\nimport { checkEmptyOrOneOf, checkEmptyOrType, isMotionReduced } from '../../utils';\nimport { HEADING_LEVELS, HeadingLevel } from './heading-levels';\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  private isLoaded = false;\n  private collapsible: HTMLElement;\n\n  @Element() host: HTMLPostCollapsibleElement;\n\n  @State() id: string;\n  @State() isOpen = true;\n  @State() hasHeader: boolean;\n  @State() headingTag: string;\n\n  /**\n   * If `true`, the element is initially collapsed otherwise it is displayed.\n   */\n  @Prop() readonly collapsed?: boolean = false;\n\n  @Watch('collapsed')\n  validateCollapsed(newValue = this.collapsed) {\n    checkEmptyOrType(\n      newValue,\n      'boolean',\n      'The `collapsed` property of the `post-collapsible` must be a boolean.',\n    );\n  }\n\n  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() readonly headingLevel?: HeadingLevel = 2;\n\n  @Watch('headingLevel')\n  validateHeadingLevel(newValue = this.headingLevel) {\n    checkEmptyOrOneOf(\n      newValue,\n      HEADING_LEVELS,\n      'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.',\n    );\n  }\n\n  /**\n   * An event emitted when the collapse element is shown or hidden, before the transition. It has no payload.\n   */\n  @Event() collapseChange: EventEmitter<void>;\n\n  connectedCallback() {\n    this.validateCollapsed();\n    this.validateHeadingLevel();\n  }\n\n  componentWillRender() {\n    this.id = this.host.id || `c${crypto.randomUUID()}`;\n    this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n    this.headingTag = `h${this.headingLevel ?? 2}`;\n  }\n\n  componentDidLoad() {\n    if (this.collapsed) void this.toggle(false);\n    this.isLoaded = true;\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   *\n   * If there is a collapsing transition running already, it will be reversed.\n   */\n  @Method()\n  async toggle(open = !this.isOpen): Promise<boolean> {\n    if (open === this.isOpen) return open;\n\n    this.isOpen = !this.isOpen;\n    if (this.isLoaded) this.collapseChange.emit();\n\n    const animation = open ? expand(this.collapsible) : collapse(this.collapsible);\n\n    if (!this.isLoaded || isMotionReduced()) animation.finish();\n\n    await animation.finished;\n\n    animation.commitStyles();\n\n    return this.isOpen;\n  }\n\n  render() {\n    const collapse = (\n      <div\n        aria-labelledby={this.hasHeader ? `${this.id}--header` : undefined}\n        class={`collapse${this.hasHeader ? ' accordion-collapse' : ''}`}\n        id={`${this.id}--collapse`}\n        ref={el => (this.collapsible = el)}\n      >\n        {this.hasHeader ? (\n          <div class=\"accordion-body\">\n            <slot />\n          </div>\n        ) : (\n          <slot />\n        )}\n      </div>\n    );\n\n    return (\n      <Host id={this.id} data-version={version}>\n        {this.hasHeader ? (\n          <div part=\"accordion-item\" class=\"accordion-item\">\n            <this.headingTag class=\"accordion-header\" id={`${this.id}--header`}>\n              <button\n                aria-controls={`${this.id}--collapse`}\n                aria-expanded={`${this.isOpen}`}\n                class={`accordion-button${this.isOpen ? '' : ' collapsed'}`}\n                onClick={() => this.toggle()}\n                type=\"button\"\n              >\n                <slot name=\"header\" />\n              </button>\n            </this.headingTag>\n\n            {collapse}\n          </div>\n        ) : (\n          collapse\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-:host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;height:100%;fill:currentColor;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .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:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}
+:host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .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:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}