@zanichelli/albe-web-components 18.6.2 → 18.6.3-RC
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.
- package/dist/cjs/{index-c48948bf.js → index-0d3de93e.js} +2 -2
- package/dist/cjs/{index-c48948bf.js.map → index-0d3de93e.js.map} +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-93961cb6.js → utils-3dc316f8.js} +56 -1
- package/dist/cjs/utils-3dc316f8.js.map +1 -0
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-anchor-navigation.cjs.entry.js +1 -1
- package/dist/cjs/z-anchor-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/z-app-header_12.cjs.entry.js +1 -1
- package/dist/cjs/z-book-card-deprecated.cjs.entry.js +1 -1
- package/dist/cjs/z-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/z-card.cjs.entry.js +1 -1
- package/dist/cjs/z-card.cjs.entry.js.map +1 -1
- package/dist/cjs/z-combobox.cjs.entry.js +1 -1
- package/dist/cjs/z-menu.cjs.entry.js +1 -1
- package/dist/cjs/z-myz-card-info.cjs.entry.js +1 -1
- package/dist/cjs/z-myz-list-item.cjs.entry.js +1 -1
- package/dist/cjs/z-popover.cjs.entry.js +232 -264
- package/dist/cjs/z-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/z-select.cjs.entry.js +4 -6
- package/dist/cjs/z-select.cjs.entry.js.map +1 -1
- package/dist/cjs/z-skip-to-content.cjs.entry.js +1 -1
- package/dist/cjs/z-slideshow.cjs.entry.js +1 -1
- package/dist/cjs/z-table.cjs.entry.js +2 -2
- package/dist/cjs/z-toggle-switch.cjs.entry.js +1 -1
- package/dist/cjs/z-tr.cjs.entry.js +2 -2
- package/dist/collection/components/z-anchor-navigation/index.js +1 -1
- package/dist/collection/components/z-anchor-navigation/index.js.map +1 -1
- package/dist/collection/components/z-card/styles.css +4 -0
- package/dist/collection/components/z-popover/index.js +236 -268
- package/dist/collection/components/z-popover/index.js.map +1 -1
- package/dist/collection/components/z-popover/index.stories.js +92 -45
- package/dist/collection/components/z-popover/index.stories.js.map +1 -1
- package/dist/collection/components/z-popover/styles.css +4 -14
- package/dist/collection/components/z-select/index.js +4 -6
- package/dist/collection/components/z-select/index.js.map +1 -1
- package/dist/collection/utils/utils.js +53 -0
- package/dist/collection/utils/utils.js.map +1 -1
- package/dist/components/index23.js +234 -266
- package/dist/components/index23.js.map +1 -1
- package/dist/components/index24.js +1 -1
- package/dist/components/utils.js +55 -2
- package/dist/components/utils.js.map +1 -1
- package/dist/components/z-anchor-navigation.js +1 -1
- package/dist/components/z-anchor-navigation.js.map +1 -1
- package/dist/components/z-card.js +1 -1
- package/dist/components/z-card.js.map +1 -1
- package/dist/components/z-select.js +4 -6
- package/dist/components/z-select.js.map +1 -1
- package/dist/esm/{index-10473b87.js → index-328b69a7.js} +2 -2
- package/dist/esm/{index-10473b87.js.map → index-328b69a7.js.map} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-c8abef2f.js → utils-6e2be2b6.js} +55 -2
- package/dist/esm/utils-6e2be2b6.js.map +1 -0
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-anchor-navigation.entry.js +1 -1
- package/dist/esm/z-anchor-navigation.entry.js.map +1 -1
- package/dist/esm/z-app-header_12.entry.js +1 -1
- package/dist/esm/z-book-card-deprecated.entry.js +1 -1
- package/dist/esm/z-breadcrumb.entry.js +1 -1
- package/dist/esm/z-card.entry.js +1 -1
- package/dist/esm/z-card.entry.js.map +1 -1
- package/dist/esm/z-combobox.entry.js +1 -1
- package/dist/esm/z-menu.entry.js +1 -1
- package/dist/esm/z-myz-card-info.entry.js +1 -1
- package/dist/esm/z-myz-list-item.entry.js +1 -1
- package/dist/esm/z-popover.entry.js +233 -265
- package/dist/esm/z-popover.entry.js.map +1 -1
- package/dist/esm/z-select.entry.js +4 -6
- package/dist/esm/z-select.entry.js.map +1 -1
- package/dist/esm/z-skip-to-content.entry.js +1 -1
- package/dist/esm/z-slideshow.entry.js +1 -1
- package/dist/esm/z-table.entry.js +2 -2
- package/dist/esm/z-toggle-switch.entry.js +1 -1
- package/dist/esm/z-tr.entry.js +2 -2
- package/dist/types/components/z-popover/index.d.ts +47 -45
- package/dist/types/components/z-popover/index.stories.d.ts +18 -7
- package/dist/types/components.d.ts +13 -17
- package/dist/types/utils/utils.d.ts +17 -0
- package/dist/web-components-library/index.esm.js +1 -1
- package/dist/web-components-library/{p-8b93bc6d.entry.js → p-01302e57.entry.js} +2 -2
- package/dist/web-components-library/{p-14f0bdf4.entry.js → p-1ad8810a.entry.js} +2 -2
- package/{www/build/p-c2ba8a6c.entry.js → dist/web-components-library/p-2e0923bd.entry.js} +2 -2
- package/dist/web-components-library/p-3284e37b.entry.js +2 -0
- package/dist/web-components-library/{p-61f76cab.js → p-43bc482a.js} +2 -2
- package/{www/build/p-2fb52cd0.entry.js → dist/web-components-library/p-539f99db.entry.js} +2 -2
- package/dist/web-components-library/p-625e2cee.js +2 -0
- package/dist/web-components-library/p-625e2cee.js.map +1 -0
- package/dist/web-components-library/p-62e1d867.entry.js +2 -0
- package/dist/web-components-library/p-62e1d867.entry.js.map +1 -0
- package/dist/web-components-library/p-63d220da.entry.js +2 -0
- package/dist/web-components-library/{p-8d5e3396.entry.js.map → p-63d220da.entry.js.map} +1 -1
- package/dist/web-components-library/{p-c8814ae1.entry.js → p-7916e0f7.entry.js} +2 -2
- package/{www/build/p-f5efb3fc.entry.js → dist/web-components-library/p-8bd4a2aa.entry.js} +2 -2
- package/dist/web-components-library/{p-c962e854.entry.js → p-8dec332e.entry.js} +2 -2
- package/dist/web-components-library/{p-72a7eb26.entry.js → p-966cbf03.entry.js} +2 -2
- package/{www/build/p-30575221.entry.js → dist/web-components-library/p-a0ed0c63.entry.js} +2 -2
- package/{www/build/p-e41442e0.entry.js → dist/web-components-library/p-b7b972c0.entry.js} +2 -2
- package/{www/build/p-e41442e0.entry.js.map → dist/web-components-library/p-b7b972c0.entry.js.map} +1 -1
- package/dist/web-components-library/{p-25935be3.entry.js → p-bc2f94d9.entry.js} +2 -2
- package/dist/web-components-library/{p-57b8bd19.entry.js → p-db9b7eb5.entry.js} +2 -2
- package/dist/web-components-library/p-db9b7eb5.entry.js.map +1 -0
- package/dist/web-components-library/p-df04a63e.entry.js +2 -0
- package/dist/web-components-library/p-df04a63e.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/dist/web-components-library/web-components-library.esm.js.map +1 -1
- package/package.json +1 -1
- package/www/build/index.esm.js +1 -1
- package/www/build/{p-8b93bc6d.entry.js → p-01302e57.entry.js} +2 -2
- package/www/build/{p-14f0bdf4.entry.js → p-1ad8810a.entry.js} +2 -2
- package/{dist/web-components-library/p-c2ba8a6c.entry.js → www/build/p-2e0923bd.entry.js} +2 -2
- package/www/build/p-3284e37b.entry.js +2 -0
- package/www/build/{p-61f76cab.js → p-43bc482a.js} +2 -2
- package/{dist/web-components-library/p-2fb52cd0.entry.js → www/build/p-539f99db.entry.js} +2 -2
- package/www/build/p-625e2cee.js +2 -0
- package/www/build/p-625e2cee.js.map +1 -0
- package/www/build/p-62e1d867.entry.js +2 -0
- package/www/build/p-62e1d867.entry.js.map +1 -0
- package/www/build/p-63d220da.entry.js +2 -0
- package/www/build/{p-8d5e3396.entry.js.map → p-63d220da.entry.js.map} +1 -1
- package/www/build/{p-c8814ae1.entry.js → p-7916e0f7.entry.js} +2 -2
- package/{dist/web-components-library/p-f5efb3fc.entry.js → www/build/p-8bd4a2aa.entry.js} +2 -2
- package/www/build/{p-c962e854.entry.js → p-8dec332e.entry.js} +2 -2
- package/www/build/{p-72a7eb26.entry.js → p-966cbf03.entry.js} +2 -2
- package/{dist/web-components-library/p-30575221.entry.js → www/build/p-a0ed0c63.entry.js} +2 -2
- package/{dist/web-components-library/p-e41442e0.entry.js → www/build/p-b7b972c0.entry.js} +2 -2
- package/{dist/web-components-library/p-e41442e0.entry.js.map → www/build/p-b7b972c0.entry.js.map} +1 -1
- package/www/build/{p-25935be3.entry.js → p-bc2f94d9.entry.js} +2 -2
- package/www/build/{p-0cb573a8.js → p-c2d3e81c.js} +1 -1
- package/www/build/{p-57b8bd19.entry.js → p-db9b7eb5.entry.js} +2 -2
- package/www/build/p-db9b7eb5.entry.js.map +1 -0
- package/www/build/p-df04a63e.entry.js +2 -0
- package/www/build/p-df04a63e.entry.js.map +1 -0
- package/www/build/web-components-library.esm.js +1 -1
- package/www/build/web-components-library.esm.js.map +1 -1
- package/www/index.html +1 -1
- package/dist/cjs/utils-93961cb6.js.map +0 -1
- package/dist/esm/utils-c8abef2f.js.map +0 -1
- package/dist/web-components-library/p-37f271c8.entry.js +0 -2
- package/dist/web-components-library/p-37f271c8.entry.js.map +0 -1
- package/dist/web-components-library/p-57b8bd19.entry.js.map +0 -1
- package/dist/web-components-library/p-69a1a67a.entry.js +0 -2
- package/dist/web-components-library/p-8d5e3396.entry.js +0 -2
- package/dist/web-components-library/p-a06fbbc0.js +0 -2
- package/dist/web-components-library/p-a06fbbc0.js.map +0 -1
- package/dist/web-components-library/p-da30a6cb.entry.js +0 -2
- package/dist/web-components-library/p-da30a6cb.entry.js.map +0 -1
- package/www/build/p-37f271c8.entry.js +0 -2
- package/www/build/p-37f271c8.entry.js.map +0 -1
- package/www/build/p-57b8bd19.entry.js.map +0 -1
- package/www/build/p-69a1a67a.entry.js +0 -2
- package/www/build/p-8d5e3396.entry.js +0 -2
- package/www/build/p-a06fbbc0.js +0 -2
- package/www/build/p-a06fbbc0.js.map +0 -1
- package/www/build/p-da30a6cb.entry.js +0 -2
- package/www/build/p-da30a6cb.entry.js.map +0 -1
- /package/dist/web-components-library/{p-8b93bc6d.entry.js.map → p-01302e57.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-14f0bdf4.entry.js.map → p-1ad8810a.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-c2ba8a6c.entry.js.map → p-2e0923bd.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-69a1a67a.entry.js.map → p-3284e37b.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-61f76cab.js.map → p-43bc482a.js.map} +0 -0
- /package/dist/web-components-library/{p-2fb52cd0.entry.js.map → p-539f99db.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-c8814ae1.entry.js.map → p-7916e0f7.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-f5efb3fc.entry.js.map → p-8bd4a2aa.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-c962e854.entry.js.map → p-8dec332e.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-72a7eb26.entry.js.map → p-966cbf03.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-30575221.entry.js.map → p-a0ed0c63.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-25935be3.entry.js.map → p-bc2f94d9.entry.js.map} +0 -0
- /package/www/build/{p-8b93bc6d.entry.js.map → p-01302e57.entry.js.map} +0 -0
- /package/www/build/{p-14f0bdf4.entry.js.map → p-1ad8810a.entry.js.map} +0 -0
- /package/www/build/{p-c2ba8a6c.entry.js.map → p-2e0923bd.entry.js.map} +0 -0
- /package/www/build/{p-69a1a67a.entry.js.map → p-3284e37b.entry.js.map} +0 -0
- /package/www/build/{p-61f76cab.js.map → p-43bc482a.js.map} +0 -0
- /package/www/build/{p-2fb52cd0.entry.js.map → p-539f99db.entry.js.map} +0 -0
- /package/www/build/{p-c8814ae1.entry.js.map → p-7916e0f7.entry.js.map} +0 -0
- /package/www/build/{p-f5efb3fc.entry.js.map → p-8bd4a2aa.entry.js.map} +0 -0
- /package/www/build/{p-c962e854.entry.js.map → p-8dec332e.entry.js.map} +0 -0
- /package/www/build/{p-72a7eb26.entry.js.map → p-966cbf03.entry.js.map} +0 -0
- /package/www/build/{p-30575221.entry.js.map → p-a0ed0c63.entry.js.map} +0 -0
- /package/www/build/{p-25935be3.entry.js.map → p-bc2f94d9.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-popover/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, PopoverPosition} from \"../../beans\";\n\nconst DOCUMENT_ELEMENT = document.documentElement;\n\ntype Offsets = {top: number; right: number; bottom: number; left: number};\ntype ElementSizes = {width: number; height: number};\n/** Centering offset modifier. 0 for no offset, 0.5 for centering. */\ntype OffsetModifier = 0 | 0.5;\n\nfunction getParentElement(element: Element): Element {\n if (element.parentNode === element.shadowRoot) {\n return element.shadowRoot.host;\n }\n\n return element.parentElement;\n}\n\n/**\n * Find the closest scrollable parent of a node.\n *\n * @param {Element} element The node\n */\nfunction findScrollableParent(element: Element): Element {\n let parent = getParentElement(element);\n\n while (parent && parent !== DOCUMENT_ELEMENT) {\n const style = window.getComputedStyle(parent);\n const {overflow, overflowX, overflowY} = style;\n\n // Check for hidden overflow first (early return)\n if (overflow === \"hidden\" || overflowY === \"hidden\" || overflowX === \"hidden\") {\n return parent;\n }\n\n // Only check scrollable if overflow is not visible\n const isOverflowNotVisible = overflow !== \"visible\";\n const isOverflowYNotVisible = overflowY !== \"visible\";\n const isOverflowXNotVisible = overflowX !== \"visible\";\n\n if (\n (parent.scrollHeight > parent.clientHeight && isOverflowNotVisible && isOverflowYNotVisible) ||\n (parent.scrollWidth > parent.clientWidth && isOverflowNotVisible && isOverflowXNotVisible)\n ) {\n return parent;\n }\n\n parent = getParentElement(parent);\n }\n\n return DOCUMENT_ELEMENT;\n}\n\n/**\n * Calculate computed offset.\n * It includes matrix transformations.\n * @param element The target element.\n * @param targetParentOffset The relative offset parent.\n */\nfunction computeOffset(element: HTMLElement, targetParentOffset?: HTMLElement): Offsets & ElementSizes {\n const rect = element.getBoundingClientRect();\n const {width, height} = rect;\n\n let top = 0;\n let left = 0;\n let offsetParent = element;\n\n while (offsetParent && offsetParent !== targetParentOffset) {\n left += offsetParent.offsetLeft;\n\n // document.body sometimes has offsetTop == 0 but still has an offset because of children margins!\n if (offsetParent === document.body) {\n top += offsetParent.getBoundingClientRect().top + window.scrollY;\n } else {\n top += offsetParent.offsetTop;\n }\n\n // Handle CSS transforms only when DOMMatrix is available\n if (window.DOMMatrix) {\n const style = window.getComputedStyle(offsetParent);\n const {transform} = style;\n\n if (transform && transform !== \"none\") {\n const domMatrix = new DOMMatrix(transform);\n left += domMatrix.m41;\n if (offsetParent !== document.body) {\n top += domMatrix.m42;\n }\n }\n }\n\n if (!offsetParent.offsetParent) {\n break;\n }\n\n offsetParent = offsetParent.offsetParent as HTMLElement;\n }\n\n let parentWidth: number;\n let parentHeight: number;\n if (offsetParent === document.body) {\n parentWidth = window.innerWidth;\n parentHeight = window.innerHeight;\n } else {\n parentWidth = offsetParent.offsetWidth;\n parentHeight = offsetParent.offsetHeight;\n }\n\n const right = parentWidth - left - width;\n const bottom = parentHeight - top - height;\n\n return {top, right, bottom, left, width, height};\n}\n\n/**\n * Popover component.\n * This component displays a popover that can be bound to an element.\n * It supports various positions and can automatically adjust its position based on available space.\n *\n * Notes:\n * - To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.\n * - Consider manually adjusting the size of the slotted element (using `max-width`, `max-height`, etc...) when its content is \"fluid\" (like a big text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think that the popover doesn't fit in the available space).\n *\n * @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n */\n@Component({\n tag: \"z-popover\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZPopover {\n /**\n * The preferred position to render the popover.\n * The popover will automatically search another position if not enough space is available for the preferred position.\n * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.\n */\n @Prop({reflect: true, mutable: true})\n position?: PopoverPosition = PopoverPosition.TOP;\n\n /**\n * The open state of the popover.\n */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * The selector or the element bound with the popover.\n * If string css selector is provided make sure to use a valid selector.\n */\n @Prop()\n bindTo?: string | HTMLElement;\n\n /**\n * Whether to show popover's arrow.\n */\n @Prop({reflect: true})\n showArrow = false;\n\n /**\n * Whether to center the popup on the main side (according to \"position\").\n */\n @Prop({reflect: true})\n center = false;\n\n /**\n * If true, the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n */\n @Prop()\n closable = true;\n\n /**\n * The current position of the popover.\n * It differs from `position` only when calculated automatically (position=auto) or when the position is recalculated for space reasons.\n */\n @State()\n currentPosition?: PopoverPosition;\n\n /**\n * Position change event.\n */\n @Event()\n positionChange: EventEmitter;\n\n /**\n * Open change event.\n */\n @Event()\n openChange: EventEmitter;\n\n @Element() host: HTMLZPopoverElement;\n\n private animationFrameRequestId?: number;\n\n private readonly spaceTolerance = 3; // 3px tolerance for space calculations\n\n @Listen(\"keyup\", {target: \"window\"})\n closePopoverWithKeyboard(e: KeyboardEvent): void {\n if (this.closable && e.key === KeyboardCode.ESC) {\n this.open = false;\n }\n }\n\n /**\n * Close the popover when clicking outside of its content.\n * Stop event propagation if the click was fired by popover's trigger element,\n * to prevent close and reopen glitches.\n * @param {MouseEvent} e\n */\n @Listen(\"click\", {target: \"body\", capture: true})\n handleOutsideClick(e: MouseEvent): void {\n if (!this.closable || !this.open) {\n return;\n }\n\n const eventPath = e.composedPath();\n if (!eventPath.includes(this.host)) {\n const target = e.target as HTMLElement;\n let triggerElemClicked = false;\n\n if (typeof this.bindTo === \"string\") {\n triggerElemClicked = !!target.closest(this.bindTo);\n } else if (this.bindTo) {\n triggerElemClicked = this.bindTo.contains(target);\n }\n\n if (triggerElemClicked) {\n // stop propagation if the click was on the trigger element to prevent close and reopen glitches\n e.stopPropagation();\n }\n\n this.open = false;\n this.positionChange.emit({position: this.currentPosition});\n }\n }\n\n @Watch(\"position\")\n validatePosition(newValue: PopoverPosition): void {\n if (!Object.values(PopoverPosition).includes(newValue as PopoverPosition) || newValue === PopoverPosition.AUTO) {\n newValue = PopoverPosition.TOP;\n }\n\n this.position = newValue;\n this.currentPosition = newValue;\n this.positionChange.emit({position: this.currentPosition});\n this.setPosition();\n }\n\n /**\n * Setup popover behaviors on opening.\n */\n @Watch(\"open\")\n onOpen(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n\n if (this.open) {\n const setPosition = (): void => {\n if (this.open) {\n this.setPosition();\n this.animationFrameRequestId = requestAnimationFrame(setPosition);\n }\n };\n\n // call `setPosition` after a tick to ensure the DOM is ready and sizes are available\n setTimeout(() => {\n setPosition();\n }, 0);\n }\n\n this.openChange.emit({open: this.open});\n }\n\n // Clockwise order of positions.\n private static readonly positionOrder: PopoverPosition[] = [\n PopoverPosition.TOP_RIGHT,\n PopoverPosition.TOP,\n PopoverPosition.TOP_LEFT,\n PopoverPosition.RIGHT_BOTTOM,\n PopoverPosition.RIGHT,\n PopoverPosition.RIGHT_TOP,\n PopoverPosition.BOTTOM_LEFT,\n PopoverPosition.BOTTOM,\n PopoverPosition.BOTTOM_RIGHT,\n PopoverPosition.LEFT_TOP,\n PopoverPosition.LEFT,\n PopoverPosition.LEFT_BOTTOM,\n ] as const;\n\n /**\n * Helper functions for space calculation\n */\n private hasCenteredHorizontalSpace(\n availableLeft: number,\n availableRight: number,\n hostWidth: number,\n boundWidth: number,\n offsetModifier: OffsetModifier\n ): boolean {\n const requiredSpace = (hostWidth - boundWidth) * (1 - offsetModifier);\n\n return (\n availableLeft >= requiredSpace - this.spaceTolerance && availableRight >= requiredSpace - this.spaceTolerance\n );\n }\n\n private hasCenteredVerticalSpace(\n availableTop: number,\n availableBottom: number,\n hostHeight: number,\n boundHeight: number,\n offsetModifier: OffsetModifier\n ): boolean {\n const requiredSpace = (hostHeight - boundHeight) * (1 - offsetModifier);\n\n return (\n availableTop >= requiredSpace - this.spaceTolerance && availableBottom >= requiredSpace - this.spaceTolerance\n );\n }\n\n private hasOffsetSpace(\n availableSpace: number,\n hostSize: number,\n boundSize: number,\n offsetModifier: OffsetModifier\n ): boolean {\n return availableSpace >= hostSize - boundSize * (1 - offsetModifier) - this.spaceTolerance;\n }\n\n /**\n * Given a desired position and available space around the bound element, returns the best position\n * that fits the popover, trying all positions if needed.\n * Takes into account offsetModifier for centering.\n * @param desiredPosition The desired position of the popover.\n * @param availableSpace The available space around the bound element.\n * @param boundElemSizes The sizes of the bound element.\n * @param offsetModifier The modifier to apply to the offset for centering.\n */\n private getOptimalPopoverPosition(\n desiredPosition: PopoverPosition,\n availableSpace: Offsets,\n boundElemSizes: ElementSizes,\n offsetModifier: OffsetModifier\n ): PopoverPosition {\n const hostWidth = this.host.offsetWidth;\n const hostHeight = this.host.offsetHeight;\n\n // Check if the desired position has enough space\n const fits = (pos: PopoverPosition): boolean => {\n switch (pos) {\n case PopoverPosition.TOP:\n return (\n availableSpace.top >= hostHeight &&\n this.hasCenteredHorizontalSpace(\n availableSpace.left,\n availableSpace.right,\n hostWidth,\n boundElemSizes.width,\n offsetModifier\n )\n );\n\n case PopoverPosition.TOP_RIGHT:\n return (\n availableSpace.top >= hostHeight &&\n this.hasOffsetSpace(availableSpace.right, hostWidth, boundElemSizes.width, offsetModifier)\n );\n\n case PopoverPosition.TOP_LEFT:\n return (\n availableSpace.top >= hostHeight &&\n this.hasOffsetSpace(availableSpace.left, hostWidth, boundElemSizes.width, offsetModifier)\n );\n\n case PopoverPosition.RIGHT:\n return (\n availableSpace.right >= hostWidth &&\n this.hasCenteredVerticalSpace(\n availableSpace.top,\n availableSpace.bottom,\n hostHeight,\n boundElemSizes.height,\n offsetModifier\n )\n );\n\n case PopoverPosition.RIGHT_BOTTOM:\n return (\n availableSpace.right >= hostWidth &&\n this.hasOffsetSpace(availableSpace.bottom, hostHeight, boundElemSizes.height, offsetModifier)\n );\n\n case PopoverPosition.RIGHT_TOP:\n return (\n availableSpace.right >= hostWidth &&\n this.hasOffsetSpace(availableSpace.top, hostHeight, boundElemSizes.height, offsetModifier)\n );\n\n case PopoverPosition.BOTTOM:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasCenteredHorizontalSpace(\n availableSpace.left,\n availableSpace.right,\n hostWidth,\n boundElemSizes.width,\n offsetModifier\n )\n );\n\n case PopoverPosition.BOTTOM_LEFT:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasOffsetSpace(availableSpace.left, hostWidth, boundElemSizes.width, offsetModifier)\n );\n\n case PopoverPosition.BOTTOM_RIGHT:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasOffsetSpace(availableSpace.right, hostWidth, boundElemSizes.width, offsetModifier)\n );\n\n case PopoverPosition.LEFT:\n return (\n availableSpace.left >= hostWidth &&\n this.hasCenteredVerticalSpace(\n availableSpace.top,\n availableSpace.bottom,\n hostHeight,\n boundElemSizes.height,\n offsetModifier\n )\n );\n\n case PopoverPosition.LEFT_TOP:\n return (\n availableSpace.left >= hostWidth &&\n this.hasOffsetSpace(availableSpace.top, hostHeight, boundElemSizes.height, offsetModifier)\n );\n\n case PopoverPosition.LEFT_BOTTOM:\n return (\n availableSpace.left >= hostWidth &&\n this.hasOffsetSpace(availableSpace.bottom, hostHeight, boundElemSizes.height, offsetModifier)\n );\n\n default:\n return false;\n }\n };\n\n // Check desired position first\n if (fits(desiredPosition)) {\n return desiredPosition;\n }\n\n // Find position index and create rotation starting from next position\n const positions = ZPopover.positionOrder;\n const startIndex = positions.indexOf(desiredPosition);\n\n if (startIndex === -1) {\n return desiredPosition; // fallback if position not found\n }\n\n // Try all other positions starting from the next one\n for (let i = 1; i < positions.length; i++) {\n const posIndex = (startIndex + i) % positions.length;\n const pos = positions[posIndex];\n if (fits(pos)) {\n return pos;\n }\n }\n\n // If no position fits, find the best fallback based on available space\n return this.findBestFallbackPosition(availableSpace);\n }\n\n /**\n * Find the best fallback position based on available space when no position fits perfectly\n */\n private findBestFallbackPosition(availableSpace: Offsets): PopoverPosition {\n // Determine the directions with the most space\n const bestHorizontalDirection =\n availableSpace.right >= availableSpace.left ? PopoverPosition.RIGHT : PopoverPosition.LEFT;\n\n const bestVerticalDirection =\n availableSpace.bottom >= availableSpace.top ? PopoverPosition.BOTTOM : PopoverPosition.TOP;\n\n // Choose the main direction based on which has more space\n const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);\n const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);\n\n const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;\n\n // Check if secondary direction is necessary\n // Only add secondary direction if the difference between min and max in that direction is at least double\n let needsSecondaryDirection = false;\n\n if (mainDirection === bestVerticalDirection) {\n // Main direction is vertical, check horizontal space difference\n const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);\n needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace * 2;\n } else {\n // Main direction is horizontal, check vertical space difference\n const minVerticalSpace = Math.min(availableSpace.bottom, availableSpace.top);\n needsSecondaryDirection = maxVerticalSpace >= minVerticalSpace * 2;\n }\n\n if (!needsSecondaryDirection) {\n return mainDirection;\n }\n\n const secondaryDirection =\n mainDirection === bestVerticalDirection ? bestHorizontalDirection : bestVerticalDirection;\n\n // Create a combined position (e.g., \"bottom_right\")\n return `${mainDirection}_${secondaryDirection}` as PopoverPosition;\n }\n\n /**\n * Calculate available space around the bound element\n */\n private calculateAvailableSpace(\n boundElementRect: Offsets & ElementSizes,\n scrollContainer: HTMLElement,\n scrollingBoundingRect: DOMRect\n ): {top: number; right: number; bottom: number; left: number} {\n const top = boundElementRect.top - scrollContainer.scrollTop;\n const bottom =\n scrollingBoundingRect.height - (boundElementRect.top + boundElementRect.height) + scrollContainer.scrollTop;\n const left = boundElementRect.left - scrollContainer.scrollLeft;\n const right =\n scrollingBoundingRect.width - (boundElementRect.left + boundElementRect.width) + scrollContainer.scrollLeft;\n\n const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);\n const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);\n\n return {\n top: Math.min(top, top + scrollingBoundingRect.top),\n bottom: Math.min(bottom, bottom - overflowBottom),\n left: Math.min(left, left + scrollingBoundingRect.left),\n right: Math.min(right, right - overflowRight),\n };\n }\n\n /**\n * Calculate relative offsets for positioning\n */\n private calculateRelativeOffsets(\n boundElementRect: Offsets,\n relativeBoundingRect: Offsets\n ): {top: number; right: number; bottom: number; left: number} {\n return {\n top: boundElementRect.top - relativeBoundingRect.top,\n right: boundElementRect.right - relativeBoundingRect.right,\n bottom: boundElementRect.bottom - relativeBoundingRect.bottom,\n left: boundElementRect.left - relativeBoundingRect.left,\n };\n }\n\n /**\n * Apply positioning styles based on position\n */\n private applyPositionStyles(\n position: PopoverPosition,\n style: CSSStyleDeclaration,\n offsets: Offsets,\n boundElementSizes: ElementSizes,\n availableSpace: Offsets,\n offsetModifier: OffsetModifier,\n arrowModifier: number\n ): void {\n const distanceFromBound = 8; // 8px is the distance of the popover from the bound element\n // Reset all positioning properties\n style.top = \"auto\";\n style.right = \"auto\";\n style.bottom = \"auto\";\n style.left = \"auto\";\n style.maxWidth = \"\";\n style.maxHeight = \"\";\n\n switch (position) {\n case PopoverPosition.TOP:\n case PopoverPosition.TOP_RIGHT:\n style.bottom = `${offsets.bottom + boundElementSizes.height}px`;\n style.left = `${offsets.left + boundElementSizes.width * offsetModifier - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;\n style.maxHeight = `${availableSpace.top - distanceFromBound}px`;\n if (position === PopoverPosition.TOP_RIGHT) {\n style.maxWidth = `${availableSpace.right + boundElementSizes.width * offsetModifier}px`;\n }\n break;\n\n case PopoverPosition.TOP_LEFT:\n style.right = `${offsets.right + boundElementSizes.width * offsetModifier - arrowModifier}px`;\n style.bottom = `${offsets.bottom + boundElementSizes.height}px`;\n style.maxWidth = `${availableSpace.left}px`;\n style.maxHeight = `${availableSpace.top - distanceFromBound}px`;\n break;\n\n case PopoverPosition.BOTTOM:\n case PopoverPosition.BOTTOM_RIGHT:\n style.top = `${offsets.top + boundElementSizes.height}px`;\n style.left = `${offsets.left + boundElementSizes.width * offsetModifier - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;\n style.maxHeight = `${availableSpace.bottom - distanceFromBound}px`;\n if (position === PopoverPosition.BOTTOM_RIGHT) {\n style.maxWidth = `${availableSpace.right + boundElementSizes.width * offsetModifier}px`;\n }\n break;\n\n case PopoverPosition.BOTTOM_LEFT:\n style.top = `${offsets.top + boundElementSizes.height}px`;\n style.right = `${offsets.right + boundElementSizes.width * offsetModifier - arrowModifier}px`;\n style.maxWidth = `${availableSpace.left}px`;\n style.maxHeight = `${availableSpace.bottom - distanceFromBound}px`;\n break;\n\n case PopoverPosition.RIGHT:\n case PopoverPosition.RIGHT_BOTTOM:\n style.top = `${offsets.top + boundElementSizes.height * offsetModifier - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;\n style.left = `${offsets.left + boundElementSizes.width}px`;\n style.maxWidth = `${availableSpace.right - distanceFromBound}px`;\n if (position === PopoverPosition.RIGHT) {\n style.maxHeight = `${Math.min(availableSpace.top + availableSpace.bottom + boundElementSizes.height, window.innerHeight - 20)}px`;\n } else {\n style.maxHeight = `${availableSpace.bottom + boundElementSizes.height * offsetModifier}px`;\n }\n break;\n\n case PopoverPosition.RIGHT_TOP:\n style.bottom = `${offsets.bottom + boundElementSizes.height * offsetModifier - arrowModifier}px`;\n style.left = `${offsets.left + boundElementSizes.width}px`;\n style.maxWidth = `${availableSpace.right - distanceFromBound}px`;\n if (position === PopoverPosition.RIGHT_TOP) {\n style.maxHeight = `${availableSpace.top + boundElementSizes.height * offsetModifier}px`;\n }\n break;\n\n case PopoverPosition.LEFT:\n case PopoverPosition.LEFT_BOTTOM:\n style.top = `${offsets.top + boundElementSizes.height * offsetModifier - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;\n style.right = `${offsets.right + boundElementSizes.width}px`;\n style.maxWidth = `${availableSpace.left - distanceFromBound}px`;\n if (position === PopoverPosition.LEFT_BOTTOM) {\n style.maxHeight = `${availableSpace.bottom + boundElementSizes.height * offsetModifier}px`;\n }\n break;\n\n case PopoverPosition.LEFT_TOP:\n style.right = `${offsets.right + boundElementSizes.width}px`;\n style.bottom = `${offsets.bottom + boundElementSizes.height * offsetModifier - arrowModifier}px`;\n style.maxWidth = `${availableSpace.left - distanceFromBound}px`;\n if (position === PopoverPosition.LEFT_TOP) {\n style.maxHeight = `${availableSpace.top + boundElementSizes.height * offsetModifier}px`;\n }\n break;\n }\n }\n\n /**\n * Set the position of the popover.\n */\n private setPosition(): void {\n let boundElement: HTMLElement;\n if (typeof this.bindTo === \"string\") {\n boundElement = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n } else if (this.bindTo) {\n boundElement = this.bindTo;\n } else {\n boundElement = this.host.parentElement as HTMLElement;\n }\n\n if (!boundElement) {\n return;\n }\n\n const scrollContainer = findScrollableParent(boundElement) as HTMLElement;\n const scrollingBoundingRect = scrollContainer.getBoundingClientRect();\n const offsetContainer = this.host.offsetParent as HTMLElement;\n\n const relativeBoundingRect = offsetContainer\n ? computeOffset(offsetContainer, scrollContainer)\n : {top: 0, right: 0, bottom: 0, left: 0};\n const boundElementRect = computeOffset(boundElement, scrollContainer);\n\n const availableSpace = this.calculateAvailableSpace(boundElementRect, scrollContainer, scrollingBoundingRect);\n const offsets = this.calculateRelativeOffsets(boundElementRect, relativeBoundingRect);\n const offsetModifier = this.center ? 0.5 : 0;\n const arrowModifier = this.showArrow && this.center ? 8 : 0; // 8px is the distance of the arrow center from the edge of the popover\n\n const position = this.getOptimalPopoverPosition(\n this.position,\n availableSpace,\n {width: boundElementRect.width, height: boundElementRect.height},\n offsetModifier\n );\n\n const style = this.host.style;\n this.applyPositionStyles(position, style, offsets, boundElementRect, availableSpace, offsetModifier, arrowModifier);\n\n this.currentPosition = position;\n }\n\n componentWillLoad(): void {\n this.validatePosition(this.position);\n this.onOpen();\n }\n\n componentDidLoad(): void {\n this.setPosition();\n }\n\n disconnectedCallback(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n }\n\n render(): HTMLZPopoverElement {\n return (\n <Host current-position={this.currentPosition}>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-popover/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {containsElement, findScrollableParent, getDevice, isElementVisibleInContainer} from \"../../utils/utils\";\n\n/** Centering offset modifier. 0 for no offset, 0.5 for centering. */\ntype OffsetModifier = 0 | 0.5;\ntype Offsets = {top: number; right: number; bottom: number; left: number};\n\n/**\n * Popover component.\n * This component displays a popover bound to an element.\n * It supports various positions and can automatically adjust it based on available space, accounting for scrollable containers.\n *\n * Notes:\n * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is \"fluid\" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).\n *\n * @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n */\n@Component({\n tag: \"z-popover\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZPopover {\n /**\n * The preferred position to render the popover.\n * The popover will automatically search another position if not enough space is available for the preferred position.\n * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.\n */\n @Prop({reflect: true, mutable: true})\n position?: PopoverPosition = PopoverPosition.TOP;\n\n /** The open state of the popover. */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * The selector or the element bound with the popover.\n * If string css selector is provided make sure to use a valid selector.\n */\n @Prop()\n bindTo?: string | HTMLElement;\n\n /** Whether to show popover's arrow. */\n @Prop({reflect: true})\n showArrow = false;\n\n /** Whether to center the popup on the main side (according to \"position\"). */\n @Prop({reflect: true})\n center = false;\n\n /**\n * If true, the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n */\n @Prop()\n closable = true;\n\n /**\n * The current position of the popover.\n * It differs from `position` only when calculated automatically for space reasons.\n */\n @State()\n currentPosition?: PopoverPosition;\n\n @Element() host: HTMLZPopoverElement;\n\n // Clockwise order of positions.\n private static readonly positionOrder: PopoverPosition[] = [\n PopoverPosition.TOP,\n PopoverPosition.TOP_RIGHT,\n PopoverPosition.TOP_LEFT,\n PopoverPosition.RIGHT,\n PopoverPosition.RIGHT_BOTTOM,\n PopoverPosition.RIGHT_TOP,\n PopoverPosition.BOTTOM,\n PopoverPosition.BOTTOM_LEFT,\n PopoverPosition.BOTTOM_RIGHT,\n PopoverPosition.LEFT,\n PopoverPosition.LEFT_TOP,\n PopoverPosition.LEFT_BOTTOM,\n ] as const;\n\n private animationFrameRequestId?: number;\n\n /** space tolerance for space calculations */\n private readonly spaceTolerance = 3;\n\n /** The element bound to the popover. */\n private boundElement?: HTMLElement;\n\n /** Cached available space around the bound element to avoid unnecessary recalculations */\n private cachedAvailableSpace?: Offsets;\n\n /** Last bounding rect of the bound element to detect changes and eventually invalidate the caches. */\n private lastBoundRect?: DOMRect;\n\n /** Fired when the position changes. */\n @Event()\n positionChange: EventEmitter;\n\n /** Open change event. */\n @Event()\n openChange: EventEmitter;\n\n @Listen(\"keyup\", {target: \"window\"})\n closePopoverWithKeyboard(e: KeyboardEvent): void {\n if (this.closable && e.key === KeyboardCode.ESC) {\n this.open = false;\n }\n }\n\n /**\n * Close the popover when clicking outside of its content.\n * Stop event propagation if the click was fired by popover's trigger element,\n * to prevent close and reopen glitches.\n */\n @Listen(\"click\", {target: \"body\", capture: true})\n handleOutsideClick(e: MouseEvent): void {\n const target = e.target as Element;\n if (!this.closable || !this.open || containsElement(this.host, target)) {\n return;\n }\n\n if (containsElement(this.boundElement, target)) {\n // stop propagation if the click was on the trigger element to prevent close and reopen glitches\n e.stopPropagation();\n }\n this.open = false;\n }\n\n @Watch(\"position\")\n validatePosition(newValue: PopoverPosition): void {\n if (!Object.values(PopoverPosition).includes(newValue as PopoverPosition) || newValue === PopoverPosition.AUTO) {\n newValue = PopoverPosition.TOP;\n this.position = newValue;\n }\n this.currentPosition = newValue;\n if (this.open) {\n this.setPosition();\n }\n }\n\n /** Setup popover behaviors when `open` changes. */\n @Watch(\"open\")\n onOpen(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n this.openChange.emit({open: this.open});\n if (!this.open) {\n return;\n }\n\n const updatePositionLoop = (): void => {\n if (!this.open) {\n return;\n }\n\n this.setPosition();\n this.animationFrameRequestId = requestAnimationFrame(updatePositionLoop);\n };\n\n // call `setPosition` after a tick to ensure the DOM is ready and sizes are available\n setTimeout(() => {\n updatePositionLoop();\n }, 0);\n }\n\n @Watch(\"bindTo\")\n onBindingChange(): void {\n this.findBoundElement();\n }\n\n /** Returns the offset modifier to use in calculations to align the popover with the bound element. */\n private get offsetModifier(): OffsetModifier {\n return this.center ? 0.5 : 0;\n }\n\n private findBoundElement(): void {\n if (typeof this.bindTo === \"string\") {\n this.boundElement = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n } else if (this.bindTo) {\n this.boundElement = this.bindTo;\n } else {\n this.boundElement = this.host.parentElement as HTMLElement;\n }\n }\n\n /**\n * Check if element has enough space to the right and left to be centered.\n * Used for `TOP` and `BOTTOM` position.\n * When `center` is not enabled, only one side needs to be checked and `RIGHT` is the default.\n */\n private hasCenteredHorizontalSpace(\n availableLeft: number,\n availableRight: number,\n hostWidth: number,\n boundElementWidth: number\n ): boolean {\n const requiredSideSpace = (hostWidth - boundElementWidth) * (1 - this.offsetModifier);\n\n if (!this.center) {\n return availableRight >= requiredSideSpace - this.spaceTolerance;\n }\n\n return (\n availableRight >= requiredSideSpace - this.spaceTolerance &&\n availableLeft >= requiredSideSpace - this.spaceTolerance\n );\n }\n\n /**\n * Check if element has enough space to the top and bottom to be centered.\n * Used for `RIGHT` and `LEFT` position.\n * When `center` is not enabled, only one side needs to be checked and `BOTTOM` is the default.\n */\n private hasCenteredVerticalSpace(\n availableTop: number,\n availableBottom: number,\n hostHeight: number,\n boundElementHeight: number\n ): boolean {\n const requiredSideSpace = (hostHeight - boundElementHeight) * (1 - this.offsetModifier);\n\n if (!this.center) {\n return availableBottom >= requiredSideSpace - this.spaceTolerance;\n }\n\n return (\n availableTop >= requiredSideSpace - this.spaceTolerance &&\n availableBottom >= requiredSideSpace - this.spaceTolerance\n );\n }\n\n /**\n * Check if there is enough space in the given direction to fit the popover.\n * Used for composed positions like TOP_RIGHT, LEFT_BOTTOM, etc.\n */\n private hasEnoughSideSpace(\n availableSpace: number,\n hostSize: number,\n boundElementSize: number,\n offsetModifier: OffsetModifier\n ): boolean {\n return availableSpace >= hostSize - boundElementSize * (1 - offsetModifier) - this.spaceTolerance;\n }\n\n /**\n * Given a desired position and available space around the bound element, returns the best position\n * that fits the popover, trying all positions if needed.\n * Takes into account offsetModifier for centering.\n * @param desiredPosition The desired position of the popover.\n * @param availableSpace The available space around the bound element.\n */\n private getOptimalPopoverPosition(desiredPosition: PopoverPosition, availableSpace: Offsets): PopoverPosition {\n const hostWidth = this.host.offsetWidth;\n const hostHeight = this.host.offsetHeight;\n const boundElementWidth = this.boundElement.getBoundingClientRect().width;\n const boundElementHeight = this.boundElement.getBoundingClientRect().height;\n const offsetModifier = this.offsetModifier;\n\n /** Check if there is enough space to fit the popover in the desired position */\n const fits = (pos: PopoverPosition): boolean => {\n switch (pos) {\n case PopoverPosition.TOP:\n return (\n availableSpace.top >= hostHeight - this.spaceTolerance &&\n this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n );\n case PopoverPosition.TOP_RIGHT:\n return (\n availableSpace.top >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.TOP_LEFT:\n return (\n availableSpace.top >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.RIGHT:\n return (\n availableSpace.right >= hostWidth &&\n this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n );\n case PopoverPosition.RIGHT_BOTTOM:\n return (\n availableSpace.right >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.RIGHT_TOP:\n return (\n availableSpace.right >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.BOTTOM:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n );\n case PopoverPosition.BOTTOM_LEFT:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.BOTTOM_RIGHT:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.LEFT:\n return (\n availableSpace.left >= hostWidth &&\n this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n );\n case PopoverPosition.LEFT_TOP:\n return (\n availableSpace.left >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.LEFT_BOTTOM:\n return (\n availableSpace.left >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n );\n\n default:\n return false;\n }\n };\n\n // Check desired position first\n if (fits(desiredPosition)) {\n return desiredPosition;\n }\n\n // Find position index and create rotation starting from next position\n const positions = ZPopover.positionOrder;\n const startIndex = positions.indexOf(desiredPosition);\n\n if (startIndex === -1) {\n return desiredPosition; // fallback if position not found\n }\n\n // Try all other positions starting from the next one\n for (let i = 1; i < positions.length; i++) {\n const posIndex = (startIndex + i) % positions.length;\n const pos = positions[posIndex];\n if (fits(pos)) {\n return pos;\n }\n }\n\n // If no position fits, find the best fallback based on available space\n return this.findBestFallbackPosition(availableSpace);\n }\n\n /** Find the best fallback position based on available space when no position fits perfectly. */\n private findBestFallbackPosition(availableSpace: Offsets): PopoverPosition {\n // Determine which horizontal and vertical direction has the most available space\n const bestHorizontalDirection =\n availableSpace.right >= availableSpace.left ? PopoverPosition.RIGHT : PopoverPosition.LEFT;\n\n const bestVerticalDirection =\n availableSpace.bottom >= availableSpace.top ? PopoverPosition.BOTTOM : PopoverPosition.TOP;\n\n // Choose the main direction based on which axis has more space overall\n const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);\n const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);\n\n const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;\n\n // Decide if a secondary direction is needed\n // Only add a secondary direction if the difference between min and max in that axis is at least double\n let needsSecondaryDirection = false;\n\n if (mainDirection === bestVerticalDirection) {\n // If main direction is vertical, check horizontal space difference\n const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);\n needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace * 2;\n } else {\n // If main direction is horizontal, check vertical space difference\n const minVerticalSpace = Math.min(availableSpace.bottom, availableSpace.top);\n needsSecondaryDirection = maxVerticalSpace >= minVerticalSpace * 2;\n }\n\n if (!needsSecondaryDirection) {\n return mainDirection;\n }\n\n const secondaryDirection =\n mainDirection === bestVerticalDirection ? bestHorizontalDirection : bestVerticalDirection;\n\n // Return a combined position (e.g., \"bottom_right\")\n return `${mainDirection}_${secondaryDirection}` as PopoverPosition;\n }\n\n /**\n * Calculate available space around the element bound with the popover, based on its nearest scrollable ancestor.\n *\n * Calculations for `right` and `bottom` can be a little bit confusing because `boundingRect.right` and `bottom` may not be what you expect...\n * For more information see the explanation in the docs.\n * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#return_value\n */\n private calculateAvailableSpace(): Offsets {\n const boundElementRect = this.boundElement.getBoundingClientRect();\n\n if (\n this.lastBoundRect &&\n this.lastBoundRect.x === boundElementRect.x &&\n this.lastBoundRect.y === boundElementRect.y &&\n this.lastBoundRect.width === boundElementRect.width &&\n this.lastBoundRect.height === boundElementRect.height &&\n this.cachedAvailableSpace\n ) {\n // If the bound element's rect hasn't changed, return the cached rect\n return this.cachedAvailableSpace;\n }\n\n this.lastBoundRect = boundElementRect;\n const scrollableParent = findScrollableParent(this.boundElement);\n const scrollableParentRect = scrollableParent.getBoundingClientRect();\n const hasNestedScrollableParent = scrollableParent !== this.boundElement.ownerDocument.documentElement;\n const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n const safeSpace = 8; // extra space to avoid popover being too close to the edges\n\n // These deltas represent the offset between the scrollable parent and the viewport.\n // They are used to adjust the available space calculations when the scrollable parent is not the document or body,\n // to try to fit the popover inside the scrollable parent.\n const deltaTop = hasNestedScrollableParent ? scrollableParentRect.top : 0;\n const deltaRight = hasNestedScrollableParent ? documentWidth - scrollableParentRect.right : 0;\n const deltaBottom = hasNestedScrollableParent ? documentHeight - scrollableParentRect.bottom : 0;\n const deltaLeft = hasNestedScrollableParent ? scrollableParentRect.left : 0;\n\n this.cachedAvailableSpace = {\n top: boundElementRect.top - deltaTop - safeSpace,\n right: documentWidth - boundElementRect.right - deltaRight - safeSpace,\n bottom: documentHeight - boundElementRect.bottom - deltaBottom - safeSpace,\n left: boundElementRect.left - deltaLeft - safeSpace,\n };\n\n return this.cachedAvailableSpace;\n }\n\n /** Calculate the space around an element relative to the viewport. */\n private calculateElementOffsets(element: HTMLElement): Offsets {\n const elementRect = element.getBoundingClientRect();\n const viewportWidth = element.ownerDocument.documentElement.clientWidth;\n const viewportHeight = element.ownerDocument.documentElement.clientHeight;\n\n return {\n top: elementRect.top,\n right: viewportWidth - elementRect.right,\n bottom: viewportHeight - elementRect.bottom,\n left: elementRect.left,\n };\n }\n\n /** Apply positioning styles based on passed position. */\n private applyPositionStyles(position: PopoverPosition, availableSpace: Offsets): void {\n const boundElementWidth = this.boundElement.offsetWidth;\n const boundElementHeight = this.boundElement.offsetHeight;\n /** Distance between the popover and the bound element */\n const distanceFromBound = 8;\n const offsetModifier = this.offsetModifier;\n /** Distance between the arrow center and the popover edge. Needed to align the center of the arrow with the center of the bound element when `showArrow` and `center` are enabled. */\n const arrowModifier = this.showArrow && this.center ? 8 : 0;\n const hostStyle = this.host.style;\n const boundElementOffsets = this.calculateElementOffsets(this.boundElement);\n\n let maxWidth: number;\n let maxHeight: number;\n\n switch (position) {\n case PopoverPosition.TOP:\n case PopoverPosition.TOP_RIGHT:\n hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight}px`;\n hostStyle.left = `${boundElementOffsets.left + boundElementWidth * offsetModifier - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;\n maxHeight = availableSpace.top - distanceFromBound;\n if (position === PopoverPosition.TOP_RIGHT) {\n maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n }\n break;\n\n case PopoverPosition.TOP_LEFT:\n hostStyle.right = `${boundElementOffsets.right + boundElementWidth * offsetModifier - arrowModifier}px`;\n hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight}px`;\n maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n maxHeight = availableSpace.top - distanceFromBound;\n break;\n\n case PopoverPosition.BOTTOM:\n case PopoverPosition.BOTTOM_RIGHT:\n hostStyle.top = `${boundElementOffsets.top + boundElementHeight}px`;\n hostStyle.left = `${boundElementOffsets.left + boundElementWidth * offsetModifier - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;\n maxHeight = availableSpace.bottom - distanceFromBound;\n if (position === PopoverPosition.BOTTOM_RIGHT) {\n maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n }\n break;\n\n case PopoverPosition.BOTTOM_LEFT:\n hostStyle.top = `${boundElementOffsets.top + boundElementHeight}px`;\n hostStyle.right = `${boundElementOffsets.right + boundElementWidth * offsetModifier - arrowModifier}px`;\n maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n maxHeight = availableSpace.bottom - distanceFromBound;\n break;\n\n case PopoverPosition.RIGHT:\n case PopoverPosition.RIGHT_BOTTOM:\n hostStyle.top = `${boundElementOffsets.top + boundElementHeight * offsetModifier - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;\n hostStyle.left = `${boundElementOffsets.left + boundElementWidth}px`;\n maxWidth = availableSpace.right - distanceFromBound;\n if (position === PopoverPosition.RIGHT) {\n maxHeight = availableSpace.top + availableSpace.bottom + boundElementHeight;\n } else {\n maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n }\n break;\n\n case PopoverPosition.RIGHT_TOP:\n hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight * offsetModifier - arrowModifier}px`;\n hostStyle.left = `${boundElementOffsets.left + boundElementWidth}px`;\n maxWidth = availableSpace.right - distanceFromBound;\n maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n break;\n\n case PopoverPosition.LEFT:\n case PopoverPosition.LEFT_BOTTOM:\n hostStyle.top = `${boundElementOffsets.top + boundElementHeight * offsetModifier - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;\n hostStyle.right = `${boundElementOffsets.right + boundElementWidth}px`;\n maxWidth = availableSpace.left - distanceFromBound;\n if (position === PopoverPosition.LEFT_BOTTOM) {\n maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n }\n break;\n\n case PopoverPosition.LEFT_TOP:\n hostStyle.right = `${boundElementOffsets.right + boundElementWidth}px`;\n hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight * offsetModifier - arrowModifier}px`;\n maxWidth = availableSpace.left - distanceFromBound;\n maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n break;\n }\n\n if (getDevice() !== Device.MOBILE) {\n // Only force max sizes on non-mobile viewports\n hostStyle.maxWidth = maxWidth ? `${maxWidth}px` : \"\";\n hostStyle.maxHeight = maxHeight ? `${maxHeight}px` : \"\";\n }\n }\n\n /** Set the position of the popover. */\n private setPosition(): void {\n if (!this.boundElement) {\n return;\n }\n\n if (!isElementVisibleInContainer(this.boundElement, findScrollableParent(this.boundElement))) {\n // If the bound element is not visible, hide the popover too\n this.open = false;\n\n return;\n }\n\n Object.assign(this.host.style, {\n // Reset all positioning properties\n top: \"auto\",\n right: \"auto\",\n bottom: \"auto\",\n left: \"auto\",\n maxWidth: \"\",\n maxHeight: \"\",\n // Set initial visibility to hidden while calculating position...\n visibility: \"hidden\",\n });\n\n const availableSpace = this.calculateAvailableSpace();\n const position = this.getOptimalPopoverPosition(this.position, availableSpace);\n\n this.applyPositionStyles(position, availableSpace);\n this.currentPosition = position;\n this.positionChange.emit({position: this.currentPosition});\n\n // ...then restore the visibility\n this.host.style.visibility = \"visible\";\n }\n\n componentWillLoad(): void {\n this.validatePosition(this.position);\n }\n\n componentDidLoad(): void {\n this.findBoundElement();\n if (this.open) {\n this.onOpen();\n }\n }\n\n disconnectedCallback(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n }\n\n render(): HTMLZPopoverElement {\n return (\n <Host current-position={this.currentPosition}>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -7,9 +7,13 @@ import "../list/z-list/index";
|
|
|
7
7
|
import "../z-button/index";
|
|
8
8
|
import "./index";
|
|
9
9
|
import "./index.stories.css";
|
|
10
|
-
const onTriggerClick = () => {
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
const onTriggerClick = (event) => {
|
|
11
|
+
var _a;
|
|
12
|
+
const popover = (_a = event.target.closest(".popover-container")) === null || _a === void 0 ? void 0 : _a.querySelector("z-popover");
|
|
13
|
+
if (!popover) {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
if (popover === null || popover === void 0 ? void 0 : popover.open) {
|
|
13
17
|
popover.open = false;
|
|
14
18
|
}
|
|
15
19
|
else {
|
|
@@ -17,43 +21,48 @@ const onTriggerClick = () => {
|
|
|
17
21
|
}
|
|
18
22
|
};
|
|
19
23
|
/**
|
|
20
|
-
* Simple drag and drop utility
|
|
24
|
+
* Simple drag and drop utility.
|
|
21
25
|
* @param element The element to make draggable.
|
|
22
26
|
*/
|
|
23
|
-
const makeDraggable = (element
|
|
27
|
+
const makeDraggable = (element) => {
|
|
28
|
+
if (element.draggable) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
24
31
|
let offsetX = 0;
|
|
25
32
|
let offsetY = 0;
|
|
26
|
-
let
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
element.
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
let dragging = false;
|
|
34
|
+
let clickPosition = { x: 0, y: 0 };
|
|
35
|
+
element.style.position = "absolute";
|
|
36
|
+
element.draggable = true;
|
|
37
|
+
element.addEventListener("mousedown", (event) => {
|
|
38
|
+
event.preventDefault();
|
|
39
|
+
event.stopPropagation();
|
|
40
|
+
dragging = true;
|
|
41
|
+
offsetX = element.offsetLeft - event.clientX;
|
|
42
|
+
offsetY = element.offsetTop - event.clientY;
|
|
43
|
+
clickPosition = { x: event.clientX, y: event.clientY };
|
|
44
|
+
});
|
|
45
|
+
document.addEventListener("mouseup", (event) => {
|
|
46
|
+
event.preventDefault();
|
|
47
|
+
event.stopPropagation();
|
|
48
|
+
dragging = false;
|
|
49
|
+
if (clickPosition.x !== event.clientX || clickPosition.y !== event.clientY) {
|
|
38
50
|
return;
|
|
39
51
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
52
|
+
setTimeout(() => {
|
|
53
|
+
onTriggerClick(Object.assign(Object.assign({}, event), { target: element }));
|
|
54
|
+
}, 0);
|
|
55
|
+
});
|
|
56
|
+
document.addEventListener("mousemove", (event) => {
|
|
57
|
+
if (dragging) {
|
|
58
|
+
const container = element.parentElement;
|
|
59
|
+
const left = Math.max(Math.min(event.clientX + offsetX, container.clientWidth - element.offsetWidth), 0);
|
|
60
|
+
const top = Math.max(Math.min(event.clientY + offsetY, container.clientHeight - element.offsetHeight), 0);
|
|
61
|
+
element.style.left = `${left}px`;
|
|
62
|
+
element.style.top = `${top}px`;
|
|
63
|
+
}
|
|
64
|
+
});
|
|
53
65
|
};
|
|
54
|
-
/**
|
|
55
|
-
* To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.
|
|
56
|
-
*/
|
|
57
66
|
const StoryMeta = {
|
|
58
67
|
title: "ZPopover",
|
|
59
68
|
component: "z-popover",
|
|
@@ -78,6 +87,12 @@ const StoryMeta = {
|
|
|
78
87
|
},
|
|
79
88
|
parameters: {
|
|
80
89
|
onTriggerClick,
|
|
90
|
+
docs: {
|
|
91
|
+
story: {
|
|
92
|
+
inline: false,
|
|
93
|
+
iframeHeight: 500,
|
|
94
|
+
},
|
|
95
|
+
},
|
|
81
96
|
},
|
|
82
97
|
};
|
|
83
98
|
export default StoryMeta;
|
|
@@ -87,17 +102,17 @@ export const Demo = {
|
|
|
87
102
|
"--z-popover-shadow-filter": "drop-shadow(0 1px 2px var(--shadow-color-base))",
|
|
88
103
|
"center": false,
|
|
89
104
|
"showArrow": false,
|
|
105
|
+
"closable": true,
|
|
90
106
|
},
|
|
91
|
-
render: (args
|
|
107
|
+
render: (args) => {
|
|
92
108
|
document.addEventListener("DOMContentLoaded", () => {
|
|
93
|
-
const trigger = document.querySelector("#trigger");
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
makeDraggable(trigger, container);
|
|
109
|
+
const trigger = document.querySelector("#demo-trigger");
|
|
110
|
+
if (trigger) {
|
|
111
|
+
makeDraggable(trigger);
|
|
97
112
|
}
|
|
98
113
|
});
|
|
99
114
|
return html `
|
|
100
|
-
<div class="popover-container
|
|
115
|
+
<div class="popover-container">
|
|
101
116
|
<z-popover
|
|
102
117
|
style=${styleMap({
|
|
103
118
|
"--z-popover-theme--surface": args["--z-popover-theme--surface"],
|
|
@@ -105,9 +120,9 @@ export const Demo = {
|
|
|
105
120
|
"--z-popover-padding": args["--z-popover-padding"],
|
|
106
121
|
})}
|
|
107
122
|
.position=${args.position}
|
|
108
|
-
center
|
|
109
|
-
|
|
110
|
-
bind-to="#trigger"
|
|
123
|
+
.center=${args.center}
|
|
124
|
+
.showArrow=${args.showArrow}
|
|
125
|
+
bind-to="#demo-trigger"
|
|
111
126
|
>
|
|
112
127
|
<div class="popover-content">
|
|
113
128
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
|
|
@@ -115,9 +130,8 @@ export const Demo = {
|
|
|
115
130
|
</div>
|
|
116
131
|
</z-popover>
|
|
117
132
|
<z-button
|
|
118
|
-
id="trigger"
|
|
133
|
+
id="demo-trigger"
|
|
119
134
|
icon="plus-filled"
|
|
120
|
-
.onclick=${parameters.onTriggerClick}
|
|
121
135
|
></z-button>
|
|
122
136
|
</div>
|
|
123
137
|
<p class="heading-2">You can move the button to see the positioning adaptation while the popover is open.</p>
|
|
@@ -155,7 +169,7 @@ export const ContextualMenuLike = {
|
|
|
155
169
|
</div>
|
|
156
170
|
`,
|
|
157
171
|
};
|
|
158
|
-
export const
|
|
172
|
+
export const Tooltip = {
|
|
159
173
|
args: {
|
|
160
174
|
"position": PopoverPosition.RIGHT,
|
|
161
175
|
"--z-popover-padding": "var(--space-unit)",
|
|
@@ -184,4 +198,37 @@ export const TooltipLike = {
|
|
|
184
198
|
></z-button>
|
|
185
199
|
</div>`,
|
|
186
200
|
};
|
|
201
|
+
export const TooltipWithNestedContainer = {
|
|
202
|
+
args: {
|
|
203
|
+
"position": PopoverPosition.TOP,
|
|
204
|
+
"--z-popover-padding": "var(--space-unit)",
|
|
205
|
+
},
|
|
206
|
+
render: (args, { parameters }) => html ` <div class="popover-container popover-container-tooltip">
|
|
207
|
+
<div class="popover-internal-container">
|
|
208
|
+
<div class="popover-internal-container-2">
|
|
209
|
+
<z-popover
|
|
210
|
+
style=${styleMap({
|
|
211
|
+
"--z-popover-theme--surface": args["--z-popover-theme--surface"],
|
|
212
|
+
"--z-popover-theme--text": args["--z-popover-theme--text"],
|
|
213
|
+
"--z-popover-padding": args["--z-popover-padding"],
|
|
214
|
+
})}
|
|
215
|
+
.position=${args.position}
|
|
216
|
+
center="true"
|
|
217
|
+
show-arrow="true"
|
|
218
|
+
bind-to="#trigger"
|
|
219
|
+
>
|
|
220
|
+
<div class="popover-content">
|
|
221
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
|
|
222
|
+
dolore magna aliqua.
|
|
223
|
+
</div>
|
|
224
|
+
</z-popover>
|
|
225
|
+
<z-button
|
|
226
|
+
id="trigger"
|
|
227
|
+
icon="plus-filled"
|
|
228
|
+
.onclick=${parameters.onTriggerClick}
|
|
229
|
+
></z-button>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</div>`,
|
|
233
|
+
};
|
|
187
234
|
//# sourceMappingURL=index.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-popover/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZPopover} from \".\";\nimport {PopoverPosition} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../list/z-list-element/index\";\nimport \"../list/z-list/index\";\nimport \"../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZPopoverStoriesArgs = ZPopover &\n CSSVarsArguments<\n \"--z-popover-theme--surface\" | \"--z-popover-theme--text\" | \"--z-popover-padding\" | \"--z-popover-shadow-filter\"\n >;\n\nconst onTriggerClick = (): void => {\n const popover = document.querySelector(\"z-popover\");\n if (popover.open) {\n popover.open = false;\n } else {\n popover.open = true;\n }\n};\n\n/**\n * Simple drag and drop utility for an HTMLElement.\n * @param element The element to make draggable.\n */\nconst makeDraggable = (element: HTMLElement, container: HTMLElement): void => {\n let offsetX = 0;\n let offsetY = 0;\n let isDragging = false;\n\n const onMouseDown = (event: MouseEvent): void => {\n isDragging = true;\n offsetX = event.clientX - element.getBoundingClientRect().left;\n offsetY = event.clientY - element.getBoundingClientRect().top;\n document.addEventListener(\"mousemove\", onMouseMove);\n document.addEventListener(\"mouseup\", onMouseUp);\n element.style.position = \"absolute\";\n element.style.zIndex = \"1000\";\n };\n\n const onMouseMove = (event: MouseEvent): void => {\n if (!isDragging) {\n return;\n }\n\n const safeTop = Math.max(event.clientY - offsetY, 0);\n const safeY = Math.min(safeTop, container.clientHeight - element.clientHeight);\n const safeLeft = Math.max(event.clientX - offsetX, 0);\n const safeX = Math.min(safeLeft, container.clientWidth - element.clientWidth);\n\n element.style.left = `${safeX}px`;\n element.style.top = `${safeY}px`;\n };\n\n const onMouseUp = (): void => {\n isDragging = false;\n document.removeEventListener(\"mousemove\", onMouseMove);\n document.removeEventListener(\"mouseup\", onMouseUp);\n };\n\n element.addEventListener(\"mousedown\", onMouseDown);\n};\n\n/**\n * To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.\n */\nconst StoryMeta = {\n title: \"ZPopover\",\n component: \"z-popover\",\n argTypes: {\n \"position\": {\n options: [null, ...Object.values(PopoverPosition).filter((value) => value !== PopoverPosition.AUTO)],\n control: {\n type: \"select\",\n labels: {\n null: \"-\",\n },\n },\n },\n \"--z-popover-theme--surface\": getColorTokenArgConfig(),\n \"--z-popover-theme--text\": getColorTokenArgConfig(),\n },\n args: {\n \"position\": null,\n \"--z-popover-theme--surface\": \"var(--color-surface01)\",\n \"--z-popover-theme--text\": \"var(--color-default-text)\",\n \"--z-popover-padding\": \"0\",\n },\n parameters: {\n onTriggerClick,\n },\n} satisfies Meta<ZPopoverStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZPopoverStoriesArgs>;\n\nexport const Demo = {\n args: {\n \"--z-popover-padding\": \"var(--space-unit)\",\n \"--z-popover-shadow-filter\": \"drop-shadow(0 1px 2px var(--shadow-color-base))\",\n \"center\": false,\n \"showArrow\": false,\n },\n render: (args, {parameters}) => {\n document.addEventListener(\"DOMContentLoaded\", () => {\n const trigger = document.querySelector(\"#trigger\");\n const container = document.querySelector(\".popover-container\");\n if (trigger && container) {\n makeDraggable(trigger as HTMLElement, container as HTMLElement);\n }\n });\n\n return html`\n <div class=\"popover-container popover-container-tooltip\">\n <z-popover\n style=${styleMap({\n \"--z-popover-theme--surface\": args[\"--z-popover-theme--surface\"],\n \"--z-popover-theme--text\": args[\"--z-popover-theme--text\"],\n \"--z-popover-padding\": args[\"--z-popover-padding\"],\n })}\n .position=${args.position}\n center=\"true\"\n show-arrow=\"true\"\n bind-to=\"#trigger\"\n >\n <div class=\"popover-content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n </div>\n </z-popover>\n <z-button\n id=\"trigger\"\n icon=\"plus-filled\"\n .onclick=${parameters.onTriggerClick}\n ></z-button>\n </div>\n <p class=\"heading-2\">You can move the button to see the positioning adaptation while the popover is open.</p>\n `;\n },\n} satisfies Story;\n\nexport const ContextualMenuLike = {\n args: {\n \"--z-popover-theme--surface\": \"var(--color-surface01)\",\n \"--z-popover-padding\": \"var(--space-unit)\",\n \"position\": PopoverPosition.RIGHT_BOTTOM,\n },\n render: (args, {parameters}) => html`\n <div class=\"popover-container\">\n <z-popover\n style=${styleMap({\n \"--z-popover-theme--surface\": args[\"--z-popover-theme--surface\"],\n \"--z-popover-theme--text\": args[\"--z-popover-theme--text\"],\n \"--z-popover-padding\": args[\"--z-popover-padding\"],\n })}\n .position=${args.position}\n bind-to=\"#trigger\"\n >\n <z-list>\n <z-list-element divider-type=\"element\">Elemento 1</z-list-element>\n <z-list-element divider-type=\"element\">Elemento 2</z-list-element>\n <z-list-element>Elemento 3</z-list-element>\n </z-list>\n </z-popover>\n <z-button\n id=\"trigger\"\n icon=\"plus-filled\"\n .onclick=${parameters.onTriggerClick}\n ></z-button>\n </div>\n `,\n} satisfies Story;\n\nexport const TooltipLike = {\n args: {\n \"position\": PopoverPosition.RIGHT,\n \"--z-popover-padding\": \"var(--space-unit)\",\n },\n render: (args, {parameters}) =>\n html` <div class=\"popover-container popover-container-tooltip\">\n <z-popover\n style=${styleMap({\n \"--z-popover-theme--surface\": args[\"--z-popover-theme--surface\"],\n \"--z-popover-theme--text\": args[\"--z-popover-theme--text\"],\n \"--z-popover-padding\": args[\"--z-popover-padding\"],\n })}\n .position=${args.position}\n center=\"true\"\n show-arrow=\"true\"\n bind-to=\"#trigger\"\n >\n <div class=\"popover-content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua.\n </div>\n </z-popover>\n <z-button\n id=\"trigger\"\n icon=\"plus-filled\"\n .onclick=${parameters.onTriggerClick}\n ></z-button>\n </div>`,\n} satisfies Story;\n"]}
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-popover/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZPopover} from \".\";\nimport {PopoverPosition} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../list/z-list-element/index\";\nimport \"../list/z-list/index\";\nimport \"../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZPopoverStoriesArgs = ZPopover &\n CSSVarsArguments<\n \"--z-popover-theme--surface\" | \"--z-popover-theme--text\" | \"--z-popover-padding\" | \"--z-popover-shadow-filter\"\n >;\n\nconst onTriggerClick = (event: MouseEvent): void => {\n const popover = (event.target as HTMLElement).closest(\".popover-container\")?.querySelector(\"z-popover\");\n if (!popover) {\n return;\n }\n\n if (popover?.open) {\n popover.open = false;\n } else {\n popover.open = true;\n }\n};\n\n/**\n * Simple drag and drop utility.\n * @param element The element to make draggable.\n */\nconst makeDraggable = (element: HTMLElement): void => {\n if (element.draggable) {\n return;\n }\n\n let offsetX = 0;\n let offsetY = 0;\n let dragging = false;\n let clickPosition = {x: 0, y: 0};\n\n element.style.position = \"absolute\";\n element.draggable = true;\n\n element.addEventListener(\"mousedown\", (event) => {\n event.preventDefault();\n event.stopPropagation();\n dragging = true;\n offsetX = element.offsetLeft - event.clientX;\n offsetY = element.offsetTop - event.clientY;\n clickPosition = {x: event.clientX, y: event.clientY};\n });\n\n document.addEventListener(\"mouseup\", (event) => {\n event.preventDefault();\n event.stopPropagation();\n dragging = false;\n\n if (clickPosition.x !== event.clientX || clickPosition.y !== event.clientY) {\n return;\n }\n\n setTimeout(() => {\n onTriggerClick({...event, target: element});\n }, 0);\n });\n\n document.addEventListener(\"mousemove\", (event) => {\n if (dragging) {\n const container = element.parentElement;\n const left = Math.max(Math.min(event.clientX + offsetX, container.clientWidth - element.offsetWidth), 0);\n const top = Math.max(Math.min(event.clientY + offsetY, container.clientHeight - element.offsetHeight), 0);\n element.style.left = `${left}px`;\n element.style.top = `${top}px`;\n }\n });\n};\n\nconst StoryMeta = {\n title: \"ZPopover\",\n component: \"z-popover\",\n argTypes: {\n \"position\": {\n options: [null, ...Object.values(PopoverPosition).filter((value) => value !== PopoverPosition.AUTO)],\n control: {\n type: \"select\",\n labels: {\n null: \"-\",\n },\n },\n },\n \"--z-popover-theme--surface\": getColorTokenArgConfig(),\n \"--z-popover-theme--text\": getColorTokenArgConfig(),\n },\n args: {\n \"position\": null,\n \"--z-popover-theme--surface\": \"var(--color-surface01)\",\n \"--z-popover-theme--text\": \"var(--color-default-text)\",\n \"--z-popover-padding\": \"0\",\n },\n parameters: {\n onTriggerClick,\n docs: {\n story: {\n inline: false,\n iframeHeight: 500,\n },\n },\n },\n} satisfies Meta<ZPopoverStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZPopoverStoriesArgs>;\n\nexport const Demo = {\n args: {\n \"--z-popover-padding\": \"var(--space-unit)\",\n \"--z-popover-shadow-filter\": \"drop-shadow(0 1px 2px var(--shadow-color-base))\",\n \"center\": false,\n \"showArrow\": false,\n \"closable\": true,\n },\n render: (args) => {\n document.addEventListener(\"DOMContentLoaded\", () => {\n const trigger = document.querySelector(\"#demo-trigger\");\n if (trigger) {\n makeDraggable(trigger as HTMLElement);\n }\n });\n\n return html`\n <div class=\"popover-container\">\n <z-popover\n style=${styleMap({\n \"--z-popover-theme--surface\": args[\"--z-popover-theme--surface\"],\n \"--z-popover-theme--text\": args[\"--z-popover-theme--text\"],\n \"--z-popover-padding\": args[\"--z-popover-padding\"],\n })}\n .position=${args.position}\n .center=${args.center}\n .showArrow=${args.showArrow}\n bind-to=\"#demo-trigger\"\n >\n <div class=\"popover-content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n </div>\n </z-popover>\n <z-button\n id=\"demo-trigger\"\n icon=\"plus-filled\"\n ></z-button>\n </div>\n <p class=\"heading-2\">You can move the button to see the positioning adaptation while the popover is open.</p>\n `;\n },\n} satisfies Story;\n\nexport const ContextualMenuLike = {\n args: {\n \"--z-popover-theme--surface\": \"var(--color-surface01)\",\n \"--z-popover-padding\": \"var(--space-unit)\",\n \"position\": PopoverPosition.RIGHT_BOTTOM,\n },\n render: (args, {parameters}) => html`\n <div class=\"popover-container\">\n <z-popover\n style=${styleMap({\n \"--z-popover-theme--surface\": args[\"--z-popover-theme--surface\"],\n \"--z-popover-theme--text\": args[\"--z-popover-theme--text\"],\n \"--z-popover-padding\": args[\"--z-popover-padding\"],\n })}\n .position=${args.position}\n bind-to=\"#trigger\"\n >\n <z-list>\n <z-list-element divider-type=\"element\">Elemento 1</z-list-element>\n <z-list-element divider-type=\"element\">Elemento 2</z-list-element>\n <z-list-element>Elemento 3</z-list-element>\n </z-list>\n </z-popover>\n <z-button\n id=\"trigger\"\n icon=\"plus-filled\"\n .onclick=${parameters.onTriggerClick}\n ></z-button>\n </div>\n `,\n} satisfies Story;\n\nexport const Tooltip = {\n args: {\n \"position\": PopoverPosition.RIGHT,\n \"--z-popover-padding\": \"var(--space-unit)\",\n },\n render: (args, {parameters}) =>\n html` <div class=\"popover-container popover-container-tooltip\">\n <z-popover\n style=${styleMap({\n \"--z-popover-theme--surface\": args[\"--z-popover-theme--surface\"],\n \"--z-popover-theme--text\": args[\"--z-popover-theme--text\"],\n \"--z-popover-padding\": args[\"--z-popover-padding\"],\n })}\n .position=${args.position}\n center=\"true\"\n show-arrow=\"true\"\n bind-to=\"#trigger\"\n >\n <div class=\"popover-content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua.\n </div>\n </z-popover>\n <z-button\n id=\"trigger\"\n icon=\"plus-filled\"\n .onclick=${parameters.onTriggerClick}\n ></z-button>\n </div>`,\n} satisfies Story;\n\nexport const TooltipWithNestedContainer = {\n args: {\n \"position\": PopoverPosition.TOP,\n \"--z-popover-padding\": \"var(--space-unit)\",\n },\n render: (args, {parameters}) =>\n html` <div class=\"popover-container popover-container-tooltip\">\n <div class=\"popover-internal-container\">\n <div class=\"popover-internal-container-2\">\n <z-popover\n style=${styleMap({\n \"--z-popover-theme--surface\": args[\"--z-popover-theme--surface\"],\n \"--z-popover-theme--text\": args[\"--z-popover-theme--text\"],\n \"--z-popover-padding\": args[\"--z-popover-padding\"],\n })}\n .position=${args.position}\n center=\"true\"\n show-arrow=\"true\"\n bind-to=\"#trigger\"\n >\n <div class=\"popover-content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n </div>\n </z-popover>\n <z-button\n id=\"trigger\"\n icon=\"plus-filled\"\n .onclick=${parameters.onTriggerClick}\n ></z-button>\n </div>\n </div>\n </div>`,\n} satisfies Story;\n"]}
|
|
@@ -4,21 +4,16 @@
|
|
|
4
4
|
--z-popover-padding: ;
|
|
5
5
|
--z-popover-shadow-filter: ;
|
|
6
6
|
|
|
7
|
-
position:
|
|
7
|
+
position: fixed;
|
|
8
8
|
display: none;
|
|
9
|
-
|
|
10
|
-
max-
|
|
11
|
-
min-height: calc(var(--space-unit) * 4);
|
|
12
|
-
max-height: 100%;
|
|
13
|
-
align-items: center;
|
|
14
|
-
justify-content: center;
|
|
9
|
+
max-width: calc(100% - var(--grid-margin) * 2);
|
|
10
|
+
max-height: calc(100% - var(--grid-margin) * 2);
|
|
15
11
|
padding: var(--z-popover-padding, 0);
|
|
16
12
|
background: var(--z-popover-theme--surface, var(--color-surface01));
|
|
17
13
|
border-radius: var(--border-radius-small);
|
|
18
14
|
color: var(--z-popover-theme--text, var(--color-default-text));
|
|
19
15
|
fill: currentcolor;
|
|
20
16
|
filter: var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));
|
|
21
|
-
font-family: var(--font-family-sans);
|
|
22
17
|
text-align: center;
|
|
23
18
|
}
|
|
24
19
|
|
|
@@ -28,7 +23,7 @@
|
|
|
28
23
|
|
|
29
24
|
:host([open][current-position]),
|
|
30
25
|
:host([open="true"][current-position]) {
|
|
31
|
-
display:
|
|
26
|
+
display: block;
|
|
32
27
|
}
|
|
33
28
|
|
|
34
29
|
:host([center][current-position="top"]),
|
|
@@ -146,8 +141,3 @@
|
|
|
146
141
|
top: var(--arrow-center-x-offset);
|
|
147
142
|
bottom: auto;
|
|
148
143
|
}
|
|
149
|
-
|
|
150
|
-
::slotted(*) {
|
|
151
|
-
overflow: auto;
|
|
152
|
-
flex: 1 auto;
|
|
153
|
-
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { ControlSize, KeyboardCode, ListDividerType, ListSize } from "../../beans";
|
|
3
|
-
import { boolean, getClickedElement, getElementTree,
|
|
3
|
+
import { boolean, getClickedElement, getElementTree, randomId } from "../../utils/utils";
|
|
4
4
|
export class ZSelect {
|
|
5
5
|
constructor() {
|
|
6
6
|
this.itemsList = [];
|
|
@@ -324,10 +324,8 @@ export class ZSelect {
|
|
|
324
324
|
}, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, "aria-expanded": this.isOpen ? "true" : "false", "aria-label": this.ariaLabel, "aria-controls": `${this.htmlid}_list`, "aria-autocomplete": this.hasAutocomplete() ? "list" : "none", "aria-activedescendant": this.isOpen ? this.focusedItemId : "", icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutocomplete(), message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, role: "combobox", size: this.size, onClick: (e) => {
|
|
325
325
|
this.handleInputClick(e);
|
|
326
326
|
}, onKeyUp: (e) => {
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
}
|
|
330
|
-
handleKeyboardSubmit(e, this.toggleSelectUl);
|
|
327
|
+
e.preventDefault();
|
|
328
|
+
this.toggleSelectUl();
|
|
331
329
|
}, onKeyDown: (e) => {
|
|
332
330
|
const current = this.selectedItem
|
|
333
331
|
? this.itemIdKeyMap[this.selectedItem.id]
|
|
@@ -471,7 +469,7 @@ export class ZSelect {
|
|
|
471
469
|
return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
|
|
472
470
|
}
|
|
473
471
|
render() {
|
|
474
|
-
return (h("div", { key: '
|
|
472
|
+
return (h("div", { key: 'c3edf9b0bcf842deb48b5c62f994be9d5025d34f', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
|
|
475
473
|
}
|
|
476
474
|
static get is() { return "z-select"; }
|
|
477
475
|
static get encapsulation() { return "scoped"; }
|