@swisspost/design-system-components 10.0.0-next.40 → 10.0.0-next.42

package/loaders/post-closebutton.js

@@ -1,42 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { d as defineCustomElement$2 } from './post-icon2.js';
-
-const postClosebuttonCss = ".btn-icon-close{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-icon-close>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{color:HighlightText !important}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
-const PostClosebuttonStyle0 = postClosebuttonCss;
-
-const PostClosebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostClosebutton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    render() {
-        return (h(Host, { key: '7b5e179b42eefd1823b2b2ef7ee17c94bd9f0ddd', "data-version": version }, h("button", { key: '471e68d1ddcfe741f5450d002b2daa86cec0f986', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: '928fa7460988cffa269a29506e68e056f84bcef8', "aria-hidden": "true", name: "closex" }), h("span", { key: 'c1501f4a8b7d8d95be7d02576b10143b9e6b0654', class: "visually-hidden" }, h("slot", { key: 'a9f1ab8db57486d420db0981090ad2ba5183c289' })))));
-    }
-    get host() { return this; }
-    static get style() { return PostClosebuttonStyle0; }
-}, [1, "post-closebutton"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-closebutton", "post-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-closebutton":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostClosebutton$1);
-            }
-            break;
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PostClosebutton = PostClosebutton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostClosebutton, defineCustomElement };

package/loaders/post-collapsible-trigger.d.ts

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

package/loaders/post-collapsible-trigger.js

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

package/loaders/post-collapsible-trigger2.js

@@ -1,125 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkRequiredAndType } from './index2.js';
-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.for = undefined;
-    }
-    /**
-     * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
-     */
-    validateAriaAttributes() {
-        checkRequiredAndType(this, 'for', 'string');
-    }
-    /**
-     * Initiate a mutation observer that updates the trigger whenever necessary
-     */
-    connectedCallback() {
-        this.root = getRoot(this.host);
-        this.root.addEventListener('postToggle', this.handlePostToggle);
-        this.observer.observe(this.host, { childList: true, subtree: true });
-    }
-    componentDidLoad() {
-        this.setTrigger();
-        if (!this.trigger)
-            console.warn('The post-collapsible-trigger must contain a button.');
-        this.validateAriaAttributes();
-    }
-    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.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() {
-        await this.collapsible?.toggle();
-    }
-    /**
-     * Retrieve the post-collapsible controlled by the trigger
-     */
-    get collapsible() {
-        const ref = this.root.getElementById(this.for);
-        if (ref && ref.localName === 'post-collapsible') {
-            return ref;
-        }
-        return null;
-    }
-    /**
-     * Find the button and add the proper event listener and ARIA attributes to it
-     */
-    setTrigger() {
-        const trigger = this.host.querySelector('button');
-        if (!trigger || (this.trigger && trigger.isEqualNode(this.trigger)))
-            return;
-        this.trigger = trigger;
-        this.trigger.addEventListener('click', () => this.toggleCollapsible());
-        this.updateAriaAttributes();
-    }
-    render() {
-        return (h(Host, { key: '8c835c780604b1138262489ca7d3313288e5ee86', "data-version": version }, h("slot", { key: 'ef354c2ca5e699a4e2c8940959f75a69918f388c' })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "for": ["validateAriaAttributes"]
-    }; }
-}, [1, "post-collapsible-trigger", {
-        "for": [513],
-        "update": [64]
-    }, undefined, {
-        "for": ["validateAriaAttributes"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-collapsible-trigger"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-collapsible-trigger":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostCollapsibleTrigger);
-            }
-            break;
-    } });
-}
-
-export { PostCollapsibleTrigger as P, defineCustomElement as d };

package/loaders/post-collapsible.d.ts

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

package/loaders/post-collapsible.js

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

package/loaders/post-footer.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/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/loaders/post-footer.js

@@ -1,118 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkRequiredAndType } from './index2.js';
-import { b as breakpoint } from './breakpoints.js';
-import { d as defineCustomElement$6 } from './post-accordion2.js';
-import { d as defineCustomElement$5 } from './post-accordion-item2.js';
-import { d as defineCustomElement$4 } from './post-collapsible2.js';
-import { d as defineCustomElement$3 } from './post-collapsible-trigger2.js';
-import { d as defineCustomElement$2 } 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)}.d-none{display:none}post-accordion-item.d-none+post-accordion-item{--post-accordion-button-border-top-width:unset}post-accordion-item:not(.d-none)~post-accordion-item,post-accordion-item:not(post-accordion-item:not(.d-none)~*):not(:has(~post-accordion-item:not(.d-none))){--post-accordion-button-border-top-width:0}";
-const PostFooterStyle0 = postFooterCss;
-
-const GRID_SLOTS = ['grid-1', 'grid-2', 'grid-3', 'grid-4'];
-const PostFooter$1 = /*@__PURE__*/ proxyCustomElement(class PostFooter extends HTMLElement {
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.breakpointChange = (e) => {
-            this.device = e.detail;
-        };
-        this.handleGridSlotChange = (...devices) => (e) => {
-            if (devices.includes(this.device) && e.target instanceof HTMLSlotElement) {
-                this.updateGridSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
-            }
-        };
-        this.label = undefined;
-        this.device = breakpoint.get('name');
-        this.gridSlotDisplayed = {};
-        this.handleGridSlotChange = this.handleGridSlotChange.bind(this);
-    }
-    connectedCallback() {
-        window.addEventListener('postBreakpoint:name', this.breakpointChange);
-    }
-    componentWillLoad() {
-        this.validateLabel();
-        // initialize grid visibility by checking the content of each slot
-        GRID_SLOTS.forEach(slotName => {
-            const assignedElements = this.host.querySelectorAll(`[slot="${slotName}"]`);
-            this.updateGridSlotDisplay(slotName, assignedElements.length > 0);
-        });
-    }
-    disconnectedCallback() {
-        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
-    }
-    updateGridSlotDisplay(slotName, hasContent) {
-        if (this.gridSlotDisplayed[slotName] !== hasContent) {
-            this.gridSlotDisplayed = { ...this.gridSlotDisplayed, [slotName]: hasContent };
-        }
-    }
-    renderAccordion() {
-        return (h("post-accordion", { headingLevel: 3, multiple: true }, GRID_SLOTS.map(slotName => (h("post-accordion-item", { class: { 'd-none': !this.gridSlotDisplayed[slotName] }, collapsed: true }, h("span", { slot: "header" }, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('mobile'), name: slotName }))))));
-    }
-    renderColumns() {
-        return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
-    }
-    render() {
-        return (h(Host, { key: '1cb83edcb5ab2e5582a48fd9c95a60a8411567ee', "data-version": version }, h("footer", { key: '4f507a514bdb6ad3f3579737ae72ae6a40168715' }, h("h2", { key: 'e99aeaef9a9f2e9e060d3f5d0fbad650360a7128', class: "visually-hidden" }, this.label), h("div", { key: 'f4cedb3f564577c0a5a91ea3ca84587c7af5818a', class: "footer-container" }, h("div", { key: '05ffad19533d49c91d5be570f5af52779a33d2df', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '6110e4382e43f63a83630538a0329e1f4b1d8590', class: "footer-column" }, h("div", { key: '5ac7115be86fc40f267c4d279574ad03eff66f39', class: "footer-socialmedia" }, h("slot", { key: '9c83318f3c4cc2d0cfa20087bb592f80a392cfb9', name: "socialmedia" })), h("div", { key: '5c3000bcdeea9a0952f67e6f09b38f476eb5380d', class: "footer-app" }, h("slot", { key: 'dd81ee8ba0e3d4ea42e60aebb4ce6daa30a1fe3d', name: "app" }))), h("div", { key: '242a9a86330f68888943cf2aa83ed0e24649a1a5', class: "footer-businesssectors" }, h("slot", { key: '9c2a860f2c0d89aa0a291ccd1f00dedccda64c71', name: "businesssectors" })), h("div", { key: '84269c90a5027029c6cf17f24d3dfe7cd3e70b06', class: "footer-meta" }, h("slot", { key: '4fef37edc54a6b0f6a52760eb8330ff98efa33bc', name: "meta" })), h("div", { key: '38bba9bd55e6d9025b6e4b95565594a484351a57', class: "footer-copyright" }, h("slot", { key: '4ecc0141a1489463b92ed44e7b02bf72b7f41fc5', name: "copyright" }))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "label": ["validateLabel"]
-    }; }
-    static get style() { return PostFooterStyle0; }
-}, [1, "post-footer", {
-        "label": [1],
-        "device": [32],
-        "gridSlotDisplayed": [32]
-    }, undefined, {
-        "label": ["validateLabel"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-footer", "post-accordion", "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$1);
-            }
-            break;
-        case "post-accordion":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "post-accordion-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "post-collapsible":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "post-collapsible-trigger":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PostFooter = PostFooter$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostFooter, defineCustomElement };

package/loaders/post-header.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/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;