@square/maker/components/Popover/styles.css.map

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AAgJA,gBACA,eACA,CC5FA,gBACA,SACA,CAEA,8CAEA,oBADA,iBAEA,CC0BA,gBAGA,oDACA,uDACA,2DACA,8BAJA,mCADA,sBAMA","sources":["webpack://@square/maker/./src/components/Popover/src/PopoverLayer.vue","webpack://@square/maker/./src/components/Popover/src/PopoverInstance.vue","webpack://@square/maker/./src/components/Popover/src/PopoverContent.vue"],"sourcesContent":["<template>\n\t<div>\n\t\t<pseudo-window @blur.passive=\"handleBlur\">\n\t\t\t<pseudo-window\n\t\t\t\t@mousedown=\"trackClickSrc\"\n\t\t\t\t@touchstart=\"trackClickSrc\"\n\t\t\t\t@click.capture=\"handleClick\"\n\t\t\t\t@touchend=\"handleClick\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\t:id=\"popoverApi.target\"\n\t\t\t\t\tref=\"portal\"\n\t\t\t\t\t:class=\"$s.PopoverLayer\"\n\t\t\t\t/>\n\t\t\t</pseudo-window>\n\t\t</pseudo-window>\n\t</div>\n</template>\n\n<script>\nimport { fadeInFn, fadeOutFn } from '@square/maker/utils/transitions';\nimport PseudoWindow from 'vue-pseudo-window';\nimport Vue, { inject, provide } from 'vue';\nimport { PopoverAPIKey } from './keys';\nimport { getPopoverId } from './utils';\n\nfunction createPopoverConfig() {\n\t/**\n\t * This is to avoid name collisions for the popover portal if\n\t * multiple exist at the same 'level'.\n\t */\n\tconst layerId = getPopoverId();\n\tconst target = `popover-portal-${layerId}`;\n\n\tconst api = Vue.observable({\n\t\tcurrentInstance: undefined,\n\t\tactionEl: undefined,\n\t\tignoreEls: [],\n\t\tclickSrc: undefined,\n\t\tlayerId,\n\t\ttarget,\n\t\ttargetSelector: `#${target}`,\n\t\tsetPopover(popoverData) {\n\t\t\tif (this.currentInstance) {\n\t\t\t\tthis.closePopover();\n\t\t\t}\n\n\t\t\tif (!popoverData || !popoverData.actionEl) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.actionEl = popoverData.actionEl;\n\t\t\tthis.ignoreEls = popoverData.ignoreEls;\n\t\t\tthis.currentInstance = popoverData.id;\n\t\t},\n\n\t\tclosePopover() {\n\t\t\tthis.currentInstance = undefined;\n\t\t},\n\t});\n\n\treturn { api, layerId, target };\n}\n\nconst usePopoverLayer = () => {\n\tconst { api } = createPopoverConfig();\n\tconst parentPopoverApi = inject(PopoverAPIKey, undefined);\n\n\tprovide(PopoverAPIKey, api);\n\n\treturn parentPopoverApi || api;\n};\n\nconst popoverMixin = {\n\tprovide() {\n\t\tconst { api } = createPopoverConfig();\n\n\t\tif (!this.popoverApi) {\n\t\t\tthis.popoverApi = api;\n\t\t}\n\n\t\treturn {\n\t\t\t[PopoverAPIKey]: api,\n\t\t};\n\t},\n};\n\nexport default {\n\tcomponents: {\n\t\tPseudoWindow,\n\t},\n\n\tinject: {\n\t\tpopoverApi: PopoverAPIKey,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tfadeInFn,\n\t\t\tfadeOutFn,\n\t\t};\n\t},\n\n\tpopoverMixin,\n\tusePopoverLayer,\n\n\tbeforeDestroy() {\n\t\tthis.popoverApi.closePopover();\n\t},\n\n\tmethods: {\n\t\thandleBlur() {\n\t\t\tif (document.activeElement !== document.body) {\n\t\t\t\tthis.popoverApi.closePopover();\n\t\t\t}\n\t\t},\n\n\t\ttrackClickSrc({ target }) {\n\t\t\tthis.popoverApi.clickSrc = target;\n\t\t},\n\n\t\thandleClick() {\n\t\t\tconst $portal = this.$refs.portal;\n\t\t\tif (!$portal || !this.popoverApi.clickSrc || !this.popoverApi.currentInstance) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst clickInContainer = $portal.contains(this.popoverApi.clickSrc);\n\t\t\tconst clickInAction = this.popoverApi.actionEl?.contains(this.popoverApi.clickSrc);\n\t\t\tconst clickInIgnores = this.popoverApi.ignoreEls?.some(\n\t\t\t\t(element) => element.contains?.(this.popoverApi.clickSrc),\n\t\t\t);\n\n\t\t\tif (!clickInContainer && !clickInAction && !clickInIgnores) {\n\t\t\t\tthis.popoverApi.closePopover();\n\t\t\t}\n\n\t\t\tthis.popoverApi.clickSrc = undefined;\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.PopoverLayer {\n\toverflow: hidden;\n}\n</style>\n","<template>\n\t<div :class=\"$s.PopoverInstance\">\n\t\t<!-- @slot Popover content -->\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport { createPopper } from '@popperjs/core';\n\nexport default {\n\tprops: {\n\t\tactionEl: {\n\t\t\ttype: undefined,\n\t\t\trequired: true,\n\t\t},\n\t\tpopperConfig: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.popper = createPopper(this.actionEl, this.$el, this.popperConfig);\n\t\tthis.resizeObserver = this.followPopoverAction();\n\n\t\tthis.$emit('popover-instance:new-popper', this.popper);\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.resizeObserver.disconnect();\n\t},\n\n\tupdated() {\n\t\tthis.popper.update();\n\t},\n\n\tmethods: {\n\t\tfollowPopoverAction() {\n\t\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\t\tthis.popper.update();\n\t\t\t\tthis.$emit('resize');\n\t\t\t});\n\n\t\t\tresizeObserver.observe(this.actionEl);\n\t\t\tresizeObserver.observe(document.body);\n\n\t\t\treturn resizeObserver;\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.PopoverInstance {\n\tz-index: 1;\n}\n\n.PopoverInstance[data-popper-reference-hidden] {\n\tvisibility: hidden;\n\tpointer-events: none;\n}\n</style>\n","<template>\n\t<!--\n\t\tPopoverContent is expected to render outside the Popover's Mtheme wrapper,\n\t\tdue to the recommended placement of MPopoverLayer.\n\t\tReturning a new MTheme wrapper for PopoverContent allows us to ensure that\n\t\tthe MTheme context of Popover and PopoverContent area always identical.\n\t-->\n\t<m-theme\n\t\t:class=\"$s.PopoverContent\"\n\t\t:style=\"styles\"\n\t\t:theme=\"theme\"\n\t>\n\t\t<!-- @slot Popover container content -->\n\t\t<slot />\n\t</m-theme>\n</template>\n\n<script>\nimport { colord } from 'colord';\nimport { MTheme } from '@square/maker/components/Theme';\nimport { WCAG_CONTRAST_TEXT, getContrast } from '@square/maker/utils/get-contrast';\nimport makerColors from '@square/maker/utils/maker-colors';\n\nexport default {\n\tcomponents: {\n\t\tMTheme,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Text color within the popover\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * Background color of the popover\n\t\t */\n\t\tbgColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * Popover padding\n\t\t */\n\t\tpadding: {\n\t\t\ttype: String,\n\t\t\tdefault: '24px',\n\t\t\tvalidator: (padding) => {\n\t\t\t\t// CSS not defined when rendering server-side\n\t\t\t\tif (global.CSS) {\n\t\t\t\t\treturn global.CSS.supports('padding', padding);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t},\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tstyles() {\n\t\t\treturn {\n\t\t\t\t'--padding': this.padding,\n\t\t\t};\n\t\t},\n\n\t\ttheme() {\n\t\t\tlet colors = {};\n\t\t\tif (this.bgColor) {\n\t\t\t\tcolors = makerColors(this.bgColor);\n\t\t\t}\n\t\t\tif (this.color) {\n\t\t\t\tcolors.heading = getContrast(colors.background, this.color);\n\t\t\t\tcolors.body = getContrast(colors.background, this.color, WCAG_CONTRAST_TEXT);\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tcolors,\n\t\t\t};\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.PopoverContent {\n\tpadding: var(--padding);\n\tcolor: $maker-color-body;\n\tbackground-color: $maker-color-background;\n\tborder: 1px solid $maker-color-neutral-10;\n\tborder-radius: $maker-shape-default-border-radius;\n\tbox-shadow: 0 0 18px 6px rgba(0, 0, 0, 0.2);\n}\n</style>\n"],"names":[],"sourceRoot":""}