@swisspost/design-system-components 9.0.1 → 10.0.0-next.38

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

@@ -1,100 +1,80 @@
-import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { c as checkType } from './check-type.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
-
-function debounce(callback, timeout = 200) {
-    let id;
-    return (...args) => {
-        if (id)
-            clearTimeout(id);
-        id = setTimeout(callback, timeout, ...args);
-    };
-}
-
-function getRoot(element) {
-    const root = element.getRootNode();
-    if (root instanceof Document || root instanceof ShadowRoot) {
-        return root;
-    }
-    throw new Error('Attempting to access root node before the element is attached to the document or shadow tree.');
-}
+import './breakpoints.js';
+import { e as eventGuard } from './event-guard.js';
+import { g as getRoot } from './get-root.js';
 
 const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.observer = new MutationObserver(() => this.setTrigger());
-        this.debouncedUpdate = debounce(() => {
-            var _a;
-            if (!this.trigger)
-                return;
-            // add the provided id to the aria-controls list
-            const ariaControls = this.trigger.getAttribute('aria-controls');
-            if (!(ariaControls === null || ariaControls === void 0 ? void 0 : ariaControls.includes(this.for))) {
-                const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
-                this.trigger.setAttribute('aria-controls', newAriaControls);
-            }
-            // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
-            const isCollapsed = (_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.collapsed;
-            const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
-            this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
-        });
         this.for = undefined;
     }
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
-    setAriaAttributes() {
-        checkNonEmpty(this.for, 'The post-collapsible-trigger "for" prop is required.');
-        checkType(this.for, 'string', 'The post-collapsible-trigger "for" prop should be a id.');
-        void this.update();
+    validateAriaAttributes() {
+        checkNonEmpty(this, 'for');
+        checkType(this, 'for', 'string', 'The post-collapsible-trigger "for" prop should be a id.');
     }
     /**
      * Initiate a mutation observer that updates the trigger whenever necessary
      */
     connectedCallback() {
-        this.observer.observe(this.host, { childList: true, subtree: true });
-    }
-    /**
-     * Attach a "postToggle" event listener to the root node
-     * to update the trigger's "aria-expanded" attribute whenever the controlled post-collapsible is toggled
-     */
-    componentWillLoad() {
         this.root = getRoot(this.host);
-        this.root.addEventListener('postToggle', (e) => {
-            if (!this.trigger || !e.target.isEqualNode(this.collapsible))
-                return;
-            this.trigger.setAttribute('aria-expanded', `${e.detail}`);
-        });
+        this.root.addEventListener('postToggle', this.handlePostToggle);
+        this.observer.observe(this.host, { childList: true, subtree: true });
     }
-    /**
-     * Add the "data-version" to the host element and set the trigger
-     */
     componentDidLoad() {
-        this.host.setAttribute('data-version', version);
         this.setTrigger();
         if (!this.trigger)
             console.warn('The post-collapsible-trigger must contain a button.');
+        this.validateAriaAttributes();
     }
-    /**
-     * Disconnect the mutation observer
-     */
     disconnectedCallback() {
         this.observer.disconnect();
+        this.root.removeEventListener('postToggle', this.handlePostToggle);
     }
     /**
      * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
      */
     async update() {
-        this.debouncedUpdate();
+        this.updateAriaAttributes();
+    }
+    /**
+     * Private handler for the 'postToggle' event.
+     * This updates the trigger's "aria-expanded" attribute based on the event detail.
+     */
+    handlePostToggle(e) {
+        eventGuard(this.host, e, { targetLocalName: 'post-collapsible' }, () => {
+            if (this.trigger) {
+                this.trigger.setAttribute('aria-expanded', `${e.detail}`);
+            }
+        });
+    }
+    updateAriaAttributes() {
+        if (!this.trigger)
+            return;
+        // add the provided id to the aria-controls list
+        const ariaControls = this.trigger.getAttribute('aria-controls');
+        if (!ariaControls?.includes(this.for)) {
+            const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
+            this.trigger.setAttribute('aria-controls', newAriaControls);
+        }
+        // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
+        const isCollapsed = this.collapsible?.collapsed;
+        const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
+        this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
     }
     /**
      * Toggle the post-collapsible controlled by the trigger
      */
     async toggleCollapsible() {
-        var _a;
-        await ((_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.toggle());
+        await this.collapsible?.toggle();
     }
     /**
      * Retrieve the post-collapsible controlled by the trigger
@@ -115,17 +95,20 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
             return;
         this.trigger = trigger;
         this.trigger.addEventListener('click', () => this.toggleCollapsible());
-        this.setAriaAttributes();
+        this.updateAriaAttributes();
+    }
+    render() {
+        return (h(Host, { key: 'cd703fe34b8c82afc5956b58724d36b06054bc0b', "data-version": version }, h("slot", { key: '5abe4ba2b8922b941cc8aebbc7039e34e1853855' })));
     }
     get host() { return this; }
     static get watchers() { return {
-        "for": ["setAriaAttributes"]
+        "for": ["validateAriaAttributes"]
     }; }
-}, [0, "post-collapsible-trigger", {
-        "for": [1],
+}, [1, "post-collapsible-trigger", {
+        "for": [513],
         "update": [64]
     }, undefined, {
-        "for": ["setAriaAttributes"]
+        "for": ["validateAriaAttributes"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/post-collapsible2.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { b as checkEmptyOrType } from './index2.js';
+import { I as IS_BROWSER } from './breakpoints.js';
+import { e as checkEmptyOrType } from './index2.js';
 
 function isMotionReduced() {
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
 }
 
 const collapseDuration = 350;
@@ -14,17 +15,18 @@ const animationOptions = {
     easing: collapseEasing,
     fill: 'forwards',
 };
-const collapse = (el) => {
-    const expandedKeyframe = { height: window.getComputedStyle(el).height };
+function collapse(el) {
+    const elHeight = IS_BROWSER ? window.getComputedStyle(el).height : `${el.scrollHeight}px`;
+    const expandedKeyframe = { height: elHeight };
     return el.animate([expandedKeyframe, collapsedKeyframe], animationOptions);
-};
-const expand = (el) => {
+}
+function expand(el) {
     const expandedKeyframe = { height: `${el.scrollHeight}px`, offset: 1 };
-    const finalKeyframe = { height: 'auto' };
+    const finalKeyframe = { height: 'auto', overflow: 'visible' };
     return el.animate([collapsedKeyframe, expandedKeyframe, finalKeyframe], animationOptions);
-};
+}
 
-const postCollapsibleCss = ":host{display:block;overflow:hidden}";
+const postCollapsibleCss = ":host{display:block;position:relative;overflow:hidden}";
 const PostCollapsibleStyle0 = postCollapsibleCss;
 
 const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible extends HTMLElement {
@@ -38,7 +40,7 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         this.collapsed = false;
     }
     collapsedChange() {
-        checkEmptyOrType(this.collapsed, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
+        checkEmptyOrType(this, 'collapsed', 'boolean');
         void this.toggle(!this.collapsed);
     }
     componentDidLoad() {
@@ -62,7 +64,10 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         if (!this.isLoaded || isMotionReduced())
             animation.finish();
         await animation.finished;
-        animation.commitStyles();
+        const isHostRendered = this.host.offsetParent;
+        if (isHostRendered)
+            animation.commitStyles();
+        this.updateTriggers();
         return open;
     }
     /**
@@ -73,7 +78,7 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: '27c09f5612f7a2ef48c3ed97bfae29a8c9ea78ca', "data-version": version }, h("slot", { key: 'df30089afa0ff33d945dcb4c381ac08acb7cb08c' })));
+        return (h(Host, { key: 'a678bc639dfd7686d8e1bd57ca0f09984a24ab61', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: 'e0b88ac152fa09314b4bc01c9abdb11480e2cb4d' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-footer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostFooter extends Components.PostFooter, HTMLElement {}
+export const PostFooter: {
+    prototype: PostFooter;
+    new (): PostFooter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/post-footer.js

@@ -0,0 +1,6 @@
+import { P as PostFooter$1, d as defineCustomElement$1 } from './post-footer2.js';
+
+const PostFooter = PostFooter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostFooter, defineCustomElement };

package/dist/components/post-footer2.js

@@ -0,0 +1,78 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { b as breakpoint } from './breakpoints.js';
+import { d as defineCustomElement$4 } from './post-accordion-item2.js';
+import { d as defineCustomElement$3 } from './post-collapsible2.js';
+import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
+import { d as defineCustomElement$1 } from './post-icon2.js';
+
+const postFooterCss = ":host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block:32px;--post-footer-container-padding-inline:16px;--post-footer-container-max-width:1200px;--post-footer-grid-template:auto / auto;--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:0;--post-footer-grid-margin-block-end:24px;--post-footer-grid-padding-block-end:0;--post-footer-column-flex-direction:column;--post-footer-column-align-items:start;--post-footer-column-gap:0;--post-footer-post-list-flex-direction:column;--post-footer-post-list-gap:8px;--post-footer-post-list-align-items:start;--post-footer-socialmedia-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end:16px;--post-footer-meta-font-size:inherit;--post-footer-copyright-font-size:var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block:40px;--post-footer-grid-template:repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap:32px;--post-footer-grid-column-gap:16px;--post-footer-grid-margin-block-end:32px;--post-footer-grid-padding-block-end:32px;--post-footer-post-list-flex-direction:row;--post-footer-post-list-gap:16px;--post-footer-post-list-align-items:center;--post-footer-meta-margin-block-end:8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline:40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block:56px;--post-footer-grid-template:auto / repeat(4, auto);--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:24px;--post-footer-grid-margin-block-end:40px;--post-footer-column-flex-direction:row;--post-footer-column-align-items:center;--post-footer-column-gap:32px;--post-footer-post-list-gap:24px;--post-footer-businesssectors-margin-block-end:24px;--post-footer-meta-font-size:16px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(post-list),.footer-app ::slotted(post-list),.footer-businesssectors ::slotted(post-list),.footer-meta ::slotted(post-list){display:flex !important;flex-direction:var(--post-footer-post-list-flex-direction) !important;gap:var(--post-footer-post-list-gap) !important;align-items:var(--post-footer-post-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}";
+const PostFooterStyle0 = postFooterCss;
+
+const PostFooter = /*@__PURE__*/ proxyCustomElement(class PostFooter extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.breakpointChange = (e) => {
+            this.isMobile = e.detail === 'mobile';
+        };
+        this.label = undefined;
+        this.isMobile = breakpoint.get('name') === 'mobile';
+    }
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:name', this.breakpointChange);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
+    }
+    renderAccordion() {
+        return (h("div", { class: "footer-grid" }, h("post-accorddion", { "heading-level": "3", multiple: true }, h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-1-title" })), h("slot", { name: "grid-1" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-2-title" })), h("slot", { name: "grid-2" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-3-title" })), h("slot", { name: "grid-3" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-4-title" })), h("slot", { name: "grid-4" })))));
+    }
+    renderGrid() {
+        return (h("div", { class: "footer-grid" }, h("div", null, h("slot", { name: "grid-1" })), h("div", null, h("slot", { name: "grid-2" })), h("div", null, h("slot", { name: "grid-3" })), h("div", null, h("slot", { name: "grid-4" }))));
+    }
+    render() {
+        return (h(Host, { key: '4058ba0a63a666b82d274d1c35397c97d280ba49', "data-version": version }, h("footer", { key: '27adf1e2a1439fd69efd6e571fcdd6851304c92a' }, h("h2", { key: '1ca0cd955ec5e6d315521eb5c28c5963ed44856d', class: "visually-hidden" }, this.label), h("div", { key: '27a6f520dee9d6294fa3cd4ebc6fd5062ac327ce', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '5607004d5e3ea553a86d476ca459b3b3632ef12d', class: "footer-column" }, h("div", { key: 'cd4727970358ffad4ca28fffaccc8a5eab4dec27', class: "footer-socialmedia" }, h("slot", { key: '92e105af21b69640a07c2d35c24bff6aae84abb6', name: "socialmedia" })), h("div", { key: '904b787df3f192593408d99857e213143cec6706', class: "footer-app" }, h("slot", { key: '2f4ab14e20737c6035c175e58982464fe6987724', name: "app" }))), h("div", { key: 'c85b261b4ae0cb1e27f424f460fa2838e1174fb0', class: "footer-businesssectors" }, h("slot", { key: 'c66baa3a1b689d881db68448b9d72d47acd11c7c', name: "businesssectors" })), h("div", { key: '4eebc88279f29eef028766c1fcb90effc1aaf1ca', class: "footer-meta" }, h("slot", { key: 'd689d7c14af01dc13c7f9f0fd170f3974150b9aa', name: "meta" })), h("div", { key: '36f87386755a4ae1186109b46609c6ad9c1d5041', class: "footer-copyright" }, h("slot", { key: 'c37231f795b1a5a407f83aeaf8a8b093713b8db1', name: "copyright" }))))));
+    }
+    get host() { return this; }
+    static get style() { return PostFooterStyle0; }
+}, [1, "post-footer", {
+        "label": [1],
+        "isMobile": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-footer", "post-accordion-item", "post-collapsible", "post-collapsible-trigger", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-footer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostFooter);
+            }
+            break;
+        case "post-accordion-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "post-collapsible":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-collapsible-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostFooter as P, defineCustomElement as d };

package/dist/components/post-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostHeader extends Components.PostHeader, HTMLElement {}
+export const PostHeader: {
+    prototype: PostHeader;
+    new (): PostHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/post-header.js

@@ -0,0 +1,6 @@
+import { P as PostHeader$1, d as defineCustomElement$1 } from './post-header2.js';
+
+const PostHeader = PostHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostHeader, defineCustomElement };