@swisspost/design-system-components 10.0.0-next.53 → 10.0.0-next.54

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

@@ -56,7 +56,9 @@ export class PostMegadropdown {
         if (PostMegadropdown.activeDropdown === this) {
             PostMegadropdown.activeDropdown = null;
         }
-        this.defaultSlotObserver.disconnect();
+        if (this.defaultSlotObserver) {
+            this.defaultSlotObserver.disconnect();
+        }
     }
     /**
      * Toggles the dropdown visibility based on its current state.
@@ -223,7 +225,7 @@ export class PostMegadropdown {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: '341ea7fd69a095bc0f18b0f73c3ac5247784dd33', version: version }, h("div", { key: '078435c707ec6b2e0d51f8adad5502729513af63', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'ad92234d06bccbc60a2e1a6cc63634535646c4f7', class: "megadropdown" }, h("slot", { key: 'f9779e130c7709912c12d30b554ff8f478840628', name: "megadropdown-title" }), h("slot", { key: 'e079e0381a0ce7e3ab7efd974cdf36e6938a378d', name: "megadropdown-overview-link" }), h("div", { key: '508d4e9bddb727e960aa6f2dc15515f1718aa2b9', class: "megadropdown-content" }, h("slot", { key: '442bb0b169824ed66ae5e7da9acd6bb7d759b6f5' })), h("div", { key: 'cc278c0b5680019270206fbde4ce7a83341a029a', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '9c42fa29e89f60af62ab5d04d01e1764b36ebec4', name: "back-button" })), h("div", { key: '62bcc5bcc348cb45289ded98273804ab547471ef', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '2cdf1d72f62a162bfb1596507063315430953096', name: "close-button" }))))));
+        return (h(Host, { key: 'd111d8d93a9b64018f3df88813da8f6d1c65759e', version: version }, h("div", { key: 'd7cb2b98624c9241108bc66cc11c15c0a2e7acf3', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '9f0280b6f28f19ee7f9ba4707209b64b38759927', class: "megadropdown" }, h("slot", { key: '71f2521e1ab13406dd986c18a7c52e171148b0b0', name: "megadropdown-title" }), h("slot", { key: '148de1446aade76b074e155d07b70e775fc9612c', name: "megadropdown-overview-link" }), h("div", { key: '269c1e1db66acb7c274c720a9f715d29e875ef54', class: "megadropdown-content" }, h("slot", { key: '444040337c57e64bcc57f56415c4c40513ef0a5b' })), h("div", { key: 'f97d8c578ee19b5ba7d593e5d110e3b283255087', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'dc04da3a42714e2e8742ab8ed25bcc288a236294', name: "back-button" })), h("div", { key: '354eca51a5aef76d483a30e595bedfa95792d7ce', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '28693622360c0da91f3051426be545852c5ec337', name: "close-button" }))))));
     }
     static get is() { return "post-megadropdown"; }
     static get originalStyleUrls() {

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

@@ -70,10 +70,12 @@ export class PostMenu {
             this.toggleMenu.emit(this.isVisible);
             if (this.isVisible) {
                 this.lastFocusedElement = this.root?.activeElement;
-                const menuItems = this.getSlottedItems();
-                if (menuItems.length > 0) {
-                    menuItems[0].focus();
-                }
+                requestAnimationFrame(() => {
+                    const menuItems = this.getSlottedItems();
+                    if (menuItems.length > 0) {
+                        menuItems[0].focus();
+                    }
+                });
             }
             else if (this.lastFocusedElement) {
                 this.lastFocusedElement.focus();
@@ -189,7 +191,7 @@ export class PostMenu {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: '092a180331d50cfe701ad440569e0e6bd4bcd0c8', "data-version": version }, h("post-popovercontainer", { key: '96f33df1a47d2fb1f6f862a7d7f97def5fd8b642', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '5d23d1059dd1cf68ac817acc8227129267a3c5a4', part: "menu" }, h("slot", { key: '020fbf8912393d85cd5a6fd9f65fdf264f2ba6f6', name: "header" }), h("slot", { key: '07cd9cb978ec85dd7fbbaed527520b97484e2030' })))));
+        return (h(Host, { key: 'eef3d3cdf2553c2627ddf580a95c70f00c02d388', "data-version": version }, h("post-popovercontainer", { key: '27c3341bec9d4ee98b59f70e902913f03954c32c', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'ef6c0ab8b6de380c23f6562a3d0ba34d9eaace98', part: "menu" }, h("slot", { key: 'edca1d3e9ab11d016ba18baf9f8d6aa65bb71958', name: "header" }), h("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })))));
     }
     static get is() { return "post-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,6 +34,7 @@ export class PostPopovercontainer {
          * Whether or not the popovercontainer should close when user clicks outside of it
          */
         this.manualClose = false;
+        this.currentAnimation = null;
     }
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
@@ -75,8 +76,6 @@ export class PostPopovercontainer {
         if (this.toggleTimeoutId)
             return;
         this.eventTarget = target;
-        if (this.toggleTimeoutId)
-            return;
         this.calculatePosition();
         this.host.showPopover();
     }
@@ -87,17 +86,19 @@ export class PostPopovercontainer {
         const content = this.host.querySelector('.popover-content');
         this.startAutoupdates();
         if (content) {
-            const animation = popIn(content);
-            if (animation?.playState === 'running') {
+            // Only run animation and emit related events if animation is defined
+            if (this.animation === null) {
+                // No animation case
                 this.postBeforeToggle.emit({ willOpen: true });
                 this.postBeforeShow.emit({ first: this.hasOpenedOnce });
-            }
-            animation?.finished.then(() => {
                 this.postToggle.emit({ isOpen: true });
                 this.postShow.emit({ first: this.hasOpenedOnce });
                 if (this.hasOpenedOnce)
                     this.hasOpenedOnce = false;
-            });
+            }
+            else {
+                this.runOpenAnimation(content);
+            }
         }
         if (this.safeSpace) {
             window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
@@ -113,17 +114,50 @@ export class PostPopovercontainer {
         if (this.safeSpace) {
             window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
         }
+        // Cancel any running animation
+        if (this.animation !== null && this.currentAnimation) {
+            this.currentAnimation.cancel();
+            this.currentAnimation = null;
+        }
+        this.postBeforeToggle.emit({ willOpen: false });
         this.postToggle.emit({ isOpen: false });
         this.postHide.emit();
     }
+    /**
+     * Runs the animation and emits the toggle/show/hide events in the correct timing
+     */
+    async runOpenAnimation(element) {
+        let animation;
+        try {
+            animation = popIn(element);
+            this.currentAnimation = animation;
+            if (animation.playState === 'running') {
+                this.postBeforeToggle.emit({ willOpen: true });
+                this.postBeforeShow.emit({ first: this.hasOpenedOnce });
+            }
+            await animation.finished;
+            this.postToggle.emit({ isOpen: true });
+            this.postShow.emit({ first: this.hasOpenedOnce });
+            this.hasOpenedOnce = true;
+        }
+        catch (err) {
+            console.warn('Animation failed or was interrupted:', err);
+            // Reset all states to closing
+            this.postBeforeToggle.emit({ willOpen: false });
+            this.postBeforeShow.emit({ first: this.hasOpenedOnce });
+            this.postToggle.emit({ isOpen: false });
+        }
+        finally {
+            if (this.currentAnimation === animation) {
+                this.currentAnimation = null;
+            }
+        }
+    }
     /**
      * Programmatically hide the popovercontainer
      */
     async hide() {
         if (!this.toggleTimeoutId) {
-            if (this.eventTarget && this.eventTarget instanceof HTMLElement) {
-                this.eventTarget.focus();
-            }
             this.eventTarget = null;
             this.host.hidePopover();
             this.postHide.emit();
@@ -289,9 +323,9 @@ export class PostPopovercontainer {
         }
     }
     render() {
-        return (h(Host, { key: 'cdb25a25fbd5e411e380175a8d3789cec83e2755', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: 'e99bcc4d5123b335b4b8be7044a80b2913ab6fce', class: "popover-content" }, this.arrow && (h("span", { key: '3c228829cc7e5bd83d7f1759ef163407ebcd10c5', class: "arrow", ref: el => {
+        return (h(Host, { key: 'ec57bb478a7fe7d6449ef1ed4d91db4d0835ea4e', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '2969b3c6ef9441d06b9c913f47bb64e84006dbe4', class: "popover-content" }, this.arrow && (h("span", { key: '03b8addd0bee91d9358e9554f2d507b9a349e0db', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '6a213deed5ccfec47d4dee903c7544d30a3f5748' }))));
+            } })), h("slot", { key: '2fb25dce5ea9e5f1044cde4839df61af34c8b667' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get originalStyleUrls() {
@@ -549,6 +583,10 @@ export class PostPopovercontainer {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
                         }
                     },
                     "return": "Promise<void>"

package/dist/components/package.js

@@ -1,3 +1,3 @@
-const version = "10.0.0-next.53";
+const version = "10.0.0-next.54";
 
 export { version as v };