@swisspost/design-system-components 9.0.0-next.33 → 9.0.0-next.34

package/dist/cjs/{post-tooltip-3176e280.js → post-tooltip-4d4d2ea9.js}

@@ -1,9 +1,10 @@
 'use strict';
 
-const index = require('./index-d6bf2c66.js');
-const _package = require('./package-3562c265.js');
-const attributeObserver = require('./attribute-observer-6d8b886b.js');
+const index = require('./index-b60129c4.js');
+const attributeObserver = require('./attribute-observer-c3a805b2.js');
 const index$1 = require('./index-23e36ff7.js');
+const breakpoints = require('./breakpoints-cdf1b747.js');
+const _package = require('./package-3426e8f7.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -4509,274 +4510,14 @@ module.exports = exports['default'];
 
 const isFocusable = /*@__PURE__*/getDefaultExportFromCjs(focusable.exports);
 
-/*!
- * long-press-event - v@version@
- * Pure JavaScript long-press-event
- * https://github.com/john-doherty/long-press-event
- * @author John Doherty <www.johndoherty.info>
- * @license MIT
- */
-(function (window, document) {
-
-    // local timer object based on rAF
-    var timer = null;
-
-    // check if we're using a touch screen
-    var hasPointerEvents = (('PointerEvent' in window) || (window.navigator && 'msPointerEnabled' in window.navigator));
-    var isTouch = (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
-
-    // switch to pointer events or touch events if using a touch screen
-    var mouseDown = hasPointerEvents ? 'pointerdown' : isTouch ? 'touchstart' : 'mousedown';
-    var mouseUp = hasPointerEvents ? 'pointerup' : isTouch ? 'touchend' : 'mouseup';
-    var mouseMove = hasPointerEvents ? 'pointermove' : isTouch ? 'touchmove' : 'mousemove';
-    var mouseLeave = hasPointerEvents ? 'pointerleave' : isTouch ? 'touchleave' : 'mouseleave';
-
-    // track number of pixels the mouse moves during long press
-    var startX = 0; // mouse x position when timer started
-    var startY = 0; // mouse y position when timer started
-    var maxDiffX = 10; // max number of X pixels the mouse can move during long press before it is canceled
-    var maxDiffY = 10; // max number of Y pixels the mouse can move during long press before it is canceled
-
-    // patch CustomEvent to allow constructor creation (IE/Chrome)
-    if (typeof window.CustomEvent !== 'function') {
-
-        window.CustomEvent = function (event, params) {
-
-            params = params || { bubbles: false, cancelable: false, detail: undefined };
-
-            var evt = document.createEvent('CustomEvent');
-            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-            return evt;
-        };
-
-        window.CustomEvent.prototype = window.Event.prototype;
-    }
-
-    // requestAnimationFrame() shim by Paul Irish
-    window.requestAnimFrame = (function () {
-        return window.requestAnimationFrame ||
-            window.webkitRequestAnimationFrame ||
-            window.mozRequestAnimationFrame ||
-            window.oRequestAnimationFrame ||
-            window.msRequestAnimationFrame || function (callback) {
-                window.setTimeout(callback, 1000 / 60);
-            };
-    })();
-
-    /**
-     * Behaves the same as setTimeout except uses requestAnimationFrame() where possible for better performance
-     * @param {function} fn The callback function
-     * @param {int} delay The delay in milliseconds
-     * @returns {object} handle to the timeout object
-     */
-    function requestTimeout(fn, delay) {
-
-        if (!window.requestAnimationFrame && !window.webkitRequestAnimationFrame &&
-            !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
-            !window.oRequestAnimationFrame && !window.msRequestAnimationFrame) return window.setTimeout(fn, delay);
-
-        var start = new Date().getTime();
-        var handle = {};
-
-        var loop = function () {
-            var current = new Date().getTime();
-            var delta = current - start;
-
-            if (delta >= delay) {
-                fn.call();
-            }
-            else {
-                handle.value = requestAnimFrame(loop);
-            }
-        };
-
-        handle.value = requestAnimFrame(loop);
-
-        return handle;
-    }
-
-    /**
-     * Behaves the same as clearTimeout except uses cancelRequestAnimationFrame() where possible for better performance
-     * @param {object} handle The callback function
-     * @returns {void}
-     */
-    function clearRequestTimeout(handle) {
-        if (handle) {
-            window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
-                window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) :
-                    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
-                        window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
-                            window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
-                                window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) :
-                                    clearTimeout(handle);
-        }
-    }
-
-    /**
-     * Fires the 'long-press' event on element
-     * @param {MouseEvent|PointerEvent|TouchEvent} originalEvent The original event being fired
-     * @returns {void}
-     */
-    function fireLongPressEvent(originalEvent) {
-
-        clearLongPressTimer();
-
-        originalEvent = unifyEvent(originalEvent);
-
-        // fire the long-press event
-        var allowClickEvent = this.dispatchEvent(new CustomEvent('long-press', {
-            bubbles: true,
-            cancelable: true,
-
-            // custom event data (legacy)
-            detail: {
-                clientX: originalEvent.clientX,
-                clientY: originalEvent.clientY,
-                offsetX: originalEvent.offsetX,
-                offsetY: originalEvent.offsetY,
-                pageX: originalEvent.pageX,
-                pageY: originalEvent.pageY
-            },
-
-            // add coordinate data that would typically acompany a touch/click event
-            clientX: originalEvent.clientX,
-            clientY: originalEvent.clientY,
-            offsetX: originalEvent.offsetX,
-            offsetY: originalEvent.offsetY,
-            pageX: originalEvent.pageX,
-            pageY: originalEvent.pageY,
-            screenX: originalEvent.screenX,
-            screenY: originalEvent.screenY
-        }));
-
-        if (!allowClickEvent) {
-            // suppress the next click event if e.preventDefault() was called in long-press handler
-            document.addEventListener('click', function suppressEvent(e) {
-                document.removeEventListener('click', suppressEvent, true);
-                cancelEvent(e);
-            }, true);
-        }
-    }
-
-    /**
-     * consolidates mouse, touch, and Pointer events
-     * @param {MouseEvent|PointerEvent|TouchEvent} e The original event being fired
-     * @returns {MouseEvent|PointerEvent|Touch}
-     */
-    function unifyEvent(e) {
-        if (e.changedTouches !== undefined) {
-            return e.changedTouches[0];
-        }
-        return e;
-    }
-
-    /**
-     * method responsible for starting the long press timer
-     * @param {event} e - event object
-     * @returns {void}
-     */
-    function startLongPressTimer(e) {
-
-        clearLongPressTimer();
-
-        var el = e.target;
-
-        // get delay from html attribute if it exists, otherwise default to 1500
-        var longPressDelayInMs = parseInt(getNearestAttribute(el, 'data-long-press-delay', '1500'), 10); // default 1500
-
-        // start the timer
-        timer = requestTimeout(fireLongPressEvent.bind(el, e), longPressDelayInMs);
-    }
-
-    /**
-     * method responsible for clearing a pending long press timer
-     * @param {event} e - event object
-     * @returns {void}
-     */
-    function clearLongPressTimer(e) {
-        clearRequestTimeout(timer);
-        timer = null;
-    }
-
-    /**
-    * Cancels the current event
-    * @param {object} e - browser event object
-    * @returns {void}
-    */
-    function cancelEvent(e) {
-        e.stopImmediatePropagation();
-        e.preventDefault();
-        e.stopPropagation();
-    }
-
-    /**
-     * Starts the timer on mouse down and logs current position
-     * @param {object} e - browser event object
-     * @returns {void}
-     */
-    function mouseDownHandler(e) {
-        startX = e.clientX;
-        startY = e.clientY;
-        startLongPressTimer(e);
-    }
-
-    /**
-     * If the mouse moves n pixels during long-press, cancel the timer
-     * @param {object} e - browser event object
-     * @returns {void}
-     */
-    function mouseMoveHandler(e) {
-
-        // calculate total number of pixels the pointer has moved
-        var diffX = Math.abs(startX - e.clientX);
-        var diffY = Math.abs(startY - e.clientY);
-
-        // if pointer has moved more than allowed, cancel the long-press timer and therefore the event
-        if (diffX >= maxDiffX || diffY >= maxDiffY) {
-            clearLongPressTimer();
-        }
-    }
-
-    /**
-     * Gets attribute off HTML element or nearest parent
-     * @param {object} el - HTML element to retrieve attribute from
-     * @param {string} attributeName - name of the attribute
-     * @param {any} defaultValue - default value to return if no match found
-     * @returns {any} attribute value or defaultValue
-     */
-    function getNearestAttribute(el, attributeName, defaultValue) {
-
-        // walk up the dom tree looking for data-action and data-trigger
-        while (el && el !== document.documentElement) {
-
-            var attributeValue = el.getAttribute(attributeName);
-
-            if (attributeValue) {
-                return attributeValue;
-            }
-
-            el = el.parentNode;
-        }
-
-        return defaultValue;
-    }
-
-    // hook events that clear a pending long press event
-    document.addEventListener(mouseUp, clearLongPressTimer, true);
-    document.addEventListener(mouseLeave, clearLongPressTimer, true);
-    document.addEventListener(mouseMove, mouseMoveHandler, true);
-    document.addEventListener('wheel', clearLongPressTimer, true);
-    document.addEventListener('scroll', clearLongPressTimer, true);
-    document.addEventListener('contextmenu', clearLongPressTimer, true);
-
-    // hook events that can trigger a long press event
-    document.addEventListener(mouseDown, mouseDownHandler, true); // <- start
-
-}(window, document));
-
 const postTooltipCss = "post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:calc(224px - var(--post-core-dimension-8));min-height:var(--post-core-dimension-16)}";
 const PostTooltipStyle0 = postTooltipCss;
 
+if (breakpoints.IS_BROWSER) {
+    (async () => {
+        await Promise.resolve().then(function () { return require('./long-press-event-6e62d113.js'); });
+    })();
+}
 const OPEN_DELAY = 650; // matches HTML title delay
 /**
  * @slot default - Slot for the content of the tooltip.
@@ -4801,7 +4542,8 @@ let tooltipTimeout = null;
  * @returns
  */
 const globalInterestHandler = (e) => {
-    const targetElement = e.target.closest(tooltipTargetAttributeSelector);
+    const eventTarget = e.target;
+    const targetElement = eventTarget.closest(tooltipTargetAttributeSelector);
     globalCurrentTarget = targetElement;
     if (!targetElement || !('getAttribute' in targetElement)) {
         clearTimeout(tooltipTimeout);
@@ -4813,7 +4555,7 @@ const globalInterestHandler = (e) => {
     const tooltip = document.getElementById(tooltipTarget);
     // Determine if the tooltip was triggered by a focus event
     const triggeredByFocus = e.type === 'focusin';
-    void tooltip?.show(targetElement, triggeredByFocus);
+    tooltip?.show(targetElement, triggeredByFocus);
     if (hideTooltipTimeout) {
         window.clearTimeout(hideTooltipTimeout);
         hideTooltipTimeout = null;
@@ -4846,35 +4588,18 @@ const globalHideTooltip = (tooltip) => {
         hideTooltipTimeout = null;
     }, 42);
 };
-/**
- * Patch some accessibility features that are hard to remember or understand
- * @param {HTMLElement} trigger
- */
-const patchAccessibilityFeatures = (trigger) => {
-    const describedBy = trigger.getAttribute('aria-describedby');
-    const id = trigger.getAttribute(tooltipTargetAttribute);
-    // Add tooltip to aria-describedby
-    if (!describedBy?.includes(id)) {
-        const newDescribedBy = describedBy ? `${describedBy} ${id}` : id;
-        trigger.setAttribute('aria-describedby', newDescribedBy);
-    }
-    // Make element focusable
-    if (!isFocusable(trigger)) {
-        trigger.setAttribute('tabindex', '0');
-    }
-};
-// Initialize a mutation observer for patching accessibility features
-const triggerObserver = attributeObserver.getAttributeObserver(tooltipTargetAttribute, patchAccessibilityFeatures);
 const PostTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.wasOpenedByFocus = false;
+        // Initialize a mutation observer for patching accessibility features
+        this.triggerObserver = breakpoints.IS_BROWSER
+            ? attributeObserver.getAttributeObserver(tooltipTargetAttribute, this.patchAccessibilityFeatures)
+            : null;
         this.placement = 'top';
         this.arrow = true;
         this.delayed = false;
     }
-    popoverRef;
-    wasOpenedByFocus = false;
-    get host() { return index.getElement(this); }
     validateDelayed() {
         index$1.checkEmptyOrType(this, 'delayed', 'boolean');
     }
@@ -4901,9 +4626,9 @@ const PostTooltip = class {
             document.addEventListener('focusout', globalInterestLostHandler);
             document.addEventListener('long-press', globalInterestHandler);
             // Initially run the accessibility patcher on all triggers
-            document.querySelectorAll('[data-tooltip-target]').forEach(patchAccessibilityFeatures);
+            document.querySelectorAll('[data-tooltip-target]').forEach(this.patchAccessibilityFeatures);
             // Start watching for future triggers
-            triggerObserver.observe(document.body, {
+            this.triggerObserver?.observe(document.body, {
                 subtree: true,
                 childList: true,
                 attributeFilter: [tooltipTargetAttribute],
@@ -4924,7 +4649,7 @@ const PostTooltip = class {
             document.removeEventListener('focusin', globalInterestHandler);
             document.removeEventListener('focusout', globalInterestLostHandler);
             document.removeEventListener('long-press', globalInterestHandler);
-            triggerObserver.disconnect();
+            this.triggerObserver?.disconnect();
         }
     }
     /**
@@ -4988,10 +4713,28 @@ const PostTooltip = class {
         globalHideTooltip(this);
         this.host.style.pointerEvents = 'auto';
     }
+    /**
+     * Patch some accessibility features that are hard to remember or understand
+     * @param {HTMLElement} trigger
+     */
+    patchAccessibilityFeatures(trigger) {
+        const describedBy = trigger.getAttribute('aria-describedby');
+        const id = trigger.getAttribute(tooltipTargetAttribute);
+        // Add tooltip to aria-describedby
+        if (!describedBy?.includes(id)) {
+            const newDescribedBy = describedBy ? `${describedBy} ${id}` : id;
+            trigger.setAttribute('aria-describedby', newDescribedBy);
+        }
+        // Make element focusable
+        if (!isFocusable(trigger)) {
+            trigger.setAttribute('tabindex', '0');
+        }
+    }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (index.h(index.Host, { key: '89b0e64fd5fde4c21d9c1eb624facff38b287e4a', "data-version": _package.version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, index.h("post-popovercontainer", { key: '8006874c12a2eebe39682a09db677e8b315dd6bb', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: 'cf3bd12703885fe886f1703038437b59a4d79fd3' }))));
+        return (index.h(index.Host, { key: 'f6e535d23220c3b53840913882b7302d54cc6a89', "data-version": _package.version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, index.h("post-popovercontainer", { key: '25aaaee555958fdacd3aa204b90d09ab14289b51', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '81ae53f9ab5189253a256861b6df5a2cd31fe678' }))));
     }
+    get host() { return index.getElement(this); }
     static get watchers() { return {
         "delayed": ["validateDelayed"]
     }; }

package/dist/cjs/post-tooltip.cjs.entry.js

@@ -2,15 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTooltip = require('./post-tooltip-3176e280.js');
-require('./index-d6bf2c66.js');
-require('./package-3562c265.js');
-require('./attribute-observer-6d8b886b.js');
+const postTooltip = require('./post-tooltip-4d4d2ea9.js');
+require('./index-b60129c4.js');
+require('./attribute-observer-c3a805b2.js');
+require('./breakpoints-cdf1b747.js');
 require('./index-23e36ff7.js');
 require('./constants-238701d3.js');
 require('./check-one-of-75d270b5.js');
 require('./check-type-cdbf6d29.js');
 require('./check-url-220a286c.js');
+require('./package-3426e8f7.js');
 
 
 

package/dist/collection/animations/collapse.js

@@ -1,3 +1,4 @@
+import { IS_BROWSER } from "../utils/index";
 const collapseDuration = 350;
 const collapseEasing = 'ease';
 const collapsedKeyframe = { height: '0', overflow: 'hidden' };
@@ -7,7 +8,8 @@ const animationOptions = {
     fill: 'forwards',
 };
 export function collapse(el) {
-    const expandedKeyframe = { height: window.getComputedStyle(el).height };
+    const elHeight = IS_BROWSER ? window.getComputedStyle(el).height : `${el.scrollHeight}px`;
+    const expandedKeyframe = { height: elHeight };
     return el.animate([expandedKeyframe, collapsedKeyframe], animationOptions);
 }
 export function expand(el) {

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

@@ -8,12 +8,10 @@ import { eventGuard } from "../../utils/event-gua"; // Import eventGuard
  */
 export class PostAccordion {
     constructor() {
+        this.expandedItems = new Set();
         this.headingLevel = undefined;
         this.multiple = false;
     }
-    accordionItems;
-    expandedItems = new Set();
-    host;
     validateHeadingLevel(newValue = this.headingLevel) {
         if (!newValue)
             return;

package/dist/collection/components/post-accordion-item/post-accordion-item.js

@@ -18,8 +18,6 @@ export class PostAccordionItem {
         this.collapsed = false;
         this.headingLevel = undefined;
     }
-    collapsible;
-    host;
     validateHeadingLevel() {
         checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
     }

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

@@ -28,8 +28,6 @@ export class PostAvatar {
         this.imageAlt = '';
         this.initials = '';
     }
-    static INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
-    host;
     validateFirstname() {
         checkNonEmpty(this, 'firstname');
     }
@@ -160,7 +158,7 @@ export class PostAvatar {
                     "text": "Defines the users firstname."
                 },
                 "attribute": "firstname",
-                "reflect": false
+                "reflect": true
             },
             "lastname": {
                 "type": "string",
@@ -191,7 +189,7 @@ export class PostAvatar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the company internal userId.<div className=\"mb-1 banner banner-warning banner-sm\">Can only be used on post.ch domains!</div>"
+                    "text": "Defines the company internal userId.<div className=\"mb-4 banner banner-warning banner-sm\">Can only be used on post.ch domains!</div>"
                 },
                 "attribute": "userid",
                 "reflect": false
@@ -232,3 +230,4 @@ export class PostAvatar {
             }];
     }
 }
+PostAvatar.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';

package/dist/collection/components/post-back-to-top/post-back-to-top.js

@@ -4,17 +4,15 @@ import { version } from "../../../../package";
 import { checkType, checkNonEmpty } from "../../utils/index";
 export class PostBackToTop {
     constructor() {
+        this.handleScroll = () => {
+            this.belowFold = this.isBelowFold();
+        };
         this.label = undefined;
         this.belowFold = false;
     }
-    host;
-    translateY;
     isBelowFold() {
         return window.scrollY > window.innerHeight;
     }
-    handleScroll = () => {
-        this.belowFold = this.isBelowFold();
-    };
     /*Watch for changes in belowFold to show/hide the back to top button*/
     watchBelowFold(newValue) {
         if (newValue) {
@@ -60,8 +58,8 @@ export class PostBackToTop {
     }
     // Validate the label
     validateLabel() {
-        checkType(this, 'label', 'string');
         checkNonEmpty(this, 'label');
+        checkType(this, 'label', 'string');
     }
     // Set the initial state
     componentWillLoad() {
@@ -76,7 +74,7 @@ export class PostBackToTop {
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: '2198e7aaf2259ea49e4d1037770960e010fb33c9', "data-version": version }, h("button", { key: 'f2e5f0dc2ea445a7fdc89171c7ca3a11ff716916', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '1c749482ad6ea4be61f10973197df9b65a949b82', "aria-hidden": "true", name: "3026" }), h("span", { key: '67d90bbcbfa72b9d593e24ba75d78d55e5d78b18', class: "visually-hidden" }, this.label))));
+        return (h(Host, { key: 'c1ab6c5e7619ad829d64aea16c59a923310cf091', "data-version": version }, h("button", { key: '99e10e4d16c8d82521b001c3b3d902d8ba47ee92', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '5a6a1b472b45fcc466127ece7091617e4700ee16', "aria-hidden": "true", name: "3026" }), h("span", { key: 'c8502e4822347d48034f6a936203e3314c7ae91e', class: "visually-hidden" }, this.label))));
     }
     static get is() { return "post-back-to-top"; }
     static get encapsulation() { return "shadow"; }
@@ -107,7 +105,7 @@ export class PostBackToTop {
                     "text": "The label of the back-to-top button, intended solely for accessibility purposes.\nThis label is always hidden from view."
                 },
                 "attribute": "label",
-                "reflect": false
+                "reflect": true
             }
         };
     }

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

@@ -21,7 +21,6 @@ export class PostBanner {
         this.icon = undefined;
         this.type = 'neutral';
     }
-    host;
     validateDismissible() {
         checkType(this, 'dismissible', 'boolean');
         setTimeout(() => this.validateDismissLabel());
@@ -37,11 +36,6 @@ export class PostBanner {
     validateType() {
         checkEmptyOrOneOf(this, 'type', BANNER_TYPES);
     }
-    /**
-     * An event emitted when the banner element is dismissed, after the transition.
-     * It has no payload and only relevant for dismissible banners.
-     */
-    postDismissed;
     componentDidLoad() {
         this.validateDismissible();
         this.validateIcon();

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

@@ -3,15 +3,28 @@ import { version } from "../../../../package";
 import { checkUrl, debounce } from "../../utils/index";
 export class PostBreadcrumb {
     constructor() {
+        // Waits for breadcrumb navigation reference to be available
+        this.waitForBreadcrumbRef = debounce(() => {
+            if (this.breadcrumbNavRef?.clientWidth > 0) {
+                this.checkConcatenation();
+            }
+            else {
+                this.waitForBreadcrumbRef();
+            }
+        }, 50);
+        // Handles resizing to check concatenation
+        this.handleResize = () => {
+            if (window.innerWidth === this.lastWindowWidth)
+                return;
+            this.lastWindowWidth = window.innerWidth;
+            this.checkConcatenation();
+        };
         this.homeUrl = undefined;
         this.homeText = 'Home';
         this.breadcrumbItems = [];
         this.isConcatenated = undefined;
         this.lastWindowWidth = undefined;
     }
-    host;
-    breadcrumbNavRef;
-    lastItem;
     validateUrl() {
         checkUrl(this, 'homeUrl');
     }
@@ -25,15 +38,6 @@ export class PostBreadcrumb {
     disconnectedCallback() {
         window.removeEventListener('resize', this.handleResize);
     }
-    // Waits for breadcrumb navigation reference to be available
-    waitForBreadcrumbRef = debounce(() => {
-        if (this.breadcrumbNavRef?.clientWidth > 0) {
-            this.checkConcatenation();
-        }
-        else {
-            this.waitForBreadcrumbRef();
-        }
-    }, 50);
     // Updates breadcrumb items and sets the last item
     updateBreadcrumbItems() {
         this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map(item => ({
@@ -42,13 +46,6 @@ export class PostBreadcrumb {
         }));
         this.lastItem = this.breadcrumbItems[this.breadcrumbItems.length - 1];
     }
-    // Handles resizing to check concatenation
-    handleResize = () => {
-        if (window.innerWidth === this.lastWindowWidth)
-            return;
-        this.lastWindowWidth = window.innerWidth;
-        this.checkConcatenation();
-    };
     // Determines parent width for concatenation logic
     getParentWidth() {
         let parent = this.host.parentNode;

package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.js

@@ -9,8 +9,6 @@ export class PostBreadcrumbItem {
         this.url = undefined;
         this.fullUrl = undefined;
     }
-    host;
-    validUrl;
     validateUrl() {
         try {
             this.validUrl = this.constructUrl(this.url);