text: (window.webpackJsonp=window.webpackJsonp||[]).push([[17],{419:function(t,a,s){"use strict";s.r(a);var n=s(53),e=(s(100),{data:function(){return{isDialogOpen:!1}},methods:{advancedAlert:function(){this.$refs.dialog.alert("This alert has a heading and a custom confirmation button label.",{heading:"Alert!",confirmLabel:"Okey dokey"})},confirmation:function(){var t=this;return Object(n.a)(regeneratorRuntime.mark((function a(){var s;return regeneratorRuntime.wrap((function(a){for(;;)switch(a.prev=a.next){case 0:return a.next=2,t.$refs.dialog.confirm("Are you sure about this?");case 2:s=a.sent,t.$refs.dialog.alert(s?"You clicked Okay.":"You did not click Okay.");case 4:case"end":return a.stop()}}),a)})))()},advancedConfirmation:function(){var t=this;return Object(n.a)(regeneratorRuntime.mark((function a(){var s,n;return regeneratorRuntime.wrap((function(a){for(;;)switch(a.prev=a.next){case 0:return s={heading:"Pancakes",confirmLabel:"Yes please",cancelLabel:"No, I do not want pancakes"},a.next=3,t.$refs.dialog.confirm("Would you like some pancakes?",s);case 3:n=a.sent,t.$refs.dialog.alert(n?"You accepted the pancakes.":"You declined the pancakes.");case 5:case"end":return a.stop()}}),a)})))()}}}),r=s(46),o=Object(r.a)(e,(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"dialogs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dialogs"}},[t._v("#")]),t._v(" Dialogs")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("mx-dialog")]),t._v(" component is used to inform users about a task and can contain critical information, require decisions, or involve multiple tasks. For more complex UI, a "),s("RouterLink",{attrs:{to:"/components/modals.html"}},[t._v("Modal")]),t._v(" may be preferrable. If user interruption is not strictly required, consider using a "),s("RouterLink",{attrs:{to:"/components/banners.html"}},[t._v("Banner")]),t._v(" or "),s("RouterLink",{attrs:{to:"/components/snackbars.html"}},[t._v("Snackbar")]),t._v(" instead.")],1),t._v(" "),s("h3",{attrs:{id:"simple-dialogs-via-methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#simple-dialogs-via-methods"}},[t._v("#")]),t._v(" Simple dialogs via methods")]),t._v(" "),s("p",[t._v("Currently, "),s("code",[t._v("mx-dialog")]),t._v(" exposes two methods: "),s("code",[t._v("alert()")]),t._v(" and "),s("code",[t._v("confirm()")]),t._v(", which are intended to be replacements for "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/alert",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v("Window.alert()")]),s("OutboundLink")],1),t._v(" and "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v("Window.confirm()")]),s("OutboundLink")],1),t._v(" respectively. The signatures for these two methods are identical, but with different default values for "),s("code",[t._v("confirmLabel")]),t._v(" and "),s("code",[t._v("cancelLabel")]),t._v(" (to match the behavior of the aforementioned "),s("code",[t._v("Window")]),t._v(" methods).")]),t._v(" "),s("p",[t._v("For simple dialogs without markup, it is possible to use a single instance of the "),s("code",[t._v("mx-dialog")]),t._v(" element to invoke every dialog needed for the page.")]),t._v(" "),s("section",{staticClass:"mds"},[s("div",{staticClass:"flex flex-col items-start space-y-20"},[s("mx-button",{on:{click:function(){return t.$refs.dialog.alert("Greetings!")}}},[t._v("Basic Alert Call")]),t._v(" "),s("mx-button",{on:{click:t.advancedAlert}},[t._v("Advanced Alert Call")]),t._v(" "),s("mx-button",{on:{click:t.confirmation}},[t._v("Basic Confirm Call")]),t._v(" "),s("mx-button",{on:{click:t.advancedConfirmation}},[t._v("Advanced Confirm Call")]),t._v(" "),s("mx-dialog",{ref:"dialog"})],1)]),t._v(" "),s("div",{staticClass:"language-md line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mx-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("() => $refs.dialog.alert("),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("Greetings!"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Basic Alert Call"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mx-button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mx-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("advancedAlert"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Advanced Alert Call"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mx-button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mx-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("confirmation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Basic Confirm Call"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mx-button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mx-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("advancedConfirmation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Advanced Confirm Call"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mx-button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mx-dialog")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dialog"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])])])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br")])]),s("div",{staticClass:"language-md line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[t._v("advancedAlert() {\n  const options = { heading: 'Alert!', confirmLabel: 'Okey dokey'}\n  this.$refs.dialog.alert('This alert has a heading and a custom confirmation button label.', options)\n},\nasync confirmation() {\n  const confirmed = await this.$refs.dialog.confirm('Are you sure about this?')\n  this.$refs.dialog.alert(confirmed ? 'You clicked Okay.' : 'You did not click Okay.')\n},\nasync advancedConfirmation() {\n  const options = { heading: 'Pancakes', confirmLabel: 'Yes please', cancelLabel: 'No, I do not want pancakes'}\n  const confirmed = await this.$refs.dialog.confirm('Would you like some pancakes?', options)\n  this.$refs.dialog.alert(confirmed ? 'You accepted the pancakes.' : 'You declined the pancakes.')\n}")])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br"),s("span",{staticClass:"line-number"},[t._v("5")]),s("br"),s("span",{staticClass:"line-number"},[t._v("6")]),s("br"),s("span",{staticClass:"line-number"},[t._v("7")]),s("br"),s("span",{staticClass:"line-number"},[t._v("8")]),s("br"),s("span",{staticClass:"line-number"},[t._v("9")]),s("br"),s("span",{staticClass:"line-number"},[t._v("10")]),s("br"),s("span",{staticClass:"line-number"},[t._v("11")]),s("br"),s("span",{staticClass:"line-number"},[t._v("12")]),s("br")])]),s("h3",{attrs:{id:"advanced-dialogs-via-slots"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#advanced-dialogs-via-slots"}},[t._v("#")]),t._v(" Advanced dialogs via slots")]),t._v(" "),s("p",[t._v("For more advanced dialog layouts, pass the markup into the default slot, as well as the "),s("code",[t._v("heading")]),t._v(" and "),s("code",[t._v("buttons")]),t._v(" slots, and use the "),s("code",[t._v("isOpen")]),t._v(" prop to toggle the dialog. The dialog\nemits an "),s("code",[t._v("mxClose")]),t._v(" event that may be useful to update the "),s("code",[t._v("isOpen")]),t._v(" boolean in state.")]),t._v(" "),s("section",{staticClass:"mds"},[s("div",{staticClass:"flex flex-col items-start space-y-20"},[s("mx-button",{on:{click:function(a){t.isDialogOpen=!t.isDialogOpen}}},[t._v("Open Dialog")]),t._v(" "),s("mx-dialog",{attrs:{"modal-class":"w-320 sm:w-480 max-h-480"},domProps:{isOpen:t.isDialogOpen},on:{mxClose:function(a){t.isDialogOpen=!1}}},[s("span",{attrs:{slot:"heading"},slot:"heading"},[t._v("Create new audience with selected")]),t._v(" "),s("mx-input",{attrs:{label:"Audience Name"}}),t._v(" "),s("p",{staticClass:"my-16"},[t._v("4,800 contacts will be added to this audience.")]),t._v(" "),s("p",[t._v("\n        We only wear jeans or track pants on Friday. You can’t wear a tank top two days in a row. You can only wear your hair in a ponytail once a week. So, I guess, you picked today. And if you break any of these rules you can’t sit with us at lunch. I mean, not just you, any of us. Like, if I was wearing jeans today, I would be sitting over there with the art freaks.\n      ")]),t._v(" "),s("p",[t._v("\n        We always vote before we ask someone to eat lunch with us, because you have to be considerate of the rest of the group. I mean, you wouldn’t buy a skirt without asking your friends first if it looks good on you. It’s the same with guys. You may think you like someone, but you could be wrong.\n      ")]),t._v(" "),s("div",{attrs:{slot:"buttons"},slot:"buttons"},[s("mx-button",{attrs:{"btn-type":"text"},on:{click:function(a){t.isDialogOpen=!1}}},[t._v("\n          Cancel\n        ")]),t._v(" "),s("mx-button",{attrs:{"btn-type":"text"},on:{click:function(a){t.isDialogOpen=!1}}},[t._v("\n          Save & Add\n        ")])],1)],1)],1)]),t._v(" "),s("div",{staticClass:"language-md line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-md"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mx-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("isDialogOpen = !isDialogOpen"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Open Dialog"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mx-button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mx-dialog")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":is-open.prop")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("isDialogOpen"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("modal-class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("w-320 sm:w-480 max-h-480"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@mxClose")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("isDialogOpen = false"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("heading"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Create new audience with selected"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("span")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mx-input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("label")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Audience Name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("my-16"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("4,800 contacts will be added to this audience."),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    We only wear jeans or track pants on Friday. You can’t wear a tank top two days in a row. You can only wear your hair in a ponytail once a week. So, I guess, you picked today. And if you break any of these rules you can’t sit with us at lunch. I mean, not just you, any of us. Like, if I was wearing jeans today, I would be sitting over there with the art freaks.\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    We always vote before we ask someone to eat lunch with us, because you have to be considerate of the rest of the group. I mean, you wouldn’t buy a skirt without asking your friends first if it looks good on you. It’s the same with guys. You may think you like someone, but you could be wrong.\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("buttons"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mx-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("btn-type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("isDialogOpen = false"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      Cancel\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mx-button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mx-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("btn-type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("isDialogOpen = false"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      Save "),s("span",{pre:!0,attrs:{class:"token entity named-entity",title:"&"}},[t._v("&amp;")]),t._v(" Add\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mx-button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mx-dialog")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])])])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br"),s("span",{staticClass:"line-number"},[t._v("5")]),s("br"),s("span",{staticClass:"line-number"},[t._v("6")]),s("br"),s("span",{staticClass:"line-number"},[t._v("7")]),s("br"),s("span",{staticClass:"line-number"},[t._v("8")]),s("br"),s("span",{staticClass:"line-number"},[t._v("9")]),s("br"),s("span",{staticClass:"line-number"},[t._v("10")]),s("br"),s("span",{staticClass:"line-number"},[t._v("11")]),s("br"),s("span",{staticClass:"line-number"},[t._v("12")]),s("br"),s("span",{staticClass:"line-number"},[t._v("13")]),s("br"),s("span",{staticClass:"line-number"},[t._v("14")]),s("br"),s("span",{staticClass:"line-number"},[t._v("15")]),s("br"),s("span",{staticClass:"line-number"},[t._v("16")]),s("br"),s("span",{staticClass:"line-number"},[t._v("17")]),s("br"),s("span",{staticClass:"line-number"},[t._v("18")]),s("br"),s("span",{staticClass:"line-number"},[t._v("19")]),s("br"),s("span",{staticClass:"line-number"},[t._v("20")]),s("br"),s("span",{staticClass:"line-number"},[t._v("21")]),s("br"),s("span",{staticClass:"line-number"},[t._v("22")]),s("br"),s("span",{staticClass:"line-number"},[t._v("23")]),s("br")])]),s("h3",{attrs:{id:"properties"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[t._v("#")]),t._v(" Properties")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Property")]),t._v(" "),s("th",[t._v("Attribute")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Type")]),t._v(" "),s("th",[t._v("Default")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("isOpen")])]),t._v(" "),s("td",[s("code",[t._v("is-open")])]),t._v(" "),s("td",[t._v("Toggles the visibility of the dialog (when using the slots for content).")]),t._v(" "),s("td",[s("code",[t._v("boolean")])]),t._v(" "),s("td",[s("code",[t._v("false")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("modalClass")])]),t._v(" "),s("td",[s("code",[t._v("modal-class")])]),t._v(" "),s("td",[t._v("Additional classes to apply to the inner modal element.")]),t._v(" "),s("td",[s("code",[t._v("string")])]),t._v(" "),s("td",[s("code",[t._v("undefined")])])])])]),t._v(" "),s("h3",{attrs:{id:"methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[t._v("#")]),t._v(" Methods")]),t._v(" "),s("h4",{attrs:{id:"alert-message-string-confirmlabel-cancellabel-heading-dialogoptions-promise-void"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#alert-message-string-confirmlabel-cancellabel-heading-dialogoptions-promise-void"}},[t._v("#")]),t._v(" "),s("code",[t._v("alert(message: string, { confirmLabel, cancelLabel, heading }?: DialogOptions) => Promise<void>")])]),t._v(" "),s("p",[t._v("A Promise-based replacement for "),s("code",[t._v("Window.alert()")]),t._v(" with some additional options")]),t._v(" "),s("h4",{attrs:{id:"confirm-message-string-confirmlabel-cancellabel-heading-dialogoptions-promise-boolean"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#confirm-message-string-confirmlabel-cancellabel-heading-dialogoptions-promise-boolean"}},[t._v("#")]),t._v(" "),s("code",[t._v("confirm(message: string, { confirmLabel, cancelLabel, heading }?: DialogOptions) => Promise<boolean>")])]),t._v(" "),s("p",[t._v("A Promise-based replacement for "),s("code",[t._v("Window.confirm()")]),t._v(" that resolves to a boolean")]),t._v(" "),s("h3",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[t._v("#")]),t._v(" Events")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Event")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Type")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("mxClose")])]),t._v(" "),s("td"),t._v(" "),s("td",[s("code",[t._v("CustomEvent<void>")])])])])]),t._v(" "),s("h3",{attrs:{id:"css-variables"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#css-variables"}},[t._v("#")]),t._v(" CSS Variables")]),t._v(" "),s("div",{staticClass:"language-scss line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-scss"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Dialogs */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--mds-bg-dialog-backdrop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--mds-bg-dialog-scroll-thumb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #d4d4d4"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--mds-bg-dialog")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #f8f8f8"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--mds-text-dialog")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #333"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])])]),t._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[t._v("1")]),s("br"),s("span",{staticClass:"line-number"},[t._v("2")]),s("br"),s("span",{staticClass:"line-number"},[t._v("3")]),s("br"),s("span",{staticClass:"line-number"},[t._v("4")]),s("br")])])])}),[],!1,null,null,null);a.default=o.exports}}]);