@swisspost/design-system-components 1.7.1 → 2.0.0

package/dist/cjs/package-989e0b36.js

@@ -1,7 +0,0 @@
-'use strict';
-
-const version = "1.7.1";
-
-exports.version = version;
-
-//# sourceMappingURL=package-989e0b36.js.map

package/dist/cjs/package-989e0b36.js.map

@@ -1 +0,0 @@
-{"file":"package-989e0b36.js","mappings":";;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/post-accordion-bc0c6f31.js

@@ -1,87 +0,0 @@
-'use strict';
-
-const index = require('./index-c07c0cdb.js');
-const _package = require('./package-989e0b36.js');
-
-const postAccordionCss = ":host{display:block}";
-
-const PostAccordion = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        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 (index.h(index.Host, { "data-version": _package.version }, index.h("div", { class: "accordion" }, index.h("slot", { onSlotchange: () => this.registerCollapsibles() }))));
-    }
-    get host() { return index.getElement(this); }
-};
-PostAccordion.style = postAccordionCss;
-
-exports.PostAccordion = PostAccordion;
-
-//# sourceMappingURL=post-accordion-bc0c6f31.js.map

package/dist/cjs/post-accordion-bc0c6f31.js.map

@@ -1 +0,0 @@
-{"file":"post-accordion-bc0c6f31.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,sBAAsB;;MCQlC,aAAa;;;QAEhB,yBAAoB,GAAG,IAAI,GAAG,EAA8B,CAAC;wBAOhC,KAAK;;IAE1C,iBAAiB;QACf,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;;;;IAMD,MAAM,MAAM,CAAC,EAAU;QACrB,MAAM,mBAAmB,GAAG,IAAI,CAAC,YAAY;aAC1C,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAE9C,IAAI,CAAC,mBAAmB;YAAE,MAAM,IAAI,KAAK,CAAC,sCAAsC,EAAE,GAAG,CAAC,CAAC;QAEvF,MAAM,mBAAmB,CAAC,MAAM,EAAE,CAAC;KACpC;IAGD,qBAAqB,CAAC,KAAkB;QACtC,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAoC,CAAC;QACtE,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAEpE,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;SACtD;aAAM;YACL,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;SACnD;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS;YAAE,OAAO;;QAGvC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,CAAC;aAC3C,MAAM,CAAC,WAAW,IAAI,WAAW,KAAK,kBAAkB,CAAC;aACzD,OAAO,CAAC,WAAW;YAClB,KAAK,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAChC,CAAC,CAAC;KACN;;;;;;;IASD,MAAM,SAAS;QACb,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,OAAO,CAAC,GAAG,CACf,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAC/D,CAAC;SACH;aAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE;YAC1C,MAAM,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;SACzC;KACF;;;;IAMD,MAAM,WAAW;QACf,MAAM,OAAO,CAAC,GAAG,CACf,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAChE,CAAC;KACH;IAEO,oBAAoB;QAC1B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAC/C,CAAC;QAEF,IAAI,CAAC,YAAY;aACd,MAAM,CAAC,WAAW;YACjB,OAAO,CAAC,WAAW,CAAC,SAAS,IAAI,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;SAC7E,CAAC,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK;YAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,CAAC,EAAE;gBACjC,WAAW,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;gBAC1C,OAAO;aACR;YAED,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;SAC5C,CAAC,CAAC;KACN;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,oBAAeC,gBAAO,IACzBF,iBAAK,KAAK,EAAC,WAAW,IACpBA,kBAAM,YAAY,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,GAAG,CACpD,CACD,EACP;KACH;;;;;;;","names":["h","Host","version"],"sources":["src/components/post-accordion/post-accordion.scss?tag=post-accordion&encapsulation=shadow","src/components/post-accordion/post-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","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"],"version":3}

package/dist/cjs/post-collapsible-85f8ace5.js

@@ -1,93 +0,0 @@
-'use strict';
-
-const index = require('./index-c07c0cdb.js');
-const _package = require('./package-989e0b36.js');
-const index$1 = require('./index-8c288b1a.js');
-
-function isMotionReduced() {
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-
-const collapseDuration = 350;
-const collapseEasing = 'ease';
-const collapsedKeyframe = { height: '0', overflow: 'hidden' };
-const collapse = (el) => {
-    const { height } = window.getComputedStyle(el);
-    const expandedKeyframe = { height };
-    return el.animate([expandedKeyframe, collapsedKeyframe], { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' });
-};
-const expand = (el) => {
-    const expandedKeyframe = { height: `${el.scrollHeight}px` };
-    return el.animate([collapsedKeyframe, expandedKeyframe], { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' });
-};
-
-const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
-
-const postCollapsibleCss = ".accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item{--post-bg-opacity:1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}.accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item{--post-contrast-color:#000;--post-contrast-color-inverted:#fff;--post-gray-10:hsl(0, 0%, 90%);--post-gray-20:hsl(0, 0%, 80%);--post-gray-40:hsl(0, 0%, 60%);--post-gray-60:hsl(0, 0%, 40%);--post-gray-80:hsl(0, 0%, 20%);--post-yellow:#fc0;--post-light:#faf9f8;--post-gray:#f4f3f1;--post-dark:hsl(0, 0%, 20%);--post-primary:hsl(0, 0%, 20%);--post-white:#fff;--post-black:#000;--post-info:#cce4ee;--post-success:#2c911c;--post-warning:#f49e00;--post-danger:#a51728;--post-nightblue:#004976;--post-nightblue-bright:#0076a8;--post-petrol:#006d68;--post-petrol-bright:#00968f;--post-coral:#9e2a2f;--post-coral-bright:#e03c31;--post-olive:#716135;--post-olive-bright:#aa9d2e;--post-purple:#80276c;--post-purple-bright:#c5299b;--post-aubergine:#523178;--post-aubergine-bright:#7566a0;--post-success-green:#2c871d;--post-error-red:#a51728;--post-warning-orange:#f49e00;--post-success-background:#c0debb;--post-error-background:#ffdade;--post-warning-background:#fce2b2;--post-contrast-color-rgb:0, 0, 0;--post-contrast-color-inverted-rgb:255, 255, 255;--post-gray-10-rgb:230, 230, 230;--post-gray-20-rgb:204, 204, 204;--post-gray-40-rgb:153, 153, 153;--post-gray-60-rgb:102, 102, 102;--post-gray-80-rgb:51, 51, 51;--post-yellow-rgb:255, 204, 0;--post-light-rgb:250, 249, 248;--post-gray-rgb:244, 243, 241;--post-dark-rgb:51, 51, 51;--post-primary-rgb:51, 51, 51;--post-white-rgb:255, 255, 255;--post-black-rgb:0, 0, 0;--post-info-rgb:204, 228, 238;--post-success-rgb:44, 145, 28;--post-warning-rgb:244, 158, 0;--post-danger-rgb:165, 23, 40;--post-nightblue-rgb:0, 73, 118;--post-nightblue-bright-rgb:0, 118, 168;--post-petrol-rgb:0, 109, 104;--post-petrol-bright-rgb:0, 150, 143;--post-coral-rgb:158, 42, 47;--post-coral-bright-rgb:224, 60, 49;--post-olive-rgb:113, 97, 53;--post-olive-bright-rgb:170, 157, 46;--post-purple-rgb:128, 39, 108;--post-purple-bright-rgb:197, 41, 155;--post-aubergine-rgb:82, 49, 120;--post-aubergine-bright-rgb:117, 102, 160;--post-success-green-rgb:44, 135, 29;--post-error-red-rgb:165, 23, 40;--post-warning-orange-rgb:244, 158, 0;--post-success-background-rgb:192, 222, 187;--post-error-background-rgb:255, 218, 222;--post-warning-background-rgb:252, 226, 178}.accordion-item{border-block:2px solid #666;--post-bg-rgb:244, 243, 241}.accordion-item+.accordion-item{border-block-start:0}.bg-light .accordion-item{--post-bg-rgb:255, 255, 255}.bg-gray .accordion-item{--post-bg-rgb:255, 255, 255}.accordion-header{color:#333;font-size:1rem;font-weight:700;line-height:1.5;margin:0}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button;outline:none;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:3rem;text-align:start;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.accordion-button:focus-visible{outline:2px solid #1976c8}.accordion-button:hover{color:#000;background-color:#e6e6e6}.accordion-button:disabled{opacity:.4;pointer-events:none}.accordion-button::after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor;content:\"\";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:.5rem 1rem 1rem;font-weight:300}.accordion-button>*,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>*,.accordion-body>:last-child{margin-block-end:0 !important}:host{display:block}.accordion-button{cursor:pointer}.accordion-button>::slotted(.text-truncate){display:block}post-collapsible+post-collapsible::part(accordion-item){border-block-start:0 !important}";
-
-const PostCollapsible = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.collapseChange = index.createEvent(this, "collapseChange", 7);
-        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) {
-        index$1.checkEmptyOrType(newValue, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
-    }
-    validateHeadingLevel(newValue = this.headingLevel) {
-        index$1.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 = (index.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 ? (index.h("div", { class: "accordion-body" }, index.h("slot", null))) : (index.h("slot", null))));
-        return (index.h(index.Host, { id: this.id, "data-version": _package.version }, this.hasHeader ? (index.h("div", { part: "accordion-item", class: "accordion-item" }, index.h(this.headingTag, { class: "accordion-header", id: `${this.id}--header` }, index.h("button", { "aria-controls": `${this.id}--collapse`, "aria-expanded": `${this.isOpen}`, class: `accordion-button${this.isOpen ? '' : ' collapsed'}`, onClick: () => this.toggle(), type: "button" }, index.h("slot", { name: "header" }))), collapse)) : (collapse)));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "collapsed": ["validateCollapsed"],
-        "headingLevel": ["validateHeadingLevel"]
-    }; }
-};
-PostCollapsible.style = postCollapsibleCss;
-
-exports.PostCollapsible = PostCollapsible;
-
-//# sourceMappingURL=post-collapsible-85f8ace5.js.map

package/dist/cjs/post-collapsible-85f8ace5.js.map

@@ -1 +0,0 @@
-{"file":"post-collapsible-85f8ace5.js","mappings":";;;;;;SAAgB,eAAe;IAC7B,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE;;ACFA,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;AAEjE,MAAM,QAAQ,GAAG,CAAC,EAAe;IACtC,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,gBAAgB,GAAa,EAAE,MAAM,EAAE,CAAC;IAE9C,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;AAEK,MAAM,MAAM,GAAG,CAAC,EAAe;IACpC,MAAM,gBAAgB,GAAa,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC;IAEtE,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;;ACrBM,MAAM,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU;;ACAzD,MAAM,kBAAkB,GAAG,6uJAA6uJ;;MCsB3vJ,eAAe;;;;QAClB,aAAQ,GAAG,KAAK,CAAC;;sBAMP,IAAI;;;yBAOiB,KAAK;4BAcG,CAAC;;IAXhD,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS;QACzCA,wBAAgB,CACd,QAAQ,EACR,SAAS,EACT,uEAAuE,CACxE,CAAC;KACH;IAQD,oBAAoB,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY;QAC/CC,yBAAiB,CACf,QAAQ,EACR,cAAc,EACd,yFAAyF,CAC1F,CAAC;KACH;IAOD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAED,mBAAmB;;QACjB,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;QACpD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1E,IAAI,CAAC,UAAU,GAAG,IAAI,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,EAAE,CAAC;KAChD;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,SAAS;YAAE,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;;;;;;IAQD,MAAM,MAAM,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM;QAC9B,IAAI,IAAI,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QAEtC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;QAE9C,MAAM,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE/E,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAe,EAAE;YAAE,SAAS,CAAC,MAAM,EAAE,CAAC;QAE5D,MAAM,SAAS,CAAC,QAAQ,CAAC;QAEzB,SAAS,CAAC,YAAY,EAAE,CAAC;QAEzB,OAAO,IAAI,CAAC,MAAM,CAAC;KACpB;IAED,MAAM;QACJ,MAAM,QAAQ,IACZC,oCACmB,IAAI,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,EAClE,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,GAAG,qBAAqB,GAAG,EAAE,EAAE,EAC/D,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,YAAY,EAC1B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,IAEjC,IAAI,CAAC,SAAS,IACbA,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,qBAAQ,CACJ,KAENA,qBAAQ,CACT,CACG,CACP,CAAC;QAEF,QACEA,QAACC,UAAI,IAAC,EAAE,EAAE,IAAI,CAAC,EAAE,kBAAgBC,gBAAO,IACrC,IAAI,CAAC,SAAS,IACbF,iBAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,gBAAgB,IAC/CA,QAAC,IAAI,CAAC,UAAU,IAAC,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,UAAU,IAChEA,qCACiB,GAAG,IAAI,CAAC,EAAE,YAAY,mBACtB,GAAG,IAAI,CAAC,MAAM,EAAE,EAC/B,KAAK,EAAE,mBAAmB,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,YAAY,EAAE,EAC3D,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC5B,IAAI,EAAC,QAAQ,IAEbA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CACf,CACO,EAEjB,QAAQ,CACL,KAEN,QAAQ,CACT,CACI,EACP;KACH;;;;;;;;;;;","names":["checkEmptyOrType","checkEmptyOrOneOf","h","Host","version"],"sources":["src/utils/is-motion-reduced.ts","src/animations/collapse.ts","src/components/post-collapsible/heading-levels.ts","src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["export function isMotionReduced(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","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","export const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;\n\nexport type HeadingLevel = typeof HEADING_LEVELS[number];\n","@use '@swisspost/design-system-styles/components/accordion';\n\n:host {\n  display: block;\n}\n\n.accordion-button {\n  cursor: pointer;\n\n  > ::slotted(.text-truncate) {\n    display: block;\n  }\n}\n\npost-collapsible + post-collapsible::part(accordion-item) {\n  border-block-start: 0!important;\n}\n","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"],"version":3}