npm - @getflip/swirl-components - Versions diffs - 0.3.0 → 0.3.1 - Mend

@getflip/swirl-components 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/collection/components/flip-popover/flip-popover.js CHANGED Viewed

@@ -50,6 +50,9 @@ export class FlipPopover {
         strategy: "fixed",
       });
     };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
   }
   componentDidLoad() {
     this.connectTrigger();
@@ -158,7 +161,7 @@ export class FlipPopover {
           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.close })))));
+        this.active && (h("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
   }
   static get is() { return "flip-popover"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/flip-popover/flip-popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"flip-popover.js","sourceRoot":"","sources":["../../../../src/components/flip-popover/flip-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n autoUpdate,\n computePosition,\n ComputePositionReturn,\n flip,\n Placement,\n shift,\n} from \"@floating-ui/dom\";\nimport {\n Component,\n Element,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { isMobileViewport, querySelectorAllDeep } from \"../../utils\";\n\n/*\n @slot slot - The popover content.\n /\n@Component({\n shadow: true,\n styleUrl: \"flip-popover.css\",\n tag: \"flip-popover\",\n})\nexport class FlipPopover {\n @Element() el: HTMLElement;\n\n @Prop() label!: string;\n @Prop() placement?: Placement = \"bottom-start\";\n @Prop() popoverId!: string;\n @Prop() trigger!: string;\n\n @State() active = false;\n @State() closing = false;\n @State() position: ComputePositionReturn;\n\n private childMenuItems: HTMLElement[];\n private disableAutoUpdate: any;\n private contentContainer: HTMLDivElement;\n private scrollContainer: HTMLDivElement;\n private triggerEl: HTMLElement;\n\n componentDidLoad() {\n this.connectTrigger();\n this.updateChildMenuItems();\n this.updateTriggerAttributes();\n }\n\n disconnectedCallback() {\n enableBodyScroll(this.scrollContainer);\n }\n\n @Listen(\"click\", { target: \"window\" })\n onWindowClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (!this.el.contains(target)) {\n this.close();\n }\n }\n\n onFocusOut = (event: FocusEvent) => {\n if (!this.active) {\n return;\n }\n\n const target =\n (event.relatedTarget as HTMLElement) \|\| (event.target as HTMLElement);\n\n const popoverLostFocus = !this.el.contains(target);\n\n if (popoverLostFocus) {\n this.close();\n }\n };\n\n /\n Close the popover.\n * @returns\n /\n @Method()\n public async close() {\n if (this.closing) {\n return;\n }\n\n if (this.disableAutoUpdate) {\n this.disableAutoUpdate();\n }\n\n this.closing = true;\n\n setTimeout(() => {\n this.active = false;\n this.closing = false;\n this.updateTriggerAttributes();\n }, 150);\n\n this.unlockBodyScroll();\n\n this.triggerEl?.focus();\n }\n\n /\n Open the popover.\n * @returns\n */\n @Method()\n public async open() {\n this.active = true;\n\n this.updateChildMenuItems();\n this.updateTriggerAttributes();\n\n requestAnimationFrame(async () => {\n await this.reposition();\n\n if (this.childMenuItems.length > 0) {\n (this.childMenuItems[0] as HTMLElement).focus();\n } else {\n this.contentContainer.focus();\n }\n\n if (this.disableAutoUpdate) {\n this.disableAutoUpdate();\n }\n\n this.disableAutoUpdate = autoUpdate(\n this.triggerEl,\n this.contentContainer,\n this.reposition\n );\n\n this.scrollContainer.scrollTop = 0;\n\n this.lockBodyScroll();\n });\n }\n\n toggle = (event: Event) => {\n event.stopPropagation();\n\n if (this.active) {\n this.close();\n } else {\n this.open();\n }\n };\n\n private connectTrigger() {\n const triggerComponent = querySelectorAllDeep(\n document.body,\n `#${this.trigger}`\n )[0];\n\n this.triggerEl = (triggerComponent?.children[0] \|\|\n triggerComponent?.shadowRoot?.children[0] \|\|\n triggerComponent) as HTMLElement;\n\n if (!Boolean(this.triggerEl)) {\n return;\n }\n\n this.triggerEl.addEventListener(\"click\", this.toggle);\n }\n\n private onKeydown = (event: KeyboardEvent) => {\n if (event.code === \"Escape\" && this.active) {\n this.close();\n }\n };\n\n private updateTriggerAttributes() {\n if (!Boolean(this.triggerEl)) {\n return;\n }\n\n this.triggerEl.setAttribute(\"aria-controls\", this.popoverId);\n this.triggerEl.setAttribute(\"aria-expanded\", String(this.active));\n this.triggerEl.setAttribute(\"aria-haspopup\", \"dialog\");\n }\n\n private updateChildMenuItems() {\n this.childMenuItems = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n }\n\n private reposition = async () => {\n const mobile = isMobileViewport();\n\n if (!Boolean(this.triggerEl) \|\| !Boolean(this.contentContainer)) {\n return;\n }\n\n if (mobile) {\n this.position = undefined;\n return;\n }\n\n this.position = await computePosition(\n this.triggerEl,\n this.contentContainer,\n {\n middleware: [shift(), flip()],\n placement: this.placement,\n strategy: \"fixed\",\n }\n );\n };\n\n private lockBodyScroll() {\n const mobile = isMobileViewport();\n\n if (!mobile) {\n return;\n }\n\n disableBodyScroll(this.scrollContainer);\n }\n\n private unlockBodyScroll() {\n enableBodyScroll(this.scrollContainer);\n }\n\n render() {\n const className = classnames(\"popover\", {\n \"popover--closing\": this.closing,\n \"popover--active\": this.active,\n \"popover--inactive\": !this.active,\n });\n\n return (\n <Host id={this.popoverId} onFocusout={this.onFocusOut}>\n <div class={className} onKeyDown={this.onKeydown}>\n <div\n aria-hidden={!this.active ? \"true\" : \"false\"}\n aria-label={this.label}\n class=\"popover__content\"\n role=\"dialog\"\n tabindex=\"-1\"\n ref={(el) => (this.contentContainer = el)}\n style={{\n top: Boolean(this.position) ? `${this.position?.y}px` : \"\",\n left: Boolean(this.position) ? `${this.position?.x}px` : \"\",\n }}\n >\n <span class=\"popover__handle\"></span>\n <div\n class=\"popover__scroll-container\"\n ref={(el) => (this.scrollContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {this.active && (\n <div class=\"popover__backdrop\" onClick={this.close}></div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"flip-popover.js","sourceRoot":"","sources":["../../../../src/components/flip-popover/flip-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n autoUpdate,\n computePosition,\n ComputePositionReturn,\n flip,\n Placement,\n shift,\n} from \"@floating-ui/dom\";\nimport {\n Component,\n Element,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { isMobileViewport, querySelectorAllDeep } from \"../../utils\";\n\n/*\n @slot slot - The popover content.\n /\n@Component({\n shadow: true,\n styleUrl: \"flip-popover.css\",\n tag: \"flip-popover\",\n})\nexport class FlipPopover {\n @Element() el: HTMLElement;\n\n @Prop() label!: string;\n @Prop() placement?: Placement = \"bottom-start\";\n @Prop() popoverId!: string;\n @Prop() trigger!: string;\n\n @State() active = false;\n @State() closing = false;\n @State() position: ComputePositionReturn;\n\n private childMenuItems: HTMLElement[];\n private disableAutoUpdate: any;\n private contentContainer: HTMLDivElement;\n private scrollContainer: HTMLDivElement;\n private triggerEl: HTMLElement;\n\n componentDidLoad() {\n this.connectTrigger();\n this.updateChildMenuItems();\n this.updateTriggerAttributes();\n }\n\n disconnectedCallback() {\n enableBodyScroll(this.scrollContainer);\n }\n\n @Listen(\"click\", { target: \"window\" })\n onWindowClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (!this.el.contains(target)) {\n this.close();\n }\n }\n\n onFocusOut = (event: FocusEvent) => {\n if (!this.active) {\n return;\n }\n\n const target =\n (event.relatedTarget as HTMLElement) \|\| (event.target as HTMLElement);\n\n const popoverLostFocus = !this.el.contains(target);\n\n if (popoverLostFocus) {\n this.close();\n }\n };\n\n /\n Close the popover.\n * @returns\n /\n @Method()\n public async close() {\n if (this.closing) {\n return;\n }\n\n if (this.disableAutoUpdate) {\n this.disableAutoUpdate();\n }\n\n this.closing = true;\n\n setTimeout(() => {\n this.active = false;\n this.closing = false;\n this.updateTriggerAttributes();\n }, 150);\n\n this.unlockBodyScroll();\n\n this.triggerEl?.focus();\n }\n\n /\n Open the popover.\n * @returns\n */\n @Method()\n public async open() {\n this.active = true;\n\n this.updateChildMenuItems();\n this.updateTriggerAttributes();\n\n requestAnimationFrame(async () => {\n await this.reposition();\n\n if (this.childMenuItems.length > 0) {\n (this.childMenuItems[0] as HTMLElement).focus();\n } else {\n this.contentContainer.focus();\n }\n\n if (this.disableAutoUpdate) {\n this.disableAutoUpdate();\n }\n\n this.disableAutoUpdate = autoUpdate(\n this.triggerEl,\n this.contentContainer,\n this.reposition\n );\n\n this.scrollContainer.scrollTop = 0;\n\n this.lockBodyScroll();\n });\n }\n\n toggle = (event: Event) => {\n event.stopPropagation();\n\n if (this.active) {\n this.close();\n } else {\n this.open();\n }\n };\n\n private connectTrigger() {\n const triggerComponent = querySelectorAllDeep(\n document.body,\n `#${this.trigger}`\n )[0];\n\n this.triggerEl = (triggerComponent?.children[0] \|\|\n triggerComponent?.shadowRoot?.children[0] \|\|\n triggerComponent) as HTMLElement;\n\n if (!Boolean(this.triggerEl)) {\n return;\n }\n\n this.triggerEl.addEventListener(\"click\", this.toggle);\n }\n\n private onKeydown = (event: KeyboardEvent) => {\n if (event.code === \"Escape\" && this.active) {\n this.close();\n }\n };\n\n private updateTriggerAttributes() {\n if (!Boolean(this.triggerEl)) {\n return;\n }\n\n this.triggerEl.setAttribute(\"aria-controls\", this.popoverId);\n this.triggerEl.setAttribute(\"aria-expanded\", String(this.active));\n this.triggerEl.setAttribute(\"aria-haspopup\", \"dialog\");\n }\n\n private updateChildMenuItems() {\n this.childMenuItems = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n }\n\n private reposition = async () => {\n const mobile = isMobileViewport();\n\n if (!Boolean(this.triggerEl) \|\| !Boolean(this.contentContainer)) {\n return;\n }\n\n if (mobile) {\n this.position = undefined;\n return;\n }\n\n this.position = await computePosition(\n this.triggerEl,\n this.contentContainer,\n {\n middleware: [shift(), flip()],\n placement: this.placement,\n strategy: \"fixed\",\n }\n );\n };\n\n private lockBodyScroll() {\n const mobile = isMobileViewport();\n\n if (!mobile) {\n return;\n }\n\n disableBodyScroll(this.scrollContainer);\n }\n\n private unlockBodyScroll() {\n enableBodyScroll(this.scrollContainer);\n }\n\n private onCloseButtonClick = () => {\n this.close();\n };\n\n render() {\n const className = classnames(\"popover\", {\n \"popover--closing\": this.closing,\n \"popover--active\": this.active,\n \"popover--inactive\": !this.active,\n });\n\n return (\n <Host id={this.popoverId} onFocusout={this.onFocusOut}>\n <div class={className} onKeyDown={this.onKeydown}>\n <div\n aria-hidden={!this.active ? \"true\" : \"false\"}\n aria-label={this.label}\n class=\"popover__content\"\n role=\"dialog\"\n tabindex=\"-1\"\n ref={(el) => (this.contentContainer = el)}\n style={{\n top: Boolean(this.position) ? `${this.position?.y}px` : \"\",\n left: Boolean(this.position) ? `${this.position?.x}px` : \"\",\n }}\n >\n <span class=\"popover__handle\"></span>\n <div\n class=\"popover__scroll-container\"\n ref={(el) => (this.scrollContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {this.active && (\n <div\n class=\"popover__backdrop\"\n onClick={this.onCloseButtonClick}\n ></div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/components/flip-popover2.js CHANGED Viewed

@@ -53,6 +53,9 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         strategy: "fixed",
       });
     };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
   }
   componentDidLoad() {
     this.connectTrigger();
@@ -155,7 +158,7 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, { id: this.popoverId, onFocusout: this.onFocusOut }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", tabindex: "-1", 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` : "",
-      } }, 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.close })))));
+      } }, 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 })))));
   }
   get el() { return this; }
   static get style() { return flipPopoverCss; }

package/dist/components/flip-popover2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-popover2.js","mappings":"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","names":[],"sources":["./src/components/flip-popover/flip-popover.css?tag=flip-popover&encapsulation=shadow","./src/components/flip-popover/flip-popover.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n position: relative;\n z-index: var(--s-z-40);\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.popover--active:not(.popover--closing) {\n & .popover__backdrop {\n animation: 0.15s popover-fade-in;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n\n & .popover__content {\n animation: 0.15s popover-slide-in;\n\n @media (--from-tablet) {\n transform-origin: top left;\n animation: 0.15s popover-fade-scale-in;\n }\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n}\n\n.popover--closing {\n & .popover__backdrop {\n animation: 0.15s popover-fade-out;\n animation-fill-mode: forwards;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n\n & .popover__content {\n animation: 0.15s popover-slide-out;\n animation-fill-mode: forwards;\n\n @media (--from-tablet) {\n animation: 0.15s popover-fade-out;\n }\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n}\n\n.popover--inactive {\n & .popover__content {\n display: none;\n }\n}\n\n.popover__backdrop {\n position: fixed;\n z-index: 0;\n background-color: rgba(0, 0, 0, 0.2);\n animation: 0.15s popover-backdrop-fade-in;\n inset: 0;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n\n @media (--from-tablet) {\n display: none;\n }\n}\n\n.popover__content {\n position: fixed;\n z-index: 2;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: hidden;\n border-top-left-radius: var(--s-border-radius-xl);\n border-top-right-radius: var(--s-border-radius-xl);\n background-color: var(--s-surface-overlay-default);\n\n @media (--from-tablet) {\n right: unset;\n bottom: unset;\n left: unset;\n max-width: 22.5rem;\n border-radius: var(--s-border-radius-xl);\n animation: none;\n box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14);\n }\n}\n\n.popover__scroll-container {\n overflow-x: hidden;\n overflow-y: auto;\n width: 100%;\n max-height: 90vh;\n padding-top: var(--s-space-24);\n padding-bottom: var(--s-space-24);\n overscroll-behavior: contain;\n\n @media (--from-tablet) {\n max-height: 22rem;\n padding-top: var(--s-space-8);\n padding-bottom: var(--s-space-8);\n }\n}\n\n.popover__handle {\n position: absolute;\n top: var(--s-space-8);\n left: 50%;\n width: 2.5rem;\n height: 0.375rem;\n border-radius: 0.1875rem;\n background-color: var(--s-border-default);\n transform: translatex(-50%);\n\n @media (--from-tablet) {\n display: none;\n }\n}\n\n@keyframes popover-slide-in {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes popover-slide-out {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n}\n\n@keyframes popover-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes popover-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n@keyframes popover-fade-scale-in {\n from {\n transform: scale(0);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n","import {\n autoUpdate,\n computePosition,\n ComputePositionReturn,\n flip,\n Placement,\n shift,\n} from \"@floating-ui/dom\";\nimport {\n Component,\n Element,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { isMobileViewport, querySelectorAllDeep } from \"../../utils\";\n\n/*\n @slot slot - The popover content.\n /\n@Component({\n shadow: true,\n styleUrl: \"flip-popover.css\",\n tag: \"flip-popover\",\n})\nexport class FlipPopover {\n @Element() el: HTMLElement;\n\n @Prop() label!: string;\n @Prop() placement?: Placement = \"bottom-start\";\n @Prop() popoverId!: string;\n @Prop() trigger!: string;\n\n @State() active = false;\n @State() closing = false;\n @State() position: ComputePositionReturn;\n\n private childMenuItems: HTMLElement[];\n private disableAutoUpdate: any;\n private contentContainer: HTMLDivElement;\n private scrollContainer: HTMLDivElement;\n private triggerEl: HTMLElement;\n\n componentDidLoad() {\n this.connectTrigger();\n this.updateChildMenuItems();\n this.updateTriggerAttributes();\n }\n\n disconnectedCallback() {\n enableBodyScroll(this.scrollContainer);\n }\n\n @Listen(\"click\", { target: \"window\" })\n onWindowClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (!this.el.contains(target)) {\n this.close();\n }\n }\n\n onFocusOut = (event: FocusEvent) => {\n if (!this.active) {\n return;\n }\n\n const target =\n (event.relatedTarget as HTMLElement) \|\| (event.target as HTMLElement);\n\n const popoverLostFocus = !this.el.contains(target);\n\n if (popoverLostFocus) {\n this.close();\n }\n };\n\n /\n Close the popover.\n * @returns\n /\n @Method()\n public async close() {\n if (this.closing) {\n return;\n }\n\n if (this.disableAutoUpdate) {\n this.disableAutoUpdate();\n }\n\n this.closing = true;\n\n setTimeout(() => {\n this.active = false;\n this.closing = false;\n this.updateTriggerAttributes();\n }, 150);\n\n this.unlockBodyScroll();\n\n this.triggerEl?.focus();\n }\n\n /\n Open the popover.\n * @returns\n */\n @Method()\n public async open() {\n this.active = true;\n\n this.updateChildMenuItems();\n this.updateTriggerAttributes();\n\n requestAnimationFrame(async () => {\n await this.reposition();\n\n if (this.childMenuItems.length > 0) {\n (this.childMenuItems[0] as HTMLElement).focus();\n } else {\n this.contentContainer.focus();\n }\n\n if (this.disableAutoUpdate) {\n this.disableAutoUpdate();\n }\n\n this.disableAutoUpdate = autoUpdate(\n this.triggerEl,\n this.contentContainer,\n this.reposition\n );\n\n this.scrollContainer.scrollTop = 0;\n\n this.lockBodyScroll();\n });\n }\n\n toggle = (event: Event) => {\n event.stopPropagation();\n\n if (this.active) {\n this.close();\n } else {\n this.open();\n }\n };\n\n private connectTrigger() {\n const triggerComponent = querySelectorAllDeep(\n document.body,\n `#${this.trigger}`\n )[0];\n\n this.triggerEl = (triggerComponent?.children[0] \|\|\n triggerComponent?.shadowRoot?.children[0] \|\|\n triggerComponent) as HTMLElement;\n\n if (!Boolean(this.triggerEl)) {\n return;\n }\n\n this.triggerEl.addEventListener(\"click\", this.toggle);\n }\n\n private onKeydown = (event: KeyboardEvent) => {\n if (event.code === \"Escape\" && this.active) {\n this.close();\n }\n };\n\n private updateTriggerAttributes() {\n if (!Boolean(this.triggerEl)) {\n return;\n }\n\n this.triggerEl.setAttribute(\"aria-controls\", this.popoverId);\n this.triggerEl.setAttribute(\"aria-expanded\", String(this.active));\n this.triggerEl.setAttribute(\"aria-haspopup\", \"dialog\");\n }\n\n private updateChildMenuItems() {\n this.childMenuItems = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n }\n\n private reposition = async () => {\n const mobile = isMobileViewport();\n\n if (!Boolean(this.triggerEl) \|\| !Boolean(this.contentContainer)) {\n return;\n }\n\n if (mobile) {\n this.position = undefined;\n return;\n }\n\n this.position = await computePosition(\n this.triggerEl,\n this.contentContainer,\n {\n middleware: [shift(), flip()],\n placement: this.placement,\n strategy: \"fixed\",\n }\n );\n };\n\n private lockBodyScroll() {\n const mobile = isMobileViewport();\n\n if (!mobile) {\n return;\n }\n\n disableBodyScroll(this.scrollContainer);\n }\n\n private unlockBodyScroll() {\n enableBodyScroll(this.scrollContainer);\n }\n\n render() {\n const className = classnames(\"popover\", {\n \"popover--closing\": this.closing,\n \"popover--active\": this.active,\n \"popover--inactive\": !this.active,\n });\n\n return (\n <Host id={this.popoverId} onFocusout={this.onFocusOut}>\n <div class={className} onKeyDown={this.onKeydown}>\n <div\n aria-hidden={!this.active ? \"true\" : \"false\"}\n aria-label={this.label}\n class=\"popover__content\"\n role=\"dialog\"\n tabindex=\"-1\"\n ref={(el) => (this.contentContainer = el)}\n style={{\n top: Boolean(this.position) ? `${this.position?.y}px` : \"\",\n left: Boolean(this.position) ? `${this.position?.x}px` : \"\",\n }}\n >\n <span class=\"popover__handle\"></span>\n <div\n class=\"popover__scroll-container\"\n ref={(el) => (this.scrollContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {this.active && (\n <div class=\"popover__backdrop\" onClick={this.close}></div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"flip-popover2.js","mappings":"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","names":[],"sources":["./src/components/flip-popover/flip-popover.css?tag=flip-popover&encapsulation=shadow","./src/components/flip-popover/flip-popover.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n position: relative;\n z-index: var(--s-z-40);\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.popover--active:not(.popover--closing) {\n & .popover__backdrop {\n animation: 0.15s popover-fade-in;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n\n & .popover__content {\n animation: 0.15s popover-slide-in;\n\n @media (--from-tablet) {\n transform-origin: top left;\n animation: 0.15s popover-fade-scale-in;\n }\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n}\n\n.popover--closing {\n & .popover__backdrop {\n animation: 0.15s popover-fade-out;\n animation-fill-mode: forwards;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n\n & .popover__content {\n animation: 0.15s popover-slide-out;\n animation-fill-mode: forwards;\n\n @media (--from-tablet) {\n animation: 0.15s popover-fade-out;\n }\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n}\n\n.popover--inactive {\n & .popover__content {\n display: none;\n }\n}\n\n.popover__backdrop {\n position: fixed;\n z-index: 0;\n background-color: rgba(0, 0, 0, 0.2);\n animation: 0.15s popover-backdrop-fade-in;\n inset: 0;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n\n @media (--from-tablet) {\n display: none;\n }\n}\n\n.popover__content {\n position: fixed;\n z-index: 2;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: hidden;\n border-top-left-radius: var(--s-border-radius-xl);\n border-top-right-radius: var(--s-border-radius-xl);\n background-color: var(--s-surface-overlay-default);\n\n @media (--from-tablet) {\n right: unset;\n bottom: unset;\n left: unset;\n max-width: 22.5rem;\n border-radius: var(--s-border-radius-xl);\n animation: none;\n box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14);\n }\n}\n\n.popover__scroll-container {\n overflow-x: hidden;\n overflow-y: auto;\n width: 100%;\n max-height: 90vh;\n padding-top: var(--s-space-24);\n padding-bottom: var(--s-space-24);\n overscroll-behavior: contain;\n\n @media (--from-tablet) {\n max-height: 22rem;\n padding-top: var(--s-space-8);\n padding-bottom: var(--s-space-8);\n }\n}\n\n.popover__handle {\n position: absolute;\n top: var(--s-space-8);\n left: 50%;\n width: 2.5rem;\n height: 0.375rem;\n border-radius: 0.1875rem;\n background-color: var(--s-border-default);\n transform: translatex(-50%);\n\n @media (--from-tablet) {\n display: none;\n }\n}\n\n@keyframes popover-slide-in {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes popover-slide-out {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n}\n\n@keyframes popover-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes popover-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n@keyframes popover-fade-scale-in {\n from {\n transform: scale(0);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n","import {\n autoUpdate,\n computePosition,\n ComputePositionReturn,\n flip,\n Placement,\n shift,\n} from \"@floating-ui/dom\";\nimport {\n Component,\n Element,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { isMobileViewport, querySelectorAllDeep } from \"../../utils\";\n\n/*\n @slot slot - The popover content.\n /\n@Component({\n shadow: true,\n styleUrl: \"flip-popover.css\",\n tag: \"flip-popover\",\n})\nexport class FlipPopover {\n @Element() el: HTMLElement;\n\n @Prop() label!: string;\n @Prop() placement?: Placement = \"bottom-start\";\n @Prop() popoverId!: string;\n @Prop() trigger!: string;\n\n @State() active = false;\n @State() closing = false;\n @State() position: ComputePositionReturn;\n\n private childMenuItems: HTMLElement[];\n private disableAutoUpdate: any;\n private contentContainer: HTMLDivElement;\n private scrollContainer: HTMLDivElement;\n private triggerEl: HTMLElement;\n\n componentDidLoad() {\n this.connectTrigger();\n this.updateChildMenuItems();\n this.updateTriggerAttributes();\n }\n\n disconnectedCallback() {\n enableBodyScroll(this.scrollContainer);\n }\n\n @Listen(\"click\", { target: \"window\" })\n onWindowClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (!this.el.contains(target)) {\n this.close();\n }\n }\n\n onFocusOut = (event: FocusEvent) => {\n if (!this.active) {\n return;\n }\n\n const target =\n (event.relatedTarget as HTMLElement) \|\| (event.target as HTMLElement);\n\n const popoverLostFocus = !this.el.contains(target);\n\n if (popoverLostFocus) {\n this.close();\n }\n };\n\n /\n Close the popover.\n * @returns\n /\n @Method()\n public async close() {\n if (this.closing) {\n return;\n }\n\n if (this.disableAutoUpdate) {\n this.disableAutoUpdate();\n }\n\n this.closing = true;\n\n setTimeout(() => {\n this.active = false;\n this.closing = false;\n this.updateTriggerAttributes();\n }, 150);\n\n this.unlockBodyScroll();\n\n this.triggerEl?.focus();\n }\n\n /\n Open the popover.\n * @returns\n */\n @Method()\n public async open() {\n this.active = true;\n\n this.updateChildMenuItems();\n this.updateTriggerAttributes();\n\n requestAnimationFrame(async () => {\n await this.reposition();\n\n if (this.childMenuItems.length > 0) {\n (this.childMenuItems[0] as HTMLElement).focus();\n } else {\n this.contentContainer.focus();\n }\n\n if (this.disableAutoUpdate) {\n this.disableAutoUpdate();\n }\n\n this.disableAutoUpdate = autoUpdate(\n this.triggerEl,\n this.contentContainer,\n this.reposition\n );\n\n this.scrollContainer.scrollTop = 0;\n\n this.lockBodyScroll();\n });\n }\n\n toggle = (event: Event) => {\n event.stopPropagation();\n\n if (this.active) {\n this.close();\n } else {\n this.open();\n }\n };\n\n private connectTrigger() {\n const triggerComponent = querySelectorAllDeep(\n document.body,\n `#${this.trigger}`\n )[0];\n\n this.triggerEl = (triggerComponent?.children[0] \|\|\n triggerComponent?.shadowRoot?.children[0] \|\|\n triggerComponent) as HTMLElement;\n\n if (!Boolean(this.triggerEl)) {\n return;\n }\n\n this.triggerEl.addEventListener(\"click\", this.toggle);\n }\n\n private onKeydown = (event: KeyboardEvent) => {\n if (event.code === \"Escape\" && this.active) {\n this.close();\n }\n };\n\n private updateTriggerAttributes() {\n if (!Boolean(this.triggerEl)) {\n return;\n }\n\n this.triggerEl.setAttribute(\"aria-controls\", this.popoverId);\n this.triggerEl.setAttribute(\"aria-expanded\", String(this.active));\n this.triggerEl.setAttribute(\"aria-haspopup\", \"dialog\");\n }\n\n private updateChildMenuItems() {\n this.childMenuItems = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n }\n\n private reposition = async () => {\n const mobile = isMobileViewport();\n\n if (!Boolean(this.triggerEl) \|\| !Boolean(this.contentContainer)) {\n return;\n }\n\n if (mobile) {\n this.position = undefined;\n return;\n }\n\n this.position = await computePosition(\n this.triggerEl,\n this.contentContainer,\n {\n middleware: [shift(), flip()],\n placement: this.placement,\n strategy: \"fixed\",\n }\n );\n };\n\n private lockBodyScroll() {\n const mobile = isMobileViewport();\n\n if (!mobile) {\n return;\n }\n\n disableBodyScroll(this.scrollContainer);\n }\n\n private unlockBodyScroll() {\n enableBodyScroll(this.scrollContainer);\n }\n\n private onCloseButtonClick = () => {\n this.close();\n };\n\n render() {\n const className = classnames(\"popover\", {\n \"popover--closing\": this.closing,\n \"popover--active\": this.active,\n \"popover--inactive\": !this.active,\n });\n\n return (\n <Host id={this.popoverId} onFocusout={this.onFocusOut}>\n <div class={className} onKeyDown={this.onKeydown}>\n <div\n aria-hidden={!this.active ? \"true\" : \"false\"}\n aria-label={this.label}\n class=\"popover__content\"\n role=\"dialog\"\n tabindex=\"-1\"\n ref={(el) => (this.contentContainer = el)}\n style={{\n top: Boolean(this.position) ? `${this.position?.y}px` : \"\",\n left: Boolean(this.position) ? `${this.position?.x}px` : \"\",\n }}\n >\n <span class=\"popover__handle\"></span>\n <div\n class=\"popover__scroll-container\"\n ref={(el) => (this.scrollContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {this.active && (\n <div\n class=\"popover__backdrop\"\n onClick={this.onCloseButtonClick}\n ></div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/flip-date-picker_3.entry.js CHANGED Viewed

@@ -154,6 +154,9 @@ const FlipPopover = class {
         strategy: "fixed",
       });
     };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
   }
   componentDidLoad() {
     this.connectTrigger();
@@ -256,7 +259,7 @@ const FlipPopover = class {
     return (h(Host, { id: this.popoverId, onFocusout: this.onFocusOut }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", tabindex: "-1", 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` : "",
-      } }, 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.close })))));
+      } }, 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 })))));
   }
   get el() { return getElement(this); }
 };