[ { "path": ".babelrc", "content": "{\n \"presets\": [\"env\"],\n \"plugins\": [\n [\"transform-runtime\", {\n \"polyfill\": false,\n \"regenerator\": true\n }]\n ]\n}\n" }, { "path": ".editorconfig", "content": "# editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "" }, { "path": ".gitignore", "content": "*.codekit\n*.sass-cache\n*.DS_STORE\nnode_modules\nnpm-debug.log\ntypes\n\ndist\n" }, { "path": ".travis.yml", "content": "language: node_js\nnode_js:\n - \"6.9.1\"\nscript: npm run buildtest\n" }, { "path": "LICENSE.md", "content": "The MIT License (MIT)\n\nCopyright (c) 2014-present Tristan Edwards\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n" }, { "path": "README.md", "content": "

\n \n \"SweetAlert\"\n \n

\n\n

\n A beautiful replacement for JavaScript's \"alert\"\n

\n\n

\n \"npm\n \"Build\n \n \n \n \n \n \n \n

\n\n

\n \"A\n

\n\n\n## Installation\n\n```bash\n$ npm install --save sweetalert\n```\n\n## Usage\n\n```javascript\nimport swal from 'sweetalert';\n\nswal(\"Hello world!\");\n```\n\n## Upgrading from 1.X\n\nMany improvements and breaking changes have been introduced in the 2.0 release. Make sure you read the [upgrade guide](https://sweetalert.js.org/guides/#upgrading-from-1x) to avoid nasty surprises!\n\n## Guides\n\n- [Installation](https://sweetalert.js.org/guides/#installation)\n- [Getting started](https://sweetalert.js.org/guides/#getting-started)\n- [Advanced examples](https://sweetalert.js.org/guides/#advanced-examples)\n- [Using with libraries](https://sweetalert.js.org/guides/#using-with-libraries)\n- [Upgrading from 1.X](https://sweetalert.js.org/guides/#upgrading-from-1x)\n\n## Documentation\n\n- [Configuration](https://sweetalert.js.org/docs/#configuration)\n- [Methods](https://sweetalert.js.org/docs/#methods)\n- [Theming](https://sweetalert.js.org/docs/#theming)\n\n## Examples\n\n### An error message:\n```javascript\nswal(\"Oops!\", \"Something went wrong!\", \"error\");\n```\n\n### A warning message, with a function attached to the confirm message:\n - Using promises:\n ```javascript\n swal({\n title: \"Are you sure?\",\n text: \"Are you sure that you want to leave this page?\",\n icon: \"warning\",\n dangerMode: true,\n })\n .then(willDelete => {\n if (willDelete) {\n swal(\"Deleted!\", \"Your imaginary file has been deleted!\", \"success\");\n }\n });\n ```\n - Using async/await:\n ```javascript\n const willDelete = await swal({\n title: \"Are you sure?\",\n text: \"Are you sure that you want to delete this file?\",\n icon: \"warning\",\n dangerMode: true,\n });\n\n if (willDelete) {\n swal(\"Deleted!\", \"Your imaginary file has been deleted!\", \"success\");\n }\n ```\n \n### A prompt modal, where the user's input is logged:\n - Using promises:\n ```javascript\n swal(\"Type something:\", {\n content: \"input\",\n })\n .then((value) => {\n swal(`You typed: ${value}`);\n });\n ```\n - Using async/await:\n ```javascript\n const value = await swal(\"Type something:\", {\n content: \"input\",\n });\n\n swal(`You typed: ${value}`);\n ```\n\n### In combination with Fetch:\n - Using promises:\n ```javascript\n swal({\n text: \"Wanna log some information about Bulbasaur?\",\n button: {\n text: \"Search!\",\n closeModal: false,\n },\n })\n .then(willSearch => {\n if (willSearch) {\n return fetch(\"http://pokeapi.co/api/v2/pokemon/1\");\n }\n })\n .then(result => result.json())\n .then(json => console.log(json))\n .catch(err => {\n swal(\"Oops!\", \"Seems like we couldn't fetch the info\", \"error\");\n });\n ```\n - Using async/await:\n ```javascript\n const willSearch = await swal({\n text: \"Wanna log some information about Bulbasaur?\",\n button: {\n text: \"Search!\",\n closeModal: false,\n },\n });\n \n if (willSearch) {\n try {\n const result = await fetch(\"http://pokeapi.co/api/v2/pokemon/1\");\n const json = await result.json();\n console.log(json);\n } catch (err) {\n swal(\"Oops!\", \"Seems like we couldn't fetch the info\", \"error\");\n }\n }\n ```\n\n## Using with React\n\nSweetAlert has tools for [integrating with your favourite rendering library.](https://sweetalert.js.org/guides/#using-with-libraries).\n\nIf you're using React, you can install [SweetAlert with React](https://www.npmjs.com/package/@sweetalert/with-react) in addition to the main library, and easily add React components to your alerts like this:\n\n```javascript\nimport React from 'react'\nimport swal from '@sweetalert/with-react'\n\nswal(\n
\n

Hello world!

\n

\n This is now rendered with JSX!\n

\n
\n)\n```\n\n[Read more about integrating with React](https://sweetalert.js.org/guides/#using-react)\n\n## Contributing\n\n### If you're changing the core library:\n1. Make changes in the `src` folder.\n2. Preview changes by running `npm run docs`\n3. Submit pull request\n\n### If you're changing the documentation:\n1. Make changes in the `docs-src` folder.\n2. Preview changes by running `npm run docs`\n3. Run `npm run builddocs` to compile the changes to the `docs` folder\n4. Submit pull request\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](https://github.com/t4t5/sweetalert#contributing)].\n\n\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/SweetAlert#backer)]\n\n\n\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/SweetAlert#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n\n" }, { "path": "docs/CNAME", "content": "sweetalert.js.org\n" }, { "path": "docs/assets/css/app.css", "content": "body {\n margin: 0;\n padding: 0;\n}\na {\n text-decoration: none;\n color: #f27474;\n}\np a:hover {\n text-decoration: underline;\n}\nbutton {\n cursor: pointer;\n}\nbutton:focus {\n outline: none;\n}\nul {\n list-style-type: none;\n margin: 0;\n}\n.global-header {\n background-color: #fff;\n box-shadow: 0 1px 15px 0 rgba(192,72,25,0.32);\n height: 80px;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 100;\n}\n.global-header .logo {\n width: 162px;\n height: 36px;\n background-image: url(\"/assets/images/logo.svg\");\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n float: left;\n margin-top: 22px;\n margin-left: 15px;\n}\n@media all and (max-width: 600px) {\n .global-header .logo {\n float: none;\n height: 29px;\n display: block;\n margin: 0 auto;\n margin-top: 10px;\n }\n}\n.global-header nav {\n font-size: 17px;\n color: #f27474;\n float: right;\n margin-top: 29px;\n}\n@media all and (max-width: 600px) {\n .global-header nav {\n float: none;\n text-align: center;\n font-size: 16px;\n margin-top: 10px;\n }\n}\n.global-header nav a {\n position: relative;\n cursor: pointer;\n}\n.global-header nav a::before {\n content: \"\";\n background-color: #f27474;\n height: 3px;\n border-radius: 2px;\n position: absolute;\n left: 0;\n right: 0;\n bottom: -5px;\n display: none;\n}\n.global-header nav a:hover::before {\n display: block;\n}\n.global-header nav .github-icon {\n width: 26px;\n height: 25px;\n background-image: url(\"/assets/images/github.svg\");\n display: inline-block;\n vertical-align: middle;\n position: relative;\n top: -3px;\n}\n.global-header ul {\n white-space: nowrap;\n padding: 0;\n}\n.global-header ul li {\n display: inline-block;\n margin: 0 15px;\n}\n.highlight {\n background-color: #f8f8f8;\n padding: 10px 23px;\n font-size: 14px;\n line-height: normal;\n color: rgba(0,0,0,0.62);\n overflow-x: auto;\n}\n.highlight .editor {\n font-family: 'Inconsolata', monospace;\n}\n.highlight .line {\n margin: 6px 0;\n}\n.highlight.bash .line::before {\n content: \"$ \";\n opacity: 0.5;\n}\n.highlight .string {\n color: #8858d2;\n}\n.highlight .html.name.tag {\n color: #4ac14a;\n}\n.highlight .html.attribute-name {\n color: #b646c1;\n}\n.highlight .js.name.function {\n color: #f27474;\n}\n.highlight .js.boolean,\n.highlight .js.numeric {\n color: #4ac14a;\n}\n.highlight .js.control,\n.highlight .js.assignment {\n color: #b646c1;\n}\n.highlight .js.storage,\n.highlight .js.variable {\n color: #00a9ff;\n}\n.highlight .js.comment {\n color: rgba(0,0,0,0.3);\n}\n.highlight .js.function {\n color: inherit;\n}\n.highlight .js.variable.other,\n.highlight .js.variable.parameter {\n color: inherit;\n}\n.highlight .js.storage.class,\n.highlight .js.class + * + .storage.modifier {\n color: #b646c1;\n}\n.highlight .css.selector {\n color: #4ac14a;\n}\n.highlight .css.property-name {\n color: #00a9ff;\n}\n.highlight .css.property-value {\n color: #8858d2;\n}\n.highlight .css.separator,\n.highlight .css.terminator {\n color: rgba(0,0,0,0.62);\n}\n.landing-top {\n height: 370px;\n position: relative;\n padding-top: 80px;\n}\n@media all and (max-width: 1000px) {\n .landing-top {\n height: 600px;\n }\n}\n.landing-top .bg {\n background-image: linear-gradient(-132deg, #ff7d79 0%, #f28b74 92%);\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n -webkit-clip-path: url(\"#top-transition-clip-shape\");\n clip-path: url(\"#top-transition-clip-shape\");\n will-change: transform; /* For Safari */\n/*\n * For some reason, clip path makes the whole page\n * flicker in Mobile Safari. \n * So we disable it for mobile.\n */\n}\n@media all and (max-width: 600px) {\n .landing-top .bg {\n -webkit-clip-path: none;\n clip-path: none;\n }\n}\n.landing-top .swal-modal-example {\n transform: none;\n opacity: 1;\n height: 292px;\n width: 409px;\n margin: 20px;\n background-color: #fff;\n box-shadow: 0 5px 22px 0 rgba(0,0,0,0.2);\n border-radius: 8px;\n margin-top: 59px;\n text-align: center;\n display: inline-block;\n vertical-align: middle;\n overflow: hidden;\n transition: height 0.3s;\n position: absolute;\n z-index: 10;\n top: 0;\n left: 0;\n}\n@media all and (max-width: 1000px) {\n .landing-top .swal-modal-example {\n position: relative;\n display: block;\n margin: 20px auto;\n }\n}\n@media all and (max-width: 450px) {\n .landing-top .swal-modal-example {\n width: 100%;\n }\n}\n.landing-top .swal-modal-example[data-type=\"success\"] {\n height: 292px;\n}\n.landing-top .swal-modal-example[data-type=\"warning\"] {\n height: 325px;\n}\n.landing-top .swal-modal-example .swal-title {\n padding-top: 10px;\n}\n.landing-top .swal-modal-example .swal-text {\n color: rgba(0,0,0,0.48);\n margin-top: 6px;\n}\n.landing-top .modal-content-overlay {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: #fff;\n z-index: 2;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.2s;\n}\n.landing-top .modal-content-overlay.show {\n opacity: 1;\n}\n.landing-top .example-content {\n display: none;\n}\n.landing-top .example-content.show {\n display: block;\n}\n.landing-top .desc {\n display: inline-block;\n position: relative;\n color: #fff;\n margin-left: 50px;\n max-width: calc(100% - 409px - 112px);\n vertical-align: middle;\n margin-top: 61px;\n padding-left: 473px;\n}\n@media all and (max-width: 1000px) {\n .landing-top .desc {\n display: block;\n max-width: none;\n padding-left: 0;\n margin-left: 0;\n text-align: center;\n }\n}\n.landing-top h2 {\n font-size: 30px;\n line-height: 51px;\n font-weight: 300;\n}\n@media all and (max-width: 380px) {\n .landing-top h2 {\n font-size: 25px;\n margin-top: -20px;\n }\n}\n.landing-top .text-rotater {\n display: block;\n height: 57px;\n overflow: hidden;\n}\n.landing-top .text-rotater span {\n display: block;\n transition: transform 0.4s;\n}\n.landing-top .text-rotater.slide-up span {\n transform: translateY(-51px);\n}\n.landing-top .install {\n background: rgba(120,40,40,0.32);\n border-radius: 7px;\n max-width: 357px;\n padding: 12px;\n}\n@media all and (max-width: 1000px) {\n .landing-top .install {\n margin: 0 auto;\n text-align: left;\n }\n}\n.landing-top .install .button {\n background: rgba(255,255,255,0.39);\n width: 12px;\n height: 12px;\n border-radius: 50%;\n display: inline-block;\n}\n.landing-top .install .command {\n font-family: 'Inconsolata', monospace;\n padding: 12px;\n padding-left: 30px;\n}\n.landing-top .install .command::before {\n content: \"$\";\n opacity: 0.5;\n transform: rotate(8deg);\n font-size: 20px;\n position: absolute;\n margin-left: -27px;\n margin-top: -2px;\n}\n.comparison-container {\n padding-bottom: 70px;\n text-align: center;\n}\n.comparison-container h3 {\n font-size: 22px;\n color: #b49993;\n font-weight: 400;\n display: block;\n text-align: center;\n margin-top: 93px;\n margin-bottom: 80px;\n}\n.comparison-container .code-container {\n text-align: center;\n width: calc(50% - 60px);\n display: inline-block;\n vertical-align: middle;\n}\n@media all and (max-width: 600px) {\n .comparison-container .code-container {\n width: 100%;\n }\n}\n.comparison-container .versus {\n width: 35px;\n height: 33px;\n background-image: url(\"/assets/images/vs.svg\");\n display: inline-block;\n vertical-align: middle;\n margin: 0 30px;\n}\n@media all and (max-width: 600px) {\n .comparison-container .versus {\n margin: 30px;\n margin-bottom: -10px;\n }\n}\n.comparison-container h5 {\n font-size: 13px;\n color: rgba(0,0,0,0.21);\n text-transform: uppercase;\n text-align: left;\n margin-bottom: 15px;\n}\n.comparison-container h5.swal-logo {\n text-indent: -9999999px;\n margin-top: 2px;\n}\n.comparison-container h5.swal-logo::after {\n content: \"\";\n background-image: url(\"/assets/images/logo-small.svg\");\n width: 91px;\n height: 20px;\n display: block;\n}\n.comparison-container .highlight {\n text-align: left;\n padding: 16px 23px;\n}\n.comparison-container .highlight span {\n margin: 0 -4px;\n}\n.comparison-container .remark {\n font-size: 20px;\n color: #f27474;\n margin-top: 80px;\n}\n.comparison-container .get-started-button {\n background-color: #f27474;\n color: #fff;\n border-radius: 8px;\n font-size: 22px;\n padding: 14px 55px;\n margin: 20px 0;\n display: inline-block;\n}\n.customize-container {\n background-color: #999eaf;\n text-align: center;\n color: #fff;\n text-align: center;\n background-image: url(\"/assets/images/pattern.png\");\n background-image: -webkit-image-set(url(\"/assets/images/pattern.png\") 1x, url(\"/assets/images/pattern@2x.png\") 2x);\n padding: 40px 0;\n -webkit-clip-path: url(\"#customization-transition-clip-shape\");\n clip-path: url(\"#customization-transition-clip-shape\");\n will-change: transform; /* For Safari */\n}\n@media all and (max-width: 600px) {\n .customize-container {\n -webkit-clip-path: none;\n clip-path: none;\n }\n}\n.customize-container h3 {\n font-weight: 400;\n font-size: 20px;\n padding: 50px 0;\n}\n.customize-container .example-modals {\n background-image: url(\"/assets/images/modal-examples.png\");\n background-image: -webkit-image-set(url(\"/assets/images/modal-examples.png\") 1x, url(\"/assets/images/modal-examples@2x.png\") 2x);\n height: 284px;\n background-size: auto 100%;\n background-position: 0 0;\n animation: scrollExamples 80s infinite linear;\n}\n.customize-container .view-api-button {\n border: 3px solid #fff;\n border-radius: 6px;\n color: #fff;\n padding: 12px 52px;\n font-size: 18px;\n margin-top: 60px;\n display: inline-block;\n}\n@-moz-keyframes scrollExamples {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -2146px 0;\n }\n}\n@-webkit-keyframes scrollExamples {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -2146px 0;\n }\n}\n@-o-keyframes scrollExamples {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -2146px 0;\n }\n}\n@keyframes scrollExamples {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -2146px 0;\n }\n}\n.page-content {\n $mobile-breakpoint: 880px;\n}\n.page-content table {\n border-collapse: collapse;\n border: none;\n width: 100%;\n}\n.page-content th {\n font-size: 17px;\n color: rgba(0,0,0,0.34);\n padding: 20px 15px;\n text-transform: capitalize;\n font-weight: 400;\n}\n.page-content thead > tr {\n border-bottom: 2px solid rgba(0,0,0,0.1);\n}\n.page-content tr {\n text-align: left;\n box-shadow: 0px -1px 0px rgba(0,0,0,0.15);\n}\n.page-content tr:first-child {\n box-shadow: none;\n}\n.page-content td {\n padding: 17px;\n}\n.page-content td:first-child > code {\n color: #2e9fef;\n background: none;\n border: none;\n font-size: 16px;\n padding: 0;\n}\n@media all and (min-width: mobile-breakpoint) {\n .page-content tbody tr:nth-child(1) {\n box-shadow: none;\n }\n}\n@media all and (max-width: mobile-breakpoint) {\n .page-content table,\n .page-content thead,\n .page-content tbody,\n .page-content th,\n .page-content td,\n .page-content tr {\n display: block;\n }\n .page-content thead tr {\n position: absolute;\n top: -9999px;\n left: -9999px;\n }\n .page-content tr {\n margin-top: -1px;\n box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.27);\n }\n .page-content td {\n/* Behave like a \"row\" */\n border: none;\n border-bottom: 1px solid #eee;\n position: relative;\n padding-left: mobile-padding;\n min-height: 20px;\n }\n .page-content td::before {\n/* Now like a table header */\n position: absolute;\n/* Top/left values mimic padding */\n top: 15px;\n left: 15px;\n width: mobile-padding;\n width: calc((mobile-padding - 35px));\n overflow: hidden;\n text-overflow: ellipsis;\n padding-right: 10px;\n white-space: nowrap;\n color: rgba(0,0,0,0.54);\n font-family: page-font;\n font-size: 16px;\n text-transform: capitalize;\n content: attr(data-name);\n }\n}\n.doc-container {\n overflow: hidden;\n}\n.side-menu {\n width: 225px;\n float: left;\n padding-left: 20px;\n position: fixed;\n top: 88px;\n}\n@media all and (max-width: 600px) {\n .side-menu {\n float: none;\n position: static;\n margin-top: 120px;\n text-align: center;\n width: 100%;\n margin-bottom: -60px;\n padding-left: 0;\n }\n}\n.side-menu .title {\n font-size: 20px;\n color: rgba(0,0,0,0.63);\n font-weight: 600;\n margin-top: 50px;\n margin-bottom: 36px;\n}\n.side-menu a {\n font-size: 17px;\n color: rgba(0,0,0,0.42);\n display: block;\n margin: 18px 0;\n}\n.side-menu a:hover {\n color: rgba(0,0,0,0.6);\n}\n.page-content {\n float: left;\n width: calc(100% - 225px - 20px);\n margin-left: 225px;\n min-height: 220px;\n margin-top: 16px;\n font-size: 16px;\n color: rgba(0,0,0,0.59);\n line-height: 29px;\n}\n@media all and (max-width: 600px) {\n .page-content {\n float: none;\n margin-left: 0;\n width: 100%;\n }\n}\n.page-content h1 {\n padding-top: 90px;\n border-bottom: 1px solid rgba(0,0,0,0.15);\n padding-bottom: 20px;\n margin-bottom: 0;\n}\n.page-content h1::before {\n content: \"#\";\n position: absolute;\n margin-left: -23px;\n font-size: 24px;\n margin-top: 3px;\n color: #f38270;\n font-weight: 500;\n}\n.page-content h1 a {\n font-size: 30px;\n color: rgba(0,0,0,0.85);\n font-weight: 600;\n}\n.page-content h2,\n.page-content h3 {\n font-size: 20px;\n margin-top: -70px;\n padding-top: 100px;\n}\n.page-content h2 a,\n.page-content h3 a {\n color: rgba(0,0,0,0.7);\n}\n.page-content ul {\n list-style-type: disc;\n margin-bottom: 20px;\n}\n.page-content ul li {\n margin: 5px 0;\n}\n.page-content img {\n max-width: 100%;\n}\n.page-content.api > ul {\n list-style-type: none;\n padding-left: 30px;\n}\n.page-content.api > ul > li h3::before {\n content: \"\";\n width: 8px;\n height: 8px;\n position: absolute;\n border-radius: 50%;\n background-color: #f27474;\n margin-left: -27px;\n margin-top: 12px;\n}\n.page-content code {\n font-family: 'Inconsolata', monospace;\n padding: 3px 6px;\n border-radius: 2px;\n border: 1px solid rgba(0,0,0,0.12);\n background: #f8f8f8;\n font-size: 14px;\n color: #f27474;\n}\n.page-content kbd {\n display: inline-block;\n padding: 3px 5px;\n font-size: 11px;\n line-height: 10px;\n color: #444d56;\n vertical-align: middle;\n background-color: #fafbfc;\n border: solid 1px #c6cbd1;\n border-bottom-color: #959da5;\n border-radius: 3px;\n box-shadow: inset 0 -1px 0 #959da5;\n font-family: sans-serif;\n}\n.page-content preview-button {\n/* Matches the \"real\" button's height: */\n display: block;\n height: 44px;\n}\n.page-content button.preview {\n margin: 20px auto;\n width: 110px;\n display: block;\n position: relative;\n z-index: 2;\n}\n.page-content figcaption {\n font-style: italic;\n}\n.swal-modal.red-bg {\n background-color: rgba(255,0,0,0.28);\n}\n.mood-btn {\n background: none;\n border: none;\n width: 28px;\n height: 28px;\n background-image: url(\"/assets/images/mood-sad.png\");\n background-size: 28px 28px;\n padding: 4px;\n background-position: center center;\n box-sizing: content-box;\n background-repeat: no-repeat;\n margin: 0 7px;\n position: relative;\n overflow: hidden;\n border-radius: 3px;\n}\n.mood-btn:hover::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0,0,0,0.03);\n}\n.mood-btn[data-rating=\"2\"] {\n background-image: url(\"/assets/images/mood-neutral.png\");\n}\n.mood-btn[data-rating=\"3\"] {\n background-image: url(\"/assets/images/mood-happy.png\");\n}\nbody {\n font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;\n}\nsvg.hidden {\n display: block;\n}\n.page-container {\n max-width: 1000px;\n margin: 0 auto;\n padding: 0 10px;\n position: relative;\n}\n.preview {\n background-color: #a3dd82;\n box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07);\n border-radius: 4px;\n border: none;\n color: #fff;\n font-size: 15px;\n color: #fff;\n padding: 9px 18px;\n margin-top: 20px;\n}\n.preview::before {\n content: \"\";\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-left: 10px solid #fff;\n display: inline-block;\n margin-right: 5px;\n}\n.preview:hover {\n background-color: #98d973;\n}\nfooter {\n padding: 40px 20px;\n text-align: center;\n color: #728194;\n}\nfooter .love-icon {\n background-image: url(\"/assets/images/heart-icon.svg\");\n width: 22px;\n height: 20px;\n display: inline-block;\n vertical-align: middle;\n margin: 0 5px;\n position: relative;\n top: -2px;\n}\n" }, { "path": "docs/assets/css/guide.css", "content": ".page-content {\n $mobile-breakpoint: 880px;\n}\n.page-content table {\n border-collapse: collapse;\n border: none;\n width: 100%;\n}\n.page-content th {\n font-size: 17px;\n color: rgba(0,0,0,0.34);\n padding: 20px 15px;\n text-transform: capitalize;\n font-weight: 400;\n}\n.page-content thead > tr {\n border-bottom: 2px solid rgba(0,0,0,0.1);\n}\n.page-content tr {\n text-align: left;\n box-shadow: 0px -1px 0px rgba(0,0,0,0.15);\n}\n.page-content tr:first-child {\n box-shadow: none;\n}\n.page-content td {\n padding: 17px;\n}\n.page-content td:first-child > code {\n color: #2e9fef;\n background: none;\n border: none;\n font-size: 16px;\n padding: 0;\n}\n@media all and (min-width: mobile-breakpoint) {\n .page-content tbody tr:nth-child(1) {\n box-shadow: none;\n }\n}\n@media all and (max-width: mobile-breakpoint) {\n .page-content table,\n .page-content thead,\n .page-content tbody,\n .page-content th,\n .page-content td,\n .page-content tr {\n display: block;\n }\n .page-content thead tr {\n position: absolute;\n top: -9999px;\n left: -9999px;\n }\n .page-content tr {\n margin-top: -1px;\n box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.27);\n }\n .page-content td {\n/* Behave like a \"row\" */\n border: none;\n border-bottom: 1px solid #eee;\n position: relative;\n padding-left: mobile-padding;\n min-height: 20px;\n }\n .page-content td::before {\n/* Now like a table header */\n position: absolute;\n/* Top/left values mimic padding */\n top: 15px;\n left: 15px;\n width: mobile-padding;\n width: calc((mobile-padding - 35px));\n overflow: hidden;\n text-overflow: ellipsis;\n padding-right: 10px;\n white-space: nowrap;\n color: rgba(0,0,0,0.54);\n font-family: page-font;\n font-size: 16px;\n text-transform: capitalize;\n content: attr(data-name);\n }\n}\n.doc-container {\n overflow: hidden;\n}\n.side-menu {\n width: 225px;\n float: left;\n padding-left: 20px;\n position: fixed;\n top: 88px;\n}\n@media all and (max-width: $phablet-width) {\n .side-menu {\n float: none;\n position: static;\n margin-top: 120px;\n text-align: center;\n width: 100%;\n margin-bottom: -60px;\n padding-left: 0;\n }\n}\n.side-menu .title {\n font-size: 20px;\n color: rgba(0,0,0,0.63);\n font-weight: 600;\n margin-top: 50px;\n margin-bottom: 36px;\n}\n.side-menu a {\n font-size: 17px;\n color: rgba(0,0,0,0.42);\n display: block;\n margin: 18px 0;\n}\n.side-menu a:hover {\n color: rgba(0,0,0,0.6);\n}\n.page-content {\n float: left;\n width: calc(100% - 225px - 20px);\n margin-left: 225px;\n min-height: 220px;\n margin-top: 16px;\n font-size: 16px;\n color: rgba(0,0,0,0.59);\n line-height: 29px;\n}\n@media all and (max-width: $phablet-width) {\n .page-content {\n float: none;\n margin-left: 0;\n width: 100%;\n }\n}\n.page-content h1 {\n padding-top: 90px;\n border-bottom: 1px solid rgba(0,0,0,0.15);\n padding-bottom: 20px;\n margin-bottom: 0;\n}\n.page-content h1::before {\n content: \"#\";\n position: absolute;\n margin-left: -23px;\n font-size: 24px;\n margin-top: 3px;\n color: #f38270;\n font-weight: 500;\n}\n.page-content h1 a {\n font-size: 30px;\n color: rgba(0,0,0,0.85);\n font-weight: 600;\n}\n.page-content h2,\n.page-content h3 {\n font-size: 20px;\n margin-top: -70px;\n padding-top: 100px;\n}\n.page-content h2 a,\n.page-content h3 a {\n color: rgba(0,0,0,0.7);\n}\n.page-content ul {\n list-style-type: disc;\n margin-bottom: 20px;\n}\n.page-content ul li {\n margin: 5px 0;\n}\n.page-content img {\n max-width: 100%;\n}\n.page-content.api > ul {\n list-style-type: none;\n padding-left: 30px;\n}\n.page-content.api > ul > li h3::before {\n content: \"\";\n width: 8px;\n height: 8px;\n position: absolute;\n border-radius: 50%;\n background-color: $main-color;\n margin-left: -27px;\n margin-top: 12px;\n}\n.page-content code {\n font-family: $code-font;\n padding: 3px 6px;\n border-radius: 2px;\n border: 1px solid rgba(0,0,0,0.12);\n background: #f8f8f8;\n font-size: 14px;\n color: $main-color;\n}\n.page-content kbd {\n display: inline-block;\n padding: 3px 5px;\n font-size: 11px;\n line-height: 10px;\n color: #444d56;\n vertical-align: middle;\n background-color: #fafbfc;\n border: solid 1px #c6cbd1;\n border-bottom-color: #959da5;\n border-radius: 3px;\n box-shadow: inset 0 -1px 0 #959da5;\n font-family: sans-serif;\n}\n.page-content preview-button {\n/* Matches the \"real\" button's height: */\n display: block;\n height: 44px;\n}\n.page-content button.preview {\n margin: 20px auto;\n width: 110px;\n display: block;\n position: relative;\n z-index: 2;\n}\n.page-content figcaption {\n font-style: italic;\n}\n.swal-modal.red-bg {\n background-color: rgba(255,0,0,0.28);\n}\n.mood-btn {\n background: none;\n border: none;\n width: 28px;\n height: 28px;\n background-image: url(\"/assets/images/mood-sad.png\");\n background-size: 28px 28px;\n padding: 4px;\n background-position: center center;\n box-sizing: content-box;\n background-repeat: no-repeat;\n margin: 0 7px;\n position: relative;\n overflow: hidden;\n border-radius: 3px;\n}\n.mood-btn:hover::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0,0,0,0.03);\n}\n.mood-btn[data-rating=\"2\"] {\n background-image: url(\"/assets/images/mood-neutral.png\");\n}\n.mood-btn[data-rating=\"3\"] {\n background-image: url(\"/assets/images/mood-happy.png\");\n}\n" }, { "path": "docs/assets/css/header.css", "content": ".global-header {\n background-color: #fff;\n box-shadow: 0 1px 15px 0 rgba(192,72,25,0.32);\n height: $header-height;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 100;\n}\n.global-header .logo {\n width: 162px;\n height: 36px;\n background-image: url(\"/assets/images/logo.svg\");\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n float: left;\n margin-top: 22px;\n margin-left: 15px;\n}\n@media all and (max-width: $phablet-width) {\n .global-header .logo {\n float: none;\n height: 29px;\n display: block;\n margin: 0 auto;\n margin-top: 10px;\n }\n}\n.global-header nav {\n font-size: 17px;\n color: $main-color;\n float: right;\n margin-top: 29px;\n}\n@media all and (max-width: $phablet-width) {\n .global-header nav {\n float: none;\n text-align: center;\n font-size: 16px;\n margin-top: 10px;\n }\n}\n.global-header nav a {\n position: relative;\n cursor: pointer;\n}\n.global-header nav a::before {\n content: \"\";\n background-color: $main-color;\n height: 3px;\n border-radius: 2px;\n position: absolute;\n left: 0;\n right: 0;\n bottom: -5px;\n display: none;\n}\n.global-header nav a:hover::before {\n display: block;\n}\n.global-header nav .github-icon {\n width: 26px;\n height: 25px;\n background-image: url(\"/assets/images/github.svg\");\n display: inline-block;\n vertical-align: middle;\n position: relative;\n top: -3px;\n}\n.global-header ul {\n white-space: nowrap;\n padding: 0;\n}\n.global-header ul li {\n display: inline-block;\n margin: 0 15px;\n}\n" }, { "path": "docs/assets/css/highlight.css", "content": ".highlight {\n background-color: #f8f8f8;\n padding: 10px 23px;\n font-size: 14px;\n line-height: normal;\n color: rgba(0,0,0,0.62);\n overflow-x: auto;\n}\n.highlight .editor {\n font-family: $code-font;\n}\n.highlight .line {\n margin: 6px 0;\n}\n.highlight.bash .line::before {\n content: \"$ \";\n opacity: 0.5;\n}\n.highlight .string {\n color: #8858d2;\n}\n.highlight .html.name.tag {\n color: #4ac14a;\n}\n.highlight .html.attribute-name {\n color: #b646c1;\n}\n.highlight .js.name.function {\n color: $main-color;\n}\n.highlight .js.boolean,\n.highlight .js.numeric {\n color: #4ac14a;\n}\n.highlight .js.control,\n.highlight .js.assignment {\n color: #b646c1;\n}\n.highlight .js.storage,\n.highlight .js.variable {\n color: #00a9ff;\n}\n.highlight .js.comment {\n color: rgba(0,0,0,0.3);\n}\n.highlight .js.function {\n color: inherit;\n}\n.highlight .js.variable.other,\n.highlight .js.variable.parameter {\n color: inherit;\n}\n.highlight .js.storage.class,\n.highlight .js.class + * + .storage.modifier {\n color: #b646c1;\n}\n.highlight .css.selector {\n color: #4ac14a;\n}\n.highlight .css.property-name {\n color: #00a9ff;\n}\n.highlight .css.property-value {\n color: #8858d2;\n}\n.highlight .css.separator,\n.highlight .css.terminator {\n color: rgba(0,0,0,0.62);\n}\n" }, { "path": "docs/assets/css/index.css", "content": ".landing-top {\n height: 370px;\n position: relative;\n padding-top: $header-height;\n}\n@media all and (max-width: $tablet-width) {\n .landing-top {\n height: 600px;\n }\n}\n.landing-top .bg {\n background-image: linear-gradient(-132deg, #ff7d79 0%, #f28b74 92%);\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n -webkit-clip-path: url(\"#top-transition-clip-shape\");\n clip-path: url(\"#top-transition-clip-shape\");\n will-change: transform; /* For Safari */\n/*\n * For some reason, clip path makes the whole page\n * flicker in Mobile Safari. \n * So we disable it for mobile.\n */\n}\n@media all and (max-width: $phablet-width) {\n .landing-top .bg {\n -webkit-clip-path: none;\n clip-path: none;\n }\n}\n.landing-top .swal-modal-example {\n transform: none;\n opacity: 1;\n height: 292px;\n width: 409px;\n margin: 20px;\n background-color: #fff;\n box-shadow: 0 5px 22px 0 rgba(0,0,0,0.2);\n border-radius: 8px;\n margin-top: 59px;\n text-align: center;\n display: inline-block;\n vertical-align: middle;\n overflow: hidden;\n transition: height 0.3s;\n position: absolute;\n z-index: 10;\n top: 0;\n left: 0;\n}\n@media all and (max-width: $tablet-width) {\n .landing-top .swal-modal-example {\n position: relative;\n display: block;\n margin: 20px auto;\n }\n}\n@media all and (max-width: $mobile-width) {\n .landing-top .swal-modal-example {\n width: 100%;\n }\n}\n.landing-top .swal-modal-example[data-type=\"success\"] {\n height: 292px;\n}\n.landing-top .swal-modal-example[data-type=\"warning\"] {\n height: 325px;\n}\n.landing-top .swal-modal-example .swal-title {\n padding-top: 10px;\n}\n.landing-top .swal-modal-example .swal-text {\n color: rgba(0,0,0,0.48);\n margin-top: 6px;\n}\n.landing-top .modal-content-overlay {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: #fff;\n z-index: 2;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.2s;\n}\n.landing-top .modal-content-overlay.show {\n opacity: 1;\n}\n.landing-top .example-content {\n display: none;\n}\n.landing-top .example-content.show {\n display: block;\n}\n.landing-top .desc {\n display: inline-block;\n position: relative;\n color: #fff;\n margin-left: 50px;\n max-width: calc(100% - 409px - 112px);\n vertical-align: middle;\n margin-top: 61px;\n padding-left: 473px;\n}\n@media all and (max-width: $tablet-width) {\n .landing-top .desc {\n display: block;\n max-width: none;\n padding-left: 0;\n margin-left: 0;\n text-align: center;\n }\n}\n.landing-top h2 {\n font-size: 30px;\n line-height: 51px;\n font-weight: 300;\n}\n@media all and (max-width: $small-width) {\n .landing-top h2 {\n font-size: 25px;\n margin-top: -20px;\n }\n}\n.landing-top .text-rotater {\n display: block;\n height: 57px;\n overflow: hidden;\n}\n.landing-top .text-rotater span {\n display: block;\n transition: transform 0.4s;\n}\n.landing-top .text-rotater.slide-up span {\n transform: translateY(-51px);\n}\n.landing-top .install {\n background: rgba(120,40,40,0.32);\n border-radius: 7px;\n max-width: 357px;\n padding: 12px;\n}\n@media all and (max-width: $tablet-width) {\n .landing-top .install {\n margin: 0 auto;\n text-align: left;\n }\n}\n.landing-top .install .button {\n background: rgba(255,255,255,0.39);\n width: 12px;\n height: 12px;\n border-radius: 50%;\n display: inline-block;\n}\n.landing-top .install .command {\n font-family: $code-font;\n padding: 12px;\n padding-left: 30px;\n}\n.landing-top .install .command::before {\n content: \"$\";\n opacity: 0.5;\n transform: rotate(8deg);\n font-size: 20px;\n position: absolute;\n margin-left: -27px;\n margin-top: -2px;\n}\n.comparison-container {\n padding-bottom: 70px;\n text-align: center;\n}\n.comparison-container h3 {\n font-size: 22px;\n color: #b49993;\n font-weight: 400;\n display: block;\n text-align: center;\n margin-top: 93px;\n margin-bottom: 80px;\n}\n.comparison-container .code-container {\n text-align: center;\n width: calc(50% - 60px);\n display: inline-block;\n vertical-align: middle;\n}\n@media all and (max-width: $phablet-width) {\n .comparison-container .code-container {\n width: 100%;\n }\n}\n.comparison-container .versus {\n width: 35px;\n height: 33px;\n background-image: url(\"/assets/images/vs.svg\");\n display: inline-block;\n vertical-align: middle;\n margin: 0 30px;\n}\n@media all and (max-width: $phablet-width) {\n .comparison-container .versus {\n margin: 30px;\n margin-bottom: -10px;\n }\n}\n.comparison-container h5 {\n font-size: 13px;\n color: rgba(0,0,0,0.21);\n text-transform: uppercase;\n text-align: left;\n margin-bottom: 15px;\n}\n.comparison-container h5.swal-logo {\n text-indent: -9999999px;\n margin-top: 2px;\n}\n.comparison-container h5.swal-logo::after {\n content: \"\";\n background-image: url(\"/assets/images/logo-small.svg\");\n width: 91px;\n height: 20px;\n display: block;\n}\n.comparison-container .highlight {\n text-align: left;\n padding: 16px 23px;\n}\n.comparison-container .highlight span {\n margin: 0 -4px;\n}\n.comparison-container .remark {\n font-size: 20px;\n color: $main-color;\n margin-top: 80px;\n}\n.comparison-container .get-started-button {\n background-color: $main-color;\n color: #fff;\n border-radius: 8px;\n font-size: 22px;\n padding: 14px 55px;\n margin: 20px 0;\n display: inline-block;\n}\n.customize-container {\n background-color: #999eaf;\n text-align: center;\n color: #fff;\n text-align: center;\n background-image: url(\"/assets/images/pattern.png\");\n background-image: -webkit-image-set(url(\"/assets/images/pattern.png\") 1x, url(\"/assets/images/pattern@2x.png\") 2x);\n padding: 40px 0;\n -webkit-clip-path: url(\"#customization-transition-clip-shape\");\n clip-path: url(\"#customization-transition-clip-shape\");\n will-change: transform; /* For Safari */\n}\n@media all and (max-width: $phablet-width) {\n .customize-container {\n -webkit-clip-path: none;\n clip-path: none;\n }\n}\n.customize-container h3 {\n font-weight: 400;\n font-size: 20px;\n padding: 50px 0;\n}\n.customize-container .example-modals {\n background-image: url(\"/assets/images/modal-examples.png\");\n background-image: -webkit-image-set(url(\"/assets/images/modal-examples.png\") 1x, url(\"/assets/images/modal-examples@2x.png\") 2x);\n height: 284px;\n background-size: auto 100%;\n background-position: 0 0;\n animation: scrollExamples 80s infinite linear;\n}\n.customize-container .view-api-button {\n border: 3px solid #fff;\n border-radius: 6px;\n color: #fff;\n padding: 12px 52px;\n font-size: 18px;\n margin-top: 60px;\n display: inline-block;\n}\n@-moz-keyframes scrollExamples {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -2146px 0;\n }\n}\n@-webkit-keyframes scrollExamples {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -2146px 0;\n }\n}\n@-o-keyframes scrollExamples {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -2146px 0;\n }\n}\n@keyframes scrollExamples {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -2146px 0;\n }\n}\n" }, { "path": "docs/assets/css/normalize.css", "content": "body {\n margin: 0;\n padding: 0;\n}\na {\n text-decoration: none;\n color: $main-color;\n}\np a:hover {\n text-decoration: underline;\n}\nbutton {\n cursor: pointer;\n}\nbutton:focus {\n outline: none;\n}\nul {\n list-style-type: none;\n margin: 0;\n}\n" }, { "path": "docs/assets/css/table.css", "content": ".page-content {\n $mobile-breakpoint: 880px;\n}\n.page-content table {\n border-collapse: collapse;\n border: none;\n width: 100%;\n}\n.page-content th {\n font-size: 17px;\n color: rgba(0,0,0,0.34);\n padding: 20px 15px;\n text-transform: capitalize;\n font-weight: 400;\n}\n.page-content thead > tr {\n border-bottom: 2px solid rgba(0,0,0,0.1);\n}\n.page-content tr {\n text-align: left;\n box-shadow: 0px -1px 0px rgba(0,0,0,0.15);\n}\n.page-content tr:first-child {\n box-shadow: none;\n}\n.page-content td {\n padding: 17px;\n}\n.page-content td:first-child > code {\n color: #2e9fef;\n background: none;\n border: none;\n font-size: 16px;\n padding: 0;\n}\n@media all and (min-width: mobile-breakpoint) {\n .page-content tbody tr:nth-child(1) {\n box-shadow: none;\n }\n}\n@media all and (max-width: mobile-breakpoint) {\n .page-content table,\n .page-content thead,\n .page-content tbody,\n .page-content th,\n .page-content td,\n .page-content tr {\n display: block;\n }\n .page-content thead tr {\n position: absolute;\n top: -9999px;\n left: -9999px;\n }\n .page-content tr {\n margin-top: -1px;\n box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.27);\n }\n .page-content td {\n/* Behave like a \"row\" */\n border: none;\n border-bottom: 1px solid #eee;\n position: relative;\n padding-left: mobile-padding;\n min-height: 20px;\n }\n .page-content td::before {\n/* Now like a table header */\n position: absolute;\n/* Top/left values mimic padding */\n top: 15px;\n left: 15px;\n width: mobile-padding;\n width: calc((mobile-padding - 35px));\n overflow: hidden;\n text-overflow: ellipsis;\n padding-right: 10px;\n white-space: nowrap;\n color: rgba(0,0,0,0.54);\n font-family: page-font;\n font-size: 16px;\n text-transform: capitalize;\n content: attr(data-name);\n }\n}\n" }, { "path": "docs/assets/css/variables.css", "content": "" }, { "path": "docs/assets/js/add-preview-buttons.js", "content": "(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o tags.\n * We want to transform these into button.preview,\n * which onclick will run the JS code right above them!\n */\n\nvar previewPlaceholders = document.querySelectorAll('preview-button');\n\nvar createButton = function createButton(placeholder) {\n var button = document.createElement('button');\n button.className = \"preview\";\n button.innerText = \"Preview\";\n\n // Add button right above placeholder\n placeholder.parentNode.insertBefore(button, placeholder);\n\n return button;\n};\n\nvar getCodeEl = function getCodeEl(placeholder) {\n return placeholder.parentNode.previousSibling.previousSibling;\n};\n\nvar getCode = function getCode(highlightEl) {\n return highlightEl.innerText.trim();\n};\n\nvar resetStyles = function resetStyles() {\n var swalOverlay = document.querySelector('.swal-overlay');\n var allSwalEls = swalOverlay.querySelectorAll('*');\n\n swalOverlay.removeAttribute('style');\n\n allSwalEls.forEach(function (el) {\n el.removeAttribute('style');\n });\n};\n\nvar setStyles = function setStyles(code) {\n var array = code.split(/[{}]/g);\n var selector = array[0].trim();\n\n var el = document.querySelector(selector);\n\n var css = array[1].trim();\n css = css.replace(/\\s+/g, ' ');\n css = css.replace(/;\\s?/g, '; ');\n css = css.replace(/:\\s?/g, ': ');\n\n el.style.cssText = css;\n};\n\npreviewPlaceholders.forEach(function (placeholder) {\n var highlightEl = getCodeEl(placeholder);\n var code = getCode(highlightEl);\n\n var button = createButton(placeholder);\n var givenFunction = placeholder.dataset.function;\n\n var lang = highlightEl.classList[1];\n\n /*\n * If there's a specified data-function on , call that.\n * Othwerwise, just use the code from the highlightjs above it:\n */\n button.addEventListener('click', function () {\n if (givenFunction) {\n window[givenFunction]();\n } else if (lang === \"css\") {\n swal(\"Sweet!\", \"I like customizing!\");\n resetStyles();\n setStyles(code);\n } else {\n var transpiledCode = Babel.transform(code, { presets: ['es2015'] }).code;\n eval(transpiledCode);\n }\n });\n\n placeholder.remove();\n});\n\n},{\"babel-standalone\":2}],2:[function(require,module,exports){\n(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Babel\"] = factory();\n\telse\n\t\troot[\"Babel\"] = factory();\n})(this, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n\n\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ((function(modules) {\n\t// Check all modules for deduplicated modules\n\tfor(var i in modules) {\n\t\tif(Object.prototype.hasOwnProperty.call(modules, i)) {\n\t\t\tswitch(typeof modules[i]) {\n\t\t\tcase \"function\": break;\n\t\t\tcase \"object\":\n\t\t\t\t// Module can be created from a template\n\t\t\t\tmodules[i] = (function(_m) {\n\t\t\t\t\tvar args = _m.slice(1), fn = modules[_m[0]];\n\t\t\t\t\treturn function (a,b,c) {\n\t\t\t\t\t\tfn.apply(this, [a,b,c].concat(args));\n\t\t\t\t\t};\n\t\t\t\t}(modules[i]));\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\t// Module is a copy of another module\n\t\t\t\tmodules[i] = modules[modules[i]];\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\treturn modules;\n}([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\n\tObject.defineProperty(exports, \"__esModule\", {\n\t value: true\n\t});\n\texports.version = exports.buildExternalHelpers = exports.availablePresets = exports.availablePlugins = undefined;\n\n\tvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\n\tvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\n\texports.transform = transform;\n\texports.transformFromAst = transformFromAst;\n\texports.registerPlugin = registerPlugin;\n\texports.registerPlugins = registerPlugins;\n\texports.registerPreset = registerPreset;\n\texports.registerPresets = registerPresets;\n\texports.transformScriptTags = transformScriptTags;\n\texports.disableScriptTags = disableScriptTags;\n\n\tvar _babelCore = __webpack_require__(290);\n\n\tvar Babel = _interopRequireWildcard(_babelCore);\n\n\tvar _transformScriptTags = __webpack_require__(629);\n\n\tfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }\n\n\tvar isArray = Array.isArray || function (arg) {\n\t return Object.prototype.toString.call(arg) === '[object Array]';\n\t};\n\n\t/**\r\n\t * Loads the given name (or [name, options] pair) from the given table object\r\n\t * holding the available presets or plugins.\r\n\t *\r\n\t * Returns undefined if the preset or plugin is not available; passes through\r\n\t * name unmodified if it (or the first element of the pair) is not a string.\r\n\t */\n\tfunction loadBuiltin(builtinTable, name) {\n\t if (isArray(name) && typeof name[0] === 'string') {\n\t if (builtinTable.hasOwnProperty(name[0])) {\n\t return [builtinTable[name[0]]].concat(name.slice(1));\n\t }\n\t return;\n\t } else if (typeof name === 'string') {\n\t return builtinTable[name];\n\t }\n\t // Could be an actual preset/plugin module\n\t return name;\n\t}\n\n\t/**\r\n\t * Parses plugin names and presets from the specified options.\r\n\t */\n\tfunction processOptions(options) {\n\t // Parse preset names\n\t var presets = (options.presets || []).map(function (presetName) {\n\t var preset = loadBuiltin(availablePresets, presetName);\n\n\t if (preset) {\n\t // workaround for babel issue\n\t // at some point, babel copies the preset, losing the non-enumerable\n\t // buildPreset key; convert it into an enumerable key.\n\t if (isArray(preset) && _typeof(preset[0]) === 'object' && preset[0].hasOwnProperty('buildPreset')) {\n\t preset[0] = _extends({}, preset[0], { buildPreset: preset[0].buildPreset });\n\t }\n\t } else {\n\t throw new Error('Invalid preset specified in Babel options: \"' + presetName + '\"');\n\t }\n\t return preset;\n\t });\n\n\t // Parse plugin names\n\t var plugins = (options.plugins || []).map(function (pluginName) {\n\t var plugin = loadBuiltin(availablePlugins, pluginName);\n\n\t if (!plugin) {\n\t throw new Error('Invalid plugin specified in Babel options: \"' + pluginName + '\"');\n\t }\n\t return plugin;\n\t });\n\n\t return _extends({\n\t babelrc: false\n\t }, options, {\n\t presets: presets,\n\t plugins: plugins\n\t });\n\t}\n\n\tfunction transform(code, options) {\n\t return Babel.transform(code, processOptions(options));\n\t}\n\n\tfunction transformFromAst(ast, code, options) {\n\t return Babel.transformFromAst(ast, code, processOptions(options));\n\t}\n\tvar availablePlugins = exports.availablePlugins = {};\n\tvar availablePresets = exports.availablePresets = {};\n\tvar buildExternalHelpers = exports.buildExternalHelpers = Babel.buildExternalHelpers;\n\t/**\r\n\t * Registers a named plugin for use with Babel.\r\n\t */\n\tfunction registerPlugin(name, plugin) {\n\t if (availablePlugins.hasOwnProperty(name)) {\n\t console.warn('A plugin named \"' + name + '\" is already registered, it will be overridden');\n\t }\n\t availablePlugins[name] = plugin;\n\t}\n\t/**\r\n\t * Registers multiple plugins for use with Babel. `newPlugins` should be an object where the key\r\n\t * is the name of the plugin, and the value is the plugin itself.\r\n\t */\n\tfunction registerPlugins(newPlugins) {\n\t Object.keys(newPlugins).forEach(function (name) {\n\t return registerPlugin(name, newPlugins[name]);\n\t });\n\t}\n\n\t/**\r\n\t * Registers a named preset for use with Babel.\r\n\t */\n\tfunction registerPreset(name, preset) {\n\t if (availablePresets.hasOwnProperty(name)) {\n\t console.warn('A preset named \"' + name + '\" is already registered, it will be overridden');\n\t }\n\t availablePresets[name] = preset;\n\t}\n\t/**\r\n\t * Registers multiple presets for use with Babel. `newPresets` should be an object where the key\r\n\t * is the name of the preset, and the value is the preset itself.\r\n\t */\n\tfunction registerPresets(newPresets) {\n\t Object.keys(newPresets).forEach(function (name) {\n\t return registerPreset(name, newPresets[name]);\n\t });\n\t}\n\n\t// All the plugins we should bundle\n\tregisterPlugins({\n\t 'check-es2015-constants': __webpack_require__(66),\n\t 'external-helpers': __webpack_require__(322),\n\t 'inline-replace-variables': __webpack_require__(323),\n\t 'syntax-async-functions': __webpack_require__(67),\n\t 'syntax-async-generators': __webpack_require__(195),\n\t 'syntax-class-constructor-call': __webpack_require__(196),\n\t 'syntax-class-properties': __webpack_require__(197),\n\t 'syntax-decorators': __webpack_require__(125),\n\t 'syntax-do-expressions': __webpack_require__(198),\n\t 'syntax-exponentiation-operator': __webpack_require__(199),\n\t 'syntax-export-extensions': __webpack_require__(200),\n\t 'syntax-flow': __webpack_require__(126),\n\t 'syntax-function-bind': __webpack_require__(201),\n\t 'syntax-function-sent': __webpack_require__(325),\n\t 'syntax-jsx': __webpack_require__(127),\n\t 'syntax-object-rest-spread': __webpack_require__(202),\n\t 'syntax-trailing-function-commas': __webpack_require__(128),\n\t 'transform-async-functions': __webpack_require__(326),\n\t 'transform-async-to-generator': __webpack_require__(129),\n\t 'transform-async-to-module-method': __webpack_require__(328),\n\t 'transform-class-constructor-call': __webpack_require__(203),\n\t 'transform-class-properties': __webpack_require__(204),\n\t 'transform-decorators': __webpack_require__(205),\n\t 'transform-decorators-legacy': __webpack_require__(329).default, // <- No clue. Nope.\n\t 'transform-do-expressions': __webpack_require__(206),\n\t 'transform-es2015-arrow-functions': __webpack_require__(68),\n\t 'transform-es2015-block-scoped-functions': __webpack_require__(69),\n\t 'transform-es2015-block-scoping': __webpack_require__(70),\n\t 'transform-es2015-classes': __webpack_require__(71),\n\t 'transform-es2015-computed-properties': __webpack_require__(72),\n\t 'transform-es2015-destructuring': __webpack_require__(73),\n\t 'transform-es2015-duplicate-keys': __webpack_require__(130),\n\t 'transform-es2015-for-of': __webpack_require__(74),\n\t 'transform-es2015-function-name': __webpack_require__(75),\n\t 'transform-es2015-instanceof': __webpack_require__(332),\n\t 'transform-es2015-literals': __webpack_require__(76),\n\t 'transform-es2015-modules-amd': __webpack_require__(131),\n\t 'transform-es2015-modules-commonjs': __webpack_require__(77),\n\t 'transform-es2015-modules-systemjs': __webpack_require__(208),\n\t 'transform-es2015-modules-umd': __webpack_require__(209),\n\t 'transform-es2015-object-super': __webpack_require__(78),\n\t 'transform-es2015-parameters': __webpack_require__(79),\n\t 'transform-es2015-shorthand-properties': __webpack_require__(80),\n\t 'transform-es2015-spread': __webpack_require__(81),\n\t 'transform-es2015-sticky-regex': __webpack_require__(82),\n\t 'transform-es2015-template-literals': __webpack_require__(83),\n\t 'transform-es2015-typeof-symbol': __webpack_require__(84),\n\t 'transform-es2015-unicode-regex': __webpack_require__(85),\n\t 'transform-es3-member-expression-literals': __webpack_require__(336),\n\t 'transform-es3-property-literals': __webpack_require__(337),\n\t 'transform-es5-property-mutators': __webpack_require__(338),\n\t 'transform-eval': __webpack_require__(339),\n\t 'transform-exponentiation-operator': __webpack_require__(132),\n\t 'transform-export-extensions': __webpack_require__(210),\n\t 'transform-flow-comments': __webpack_require__(340),\n\t 'transform-flow-strip-types': __webpack_require__(211),\n\t 'transform-function-bind': __webpack_require__(212),\n\t 'transform-jscript': __webpack_require__(341),\n\t 'transform-object-assign': __webpack_require__(342),\n\t 'transform-object-rest-spread': __webpack_require__(213),\n\t 'transform-object-set-prototype-of-to-assign': __webpack_require__(343),\n\t 'transform-proto-to-assign': __webpack_require__(344),\n\t 'transform-react-constant-elements': __webpack_require__(345),\n\t 'transform-react-display-name': __webpack_require__(214),\n\t 'transform-react-inline-elements': __webpack_require__(346),\n\t 'transform-react-jsx': __webpack_require__(215),\n\t 'transform-react-jsx-compat': __webpack_require__(347),\n\t 'transform-react-jsx-self': __webpack_require__(349),\n\t 'transform-react-jsx-source': __webpack_require__(350),\n\t 'transform-regenerator': __webpack_require__(86),\n\t 'transform-runtime': __webpack_require__(353),\n\t 'transform-strict-mode': __webpack_require__(216),\n\t 'undeclared-variables-check': __webpack_require__(354)\n\t});\n\n\t// All the presets we should bundle\n\tregisterPresets({\n\t es2015: __webpack_require__(217),\n\t es2016: __webpack_require__(218),\n\t es2017: __webpack_require__(219),\n\t latest: __webpack_require__(356),\n\t react: __webpack_require__(357),\n\t 'stage-0': __webpack_require__(358),\n\t 'stage-1': __webpack_require__(220),\n\t 'stage-2': __webpack_require__(221),\n\t 'stage-3': __webpack_require__(222),\n\n\t // ES2015 preset with es2015-modules-commonjs removed\n\t // Plugin list copied from babel-preset-es2015/index.js\n\t 'es2015-no-commonjs': {\n\t plugins: [__webpack_require__(83), __webpack_require__(76), __webpack_require__(75), __webpack_require__(68), __webpack_require__(69), __webpack_require__(71), __webpack_require__(78), __webpack_require__(80), __webpack_require__(72), __webpack_require__(74), __webpack_require__(82), __webpack_require__(85), __webpack_require__(66), __webpack_require__(81), __webpack_require__(79), __webpack_require__(73), __webpack_require__(70), __webpack_require__(84), [__webpack_require__(86), { async: false, asyncGenerators: false }]]\n\t },\n\n\t // ES2015 preset with plugins set to loose mode.\n\t // Based off https://github.com/bkonkle/babel-preset-es2015-loose/blob/master/index.js\n\t 'es2015-loose': {\n\t plugins: [[__webpack_require__(83), { loose: true }], __webpack_require__(76), __webpack_require__(75), __webpack_require__(68), __webpack_require__(69), [__webpack_require__(71), { loose: true }], __webpack_require__(78), __webpack_require__(80), __webpack_require__(130), [__webpack_require__(72), { loose: true }], [__webpack_require__(74), { loose: true }], __webpack_require__(82), __webpack_require__(85), __webpack_require__(66), [__webpack_require__(81), { loose: true }], __webpack_require__(79), [__webpack_require__(73), { loose: true }], __webpack_require__(70), __webpack_require__(84), [__webpack_require__(77), { loose: true }], [__webpack_require__(86), { async: false, asyncGenerators: false }]]\n\t }\n\t});\n\n\tvar version = exports.version = (\"6.26.0\");\n\n\t// Listen for load event if we're in a browser and then kick off finding and\n\t// running of scripts with \"text/babel\" type.\n\tif (typeof window !== 'undefined' && window && window.addEventListener) {\n\t window.addEventListener('DOMContentLoaded', function () {\n\t return transformScriptTags();\n\t }, false);\n\t}\n\n\t/**\r\n\t * Transform \n \n\n \n\n
\n
\n\n \n \n\n \n\n
\n
\n\n \n\n
\n\n \n\n
\n \n

Configuration

\n
    \n
  • \n

    text

    \n

    Type: string

    \n

    Default: "" (empty string)

    \n

    Description:

    \n

    The modal's text. It can either be added as a configuration under the key text (as in the example below), or passed as the first and only parameter (e.g. swal("Hello world!")), or the second one if you have multiple string parameters (e.g. swal("A title", "Hello world!")).

    \n

    Example:

    \n
    swal({
      text: "Hello world!",
    });
    \n

    \n
    • \n
\n
    \n
  • \n

    title

    \n

    Type: string

    \n

    Default: "" (empty string)

    \n

    Description:

    \n

    The title of the modal. It can either be added as a configuration under the key title (as in the example below), or passed as the first string parameter – as long as it's not the only one – of the swal function (e.g. swal("Here's a title!", "Here's some text")).

    \n

    Example:

    \n
    swal({
      title: "Here's a title!",
    });
    \n

    \n
    • \n
\n
    \n
  • \n

    icon

    \n

    Type: string

    \n

    Default: "" (empty string)

    \n

    Description:

    \n

    An icon for the modal. SweetAlert comes with 4 built-in icons that you can use:

    \n
      \n
    • "warning"
      • \n
    • "error"
      • \n
    • "success"
      • \n
    • "info"
      • \n
    \n

    It can either be added as a configuration under the key icon, or passed as the third string parameter of the swal function (e.g. swal("Title", "Text", "success")).

    \n

    Example:

    \n
    swal({
      icon: "success",
    });
    \n

    \n
    • \n
\n
    \n
  • \n

    button

    \n

    Type: string|boolean|ButtonOptions

    \n

    Default:

    \n
    {
      text: "OK",
      value: true,
      visible: true,
      className: "",
      closeModal: true,
    }
    \n

    Description:

    \n

    The confirm button that's shown by default. You can change its text by setting button to a string, or you can tweak more setting by passing a ButtonOptions object. Setting it to false hides the button.

    \n

    Examples:

    \n
    swal({
      button: "Coolio",
    });
    \n

    \n
    swal({
      button: {
        text: "Hey ho!",
      },
    });
    \n

    \n
    swal("Hello world!", {
      button: false,
    });
    \n

    \n
    • \n
\n
    \n
  • \n

    buttons

    \n

    Type: boolean|string[]|ButtonOptions[]|ButtonList

    \n

    Default:

    \n
    {
      cancel: {
        text: "Cancel",
        value: null,
        visible: false,
        className: "",
        closeModal: true,
      },
      confirm: {
        text: "OK",
        value: true,
        visible: true,
        className: "",
        closeModal: true
      }
    }
    \n

    Description:

    \n

    Specify the exact amount of buttons and their behaviour. If you use an array, you can set the elements as strings (to set only the text), a list of ButtonOptions, or a combination of both. You can also set one of the elements to true to simply get the default options.

    \n

    If you want more than just the predefined cancel and confirm buttons, you need to specify a ButtonList object, with keys (the button's namespace) pointing to ButtonOptions.

    \n

    You can also specify false to hide all buttons (same behaviour as the button option).

    \n

    Examples:

    \n
    swal({
      buttons: ["Stop", "Do it!"],
    });
    \n

    \n
    swal({
      buttons: [true, "Do it!"],
    });
    \n

    \n
    swal("Hello world!", {
      buttons: false,
    });
    \n

    \n
    swal({
      buttons: {
        cancel: true,
        confirm: true,
      },
    });
    \n

    \n
    swal({
      buttons: {
        cancel: true,
        confirm: "Confirm",
        roll: {
          text: "Do a barrell roll!",
          value: "roll",
        },
      },
    });
    \n

    \n
    • \n
\n
    \n
  • \n

    content

    \n

    Type: Node|string

    \n

    Default: null

    \n

    Description:

    \n

    For custom content, beyond just text and icons.

    \n

    Examples:

    \n
    swal({
      content: "input",
    });
    \n

    \n
    swal({
      content: {
        element: "input",
        attributes: {
          placeholder: "Type your password",
          type: "password",
        },
      },
    });
    \n

    \n
    var slider = document.createElement("input");
    slider.type = "range";
     
    swal({
      content: slider,
    });
    \n

    \n
    • \n
\n
    \n
  • \n

    className

    \n

    Type: string

    \n

    Default: "" (empty string)

    \n

    Description:

    \n

    Add a custom class to the SweetAlert modal. This is handy for changing the appearance.

    \n

    Example:

    \n
      swal("Hello world!", {
        className: "red-bg",
      });
    \n

    \n
    • \n
  • \n

    closeOnClickOutside

    \n

    Type: boolean

    \n

    Default: true

    \n

    Description:

    \n

    Decide whether the user should be able to dismiss the modal by clicking outside of it, or not.

    \n

    Example:

    \n
    swal({
      closeOnClickOutside: false,
    });
    \n

    \n
    • \n
  • \n

    closeOnEsc

    \n

    Type: boolean

    \n

    Default: true

    \n

    Description:

    \n

    Decide whether the user should be able to dismiss the modal by hitting the ESC key, or not.

    \n

    Example:

    \n
    swal({
      closeOnEsc: false,
    });
    \n

    \n
    • \n
\n
    \n
  • \n

    dangerMode

    \n

    Type: boolean

    \n

    Default: false

    \n

    Description:

    \n

    If set to true, the confirm button turns red and the default focus is set on the cancel button instead. This is handy when showing warning modals where the confirm action is dangerous (e.g. deleting an item).

    \n

    Example:

    \n
    swal("Are you sure?", {
      dangerMode: true,
      buttons: true,
    });
    \n

    \n
    • \n
\n
    \n
  • \n

    timer

    \n

    Type: number

    \n

    Default: null

    \n

    Description:

    \n

    Closes the modal after a certain amount of time (specified in ms). Useful to combine with buttons: false.

    \n

    Example:

    \n
    swal("This modal will disappear soon!", {
      buttons: false,
      timer: 3000,
    });
    \n

    \n
    • \n
\n

Methods

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionExample
closeCloses the currently open SweetAlert, as if you pressed the cancel button.swal.close()
getStateGet the state of the current SweetAlert modal.swal.getState()
setActionValueChange the promised value of one of the modal's buttons. You can either pass in just a string (by default it changes the value of the confirm button), or an object.swal.setActionValue({ confirm: 'Text from input' })
stopLoadingRemoves all loading states on the modal's buttons. Use it in combination with the button option closeModal: false.swal.stopLoading()
\n

Theming

\n
    \n
  • \n

    swal-overlay

    \n

    Example:

    \n
    .swal-overlay {
      background-color: rgba(43, 165, 137, 0.45);
    }
    \n

    \n
    • \n
  • \n

    swal-modal

    \n

    Example:

    \n
    .swal-modal {
      background-color: rgba(63,255,106,0.69);
      border: 3px solid white;
    }
    \n

    \n
    • \n
  • \n

    swal-title

    \n

    Example:

    \n
    .swal-title {
      margin: 0px;
      font-size: 16px;
      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
      margin-bottom: 28px;
    }
    \n

    \n
    • \n
  • \n

    swal-text

    \n

    Example:

    \n
    .swal-text {
      background-color: #FEFAE3;
      padding: 17px;
      border: 1px solid #F0E1A1;
      display: block;
      margin: 22px;
      text-align: center;
      color: #61534e;
    }
    \n

    \n
    • \n
  • \n

    swal-footer

    \n

    Example:

    \n
    .swal-footer {
      background-color: rgb(245, 248, 250);
      margin-top: 32px;
      border-top: 1px solid #E9EEF1;
      overflow: hidden;
    }
    \n

    \n
    • \n
  • \n

    swal-button

    \n

    Description:

    \n

    The modal's button(s). It has an extra class that changes depending on the button's type, in the format swal-button--{type}. The extra class for the confirm button for example is swal-button--confirm.

    \n

    Example:

    \n
    .swal-button {
      padding: 7px 19px;
      border-radius: 2px;
      background-color: #4962B3;
      font-size: 12px;
      border: 1px solid #3e549a;
      text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
    }
    \n

    \n
    • \n
\n\n
\n\n
\n\n\n
\n\n \n\n \n \n\n\n" }, { "path": "docs/guides/index.html", "content": "\n\n\n\n \n \n \n SweetAlert\n \n\n \n\n \n \n \n \n\n \n\n
\n
\n\n \n \n\n \n\n
\n
\n\n \n\n
\n\n \n\n
\n \n

Installation

\n

NPM/Yarn

\n

NPM combined with a tool like Browserify or Webpack is the recommended method of installing SweetAlert.

\n
npm install sweetalert --save
\n

Then, simply import it into your application:

\n
import swal from 'sweetalert';
\n

CDN

\n

You can also find SweetAlert on unpkg and jsDelivr and use the global swal variable.

\n
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
\n

Getting started

\n

Showing an alert

\n

After importing the files into your application, you can call the swal function (make sure it's called after the DOM has loaded!)

\n
swal("Hello world!");
\n

\n

If you pass two arguments, the first one will be the modal's title, and the second one its text.

\n
swal("Here's the title!", "...and here's the text!");
\n

\n

And with a third argument, you can add an icon to your alert! There are 4 predefined ones: "warning", "error", "success" and "info".

\n
swal("Good job!", "You clicked the button!", "success");
\n

\n

Using options

\n

The last example can also be rewritten using an object as the only parameter:

\n
swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
});
\n

With this format, we can specify many more options to customize our alert. For example we can change the text on the confirm button to "Aww yiss!":

\n
swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
  button: "Aww yiss!",
});
\n

\n

You can even combine the first syntax with the second one, which might save you some typing:

\n
swal("Good job!", "You clicked the button!", "success", {
  button: "Aww yiss!",
});
\n

For a full list of all the available options, check out the API docs!

\n

Using promises

\n

SweetAlert uses promises to keep track of how the user interacts with the alert.

\n

If the user clicks the confirm button, the promise resolves to true. If the alert is dismissed (by clicking outside of it), the promise resolves to null.

\n
swal("Click on either the button or outside the modal.")
.then((value) => {
  swal(`The returned value is: ${value}`);
});
\n

\n

This comes in handy if you want to warn the user before they perform a dangerous action. We can make our alert even better by setting some more options:

\n
    \n
  • icon can be set to the predefined "warning" to show a nice warning icon.
    • \n
  • By setting buttons (plural) to true, SweetAlert will show a cancel button in addition to the default confirm button.
    • \n
  • By setting dangerMode to true, the focus will automatically be set on the cancel button instead of the confirm button, and the confirm button will be red instead of blue to emphasize the dangerous action.
    • \n
\n
swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});
\n

\n

Advanced examples

\n

Customizing buttons

\n

We've already seen how we can set the text on the confirm button using button: "Aww yiss!".

\n

If we also want to show and customize the cancel button, we can instead set buttons to an array of strings, where the first value is the cancel button's text and the second one is the confirm button's text:

\n
swal("Are you sure you want to do this?", {
  buttons: ["Oh noez!", "Aww yiss!"],
});
\n

\n

If you want one of the buttons to just have their default text, you can set the value to true instead of a string:

\n
swal("Are you sure you want to do this?", {
  buttons: ["Oh noez!", true],
});
\n

\n

So what if you need more than just a cancel and a confirm button? Don't worry, SweetAlert's got you covered!

\n

By specifying an object for buttons, you can set exactly as many buttons as you like, and specify the value that they resolve to when they're clicked!

\n

In the example below, we set 3 buttons:

\n
    \n
  • cancel, which by default resolves to null and has a custom "Run away!" text.
    • \n
  • catch, which will resolve to the value we've specified ("catch") and has the custom text "Throw Pokéball!".
    • \n
  • defeat. Here, we specify true to let SweetAlert set some default configurations for the button. In this case, it will set the text to "Defeat" (capitalized) and the resolved value to defeat. Had we set the cancel button to true, it would still resolve to null as expected.
    • \n
\n
swal("A wild Pikachu appeared! What do you want to do?", {
  buttons: {
    cancel: "Run away!",
    catch: {
      text: "Throw Pokéball!",
      value: "catch",
    },
    defeat: true,
  },
})
.then((value) => {
  switch (value) {
 
    case "defeat":
      swal("Pikachu fainted! You gained 500 XP!");
      break;
 
    case "catch":
      swal("Gotcha!", "Pikachu was caught!", "success");
      break;
 
    default:
      swal("Got away safely!");
  }
});
\n

\n

You can check out all the available button options in the docs.

\n

AJAX requests

\n

Since SweetAlert is promise-based, it makes sense to pair it with AJAX functions that are also promise-based. Below is an example of using fetch to search for artists on the iTunes API. Note that we're using content: "input" in order to both show an input-field and retrieve its value when the user clicks the confirm button:

\n
swal({
  text: 'Search for a movie. e.g. "La La Land".',
  content: "input",
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(name => {
  if (!name) throw null;
 
  return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
})
.then(results => {
  return results.json();
})
.then(json => {
  const movie = json.results[0];
 
  if (!movie) {
    return swal("No movie was found!");
  }
 
  const name = movie.trackName;
  const imageURL = movie.artworkUrl100;
 
  swal({
    title: "Top result:",
    text: name,
    icon: imageURL,
  });
})
.catch(err => {
  if (err) {
    swal("Oh noes!", "The AJAX request failed!", "error");
  } else {
    swal.stopLoading();
    swal.close();
  }
});
\n

\n

Using DOM nodes as content

\n

Sometimes, you might run into a scenario where it would be nice to use the out-of-the box functionality that SweetAlert offers, but with some custom UI that goes beyond just styling buttons and text. For that, there's the content option.

\n

In the previous example, we saw how we could set content to "input" to get an <input /> element in our modal that changes the resolved value of the confirm button based on its value.\n"input" is a predefined option that exists for convenience, but you can also set content to any DOM node!

\n

Let's see how we can recreate the functionality of the following modal...

\n
swal("Write something here:", {
  content: "input",
})
.then((value) => {
  swal(`You typed: ${value}`);
});
\n

\n

...using a custom DOM node!

\n

We're going to use React here, since it's a well-known UI library that can help us understand how to create more complex SweetAlert interfaces, but you can use any library you want, as long as you can extract a DOM node from it!

\n
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
 
const DEFAULT_INPUT_TEXT = "";
 
class MyInput extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      text: DEFAULT_INPUT_TEXT,
    };
  }
 
  changeText(e) {
    let text = e.target.value;
 
    this.setState({
      text,
    });
 
    /*
     * This will update the value that the confirm
     * button resolves to:
     */
    swal.setActionValue(text);
  }
 
  render() {
    return (
      <input
        value={this.state.text}
        onChange={this.changeText.bind(this)}
      />
    )
  }
}
 
// We want to retrieve MyInput as a pure DOM node: 
let wrapper = document.createElement('div');
ReactDOM.render(<MyInput />, wrapper);
let el = wrapper.firstChild;
 
swal({
  text: "Write something here:",
  content: el,
  buttons: {
    confirm: {
      /*
       * We need to initialize the value of the button to
       * an empty string instead of "true":
       */
      value: DEFAULT_INPUT_TEXT,
    },
  },
})
.then((value) => {
  swal(`You typed: ${value}`);
});
\n

\n

This might look very complex at first, but it's actually pretty simple. All we're doing is creating an input tag as a React component. We then extract its DOM node and pass it into under the swal function's content option to render it as an unstyled element.

\n

The only code that's specific to SweetAlert is the swal.setActionValue() and the swal() call at the end. The rest is just basic React and JavaScript.

\n
\n \"Facebook\n
\n Using this technique, we can create modals with more interactive UIs, such as this one from Facebook.\n
\n
\n

Using with libraries

\n

While the method documented above for creating more advanced modal designs works, it gets quite tedious to manually create nested DOM nodes. That's why we've also made it easy to integrate your favourite template library into SweetAlert, using the SweetAlert Transformer.

\n

Using React

\n

In order to use SweetAlert with JSX syntax, you need to install SweetAlert with React. Note that you need to have both sweetalert and @sweetalert/with-react as dependencies in your package.json.

\n

After that, it's easy. Whenever you want to use JSX in your SweetAlert modal, simply import swal from @sweetalert/with-react instead of from sweetalert.

\n
import React from 'react'
import swal from '@sweetalert/with-react'
 
swal(
  <div>
    <h1>Hello world!</h1>
    <p>
      This is now rendered with JSX!
    </p>
  </div>
)
\n

\n

The JSX syntax replaces the modal's content option, so you can still use all of SweetAlert's other features. Here's how you could implement that Facebook modal that we saw earlier:

\n
import React from 'react'
import swal from '@sweetalert/with-react'
 
const onPick = value => {
  swal("Thanks for your rating!", `You rated us ${value}/3`, "success")
}
 
const MoodButton = ({ rating, onClick }) => (
  <button 
    data-rating={rating}
    className="mood-btn" 
    onClick={() => onClick(rating)}
  />
)
 
swal({
  text: "How was your experience getting help with this issue?",
  buttons: {
    cancel: "Close",
  },
  content: (
    <div>
      <MoodButton 
        rating={1} 
        onClick={onPick}
      />
      <MoodButton 
        rating={2} 
        onClick={onPick}
      />
      <MoodButton 
        rating={3} 
        onClick={onPick}
      />
    </div>
  )
})
\n

\n

Upgrading from 1.X

\n

SweetAlert 2.0 introduces some important breaking changes in order to make the library easier to use and more flexible.

\n

The most important change is that callback functions have been deprecated in favour of promises, and that you no longer have to import any external CSS file (since the styles are now bundled in the .js-file).

\n

Below are some additional deprecated options along with their replacements:

\n
    \n
  • When using a single string parameter (e.g. swal("Hello world!")), that parameter will be the modal's text instead of its title.
    • \n
  • type and imageUrl have been replaced with a single icon option. If you're using the shorthand version (swal("Hi", "Hello world", "warning")) you don't have to change anything.
    • \n
  • customClass is now className.
    • \n
  • imageSize is no longer used. Instead, you should specify dimension restrictions in CSS if necessary. If you have a special use case, you can give your modal a custom class.
    • \n
  • showCancelButton and showConfirmButton are no longer needed. Instead, you can set buttons: true to show both buttons, or buttons: false to hide all buttons. By default, only the confirm button is shown.
    • \n
  • confirmButtonText and cancelButtonText are no longer needed. Instead, you can set button: "foo" to set the text on the confirm button to "foo", or buttons: ["foo", "bar"] to set the text on the cancel button to "foo" and the text on the confirm button to "bar".
    • \n
  • confirmButtonColor is no longer used. Instead, you should specify all stylistic changes through CSS. As a useful shorthand, you can set dangerMode: true to make the confirm button red. Otherwise, you can specify a class in the button object.
    • \n
  • closeOnConfirm and closeOnCancel are no longer used. Instead, you can set the closeModal parameter in the button options.
    • \n
  • showLoaderOnConfirm is no longer necessary. Your button will automatically show a loding animation when its closeModal parameter is set to false.
    • \n
  • animation has been deprecated. All stylistic changes can instead be applied through CSS and a custom modal class.
    • \n
  • type: "input", inputType, inputValue and inputPlaceholder have all been replaced with the content option. You can either specify content: "input" to get the default options, or you can customize it further using the content object.
    • \n
  • html is no longer used. Instead use the content object.
    • \n
  • allowEscapeKey is now closeOnEsc for clarity.
    • \n
  • allowClickOutside is now closeOnClickOutside for clarity.
    • \n
\n\n
\n\n
\n\n\n
\n\n \n\n \n \n\n\n" }, { "path": "docs/index.html", "content": "\n\n\n\n \n \n \n SweetAlert\n \n\n \n\n \n \n \n \n\n \n\n
\n
\n\n \n \n\n \n\n
\n
\n\n \n \n \n \n \n\n \n \n \n \n\n\n
\n\n
\n\n
\n\n
\n

\n A beautiful replacement for \n \n success messages\n \n

\n\n
\n
\n \n \n \n
\n\n
\n npm install sweetalert\n
\n
\n\n
\n\n\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n\n

\n You've arrived!\n

\n

\n How lovely. Let me take your coat.\n

\n
\n\n
\n\n
\n
\n \n \n
\n
\n\n

\n Oops!\n

\n

\n Seems like something went wrong!\n

\n
\n\n
\n
\n \n \n \n
\n\n

\n Delete important stuff?\n

\n

\n That doesn't seem like a good idea. Are you sure you want to do that?\n

\n\n
\n
\n \n
\n\n
\n \n
\n
\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n

\n SweetAlert makes popup messages easy and pretty.\n

\n\n
\n\n
\n
\n Normal alert\n
\n\n
\n
\n
\n alert\n (\n "Oops, something went wrong!"\n )\n
\n
\n
\n\n \n
\n\n
\n\n
\n
\n SweetAlert\n
\n\n
\n
\n
\n swal\n (\n "Oops"\n ,\n  "Something went wrong!"\n ,\n  "error"\n )\n
\n
\n
\n\n \n
\n\n
\n\n

\n Pretty cool, huh?\n

\n\n \n Get started!\n \n\n
\n\n
\n\n

\n You can customize SweetAlert to fit your needs\n

\n\n
\n\n \n View docs\n \n\n
\n\n\n\n
\n\n \n\n \n \n\n\n" }, { "path": "docs-src/assets/css/app.styl", "content": "@import 'variables';\n@import 'normalize';\n\n@import 'header';\n@import 'highlight';\n\n@import 'index';\n@import 'guide';\n\nbody {\n font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;\n}\n\nsvg.hidden {\n display: block;\n}\n\n.page-container {\n max-width: 1000px;\n margin: 0 auto;\n padding: 0 10px;\n position: relative;\n}\n\n$preview-color = #A3DD82;\n\n.preview {\n background-color: $preview-color;\n box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07);\n border-radius: 4px;\n border: none;\n color: white;\n font-size: 15px;\n color: white;\n padding: 9px 18px;\n margin-top: 20px;\n &::before {\n content: \"\";\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-left: 10px solid white;\n display: inline-block;\n margin-right: 5px;\n }\n &:hover {\n background-color: lightness($preview-color, 65%)\n }\n}\n\n\nfooter {\n padding: 40px 20px;\n text-align: center;\n color: #728194;\n\n .love-icon {\n background-image: url(\"/assets/images/heart-icon.svg\");\n width: 22px;\n height: 20px;\n display: inline-block;\n vertical-align: middle;\n margin: 0 5px;\n position: relative;\n top: -2px;\n }\n}\n" }, { "path": "docs-src/assets/css/guide.styl", "content": "@import 'table';\n\n.doc-container {\n overflow: hidden;\n}\n\n$side-menu-width = 225px;\n\n.side-menu {\n width: $side-menu-width;\n float: left;\n padding-left: 20px;\n position: fixed;\n top: 88px;\n @media all and (max-width: $phablet-width) {\n float: none;\n position: static;\n margin-top: 120px;\n text-align: center;\n width: 100%;\n margin-bottom: -60px;\n padding-left: 0;\n }\n\n .title {\n font-size: 20px;\n color: rgba(0,0,0,0.63);\n font-weight: 600;\n margin-top: 50px;\n margin-bottom: 36px;\n }\n\n a {\n font-size: 17px;\n color: rgba(0, 0, 0, 0.42);\n display: block;\n margin: 18px 0;\n &:hover {\n color: rgba(0, 0, 0, 0.6);\n }\n }\n\n}\n\n.page-content {\n float: left;\n width: s('calc(100% - %s - 20px)', $side-menu-width);\n margin-left: $side-menu-width;\n min-height: 220px;\n margin-top: 16px;\n\n font-size: 16px;\n color: rgba(0,0,0,0.59);\n line-height: 29px;\n @media all and (max-width: $phablet-width) {\n float: none;\n margin-left: 0;\n width: 100%;\n }\n\n h1 {\n padding-top: 90px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n padding-bottom: 20px;\n margin-bottom: 0;\n &::before {\n content: \"#\";\n position: absolute;\n margin-left: -23px;\n font-size: 24px;\n margin-top: 3px;\n color: #f38270;\n font-weight: 500;\n }\n \n a {\n font-size: 30px;\n color: rgba(0,0,0,0.85);\n font-weight: 600;\n }\n }\n\n h2,\n h3 {\n font-size: 20px;\n margin-top: -70px;\n padding-top: 100px;\n\n a {\n color: rgba(0, 0, 0, 0.7);\n }\n }\n\n ul {\n list-style-type: disc; \n margin-bottom: 20px;\n\n li {\n margin: 5px 0;\n }\n }\n\n img {\n max-width: 100%;\n }\n\n &.api > ul {\n list-style-type: none;\n padding-left: 30px;\n\n > li h3::before {\n content: \"\";\n width: 8px;\n height: 8px;\n position: absolute;\n border-radius: 50%;\n background-color: $main-color;\n margin-left: -27px;\n margin-top: 12px;\n }\n }\n\n code {\n font-family: $code-font;\n padding: 3px 6px;\n border-radius: 2px;\n border: 1px solid rgba(0,0,0,.12);\n background: rgb(248, 248, 248);\n font-size: 14px;\n color: $main-color;\n }\n\n kbd {\n display: inline-block;\n padding: 3px 5px;\n font-size: 11px;\n line-height: 10px;\n color: #444d56;\n vertical-align: middle;\n background-color: #fafbfc;\n border: solid 1px #c6cbd1;\n border-bottom-color: #959da5;\n border-radius: 3px;\n box-shadow: inset 0 -1px 0 #959da5;\n font-family: sans-serif;\n }\n\n // Special web component:\n preview-button {\n /* Matches the \"real\" button's height: */\n display: block;\n height: 44px;\n }\n\n button.preview {\n margin: 20px auto;\n width: 110px;\n display: block;\n position: relative;\n z-index: 2;\n }\n\n figcaption {\n font-style: italic;\n }\n}\n\n.swal-modal.red-bg {\n background-color: rgba(255, 0, 0, 0.28);\n}\n\n.mood-btn {\n background: none;\n border: none;\n width: 28px;\n height: 28px;\n background-image: url(/assets/images/mood-sad.png);\n background-size: 28px 28px;\n padding: 4px;\n background-position: center center;\n box-sizing: content-box;\n background-repeat: no-repeat;\n margin: 0 7px;\n position: relative;\n overflow: hidden;\n border-radius: 3px;\n}\n.mood-btn:hover::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.03);\n}\n.mood-btn[data-rating=\"2\"] {\n background-image: url(/assets/images/mood-neutral.png);\n}\n.mood-btn[data-rating=\"3\"] {\n background-image: url(/assets/images/mood-happy.png);\n}\n\n" }, { "path": "docs-src/assets/css/header.styl", "content": ".global-header {\n background-color: white;\n box-shadow: 0 1px 15px 0 rgba(192,72,25,0.32);\n height: $header-height;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 100;\n\n .logo {\n width: 162px;\n height: 36px;\n background-image: url(\"/assets/images/logo.svg\");\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n float: left;\n margin-top: 22px;\n margin-left: 15px;\n @media all and (max-width: $phablet-width) {\n float: none;\n height: 29px;\n display: block;\n margin: 0 auto;\n margin-top: 10px;\n }\n }\n\n nav {\n font-size: 17px;\n color: $main-color;\n float: right;\n margin-top: 29px;\n @media all and (max-width: $phablet-width) {\n float: none;\n text-align: center;\n font-size: 16px;\n margin-top: 10px;\n }\n\n a {\n position: relative;\n cursor: pointer;\n &::before {\n content: \"\";\n background-color: $main-color;\n height: 3px;\n border-radius: 2px;\n position: absolute;\n left: 0;\n right: 0;\n bottom: -5px;\n display: none;\n }\n &:hover::before {\n display: block;\n }\n }\n\n .github-icon {\n width: 26px;\n height: 25px;\n background-image: url(\"/assets/images/github.svg\");\n display: inline-block;\n vertical-align: middle;\n position: relative;\n top: -3px;\n }\n }\n\n ul {\n white-space: nowrap;\n padding: 0;\n\n li {\n display: inline-block;\n margin: 0 15px;\n }\n }\n\n}\n" }, { "path": "docs-src/assets/css/highlight.styl", "content": ".highlight {\n $code-color = rgba(0,0,0,0.62);\n\n background-color: #F8F8F8;\n padding: 10px 23px;\n font-size: 14px;\n line-height: normal;\n color: $code-color;\n overflow-x: auto;\n\n .editor {\n font-family: $code-font;\n }\n\n .line {\n margin: 6px 0;\n }\n\n &.bash .line::before {\n content: \"$ \";\n opacity: 0.5;\n }\n\n // Colors:\n $purple = #8858d2;\n $green = #4ac14a;\n $pink = #b646c1;\n $blue = #00a9ff;\n $orange = #f7af00;\n $gray = rgba(0, 0, 0, 0.3);\n\n .string {\n color: $purple;\n }\n\n .html {\n &.name.tag {\n color: $green;\n }\n &.attribute-name {\n color: $pink;\n }\n }\n\n .js {\n &.name.function {\n color: $main-color;\n }\n &.boolean,\n &.numeric {\n color: $green;\n }\n &.control,\n &.assignment {\n color: $pink;\n }\n &.storage,\n &.storage,\n &.variable {\n color: $blue;\n }\n &.comment {\n color: $gray;\n }\n\n &.function {\n color: inherit;\n }\n\n &.variable {\n &.other,\n &.parameter {\n color: inherit;\n }\n }\n\n &.storage.class,\n // \"extends\":\n &.class + * + .storage.modifier {\n color: $pink;\n }\n }\n\n .css {\n &.selector {\n color: $green;\n }\n &.property-name {\n color: $blue;\n }\n &.property-value {\n color: $purple;\n }\n &.separator,\n &.terminator {\n color: $code-color;\n }\n }\n}\n" }, { "path": "docs-src/assets/css/index.styl", "content": "$modal-width = 409px;\n\n.landing-top {\n height: 370px;\n position: relative;\n padding-top: $header-height;\n @media all and (max-width: $tablet-width) {\n height: 600px;\n }\n\n .bg {\n background-image: linear-gradient(-132deg, #FF7D79 0%, #F28B74 92%);\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n -webkit-clip-path: url(\"#top-transition-clip-shape\");\n clip-path: url(\"#top-transition-clip-shape\");\n will-change: transform; /* For Safari */\n\n /*\n * For some reason, clip path makes the whole page\n * flicker in Mobile Safari. \n * So we disable it for mobile.\n */\n @media all and (max-width: $phablet-width) {\n -webkit-clip-path: none;\n clip-path: none;\n }\n }\n\n .swal-modal-example {\n transform: none;\n opacity: 1;\n height: 292px;\n width: $modal-width;\n margin: 20px;\n background-color: white;\n box-shadow: 0 5px 22px 0 rgba(0,0,0,0.20);\n border-radius: 8px;\n margin-top: 59px;\n text-align: center;\n display: inline-block;\n vertical-align: middle;\n overflow: hidden;\n transition: height 0.3s;\n position: absolute;\n z-index: 10;\n top: 0;\n left: 0;\n @media all and (max-width: $tablet-width) {\n position: relative;\n display: block;\n margin: 20px auto;\n }\n @media all and (max-width: $mobile-width) {\n width: 100%;\n }\n\n &[data-type=\"success\"] {\n height: 292px;\n }\n &[data-type=\"warning\"] {\n height: 325px;\n }\n\n .swal-title {\n padding-top: 10px;\n }\n\n .swal-text {\n color: rgba(0,0,0,0.48);\n margin-top: 6px;\n }\n }\n\n .modal-content-overlay {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: white;\n z-index: 2;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.2s;\n &.show {\n opacity: 1;\n }\n }\n\n .example-content {\n display: none;\n &.show {\n display: block;\n }\n }\n\n .desc {\n display: inline-block;\n position: relative;\n color: white;\n margin-left: 50px;\n max-width: s('calc(100% - %s - 112px)', $modal-width);\n vertical-align: middle;\n margin-top: 61px;\n padding-left: 473px;\n @media all and (max-width: $tablet-width) {\n display: block;\n max-width: none;\n padding-left: 0;\n margin-left: 0;\n text-align: center;\n }\n }\n\n h2 {\n font-size: 30px;\n line-height: 51px;\n font-weight: 300;\n @media all and (max-width: $small-width) {\n font-size: 25px;\n margin-top: -20px;\n }\n }\n\n .text-rotater {\n display: block;\n height: 57px;\n overflow: hidden;\n\n span {\n display: block;\n transition: transform 0.4s;\n }\n\n &.slide-up span {\n transform: translateY(-51px);\n }\n }\n\n .install {\n background: rgba(120,40,40,0.32);\n border-radius: 7px;\n max-width: 357px;\n padding: 12px;\n @media all and (max-width: $tablet-width) {\n margin: 0 auto;\n text-align: left;\n }\n\n .button {\n background: rgba(255,255,255,0.39);\n width: 12px;\n height: 12px;\n border-radius: 50%;\n display: inline-block;\n }\n\n .command {\n font-family: $code-font;\n padding: 12px;\n padding-left: 30px;\n &::before {\n content: \"$\";\n opacity: 0.5;\n transform: rotate(8deg);\n font-size: 20px;\n position: absolute;\n margin-left: -27px;\n margin-top: -2px;\n }\n }\n }\n}\n\n.comparison-container {\n padding-bottom: 70px;\n text-align: center;\n\n h3 {\n font-size: 22px;\n color: #B49993;\n font-weight: 400;\n display: block;\n text-align: center;\n margin-top: 93px;\n margin-bottom: 80px;\n }\n\n .code-container {\n text-align: center;\n width: calc(50% - 60px);\n display: inline-block;\n vertical-align: middle;\n @media all and (max-width: $phablet-width) {\n width: 100%;\n }\n }\n\n .versus {\n width: 35px;\n height: 33px;\n background-image: url(\"/assets/images/vs.svg\");\n display: inline-block;\n vertical-align: middle;\n margin: 0 30px;\n @media all and (max-width: $phablet-width) {\n margin: 30px;\n margin-bottom: -10px;\n }\n }\n\n h5 {\n font-size: 13px;\n color: rgba(0,0,0,0.21);\n text-transform: uppercase;\n text-align: left;\n margin-bottom: 15px;\n &.swal-logo {\n text-indent: -9999999px;\n margin-top: 2px;\n &::after {\n content: \"\";\n background-image: url(\"/assets/images/logo-small.svg\");\n width: 91px;\n height: 20px;\n display: block;\n }\n }\n }\n\n .highlight {\n text-align: left;\n padding: 16px 23px;\n span {\n margin: 0 -4px;\n }\n }\n\n .remark {\n font-size: 20px;\n color: $main-color;\n margin-top: 80px;\n }\n\n .get-started-button {\n background-color: $main-color;\n color: white;\n border-radius: 8px;\n font-size: 22px;\n padding: 14px 55px;\n margin: 20px 0;\n display: inline-block;\n }\n\n}\n\nretina-bg(namespace, extension = 'png') {\n $path = \"/assets/images/\";\n\tbackground-image: url($path + namespace + '.' + extension);\n background-image: -webkit-image-set(url($path + namespace + '.' + extension) 1x, url($path + namespace + '@2x' + '.' + extension) 2x);\n}\n\n.customize-container {\n background-color: #999EAF;\n text-align: center;\n color: white;\n text-align: center;\n retina-bg(\"pattern\")\n padding: 40px 0;\n -webkit-clip-path: url(\"#customization-transition-clip-shape\");\n clip-path: url(\"#customization-transition-clip-shape\");\n will-change: transform; /* For Safari */\n @media all and (max-width: $phablet-width) {\n -webkit-clip-path: none;\n clip-path: none;\n }\n\n h3 {\n font-weight: 400;\n font-size: 20px;\n padding: 50px 0;\n }\n\n .example-modals {\n retina-bg(\"modal-examples\")\n height: 284px;\n background-size: auto 100%;\n background-position: 0 0;\n animation: scrollExamples 80s infinite linear;\n }\n\n .view-api-button {\n border: 3px solid #FFFFFF;\n border-radius: 6px;\n color: white;\n padding: 12px 52px;\n font-size: 18px;\n margin-top: 60px;\n display: inline-block;\n }\n}\n\n@keyframes scrollExamples {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -2146px 0;\n }\n}\n\n" }, { "path": "docs-src/assets/css/normalize.styl", "content": "body {\n margin: 0;\n padding: 0;\n}\n\na {\n text-decoration: none;\n color: $main-color;\n}\n\np a:hover {\n text-decoration: underline;\n}\n\nbutton {\n cursor: pointer;\n &:focus {\n outline: none;\n }\n}\n\nul {\n list-style-type: none;\n margin: 0;\n}\n" }, { "path": "docs-src/assets/css/table.styl", "content": ".page-content {\n\n $mobile-breakpoint: 880px;\n\n table {\n border-collapse: collapse;\n border: none;\n width: 100%;\n }\n\n th {\n font-size: 17px;\n color: rgba(0,0,0,0.34);\n padding: 20px 15px;\n text-transform: capitalize;\n font-weight: 400;\n }\n\n thead > tr {\n border-bottom: 2px solid rgba(0,0,0,0.10);\n }\n\n tr {\n text-align: left;\n box-shadow: 0px -1px 0px rgba(0,0,0,0.15);\n &:first-child {\n box-shadow: none;\n }\n }\n\n td {\n padding: 17px;\n\n &:first-child > code {\n color: #2E9FEF;\n background: none;\n border: none;\n font-size: 16px;\n padding: 0;\n }\n }\n\n tbody tr {\n @media all and (min-width: mobile-breakpoint) {\n &:nth-child(1) {\n box-shadow: none;\n }\n }\n }\n\n @media all and (max-width: mobile-breakpoint) {\n\n /* Force table to not be like tables anymore */\n & table,\n & thead,\n & tbody,\n & th,\n & td,\n & tr {\n display: block; \n }\n\n /* Hide table headers (but not display: none;, for accessibility) */\n & thead tr { \n position: absolute;\n top: -9999px;\n left: -9999px;\n }\n \n & tr {\n margin-top: -1px;\n box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.27)\n }\n \n & td { \n /* Behave like a \"row\" */\n border: none;\n border-bottom: 1px solid #eee; \n position: relative;\n padding-left: mobile-padding;\n min-height: 20px;\n }\n \n & td::before { \n /* Now like a table header */\n position: absolute;\n /* Top/left values mimic padding */\n top: 15px;\n left: 15px;\n width: mobile-padding;\n width: calc(mobile-padding - 35px);\n overflow: hidden;\n text-overflow: ellipsis;\n padding-right: 10px; \n white-space: nowrap;\n color: rgba(0, 0, 0, 0.54);\n font-family: page-font;\n font-size: 16px;\n text-transform: capitalize;\n\n content: attr(data-name);\n }\n \n }\n\n}\n" }, { "path": "docs-src/assets/css/variables.styl", "content": "$main-color = #F27474;\n\n$header-height = 80px;\n$code-font = 'Inconsolata', monospace;\n\n$tablet-width = 1000px;\n$phablet-width = 600px;\n$mobile-width = 450px;\n$small-width = 380px;\n" }, { "path": "docs-src/assets/js/add-preview-buttons.js", "content": "const Babel = require('babel-standalone');\n\n/*\n * In our Markdown files, we have some tags.\n * We want to transform these into button.preview,\n * which onclick will run the JS code right above them!\n */\n\nconst previewPlaceholders = document.querySelectorAll('preview-button');\n\nconst createButton = placeholder => {\n let button = document.createElement('button');\n button.className = \"preview\";\n button.innerText = \"Preview\";\n\n // Add button right above placeholder\n placeholder.parentNode.insertBefore(button, placeholder)\n\n return button;\n};\n\nconst getCodeEl = placeholder => {\n return placeholder.parentNode.previousSibling.previousSibling;\n};\n\nconst getCode = highlightEl => highlightEl.innerText.trim();\n\nconst resetStyles = () => {\n const swalOverlay = document.querySelector('.swal-overlay');\n const allSwalEls = swalOverlay.querySelectorAll('*');\n\n swalOverlay.removeAttribute('style');\n\n allSwalEls.forEach((el) => {\n el.removeAttribute('style');\n });\n};\n\nconst setStyles = (code) => {\n const array = code.split(/[{}]/g);\n const selector = array[0].trim();\n\n const el = document.querySelector(selector);\n\n let css = array[1].trim();\n css = css.replace(/\\s+/g, ' ');\n css = css.replace(/;\\s?/g, '; ');\n css = css.replace(/:\\s?/g, ': ');\n\n el.style.cssText = css;\n};\n\npreviewPlaceholders.forEach((placeholder) => {\n const highlightEl = getCodeEl(placeholder);\n const code = getCode(highlightEl);\n\n const button = createButton(placeholder);\n const givenFunction = placeholder.dataset.function;\n\n let lang = highlightEl.classList[1];\n\n /*\n * If there's a specified data-function on , call that.\n * Othwerwise, just use the code from the highlightjs above it:\n */\n button.addEventListener('click', () => {\n if (givenFunction) {\n window[givenFunction]();\n } else if (lang === \"css\") {\n swal(\"Sweet!\", \"I like customizing!\");\n resetStyles();\n setStyles(code);\n } else {\n const transpiledCode = Babel.transform(code, { presets: ['es2015'] }).code;\n eval(transpiledCode);\n }\n });\n\n placeholder.remove();\n});\n\n" }, { "path": "docs-src/assets/js/index.js", "content": "// Fetch polyfill\nimport 'whatwg-fetch';\n\n// NodeList.forEach() polyfill\nimport 'nodelist-foreach-polyfill';\n\nimport './add-preview-buttons';\n\nimport './landing-text-rotater';\n/*\n * FOR GUIDES EXAMPLES:\n */\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport swalWithReact from '@sweetalert/with-react';\n\nconst DEFAULT_INPUT_TEXT = \"\";\n\nclass MyInput extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n text: DEFAULT_INPUT_TEXT,\n };\n }\n\n changeText(e) {\n let text = e.target.value;\n\n this.setState({\n text,\n });\n\n /*\n * This will update the value that the confirm\n * button resolves to:\n */\n swal.setActionValue(text);\n }\n\n render() {\n return (\n \n )\n }\n}\n\n// We want to retrieve MyInput as a pure DOM node:\nlet wrapper = document.createElement('div');\nReactDOM.render(, wrapper);\nlet el = wrapper.firstChild;\n\nwindow.reactExample = () => {\n\n swal({\n text: \"Write something here:\",\n content: el,\n buttons: {\n confirm: {\n value: DEFAULT_INPUT_TEXT,\n },\n },\n })\n .then((value) => {\n swal(`You typed: ${value}`);\n });\n\n};\n\nwindow.withReactExample = () => {\n swalWithReact(\n
\n

Hello world!

\n

\n This is now rendered with JSX!\n

\n
\n );\n};\n\nwindow.withReactOptionsExample = () => {\n const onPick = value => {\n swal(\"Thanks for your rating!\", `You rated us ${value}/3`, \"success\")\n }\n\n const MoodButton = ({ rating, onClick }) => (\n \n \n\n
\n \n
\n \n \n\n
\n\n \n\n \n\n\n\n
\n\n

\n SweetAlert makes popup messages easy and pretty.\n

\n\n
\n\n
\n
\n Normal alert\n
\n\n
\n
\n
\n alert\n (\n \"Oops, something went wrong!\"\n )\n
\n
\n
\n\n \n Preview\n \n
\n\n
\n\n
\n
\n SweetAlert\n
\n\n
\n
\n
\n swal\n (\n \"Oops\"\n ,\n  \"Something went wrong!\"\n ,\n  \"error\"\n )\n
\n
\n
\n\n \n Preview\n \n
\n\n
\n\n

\n Pretty cool, huh?\n

\n\n \n Get started!\n \n\n
\n\n
\n\n

\n You can customize SweetAlert to fit your needs\n

\n\n
\n\n \n View docs\n \n\n
\n\n" }, { "path": "docs-src/layout-docs.hbs", "content": "\n\n
\n\n \n\n
\n {{{body}}}\n
\n\n
\n" }, { "path": "docs-src/layout-guides.hbs", "content": "\n\n
\n\n \n\n
\n {{{body}}}\n
\n\n
\n" }, { "path": "docs-src/layout.hbs", "content": "\n\n\n\n \n \n \n SweetAlert\n \n\n \n\n \n \n \n \n\n \n\n
\n
\n\n \n \n\n \n\n
\n
\n\n {{{body}}}\n\n
\n\n \n\n \n \n\n\n" }, { "path": "package.json", "content": "{\n \"name\": \"sweetalert\",\n \"version\": \"2.1.2\",\n \"description\": \"A beautiful replacement for JavaScript's \\\"alert\\\"\",\n \"main\": \"dist/sweetalert.min.js\",\n \"types\": \"typings/sweetalert.d.ts\",\n \"scripts\": {\n \"build\": \"node_modules/.bin/webpack -p\",\n \"buildtest\": \"npm run build && jest\",\n \"test\": \"node_modules/.bin/jest\",\n \"builddocs\": \"node_modules/jus/cli.js build docs-src docs\",\n \"docs\": \"npm run build && node_modules/jus/cli.js serve docs-src\",\n \"prepare\": \"npm run build && npm run builddocs\",\n \"prepublishOnly\": \"npm run build\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/t4t5/sweetalert\"\n },\n \"keywords\": [\n \"sweetalert\",\n \"alert\",\n \"modal\",\n \"popup\"\n ],\n \"author\": \"Tristan Edwards (https://tristanedwards.me)\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/t4t5/sweetalert/issues\"\n },\n \"homepage\": \"https://sweetalert.js.org/\",\n \"devDependencies\": {\n \"@types/jest\": \"19.2.3\",\n \"autoprefixer\": \"6.7.7\",\n \"babel-core\": \"6.24.1\",\n \"babel-loader\": \"6.4.1\",\n \"babel-plugin-transform-es2015-modules-commonjs\": \"6.24.1\",\n \"babel-plugin-transform-runtime\": \"6.23.0\",\n \"babel-preset-env\": \"1.4.0\",\n \"babel-preset-es2015\": \"6.24.1\",\n \"babel-preset-react\": \"6.24.1\",\n \"babel-standalone\": \"^6.26.0\",\n \"babelify\": \"^6.0.2\",\n \"browserify\": \"^9.0.8\",\n \"copy-webpack-plugin\": \"^4.0.1\",\n \"css-loader\": \"0.28.7\",\n \"dts-bundle\": \"0.7.3\",\n \"exports-loader\": \"0.6.4\",\n \"expose-loader\": \"0.7.3\",\n \"glob\": \"^5.0.3\",\n \"jest\": \"19.0.2\",\n \"jquery\": \"3.2.1\",\n \"jus\": \"0.24.1\",\n \"nodelist-foreach-polyfill\": \"^1.2.0\",\n \"opencollective\": \"^1.0.3\",\n \"path\": \"^0.11.14\",\n \"postcss-color-function\": \"3.0.0\",\n \"postcss-custom-properties\": \"5.0.2\",\n \"postcss-easy-import\": \"2.0.0\",\n \"postcss-loader\": \"1.3.3\",\n \"postcss-nesting\": \"2.3.1\",\n \"react\": \"15.5.4\",\n \"react-dom\": \"15.5.4\",\n \"source-map-loader\": \"0.2.1\",\n \"sweetalert\": \"file:./\",\n \"@sweetalert/with-react\": \"^0.1.1\",\n \"style-loader\": \"0.18.2\",\n \"ts-jest\": \"19.0.14\",\n \"ts-loader\": \"2.0.3\",\n \"tslint\": \"5.1.0\",\n \"tslint-loader\": \"3.5.2\",\n \"typescript\": \"2.2.2\",\n \"vinyl-buffer\": \"^1.0.0\",\n \"vinyl-source-stream\": \"^1.1.0\",\n \"webpack\": \"3.5.5\",\n \"webpack-bundle-analyzer\": \"2.9.0\",\n \"webpack-dev-server\": \"2.4.2\",\n \"webpack-merge\": \"4.1.0\",\n \"whatwg-fetch\": \"^2.0.3\"\n },\n \"jest\": {\n \"verbose\": true,\n \"transform\": {\n \"^.+\\\\.tsx?$\": \"/node_modules/ts-jest/preprocessor.js\"\n },\n \"testRegex\": \"(/__tests__/.*|\\\\.(test|spec))\\\\.(ts|tsx|js)$\",\n \"moduleFileExtensions\": [\n \"ts\",\n \"tsx\",\n \"js\",\n \"json\"\n ]\n },\n \"files\": [\n \"dist\",\n \"LICENSE.md\",\n \"README.md\",\n \"typings\"\n ],\n \"dependencies\": {\n \"es6-object-assign\": \"^1.1.0\",\n \"promise-polyfill\": \"^6.0.2\"\n },\n \"collective\": {\n \"type\": \"opencollective\",\n \"url\": \"https://opencollective.com/SweetAlert\"\n }\n}\n" }, { "path": "postcss.config.js", "content": "module.exports = {\n map: true,\n plugins: [\n require('postcss-easy-import'),\n require('postcss-nesting'),\n require('postcss-custom-properties'),\n require('postcss-color-function'),\n require('autoprefixer'),\n ]\n}\n" }, { "path": "src/core.ts", "content": "/*\n * SweetAlert\n * 2014-2017 – Tristan Edwards\n * https://github.com/t4t5/sweetalert\n */\n\nimport init from './modules/init';\n\nimport {\n openModal,\n onAction,\n getState,\n stopLoading,\n} from './modules/actions';\n\nimport state, {\n setActionValue,\n ActionOptions,\n SwalState,\n} from './modules/state';\n\nimport {\n SwalOptions,\n getOpts,\n setDefaults,\n} from './modules/options';\n\nexport type SwalParams = (string|Partial)[];\n\nexport interface SweetAlert {\n (...params: SwalParams): Promise,\n close? (namespace?: string): void,\n getState? (): SwalState,\n setActionValue? (opts: string|ActionOptions): void,\n stopLoading? (): void,\n setDefaults? (opts: object): void,\n};\n\nconst swal:SweetAlert = (...args) => {\n\n // Prevent library to be run in Node env:\n if (typeof window === 'undefined') return;\n\n const opts: SwalOptions = getOpts(...args);\n\n return new Promise((resolve, reject) => {\n state.promise = { resolve, reject };\n\n init(opts);\n\n // For fade animation to work:\n setTimeout(() => {\n openModal();\n });\n\n });\n};\n\nswal.close = onAction;\nswal.getState = getState;\nswal.setActionValue = setActionValue;\nswal.stopLoading = stopLoading;\nswal.setDefaults = setDefaults;\n\nexport default swal;\n" }, { "path": "src/css/button-loader.css", "content": ".swal-button--loading {\n color: transparent;\n\n & ~ .swal-button__loader {\n opacity: 1;\n }\n}\n\n.swal-button__loader {\n position: absolute;\n height: auto;\n width: 43px;\n z-index: 2;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n text-align: center;\n pointer-events: none;\n opacity: 0;\n\n & div {\n display: inline-block;\n float: none;\n vertical-align: baseline;\n width: 9px;\n height: 9px;\n padding: 0;\n border: none;\n margin: 2px;\n opacity: 0.4;\n border-radius: 7px;\n background-color: rgba(255, 255, 255, 0.9);\n transition: background 0.2s;\n animation: swal-loading-anim 1s infinite;\n\n &:nth-child(3n+2) {\n animation-delay: 0.15s;\n }\n\n &:nth-child(3n+3) {\n animation-delay: 0.3s;\n }\n }\n}\n\n@keyframes swal-loading-anim {\n 0% { opacity: 0.4; }\n 20% { opacity: 0.4; }\n 50% { opacity: 1.0; }\n 100% { opacity: 0.4; }\n}\n\n" }, { "path": "src/css/buttons.css", "content": ":root {\n --swal-btn-confirm: #7cd1f9;\n --swal-btn-confirm-hover: color(var(--swal-btn-confirm) shade(3%));\n --swal-btn-confirm-active: color(var(--swal-btn-confirm) shade(10%));\n\n --swal-btn-cancel: #EFEFEF;\n --swal-btn-cancel-hover: color(var(--swal-btn-cancel) shade(3%));\n --swal-btn-cancel-active: color(var(--swal-btn-cancel) shade(10%));\n\n --swal-btn-danger: #e64942;\n --swal-btn-danger-hover: color(var(--swal-btn-danger) shade(3%));\n --swal-btn-danger-active: color(var(--swal-btn-danger) shade(10%));\n\n --swal-focus-color: rgba(43, 114, 165, 0.3);\n}\n\n.swal-footer {\n text-align: right;\n padding-top: 13px;\n margin-top: 13px;\n padding: 13px 16px;\n border-radius: inherit;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.swal-button-container {\n margin: 5px;\n display: inline-block;\n position: relative;\n}\n\n.swal-button {\n background-color: var(--swal-btn-confirm);\n color: white;\n border: none;\n box-shadow: none;\n border-radius: 5px;\n font-weight: 600;\n font-size: 14px;\n padding: 10px 24px;\n margin: 0;\n cursor: pointer;\n &:not([disabled]):hover {\n background-color: var(--swal-btn-confirm-hover);\n }\n &:active {\n background-color: var(--swal-btn-confirm-active);\n }\n &:focus {\n outline: none;\n box-shadow:\n 0px 0px 0px 1px white, \n 0px 0px 0px 3px rgba(43, 114, 165, 0.29);\n }\n &[disabled] {\n opacity: 0.5;\n cursor: default;\n }\n /* Remove ugly dotted lines in FireFox: */\n &::-moz-focus-inner {\n border: 0;\n }\n\n &--cancel {\n color: #555555;\n background-color: var(--swal-btn-cancel);\n &:not([disabled]):hover {\n background-color: var(--swal-btn-cancel-hover);\n }\n &:active {\n background-color: var(--swal-btn-cancel-active);\n }\n &:focus {\n box-shadow: \n 0px 0px 0px 1px white, \n 0px 0px 0px 3px rgba(116, 136, 150, 0.29);\n }\n }\n\n &--danger {\n background-color: var(--swal-btn-danger);\n &:not([disabled]):hover {\n background-color: var(--swal-btn-danger-hover);\n }\n &:active {\n background-color: var(--swal-btn-danger-active);\n }\n &:focus {\n box-shadow: \n 0px 0px 0px 1px white, \n 0px 0px 0px 3px rgba(165, 43, 43, 0.29);\n }\n }\n}\n\n\n\n" }, { "path": "src/css/content.css", "content": ".swal-content {\n padding: 0 20px;\n margin-top: 20px;\n font-size: initial;\n\n &:last-child {\n margin-bottom: 20px;\n }\n\n &__input,\n &__textarea {\n -webkit-appearance: none;\n background-color: white;\n border: none;\n font-size: 14px;\n display: block;\n box-sizing: border-box;\n width: 100%;\n border: 1px solid rgba(0, 0, 0, 0.14);\n padding: 10px 13px;\n border-radius: 2px;\n transition: border-color 0.2s;\n &:focus {\n outline: none;\n border-color: #6DB8FF;\n }\n }\n\n &__textarea {\n resize: vertical;\n }\n}\n\n" }, { "path": "src/css/icons/error.css", "content": ":root {\n --swal-red: #F27474;\n}\n\n.swal-icon--error {\n border-color: var(--swal-red);\n animation: animateErrorIcon 0.5s;\n\n &__x-mark {\n position: relative;\n display: block;\n animation: animateXMark 0.5s;\n }\n\n &__line {\n position: absolute;\n height: 5px;\n width: 47px;\n background-color: var(--swal-red);\n display: block;\n top: 37px;\n border-radius: 2px;\n\n &--left {\n transform: rotate(45deg);\n left: 17px;\n }\n\n &--right {\n transform: rotate(-45deg);\n transform: rotate(-45deg);\n right: 16px;\n }\n }\n}\n\n@keyframes animateErrorIcon {\n from {\n transform: rotateX(100deg);\n opacity: 0;\n }\n to {\n transform: rotateX(0deg);\n opacity: 1;\n }\n}\n\n@keyframes animateXMark {\n 0% {\n transform: scale(0.4);\n margin-top: 26px;\n opacity: 0;\n }\n 50% {\n transform: scale(0.4);\n margin-top: 26px;\n opacity: 0;\n }\n 80% {\n transform: scale(1.15);\n margin-top: -6px;\n }\n 100% {\n transform: scale(1);\n margin-top: 0;\n opacity: 1;\n }\n}\n\n" }, { "path": "src/css/icons/info.css", "content": ":root {\n --swal-blue: #C9DAE1;\n}\n\n.swal-icon--info {\n border-color: var(--swal-blue);\n\n /* \"i\"-letter body */\n &::before {\n content: \"\";\n position: absolute;\n width: 5px;\n height: 29px;\n left: 50%;\n bottom: 17px;\n border-radius: 2px;\n margin-left: -2px;\n background-color: var(--swal-blue);\n }\n /* \"i\"-letter dot */\n &::after {\n content: \"\";\n position: absolute;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n margin-left: -3px;\n top: 19px;\n background-color: var(--swal-blue);\n left: 50%;\n }\n}\n\n" }, { "path": "src/css/icons/success.css", "content": ":root {\n --swal-green: #A5DC86;\n --swal-green-light: rgba(165, 220, 134, 0.2);\n}\n\n.swal-icon--success {\n border-color: var(--swal-green);\n\n /* Moving circular line */\n &::before,\n &::after {\n content: '';\n border-radius: 50%;\n position: absolute;\n width: 60px;\n height: 120px;\n background: white;\n transform: rotate(45deg);\n }\n\n &::before {\n border-radius: 120px 0 0 120px;\n top: -7px;\n left: -33px;\n transform: rotate(-45deg);\n transform-origin: 60px 60px;\n }\n\n &::after {\n border-radius: 0 120px 120px 0;\n top: -11px;\n left: 30px;\n transform: rotate(-45deg);\n transform-origin: 0px 60px;\n animation: rotatePlaceholder 4.25s ease-in;\n }\n\n /* Ring */\n &__ring {\n width: 80px;\n height: 80px;\n border: 4px solid var(--swal-green-light);\n border-radius: 50%;\n box-sizing: content-box;\n position: absolute;\n left: -4px;\n top: -4px;\n z-index: 2;\n }\n\n /* Hide corners left from animation */\n &__hide-corners {\n width: 5px;\n height: 90px;\n background-color: white;\n padding: 1px;\n position: absolute;\n left: 28px;\n top: 8px;\n z-index: 1;\n transform: rotate(-45deg);\n }\n\n &__line {\n height: 5px;\n background-color: var(--swal-green);\n display: block;\n border-radius: 2px;\n position: absolute;\n z-index: 2;\n\n &--tip {\n width: 25px;\n left: 14px;\n top: 46px;\n transform: rotate(45deg);\n animation: animateSuccessTip 0.75s;\n }\n &--long {\n width: 47px;\n right: 8px;\n top: 38px;\n transform: rotate(-45deg);\n animation: animateSuccessLong 0.75s;\n }\n }\n}\n\n@keyframes rotatePlaceholder {\n 0% {\n transform: rotate(-45deg);\n }\n 5% {\n transform: rotate(-45deg);\n }\n 12% {\n transform: rotate(-405deg);\n }\n 100% {\n transform: rotate(-405deg);\n }\n}\n\n@keyframes animateSuccessTip {\n 0% {\n width: 0;\n left: 1px;\n top: 19px;\n }\n 54% {\n width: 0;\n left: 1px;\n top: 19px;\n }\n 70% {\n width: 50px;\n left: -8px;\n top: 37px;\n }\n 84% {\n width: 17px;\n left: 21px;\n top: 48px;\n }\n 100% {\n width: 25px;\n left: 14px;\n top: 45px;\n }\n}\n\n@keyframes animateSuccessLong {\n 0% {\n width: 0;\n right: 46px;\n top: 54px;\n }\n 65% {\n width: 0;\n right: 46px;\n top: 54px;\n }\n 84% {\n width: 55px;\n right: 0px;\n top: 35px;\n }\n 100% {\n width: 47px;\n right: 8px;\n top: 38px;\n }\n}\n\n" }, { "path": "src/css/icons/warning.css", "content": ":root {\n --swal-orange: #F8BB86;\n}\n\n.swal-icon--warning {\n border-color: var(--swal-orange);\n animation: pulseWarning 0.75s infinite alternate;\n\n /* Exclamation mark */\n &__body {\n position: absolute;\n width: 5px;\n height: 47px;\n left: 50%;\n top: 10px;\n border-radius: 2px;\n margin-left: -2px;\n background-color: var(--swal-orange);\n }\n\n &__dot {\n position: absolute;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n margin-left: -4px;\n left: 50%;\n bottom: -11px;\n background-color: var(--swal-orange);\n }\n}\n\n@keyframes pulseWarning {\n from {\n border-color: #F8D486;\n }\n to {\n border-color: var(--swal-orange);\n }\n}\n\n" }, { "path": "src/css/icons.css", "content": "@import './icons/error';\n@import './icons/warning';\n@import './icons/success';\n@import './icons/info';\n\n.swal-icon {\n width: 80px;\n height: 80px;\n border-width: 4px;\n border-style: solid;\n border-radius: 50%;\n padding: 0;\n position: relative;\n box-sizing: content-box;\n margin: 20px auto;\n &:first-child {\n margin-top: 32px;\n }\n\n &--custom {\n width: auto;\n height: auto;\n max-width: 100%;\n border: none;\n border-radius: 0;\n }\n\n & img {\n max-width: 100%;\n max-height: 100%;\n }\n}\n\n\n" }, { "path": "src/css/text.css", "content": ".swal-title {\n color: rgba(0, 0, 0, 0.65);\n font-weight: 600;\n text-transform: none;\n position: relative;\n display: block;\n padding: 13px 16px;\n font-size: 27px;\n line-height: normal;\n text-align: center;\n margin-bottom: 0px;\n &:first-child {\n margin-top: 26px;\n }\n &:not(:first-child) {\n padding-bottom: 0;\n }\n &:not(:last-child) {\n margin-bottom: 13px;\n }\n}\n\n.swal-text {\n font-size: 16px;\n position: relative;\n float: none;\n line-height: normal;\n vertical-align: top;\n text-align: left;\n display: inline-block;\n margin: 0;\n padding: 0 10px;\n font-weight: 400;\n color: rgba(0, 0, 0, 0.64);\n max-width: calc(100% - 20px);\n overflow-wrap: break-word;\n box-sizing: border-box;\n &:first-child {\n margin-top: 45px;\n }\n &:last-child {\n margin-bottom: 45px;\n }\n}\n" }, { "path": "src/modules/actions.ts", "content": "import { getNode } from './utils';\nimport { CANCEL_KEY } from './options/buttons';\n\nimport CLASS_NAMES from './class-list';\n\nconst {\n OVERLAY,\n SHOW_MODAL,\n BUTTON,\n BUTTON_LOADING,\n} = CLASS_NAMES;\n\nimport state, { SwalState } from './state';\n\nexport const openModal = (): void => {\n let overlay = getNode(OVERLAY);\n overlay.classList.add(SHOW_MODAL); \n\n state.isOpen = true;\n};\n\nconst hideModal = (): void => {\n let overlay = getNode(OVERLAY);\n overlay.classList.remove(SHOW_MODAL); \n\n state.isOpen = false;\n};\n\n/*\n * Triggers when the user presses any button, or\n * hits Enter inside the input:\n */\nexport const onAction = (namespace: string = CANCEL_KEY): void => {\n const { value, closeModal } = state.actions[namespace];\n\n if (closeModal === false) {\n const buttonClass = `${BUTTON}--${namespace}`;\n const button = getNode(buttonClass);\n button.classList.add(BUTTON_LOADING);\n } else {\n hideModal();\n }\n\n state.promise.resolve(value);\n};\n\n/*\n * Filter the state object. Remove the stuff\n * that's only for internal use\n */\nexport const getState = (): SwalState => {\n const publicState = Object.assign({}, state);\n delete publicState.promise;\n delete publicState.timer;\n\n return publicState;\n};\n\n/*\n * Stop showing loading animation on button\n * (to display error message in input for example)\n */\nexport const stopLoading = (): void => {\n const buttons: NodeListOf = document.querySelectorAll(`.${BUTTON}`);\n\n for (let i = 0; i < buttons.length; i++) {\n const button: Element = buttons[i];\n button.classList.remove(BUTTON_LOADING);\n }\n};\n\n\n" }, { "path": "src/modules/class-list/index.ts", "content": "/*\n * List of class names that we\n * use throughout the library to\n * manipulate the DOM.\n */\n\nexport interface ClassNameList {\n [key: string]: string,\n};\n\nconst OVERLAY: string = 'swal-overlay';\nconst BUTTON: string = 'swal-button';\nconst ICON: string = 'swal-icon';\n\nexport const CLASS_NAMES: ClassNameList = {\n MODAL: 'swal-modal',\n OVERLAY,\n SHOW_MODAL: `${OVERLAY}--show-modal`,\n\n MODAL_TITLE: `swal-title`,\n MODAL_TEXT: `swal-text`,\n ICON,\n ICON_CUSTOM: `${ICON}--custom`,\n\n CONTENT: 'swal-content',\n\n FOOTER: 'swal-footer',\n BUTTON_CONTAINER: 'swal-button-container',\n BUTTON,\n CONFIRM_BUTTON: `${BUTTON}--confirm`,\n CANCEL_BUTTON: `${BUTTON}--cancel`,\n DANGER_BUTTON: `${BUTTON}--danger`,\n BUTTON_LOADING: `${BUTTON}--loading`,\n BUTTON_LOADER: `${BUTTON}__loader`,\n};\n\nexport default CLASS_NAMES;\n\n" }, { "path": "src/modules/event-listeners.ts", "content": "import state from './state';\nimport { onAction } from './actions';\nimport { getNode } from './utils';\nimport { SwalOptions } from './options';\nimport { CANCEL_KEY } from './options/buttons';\n\nimport CLASS_NAMES from './class-list';\nconst { MODAL, BUTTON, OVERLAY } = CLASS_NAMES;\n\nconst onTabAwayLastButton = (e: KeyboardEvent): void => {\n e.preventDefault();\n setFirstButtonFocus();\n};\n\nconst onTabBackFirstButton = (e: KeyboardEvent): void => {\n e.preventDefault();\n setLastButtonFocus();\n};\n\nconst onKeyUp = (e: KeyboardEvent):void => {\n if (!state.isOpen) return;\n\n switch (e.key) {\n case \"Escape\": return onAction(CANCEL_KEY);\n }\n};\n\nconst onKeyDownLastButton = (e: KeyboardEvent): void => {\n if (!state.isOpen) return;\n\n switch (e.key) {\n case \"Tab\": return onTabAwayLastButton(e);\n }\n};\n\nconst onKeyDownFirstButton = (e: KeyboardEvent): void => {\n if (!state.isOpen) return;\n\n if (e.key === \"Tab\" && e.shiftKey) {\n return onTabBackFirstButton(e);\n }\n};\n\n\n/*\n * Set default focus on Confirm-button\n */\nconst setFirstButtonFocus = (): void => {\n const button:HTMLElement = getNode(BUTTON);\n\n if (button) {\n button.tabIndex = 0;\n button.focus();\n }\n};\n\nconst setLastButtonFocus = (): void => {\n const modal: HTMLElement = getNode(MODAL);\n\n const buttons: NodeListOf = modal.querySelectorAll(`.${BUTTON}`);\n\n const lastIndex: number = buttons.length - 1;\n const lastButton: any = buttons[lastIndex];\n\n if (lastButton) {\n lastButton.focus();\n }\n};\n\nconst setTabbingForLastButton = (buttons: NodeListOf): void => {\n const lastIndex: number = buttons.length - 1;\n const lastButton: Element = buttons[lastIndex];\n\n lastButton.addEventListener('keydown', onKeyDownLastButton);\n};\n\nconst setTabbingForFirstButton = (buttons: NodeListOf): void => {\n const firstButton: Element = buttons[0];\n\n firstButton.addEventListener('keydown', onKeyDownFirstButton);\n};\n\nconst setButtonTabbing = (): void => {\n const modal: HTMLElement = getNode(MODAL);\n\n const buttons: NodeListOf = modal.querySelectorAll(`.${BUTTON}`);\n\n if (!buttons.length) return;\n\n setTabbingForLastButton(buttons);\n setTabbingForFirstButton(buttons);\n};\n\nconst onOutsideClick = (e: MouseEvent): void => {\n const overlay: HTMLElement = getNode(OVERLAY);\n\n // Don't trigger for children:\n if (overlay !== e.target) return;\n\n return onAction(CANCEL_KEY);\n};\n\nconst setClickOutside = (allow: boolean): void => {\n const overlay: HTMLElement = getNode(OVERLAY);\n\n overlay.removeEventListener('click', onOutsideClick);\n\n if (allow) {\n overlay.addEventListener('click', onOutsideClick);\n }\n};\n\nconst setTimer = (ms: number): void => {\n if (state.timer) {\n clearTimeout(state.timer);\n }\n\n if (ms) {\n state.timer = window.setTimeout(() => {\n return onAction(CANCEL_KEY);\n }, ms);\n }\n};\n\nconst addEventListeners = (opts: SwalOptions):void => {\n if (opts.closeOnEsc) {\n document.addEventListener('keyup', onKeyUp);\n } else {\n document.removeEventListener('keyup', onKeyUp);\n }\n\n /* So that you don't accidentally confirm something\n * dangerous by clicking enter\n */\n if (opts.dangerMode) {\n setFirstButtonFocus();\n } else {\n setLastButtonFocus();\n }\n\n setButtonTabbing();\n setClickOutside(opts.closeOnClickOutside);\n setTimer(opts.timer);\n};\n\nexport default addEventListeners;\n" }, { "path": "src/modules/init/buttons.ts", "content": "import { stringToNode } from '../utils';\nimport { injectElIntoModal } from './modal';\n\nimport CLASS_NAMES from '../class-list';\nconst { BUTTON, DANGER_BUTTON } = CLASS_NAMES;\n\nimport { ButtonList, ButtonOptions, CONFIRM_KEY } from '../options/buttons';\nimport { footerMarkup, buttonMarkup } from '../markup';\n\nimport { onAction } from '../actions';\nimport {\n setActionValue,\n setActionOptionsFor,\n ActionOptions,\n} from '../state';\n\n/*\n * Generate a button, with a container element,\n * the right class names, the text, and an event listener.\n * IMPORTANT: This will also add the button's action, which can be triggered even if the button element itself isn't added to the modal.\n */\nconst getButton = (namespace: string, {\n text,\n value,\n className,\n closeModal,\n}: ButtonOptions, dangerMode: boolean): Node => {\n const buttonContainer: any = stringToNode(buttonMarkup);\n\n const buttonEl: HTMLElement = buttonContainer.querySelector(`.${BUTTON}`);\n\n const btnNamespaceClass = `${BUTTON}--${namespace}`;\n buttonEl.classList.add(btnNamespaceClass);\n\n if (className) {\n const classNameArray = Array.isArray(className)\n ? className\n : className.split(' ');\n classNameArray\n .filter(name => name.length > 0)\n .forEach(name => {\n buttonEl.classList.add(name);\n });\n }\n\n if (dangerMode && namespace === CONFIRM_KEY) {\n buttonEl.classList.add(DANGER_BUTTON);\n }\n\n buttonEl.textContent = text;\n\n let actionValues: ActionOptions = {};\n actionValues[namespace] = value;\n setActionValue(actionValues);\n\n setActionOptionsFor(namespace, {\n closeModal,\n });\n\n buttonEl.addEventListener('click', () => {\n return onAction(namespace);\n });\n\n return buttonContainer;\n};\n\n/*\n * Create the buttons-container,\n * then loop through the ButtonList object\n * and append every button to it.\n */\nconst initButtons = (buttons: ButtonList, dangerMode: boolean): void => {\n\n const footerEl: Element = injectElIntoModal(footerMarkup);\n\n for (let key in buttons) {\n const buttonOpts: ButtonOptions = buttons[key] as ButtonOptions;\n const buttonEl: Node = getButton(key, buttonOpts, dangerMode);\n\n if (buttonOpts.visible) {\n footerEl.appendChild(buttonEl);\n }\n }\n\n /*\n * If the footer has no buttons, there's no\n * point in keeping it:\n */\n if (footerEl.children.length === 0) {\n footerEl.remove();\n }\n};\n\nexport default initButtons;\n" }, { "path": "src/modules/init/content.ts", "content": "import { ContentOptions } from '../options/content';\nimport { CONFIRM_KEY } from '../options/buttons';\nimport { injectElIntoModal } from './modal';\nimport { contentMarkup } from '../markup';\nimport { setActionValue } from '../state';\nimport { onAction } from '../actions';\n\nimport CLASS_NAMES from '../class-list';\nconst { CONTENT } = CLASS_NAMES;\n\n/*\n * Add an to the content container.\n * Update the \"promised\" value of the confirm button whenever\n * the user types into the input (+ make it \"\" by default)\n * Set the default focus on the input.\n */\nconst addInputEvents = (input: HTMLElement): void => {\n\n input.addEventListener('input', (e) => {\n const target = e.target as HTMLInputElement;\n const text = target.value;\n setActionValue(text);\n });\n\n input.addEventListener('keyup', (e) => {\n if (e.key === \"Enter\") {\n return onAction(CONFIRM_KEY);\n }\n });\n\n /*\n * FIXME (this is a bit hacky)\n * We're overwriting the default value of confirm button,\n * as well as overwriting the default focus on the button\n */\n setTimeout(() => {\n input.focus();\n setActionValue('');\n }, 0);\n\n};\n\nconst initPredefinedContent = (content: Node, elName: string, attrs: any): void => {\n const el: HTMLElement = document.createElement(elName);\n\n const elClass = `${CONTENT}__${elName}`;\n el.classList.add(elClass);\n\n // Set things like \"placeholder\":\n for (let key in attrs) {\n let value: string = attrs[key];\n\n (el)[key] = value;\n }\n\n if (elName === \"input\") {\n addInputEvents(el);\n }\n\n content.appendChild(el);\n};\n\nconst initContent = (opts: ContentOptions): void => {\n if (!opts) return;\n\n const content: Node = injectElIntoModal(contentMarkup);\n\n const { element, attributes } = opts;\n\n if (typeof element === \"string\") {\n initPredefinedContent(content, element, attributes);\n } else {\n content.appendChild(element);\n }\n};\n\nexport default initContent;\n\n" }, { "path": "src/modules/init/icon.ts", "content": "//import { stringToNode } from '../utils';\nimport { injectElIntoModal } from './modal';\n\nimport {\n iconMarkup,\n errorIconMarkup,\n warningIconMarkup,\n successIconMarkup,\n} from '../markup';\n\nimport CLASS_NAMES from '../class-list';\nconst { ICON, ICON_CUSTOM } = CLASS_NAMES;\n\nconst PREDEFINED_ICONS: string[] = [\"error\", \"warning\", \"success\", \"info\"];\n\nconst ICON_CONTENTS: any = {\n error: errorIconMarkup(),\n warning: warningIconMarkup(),\n success: successIconMarkup(),\n}\n\n/*\n * Set the warning, error, success or info icons:\n */\nconst initPredefinedIcon = (type: string, iconEl: Element): void => {\n const iconTypeClass: string = `${ICON}--${type}`;\n iconEl.classList.add(iconTypeClass);\n\n const iconContent: string = ICON_CONTENTS[type];\n\n if (iconContent) {\n iconEl.innerHTML = iconContent;\n }\n};\n\nconst initImageURL = (url: string, iconEl: Element): void => {\n iconEl.classList.add(ICON_CUSTOM);\n\n let img = document.createElement('img');\n img.src = url;\n\n iconEl.appendChild(img);\n};\n\nconst initIcon = (str: string): void => {\n if (!str) return;\n\n let iconEl: Element = injectElIntoModal(iconMarkup);\n\n if (PREDEFINED_ICONS.includes(str)) {\n initPredefinedIcon(str, iconEl);\n } else {\n initImageURL(str, iconEl);\n }\n\n};\n\nexport default initIcon;\n\n" }, { "path": "src/modules/init/index.ts", "content": "import { getNode } from '../utils';\nimport { SwalOptions } from '../options';\n\nimport CLASS_NAMES from '../class-list';\nconst { MODAL } = CLASS_NAMES;\n\nimport initModalOnce, {\n initModalContent,\n} from './modal';\n\nimport initOverlayOnce from './overlay';\nimport addEventListeners from '../event-listeners';\nimport { throwErr } from '../utils';\n\n/*\n * Inject modal and overlay into the DOM\n * Then format the modal according to the given opts\n */\nexport const init = (opts: SwalOptions): void => {\n const modal: Element = getNode(MODAL);\n\n if (!modal) {\n if (!document.body) {\n throwErr(\"You can only use SweetAlert AFTER the DOM has loaded!\");\n }\n\n initOverlayOnce();\n initModalOnce();\n }\n\n initModalContent(opts);\n addEventListeners(opts);\n};\n\nexport default init;\n\n" }, { "path": "src/modules/init/modal.ts", "content": "import { ButtonList } from './../options/buttons';\nimport { stringToNode, getNode } from '../utils';\nimport { modalMarkup } from '../markup';\nimport { SwalOptions } from '../options';\n\nimport CLASS_NAMES from '../class-list';\nconst { MODAL, OVERLAY } = CLASS_NAMES;\n\nimport initIcon from './icon';\nimport { initTitle, initText } from './text';\nimport initButtons from './buttons';\nimport initContent from './content';\n\nexport const injectElIntoModal = (markup: string): HTMLElement => {\n const modal: Element = getNode(MODAL);\n const el: HTMLElement = stringToNode(markup);\n\n modal.appendChild(el);\n\n return el;\n};\n\n/*\n * Remove eventual added classes +\n * reset all content inside:\n */\nconst resetModalElement = (modal: Element): void => {\n modal.className = MODAL;\n modal.textContent = '';\n};\n\n/*\n * Add custom class to modal element\n */\nconst customizeModalElement = (modal: Element, opts: SwalOptions): void => {\n resetModalElement(modal);\n\n const { className } = opts;\n\n if (className) {\n modal.classList.add(className);\n }\n};\n\n/*\n * It's important to run the following functions in this particular order,\n * so that the elements get appended one after the other.\n */\nexport const initModalContent = (opts: SwalOptions): void => {\n // Start from scratch:\n const modal: Element = getNode(MODAL);\n customizeModalElement(modal, opts);\n\n initIcon(opts.icon);\n initTitle(opts.title);\n initText(opts.text);\n initContent(opts.content);\n initButtons(opts.buttons as ButtonList, opts.dangerMode);\n};\n\nconst initModalOnce = (): void => {\n const overlay: Element = getNode(OVERLAY);\n const modal = stringToNode(modalMarkup);\n\n overlay.appendChild(modal);\n};\n\nexport default initModalOnce;\n" }, { "path": "src/modules/init/overlay.ts", "content": "import { stringToNode } from '../utils';\nimport { overlayMarkup } from '../markup';\n\nconst initOverlayOnce = (): void => {\n const overlay = stringToNode(overlayMarkup);\n\n document.body.appendChild(overlay);\n};\n\nexport default initOverlayOnce;\n" }, { "path": "src/modules/init/text.ts", "content": "import {\n titleMarkup,\n textMarkup,\n} from '../markup';\n\nimport { injectElIntoModal } from './modal';\n\n/*\n * Fixes a weird bug that doesn't wrap long text in modal\n * This is visible in the Safari browser for example.\n * https://stackoverflow.com/a/3485654/2679245\n */\nconst webkitRerender = (el: HTMLElement) => {\n if (navigator.userAgent.includes('AppleWebKit')) {\n el.style.display = 'none';\n el.offsetHeight;\n el.style.display = '';\n }\n}\n\nexport const initTitle = (title: string): void => {\n if (title) {\n const titleEl: HTMLElement = injectElIntoModal(titleMarkup);\n titleEl.textContent = title;\n\n webkitRerender(titleEl);\n }\n};\n\nexport const initText = (text: string): void => {\n if (text) {\n let textNode = document.createDocumentFragment();\n text.split('\\n').forEach((textFragment, index, array) => {\n textNode.appendChild(document.createTextNode(textFragment));\n\n // unless we are on the last element, append a
\n if (index < array.length - 1) {\n textNode.appendChild(document.createElement('br'));\n }\n });\n const textEl: HTMLElement = injectElIntoModal(textMarkup);\n textEl.appendChild(textNode);\n\n webkitRerender(textEl);\n }\n};\n\n" }, { "path": "src/modules/markup/buttons.ts", "content": "import CLASS_NAMES from '../class-list';\n\nconst {\n BUTTON_CONTAINER,\n BUTTON,\n BUTTON_LOADER,\n} = CLASS_NAMES;\n\nexport const buttonMarkup: string = `\n
\n\n \n\n
\n
\n
\n
\n
\n\n
\n`;\n\n" }, { "path": "src/modules/markup/content.ts", "content": "import CLASS_NAMES from '../class-list';\n\nconst { CONTENT } = CLASS_NAMES;\n\nexport const contentMarkup: string = `\n
\n\n
\n`;\n\n" }, { "path": "src/modules/markup/icons.ts", "content": "import CLASS_NAMES from '../class-list';\n\nconst { ICON } = CLASS_NAMES;\n\nexport const errorIconMarkup = (): string => {\n const icon = `${ICON}--error`;\n const line = `${icon}__line`;\n\n const markup = `\n
\n \n \n
\n `;\n\n return markup;\n}\n\nexport const warningIconMarkup = (): string => {\n const icon = `${ICON}--warning`;\n\n return `\n \n \n \n `;\n};\n\nexport const successIconMarkup = (): string => {\n const icon = `${ICON}--success`;\n\n return `\n \n \n\n
\n
\n `;\n};\n" }, { "path": "src/modules/markup/index.ts", "content": "export * from './modal';\n\nexport {\n default as overlayMarkup\n} from './overlay';\n\nexport * from './icons';\n\nexport * from './content';\n\nexport * from './buttons';\n\nimport CLASS_NAMES from '../class-list';\n\nconst {\n MODAL_TITLE,\n MODAL_TEXT,\n ICON,\n FOOTER,\n} = CLASS_NAMES;\n\nexport const iconMarkup: string = `\n
`\n;\n\nexport const titleMarkup: string = `\n
\n`;\n\nexport const textMarkup: string = `\n
`\n;\n\nexport const footerMarkup: string = `\n
\n`;\n\n\n" }, { "path": "src/modules/markup/modal.ts", "content": "import CLASS_NAMES from '../class-list';\n\nconst {\n MODAL,\n} = CLASS_NAMES;\n\nexport const modalMarkup: string =`\n
` +\n \n // Icon\n\n // Title\n\n // Text\n \n // Content\n \n // Buttons\n\n `
`\n;\n\nexport default modalMarkup;\n\n" }, { "path": "src/modules/markup/overlay.ts", "content": "import CLASS_NAMES from '../class-list';\n\nconst {\n OVERLAY,\n} = CLASS_NAMES;\n\nconst overlay: string =\n `
\n
`\n;\n\nexport default overlay;\n" }, { "path": "src/modules/options/buttons.ts", "content": "import { isPlainObject, throwErr } from '../utils';\n\nexport interface ButtonOptions {\n visible?: boolean,\n text?: string,\n value?: any,\n className?: string | Array,\n closeModal?: boolean,\n};\n\nexport interface ButtonList {\n [buttonNamespace: string]: ButtonOptions | boolean,\n};\n\nexport const CONFIRM_KEY = 'confirm';\nexport const CANCEL_KEY = 'cancel';\n\nconst defaultButton: ButtonOptions = {\n visible: true,\n text: null,\n value: null,\n className: '',\n closeModal: true,\n};\n\nconst defaultCancelButton: ButtonOptions = Object.assign({},\n defaultButton, {\n visible: false,\n text: \"Cancel\",\n value: null,\n }\n);\n\nconst defaultConfirmButton: ButtonOptions = Object.assign({},\n defaultButton, {\n text: \"OK\",\n value: true,\n }\n);\n\nexport const defaultButtonList: ButtonList = {\n cancel: defaultCancelButton,\n confirm: defaultConfirmButton,\n};\n\nconst getDefaultButton = (key: string): ButtonOptions => {\n switch (key) {\n case CONFIRM_KEY:\n return defaultConfirmButton;\n\n case CANCEL_KEY:\n return defaultCancelButton;\n\n default:\n // Capitalize:\n const text = key.charAt(0).toUpperCase() + key.slice(1);\n\n return Object.assign({}, defaultButton, {\n text,\n value: key,\n });\n }\n};\n\nconst normalizeButton = (key: string, param: string | object | boolean): ButtonOptions => {\n const button: ButtonOptions = getDefaultButton(key);\n\n /*\n * Use the default button + make it visible\n */\n if (param === true) {\n return Object.assign({}, button, {\n visible: true,\n });\n }\n\n /* Set the text of the button: */\n if (typeof param === \"string\") {\n return Object.assign({}, button, {\n visible: true,\n text: param,\n });\n }\n\n /* A specified button should always be visible,\n * unless \"visible\" is explicitly set to \"false\"\n */\n if (isPlainObject(param)) {\n return Object.assign({\n visible: true,\n }, button, param);\n }\n\n return Object.assign({}, button, {\n visible: false,\n });\n};\n\nconst normalizeButtonListObj = (obj: any): ButtonList => {\n let buttons: ButtonList = {};\n\n for (let key of Object.keys(obj)) {\n const opts: any = obj[key];\n const button: ButtonOptions = normalizeButton(key, opts);\n buttons[key] = button;\n }\n\n /*\n * We always need a cancel action,\n * even if the button isn't visible\n */\n if (!buttons.cancel) {\n buttons.cancel = defaultCancelButton;\n }\n\n return buttons;\n};\n\nconst normalizeButtonArray = (arr: any[]): ButtonList => {\n let buttonListObj: ButtonList = {};\n\n switch (arr.length) {\n /* input: [\"Accept\"]\n * result: only set the confirm button text to \"Accept\"\n */\n case 1:\n buttonListObj[CANCEL_KEY] = Object.assign({}, defaultCancelButton, {\n visible: false,\n });\n\n break;\n\n /* input: [\"No\", \"Ok!\"]\n * result: Set cancel button to \"No\", and confirm to \"Ok!\"\n */\n case 2:\n buttonListObj[CANCEL_KEY] = normalizeButton(CANCEL_KEY, arr[0]);\n buttonListObj[CONFIRM_KEY] = normalizeButton(CONFIRM_KEY, arr[1]);\n\n break;\n\n default:\n throwErr(`Invalid number of 'buttons' in array (${arr.length}).\n If you want more than 2 buttons, you need to use an object!`);\n }\n\n return buttonListObj;\n};\n\nexport const getButtonListOpts = (opts: string | object | boolean): ButtonList => {\n let buttonListObj: ButtonList = defaultButtonList;\n\n if (typeof opts === \"string\") {\n buttonListObj[CONFIRM_KEY] = normalizeButton(CONFIRM_KEY, opts);\n } else if (Array.isArray(opts)) {\n buttonListObj = normalizeButtonArray(opts);\n } else if (isPlainObject(opts)) {\n buttonListObj = normalizeButtonListObj(opts);\n } else if (opts === true) {\n buttonListObj = normalizeButtonArray([true, true]);\n } else if (opts === false) {\n buttonListObj = normalizeButtonArray([false, false]);\n } else if (opts === undefined) {\n buttonListObj = defaultButtonList;\n }\n\n return buttonListObj;\n};\n" }, { "path": "src/modules/options/content.ts", "content": "import {\n isPlainObject,\n} from '../utils';\n\nexport interface ContentOptions {\n element: string|Node,\n attributes?: object,\n};\n\nconst defaultInputOptions: ContentOptions = {\n element: 'input',\n attributes: {\n placeholder: \"\",\n },\n};\n\nexport const getContentOpts = (contentParam: string|object): ContentOptions => {\n let opts = {};\n\n if (isPlainObject(contentParam)) {\n return Object.assign(opts, contentParam);\n }\n\n if (contentParam instanceof Element) {\n return {\n element: contentParam,\n };\n }\n\n if (contentParam === 'input') {\n return defaultInputOptions;\n }\n\n return null;\n};\n" }, { "path": "src/modules/options/deprecations.ts", "content": "/*\n * A list of all the deprecated options from SweetAlert 1.X\n * These should log a warning telling users how to upgrade.\n */\n\nexport const logDeprecation = (name: string): void => {\n const details: OptionReplacement = DEPRECATED_OPTS[name];\n const { onlyRename, replacement, subOption, link } = details;\n\n const destiny = (onlyRename) ? 'renamed' : 'deprecated';\n\n let message = `SweetAlert warning: \"${name}\" option has been ${destiny}.`;\n\n if (replacement) {\n const subOptionText = (subOption) ? ` \"${subOption}\" in ` : ' ';\n message += ` Please use${subOptionText}\"${replacement}\" instead.`;\n }\n\n const DOMAIN = 'https://sweetalert.js.org';\n\n if (link) {\n message += ` More details: ${DOMAIN}${link}`;\n } else {\n message += ` More details: ${DOMAIN}/guides/#upgrading-from-1x`;\n }\n\n console.warn(message);\n};\n\nexport interface OptionReplacement {\n replacement?: string,\n onlyRename?: boolean,\n subOption?: string,\n link?: string,\n};\n\nexport interface OptionReplacementsList {\n [name: string]: OptionReplacement,\n};\n\nexport const DEPRECATED_OPTS: OptionReplacementsList = {\n 'type': {\n replacement: 'icon',\n link: '/docs/#icon',\n },\n 'imageUrl': {\n replacement: 'icon',\n link: '/docs/#icon',\n },\n 'customClass': {\n replacement: 'className',\n onlyRename: true,\n link: '/docs/#classname',\n },\n 'imageSize': {},\n 'showCancelButton': {\n replacement: 'buttons',\n link: '/docs/#buttons',\n },\n 'showConfirmButton': {\n replacement: 'button',\n link: '/docs/#button',\n },\n 'confirmButtonText': {\n replacement: 'button',\n link: '/docs/#button',\n },\n 'confirmButtonColor': {},\n 'cancelButtonText': {\n replacement: 'buttons',\n link: '/docs/#buttons',\n },\n 'closeOnConfirm': {\n replacement: 'button',\n subOption: 'closeModal',\n link: '/docs/#button',\n },\n 'closeOnCancel': {\n replacement: 'buttons',\n subOption: 'closeModal',\n link: '/docs/#buttons',\n },\n 'showLoaderOnConfirm': {\n replacement: 'buttons',\n },\n 'animation': {},\n 'inputType': {\n replacement: 'content',\n link: '/docs/#content',\n },\n 'inputValue': {\n replacement: 'content',\n link: '/docs/#content',\n },\n 'inputPlaceholder': {\n replacement: 'content',\n link: '/docs/#content',\n },\n 'html': {\n replacement: 'content',\n link: '/docs/#content',\n },\n 'allowEscapeKey': {\n replacement: 'closeOnEsc',\n onlyRename: true,\n link: '/docs/#closeonesc',\n },\n 'allowClickOutside': {\n replacement: 'closeOnClickOutside',\n onlyRename: true,\n link: '/docs/#closeonclickoutside',\n },\n};\n" }, { "path": "src/modules/options/index.ts", "content": "import { SwalParams } from '../../core';\n\nimport {\n throwErr,\n isPlainObject,\n ordinalSuffixOf,\n} from '../utils';\n\nimport {\n ButtonList,\n getButtonListOpts,\n defaultButtonList\n} from './buttons';\n\nimport {\n getContentOpts,\n ContentOptions,\n} from './content';\n\nimport {\n DEPRECATED_OPTS,\n logDeprecation,\n} from './deprecations';\n\n\n/*\n * The final object that we transform the given params into\n */\nexport interface SwalOptions {\n title: string,\n text: string,\n icon: string,\n buttons: ButtonList | Array,\n content: ContentOptions,\n className: string,\n closeOnClickOutside: boolean,\n closeOnEsc: boolean,\n dangerMode: boolean,\n timer: number,\n};\n\nconst defaultOpts: SwalOptions = {\n title: null,\n text: null,\n icon: null,\n buttons: defaultButtonList,\n content: null,\n className: null,\n closeOnClickOutside: true,\n closeOnEsc: true,\n dangerMode: false,\n timer: null,\n};\n\n/*\n * Default options customizeable through \"setDefaults\":\n */\nlet userDefaults: SwalOptions = Object.assign({}, defaultOpts);\n\nexport const setDefaults = (opts: object): void => {\n userDefaults = Object.assign({}, defaultOpts, opts);\n};\n\n\n/*\n * Since the user can set both \"button\" and \"buttons\",\n * we need to make sure we pick one of the options\n */\nconst pickButtonParam = (opts: any): object => {\n const singleButton: string|object = opts && opts.button;\n const buttonList: object = opts && opts.buttons;\n\n if (singleButton !== undefined && buttonList !== undefined) {\n throwErr(`Cannot set both 'button' and 'buttons' options!`);\n }\n\n if (singleButton !== undefined) {\n return {\n confirm: singleButton,\n };\n } else {\n return buttonList;\n }\n};\n\n// Example 0 -> 1st\nconst indexToOrdinal = (index: number): string => ordinalSuffixOf(index + 1);\n\nconst invalidParam = (param: any, index: number): void => {\n throwErr(`${indexToOrdinal(index)} argument ('${param}') is invalid`);\n};\n\nconst expectOptionsOrNothingAfter = (index: number, allParams: SwalParams): void => {\n let nextIndex = (index + 1);\n let nextParam = allParams[nextIndex];\n\n if (!isPlainObject(nextParam) && nextParam !== undefined) {\n throwErr(`Expected ${indexToOrdinal(nextIndex)} argument ('${nextParam}') to be a plain object`);\n }\n};\n\nconst expectNothingAfter = (index: number, allParams: SwalParams): void => {\n let nextIndex = (index + 1);\n let nextParam = allParams[nextIndex];\n\n if (nextParam !== undefined) {\n throwErr(`Unexpected ${indexToOrdinal(nextIndex)} argument (${nextParam})`);\n }\n};\n\n/*\n * Based on the number of arguments, their position and their type,\n * we return an object that's merged into the final SwalOptions\n */\nconst paramToOption = (opts: any, param: any, index: number, allParams: SwalParams): object => {\n\n const paramType = (typeof param);\n const isString = (paramType === \"string\");\n const isDOMNode = (param instanceof Element);\n\n if (isString) {\n if (index === 0) {\n // Example: swal(\"Hi there!\");\n return {\n text: param,\n };\n }\n\n else if (index === 1) {\n // Example: swal(\"Wait!\", \"Are you sure you want to do this?\");\n // (The text is now the second argument)\n return {\n text: param,\n title: allParams[0],\n };\n }\n\n else if (index === 2) {\n // Example: swal(\"Wait!\", \"Are you sure?\", \"warning\");\n expectOptionsOrNothingAfter(index, allParams);\n\n return {\n icon: param,\n };\n }\n\n else {\n invalidParam(param, index);\n }\n }\n\n else if (isDOMNode && index === 0) {\n // Example: swal();\n expectOptionsOrNothingAfter(index, allParams);\n\n return {\n content: param,\n };\n }\n\n else if (isPlainObject(param)) {\n expectNothingAfter(index, allParams);\n\n return param;\n }\n\n else {\n invalidParam(param, index);\n }\n\n};\n\n/*\n * No matter if the user calls swal with\n * - swal(\"Oops!\", \"An error occurred!\", \"error\") or\n * - swal({ title: \"Oops!\", text: \"An error occurred!\", icon: \"error\" })\n * ... we always want to transform the params into the second version\n */\nexport const getOpts = (...params: SwalParams): SwalOptions => {\n let opts = {};\n\n params.forEach((param, index) => {\n let changes: object = paramToOption(opts, param, index, params);\n Object.assign(opts, changes);\n });\n\n // Since Object.assign doesn't deep clone,\n // we need to do this:\n let buttonListOpts = pickButtonParam(opts);\n opts.buttons = getButtonListOpts(buttonListOpts);\n delete opts.button;\n\n opts.content = getContentOpts(opts.content);\n\n const finalOptions: SwalOptions = Object.assign({}, defaultOpts, userDefaults, opts);\n\n // Check if the users uses any deprecated options:\n Object.keys(finalOptions).forEach(optionName => {\n if (DEPRECATED_OPTS[optionName]) {\n logDeprecation(optionName);\n }\n });\n\n return finalOptions;\n};\n" }, { "path": "src/modules/state.ts", "content": "import { CONFIRM_KEY } from './options/buttons';\n\nexport interface SwalState {\n isOpen: boolean,\n promise: {\n resolve?(value: string): void,\n reject?(): void,\n },\n actions: {\n [namespace: string]: {\n value?: string | any,\n closeModal?: boolean\n },\n },\n timer: number,\n};\n\nexport interface ActionOptions {\n [buttonNamespace: string]: {\n value?: string,\n closeModal?: boolean\n },\n};\n\nconst defaultState: SwalState = {\n isOpen: false,\n promise: null,\n actions: {},\n timer: null,\n};\n\nlet state: SwalState = Object.assign({}, defaultState);\n\nexport const resetState = (): void => {\n state = Object.assign({}, defaultState);\n}\n\n/*\n * Change what the promise resolves to when the user clicks the button.\n * This is called internally when using { input: true } for example.\n */\nexport const setActionValue = (opts: string|ActionOptions) => {\n\n if (typeof opts === \"string\") {\n return setActionValueForButton(CONFIRM_KEY, opts);\n }\n\n for (let namespace in opts) {\n setActionValueForButton(namespace, opts[namespace]);\n }\n};\n\nconst setActionValueForButton = (namespace: string, value: string | any) => {\n if (!state.actions[namespace]) {\n state.actions[namespace] = {};\n }\n\n Object.assign(state.actions[namespace], {\n value,\n });\n};\n\n/*\n * Sets other button options, e.g.\n * whether the button should close the modal or not\n */\nexport const setActionOptionsFor = (buttonKey: string, {\n closeModal = true,\n} = {}) => {\n Object.assign(state.actions[buttonKey], {\n closeModal,\n });\n};\n\nexport default state;\n\n" }, { "path": "src/modules/utils.ts", "content": "/*\n * Get a DOM element from a class name:\n */\nexport const getNode = (className: string): HTMLElement => {\n const selector = `.${className}`;\n\n return document.querySelector(selector);\n};\n\nexport const stringToNode = (html: string): HTMLElement => {\n let wrapper: HTMLElement = document.createElement('div');\n wrapper.innerHTML = html.trim();\n\n return wrapper.firstChild;\n};\n\nexport const insertAfter = (newNode: Node, referenceNode: Node) => {\n let nextNode = referenceNode.nextSibling;\n let parentNode = referenceNode.parentNode;\n\n parentNode.insertBefore(newNode, nextNode);\n};\n\nexport const removeNode = (node: Node) => {\n node.parentElement.removeChild(node);\n};\n\nexport const throwErr = (message: string) => {\n // Remove multiple spaces:\n message = message.replace(/ +(?= )/g,'');\n message = message.trim();\n\n throw `SweetAlert: ${message}`;\n};\n\n/*\n * Match plain objects ({}) but NOT null\n */\nexport const isPlainObject = (value: any): boolean => {\n if (Object.prototype.toString.call(value) !== '[object Object]') {\n return false;\n } else {\n var prototype = Object.getPrototypeOf(value);\n return prototype === null || prototype === Object.prototype;\n }\n};\n\n/*\n * Take a number and return a version with ordinal suffix\n * Example: 1 => 1st\n */\nexport const ordinalSuffixOf = (num: number): string => {\n let j = num % 10;\n let k = num % 100;\n\n if (j === 1 && k !== 11) {\n return `${num}st`;\n }\n\n if (j === 2 && k !== 12) {\n return `${num}nd`;\n }\n\n if (j === 3 && k !== 13) {\n return `${num}rd`;\n }\n\n return `${num}th`;\n};\n\n" }, { "path": "src/polyfills.js", "content": "/**\n * Promise polyfill\n */\nvar Promise = require('promise-polyfill');\n\nif (typeof window !== 'undefined' && !window.Promise) {\n window.Promise = Promise;\n}\n\n/**\n * Object.assign() polyfill\n */\nrequire('es6-object-assign/auto');\n\n/**\n * String.prototype.includes() polyfill\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes#Polyfill\n */\nif (!String.prototype.includes) {\n String.prototype.includes = function(search, start) {\n 'use strict';\n if (typeof start !== 'number') {\n start = 0;\n }\n\n if (start + search.length > this.length) {\n return false;\n } else {\n return this.indexOf(search, start) !== -1;\n }\n };\n}\n\n/**\n * Array.prototype.includes() polyfill\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes#Polyfill\n */\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, 'includes', {\n value: function(searchElement, fromIndex) {\n\n // 1. Let O be ? ToObject(this value).\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(searchElement, elementK) is true, return true.\n // c. Increase k by 1.\n if (sameValueZero(o[k], searchElement)) {\n return true;\n }\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\n/**\n * ChildNode.remove() polyfill\n * @see https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md\n */\n\nif (typeof window !== 'undefined') {\n (function (arr) {\n arr.forEach(function (item) {\n if (item.hasOwnProperty('remove')) {\n return;\n }\n Object.defineProperty(item, 'remove', {\n configurable: true,\n enumerable: true,\n writable: true,\n value: function remove() {\n this.parentNode.removeChild(this);\n }\n });\n });\n })([Element.prototype, CharacterData.prototype, DocumentType.prototype]);\n}\n" }, { "path": "src/sweetalert.css", "content": "@import './css/icons';\n@import './css/text';\n@import './css/buttons';\n@import './css/content';\n@import './css/button-loader';\n\n:root {\n --swal-modal-width: 478px;\n}\n\n.swal-overlay {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n text-align: center;\n font-size: 0; /* Remove gap between inline-block elements */\n overflow-y: auto;\n\n background-color: rgba(0, 0, 0, 0.4);\n z-index: 10000;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s;\n &::before {\n content: ' ';\n display: inline-block;\n vertical-align: middle; /* vertical alignment of the inline element */\n height: 100%;\n }\n\n &--show-modal {\n opacity: 1;\n pointer-events: auto;\n\n & .swal-modal {\n opacity: 1;\n pointer-events: auto;\n box-sizing: border-box;\n animation: showSweetAlert 0.3s;\n will-change: transform;\n }\n }\n}\n\n.swal-modal {\n width: var(--swal-modal-width);\n opacity: 0;\n pointer-events: none;\n background-color: white;\n text-align: center;\n border-radius: 5px;\n\n position: static;\n margin: 20px auto;\n display: inline-block;\n vertical-align: middle;\n\n transform: scale(1);\n transform-origin: 50% 50%;\n z-index: 10001;\n transition: transform 0.3s, opacity 0.2s;\n\n @media all and (max-width: 500px) {\n width: calc(100% - 20px);\n }\n}\n\n@keyframes showSweetAlert {\n 0% {\n transform: scale(1);\n }\n 1% {\n transform: scale(0.5);\n }\n\n 45% {\n transform: scale(1.05);\n }\n\n 80% {\n transform: scale(0.95);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n/*\nTarget IE8-IE10 due to incompability with the css `pointer-event` property.\n@see https://github.com/t4t5/sweetalert/issues/863\n*/\n@media screen\\0 {\n .swal-overlay {\n visibility: hidden;\n }\n\n .swal-overlay--show-modal {\n visibility: visible;\n }\n\n .swal-button__loader {\n visibility: hidden;\n }\n\n .swal-overlay--show-modal .swal-modal {\n visibility: visible;\n }\n\n .swal-modal {\n visibility: hidden;\n }\n}\n" }, { "path": "src/sweetalert.d.ts", "content": "import swal, { SweetAlert } from \"./core\";\n\ndeclare global {\n const swal: SweetAlert;\n const sweetAlert: SweetAlert;\n}\n\nexport default swal;\nexport as namespace swal;\n" }, { "path": "src/sweetalert.js", "content": "/*\n * This makes sure that we can use the global\n * swal() function, instead of swal.default()\n * See: https://github.com/webpack/webpack/issues/3929\n */\n\nif (typeof window !== 'undefined') {\n require('./sweetalert.css');\n}\n\nrequire('./polyfills');\n\nvar swal = require('./core').default;\n\nmodule.exports = swal;\n" }, { "path": "test/actions.test.ts", "content": "import {\n swal,\n removeSwal,\n $$,\n CLASS_NAMES,\n} from './utils';\n\nconst { \n OVERLAY,\n CONFIRM_BUTTON,\n TITLE,\n} = CLASS_NAMES;\n\nafterEach(() => removeSwal());\n\ndescribe(\"promise value\", () => {\n\n test(\"dismisses modal by clicking on overlay\", async () => {\n expect.assertions(1);\n\n setTimeout(() => {\n $$(OVERLAY).click();\n }, 500);\n\n const value = await swal();\n\n expect(value).toBeNull();\n });\n\n test(\"changes value with setActionValue\", async () => {\n\n setTimeout(() => {\n swal.setActionValue(\"test\");\n $$(CONFIRM_BUTTON).click();\n }, 500);\n\n const value = await swal(); \n\n expect(value).toEqual(\"test\");\n });\n\n test(\"changes cancel value with setActionValue\", async () => {\n\n setTimeout(() => {\n swal.setActionValue({\n cancel: \"test\",\n });\n $$(OVERLAY).click();\n }, 500);\n\n const value = await swal();\n\n expect(value).toEqual(\"test\");\n });\n\n /*\n * @TODO!\n *\n test(\"cannot dismiss if 'clickOutside' is false\", async () => {\n\n });\n */\n\n});\n\n" }, { "path": "test/button-options.test.ts", "content": "import {\n getButtonListOpts\n} from '../src/modules/options/buttons';\n\ndescribe(\"return buttons options\", () => {\n\n test(\"returns invisible buttons on false\", () => {\n const opts = getButtonListOpts(false);\n\n expect(opts).toMatchObject({\n cancel: {\n visible: false,\n },\n confirm: {\n visible: false,\n },\n });\n });\n\n test(\"returns default obj on true\", () => {\n const opts = getButtonListOpts(true);\n\n expect(opts).toMatchObject({\n cancel: {\n className: \"\",\n closeModal: true,\n text: \"Cancel\",\n value: null,\n visible: true,\n },\n confirm: {\n className: \"\",\n closeModal: true,\n text: \"OK\",\n value: true,\n visible: true,\n },\n });\n });\n\n test(\"returns single button on string\", () => {\n const opts = getButtonListOpts(\"Test\");\n\n expect(opts).toMatchObject({\n cancel: {\n visible: false,\n },\n confirm: {\n closeModal: true,\n text: \"Test\",\n value: true,\n visible: true,\n },\n });\n });\n\n test(\"returns two buttons on array of strings\", () => {\n const opts = getButtonListOpts([\"Annuler\", \"Confirmer\"]);\n\n expect(opts).toMatchObject({\n cancel: {\n closeModal: true,\n text: \"Annuler\",\n value: null,\n visible: true,\n },\n confirm: {\n closeModal: true,\n text: \"Confirmer\",\n value: true,\n visible: true,\n },\n });\n });\n\n test(\"returns only cancel button when using boolean in array\", () => {\n const opts = getButtonListOpts([true, false]);\n\n expect(opts).toMatchObject({\n cancel: {\n closeModal: true,\n text: \"Cancel\",\n value: null,\n visible: true,\n },\n confirm: {\n visible: false,\n },\n });\n });\n\n});\n" }, { "path": "test/buttons.test.ts", "content": "import {\n $,\n swal,\n removeSwal,\n $$,\n onAction,\n CLASS_NAMES,\n delay,\n} from './utils';\n\nconst {\n BUTTON,\n CONFIRM_BUTTON,\n CANCEL_BUTTON,\n MODAL,\n} = CLASS_NAMES;\n\nafterEach(() => removeSwal());\n\ndescribe(\"show buttons\", () => {\n\n test(\"shows only confirm button by default\", () => {\n swal();\n\n expect($$(BUTTON).length).toBe(1);\n expect($$(BUTTON).hasClass(CONFIRM_BUTTON)).toBeTruthy();\n });\n\n test(\"hides all buttons\", () => {\n swal({\n buttons: false,\n });\n\n expect($$(BUTTON).length).toBe(0);\n });\n\n test(\"shows confirm and cancel buttons\", () => {\n swal({\n buttons: true,\n });\n\n expect($$(BUTTON).length).toBe(2);\n expect($$(CONFIRM_BUTTON).length).toBe(1);\n expect($$(CANCEL_BUTTON).length).toBe(1);\n });\n\n test(\"sets button text\", () => {\n swal({\n button: \"Test\",\n });\n\n expect($$(CONFIRM_BUTTON).text()).toBe(\"Test\");\n });\n\n test(\"sets button texts with array\", () => {\n swal({\n buttons: [\"Stop\", \"Do it\"],\n });\n\n expect($$(CONFIRM_BUTTON).text()).toBe(\"Do it\");\n expect($$(CANCEL_BUTTON).text()).toBe(\"Stop\");\n });\n\n test(\"sets default button texts with array\", () => {\n swal({\n buttons: [true, true],\n });\n\n expect($$(CONFIRM_BUTTON).text()).toBe(\"OK\");\n expect($$(CANCEL_BUTTON).text()).toBe(\"Cancel\");\n });\n\n test(\"uses button object\", () => {\n swal({\n buttons: {\n cancel: \"Run away!\",\n confirm: true,\n }\n });\n\n expect($$(CANCEL_BUTTON).text()).toBe(\"Run away!\");\n expect($$(CONFIRM_BUTTON).text()).toBe(\"OK\");\n });\n\n test(\"sets more than 2 buttons\", () => {\n swal({\n buttons: {\n cancel: \"Run away!\",\n catch: {\n text: \"Throw Pokéball!\",\n },\n defeat: true,\n },\n });\n\n expect($$(BUTTON).length).toBe(3);\n expect($$(CANCEL_BUTTON).text()).toBe(\"Run away!\");\n expect($$(CONFIRM_BUTTON).length).toBe(0);\n\n expect($$(`${BUTTON}--catch`).length).toBe(1);\n expect($$(`${BUTTON}--catch`).text()).toBe(\"Throw Pokéball!\");\n\n expect($$(`${BUTTON}--defeat`).length).toBe(1);\n expect($$(`${BUTTON}--defeat`).text()).toBe(\"Defeat\");\n });\n\n});\n\ndescribe(\"buttons resolve values\", () => {\n\n test(\"confirm button resolves to true\", async () => {\n expect.assertions(1);\n\n setTimeout(() => {\n $$(CONFIRM_BUTTON).click();\n }, 500);\n\n const value = await swal();\n\n expect(value).toBeTruthy();\n });\n\n test(\"cancel button resolves to null\", async () => {\n expect.assertions(1);\n\n setTimeout(() => {\n $$(CANCEL_BUTTON).click();\n }, 500);\n\n const value = await swal({\n buttons: true,\n });\n\n expect(value).toBeNull();\n });\n\n test(\"can specify resolve value\", async () => {\n expect.assertions(1);\n\n setTimeout(() => {\n $$(CONFIRM_BUTTON).click();\n }, 500);\n\n const value = await swal({\n button: {\n value: \"test\",\n },\n });\n\n expect(value).toBe(\"test\");\n });\n\n test(\"extra button resolves to string by default\", async () => {\n expect.assertions(1);\n\n setTimeout(() => {\n $(`.${BUTTON}--test`).click();\n }, 500);\n\n const value = await swal({\n buttons: {\n test: true,\n },\n });\n\n expect(value).toBe(\"test\");\n });\n\n});\n\ndescribe(\"loading\", () => {\n\n test(\"shows loading state\", async () => {\n swal({\n button: {\n text: \"HEPP\",\n closeModal: false,\n },\n });\n\n const $button = $(`.${BUTTON}--confirm`);\n\n expect($button.hasClass('swal-button--loading')).toBeFalsy();\n\n $button.click();\n\n expect($button.hasClass('swal-button--loading')).toBeTruthy();\n });\n\n});\n\ndescribe(\"set class name\", () => {\n\n test(\"sets single class name as string\", async () => {\n swal({\n button: {\n text: \"TEST\",\n closeModal: true,\n className: 'single-class'\n },\n });\n\n const $button = $(`.${BUTTON}--confirm`);\n expect($button.hasClass('single-class')).toBeTruthy();\n });\n\n test(\"sets multiple class names as string\", async () => {\n swal({\n button: {\n text: \"TEST\",\n closeModal: true,\n className: 'class1 class2'\n },\n });\n\n const $button = $(`.${BUTTON}--confirm`);\n expect($button.hasClass('class1')).toBeTruthy();\n expect($button.hasClass('class2')).toBeTruthy();\n });\n\n test(\"sets multiple class names as array\", async () => {\n swal({\n button: {\n text: \"TEST\",\n closeModal: true,\n className: [\"class1\", \"class2\"]\n },\n });\n\n const $button = $(`.${BUTTON}--confirm`);\n expect($button.hasClass('class1')).toBeTruthy();\n expect($button.hasClass('class2')).toBeTruthy();\n });\n\n});\n" }, { "path": "test/content.test.ts", "content": "import {\n swal,\n removeSwal,\n $,\n $$,\n CLASS_NAMES,\n} from './utils';\n\nconst {\n CONTENT,\n MODAL_TEXT\n} = CLASS_NAMES;\n\nafterEach(() => removeSwal());\n\ndescribe(\"show content\", () => {\n\n test(\"shows no content by default\", () => {\n swal(\"Hello\");\n\n expect($$(CONTENT).length).toBe(0);\n });\n\n test(\"shows input when using content: 'input'\", () => {\n swal({\n content: \"input\",\n });\n\n const inputSelector = `${CONTENT}__input`;\n\n expect($$(CONTENT).length).toBe(1);\n expect($$(inputSelector).length).toBe(1);\n expect($$(inputSelector).get(0).getAttribute('type')).toBeNull();\n });\n\n test(\"can customize input with more advanced content options\", () => {\n swal({\n content: {\n element: \"input\",\n attributes: {\n placeholder: \"Type your password\",\n type: \"password\",\n },\n },\n });\n\n const inputSelector = `${CONTENT}__input`;\n\n expect($$(CONTENT).length).toBe(1);\n expect($$(inputSelector).length).toBe(1);\n expect($$(inputSelector).get(0).getAttribute('type')).toBe('password');\n expect($$(inputSelector).get(0).getAttribute('placeholder')).toBe('Type your password');\n });\n\n test(\"can set content to custom DOM node\", () => {\n let btn = document.createElement('button');\n btn.classList.add('custom-element');\n\n swal({\n content: btn,\n });\n\n expect($$(CONTENT).length).toBe(1);\n expect($$('custom-element').length).toBe(1);\n });\n\n});\n\ndescribe(\"show modal text\", () => {\n test(\"transforms newline to break\", () => {\n swal('Hello\\nWorld\\n');\n\n expect($(`.${MODAL_TEXT} br`).length).toBe(2);\n });\n\n test(\"escapes HTML elements\", () => {\n const text = '';\n swal(text);\n\n expect($(`.${MODAL_TEXT} script`).length).toBe(0);\n expect($$(MODAL_TEXT).text()).toEqual(expect.stringMatching(text));\n });\n});\n" }, { "path": "test/icons.test.ts", "content": "import {\n swal,\n $$,\n CLASS_NAMES,\n removeSwal,\n} from './utils';\n\nconst { \n ICON,\n} = CLASS_NAMES;\n\nafterEach(() => removeSwal());\n\ndescribe(\"show icons\", () => {\n\n test(\"shows icon depending on third argument\", () => {\n swal(\"Error\", \"An error occurred!\", \"error\");\n\n expect($$(ICON).length).toBe(1);\n expect($$(ICON).hasClass(`${ICON}--error`)).toBeTruthy();\n });\n\n test(\"shows icon when using 'icon' object key\", () => {\n swal({\n icon: 'warning',\n });\n\n expect($$(ICON).length).toBe(1);\n expect($$(ICON).hasClass(`${ICON}--warning`)).toBeTruthy();\n });\n\n test(\"hides icon when setting 'icon' key to 'false'\", () => {\n swal({\n icon: false,\n });\n\n expect($$(ICON).length).toBe(0);\n });\n\n});\n\n" }, { "path": "test/index.test.ts", "content": "import {\n $,\n swal,\n removeSwal,\n $$,\n CLASS_NAMES,\n} from './utils';\n\nconst { \n MODAL, \n OVERLAY, \n MODAL_TITLE,\n MODAL_TEXT, \n ICON,\n FOOTER,\n} = CLASS_NAMES;\n\nafterEach(() => removeSwal());\n\ndescribe(\"init\", () => {\n\n test(\"adds elements on first call\", () => {\n expect($$(OVERLAY).length).toEqual(0);\n\n swal(\"Hello world!\");\n\n expect($$(OVERLAY).length).toBe(1);\n expect($$(MODAL).length).toBe(1);\n });\n\n});\n\ndescribe(\"string parameters\", () => {\n\n test(\"shows text when using 1 param\", () => {\n swal(\"Hello world!\");\n\n expect($$(MODAL_TEXT).is(':first-child')).toBeTruthy();\n expect($$(MODAL_TEXT).text()).toBe(\"Hello world!\");\n expect($$(MODAL_TEXT).next().hasClass(FOOTER)).toBeTruthy();\n });\n\n test(\"shows title and text when using 2 params\", () => {\n swal(\"Title\", \"text\");\n\n expect($$(MODAL_TITLE).is(':first-child')).toBeTruthy();\n expect($$(MODAL_TITLE).text()).toBe(\"Title\");\n expect($$(MODAL_TEXT).text()).toBe(\"text\");\n expect($$(MODAL_TEXT).next().hasClass(FOOTER)).toBeTruthy();\n });\n\n test(\"shows icon, title and text when using 3 params\", () => {\n swal(\"Oops\", \"text\", \"error\");\n\n expect($$(ICON).is(':first-child')).toBeTruthy();\n expect($$(ICON).hasClass(`${ICON}--error`)).toBeTruthy();\n\n expect($$(MODAL_TITLE).is(':nth-child(2)')).toBeTruthy();\n expect($$(MODAL_TITLE).text()).toBe(\"Oops\");\n\n expect($$(MODAL_TEXT).is(':nth-child(3)')).toBeTruthy();\n expect($$(MODAL_TEXT).text()).toBe(\"text\");\n expect($$(MODAL_TEXT).next().hasClass(FOOTER)).toBeTruthy();\n });\n\n});\n\n\n" }, { "path": "test/utils.ts", "content": "export const swal = require('../dist/sweetalert.min');\n\nexport const $ = require('jquery');\n\nexport const removeSwal = () => $('.swal-overlay').remove();\n\nexport const $$ = (className) => $(`.${className}`);\n\nexport { CLASS_NAMES } from '../src/modules/class-list';\n\nexport const delay = (ms) => {\n return new Promise(resolve => setTimeout(resolve, ms));\n}\n\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"sourceMap\": true,\n \"noImplicitAny\": true,\n \"module\": \"commonjs\",\n \"declaration\": true,\n \"declarationDir\": \"typings\",\n \"target\": \"es5\",\n \"outDir\": \"tmp\",\n \"lib\": [\"es2015\", \"es2016\", \"dom\"]\n },\n \"include\": [\n \"./src/*.ts\"\n ]\n}\n" }, { "path": "tslint.json", "content": "{\n \"rules\": {\n \"no-unused-variable\": true\n }\n}\n" }, { "path": "typings/core.d.ts", "content": "import { ActionOptions, SwalState } from './modules/state';\nimport { SwalOptions } from './modules/options';\nexport declare type SwalParams = (string | Partial)[];\nexport interface SweetAlert {\n (...params: SwalParams): Promise;\n close?(namespace?: string): void;\n getState?(): SwalState;\n setActionValue?(opts: string | ActionOptions): void;\n stopLoading?(): void;\n setDefaults?(opts: object): void;\n}\ndeclare const swal: SweetAlert;\nexport default swal;\n" }, { "path": "typings/modules/actions.d.ts", "content": "import { SwalState } from './state';\nexport declare const openModal: () => void;\nexport declare const onAction: (namespace?: string) => void;\nexport declare const getState: () => SwalState;\nexport declare const stopLoading: () => void;\n" }, { "path": "typings/modules/class-list/index.d.ts", "content": "export interface ClassNameList {\n [key: string]: string;\n}\nexport declare const CLASS_NAMES: ClassNameList;\nexport default CLASS_NAMES;\n" }, { "path": "typings/modules/event-listeners.d.ts", "content": "import { SwalOptions } from './options';\ndeclare const addEventListeners: (opts: SwalOptions) => void;\nexport default addEventListeners;\n" }, { "path": "typings/modules/init/buttons.d.ts", "content": "import { ButtonList } from '../options/buttons';\ndeclare const initButtons: (buttons: ButtonList, dangerMode: boolean) => void;\nexport default initButtons;\n" }, { "path": "typings/modules/init/content.d.ts", "content": "import { ContentOptions } from '../options/content';\ndeclare const initContent: (opts: ContentOptions) => void;\nexport default initContent;\n" }, { "path": "typings/modules/init/icon.d.ts", "content": "declare const initIcon: (str: string) => void;\nexport default initIcon;\n" }, { "path": "typings/modules/init/index.d.ts", "content": "import { SwalOptions } from '../options';\nexport declare const init: (opts: SwalOptions) => void;\nexport default init;\n" }, { "path": "typings/modules/init/modal.d.ts", "content": "import { SwalOptions } from '../options';\nexport declare const injectElIntoModal: (markup: string) => HTMLElement;\nexport declare const initModalContent: (opts: SwalOptions) => void;\ndeclare const initModalOnce: () => void;\nexport default initModalOnce;\n" }, { "path": "typings/modules/init/overlay.d.ts", "content": "declare const initOverlayOnce: () => void;\nexport default initOverlayOnce;\n" }, { "path": "typings/modules/init/text.d.ts", "content": "export declare const initTitle: (title: string) => void;\nexport declare const initText: (text: string) => void;\n" }, { "path": "typings/modules/markup/buttons.d.ts", "content": "export declare const buttonMarkup: string;\n" }, { "path": "typings/modules/markup/content.d.ts", "content": "export declare const contentMarkup: string;\n" }, { "path": "typings/modules/markup/icons.d.ts", "content": "export declare const errorIconMarkup: () => string;\nexport declare const warningIconMarkup: () => string;\nexport declare const successIconMarkup: () => string;\n" }, { "path": "typings/modules/markup/index.d.ts", "content": "export * from './modal';\nexport { default as overlayMarkup } from './overlay';\nexport * from './icons';\nexport * from './content';\nexport * from './buttons';\nexport declare const iconMarkup: string;\nexport declare const titleMarkup: string;\nexport declare const textMarkup: string;\nexport declare const footerMarkup: string;\n" }, { "path": "typings/modules/markup/modal.d.ts", "content": "export declare const modalMarkup: string;\nexport default modalMarkup;\n" }, { "path": "typings/modules/markup/overlay.d.ts", "content": "declare const overlay: string;\nexport default overlay;\n" }, { "path": "typings/modules/options/buttons.d.ts", "content": "export interface ButtonOptions {\n visible?: boolean;\n text?: string;\n value?: any;\n className?: string | Array;\n closeModal?: boolean;\n}\nexport interface ButtonList {\n [buttonNamespace: string]: ButtonOptions | boolean;\n}\nexport declare const CONFIRM_KEY = \"confirm\";\nexport declare const CANCEL_KEY = \"cancel\";\nexport declare const defaultButtonList: ButtonList;\nexport declare const getButtonListOpts: (opts: string | boolean | object) => ButtonList;\n" }, { "path": "typings/modules/options/content.d.ts", "content": "export interface ContentOptions {\n element: string | Node;\n attributes?: object;\n}\nexport declare const getContentOpts: (contentParam: string | object) => ContentOptions;\n" }, { "path": "typings/modules/options/deprecations.d.ts", "content": "export declare const logDeprecation: (name: string) => void;\nexport interface OptionReplacement {\n replacement?: string;\n onlyRename?: boolean;\n subOption?: string;\n link?: string;\n}\nexport interface OptionReplacementsList {\n [name: string]: OptionReplacement;\n}\nexport declare const DEPRECATED_OPTS: OptionReplacementsList;\n" }, { "path": "typings/modules/options/index.d.ts", "content": "import { ButtonList } from './buttons';\nimport { ContentOptions } from './content';\nexport interface SwalOptions {\n title: string;\n text: string;\n icon: string;\n buttons: ButtonList | Array;\n content: ContentOptions;\n className: string;\n closeOnClickOutside: boolean;\n closeOnEsc: boolean;\n dangerMode: boolean;\n timer: number;\n}\nexport declare const setDefaults: (opts: object) => void;\nexport declare const getOpts: (...params: (string | Partial)[]) => SwalOptions;\n" }, { "path": "typings/modules/state.d.ts", "content": "export interface SwalState {\n isOpen: boolean;\n promise: {\n resolve?(value: string): void;\n reject?(): void;\n };\n actions: {\n [namespace: string]: {\n value?: string | any;\n closeModal?: boolean;\n };\n };\n timer: number;\n}\nexport interface ActionOptions {\n [buttonNamespace: string]: {\n value?: string;\n closeModal?: boolean;\n };\n}\ndeclare let state: SwalState;\nexport declare const resetState: () => void;\nexport declare const setActionValue: (opts: string | ActionOptions) => void;\nexport declare const setActionOptionsFor: (buttonKey: string, {closeModal}?: {\n closeModal?: boolean;\n}) => void;\nexport default state;\n" }, { "path": "typings/modules/utils.d.ts", "content": "export declare const getNode: (className: string) => HTMLElement;\nexport declare const stringToNode: (html: string) => HTMLElement;\nexport declare const insertAfter: (newNode: Node, referenceNode: Node) => void;\nexport declare const removeNode: (node: Node) => void;\nexport declare const throwErr: (message: string) => never;\nexport declare const isPlainObject: (value: any) => boolean;\nexport declare const ordinalSuffixOf: (num: number) => string;\n" }, { "path": "typings/sweetalert.d.ts", "content": "import { SweetAlert } from \"./core\";\n\ndeclare global {\n const sweetAlert: SweetAlert;\n}\ndeclare const swal: SweetAlert;\nexport default swal;\nexport as namespace swal;\n" }, { "path": "webpack.config.js", "content": "const path = require('path');\nconst webpack = require('webpack');\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\n\nmodule.exports = (_env, args) => {\n\n const IS_PROD = args.p;\n\n const BUILD_PATH = 'dist';\n const JS_FILE_NAME = 'sweetalert.min.js';\n const devtool = IS_PROD ? false : 'source-map';\n\n const plugins = [\n new webpack.optimize.ModuleConcatenationPlugin(),\n //new BundleAnalyzerPlugin(),\n ];\n\n if (IS_PROD) {\n plugins.push(\n new CopyWebpackPlugin([{\n from: 'sweetalert.d.ts',\n to: '../typings/sweetalert.d.ts',\n }])\n );\n }\n\n return {\n context: path.resolve(__dirname, 'src'),\n entry: './sweetalert.js',\n plugins,\n\n output: {\n path: path.resolve(__dirname, BUILD_PATH),\n filename: JS_FILE_NAME,\n library: 'swal',\n libraryTarget: 'umd',\n },\n\n resolve: {\n extensions: [\n \".ts\",\n \".js\",\n ],\n },\n\n module: {\n rules: [\n {\n // Expose global swal() function\n test: require.resolve(\"./src/sweetalert\"),\n use: [{\n loader: 'expose-loader',\n options: 'sweetAlert'\n }, {\n loader: 'expose-loader',\n options: 'swal'\n }],\n },\n {\n enforce: 'pre',\n test: /\\.ts?$/,\n loader: 'tslint-loader',\n options: {\n configFile: './tslint.json',\n typeCheck: true,\n },\n exclude: /(node_modules)/,\n },\n {\n /* Compile TypeScript */\n test: /\\.ts$/,\n use: 'ts-loader',\n exclude: /node_modules/,\n },\n {\n /* Use PostCSS */\n test: /\\.css$/,\n use: [\n {\n loader: 'style-loader',\n options: {\n insertAt: 'top',\n },\n },\n { \n loader: 'css-loader', \n options: { \n importLoaders: 1 \n } \n },\n 'postcss-loader',\n ]\n }\n ],\n },\n\n stats: {\n colors: true,\n },\n\n devtool,\n }\n};\n" } ]