@getflip/swirl-components 0.13.0 → 0.14.0

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

@@ -1,5 +1,5 @@
 import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
-import { Component, Element, Event, h, Host, Listen, Method, Prop, State, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import classnames from "classnames";
 import { isMobileViewport, querySelectorAllDeep } from "../../utils";
@@ -8,12 +8,6 @@ import { isMobileViewport, querySelectorAllDeep } from "../../utils";
  */
 export class SwirlPopover {
   constructor() {
-    this.animation = "scale-in-xy";
-    this.enableFlip = true;
-    this.offset = 8;
-    this.placement = "bottom-start";
-    this.active = false;
-    this.closing = false;
     this.toggle = (event) => {
       event.stopPropagation();
       if (this.active) {
@@ -53,6 +47,17 @@ export class SwirlPopover {
     this.onCloseButtonClick = () => {
       this.close();
     };
+    this.animation = "scale-in-xy";
+    this.enableFlip = true;
+    this.label = undefined;
+    this.offset = 8;
+    this.placement = "bottom-start";
+    this.popoverId = undefined;
+    this.trigger = undefined;
+    this.useContainerWidth = undefined;
+    this.active = false;
+    this.closing = false;
+    this.position = undefined;
   }
   componentDidLoad() {
     this.connectTrigger();
@@ -207,264 +212,273 @@ export class SwirlPopover {
       "popover--active": this.active,
       "popover--inactive": !this.active,
     });
-    return (h(Host, { id: this.popoverId },
-      h("div", { class: className, onKeyDown: this.onKeydown },
-        h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
-            top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
-            left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
-          }, tabindex: "-1" },
-          h("span", { class: "popover__handle" }),
-          h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) },
-            h("slot", null))),
-        this.active && (h("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+    return (h(Host, { id: this.popoverId }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+        top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
+        left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
+      }, tabindex: "-1" }, h("span", { class: "popover__handle" }), h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, h("slot", null))), this.active && (h("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
   }
   static get is() { return "swirl-popover"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["swirl-popover.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["swirl-popover.css"]
-  }; }
-  static get properties() { return {
-    "animation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "SwirlPopoverAnimation",
-        "resolved": "\"scale-in-xy\" | \"scale-in-y\"",
-        "references": {
-          "SwirlPopoverAnimation": {
-            "location": "local"
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-popover.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-popover.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "animation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlPopoverAnimation",
+          "resolved": "\"scale-in-xy\" | \"scale-in-y\"",
+          "references": {
+            "SwirlPopoverAnimation": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "animation",
-      "reflect": false,
-      "defaultValue": "\"scale-in-xy\""
-    },
-    "enableFlip": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "enable-flip",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "animation",
+        "reflect": false,
+        "defaultValue": "\"scale-in-xy\""
       },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "enableFlip": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "enable-flip",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "label",
-      "reflect": false
-    },
-    "offset": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number | number[]",
-        "resolved": "number | number[]",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "offset": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number | number[]",
+          "resolved": "number | number[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "offset",
+        "reflect": false,
+        "defaultValue": "8"
       },
-      "attribute": "offset",
-      "reflect": false,
-      "defaultValue": "8"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Placement",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {
-          "Placement": {
-            "location": "import",
-            "path": "@floating-ui/dom"
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "\"bottom-start\""
-    },
-    "popoverId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "popover-id",
-      "reflect": false
-    },
-    "trigger": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "trigger",
-      "reflect": false
-    },
-    "useContainerWidth": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean | string",
-        "resolved": "boolean | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "use-container-width",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "active": {},
-    "closing": {},
-    "position": {}
-  }; }
-  static get events() { return [{
-      "method": "popoverClose",
-      "name": "popoverClose",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "\"bottom-start\""
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "popoverOpen",
-      "name": "popoverOpen",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "popoverId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popover-id",
+        "reflect": false
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "close": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "trigger": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
-        "return": "Promise<void>"
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "trigger",
+        "reflect": false
       },
-      "docs": {
-        "text": "Close the popover.",
-        "tags": [{
-            "name": "returns",
-            "text": undefined
-          }]
+      "useContainerWidth": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | string",
+          "resolved": "boolean | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-container-width",
+        "reflect": false
       }
-    },
-    "open": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "active": {},
+      "closing": {},
+      "position": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "popoverClose",
+        "name": "popoverClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "popoverOpen",
+        "name": "popoverOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "close": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Close the popover.",
+          "tags": [{
+              "name": "returns",
+              "text": undefined
+            }]
+        }
       },
-      "docs": {
-        "text": "Open the popover.",
-        "tags": [{
-            "name": "returns",
-            "text": undefined
-          }]
+      "open": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Open the popover.",
+          "tags": [{
+              "name": "returns",
+              "text": undefined
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "focusin",
-      "method": "onWindowFocusIn",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "onWindowClick",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "focusin",
+        "method": "onWindowFocusIn",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "onWindowClick",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }