@getflip/swirl-components 0.402.0 → 0.403.0

package/dist/collection/components/swirl-popover/swirl-popover.js

@@ -17,7 +17,7 @@ export class SwirlPopover {
         this.returnFocusToTrigger = true;
         this.active = false;
         this.closing = false;
-        this.toggle = (event) => {
+        this.togglePopover = (event) => {
             event.stopPropagation();
             if (this.active) {
                 this.close();
@@ -189,6 +189,17 @@ export class SwirlPopover {
     async isOpen() {
         return this.active && !this.closing;
     }
+    /**
+     * Toggles the popover.
+     */
+    async toggle(triggerEl) {
+        if (this.active) {
+            this.close();
+        }
+        else {
+            this.open(triggerEl);
+        }
+    }
     connectTrigger() {
         if (!Boolean(this.trigger)) {
             this.triggerEl = undefined;
@@ -202,7 +213,7 @@ export class SwirlPopover {
             return;
         }
         this.triggerEl.addEventListener("click", (event) => {
-            this.toggle(event);
+            this.togglePopover(event);
         });
     }
     getNativeTriggerElement() {
@@ -270,14 +281,14 @@ export class SwirlPopover {
             "popover--transparent": this.transparent,
             "popover--padded": this.padded,
         });
-        return (h(Host, { key: 'cae2c409308bf89dc66f2b89456568046aaded46', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: 'db3717521769c75c2653098cbb625224dbb2eb55', class: className, onKeyDown: this.onKeydown }, h("div", { key: '3aab5c2bb11f1beea924f3c7de4e65a1fc8eb1d7', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+        return (h(Host, { key: '20930a84eeb5cf30530117d809323e552b53f2b5', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '390101c87f025ef7eb61b880b70b0577c183e62f', class: className, onKeyDown: this.onKeydown }, h("div", { key: 'c3feb1eb33a7fc3ca59306b72fceadf6d0e89f25', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
-            }, tabindex: "-1" }, h("span", { key: '8e448d47cb436bf6480559afc079eb6bce38fe12', class: "popover__handle" }), h("div", { key: '86c8939a2de68df053efacb31bdc97707007259f', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+            }, tabindex: "-1" }, h("span", { key: '47ef833faab1dcae48d5369a9caf4a9272d8733c', class: "popover__handle" }), h("div", { key: '02c79e428646f063b18c2fff68a826e004f0c4b1', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
                 maxHeight: !mobile && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, h("slot", { key: 'a5cd47d451b4cd8874b3f76a2dcab3818d71ab1c' }))), this.active && (h("div", { key: '05fbf70a43239cca62a57ca654aa78c3914069da', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, h("slot", { key: 'c06749f1f530d2d9639849232b1ba84775c434c8' }))), this.active && (h("div", { key: '644eb0090c7244cfa3f16b26bfce5a2d04687c77', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     static get is() { return "swirl-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -731,6 +742,31 @@ export class SwirlPopover {
                             "text": "Promise<boolean>"
                         }]
                 }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "(triggerEl?: HTMLElement) => Promise<void>",
+                    "parameters": [{
+                            "name": "triggerEl",
+                            "type": "HTMLElement",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the popover.",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js

@@ -51,7 +51,7 @@ export class SwirlPopoverTrigger {
                 return;
             const popoverEl = this.getPopoverEl();
             const triggerEl = this.getTriggerEl();
-            popoverEl.open(triggerEl);
+            popoverEl.toggle(triggerEl);
             popoverEl.addEventListener("popoverOpen", () => {
                 this.updateTriggerElAriaAttributes(true);
             }, { once: true });
@@ -153,7 +153,7 @@ export class SwirlPopoverTrigger {
         return isActive;
     }
     render() {
-        return (h(Host, { key: 'd29a8367b14d3539999b84e5e853a5718f1e4b44', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '614ece098209821558723743a5ddf9b230a7b222' })));
+        return (h(Host, { key: '9d1fa62750efba0d0272daa9f2417188d5d5f48d', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'bff58df5b11475f2367f6d86c939ac36c0c0116b' })));
     }
     static get is() { return "swirl-popover-trigger"; }
     static get encapsulation() { return "scoped"; }