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

package/dist/components/p-Cx0AiN2A.js

@@ -0,0 +1,182 @@
+const IS_SERVER = typeof window === 'undefined';
+const IS_BROWSER = !IS_SERVER;
+
+/* eslint-disable no-undefined,no-param-reassign,no-shadow */
+
+/**
+ * Throttle execution of a function. Especially useful for rate limiting
+ * execution of handlers on events like resize and scroll.
+ *
+ * @param {number} delay -                  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
+ *                                            are most useful.
+ * @param {Function} callback -               A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
+ *                                            as-is, to `callback` when the throttled-function is executed.
+ * @param {object} [options] -              An object to configure options.
+ * @param {boolean} [options.noTrailing] -   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
+ *                                            while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
+ *                                            one final time after the last throttled-function call. (After the throttled-function has not been called for
+ *                                            `delay` milliseconds, the internal counter is reset).
+ * @param {boolean} [options.noLeading] -   Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
+ *                                            immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
+ *                                            callback will never executed if both noLeading = true and noTrailing = true.
+ * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
+ *                                            false (at end), schedule `callback` to execute after `delay` ms.
+ *
+ * @returns {Function} A new, throttled, function.
+ */
+function throttle (delay, callback, options) {
+  var _ref = {},
+    _ref$noTrailing = _ref.noTrailing,
+    noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
+    _ref$noLeading = _ref.noLeading,
+    noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
+    _ref$debounceMode = _ref.debounceMode,
+    debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
+  /*
+   * After wrapper has stopped being called, this timeout ensures that
+   * `callback` is executed at the proper times in `throttle` and `end`
+   * debounce modes.
+   */
+  var timeoutID;
+  var cancelled = false;
+
+  // Keep track of the last time `callback` was executed.
+  var lastExec = 0;
+
+  // Function to clear existing timeout
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+  }
+
+  // Function to cancel next exec
+  function cancel(options) {
+    var _ref2 = options || {},
+      _ref2$upcomingOnly = _ref2.upcomingOnly,
+      upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
+    clearExistingTimeout();
+    cancelled = !upcomingOnly;
+  }
+
+  /*
+   * The `wrapper` function encapsulates all of the throttling / debouncing
+   * functionality and when executed will limit the rate at which `callback`
+   * is executed.
+   */
+  function wrapper() {
+    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
+      arguments_[_key] = arguments[_key];
+    }
+    var self = this;
+    var elapsed = Date.now() - lastExec;
+    if (cancelled) {
+      return;
+    }
+
+    // Execute `callback` and update the `lastExec` timestamp.
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self, arguments_);
+    }
+
+    /*
+     * If `debounceMode` is true (at begin) this is used to clear the flag
+     * to allow future `callback` executions.
+     */
+    function clear() {
+      timeoutID = undefined;
+    }
+    if (!noLeading && debounceMode && !timeoutID) {
+      /*
+       * Since `wrapper` is being called for the first time and
+       * `debounceMode` is true (at begin), execute `callback`
+       * and noLeading != true.
+       */
+      exec();
+    }
+    clearExistingTimeout();
+    if (debounceMode === undefined && elapsed > delay) {
+      if (noLeading) {
+        /*
+         * In throttle mode with noLeading, if `delay` time has
+         * been exceeded, update `lastExec` and schedule `callback`
+         * to execute after `delay` ms.
+         */
+        lastExec = Date.now();
+        if (!noTrailing) {
+          timeoutID = setTimeout(debounceMode ? clear : exec, delay);
+        }
+      } else {
+        /*
+         * In throttle mode without noLeading, if `delay` time has been exceeded, execute
+         * `callback`.
+         */
+        exec();
+      }
+    } else if (noTrailing !== true) {
+      /*
+       * In trailing throttle mode, since `delay` time has not been
+       * exceeded, schedule `callback` to execute `delay` ms after most
+       * recent execution.
+       *
+       * If `debounceMode` is true (at begin), schedule `clear` to execute
+       * after `delay` ms.
+       *
+       * If `debounceMode` is false (at end), schedule `callback` to
+       * execute after `delay` ms.
+       */
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
+    }
+  }
+  wrapper.cancel = cancel;
+
+  // Return the wrapper function.
+  return wrapper;
+}
+
+class Breakpoint {
+    constructor() {
+        this.updateCurrentBreakpoint = throttle(50, (options = { emitEvents: true }) => {
+            const previousBreakpoint = this.currentBreakpoint;
+            this.currentBreakpoint = this.breakpoints.find(breakpoint => {
+                return breakpoint.minWidth <= innerWidth;
+            });
+            if (!this.currentBreakpoint || !options.emitEvents)
+                return;
+            Object.keys(this.currentBreakpoint)
+                .filter(key => !previousBreakpoint || this.currentBreakpoint[key] !== previousBreakpoint[key])
+                .forEach((key) => this.dispatchEvent(key));
+        });
+        if (IS_SERVER || !!this.breakpoints)
+            return;
+        const keys = this.getValues('--post-grid-breakpoint-keys');
+        const devices = this.getValues('--post-grid-breakpoint-devices');
+        const widths = this.getValues('--post-grid-breakpoint-widths');
+        this.breakpoints = widths
+            .map((width, i) => ({
+            key: keys[i],
+            device: devices[i],
+            minWidth: Number(width),
+        }))
+            .sort((a, b) => b.minWidth - a.minWidth);
+        this.updateCurrentBreakpoint({ emitEvents: false });
+        window.addEventListener('resize', () => this.updateCurrentBreakpoint(), { passive: true });
+    }
+    getValues(cssCustomProperty) {
+        const values = getComputedStyle(document.documentElement).getPropertyValue(cssCustomProperty);
+        return values ? values.split(',').map(v => v.trim()) : [];
+    }
+    dispatchEvent(property) {
+        if (IS_SERVER)
+            return;
+        window.dispatchEvent(new CustomEvent(`postBreakpoint:${property}`, { detail: this.currentBreakpoint[property] }));
+    }
+    get(property) {
+        this.updateCurrentBreakpoint({ emitEvents: false });
+        return this.currentBreakpoint[property];
+    }
+}
+const breakpoint = new Breakpoint();
+
+export { IS_BROWSER as I, breakpoint as b, throttle as t };

package/dist/components/{post-collapsible-trigger2.js → p-D3LhzIrC.js}

@@ -1,17 +1,26 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
-import { e as eventGuard } from './event-guard.js';
-import { g as getRoot } from './get-root.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { E as EventFrom } from './p-8U5GFtQP.js';
+import { g as getRoot } from './p-DBHo9yGF.js';
 
-const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends HTMLElement {
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends H {
     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
@@ -48,11 +57,9 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
      * 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}`);
-            }
-        });
+        if (this.trigger) {
+            this.trigger.setAttribute('aria-expanded', `${e.detail}`);
+        }
     }
     updateAriaAttributes() {
         if (!this.trigger)
@@ -96,7 +103,7 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: '8c835c780604b1138262489ca7d3313288e5ee86', "data-version": version }, h("slot", { key: 'ef354c2ca5e699a4e2c8940959f75a69918f388c' })));
+        return (h(Host, { key: '7fdf4338861df3ed4a61e2de68a0623f7f43df19', "data-version": version }, h("slot", { key: '4efa3ed29778dc162c4e8628f32d447d8b0b9ece' })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -108,6 +115,9 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
     }, undefined, {
         "for": ["validateAriaAttributes"]
     }]);
+__decorate([
+    EventFrom('post-collapsible')
+], PostCollapsibleTrigger.prototype, "handlePostToggle", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -121,5 +131,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostCollapsibleTrigger as P, defineCustomElement as d };

package/dist/components/{get-root.js → p-DBHo9yGF.js}

@@ -1,4 +1,4 @@
-import { I as IS_BROWSER } from './breakpoints.js';
+import { I as IS_BROWSER } from './p-Cx0AiN2A.js';
 
 /**
  * getRootNode() can only be used after the element has been attached to the document!

package/dist/components/p-DQuPPEca.js

@@ -0,0 +1,31 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+
+const postMenuItemCss = "post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item a{text-decoration:none}post-menu-item button,post-menu-item a{position:relative;display:flex;width:100%;align-items:center;padding:.5rem 1rem;gap:.5rem;font-size:1rem;color:#050400;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1);outline-offset:0;padding-block:.75rem}post-menu-item button:has(post-icon:last-child),post-menu-item a:has(post-icon:last-child){padding-inline-end:.75rem}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem}}post-menu-item button>post-icon:last-child,post-menu-item a>post-icon:last-child{margin-inline-start:.5rem}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:-2px !important;border-radius:4px}post-menu-item button::after,post-menu-item a::after{content:\"\";display:block;position:absolute;inset-block-end:0;inset-inline:0;height:3px;background-color:rgba(0,0,0,0);transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-menu-item button:hover,post-menu-item a:hover{color:#504f4b}post-menu-item button:hover::after,post-menu-item a:hover::after{background-color:currentColor}";
+
+const PostMenuItem = /*@__PURE__*/ proxyCustomElement(class PostMenuItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h(Host, { key: '6be606f22288f655320c5ef58f3d0f4bf39d7f62', role: "menuitem", "data-version": version }, h("slot", { key: 'a6d4b48b8cb09e27b19cc14def007e3754ff06c0' })));
+    }
+    static get style() { return postMenuItemCss; }
+}, [4, "post-menu-item"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostMenuItem);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { PostMenuItem as P, defineCustomElement as d };

package/dist/components/{post-accordion2.js → p-DlEtlaNu.js}

@@ -1,20 +1,31 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { H as HEADING_LEVELS } from './heading-levels.js';
-import { c as checkRequiredAndOneOf } from './index2.js';
-import './breakpoints.js';
-import { e as eventGuard } from './event-guard.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
+import { b as checkRequiredAndOneOf } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { E as EventFrom } from './p-8U5GFtQP.js';
 
 const postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}::slotted(post-accordion-item:where(:only-of-type,:not(:first-of-type))){--post-accordion-button-border-top-width:0}";
-const PostAccordionStyle0 = postAccordionCss;
 
-const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends HTMLElement {
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.expandedItems = new Set();
-        this.headingLevel = undefined;
+        /**
+         * If `true`, multiple `post-accordion-item` can be open at the same time.
+         */
         this.multiple = false;
     }
     validateHeadingLevel() {
@@ -30,23 +41,21 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         this.validateHeadingLevel();
     }
     collapseToggleHandler(event) {
-        eventGuard(this.host, event, { targetLocalName: 'post-accordion-item', delegatorSelector: 'post-accordion' }, () => {
-            const toggledAccordionItem = event.target;
-            const isClosing = this.expandedItems.has(toggledAccordionItem);
-            if (isClosing) {
-                this.expandedItems.delete(toggledAccordionItem);
-            }
-            else {
-                this.expandedItems.add(toggledAccordionItem);
-            }
-            if (this.multiple || isClosing)
-                return;
-            // Close other open accordion items to ensure only one is open at a time
-            Array.from(this.expandedItems.values())
-                .filter(item => item !== toggledAccordionItem)
-                .forEach(item => {
-                item.toggle(false);
-            });
+        const toggledAccordionItem = event.target;
+        const isClosing = this.expandedItems.has(toggledAccordionItem);
+        if (isClosing) {
+            this.expandedItems.delete(toggledAccordionItem);
+        }
+        else {
+            this.expandedItems.add(toggledAccordionItem);
+        }
+        if (this.multiple || isClosing)
+            return;
+        // Close other open accordion items to ensure only one is open at a time
+        Array.from(this.expandedItems.values())
+            .filter(item => item !== toggledAccordionItem)
+            .forEach(item => {
+            item.toggle(false);
         });
     }
     /**
@@ -93,13 +102,13 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         });
     }
     render() {
-        return (h(Host, { key: '7057a6926f2279f7fc86d7f8539dd3ca884a3d70', "data-version": version }, h("div", { key: 'a6d337471d1d16c09d7e6af950d39c58fc6f2880', class: "accordion" }, h("slot", { key: '9687babb4b539f6e54468555b4057a2b378e1e10', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: 'ab800b580f0dd591a9413305afa282ff7e697759', "data-version": version }, h("div", { key: '258ba1dc99811545c0dd9796ef521a05a0c87dda', class: "accordion" }, h("slot", { key: '2ad7482962316723f5c8ff334bad7cc33b6fa953', onSlotchange: () => this.registerAccordionItems() }))));
     }
     get host() { return this; }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]
     }; }
-    static get style() { return PostAccordionStyle0; }
+    static get style() { return postAccordionCss; }
 }, [1, "post-accordion", {
         "headingLevel": [2, "heading-level"],
         "multiple": [4],
@@ -109,6 +118,9 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
     }, [[0, "postToggle", "collapseToggleHandler"]], {
         "headingLevel": ["validateHeadingLevel"]
     }]);
+__decorate([
+    EventFrom('post-accordion-item')
+], PostAccordion.prototype, "collapseToggleHandler", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -122,5 +134,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostAccordion as P, defineCustomElement as d };

package/{loaders/post-collapsible2.js → dist/components/p-DphlfQse.js}

@@ -1,7 +1,7 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { I as IS_BROWSER } from './breakpoints.js';
-import { a as checkEmptyOrType } from './index2.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { I as IS_BROWSER } from './p-Cx0AiN2A.js';
+import { e as checkEmptyOrType } from './p-CV7fm1rW.js';
 
 function isMotionReduced() {
     return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
@@ -27,16 +27,18 @@ function expand(el) {
 }
 
 const postCollapsibleCss = ":host{display:block;position:relative;overflow:hidden}";
-const PostCollapsibleStyle0 = postCollapsibleCss;
 
-const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible extends HTMLElement {
+const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.postToggle = createEvent(this, "postToggle", 7);
+        this.postToggle = createEvent(this, "postToggle");
         this.isLoaded = false;
         this.isOpen = true;
+        /**
+         * If `true`, the element is collapsed otherwise it is displayed.
+         */
         this.collapsed = false;
     }
     collapsedChange() {
@@ -84,7 +86,7 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
     static get watchers() { return {
         "collapsed": ["collapsedChange"]
     }; }
-    static get style() { return PostCollapsibleStyle0; }
+    static get style() { return postCollapsibleCss; }
 }, [1, "post-collapsible", {
         "collapsed": [1028],
         "toggle": [64]
@@ -104,5 +106,6 @@ function defineCustomElement() {
             break;
     } });
 }
+defineCustomElement();
 
 export { PostCollapsible as P, defineCustomElement as d };