{"version":3,"file":"styles.css","mappings":"AAkKA,gBAIA,8DACA,2GAGA,CALA,gDAFA,8BACA,cAOA,+BACA,CAEA,oCACA,gBAGA,8BADA,iBADA,WAGA,CACA,CC5KA,gBACA,YACA,CCoKA,gBACA,kBACA,SACA,CAEA,gBAOA,qBAHA,SAEA,aAEA,uBAHA,OAJA,eAEA,QADA,KAOA,CAEA,gBAKA,2GAGA,CALA,6BACA,gBAHA,kBACA,UAOA,CAEA,oCACA,gBACA,kBACA,CAEA,gBAMA,kBACA,kCANA,qBAEA,YACA,6BACA,gBAHA,UAMA,CACA,CAEA,gBAMA,sDAFA,SACA,OAJA,eAEA,QADA,KAKA,CAMA,gBAEA,gBADA,cAEA,CAEA,oCACA,gBACA,eACA,CACA","sources":["webpack://@square/maker/./src/components/Dialog/src/Dialog.vue","webpack://@square/maker/./src/components/Dialog/src/DialogContent.vue","webpack://@square/maker/./src/components/Dialog/src/DialogLayer.vue"],"sourcesContent":["<template>\n\t<m-touch-capture\n\t\tref=\"dialog\"\n\t\trole=\"dialog\"\n\t\taria-modal=\"true\"\n\t\t:class=\"$s.Dialog\"\n\t\t:style=\"style\"\n\t\t:prevent-default=\"preventDefault\"\n\t\tv-bind=\"$attrs\"\n\t\t:aria-labelledby=\"ariaLabelledby\"\n\t\t@scroll.native=\"onScroll\"\n\t\t@on-drag-down=\"onDragDown\"\n\t\t@on-drag-end=\"onDragEnd\"\n\t\t@on-swipe-down=\"onSwipeDown\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<!-- @slot Dialog content -->\n\t\t<slot />\n\t</m-touch-capture>\n</template>\n\n<script>\nimport cssValidator from '@square/maker/utils/css-validator';\nimport { throttle } from 'lodash';\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\nimport { MTouchCapture } from '@square/maker/components/TouchCapture';\nimport dialogApi from './dialog-api';\n\nexport default {\n\tname: 'Dialog',\n\n\tcomponents: {\n\t\tMTouchCapture,\n\t},\n\n\tinject: {\n\t\tdialogApi,\n\t\ttheme: {\n\t\t\tdefault: defaultTheme(),\n\t\t\tfrom: MThemeKey,\n\t\t},\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Background color of dialog\n\t\t */\n\t\tbgColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('color'),\n\t\t},\n\t\t/**\n\t\t * Text color of dialog\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('color'),\n\t\t},\n\n\t\t/**\n\t\t * Toggle to allow swiping the dialog away\n\t\t */\n\t\tcloseOnSwipeDown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * The ID of the element that labels the dialog.\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tdata() {\n\t\tconst scrollCheckDelay = 800;\n\t\treturn {\n\t\t\tdialogStyles: {},\n\t\t\tisScrolledToTop: true,\n\t\t\tonScroll: throttle(this.setScrollTop, scrollCheckDelay),\n\t\t\tpreventDefault: false,\n\t\t};\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('dialog', [\n\t\t\t'bgColor',\n\t\t\t'color',\n\t\t]),\n\n\t\tstyle() {\n\t\t\treturn {\n\t\t\t\t'--bg-color': this.resolvedBgColor,\n\t\t\t\t'--color': this.resolvedColor,\n\t\t\t\t...this.dialogStyles,\n\t\t\t};\n\t\t},\n\t},\n\n\tmethods: {\n\t\tsetScrollTop() {\n\t\t\tif (!this.closeOnSwipeDown) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst scrollTop = this.$refs?.dialog?.$el?.scrollTop || 0;\n\t\t\tthis.isScrolledToTop = scrollTop <= 0;\n\t\t},\n\n\t\tonSwipeDown() {\n\t\t\tif (!this.closeOnSwipeDown) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (this.isScrolledToTop) {\n\t\t\t\tthis.preventDefault = true;\n\t\t\t\tthis.dialogApi.close();\n\t\t\t}\n\t\t},\n\n\t\tonDragDown(gesture) {\n\t\t\tif (!this.closeOnSwipeDown) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (this.isScrolledToTop) {\n\t\t\t\tthis.preventDefault = true;\n\t\t\t\tthis.dialogStyles = {\n\t\t\t\t\ttransform: `translateY(${gesture.changeY}px)`,\n\t\t\t\t\t'backface-visibility': 'hidden',\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\ttransition: 'none',\n\t\t\t\t};\n\t\t\t}\n\t\t},\n\n\t\tonDragEnd(gesture) {\n\t\t\tif (!this.closeOnSwipeDown) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Pixels dialog must be dragged to close on release\n\t\t\tconst minDragCloseDistance = 50;\n\t\t\tif (this.isScrolledToTop\n\t\t\t&& gesture.changeY > minDragCloseDistance) {\n\t\t\t\tthis.dialogApi.close();\n\t\t\t} else {\n\t\t\t\tthis.preventDefault = false;\n\t\t\t\tthis.dialogStyles = {};\n\t\t\t}\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Dialog {\n\tmax-height: calc(100vh - 48px);\n\toverflow: auto;\n\tcolor: var(--color, $maker-color-body);\n\tbackground: var(--bg-color, $maker-color-background);\n\tborder-radius:\n\t\t$maker-shape-default-border-radius\n\t\t$maker-shape-default-border-radius\n\t\t0 0;\n\ttransition: transform 0.2s linear;\n}\n\n@media screen and (--for-tablet-landscape-up) {\n\t.Dialog {\n\t\twidth: 400px;\n\t\tmin-height: 180px;\n\t\tmax-height: calc(100vh - 64px);\n\t}\n}\n</style>\n","<template>\n\t<div :class=\"$s.DialogContent\">\n\t\t<!-- @slot Dialog Content content (gets correct padding) -->\n\t\t<slot />\n\t</div>\n</template>\n\n<style module=\"$s\">\n.DialogContent {\n\tpadding: 24px;\n}\n</style>\n","<template>\n\t<div :class=\"$s.Layer\">\n\t\t<m-transition-fade-in>\n\t\t\t<div\n\t\t\t\tv-if=\"dialogApi.state.renderFn\"\n\t\t\t\t:class=\"$s.Translucent\"\n\t\t\t/>\n\t\t</m-transition-fade-in>\n\t\t<m-transition-responsive :transitions=\"transitions\">\n\t\t\t<div\n\t\t\t\tv-if=\"dialogApi.state.renderFn\"\n\t\t\t\t:class=\"$s.DialogLayer\"\n\t\t\t\t@click.capture=\"closeOnClickOutside\"\n\t\t\t>\n\t\t\t\t<pseudo-window\n\t\t\t\t\tbody\n\t\t\t\t\t:class=\"$s.disableScroll\"\n\t\t\t\t/>\n\t\t\t\t<pseudo-window\n\t\t\t\t\tdocument\n\t\t\t\t\t@keyup.esc=\"closeOnEsc\"\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tref=\"dialog\"\n\t\t\t\t\t:class=\"$s.DialogContentWrapper\"\n\t\t\t\t>\n\t\t\t\t\t<render-fn :render-fn=\"dialogApi.state.renderFn\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</m-transition-responsive>\n\t</div>\n</template>\n\n<script>\nimport Vue, { inject, provide } from 'vue';\nimport PseudoWindow from 'vue-pseudo-window';\nimport { MTransitionFadeIn } from '@square/maker/components/TransitionFadeIn';\nimport { MTransitionResponsive } from '@square/maker/components/TransitionResponsive';\nimport {\n\tspringUpFn,\n\tspringDownFn,\n\tfloatUpFn,\n\tfloatDownFn,\n\tmobileMinWidth,\n\ttabletMinWidth,\n} from '@square/maker/utils/transitions';\nimport RenderFn from '@square/maker/utils/RenderFn';\nimport dialogApi from './dialog-api';\n\nfunction createDialogApi() {\n\treturn {\n\t\tstate: Vue.observable({\n\t\t\trenderFn: undefined,\n\t\t\toptions: {},\n\t\t}),\n\n\t\topen(renderFn, options = {}) {\n\t\t\tthis.state.renderFn = renderFn;\n\t\t\tthis.state.options = options;\n\n\t\t\t// function that only closes this specific dialog\n\t\t\treturn () => {\n\t\t\t\t// no dialog open, so closing trivially \"succeeds\"\n\t\t\t\tif (!this.state.renderFn) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\t// we can attempt to close this dialog\n\t\t\t\tif (this.state.renderFn === renderFn) {\n\t\t\t\t\t// BUT closing might still be blocked by\n\t\t\t\t\t// a beforeClose hook\n\t\t\t\t\treturn this.close();\n\t\t\t\t}\n\t\t\t\t// dialog changed since we returned this function\n\t\t\t\t// hence we cannot close a dialog we did not open\n\t\t\t\treturn false;\n\t\t\t};\n\t\t},\n\n\t\tasync close(closeData) {\n\t\t\t// no dialog to close, so closing is \"successful\"\n\t\t\tif (!this.state.renderFn) {\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\t// check beforeClose hook, if present\n\t\t\tif (typeof this.state.options.beforeCloseHook === 'function') {\n\t\t\t\tif (!(await this.state.options.beforeCloseHook(closeData))) {\n\t\t\t\t\treturn false; // closing failed\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.state.renderFn = undefined;\n\t\t\tthis.state.options.afterCloseHook?.(closeData);\n\t\t\treturn true;\n\t\t},\n\t};\n}\n\nexport const useDialogLayer = () => {\n\tconst parentDialogApi = inject(dialogApi, undefined);\n\tconst api = createDialogApi();\n\n\tprovide(dialogApi, api);\n\n\treturn { dialogApi: parentDialogApi || api };\n};\n\nconst apiMixin = {\n\tprovide() {\n\t\tconst api = createDialogApi();\n\n\t\tif (!this.dialogApi) {\n\t\t\tthis.dialogApi = api;\n\t\t}\n\n\t\treturn {\n\t\t\t[dialogApi]: api,\n\t\t};\n\t},\n};\n\nexport default {\n\tcomponents: {\n\t\tRenderFn,\n\t\tPseudoWindow,\n\t\tMTransitionFadeIn,\n\t\tMTransitionResponsive,\n\t},\n\n\tinject: {\n\t\tdialogApi,\n\t},\n\n\tinheritAttrs: false,\n\n\tapiMixin,\n\tuseDialogLayer,\n\n\tdata() {\n\t\treturn {\n\t\t\ttransitions: [{\n\t\t\t\tminWidth: mobileMinWidth,\n\t\t\t\tenter: springUpFn,\n\t\t\t\tleave: springDownFn,\n\t\t\t}, {\n\t\t\t\tminWidth: tabletMinWidth,\n\t\t\t\tenter: floatUpFn,\n\t\t\t\tleave: floatDownFn,\n\t\t\t}],\n\t\t};\n\t},\n\n\tmethods: {\n\t\tcloseOnClickOutside(event) {\n\t\t\tconst { closeOnClickOutside } = this.dialogApi.state.options;\n\t\t\tconst { dialog } = this.$refs;\n\n\t\t\tif (dialog && closeOnClickOutside && !dialog.contains(event.target)) {\n\t\t\t\tthis.dialogApi.close();\n\t\t\t}\n\t\t},\n\t\tcloseOnEsc() {\n\t\t\tconst { closeOnEsc } = this.dialogApi.state.options;\n\t\t\tconst { dialog } = this.$refs;\n\n\t\t\tif (dialog && closeOnEsc) {\n\t\t\t\tthis.dialogApi.close();\n\t\t\t}\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Layer {\n\tposition: relative;\n\tz-index: 1;\n}\n\n.DialogLayer {\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tdisplay: flex;\n\talign-items: flex-end;\n\tjustify-content: center;\n}\n\n.DialogContentWrapper {\n\tposition: relative;\n\twidth: 100%;\n\tmax-height: calc(100% - 48px);\n\toverflow: hidden;\n\tborder-radius:\n\t\t$maker-shape-default-border-radius\n\t\t$maker-shape-default-border-radius\n\t\t0 0;\n}\n\n@media screen and (--for-tablet-landscape-up) {\n\t.DialogLayer {\n\t\talign-items: center;\n\t}\n\n\t.DialogContentWrapper {\n\t\tdisplay: inline-block;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tmax-height: calc(100% - 64px);\n\t\toverflow: hidden;\n\t\tborder-radius: 8px;\n\t\tbox-shadow: 0 0 24px 8px rgba(0, 0, 0, 0.3);\n\t}\n}\n\n.Translucent {\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tbackground-color: $maker-color-overlay;\n}\n\n/**\n * Position fixed prevents unnecessary body scrolling and jumpiness on Dialogs\n * when using the PinInput component inside of them on iOS devices\n */\n.disableScroll {\n\tposition: fixed;\n\toverflow: hidden;\n}\n\n@media screen and (--for-tablet-landscape-up) {\n\t.disableScroll {\n\t\tposition: initial;\n\t}\n}\n</style>\n"],"names":[],"sourceRoot":""}